:root{
      --bg:#ffffff;
      --text:#1f2937; /* cinza-900 */
      --text_nav:var(--bg);
      --muted:#6b7280; /* cinza-500 */
      --brand:#d63385; /* rosa chá */
      --brand-600:#b52a6e;
      --surface:#f8fafc; /* cinza-50 */
      --ring:#fbcfe8; /* rosa-200 */
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";}
    a{color:var(--brand);text-decoration:none}
    a:hover{text-decoration:underline}

    /* Cabeçalho */
    .topbar{position:sticky;top:0;z-index:40;background:#d63385;backdrop-filter: saturate(180%) blur(8px);border-bottom:1px solid #ffffff}
    .wrap{max-width:1100px;margin:0 auto;padding:0 16px}
    .nav{display:flex;align-items:center;justify-content:space-between;height:64px; color: var(--text_nav); font-weight: 500;}
    .logo{display:flex;align-items:center;gap:10px}
    .logo img{height:100px;width:auto}
    .menu{display:flex;gap:20px;align-items:center}
    .menu a{font-size:15px;color:var(--text_nav);font-weight:500}

    /* Hero */
    .hero{background:linear-gradient(180deg,#fff 0%, #fff 35%, var(--surface) 100%);}
    .hero .wrap{display:grid;grid-template-columns: 1.1fr 0.9fr;gap:28px;padding:40px 16px}
    .badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--ring);border-radius:999px;color:var(--brand);font-size:12px;background:#fff}
    .h1{font-size:34px;line-height:1.15;margin:12px 0 8px 0}
    .lead{color:var(--muted);font-size:16px;max-width:52ch}
    .info-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:10px;margin-top:14px}
    .info-chip{background:#fff;border:1px solid #eef1f4;border-radius:12px;padding:10px 10px;font-size:14px}

    /* Cartões e seções */
    .section{padding:28px 0}
    .card{background:#fff;border:1px solid #eef1f4;border-radius:16px;padding:18px}
    .card h3{margin:0 0 8px 0;font-size:18px}
    .grid{display:grid;gap:16px}
    @media (min-width: 900px){ .grid-2{grid-template-columns:1fr 1fr} }

    /* Formulário */
    form{display:grid;gap:14px}
    .field{display:grid;gap:6px}
    label{font-size:14px;color:#111827}
    input, select, textarea{
      font: inherit; width:100%; padding:12px 12px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; color:inherit;
      outline:none; transition: box-shadow .15s, border-color .15s;
    }
    input:focus, select:focus, textarea:focus{border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring)}
    .help{color:var(--muted);font-size:12px}
    .actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
    .btn{appearance:none;border:0;border-radius:12px;padding:12px 18px;font-weight:600;background:var(--brand);color:#fff;cursor:pointer}
    .btn:hover{background:var(--brand-600)}
    .btn.secondary{background:#111827;color:#fff}

    /* Lista */
    .list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
    .list li{display:flex;gap:10px;align-items:flex-start}
    .dot{height:8px;width:8px;border-radius:999px;background:var(--brand);margin-top:8px}

    /* Rodapé */
    footer{padding:24px 0;border-top:1px solid #eef1f4;color:var(--muted);font-size:14px}

    /* Responsivo */
    @media (max-width: 899px){
      .hero .wrap{grid-template-columns:1fr}
      .info-grid{grid-template-columns:1fr;gap:8px}
      .menu{display:none}
    }
    
    /* botão hambúrguer escondido no desktop */
    .hamburger {
      display: none;
      font-size: 28px;
      line-height: 1;
      background: none;
      border: none;
      color: #e5e7eb;
      cursor: pointer;
      padding: 8px;
    }
    
    /* menu padrão no desktop */
    .menu {
      display: flex;
      gap: 16px;
    }
    
    /* mobile */
    @media (max-width: 768px) {
      .hamburger { display: block; }
    
      /* o header precisa ter posição de referência */
      .topbar { position: relative; }
    
      .menu {
        display: none;
        position: absolute;
        right: 12px;
        top: 60px;         /* ajuste conforme a altura do seu header */
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 10px;
        flex-direction: column;
        min-width: 200px;
        box-shadow: 0 10px 20px rgba(0,0,0,.06);
        z-index: 1000;
      }
    
      .menu a {
        padding: 10px 8px;
        border-radius: 8px;
        text-decoration: none;
        color: #111827;
      }
    
      .menu a:hover {
        background: #f5f6f8;
      }
    
      .menu.show { display: flex; }
    }