/* Plano Certo Seguro — folha única.
   Todos os valores saem de 02-design/design-system.json. Nada de cor, fonte ou
   espaçamento fora dos tokens abaixo. */

/* ---------- fontes auto-hospedadas (Google Fonts custa ~1s de bloqueio) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); }

/* ---------- tokens ---------- */
:root {
  --deep: #0B1D3A;
  --deep-ink: #08152B;
  --sea: #144A8B;
  --sea-soft: #A9C6DF;
  --gold: #D4A017;
  --gold-strong: #B8880F;
  --gold-tint: #FBF3DF;

  --page: #F7F9FB;
  --sunk: #F2F4F7;
  --card: #FFFFFF;

  --ink-strong: #0B1D3A;
  --ink: #1B2B44;
  --ink-soft: #4A5A73;
  --ink-faint: #63718A;
  --on-deep: #F2F4F7;
  --on-deep-soft: #A9C6DF;

  --line: #DDE5EE;
  --line-strong: #A9C6DF;
  --line-inverse: #1E3559;

  --whatsapp: #25D366;
  --focus: #144A8B;
  --positive: #1F7A4D;

  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(11, 29, 58, .06);
  --sh-md: 0 4px 14px rgba(11, 29, 58, .08);
  --sh-lg: 0 12px 32px rgba(11, 29, 58, .12);

  --container: 1200px;
  --gutter: 16px;
  --section: 56px;
  --nav-h: 72px;
}
@media (min-width: 1024px) { :root { --section: 96px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sea); text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-strong); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 var(--s4); }
h1 { font-size: clamp(1.95rem, 1.45rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.25rem, 1.12rem + .6vw, 1.5rem); line-height: 1.3; }
p { margin: 0 0 var(--s4); max-width: 68ch; }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.15rem; }
li { margin-bottom: var(--s2); }
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--deep); color: var(--on-deep);
  padding: var(--s3) var(--s5); border-radius: 0 0 var(--r-md) 0;
}
.skip:focus { left: 0; }

.wrap { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--sunk { background: var(--sunk); }
.section--deep { background: var(--deep); color: var(--on-deep); }
.section--deep h2, .section--deep h3 { color: #FFFFFF; }
.section--deep p { color: var(--on-deep); }

.eyebrow {
  font-family: var(--font-display); font-size: .8125rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sea);
  margin: 0 0 var(--s3);
}
.section--deep .eyebrow { color: var(--gold); }
.lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--ink-soft); max-width: 56ch; }
.section--deep .lead { color: var(--on-deep-soft); }
.center { text-align: center; margin-inline: auto; }
.center p { margin-inline: auto; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: var(--s3) var(--s5);
  font-family: var(--font-display); font-size: .9375rem; font-weight: 600;
  border-radius: var(--r-pill); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform 120ms cubic-bezier(.2,0,0,1), box-shadow 200ms cubic-bezier(.2,0,0,1), background-color 200ms;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(0); }
.btn--wa { background: var(--whatsapp); color: #06331B; }
.btn--wa:hover { background: #1FBA59; }
.btn--sea { background: var(--sea); color: #FFFFFF; }
.btn--sea:hover { background: #10407A; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
/* Todo fundo escuro precisa do ghost claro, não só .section--deep: o hero e a
   faixa de conversão também são escuros e o ghost padrão sumia neles. */
.section--deep .btn--ghost,
.hero .btn--ghost,
.cta-band .btn--ghost { color: #FFFFFF; border-color: var(--line-inverse); }
.section--deep .btn--ghost:hover,
.hero .btn--ghost:hover,
.cta-band .btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: var(--sea-soft); }
.btn--lg { min-height: 56px; padding: var(--s4) var(--s6); font-size: 1rem; }
.btn .ico { width: 20px; height: 20px; flex: none; }

/* ---------- barra superior ---------- */
.topbar {
  background: var(--deep-ink); color: var(--on-deep-soft);
  font-size: .8125rem; padding-block: var(--s2);
}
.topbar .wrap { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; justify-content: center; }
.topbar b { color: var(--gold); font-weight: 600; }
@media (min-width: 768px) { .topbar .wrap { justify-content: space-between; } }

/* ---------- navegação ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; gap: var(--s4); min-height: var(--nav-h); }
.nav__brand { display: flex; align-items: center; margin-right: auto; }
/* Logo horizontal (escudo + nome). O escudo precisa de altura para ler; abaixo
   de 40px a família dentro dele vira mancha. */
.nav__brand img { height: 52px; width: auto; }
@media (max-width: 480px) { .nav__brand img { height: 42px; } }
.nav__list { display: none; list-style: none; margin: 0; padding: 0; gap: var(--s2); }
.nav__link {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: var(--s3) var(--s3);
  font-family: var(--font-display); font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border-radius: var(--r-sm);
}
.nav__link .ico { width: 16px; height: 16px; flex: none; }
.nav__link:hover { color: var(--sea); background: var(--sunk); }
.nav__cta { display: none; }
@media (min-width: 1024px) {
  .nav__list { display: flex; }
  .nav__cta { display: inline-flex; }
}

/* mega menu sem JS: hover + foco */
.nav__item { position: relative; }
.mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: min(92vw, 760px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: var(--s6);
  display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6);
}
.nav__item:hover .mega, .nav__item:focus-within .mega { display: grid; }
/* Rótulo de coluna do menu, não título de conteúdo: como h3 ele entrava na
   hierarquia antes do h1 da página. */
.mega__t {
  font-family: var(--font-display); font-weight: 600;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 var(--s3); max-width: none;
}
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li { margin-bottom: var(--s1); }
.mega a {
  display: block; padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font-size: .9375rem;
}
.mega a:hover { background: var(--sunk); color: var(--sea); }

/* navegação mobile por checkbox — conteúdo sempre no DOM */
.nav__toggle { display: inline-flex; }
.nav__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); color: var(--ink); cursor: pointer;
}
#nav-open { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nav__drawer {
  display: none; border-top: 1px solid var(--line);
  padding-block: var(--s4); background: var(--card);
}
#nav-open:checked ~ .nav__drawer { display: block; }
.nav__drawer ul { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.nav__drawer a {
  display: flex; align-items: center; gap: var(--s2); padding: var(--s3) 0; color: var(--ink);
  text-decoration: none; font-family: var(--font-display); font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.nav__drawer a .ico { width: 16px; height: 16px; flex: none; color: var(--sea); }
.nav__drawer .btn { width: 100%; }
@media (min-width: 1024px) {
  .nav__toggle, .nav__drawer, #nav-open:checked ~ .nav__drawer { display: none; }
}

/* ---------- hero ---------- */
.hero { background: linear-gradient(180deg, var(--deep) 0%, #0E2649 100%); color: var(--on-deep); padding-block: var(--s8) var(--s9); }
.hero h1 { color: #FFFFFF; max-width: 16ch; }
.hero__grid { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s8); } }
.hero__lead { color: var(--on-deep-soft); font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.hero__note { margin-top: var(--s5); font-size: .875rem; color: var(--on-deep-soft); max-width: 46ch; }

.badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: rgba(212, 160, 23, .14); border: 1px solid rgba(212, 160, 23, .45);
  color: var(--gold); border-radius: var(--r-pill);
  padding: var(--s2) var(--s4); font-size: .8125rem; font-weight: 600;
  font-family: var(--font-display); margin-bottom: var(--s5);
}
.badge .ico { width: 16px; height: 16px; }

/* cartão de ramos no hero */
.ramos-card { background: var(--card); border-radius: var(--r-xl); padding: var(--s6); box-shadow: var(--sh-lg); }
.ramos-card h2 { font-size: 1.125rem; margin-bottom: var(--s5); color: var(--ink-strong); }
.ramos-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.ramos-card a {
  display: flex; align-items: center; gap: var(--s3); max-width: 100%;
  padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: .9375rem;
  transition: border-color 200ms, background-color 200ms;
}
.ramos-card a:hover { border-color: var(--sea); background: var(--sunk); }
.ramos-card .ico { width: 22px; height: 22px; color: var(--sea); flex: none; }
.ramos-card .arrow { margin-left: auto; color: var(--ink-faint); }

/* ---------- marquee ---------- */
.marquee { background: var(--deep-ink); color: #FFFFFF; overflow: hidden; padding-block: var(--s4); border-block: 1px solid var(--line-inverse); }
.marquee__track { display: flex; width: max-content; animation: slide 60s linear infinite; }
.marquee__group { display: flex; align-items: center; gap: var(--s7); list-style: none; margin: 0; padding: 0 var(--s7) 0 0; }
.marquee__item {
  margin: 0; display: inline-flex; align-items: center; gap: var(--s3); white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: .9375rem; letter-spacing: .01em;
}
.marquee__item .ico { width: 20px; height: 20px; color: var(--gold); flex: none; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .marquee__group { flex-wrap: wrap; justify-content: center; gap: var(--s5); padding-right: 0; }
  .marquee__group + .marquee__group { display: none; }
}

/* ---------- grades ---------- */
.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s6); box-shadow: var(--sh-sm);
  display: flex; flex-direction: column;
  transition: box-shadow 200ms cubic-bezier(.2,0,0,1), transform 200ms cubic-bezier(.2,0,0,1);
}
.card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.card h3 { margin-bottom: var(--s3); }
.card p { color: var(--ink-soft); font-size: .9375rem; }
.card ul { color: var(--ink-soft); font-size: .9375rem; }
.card__foot { margin-top: auto; padding-top: var(--s4); }
.card__link {
  font-family: var(--font-display); font-weight: 600; font-size: .9375rem;
  color: var(--sea); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s2);
  /* Sem isto o rótulo não quebra no mobile: o texto vira um item flex anônimo,
     não encolhe abaixo do min-content e vaza do card em telas de 375px. */
  flex-wrap: wrap; max-width: 100%;
}
.card__link:hover { text-decoration: underline; }
.card__ico {
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: var(--sunk); color: var(--sea);
  display: grid; place-items: center; margin-bottom: var(--s4);
}
.card__ico .ico { width: 24px; height: 24px; }

/* passos numerados */
.step { counter-increment: step; }
.step__n {
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: var(--gold); color: var(--deep);
  display: grid; place-items: center; margin-bottom: var(--s4);
  font-family: var(--font-display); font-weight: 700; font-size: 1.125rem;
}

/* comparação corretor x app */
.compare { display: grid; gap: var(--s5); }
@media (min-width: 768px) { .compare { grid-template-columns: repeat(2, 1fr); } }
.compare__col { border-radius: var(--r-lg); padding: var(--s6); border: 1px solid var(--line-inverse); }
.compare__col--us { background: rgba(212, 160, 23, .10); border-color: rgba(212, 160, 23, .45); }
.compare__col--them { background: rgba(255, 255, 255, .04); }
.compare__col h3 { font-size: 1.125rem; margin-bottom: var(--s4); }
.compare__col ul { list-style: none; margin: 0; padding: 0; }
.compare__col li { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s3); font-size: .9375rem; color: var(--on-deep); }
.compare__col .ico { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.compare__col--us .ico { color: var(--gold); }
.compare__col--them .ico { color: var(--on-deep-soft); }

/* ---------- FAQ sem JS ---------- */
.faq { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .faq { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
}
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; color: var(--ink-strong);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 32px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 12px; height: 12px; flex: none;
  border-right: 2px solid var(--sea); border-bottom: 2px solid var(--sea);
  transform: rotate(45deg); transition: transform 200ms cubic-bezier(.2,0,0,1);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { margin: var(--s4) 0 0; color: var(--ink-soft); font-size: .9375rem; }

/* ---------- faixa de conversão ---------- */
.cta-band { background: var(--deep); color: var(--on-deep); border-radius: var(--r-xl); padding: var(--s8) var(--s6); text-align: center; }
.cta-band h2 { color: #FFFFFF; }
.cta-band p { color: var(--on-deep-soft); margin-inline: auto; }
.cta-band .hero__actions { justify-content: center; }

/* ---------- rodapé ---------- */
.foot { background: var(--deep-ink); color: var(--on-deep-soft); padding-block: var(--s8) var(--s6); font-size: .9375rem; }
.foot__grid { display: grid; gap: var(--s7); }
@media (min-width: 768px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
/* Título de coluna do rodapé: parágrafo e não h3, a hierarquia é só do conteúdo.
   Repete o que o h3 herdava (fonte de título, negrito, entrelinha 1.3). */
.foot__titulo { font-family: var(--font-display); font-weight: 700; line-height: 1.3; max-width: none; color: #FFFFFF; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 var(--s4); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: var(--s2); }
.foot a { color: var(--on-deep-soft); text-decoration: none; }
.foot a:hover { color: #FFFFFF; text-decoration: underline; }
.foot__brand img { height: 54px; width: auto; margin-bottom: var(--s4); }
.foot__legal {
  border-top: 1px solid var(--line-inverse); margin-top: var(--s7); padding-top: var(--s5);
  font-size: .8125rem;
  /* --ink-faint reprovava em AA sobre o rodapé escuro (3.7:1) e este é o aviso
     legal de corretora x seguradora — o texto que menos pode passar batido. */
  color: var(--on-deep-soft);
}
.foot__legal p { max-width: none; }

/* ---------- WhatsApp flutuante ---------- */
.wa-float {
  /* O banner de consentimento é fixo no rodapé e cobriria este botão na
     primeira visita: o toque no WhatsApp cairia no "Aceitar" — perde o lead e
     ainda parece site quebrado. O medicao.js publica a altura medida do banner
     em --medicao-altura enquanto ele estiver na tela (medida, e não fixa,
     porque o banner quebra em mais linhas conforme a largura e o tamanho de
     fonte). Sem banner na tela a variável não existe e o botão fica nos 16px
     de sempre. */
  position: fixed; right: 16px; bottom: calc(16px + var(--medicao-altura, 0px)); z-index: 90;
  width: 56px; height: 56px; border-radius: var(--r-pill);
  background: var(--whatsapp); color: #06331B;
  display: grid; place-items: center; box-shadow: var(--sh-lg);
  text-decoration: none;
}
.wa-float .ico { width: 30px; height: 30px; }
.wa-float:hover { background: #1FBA59; }

/* ---------- banner de consentimento (medicao.js) ----------
   O layout do banner vem do próprio medicao.js, todo em :where() — aqui só
   entram as cores da marca, por custom property, e a linha de separação.
   Fundo claro de propósito: sobre o azul profundo, o botão "Aceitar" em --sea
   ficaria a 1,9:1 da própria faixa e reprovaria os 3:1 de contraste de
   componente. Sobre o branco do card: a borda do botão fica em 7,9:1 e o texto
   branco dentro dele em 8,8:1. */
#consent-banner {
  --medicao-bg: var(--card);
  --medicao-fg: var(--ink);
  --medicao-acao: var(--sea);
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-text);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- marcador de dado pendente ----------
   Propositalmente berrante: nenhum destes pode ir ao ar. O build de produção
   falha enquanto houver .pendente no HTML. */
.pendente {
  background: #FFE8A3;
  color: #6B4E00;
  border: 1px dashed #B8880F;
  border-radius: 4px;
  padding: 0 6px;
  font-weight: 700;
  font-size: .8125em;
  white-space: nowrap;
}

/* ---------- migalhas ---------- */
.crumbs { background: var(--sunk); border-bottom: 1px solid var(--line); padding-block: var(--s3); font-size: .8125rem; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--sea); text-decoration: underline; }
.crumbs__sep { color: var(--ink-faint); margin-inline: var(--s1); }
.crumbs [aria-current] { color: var(--ink-strong); font-weight: 600; }

/* item de menu da seção atual */
.nav__link--on { color: var(--sea); box-shadow: inset 0 -2px 0 var(--gold); }

/* ---------- hero curto (páginas internas) ---------- */
.hero--curto { padding-block: var(--s7) var(--s8); }
.hero--curto h1 { max-width: 20ch; }

/* ---------- texto longo ---------- */
.wrap--texto { width: min(100% - (var(--gutter) * 2), 860px); margin-inline: auto; }
.wrap--texto p { max-width: 68ch; }
.destaque {
  border-left: 3px solid var(--gold); background: var(--gold-tint);
  padding: var(--s5); border-radius: 0 var(--r-md) var(--r-md) 0;
  font-weight: 500; color: var(--ink-strong);
}

/* ---------- tabela ---------- */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.tabela { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 560px; }
.tabela th, .tabela td { padding: var(--s4) var(--s5); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabela thead th { background: var(--sunk); font-family: var(--font-display); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-strong); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela td:first-child { font-weight: 600; color: var(--ink-strong); }
.tabela__nota { font-size: .8125rem; color: var(--ink-soft); margin-top: var(--s4); }

/* ---------- listas com marca ---------- */
.lista-check { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.lista-check li { position: relative; padding-left: 30px; margin-bottom: var(--s3); color: var(--ink-soft); }
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 16px; height: 9px; border-left: 2.5px solid var(--positive);
  border-bottom: 2.5px solid var(--positive); transform: rotate(-45deg);
}
.relacionadas { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.relacionadas a { display: flex; align-items: center; gap: var(--s3); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4) var(--s5); color: var(--ink); text-decoration: none; font-weight: 500; }
.relacionadas a:hover { border-color: var(--sea); color: var(--sea); }
.relacionadas .ico { width: 18px; height: 18px; margin-left: auto; flex: none; }

/* ---------- formulário ---------- */
.form-grid { display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 1024px) { .form-grid { grid-template-columns: 1fr 1.05fr; gap: var(--s8); } }
.form-grid__texto h2 { margin-bottom: var(--s4); }

.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s6); box-shadow: var(--sh-lg); }
@media (min-width: 768px) { .form-card { padding: var(--s7); } }
.form__titulo { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); margin-bottom: var(--s2); }
.form__sub { color: var(--ink-soft); font-size: .9375rem; margin-bottom: var(--s5); }
.form { display: grid; gap: var(--s4); }
.campo { display: grid; gap: var(--s2); }
.campo label { font-family: var(--font-display); font-weight: 600; font-size: .875rem; color: var(--ink-strong); }
.req { color: #A32821; margin-left: 2px; }
.opcional { font-weight: 400; color: var(--ink-faint); font-size: .8125rem; }
.campo input, .campo select, .campo textarea, .tel input, .tel select {
  font-family: var(--font-text); font-size: 1rem; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: var(--s3) var(--s4); min-height: 48px; width: 100%;
  transition: border-color 200ms, box-shadow 200ms;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .tel input:focus, .tel select:focus {
  border-color: var(--sea); box-shadow: var(--sh-focus, 0 0 0 3px rgba(20, 74, 139, .25)); outline: none;
}
.campo input.erro, .campo select.erro, .tel input.erro { border-color: #A32821; }
.campo__dica { font-size: .8125rem; color: var(--ink-faint); margin: 0; }
.campo__erro { font-size: .8125rem; color: #A32821; margin: 0; font-weight: 500; }
.tel { display: grid; grid-template-columns: minmax(120px, 42%) 1fr; gap: var(--s2); }
.tel__ddi { min-width: 0; }
.radios { display: flex; flex-wrap: wrap; gap: var(--s2); }
.radio { display: inline-flex; align-items: center; gap: var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: var(--s2) var(--s4); cursor: pointer; font-size: .9375rem; min-height: 44px; }
.radio:has(input:checked) { border-color: var(--sea); background: var(--sunk); font-weight: 600; color: var(--sea); }
.radio input { accent-color: var(--sea); }
.form__enviar { width: 100%; margin-top: var(--s2); }
.form__erro { color: #A32821; font-size: .875rem; font-weight: 500; margin: 0; }
.form__nota { font-size: .875rem; color: var(--ink-soft); margin: 0; }
.form__legal { font-size: .75rem; color: var(--ink-faint); margin: 0; }
@media (min-width: 560px) { .campo--meio { } .form { grid-template-columns: 1fr; } }

/* ---------- contato: canais, consentimento e armadilha de robo ---------- */
.canais { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.canal {
  display: flex; align-items: flex-start; gap: var(--s4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s4) var(--s5); min-height: 44px;
}
.canal .ico { width: 22px; height: 22px; color: var(--sea); flex: none; margin-top: 3px; }
.canal b { display: block; font-family: var(--font-display); font-size: .9375rem; color: var(--ink-strong); }
.canal span { font-size: .9375rem; color: var(--ink-soft); }
.canal a { font-weight: 600; text-decoration: none; }
.canal a:hover { text-decoration: underline; }

/* Em card estreito, pilula lado a lado quebra em alturas diferentes. Empilhadas em
   largura total, as tres opcoes ficam com a mesma linha e a mesma altura. */
.radios--coluna { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.radios--coluna .radio { border-radius: var(--r-md); justify-content: flex-start; }

.consent { display: flex; align-items: flex-start; gap: var(--s3); font-size: .875rem; color: var(--ink-soft); }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sea); flex: none; }
.consent label { line-height: 1.5; }

/* Armadilha de robo: fora da tela, fora do foco e fora da arvore de acessibilidade. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- calculadoras ---------- */
.calc-grid { display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 1024px) { .calc-grid { grid-template-columns: 1fr 1fr; gap: var(--s8); } }
.calc { display: grid; gap: var(--s4); margin-top: var(--s6); }
.calc .campo input, .calc .campo select { background: var(--card); }
.calc-saida {
  background: var(--deep); color: var(--on-deep);
  border-radius: var(--r-xl); padding: var(--s7) var(--s6);
  position: sticky; top: calc(var(--nav-h) + var(--s4));
}
.calc-saida__rot {
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--s3);
}
.calc-saida__valor {
  font-family: var(--font-display); font-weight: 700; color: #FFFFFF;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); line-height: 1.15;
  margin: 0 0 var(--s3); max-width: none;
}
.calc-saida__nota { color: var(--on-deep-soft); font-size: .9375rem; margin: 0 0 var(--s5); max-width: none; }
.calc-linhas { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.calc-linhas li {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line-inverse);
  font-size: .9375rem; color: var(--on-deep-soft); margin: 0;
}
.calc-linhas strong { color: #FFFFFF; white-space: nowrap; }
.calc-linhas__total { border-bottom: 0; padding-top: var(--s4); font-weight: 600; color: #FFFFFF; }
.calc-linhas__total strong { color: var(--gold); font-size: 1.125rem; }
.calc-saida .btn { width: 100%; }

/* mega menu de 3 colunas e rotulos do drawer */
.mega--3 { width: min(94vw, 1020px); }
@media (min-width: 1024px) { .mega--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.drawer__t {
  font-family: var(--font-display); font-weight: 600; font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
  margin: var(--s5) 0 var(--s2); max-width: none;
}
.drawer__t:first-child { margin-top: 0; }

/* ---------- consentimento e campo-armadilha ---------- */
.consent {
  display: flex; gap: var(--s3); align-items: flex-start;
  font-size: .875rem; color: var(--ink-soft); cursor: pointer;
  background: var(--sunk); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s4);
}
.consent input { accent-color: var(--sea); width: 20px; height: 20px; flex: none; margin-top: 1px; }
.consent input.erro { outline: 2px solid #A32821; outline-offset: 2px; }
.consent .campo__erro { flex-basis: 100%; }
/* A armadilha precisa sumir para gente e continuar existindo para robô. */
.campo--armadilha {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important; overflow: hidden;
}
.form__enviar[disabled] { opacity: .7; cursor: progress; }

/* ---------- formulário fixo na lateral (desktop) ----------
   A partir de 1280px o formulário acompanha a rolagem na direita, dentro da
   área clara do site — nunca sobre a hero, que já tem o seu próprio CTA.

   Alinhamento: conteúdo e painel usam a mesma margem da barra de navegação, de
   modo que a coluna de texto começa embaixo da logo e o painel termina embaixo
   do botão do WhatsApp. */
@media (min-width: 1280px) {
  :root {
    --barra: 1440px;                                  /* largura da navbar */
    /* --sb é a largura da barra de rolagem, medida uma vez pelo JS. Sem ela o
       painel fixo (que mede em 100vw, com scrollbar) desalinha da navbar (que
       mede em 100%, sem scrollbar) — dá uns 7px de diferença em tela larga. */
    --margem-barra: max(var(--gutter), calc((100vw - var(--sb, 0px) - var(--barra)) / 2));
    --col-form: 392px;
    --col-gap: 40px;
  }

  /* o conteúdo abre espaço; o fundo das seções continua inteiro */
  body.tem-form main > section:not(.hero) > .wrap,
  body.tem-form main > .marquee > .wrap {
    width: auto;
    margin-left: var(--margem-barra);
    margin-right: calc(var(--margem-barra) + var(--col-form) + var(--col-gap));
  }

  body.tem-form .form-card {
    position: fixed;
    top: calc(var(--nav-h) + var(--s5));
    /* o fixed mede a partir da borda que inclui a barra de rolagem; sem somar
       --sb o painel passa da navbar justamente a largura dela */
    right: calc(var(--margem-barra) + var(--sb, 0px));
    width: var(--col-form);
    max-height: calc(100vh - var(--nav-h) - var(--s8));
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 80;
    padding: var(--s6);
    box-shadow: 0 18px 44px rgba(11, 29, 58, .18);
    opacity: 1;
    transform: none;
    transition: opacity 220ms cubic-bezier(.2,0,0,1), transform 220ms cubic-bezier(.2,0,0,1);
  }

  /* enquanto a hero estiver na tela, o painel fica fora do caminho */
  body.tem-form.hero-visivel .form-card {
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
  }

  body.tem-form .form-grid { grid-template-columns: 1fr; }
  body.tem-form .form-grid__texto { max-width: 68ch; }

  /* O botão do WhatsApp fica no canto, como em qualquer página do site: o
     painel recua um pouco no rodapé para não haver disputa pelo mesmo ponto. */
  body.tem-form .wa-float { right: var(--s4); z-index: 90; }
  body.tem-form .form-card { padding-bottom: var(--s8); }

  body.tem-form .form-card::-webkit-scrollbar { width: 10px; }
  body.tem-form .form-card::-webkit-scrollbar-thumb {
    background: var(--line-strong); border-radius: var(--r-pill);
    border: 3px solid var(--card);
  }
  body.tem-form .form-card { scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--card); }

  /* compacta o formulário para caber mais campo na altura da tela */
  body.tem-form .form { gap: var(--s3); }
  body.tem-form .form__titulo { font-size: 1.25rem; }
  body.tem-form .form__sub { margin-bottom: var(--s4); font-size: .875rem; }
  body.tem-form .campo input,
  body.tem-form .campo select { min-height: 44px; padding: var(--s2) var(--s4); }
  body.tem-form .campo textarea { min-height: 72px; }
  body.tem-form .consent { padding: var(--s3); font-size: .8125rem; }

  /* a calculadora já tem painel próprio; os dois fixos não convivem */
  body.tem-form .calc-saida { position: static; }
}

@media (min-width: 1280px) and (min-height: 1000px) {
  body.tem-form .form-card { max-height: none; overflow-y: visible; }
}

@media (prefers-reduced-motion: reduce) {
  body.tem-form .form-card { transition: none; }
}

/* ---------- navbar com mais respiro ----------
   Com 8 itens de menu, logo e CTA, o container de 1200px espremia os rótulos e
   "A corretora" quebrava em duas linhas. A barra ganha largura própria. */
@media (min-width: 1024px) {
  .nav .wrap { width: min(100% - (var(--gutter) * 2), 1440px); }
  .nav__link { padding: var(--s3) var(--s2); white-space: nowrap; letter-spacing: .04em; }
  .nav__in { gap: var(--s3); }
  .nav__cta { white-space: nowrap; }
  .topbar .wrap { width: min(100% - (var(--gutter) * 2), 1440px); }
}
@media (min-width: 1280px) {
  .nav__link { padding: var(--s3) var(--s3); }
}

/* O flex-wrap do rótulo (necessário para o texto quebrar no mobile) deixava a
   seta cair para a linha seguinte e esticar até a largura do card. */
.card__link .ico,
.relacionadas .ico,
.ramos-card .ico {
  width: 18px; height: 18px; flex: 0 0 18px;
}
.card__link { align-items: center; gap: var(--s2); }
.card__foot .card__link { row-gap: 0; }

/* destaque dos hubs por público no mega menu */
.mega__destaque { margin-bottom: var(--s4) !important; }
.mega__destaque a { font-weight: 600; color: var(--sea); }

/* jogo da 404 — escudo pulando risco, enquanto a pessoa decide para onde ir */
.jogo404 {
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  margin-top: var(--s5);
}
#jogo404-tela {
  width: 100%; max-width: 600px; height: auto; aspect-ratio: 600 / 200;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: var(--sh-sm); cursor: pointer; touch-action: manipulation;
}
.jogo404__hud {
  display: flex; gap: var(--s5); font-size: .9rem; color: var(--ink-soft);
}
.jogo404__hud strong { color: var(--ink-strong); }
.jogo404__fim { color: var(--ink-soft); font-size: .9rem; margin: 0; }
/* .btn define display: inline-flex, que por especificidade igual à do
   atributo [hidden] do UA stylesheet vence e o anula — sem isto o botão
   "Jogar de novo" fica sempre visível, mesmo com hidden=true no JS. */
#jogo404-jogar[hidden] { display: none; }

/* ---------- popup de intenção de saída ---------- */
/* Desktop (>=768px): modal central com fundo escurecido. Abaixo de 768px vira
   faixa deslizante no rodapé, sem cobrir a tela — para não contar como
   "intersticial intrusivo" para o Google em mobile. */
.popup-saida {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s5);
}
.popup-saida[hidden] { display: none; }
.popup-saida__fundo {
  position: absolute; inset: 0; background: rgba(11, 29, 58, .55);
}
.popup-saida__caixa {
  position: relative; width: 100%; max-width: 440px; max-height: 90vh;
  overflow-y: auto; animation: popup-saida-entra 220ms cubic-bezier(.2, 0, 0, 1);
}
.popup-saida__caixa .form-card { padding: var(--s6); }
/* .form-card também é a classe do painel lateral fixo que aparece em toda
   página de produto (>=1280px, ver @media acima) — sem isto, o card do popup
   herdava position:fixed e opacity:0 daquela regra e sumia, mesmo com
   hidden=false. !important porque a regra original também usa especificidade
   alta (body.tem-form .form-card) só para aquele componente. */
body.tem-form .popup-saida__form,
body.tem-form.hero-visivel .popup-saida__form {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
.popup-saida__fechar {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 36px; height: 36px; border-radius: var(--r-pill); border: none;
  background: var(--sunk); color: var(--ink); font-size: 1.5rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.popup-saida__fechar:hover { background: var(--line); }
@keyframes popup-saida-entra {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .popup-saida__caixa { animation: none; }
}

@media (max-width: 767px) {
  .popup-saida {
    align-items: flex-end; justify-content: stretch; padding: 0;
    /* Sem isto, a área vazia acima da faixa (sem pintura nenhuma) ainda
       captura toque e bloqueia a página por trás — mesmo sem fundo visível
       e mesmo com o backdrop já sem pointer-events. */
    pointer-events: none;
  }
  .popup-saida__fundo { background: transparent; pointer-events: none; }
  .popup-saida__caixa {
    max-width: none; max-height: 78vh; width: 100%;
    animation: popup-saida-sobe 260ms cubic-bezier(.2, 0, 0, 1);
    pointer-events: auto;
  }
  .popup-saida__caixa .form-card {
    border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--sh-lg);
    padding-bottom: var(--s7);
  }
  @keyframes popup-saida-sobe {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}