/* Extraído de design/landing.html — layout/componentes da página, sem tokens. */
/* Página-específico da LP. Componentes e tokens vêm de ../css/. */
  *{ -webkit-tap-highlight-color:transparent; }
  html{ scroll-behavior:smooth; scroll-padding-top:88px; }
  body{
    background:var(--bg); color:var(--text);
    font-family:var(--font-sans); font-size:16px; line-height:1.5;
    overflow-x:hidden; -webkit-font-smoothing:antialiased;
  }
  .wrap{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
  @media(max-width:767px){ .wrap{ padding:0 16px; } }

  /* seções: muito ar, separação por hairline (nunca por fundo) */
  .band{ border-top:1px solid var(--line); }
  .section{ padding:72px 0; }
  @media(min-width:1024px){ .section{ padding:var(--space-section) 0; } }

  /* nav 64px branca com hairline */
  .nav{
    position:sticky; top:0; z-index:40; height:64px;
    background:var(--surface); border-bottom:1px solid var(--line);
  }
  .nav-links{ display:none; align-items:center; gap:var(--space-6); font-size:16px; color:var(--text); }
  @media(min-width:1024px){ .nav-links{ display:flex; } }
  .nav-links a:hover{ color:var(--brand-text); }
  .nav-cta{ display:none; }
  @media(min-width:640px){ .nav-cta{ display:block; } }

  /* hero: painel com o ÚNICO gradiente saturado da página */
  .hero-panel{
    position:relative; overflow:hidden;
    border-radius:var(--radius-lg);
    background:linear-gradient(160deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    padding:var(--space-5);
  }
  @media(min-width:768px){ .hero-panel{ padding:var(--space-8); } }
  .hero-panel::after{
    content:''; position:absolute; inset:auto -60px -120px auto; width:320px; height:320px;
    border-radius:50%; background:rgba(255,255,255,.12); filter:blur(50px); pointer-events:none;
  }

  /* card de proposta que flutua no painel */
  .mock{ background:var(--surface); border-radius:var(--radius); padding:var(--space-4); position:relative; z-index:1; }
  .mock-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
  .mock-row:last-child{ border-bottom:0; }
  .mock-total{ display:flex; align-items:baseline; justify-content:space-between; padding-top:12px; border-top:1px solid var(--line); }
  .mock-total dd{ margin:0; font-family:var(--font-display); font-size:1.75rem; line-height:1.25; }
  .mock-pix{ background:var(--bg-elev); border-radius:var(--radius); padding:12px; margin-top:12px; }

  /* comparativo da oferta */
  .compare{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }
  .compare-grid{ display:grid; }
  @media(min-width:520px){ .compare-grid{ grid-template-columns:1fr 1fr; } }
  .compare-cell{ padding:var(--space-5); border-bottom:1px solid var(--line); }
  @media(min-width:520px){ .compare-cell{ border-bottom:0; border-right:1px solid var(--line); } .compare-cell:last-child{ border-right:0; } }
  .compare-cell--win{ background:var(--success-soft); }
  .compare-save{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:var(--space-5); background:var(--bg-elev); border-top:1px solid var(--line); }

  /* FAQ */
  details.faq{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); overflow:hidden; }
  details.faq + details.faq{ margin-top:12px; }
  details.faq summary{
    list-style:none; cursor:pointer; padding:var(--space-5);
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
    font-size:16px; font-weight:600; line-height:1.5; color:var(--text);
  }
  details.faq summary::-webkit-details-marker{ display:none; }
  details.faq summary .plus{
    flex:none; width:28px; height:28px; position:relative; border-radius:var(--radius-pill);
    background:var(--bg-elev); transition:transform .2s ease;
  }
  details.faq summary .plus::before, details.faq summary .plus::after{
    content:''; position:absolute; inset:0; margin:auto; background:var(--text); border-radius:2px;
  }
  details.faq summary .plus::before{ width:12px; height:2px; }
  details.faq summary .plus::after{ width:2px; height:12px; transition:opacity .2s ease; }
  details.faq[open] summary .plus{ transform:rotate(90deg); background:var(--brand-soft); }
  details.faq[open] summary .plus::after{ opacity:0; }
  details.faq .answer{ padding:0 var(--space-5) var(--space-5); color:var(--text-2); font-size:16px; line-height:1.56; }

  /* ícones de contexto */
  .ico-box{
    width:48px; height:48px; border-radius:var(--radius-pill); display:grid; place-items:center;
    background:var(--bg-elev); color:var(--text-2); flex:none;
  }
  .ico-box--brand{ background:var(--success-soft); color:var(--brand-text); }

  .check svg{ width:20px; height:20px; color:var(--brand-text); flex:none; }

  /* barra fixa mobile */
  .mobile-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--surface); border-top:1px solid var(--line);
  }
  @media(min-width:768px){ .mobile-bar{ display:none; } }

  ::selection{ background:var(--success-soft); color:var(--text); }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }