/* cache-bust:20260908-105500 */
/* Clube de Honra, design system.
   Tokens convertidos do oklch do arquivo de referencia para hex: oklch nao renderiza
   em Android/Chrome antigo, e a pagina abre por QR Code em celular alheio.
   Mobile first: o base e o celular, as media queries sobem. */

@import url("../fontes/fontes.css");

:root {
  /* Cada variavel abaixo agora nasce de um token de marca (css/honra-tokens.css).
     Os nomes antigos ficam porque 1700 linhas de regra dependem deles: a
     migracao trocou a ORIGEM da cor, nao o vocabulario do arquivo. */

  --background: var(--honra-fundo);
  --foreground: var(--honra-tinta);
  --card: var(--honra-superficie);
  --muted: var(--honra-elevado);
  --muted-foreground: var(--honra-musgo);
  --secondary: var(--honra-elevado);
  --border: var(--honra-fiapo);

  --lime: var(--honra-lima);
  --lime-soft: var(--honra-lima-suave);
  --lime-foreground: var(--honra-mata);
  --lime-grad-b: var(--honra-verde);

  /* --ink e --deep viraram a MESMA cor: o mata. Antes eram dois pretos
     diferentes (um neutro, um esmeralda #005730) e nenhum dos dois estava na
     apresentacao da marca. O mata e o preto da Honra, e ele e esverdeado. */
  --ink: var(--honra-mata);
  --ink-foreground: var(--honra-fundo);

  --deep: var(--honra-mata);
  --deep-foreground: var(--honra-fundo);
  --deep-grad-a: var(--honra-mata-fundo);
  --deep-grad-b: var(--honra-mata);

  --success: var(--honra-ok);
  --warning: var(--honra-atencao);
  --destructive: var(--honra-erro);

  --gradient-lime: linear-gradient(135deg, var(--honra-lima) 0%, var(--honra-verde) 100%);
  /* Chapado de proposito. O que da profundidade a uma secao escura da Honra e
     o h gigante ao fundo, nao um degrade puxando pra outro verde. E o fundo
     precisa ser uniforme mesmo: o h e desenhado em --honra-mata em cima dele,
     entao qualquer degrade que passasse pelo mata faria a letra sumir de um
     lado da secao e aparecer do outro. */
  --gradient-deep: linear-gradient(var(--honra-mata-fundo), var(--honra-mata-fundo));

  --sombra-suave: var(--honra-sombra);
  --sombra-alta: var(--honra-sombra-alta);

  --fonte-titulo: var(--honra-display);
  --fonte-texto: var(--honra-texto);

  --r-xl: 28px;
  --r-lg: var(--honra-r-g, 28px);
  --r-md: var(--honra-r-m, 18px);
  --r-sm: var(--honra-r-p, 12px);

  --passo: 20px;
  --modal-passo: 20px;
  --largura: 1080px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* O atributo hidden do HTML so vale no estilo padrao do navegador, entao qualquer
   regra nossa (.aviso { display: flex }, por exemplo) ganha dele sem querer e o
   elemento reaparece. Isso mantinha o card de erro "Nao deu certo" visivel o tempo
   todo. Uma regra global resolve pra todo mundo, agora e no que vier depois. */
[hidden] { display: none !important; }

/* Titulo da marca: Urbanist 700, tracking negativo forte, SEM caixa alta.
   A apresentacao so usa maiuscula em rotulo pequeno e bem espacado (.olho,
   .eyebrow, os rotulos de tabela). Titulo em caixa alta era heranca da Space
   Grotesk e brigava com o -.03em: as maiusculas encostavam umas nas outras. */
h1, h2, h3, .display {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  letter-spacing: var(--honra-tracking);
  line-height: 1.04;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 9vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 7vw, 2.6rem); }
h3 { font-size: 1.05rem; line-height: 1.2; }

p { margin: 0; }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--passo); }

/* A logo oficial entrou no lugar do nome em texto (29/08). O .marca-texto fica
   porque ainda e o rotulo acessivel dentro do <img alt>, e porque paginas novas
   podem precisar do nome escrito. */
.marca-texto { font-family: var(--fonte-titulo); font-size: 1.15rem; font-weight: 700; letter-spacing: var(--honra-tracking); white-space: nowrap; }
.marca-texto b { font-weight: 700; }

/* width/height vem no HTML pra reservar o espaco antes do SVG carregar: sem
   isso a pilula do topo pula de altura no primeiro paint. */
.marca-logo {
  display: block;
  height: 26px;
  width: auto;
  transition: height .28s cubic-bezier(.2, .7, .3, 1);
}
.form-topo .marca-logo { height: 28px; }
.rodape .marca-logo { height: 30px; }

.hl {
  background: var(--lime);
  color: var(--lime-foreground);
  padding: 0 .16em;
  border-radius: 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.olho {
  display: inline-flex;
  align-items: center;
  font-family: var(--fonte-titulo);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--lime-foreground);
}
.olho-escuro { background: var(--ink); color: var(--ink-foreground); }
.olho-suave { background: var(--lime-soft); color: var(--lime-foreground); }
.olho-aviso { background: rgba(184, 121, 10, .25); color: var(--foreground); }

.eyebrow {
  font-family: var(--fonte-titulo);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.nota { font-size: .8125rem; color: var(--muted-foreground); margin-top: 12px; line-height: 1.55; }
.muted { color: var(--muted-foreground); }

/* ---------- topo ----------
   Pilula flutuante em vidro escuro, no padrao do menu da Valorize Controladoria
   (cliente da casa; esse mesmo menu quem desenhou fui eu): grid de 3 colunas pra
   os links ficarem no centro otico da pilula mesmo com marca e CTA de larguras
   diferentes, glassmorfismo com blur+saturate, hamburguer de 9 pontos que vira X
   no mesmo botao, painel de celular em tela cheia com os links subindo em
   cascata. A mecanica (grid, o crossfade do botao, a cascata) veio do css real
   dela (site/css/valorize.css, pasta da Valorize); cores, fontes e proporcoes
   sao as nossas.

   So o index.html tem secao pra apontar, entao so ele ganha nav/CTA/hamburguer.
   As outras paginas que usam .topo (obrigado, pagamento, termo, politica) ganham
   a mesma pilula de graca, so com a marca dentro. */

/* fixed, nao sticky: sticky ainda reserva o espaco da pilula no fluxo, entao
   sobrava uma faixa da cor de fundo (--background) acima e ao redor dela antes
   do hero comecar. Fixed tira a pilula do fluxo de vez, o hero passa a comecar
   em y=0 de verdade e a pilula flutua por cima, exatamente como na Valorize. */
.topo {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 40;
  width: calc(100% - 2 * var(--passo));
  max-width: var(--largura);
  margin: 0 auto;
}

.topo .container {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 20px;
  border-radius: 999px;
  /* A 0,78 de opacidade o texto branco fica bem acima do minimo de contraste
     em cima do verde do hero e do bege do resto da pagina. Nao descer isso. */
  background: rgba(18, 48, 28, .78);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(251, 251, 247, .16);
  box-shadow: var(--sombra-alta), inset 0 1px 0 rgba(251, 251, 247, .08);
}
@supports not (backdrop-filter: blur(1px)) {
  .topo .container { background: rgba(18, 48, 28, .94); }
}

@media (min-width: 760px) {
  /* So com marca + links + CTA existindo os tres a coluna central fica mesmo
     no centro da pilula, em vez de puxada pro lado da marca. */
  .topo .container { grid-template-columns: 1fr auto 1fr; }
}

.marca { display: flex; align-items: center; text-decoration: none; }

.topo .marca-texto { color: var(--ink-foreground); }

.topo-marca { display: flex; align-items: center; gap: 12px; min-width: 0; justify-self: start; }

/* Selo do topo e so um aviso, nao uma acao: texto discreto com pontinho, sem
   preenchimento, pra nao competir com o botao real da pilula. Escondido no
   celular: a pilula fica so logo + hamburguer, como na Valorize. */
.selo-topo {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--fonte-titulo);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(251, 251, 247, .68);
  white-space: nowrap;
}
.selo-topo-ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  flex: none;
}

/* ---------- topo: links, CTA, hamburguer ---------- */

.topo-nav {
  display: none;
  justify-self: center;
  align-items: center;
  gap: 2px;
}
.topo-nav a {
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--fonte-titulo);
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(251, 251, 247, .78);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.topo-nav a:hover { background: rgba(251, 251, 247, .1); color: var(--ink-foreground); }
/* Aceso pela secao visivel no momento (nav.js, IntersectionObserver): a pilula
   deixa de ser so navegacao e passa a mostrar onde a pessoa esta na pagina. */
.topo-nav a.ativo { background: var(--lime); color: var(--lime-foreground); }

.topo-acoes { display: flex; align-items: center; gap: 6px; justify-self: end; }

/* No celular a pilula do topo virou a UNICA navegacao fixa da tela: logo, CTA
   e menu. Antes o CTA so existia no desktop e quem estava no celular dependia
   da barra flutuante do rodape, que saiu. Um so elemento serve os dois, com
   rotulo curto no celular, pra nao duplicar id de CTA nem de tracking. */
.topo-acoes .topo-cta { display: inline-flex; min-height: 36px; padding: 0 15px; font-size: .8125rem; }
.topo-cta-longo { display: none; }
.topo-cta-curto { display: inline; }

/* Botao unico que vira X: dois icones em crossfade, nao um morph de verdade.
   O mesmo botao fecha o painel: nao existe um X separado sobrando pra alcancar. */
/* O Portal do Associado usa exatamente o mesmo botao redondo do WhatsApp:
   duas acoes de topo com o mesmo peso, e nenhuma linguagem visual nova pra
   manter. O que diferencia e o icone e o rotulo acessivel. */
.topo-whats,
.topo-portal {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 999px;
  background: rgba(251, 251, 247, .1);
  color: var(--ink-foreground);
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.topo-whats .icone,
.topo-portal .icone { width: 19px; height: 19px; }
.topo-whats:hover,
.topo-portal:hover { background: var(--lime); color: var(--lime-foreground); transform: scale(1.06); }

.topo-burger {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.topo-burger:hover { background: rgba(251, 251, 247, .1); }
.topo-burger__pontos,
.topo-burger__x {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  transition: opacity .25s ease, transform .35s ease;
}
.topo-burger__pontos {
  grid-template-columns: repeat(3, 3px);
  gap: 3.5px;
}
.topo-burger__pontos i {
  width: 3px; height: 3px;
  background: var(--ink-foreground);
  border-radius: 999px;
}
.topo-burger__x { opacity: 0; transform: rotate(-90deg); }
.topo-burger__x::before,
.topo-burger__x::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 17px; height: 1.5px;
  border-radius: 999px;
  background: var(--ink-foreground);
}
.topo-burger__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.topo-burger__x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.topo-burger[aria-expanded="true"] .topo-burger__pontos { opacity: 0; transform: rotate(90deg); }
.topo-burger[aria-expanded="true"] .topo-burger__x { opacity: 1; transform: rotate(0deg); }

/* Rolou a pagina: a pilula encolhe um pouco e sobe um pouco. So isso, e so no
   celular, onde ela e a navegacao inteira e cada pixel de altura conta. No
   desktop nada muda, a pedido. */
@media (max-width: 759px) {
  .topo { transition: top .28s cubic-bezier(.2, .7, .3, 1); }
  .topo .container { transition: padding .28s cubic-bezier(.2, .7, .3, 1); }
  .topo.rolado { top: 8px; }
  .topo.rolado .container { padding-top: 5px; padding-bottom: 5px; padding-left: 16px; }
  .topo.rolado .marca-logo { height: 22px; }
  .topo.rolado .topo-acoes .topo-cta { min-height: 32px; }
  .topo.rolado .topo-burger { width: 36px; height: 36px; }
}

@media (min-width: 760px) {
  .selo-topo { display: inline-flex; }
  .topo-nav { display: flex; }
  .topo-whats,
  .topo-portal { display: flex; }
  /* Volta exatamente aos valores de antes: o desktop nao muda. */
  .topo-acoes .topo-cta { min-height: 40px; padding: 0 20px; }
  .topo-cta-longo { display: inline; }
  .topo-cta-curto { display: none; }
  .topo-burger { display: none; }
}

/* ---------- menu do celular: folha que sobe de baixo (bottom sheet) ----------

   Trocou o painel de tela cheia por uma folha ancorada no rodape. Motivo
   pratico, nao estetico: no celular o polegar alcanca a metade de baixo da
   tela, e o menu antigo colocava os links no alto, longe de onde a mao esta.

   A folha se anuncia como folha: cantos so em cima, puxador no meio, o fundo
   da pagina continua visivel e desfocado atras. O puxador nao e enfeite,
   arrasta de verdade (nav.js). */

body.menu-aberto { overflow: hidden; }

.folha {
  position: fixed;
  inset: 0;
  z-index: 55;
  visibility: hidden;
  pointer-events: none;
}
.folha.aberto { visibility: visible; pointer-events: auto; }

.folha-fundo {
  position: absolute;
  inset: 0;
  background: rgba(11, 31, 18, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .34s ease;
}
.folha.aberto .folha-fundo { opacity: 1; }
@supports not (backdrop-filter: blur(1px)) {
  .folha-fundo { background: rgba(11, 31, 18, .8); }
}

.folha-card {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-height: 88svh;
  padding: 10px var(--passo) calc(env(safe-area-inset-bottom, 0px) + 22px);
  border-radius: 28px 28px 0 0;
  background: var(--ink);
  color: var(--ink-foreground);
  box-shadow: 0 -2px 8px rgba(11, 31, 18, .2), 0 -28px 64px rgba(11, 31, 18, .34);
  transform: translate3d(0, 100%, 0);
  /* Curva de saida exponencial: sobe rapido e assenta devagar, sem quicar. */
  transition: transform .52s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.folha.aberto .folha-card { transform: translate3d(0, 0, 0); }
/* Enquanto o dedo arrasta, o transform vem do JS e nao pode ter transicao
   competindo com ele, senao o movimento fica borrachudo. */
.folha-card.arrastando { transition: none; }

.folha-puxador {
  width: 40px; height: 4px;
  margin: 0 auto 4px;
  flex: none;
  border-radius: 999px;
  background: rgba(251, 251, 247, .28);
}

/* Cabecalho: quem e a marca, com o simbolo no lugar do avatar. */
.folha-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(251, 251, 247, .12);
}
/* O simbolo oficial, nao o h solto. Ele ja e um selo fechado e tem o h
   VAZADO: o miolo mostra o fundo escuro da folha, que e o lockup certo da
   marca. Por isso nao leva circulo de fundo atras: seria selo dentro de selo. */
.folha-avatar {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  color: var(--lime);
}
.folha-avatar img { width: 42px; height: auto; display: block; }
.folha-quem { min-width: 0; flex: 1; }
.folha-nome {
  font-family: var(--fonte-titulo);
  font-weight: 700; font-size: 1.0625rem;
  letter-spacing: var(--honra-tracking);
}
.folha-slogan {
  margin-top: 1px;
  font-size: .8125rem;
  line-height: 1.35;
  color: rgba(251, 251, 247, .62);
}
.folha-fechar {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  padding: 0; border: 0;
  border-radius: 999px;
  background: rgba(251, 251, 247, .1);
  color: var(--ink-foreground);
  cursor: pointer;
  transition: background-color .2s ease;
}
.folha-fechar:hover { background: rgba(251, 251, 247, .18); }
.folha-fechar .icone { width: 17px; height: 17px; }

.folha-lista { display: flex; flex-direction: column; }
.folha-lista a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 14px;
  margin: 0 -14px;
  border-radius: var(--r-md);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: var(--ink-foreground);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.folha-lista .icone { color: rgba(251, 251, 247, .5); transition: color .2s ease; }
.folha-lista a:hover { background: rgba(251, 251, 247, .07); }
/* A secao em que a pessoa esta agora, marcada pelo mesmo scroll-spy da pilula
   do topo: destaque suave na cor da marca, nao um bloco cheio de lima. */
.folha-lista a.ativo { background: rgba(156, 233, 51, .12); color: var(--lime); }
.folha-lista a.ativo .icone { color: var(--lime); }

.folha-rodape { display: flex; flex-direction: column; gap: 14px; }
.folha-rodape .botao { min-height: 56px; }
.folha-rodape .selo-topo { display: inline-flex; }
.folha-rodape .whats {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--fonte-texto);
  font-size: .9375rem;
  color: rgba(251, 251, 247, .72);
  text-decoration: none;
}
.folha-rodape .whats .icone { width: 18px; height: 18px; }
.folha-rodape .whats:hover { color: var(--lime); }

/* Textos e icones so entram depois que a folha terminou de subir: comecam
   apagados e um pouco abaixo, e sobem em cascata a partir de 0,28s. Antes
   disso o olho esta acompanhando a folha, nao lendo o menu. */
@media (prefers-reduced-motion: no-preference) {
  .folha-topo,
  .folha-lista a,
  .folha-rodape > * {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition: opacity .38s ease, transform .38s cubic-bezier(.16, 1, .3, 1);
  }
  .folha.aberto .folha-topo,
  .folha.aberto .folha-lista a,
  .folha.aberto .folha-rodape > * {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: calc(280ms + var(--e, 0) * 55ms);
  }
  .folha-topo { --e: 0; }
  .folha-lista a:nth-child(1) { --e: 1; }
  .folha-lista a:nth-child(2) { --e: 2; }
  .folha-lista a:nth-child(3) { --e: 3; }
  .folha-lista a:nth-child(4) { --e: 4; }
  .folha-rodape > :nth-child(1) { --e: 4; }
  .folha-rodape > :nth-child(2) { --e: 5; }
  .folha-rodape > :nth-child(3) { --e: 6; }
  /* Fechando, o conteudo some junto com a folha, sem escada reversa. */
  .folha:not(.aberto) .folha-topo,
  .folha:not(.aberto) .folha-lista a,
  .folha:not(.aberto) .folha-rodape > * { transition-duration: .12s; }
}

@media (min-width: 760px) {
  .folha { display: none; }
}

/* ---------- botoes ---------- */

.botao {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--lime);
  color: var(--lime-foreground);
  font-family: var(--fonte-titulo);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--sombra-suave), inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(14, 20, 17, .14);
  transition: filter .2s ease, box-shadow .2s ease, transform .12s ease, background-color .2s ease;
}

/* Luz dentro do botao: uma fonte de luz no alto a esquerda e sombra caindo pro pe.
   Fica no ::before pra valer em qualquer variante de cor sem reescrever o fundo. */
.botao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(178deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 52%, rgba(14, 20, 17, .11) 100%);
  transition: opacity .25s ease;
}

/* A luz e uma mancha larga que passeia devagar dentro do botao. Camada propria pra
   poder animar so o transform: o degrade de cima e de baixo fica parado no ::before. */
.botao::after {
  content: "";
  position: absolute;
  inset: -55%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side at 50% 50%,
    rgba(255, 255, 255, .5) 0%,
    rgba(255, 255, 255, .16) 45%,
    rgba(255, 255, 255, 0) 75%);
  animation: luzBotao 11s ease-in-out infinite;
  will-change: transform;
}

@keyframes luzBotao {
  0%   { transform: translate3d(-18%, -12%, 0) scale(1); }
  30%  { transform: translate3d(12%, -4%, 0) scale(1.15); }
  62%  { transform: translate3d(16%, 10%, 0) scale(.95); }
  100% { transform: translate3d(-18%, -12%, 0) scale(1); }
}

.botao:hover { filter: brightness(1.05); box-shadow: var(--sombra-alta), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(14, 20, 17, .14); }
.botao:hover::before { opacity: .8; }
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.botao[disabled] { opacity: .45; pointer-events: none; }

.botao-escuro { background: var(--ink); color: var(--ink-foreground); }
.botao-vazado { background: var(--card); color: var(--foreground); border: 2px solid rgba(14, 20, 17, .15); box-shadow: none; }
.botao-fantasma { background: transparent; color: var(--foreground); box-shadow: none; }
/* Em fundo claro ou transparente a luz vira sujeira: some nas duas variantes. */
.botao-vazado::before, .botao-vazado::after,
.botao-fantasma::before, .botao-fantasma::after { display: none; }
.botao-grande { min-height: 60px; padding: 0 32px; font-size: 1rem; }
.botao-bloco { width: 100%; }

/* ---------- cartoes ---------- */

.cartao {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
}

.profundo {
  background-image: var(--gradient-deep);
  color: var(--deep-foreground);
  border-radius: 32px;
  padding: 32px 24px;
}

/* ---------- hero ---------- */

/* Ocupa a primeira tela de verdade: min-height + flex centraliza o conteudo na
   altura toda, como o hero da Valorize (.vz-hero, min-height:100svh). svh (small
   viewport height) em vez de vh: no celular vh conta a barra de endereco que
   ainda nao recolheu, svh não, entao o hero não fica alto demais no primeiro
   frame. Padding vira clamp: cresce com a tela em vez de saltar num breakpoint so. */
.hero {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: clamp(96px, 20vh, 132px) 0 clamp(40px, 8vh, 64px);
}
.hero > .container { width: 100%; }
/* Hero centralizado, coluna unica: o cartao do contador saiu do grid 2-colunas
   de antes e virou o selo de prova social, acima do titulo. */
.hero-central { max-width: 720px; margin-inline: auto; text-align: center; }
.hero h1 { margin-top: 18px; }
/* text-wrap: pretty tira a orfa: sem ele o navegador deixava "merece."
   sozinho na terceira linha. */
.hero .sub { margin-top: 18px; text-wrap: pretty; font-size: 1.0625rem; color: var(--deep-foreground); opacity: .82; max-width: 46ch; line-height: 1.65; margin-inline: auto; }
.hero-acoes {
  margin-top: 26px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}
.hero-acoes .botao {
  flex: 1;
  min-width: 0;
  padding: 0 16px;
  font-size: .875rem;
  white-space: nowrap;
}

/* ---------- bolinhas de avatar: hero-prova + depoimento ----------
   Geradas pelo JS (nav.js) ou escritas no HTML. As variantes de cor usam
   exatamente os nomes que o JS sorteia: lime, suave, medio, fundo, ambar. */

.avatar-inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  color: var(--honra-mata, #12301C);
  flex: none;
  width: 24px;
  height: 24px;
  font-size: .75rem;
  line-height: 1;
}
/* Tamanhos */
.avatar-inicial--sm  { width: 16px; height: 16px; font-size: .55rem; }
.avatar-inicial--md  { width: 40px; height: 40px; font-size: 1rem; }
.avatar-inicial--lg  { width: 56px; height: 56px; font-size: 1.375rem; }
/* Efeito de foco no carrossel do hero */
.avatar-inicial--grande { transform: scale(1.25); z-index: 1; }
/* Cores (nomes usados pelo JS) */
.avatar-inicial--lime   { background: var(--honra-lima, #9CE933); box-shadow: 0 0 12px rgba(156, 233, 51, .45); }
.avatar-inicial--suave  { background: rgba(156, 233, 51, .25); color: var(--honra-mata, #12301C); }
.avatar-inicial--medio  { background: rgba(67, 193, 80, .45); }
.avatar-inicial--fundo  { background: var(--honra-mata, #12301C); color: var(--honra-lima, #9CE933); border: 1px solid rgba(156, 233, 51, .3); }
.avatar-inicial--ambar  { background: rgba(184, 121, 10, .25); color: #8a5800; }

/* ---------- prova social: pilula com avatares acima do titulo ---------- */
.hero-prova {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 20px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: rgba(251, 251, 247, .1);
  border: 1px solid rgba(251, 251, 247, .16);
}
/* Janela fixa que corta a tira: so ela decide quantas bolinhas aparecem por vez.
   A mascara desvanece as bordas ao longo de 26% da janela (~20px, mais que o
   diametro de uma bolinha). Antes eram 14% (~11px) e a bolinha da ponta
   terminava com meia borda ainda opaca: lia como bolinha CORTADA, nao como
   bolinha entrando. Com a folga maior ela dissolve inteira. */
.hero-prova-avatares {
  position: relative;
  width: 78px;
  height: 24px;
  flex: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%, #000 74%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 26%, #000 74%, transparent 100%);
}
/* A tira tem o dobro do conjunto (JS duplica), desliza meio percurso e repete.

   Duas coisas aqui parecem detalhe e nao sao:

   1. O espacamento e margin-right em CADA bolinha, nao `gap`. Com gap, 16
      bolinhas tem 15 espacos, entao metade da tira (176,5px) nao era igual a um
      conjunto (176px): sobrava meio espaco e a emenda do loop andava meio pixel
      a cada volta. Com margin-right em todas, a tira mede 16x(16+6) e a metade
      bate exatamente com um conjunto.

   2. A animacao so entra com a classe .rodando, que o JS poe DEPOIS de criar as
      bolinhas. Ela ficava no seletor direto e o relogio comecava a correr no
      primeiro paint, com a tira ainda vazia: quando as bolinhas chegavam, a tira
      ja estava deslocada num ponto qualquer do percurso e elas apareciam
      cortadas. Era esse o bug de carregamento. */
.hero-prova-trilho {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
}
.hero-prova-trilho > * { margin-right: 6px; }
.hero-prova-trilho.rodando { animation: hero-avatares-rodar 14s linear infinite; }
@keyframes hero-avatares-rodar {
  from { transform: translateY(-50%) translateX(0); }
  to { transform: translateY(-50%) translateX(-50%); }
}
.hero-prova-texto { font-size: .6875rem; font-weight: 600; color: var(--deep-foreground); text-align: left; }

/* ---------- destaque em circulo desenhado a mao, no lugar do bloco cheio ---------- */
.circulo { position: relative; display: inline-block; }
.circulo-tracado {
  position: absolute;
  left: -.16em; right: -.16em; top: -.22em; bottom: -.22em;
  width: calc(100% + .32em); height: calc(100% + .44em);
  pointer-events: none;
}
.circulo-tracado path { fill: none; stroke: var(--lime); stroke-width: 5; }


/* Mesmo fundo verde profundo do fecho final: a promessa de protecao aparece antes de rolar a pagina. */
.hero-profundo {
  background-image: var(--gradient-deep);
  color: var(--deep-foreground);
}
.hero-profundo .sub { color: var(--deep-foreground); opacity: .82; }
.hero-profundo .hl { background: var(--lime); color: var(--lime-foreground); }

/* O card do contador continua claro mesmo com o hero escuro: reseta a heranca de cor. */
.hero-profundo .cartao { color: var(--foreground); }

/* ---------- revelar ao rolar ---------- */

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: perspective(1200px) translateY(46px) rotateX(8deg) scale(.96);
    transform-origin: 50% 100%;
    transition: opacity .5s cubic-bezier(.16, .8, .24, 1), transform .5s cubic-bezier(.16, .8, .24, 1);
    /* --d vem do reveal.js: posicao do elemento entre os irmaos com data-reveal.
       Cartoes lado a lado (ou blocos de uma secao) sobem em cascata, um por um. */
    transition-delay: calc(var(--d, 0) * 50ms);
    will-change: transform, opacity;
  }
  [data-reveal].revelado { opacity: 1; transform: none; }
}

/* ---------- titulos: revelacao palavra por palavra, agrupada por linha ----------

   split.js embrulha cada palavra em .split-word (janela com overflow hidden) e
   .split-word-i (a palavra em si, que comeca 115% abaixo e sobe pro lugar).
   Nada de opacidade: quem revela e a janela, como uma persiana. Por isso 115%
   e nao 100%, a palavra precisa comecar fora da janela com folga.

   O atraso de cada palavra (--atraso, em ms) e calculado no JS DEPOIS do
   layout, agrupando as palavras pela linha visual em que cairam. Uma linha
   inteira comeca junto e as palavras dela escalonam entre si; a linha de baixo
   entra atras. E o que faz o titulo ler como texto se escrevendo, e nao como
   um monte de palavras soltas pulando cada uma no seu tempo. */

.split-parent .split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Sem essa folga o overflow corta o pe do g, do p e do q. */
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.split-parent .split-word-i { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .split-parent .split-word-i {
    transform: translate3d(0, 115%, 0);
    transition: transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(var(--atraso, 0) * 1ms);
  }
  .split-parent:not(.split-pronto) .split-word-i { will-change: transform; }
  .split-parent.split-pronto .split-word-i { transform: translate3d(0, 0, 0); }
}

/* ---------- grafismo: o h da marca, gigante, ao fundo ----------

   Regra da marca: o grafismo e sempre o h do logotipo ampliado e sangrando
   pelas bordas, nunca inteiro e centralizado (isso vira carimbo). A cor dele
   sai SEMPRE de outro token da paleta, nunca de opacidade ou filtro, que
   sujam o verde.

   Aqui isso encontra uma restricao que a apresentacao impressa nao tem: em
   cima do h tem texto pra ler. Dai os dois registros:

     .grafismo-h--verde  cor cheia, so onde nao passa texto por cima
     .grafismo-h--mata   tom sobre tom no fundo escuro, textura sob o texto
     .grafismo-h--suave  tom sobre tom no fundo claro, textura sob o texto

   Nos tres o texto branco (ou o tinta, no claro) continua acima de 12:1. */

.grafismo { position: relative; overflow: hidden; isolation: isolate; }

.grafismo > .grafismo-h {
  position: absolute;
  z-index: -1;              /* atras do conteudo, na frente do fundo da secao */
  pointer-events: none;
  line-height: 0;
}
.grafismo > .grafismo-h svg { display: block; width: 100%; height: auto; }

.grafismo-h--verde { color: var(--honra-verde); }
.grafismo-h--mata  { color: var(--honra-mata); }
.grafismo-h--suave { color: var(--honra-lima-suave); }

/* Escala. Os numeros sao a largura do h em relacao a largura da secao, entao
   200% quer dizer que ele tem o dobro da secao e so um pedaco da curva cabe
   na tela. E esse o efeito: nem sempre da pra reconhecer que aquilo e a
   nossa letra, e nao precisa dar. */
.grafismo-h--g  { width: 130%; }
.grafismo-h--gg { width: 210%; }
.grafismo-h--xg { width: 330%; }

/* Ancoras de sangria. Cada uma encosta o h numa borda e joga o resto pra fora. */
.grafismo-h--sudeste  { right: -46%; bottom: -58%; }
.grafismo-h--noroeste { left: -52%;  top: -46%; }
.grafismo-h--leste    { right: -74%; top: 50%; transform: translateY(-50%); }
.grafismo-h--oeste    { left: -70%;  top: 50%; transform: translateY(-50%); }

@media (max-width: 759px) {
  /* No celular a secao e estreita: a mesma porcentagem daria um h menor em
     pixel do que no desktop, e ele sumiria. Cresce pra compensar. */
  .grafismo-h--g  { width: 210%; }
  .grafismo-h--gg { width: 330%; }
  .grafismo-h--xg { width: 460%; }
}

/* ---------- contador ---------- */

.contador { margin-top: 30px; }
/* No celular o rotulo e o numero nao cabem lado a lado sem quebrar feio. */
.contador-cabeca { display: grid; gap: 4px; margin-bottom: 12px; }
.contador-valor { font-size: 1.35rem; letter-spacing: -.02em; }
.contador-valor { font-family: var(--fonte-titulo); font-weight: 600; font-size: .95rem; }

.trilho {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(14, 20, 17, .1);
  overflow: hidden;
}

.trilho-cheio {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--gradient-lime);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.2, .7, .3, 1);
}

/* Sem animacao em loop aqui de proposito. Barra que brilha sozinha o tempo todo le
   como "carregando"; progresso e estado, nao atividade. A barra so se mexe quando a
   pessoa realmente avanca, e ai o movimento significa alguma coisa. */

/* ---------- secoes ---------- */

.secao { padding: 48px 0; }
.secao-suave { background: var(--secondary); }

.secao-topo { margin-bottom: 26px; }
.secao-topo h2 { margin-top: 14px; }
.secao-topo p { margin-top: 14px; text-wrap: pretty; font-size: 1rem; color: var(--muted-foreground); max-width: 48ch; }

/* ---------- icones desenhados ---------- */
/* Um so peso de traco (1.75), sem preenchimento: nada de emoji nem glifo Unicode
   fazendo de conta que e icone. */
.icone { width: 22px; height: 22px; flex: none; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- hover consistente em qualquer cartao ---------- */
.cartao, .duvida, .blocos-3 > div, .pilar, .contraste-lado, .depoimento, .profundo {
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease, border-color .25s ease;
}
.blocos-3 > div:hover, .duvida:hover, .pilar:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.contraste-lado:hover { transform: translateY(-4px); }


/* ---------- planos ---------- */

.planos { display: grid; gap: 20px; }

.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  /* Cada propriedade com seu proprio tempo, tudo numa declaracao so: opacity e
     transform entram devagar e em cascata (mesmo ritmo do [data-reveal], que
     nao pode reger este elemento porque uma unica regra .plano generica ja
     bastaria pra brigar de especificidade com ele); border-color e box-shadow
     reagem rapido ao hover, sem herdar o atraso da entrada. */
  transition:
    opacity .5s cubic-bezier(.16, .8, .24, 1) calc(var(--d, 0) * 50ms),
    transform .5s cubic-bezier(.16, .8, .24, 1) calc(var(--d, 0) * 50ms),
    border-color .2s ease,
    box-shadow .2s ease;
}

/* transition-duration/delay soltos (fora do shorthand) sobrescrevem so o tempo,
   pras 4 propriedades listadas em .plano; sem isso o hover herdaria o atraso
   e os 0.8s da entrada, e o levante ficaria lento e atrasado no terceiro cartao. */
.plano:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); transition-duration: .2s; transition-delay: 0s; }
.plano-selecionado { border-color: var(--lime); box-shadow: var(--sombra-alta); }
.plano-selo { position: absolute; top: -14px; left: 24px; }
.plano:nth-child(3) { border-color: var(--lime); }

.plano h3 { margin-top: 8px; }

.preco { display: flex; align-items: flex-end; gap: 4px; margin-top: 14px; font-family: var(--fonte-titulo); }
.preco .reais { font-size: .875rem; font-weight: 600; color: var(--muted-foreground); margin-bottom: 6px; }
.preco .inteiro { font-size: 3rem; font-weight: 700; line-height: 1; }
.preco .centavos { font-size: 1.25rem; font-weight: 700; }
.preco .mes { font-size: .875rem; color: var(--muted-foreground); margin-bottom: 4px; }
.preco-nota { margin-top: 2px; font-size: .8125rem; color: var(--muted-foreground); }

.ciclo-toggle {
  display: flex;
  justify-content: center;
  width: fit-content;
  gap: 4px;
  margin: 22px auto 40px;
  padding: 5px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 999px;
}
.ciclo-opcao {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
}
.ciclo-opcao.ativo { background: var(--ink); color: var(--ink-foreground); }

/* No formulario o bloco de ciclo abre a etapa, centralizado, antes do resumo. */
.ciclo-bloco { text-align: center; }
.ciclo-bloco .ciclo-toggle { margin: 10px auto 0; }
.ciclo-opcao .ciclo-selo {
  font-size: .6875rem;
  font-weight: 700;
  color: var(--lime-foreground);
  background: var(--lime);
  border-radius: 999px;
  padding: 2px 7px;
}
.ciclo-opcao.ativo .ciclo-selo { background: var(--lime); color: var(--lime-foreground); }

.plano-resumo { margin-top: 10px; font-size: .9375rem; color: var(--muted-foreground); min-height: 3em; }

.plano .botao { margin-top: 20px; }

/* O bloco de baixo e onde a pessoa compara. Fica num tom proprio pra ler como
   ficha tecnica, separado do preco e do botao. */
.plano-detalhe {
  margin-top: 22px;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--muted);
  flex: 1;
}
.plano:nth-child(3) .plano-detalhe { background: var(--lime-soft); }

.plano-quem { display: grid; gap: 3px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(14, 20, 17, .1); }
.plano-quem span { font-family: var(--fonte-titulo); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); }
.plano-quem b { font-family: var(--fonte-titulo); font-size: 1rem; line-height: 1.35; }
/* Fica entre o botao e o bloco cinza: e condicao do plano, nao item da lista. */
.plano-carencia { margin-top: 12px; text-align: center; font-size: .75rem; color: var(--muted-foreground); }

.itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: .875rem; line-height: 1.5; }
.itens li { display: flex; gap: 10px; align-items: flex-start; }
.itens .marca {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .625rem; font-weight: 700;
  background: var(--lime-grad-b); color: #fff;
}
.itens .item-nao { color: var(--muted-foreground); }
.itens .item-nao .marca { background: rgba(14, 20, 17, .12); color: var(--muted-foreground); font-size: .8125rem; }

.sobre-missao { margin-top: 40px; max-width: 760px; }

/* Tres tratamentos diferentes, nao tres caixas iguais: o meio ganha o lima (a
   diferenciacao pratica que mais gera duvida), o ultimo fica escuro (fecho
   emocional), o primeiro fica no cartao claro padrao. */
.pilares { display: grid; gap: 18px; margin-top: 28px; }
.pilar {
  padding: 26px 24px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 2px solid var(--border);
}
.pilar .icone { color: var(--foreground); }
.pilar h3 { margin-top: 16px; font-size: 1.0625rem; }
.pilar p { margin-top: 8px; font-size: .9375rem; line-height: 1.55; color: var(--muted-foreground); }

.pilar--lime {
  background: var(--gradient-lime);
  border-color: transparent;
  color: var(--lime-foreground);
}
.pilar--lime .icone { color: var(--lime-foreground); }
.pilar--lime p { color: var(--lime-foreground); opacity: .8; }

.pilar--escuro {
  background-image: var(--gradient-deep);
  border-color: transparent;
  color: var(--deep-foreground);
}
.pilar--escuro .icone { color: var(--lime); }
.pilar--escuro p { color: var(--deep-foreground); opacity: .78; }


/* ---------- contraste carro x familia ---------- */
/* O carro fica pequeno e resolvido (cartao claro, check verde, uma coluna mais
   estreita). A familia fica grande e sem resposta (cartao escuro igual ao do
   fecho, perguntas sem check, tipografia maior): a assimetria visual e o
   argumento, nao so o texto. Mesmo principio da Valorize de usar peso/cor
   desigual entre blocos vizinhos pra guiar o olho pro que importa. */
.contraste { display: grid; gap: 18px; margin-top: 28px; }

.contraste-lado { padding: 28px 26px; border-radius: var(--r-lg); }

.contraste-lado--carro {
  background: var(--card);
  border: 2px solid var(--border);
}
.contraste-lado--carro .contraste-rotulo { color: var(--muted-foreground); }
.contraste-lado--carro .icone { color: var(--muted-foreground); width: 30px; height: 30px; }
.contraste-lado--carro .contraste-rotulo { margin-top: 14px; }
.contraste-lado--carro .itens { margin-top: 18px; }

.contraste-lado--familia {
  background-image: var(--gradient-deep);
  color: var(--deep-foreground);
  box-shadow: var(--sombra-alta);
}
.contraste-lado--familia .contraste-rotulo { color: var(--lime); margin-top: 16px; }
.contraste-lado--familia .icone { color: var(--lime); width: 34px; height: 34px; }

.contraste-rotulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contraste-perguntas { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.contraste-perguntas li {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(1.1875rem, 3.4vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  padding: 14px 0;
  border-bottom: 1px solid rgba(251, 251, 247, .16);
}
.contraste-perguntas li:first-child { padding-top: 0; }
.contraste-perguntas li:last-child { border-bottom: 0; padding-bottom: 0; }


/* ---------- citacao, depoimento, blocos de 3 ---------- */

/* Sem cor propria: herda do container (--profundo escurece, secao clara mantem
   --foreground). Usada no depoimento e na frase do luto/boletos. */
.citacao {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.25rem, 4vw, 1.625rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
}

/* ---------- card de depoimento moderno ---------- */

.depoimento-card {
  padding: 44px 48px;
  border-radius: var(--r-xl);
  background: var(--honra-mata, #12301C);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.depoimento-topo {
  max-width: 820px;
}
.selo-historia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(209, 255, 61, .15);
  color: var(--honra-lima, #9CE933);
  font-family: var(--fonte-titulo);
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 18px;
}
.selo-historia .selo-ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--honra-lima, #9CE933);
}
.depoimento-frase {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 700;
  line-height: 1.35;
  color: #FFFFFF;
}
.depoimento-grade {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  margin-top: 32px;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 28px;
}
.depoimento-coluna-historia {
  display: grid;
  gap: 16px;
}
.depoimento-trecho p {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .86);
}
.depoimento-trecho strong {
  color: var(--honra-lima, #9CE933);
}
.depoimento-autor-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 8px;
}
.depoimento-autor-card .depoimento-nome {
  font-size: 1.375rem;
  font-weight: 700;
  color: #FFFFFF;
}
.depoimento-autor-card .depoimento-bio {
  font-size: .875rem;
  color: rgba(255, 255, 255, .75);
  line-height: 1.45;
  margin: 0;
}
.depoimento-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: .75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(156, 233, 51, .15);
  color: var(--honra-lima, #9CE933);
  border: 1px solid rgba(156, 233, 51, .25);
}

@media (max-width: 900px) {
  .depoimento-grade { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- citacao dos boletos centralizada e refinada ---------- */

.citacao-bloco--central {
  margin: 44px auto 0;
  max-width: 720px;
  text-align: center;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  box-shadow: var(--sombra-baixa);
  position: relative;
}
.citacao-simbolo-aspas {
  font-family: var(--fonte-titulo);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--honra-lima, #9CE933);
  margin-bottom: -10px;
  font-weight: 800;
}
.citacao-destaque {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--foreground);
}
.citacao-subtexto {
  margin-top: 14px !important;
  font-size: .9375rem !important;
  line-height: 1.65 !important;
  color: var(--muted-foreground) !important;
  max-width: 58ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- secoes com background de imagem ---------- */

#carro-familia {
  position: relative;
  background: linear-gradient(180deg, rgba(251, 251, 247, .92) 0%, rgba(251, 251, 247, .96) 100%),
              url('../img/motorista-familia.webp') center center / cover no-repeat;
}

.secao-manifesto {
  position: relative;
  background: linear-gradient(rgba(18, 48, 28, 0.72), rgba(18, 48, 28, 0.84)),
              url('../img/bandeira-zoom.webp') center center / cover no-repeat;
  padding: 96px 0;
}
.manifesto-card {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-xl);
  padding: 48px 40px;
  box-shadow: var(--sombra-alta);
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.manifesto-card h2 { font-size: clamp(1.75rem, 3vw, 2.375rem); margin-top: 12px; }
.manifesto-card p { margin-top: 16px; font-size: 1.0625rem; line-height: 1.75; color: var(--foreground); }

#confianca {
  position: relative;
  background: linear-gradient(180deg, rgba(251, 251, 247, .92) 0%, rgba(251, 251, 247, .96) 100%),
              url('../img/caixas-presentes.webp') center center / cover no-repeat;
}

/* ---------- FAQ ---------- */
.secao-faq {
  position: relative;
  background: linear-gradient(rgba(18, 48, 28, 0.52), rgba(18, 48, 28, 0.64)),
              url('../img/pai-filho.webp') center center / cover no-repeat;
  padding: 64px 0;
}
.faq-card {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-xl);
  padding: 32px 20px;
  box-shadow: var(--sombra-alta);
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.5);
  text-align: left;
}
.faq-card h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 800;
  color: var(--honra-mata);
  margin-bottom: 24px;
}
.faq-grupo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-item {
  border-bottom: 1px solid rgba(18, 48, 28, 0.12);
  padding-bottom: 16px;
}
.faq-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.faq-pergunta {
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--honra-mata);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  user-select: none;
}
.faq-pergunta::-webkit-details-marker {
  display: none;
}
.faq-pergunta::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--honra-lima);
  transition: transform 0.2s ease;
  line-height: 1;
}
.faq-item[open] .faq-pergunta::after {
  content: "−";
  color: var(--honra-mata);
}
.faq-resposta {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(18, 48, 28, 0.8);
}

@media (min-width: 760px) {
  .secao-faq {
    padding: 96px 0;
  }
  .faq-card {
    padding: 48px 40px;
    max-width: 620px;
    margin-right: auto;
    margin-left: 0;
  }
}

.blocos-3 { display: grid; gap: 20px; margin-top: 26px; }
.blocos-3 > div { padding: 22px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .95); backdrop-filter: blur(6px); border: 2px solid var(--border); }
.blocos-3 p { margin-top: 10px; font-size: .9375rem; line-height: 1.6; color: var(--muted-foreground); }

/* ---------- caixa da duvida individual x familiar ---------- */

.duvida {
  margin-top: 26px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 2px solid var(--border);
  color: var(--foreground);
}
.duvida-titulo { font-family: var(--fonte-titulo); font-size: 1.0625rem; font-weight: 700; }
.duvida-grade { display: grid; gap: 18px; margin-top: 18px; }
/* Barrinha lima no lugar do texto lima: verde claro sobre branco nao se le. */
.duvida-plano {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  background: var(--lime-soft); color: var(--lime-foreground);
  font-family: var(--fonte-titulo); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
}
.duvida-grade p { margin-top: 9px; font-size: .9375rem; line-height: 1.6; color: var(--muted-foreground); }
.duvida-grade b { color: var(--foreground); }
.duvida-fecho { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-size: .8125rem; color: var(--muted-foreground); }

/* ---------- tabela lado a lado (só no desktop) ---------- */

/* Comparativo sobrio: sem cartao por celula e sem cor de fundo. O que separa e
   a linha fina; o plano do meio ganha uma faixa cinza de leve, nada mais. */
.tabela-planos { display: none; }
.tabela-planos table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabela-planos th, .tabela-planos td { padding: 16px 14px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--border); }

.tabela-planos thead th { font-family: var(--fonte-titulo); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 600; vertical-align: bottom; padding-bottom: 18px; }
.tabela-planos thead .col-plano { color: var(--foreground); }
.col-selo { display: inline-block; margin-bottom: 8px; padding: 5px 10px; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); font-size: .5625rem; }
.tabela-planos .col-nome { display: block; font-size: .9375rem; letter-spacing: -.01em; font-weight: 700; }

.tabela-planos tbody th,
.tabela-planos thead th:first-child {
  text-align: left;
  font-family: var(--fonte-texto); font-weight: 400; color: var(--muted-foreground);
  width: 22%;
}
.tabela-planos td.marcado { font-family: var(--fonte-titulo); font-weight: 600; }
.tabela-planos .col-destaque { background: rgba(14, 20, 17, .035); }

.tabela-planos .icone-sim,
.tabela-planos .icone-nao {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: .75rem; font-weight: 700;
}
.tabela-planos .icone-sim { background: var(--lime-grad-b); color: #fff; }
.tabela-planos .icone-nao { background: var(--foreground); color: var(--card); }
.tabela-planos .linha-preco .preco { margin-top: 0; justify-content: center; }
.tabela-planos .linha-preco .inteiro { font-size: 2rem; }
.tabela-planos tfoot td { border-bottom: 0; padding-top: 22px; }
.tabela-planos tfoot .botao { min-height: 50px; font-size: .875rem; padding: 0 14px; }

/* ---------- comparativo do celular: escolhe o plano, ve a ficha dele ---------- */

/* No celular ninguem le tres colunas. Escolhe-se um plano e a ficha dele abre
   embaixo, uma caracteristica por linha. */
.comparador-mobile { display: block; }
.seletor-planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seletor-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 10px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--border);
  font-family: var(--fonte-titulo); font-size: .75rem; line-height: 1.25; color: var(--foreground);
}
.seletor-item span { display: block; margin-top: 4px; font-family: var(--fonte-texto); font-size: .6875rem; font-weight: 400; color: var(--muted-foreground); }
.seletor-item[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--ink-foreground); }
.seletor-item[aria-selected="true"] span { color: rgba(251, 251, 247, .7); }

.ficha-plano { margin-top: 18px; }
.ficha-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.ficha-linha dt { font-size: .875rem; color: var(--muted-foreground); }
.ficha-linha dd { margin: 0; text-align: right; font-family: var(--fonte-titulo); font-size: .875rem; font-weight: 600; }
.ficha-plano .icone-sim,
.ficha-plano .icone-nao {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: .75rem; font-weight: 700;
}
.ficha-plano .icone-sim { background: var(--lime-grad-b); color: #fff; }
.ficha-plano .icone-nao { background: var(--foreground); color: var(--card); }
.ficha-acao { margin-top: 20px; }

/* ---------- card elegante de regras e condicoes ---------- */

.legal-card {
  margin-top: 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  box-shadow: var(--sombra-baixa);
}
.legal-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--honra-lima-suave, #E4F9C4);
  color: var(--honra-mata, #12301C);
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--fonte-titulo);
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.legal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.legal-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.legal-item-icone {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: var(--muted);
  color: var(--honra-mata, #12301C);
  display: grid;
  place-items: center;
}
.legal-item-texto strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 4px;
}
.legal-item-texto p {
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  margin: 0;
}
.legal-item-texto a {
  color: var(--honra-mata, #12301C);
  text-decoration: underline;
  font-weight: 600;
}
.legal-nota-rodape {
  margin-top: 16px;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.legal-nota-rodape b {
  color: var(--foreground);
}

@media (max-width: 900px) {
  .legal-card {
    padding: 20px;
  }
  .legal-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ---------- aviso ---------- */

.aviso {
  display: flex;
  gap: 12px;
  border: 2px solid rgba(184, 121, 10, .5);
  background: rgba(184, 121, 10, .12);
  border-radius: var(--r-md);
  padding: 16px;
  margin-top: 20px;
}
.aviso-icone {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--warning);
  color: var(--ink);
  font-family: var(--fonte-titulo); font-weight: 700; font-size: .875rem;
}
.aviso p { font-size: .875rem; line-height: 1.6; }
.aviso .titulo { font-family: var(--fonte-titulo); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; }
.aviso-erro { border-color: rgba(196, 43, 39, .45); background: rgba(196, 43, 39, .1); }
.aviso-erro .aviso-icone { background: var(--destructive); color: #fff; }
.erro-avanco { margin: 16px 0 12px; }
.aviso[hidden] { display: none !important; }

/* Boa noticia (cadastro confirmado, sem cobranca nesta etapa) nao pode usar o laranja
   de alerta: em cima de "sem cobranca agora" o laranja lia como problema. */
.aviso-ok { border-color: rgba(156, 233, 51, .55); background: var(--lime-soft); }
.aviso-ok .aviso-icone { background: var(--lime); color: var(--lime-foreground); }

/* Retomar cadastro. Em cima do lima-suave o botao lima sumiria: a acao principal
   e a escura, e o contorno de foco vira mata pelo mesmo motivo. */
.retomar { margin: 20px 0 4px; }
.retomar > div { flex: 1; min-width: 0; }
.retomar-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.retomar-acoes .botao { flex: 1 1 190px; min-height: 48px; padding: 0 20px; }
.retomar-acoes .botao:focus-visible { outline-color: var(--ink); }
.aviso .retomar-nota { margin-top: 12px; font-size: .8125rem; }

/* ---------- ajuda (o "?" ao lado do rotulo) ---------- */

.ajuda { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.ajuda-abrir {
  width: 18px; height: 18px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: var(--ink); color: var(--ink-foreground);
  font-family: var(--fonte-titulo); font-weight: 700; font-size: .6875rem;
  cursor: pointer;
}
.ajuda-caixa {
  position: absolute; z-index: 5; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  width: min(280px, 78vw);
  padding: 14px;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--sombra-alta);
  font-family: var(--fonte-texto); font-weight: 400; font-size: .8125rem;
  line-height: 1.55; color: var(--foreground);
  text-transform: none; letter-spacing: 0;
}
.ajuda-caixa b { font-weight: 600; }
.ajuda-caixa ul { margin: 8px 0 0; padding-left: 18px; }
.ajuda-caixa li { margin-top: 2px; }

/* ---------- checkout (cartao e pix, dentro da nossa pagina) ---------- */

.checkout-pix { text-align: center; }
.checkout-qr {
  width: 220px; height: 220px; margin: 0 auto;
  border: 2px solid var(--border); border-radius: var(--r-lg);
}
.checkout-copia { margin-top: 14px; }
.checkout-copia + .botao { margin-top: 14px; }
.checkout-copia input {
  font-size: .8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.checkout-selo {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 18px; text-align: center;
  font-size: .75rem; color: var(--muted-foreground);
}
.icone-sm { width: 15px; height: 15px; stroke-width: 2; }

/* Escolha do gateway. Os dois cartoes tem o MESMO peso visual de proposito: destacar
   um empurra a pessoa pra forma que e melhor pra nos, nao pra ela. */
.metodos { border: 0; padding: 0; margin: 24px 0 0; }
.metodos-titulo {
  padding: 0; margin-bottom: 12px;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: .875rem;
}
.metodos-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.metodo {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 16px 14px; text-align: left; cursor: pointer;
  background: var(--card); color: var(--foreground);
  border: 2px solid var(--border); border-radius: var(--r-md);
  font-family: var(--fonte-texto);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.metodo:hover { transform: translateY(-2px); box-shadow: var(--sombra-suave); border-color: rgba(14, 20, 17, .3); }
.metodo:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }
.metodo .icone { color: var(--muted-foreground); transition: color .18s ease; }
.metodo-nome { font-family: var(--fonte-titulo); font-weight: 600; font-size: .9375rem; line-height: 1.25; }

/* Marca do Pix. Fica na cor original de proposito: logo de terceiro nao se recolore. */
.metodo-marca { width: 24px; height: 24px; flex: none; }

.metodo--ativo { border-color: var(--deep); background: var(--lime-soft); }
.metodo--ativo .icone { color: var(--lime-foreground); }

/* Botao de metodo fora do ar: enquanto o Pix esta sendo gerado (os dois) e depois que
   ele existe (o cartao, que a partir dai responderia 409). Recusar depois do clique
   e pior do que mostrar que a porta ja fechou. */
.metodo:disabled { cursor: not-allowed; opacity: .45; }
.metodo:disabled:hover { transform: none; box-shadow: none; border-color: var(--border); }
.metodo--fora { opacity: .4; }

/* Passo intermediario do Pix. O clique no seletor so traz esta explicacao; a cobranca
   de verdade nasce no botao daqui. */
.checkout-convite {
  text-align: left;
  border: 2px solid var(--border); border-radius: var(--r-lg);
  background: var(--card); padding: 20px;
}
.checkout-convite-titulo {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: -.01em;
}
.checkout-convite-texto {
  margin: 8px 0 18px;
  font-size: .875rem; line-height: 1.6; color: var(--muted-foreground);
}

.checkout-painel { margin-top: 22px; }
.checkout-nota { margin-top: 12px; text-align: center; font-size: .75rem; color: var(--muted-foreground); }

@media (max-width: 420px) {
  .metodos-grade { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .metodo { transition: border-color .18s ease; }
  .metodo:hover { transform: none; }
}

/* ---------- transicao entre cadastro e pagamento ---------- */

.transicao { text-align: center; padding: 30px 0 10px; }
.transicao .selo-ok { margin: 0 auto; }
.transicao h3 { margin-top: 16px; font-size: 1.25rem; }
.transicao p { margin-top: 10px; color: var(--muted-foreground); font-size: .9375rem; }
.girando {
  width: 34px; height: 34px; margin: 0 auto;
  border: 3px solid var(--border); border-top-color: var(--lime);
  border-radius: 999px;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- fecho ---------- */

.fecho h2 { margin: 18px 0 0; max-width: 18ch; }
.fecho p { margin-top: 16px; color: var(--deep-foreground); opacity: .85; max-width: 44ch; }
.fecho .botao { margin-top: 26px; }

/* ---------- rodape ---------- */

/* ---------- rodape moderno estilo Loovi ---------- */

.rodape {
  background: var(--honra-mata-fundo, #0B1F12);
  color: rgba(251, 251, 247, .7);
  padding: 60px 0 48px;
  font-size: .875rem;
}
.rodape-barra-topo {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 44px;
}
.rodape-barra-topo .marca-logo {
  height: 32px;
  width: auto;
}
.rodape-trilho-linha {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--honra-lima, #9CE933) 0%, rgba(67, 193, 80, .5) 40%, rgba(255, 255, 255, .1) 100%);
  position: relative;
}
.rodape-trilho-linha::after {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--honra-lima, #9CE933);
  box-shadow: 0 0 10px var(--honra-lima, #9CE933);
}
.rodape-grid-loovi {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap: 40px;
}
.rodape-coluna-bloco {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rodape-coluna-titulo {
  font-family: var(--fonte-titulo);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--honra-lima, #9CE933);
  margin-bottom: 6px;
}
.rodape-btn-whats-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  color: var(--honra-mata, #12301C);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .875rem;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  width: fit-content;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  transition: transform .2s ease, filter .2s ease;
}
.rodape-btn-whats-pill:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.rodape-btn-whats-pill .icone {
  width: 18px;
  height: 18px;
  stroke: var(--honra-mata, #12301C);
}
.rodape-info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  line-height: 1.5;
  color: rgba(251, 251, 247, .85);
}
.rodape-info-item .icone {
  width: 18px;
  height: 18px;
  stroke: var(--honra-lima, #9CE933);
  margin-top: 2px;
  flex: none;
}
/* Telefone clicavel no celular sem virar link azul de navegador: no rodape
   escuro a cor tem que continuar sendo a do texto. */
.rodape-info-item strong a { color: inherit; text-decoration: none; }
.rodape-info-item strong a:hover,
.rodape-info-item strong a:focus-visible { color: var(--honra-lima, #9CE933); }

.rodape-info-texto-sub {
  font-size: .8125rem;
  color: rgba(251, 251, 247, .55);
  margin-top: 2px;
}
.rodape-links-lista {
  display: grid;
  gap: 10px;
}
.rodape-links-lista a {
  color: rgba(251, 251, 247, .8);
  text-decoration: none;
  transition: color .2s ease;
}
.rodape-links-lista a:hover {
  color: var(--honra-lima, #9CE933);
}

.rodape-redes-barra {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(251, 251, 247, .1);
}
.rodape-rede-link {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #FFFFFF;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.rodape-rede-link:hover {
  background: var(--honra-lima, #9CE933);
  color: var(--honra-mata, #12301C);
  transform: translateY(-2px);
}
.rodape-rede-link .icone {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.rodape-regulatorio {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(251, 251, 247, .08);
  font-size: .75rem;
  line-height: 1.7;
  color: rgba(251, 251, 247, .55);
}
.rodape-regulatorio p { margin: 0; }
.rodape-regulatorio a {
  color: rgba(251, 251, 247, .8);
  text-decoration: underline;
}
.rodape-regulatorio a:hover { color: var(--lime); }
.rodape-credito { margin-top: 20px; border-top: 1px solid rgba(251, 251, 247, .08); padding-top: 18px; font-size: .75rem; opacity: .5; }
.rodape-credito a { color: var(--ink-foreground); text-decoration: none; }

@media (max-width: 900px) {
  .rodape-grid-loovi {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ---------- barra fixa do rodape: removida em 29/08/2026 ----------

   Existia so no celular e repetia o que a pilula do topo agora faz. Duas
   navegacoes fixas ao mesmo tempo comiam altura de tela em dobro num aparelho
   que ja tem pouca. O CTA dela virou o "Ver planos" da propria pilula.
   Os botoes dentro dos cartoes de plano seguem iguais. */

/* ---------- modal de cadastro ---------- */

.modal { position: fixed; inset: 0; z-index: 60; }
.modal[hidden] { display: none; }

.modal-fundo {
  position: absolute; inset: 0;
  background: rgba(11, 31, 18, .55);
  animation: aparece .2s ease;
}

.modal-janela {
  position: absolute;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  max-height: calc(100vh - 48px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--background);
  border-radius: 28px;
  box-shadow: var(--sombra-alta);
  animation: sobeModal .28s cubic-bezier(.2, .7, .3, 1);
  overscroll-behavior: contain;
}

@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes sobeModal { from { transform: translateY(100%); } to { transform: none; } }

.modal-topo {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--modal-passo);
  background: var(--background);
}

.modal-fechar {
  width: 40px; height: 40px; flex: none;
  border: 0; border-radius: 999px;
  background: var(--muted); color: var(--foreground);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.modal-fechar:hover { background: var(--secondary); }

.modal-conteudo { padding: 0 var(--modal-passo) 36px; }

/* Pilula, nao bloco: fica na barra do topo junto do X, entao precisa caber numa
   linha e sobrar largura pro botao. */
html[data-honra-etapa="1"] .modal-plano { display: none; }

.modal-plano {
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--lime-soft);
}
.modal-plano-rotulo { flex: none; font-family: var(--fonte-titulo); font-size: .625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lime-foreground); opacity: .65; }
.modal-plano-nome {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--fonte-titulo); font-size: .875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--lime-foreground);
}

/* Tela estreita: o nome do plano e o que importa, o rotulo sai. */
@media (max-width: 400px) {
  .modal-plano-rotulo { display: none; }
}
.modal-conteudo .form-barra { position: sticky; top: 60px; z-index: 1; padding: 10px 0 14px; background: var(--background); }
.modal-conteudo .etapa { padding-top: 6px; }

/* Na pagina cadastro.html a barra acompanha o topo fixo. */
.form-corpo .form-barra { position: sticky; top: 0; z-index: 10; padding: 14px 0; background: var(--background); }

/* ---------- formulario ---------- */

.form-topo {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 251, 247, .95);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 13px 0 16px;
}
.form-topo .trilho { margin-top: 14px; }

.form-corpo { padding: 28px var(--passo) 40px; max-width: 620px; margin: 0 auto; }

/* Contador da jornada. Responde "onde estou" e "quanto falta" sem a pessoa
   precisar contar tela. Fica acima da barra, discreto: quem manda na hierarquia
   da tela e o titulo da etapa, nao o cronometro. */
.form-passo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.form-passo-conta {
  flex: none;
  font-family: var(--fonte-titulo); font-weight: 600;
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.form-passo-nome {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: .75rem;
  color: var(--foreground);
}

/* Agrupamento dentro de uma etapa. Quebra a parede de campos em blocos com nome,
   pra pessoa ler tres listas curtas em vez de uma longa. */
.grupo-titulo {
  margin: 10px 0 -6px;
  font-family: var(--fonte-titulo); font-weight: 600;
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.campos > .grupo-titulo:first-child { margin-top: 0; }

.etapa { display: none; }
.etapa.ativa { display: block; animation: sobe .28s cubic-bezier(.2, .7, .3, 1); }
@keyframes sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.etapa h2 { margin-top: 14px; }
.etapa .sub { margin-top: 12px; font-size: .9375rem; color: var(--muted-foreground); }

.campos { display: grid; gap: 18px; margin-top: 26px; }
.campos-duplo { display: grid; gap: 18px; }

.campo label { display: block; font-family: var(--fonte-titulo); font-weight: 600; font-size: .875rem; margin-bottom: 6px; }
.campo .dica { display: block; font-family: var(--fonte-texto); font-weight: 400; color: var(--muted-foreground); font-size: .8125rem; margin-top: 3px; }

/* Dica dentro do rotulo fica na mesma linha, entre parenteses: "WhatsApp (e por aqui
   que a gente fala com voce)". Fora do rotulo (ex: status do CEP) continua em bloco. */
.campo label .dica { display: inline; margin-top: 0; }
.campo label .dica::before { content: "("; }
.campo label .dica::after { content: ")"; }

.campo input, .campo select {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  color: var(--foreground);
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  appearance: none;
}
.campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2358645d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px;
}
.campo input:focus, .campo select:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(156, 233, 51, .35);
}
.campo.invalido input, .campo.invalido select { border-color: var(--destructive); }
.campo .erro { display: none; color: var(--destructive); font-size: .75rem; font-weight: 500; margin-top: 6px; }
.campo.invalido .erro { display: block; }
.campo.travado input,
.campo.travado select {
  background: #eef1ee;
  color: var(--muted-foreground);
  cursor: not-allowed;
}
.campo.travado .campo-data-abrir { opacity: .45; pointer-events: none; }

/* Sem left:-9999px: isso alarga o scroll horizontal do formulario/modal. */
.oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.check {
  display: flex; gap: 12px; align-items: flex-start;
  border: 2px solid var(--border); border-radius: var(--r-md);
  padding: 16px; background: var(--card);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--lime); }
.check span { font-size: .875rem; line-height: 1.6; }
.check.marcado { border-color: var(--lime); background: var(--lime-soft); }
.check.invalido { border-color: var(--destructive); }

.cep-achado { display: none; }
.cep-achado.visivel { display: flex; }
.cep-achado .endereco { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1rem; margin-top: 6px; }
.cep-achado .acoes { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.cep-achado .acoes .botao { min-height: 44px; padding: 0 18px; font-size: .875rem; }

.beneficiario { border: 2px solid var(--border); border-radius: var(--r-lg); padding: 20px 18px; background: var(--card); margin-bottom: 14px; }
.beneficiario-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.beneficiario-titulo { font-family: var(--fonte-titulo); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }
.remover { background: none; border: 0; color: var(--destructive); font-family: var(--fonte-titulo); font-size: .875rem; font-weight: 600; cursor: pointer; padding: 6px; }

/* ---------- estados do CEP ---------- */

.cep-estado {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 8px;
  font-family: var(--fonte-texto); font-size: .8125rem; line-height: 1.45;
  color: var(--muted-foreground);
}
.cep-estado:empty { display: none; }
.cep-marca {
  display: grid; place-items: center; flex: none;
  width: 18px; height: 18px; margin-top: 1px;
  border-radius: 999px;
  font-family: var(--fonte-titulo); font-size: .625rem; font-weight: 700;
}
.cep-estado--confirmado { color: var(--lime-foreground); }
.cep-estado--confirmado .cep-marca { background: var(--lime); color: var(--lime-foreground); }
.cep-estado--atencao { color: var(--foreground); }
.cep-estado--atencao .cep-marca { background: var(--warning); color: var(--lime-foreground); }

/* Indicador de busca: gira so enquanto esta buscando de verdade. */
.cep-girando {
  flex: none; width: 15px; height: 15px; margin-top: 2px;
  border: 2px solid var(--border); border-top-color: var(--deep);
  border-radius: 999px;
  animation: girar .7s linear infinite;
}
.cep-alterar {
  background: none; border: 0; padding: 0;
  font: inherit; font-weight: 600; color: inherit;
  text-decoration: underline; cursor: pointer;
}

/* ---------- distribuicao entre beneficiarios ---------- */

.soma {
  padding: 15px 18px; border-radius: var(--r-md);
  background: var(--muted); color: var(--foreground);
  margin-bottom: 16px;
  transition: background-color .25s ease, color .25s ease;
}
.soma-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.soma-rotulo {
  font-family: var(--fonte-titulo); font-weight: 600;
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.soma-valor { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; }
.soma-trilho {
  height: 6px; margin-top: 10px;
  border-radius: 999px; overflow: hidden;
  background: rgba(14, 20, 17, .1);
}
.soma-cheio {
  height: 100%; width: 100%;
  border-radius: 999px;
  background: var(--gradient-lime);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), background-color .25s ease;
}
.soma-falta { margin-top: 8px; font-size: .75rem; color: var(--muted-foreground); }

/* Fechou 100%: a caixa inteira confirma, nao so o numero. */
.soma.completa { background: var(--lime-soft); color: var(--lime-foreground); }
.soma.completa .soma-rotulo, .soma.completa .soma-falta { color: var(--lime-foreground); opacity: .75; }

/* Passou de 100%: vermelho so aqui, porque ai e erro mesmo. Enquanto falta, e
   progresso, e progresso incompleto nao merece cara de erro. */
.soma.errada { background: rgba(196, 43, 39, .1); color: var(--destructive); }
.soma.errada .soma-cheio { background: var(--destructive); }
.soma.errada .soma-rotulo, .soma.errada .soma-falta { color: var(--destructive); opacity: .8; }

.termo-caixa {
  height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 22px 20px; margin: 22px 0 16px;
  background: var(--card); border: 2px solid var(--border); border-radius: var(--r-lg);
  font-size: .875rem; line-height: 1.7;
}
.termo-caixa h2 { font-size: .9375rem; margin: 22px 0 8px; }
.termo-caixa h2:first-child { margin-top: 0; }
.termo-caixa p { margin: 0 0 10px; }
.termo-caixa .destaque { background: var(--lime-soft); padding: 13px 15px; border-radius: var(--r-sm); font-weight: 500; }
.termo-caixa table { width: 100%; border-collapse: collapse; font-size: .75rem; margin: 12px 0; }
.termo-caixa th, .termo-caixa td { border: 1px solid var(--border); padding: 8px; text-align: left; vertical-align: top; }
.termo-caixa th { background: var(--muted); font-family: var(--fonte-titulo); }

.resumo { background: var(--card); border: 2px solid var(--border); border-radius: var(--r-lg); padding: 20px 18px; margin: 22px 0; }
.resumo-linha { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: .9375rem; }
.resumo-linha:last-child { border-bottom: 0; }
.resumo-linha .rotulo { color: var(--muted-foreground); }
.resumo-linha .valor { font-family: var(--fonte-titulo); font-weight: 600; text-align: right; }

/* ---------- etapa do plano: escolha confirmada, nao formulario ---------- */

.plano-cartao {
  background: var(--card);
  border: 2px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden;
  /* Coluna pra o botao, que agora mora DENTRO do cartao, encostar no rodape
     mesmo quando um cartao tem mais linha de cobertura que o vizinho. */
  display: flex;
  flex-direction: column;
}
.plano-cartao-coberturas { flex: 1; }
/* Rotulo, nome e preco centralizados (pedido do Glauber, 03/09). O grafismo
   continua sangrando pelo canto: e ele que da assimetria ao cabecalho. */
.plano-cartao-topo {
  padding: 20px 20px 18px;
  background: var(--lime-soft); color: var(--lime-foreground);
  text-align: center;
}
.plano-cartao-acao { padding: 4px 20px 20px; }
.plano-cartao-acao .botao { width: 100%; }
/* Sem opacidade. O rotulo ja e discreto pelo tamanho e pelo espacamento; a
   opacidade em cima disso derrubava o contraste pra 3,41:1 assim que o
   grafismo verde passava por tras (sobre o lima suave sozinho dava 5,17:1 e
   ninguem tinha percebido). Em mata cheia sao 6,13:1 sobre o verde e
   12,73:1 sobre o lima suave: passa nos dois. */
.plano-cartao-rotulo {
  font-family: var(--fonte-titulo); font-weight: 600;
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
}
.plano-cartao-nome {
  margin-top: 6px;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.375rem;
  letter-spacing: var(--honra-tracking); line-height: 1.1;
}
.plano-cartao-valor {
  margin-top: 8px;
  /* 900, duzentos a mais que os outros titulos: o preco e a informacao que a
     pessoa procura primeiro no cartao. A Urbanist e variavel e vai ate 900. */
  font-family: var(--fonte-titulo); font-weight: 900; font-size: 2.375rem;
  letter-spacing: -.03em; line-height: 1;
  /* Digito de largura fixa: sem isso o 1 e mais estreito que o 4 e o preco
     inteiro se reacomoda a cada troca de ciclo. */
  font-variant-numeric: tabular-nums;
}
.plano-cartao-valor > span,
.plano-cartao-valor .sufixo { font-size: .875rem; font-weight: 400; margin-left: 4px; }
/* Dentro dos rolos o tamanho e do pai, senao cada caractere do preco encolheria
   junto com o sufixo por causa do seletor acima. */
.plano-cartao-valor .preco-texto,
.plano-cartao-valor .preco-texto span { font-size: inherit; font-weight: inherit; margin-left: 0; }
.plano-cartao-valor .sufixo span { font-size: inherit; font-weight: inherit; margin-left: 0; }
/* So a home tem ciclo anual, e ai o cabecalho precisa dizer quanto da por mes.
   O elemento fica no DOM tambem no mensal, vazio: se ele aparecesse e sumisse a
   cada troca, o cartao inteiro pulava de altura junto. */
.plano-cartao-nota { margin-top: 6px; font-size: .75rem; line-height: 1.35; opacity: .8; min-height: 1.35em; }

/* ---------- odometro do preco ----------
   Cada caractere e um rolo de duas alturas: o que estava em cima, o que entra
   embaixo. O `.rodou` desliza a fita pra segunda altura, e o atraso de cada
   rolo vem do JS, crescendo da esquerda pra direita. `1em` fixo nos dois lados
   e overflow escondido: e isso que impede o segundo caractere de aparecer antes
   da hora. */
.plano-cartao-valor .rolo {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: top;
  transition: width 420ms cubic-bezier(.2, .7, .2, 1);
}
/* A casa que so existe num dos ciclos fecha no outro. Sem isso o mensal ficava
   com um vao do tamanho de um digito entre o cifrao e o numero, guardando lugar
   pra centena do anual. */
.plano-cartao-valor .rolo--so-anual { width: 0; }
.plano-cartao-valor.no-anual .rolo--so-anual { width: 1ch; }
.plano-cartao-valor.no-anual .rolo--so-mensal { width: 0; }
.plano-cartao-valor .rolo-fita {
  display: flex;
  flex-direction: column;
  transition: transform 420ms cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}
/* Palavra inteira numa janela so: as duas empilhadas alinhadas a esquerda, e a
   janela com a largura da maior. */
.plano-cartao-valor .rolo-bloco .rolo-fita > span { white-space: nowrap; text-align: left; }
.plano-cartao-valor .rolo-fita > span {
  display: block;
  height: 1em;
  line-height: 1;
  white-space: pre;
}
.plano-cartao-valor .rolo-fita.rodou { transform: translateY(-1em); }
/* Os rolos so existem na home, que e a unica pagina com seletor de ciclo, e la
   ficam no DOM o tempo todo. As paginas estaticas seguem com o preco em texto
   simples, que e o que o Google le. */

/* A nota do preco continua em cross-fade simples: ela e uma frase, e uma frase
   inteira rolando caractere a caractere vira ruido, nao leitura. */
.plano-cartao-nota,
[data-preco] .preco,
[data-preco] .preco-nota {
  transition: opacity .16s ease, transform .16s ease;
}
.trocando-preco,
.trocando-preco .preco,
.trocando-preco .preco-nota {
  opacity: 0;
  transform: translateY(-7px);
}

@media (prefers-reduced-motion: reduce) {
  .plano-cartao-nota,
  [data-preco] .preco,
  [data-preco] .preco-nota { transition: none; }
  .plano-cartao-valor .rolo-fita,
  .plano-cartao-valor .rolo { transition: none; }
}
.plano-cartao-coberturas { padding: 4px 20px 8px; }

/* Texto de apoio antes da lista: o resumo do plano, quem esta coberto e o
   titulo da lista. Os tres existiam no cartao antigo da home e o Glauber pediu
   de volta em 03/09: sem eles a lista comeca seca, e "quem esta coberto" e a
   primeira pergunta de quem compara plano de seguro. */
/* Uma linha so, por decisao do Glauber em 03/09: o resumo e apoio, nao
   argumento, e em duas linhas ele empurrava o resto do cartao pra baixo em
   alturas diferentes. Os textos foram encurtados pra caber; o nowrap so entra
   a partir de 900px, onde a largura do cartao e previsivel. No celular, se
   algum dia o texto crescer, ele quebra em vez de sumir cortado. */
.plano-cartao-resumo {
  padding-top: 14px;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted-foreground);
  text-align: left;
}
@media (min-width: 900px) {
  .plano-cartao-resumo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.plano-cartao-quem {
  display: grid;
  gap: 2px;
  margin-top: 14px;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
  text-align: left;
}
.plano-cartao-quem span {
  font-family: var(--fonte-titulo);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.plano-cartao-quem b {
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: var(--honra-tracking);
  line-height: 1.25;
}
.plano-cartao-titulo-lista {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: var(--fonte-titulo);
  font-size: .875rem;
  font-weight: 700;
  text-align: left;
}

/* ---------- lista de beneficios do cartao ----------
   Trocou a linha rotulo/valor pela lista com icone em 03/09, a pedido do
   Glauber. Check verde no que entra, x cinza no que nao entra: o que nao esta
   incluso continua na lista, porque some-lo e o jeito mais rapido de a pessoa
   descobrir a exclusao depois de assinar. */
.plano-cartao-itens {
  list-style: none;
  margin: 0;
  padding: 12px 0 6px;
  display: grid;
  gap: 17px;
}
.plano-cartao-itens li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .875rem;
  line-height: 1.5;
  text-align: left;
}
.marca-item { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.marca-item circle { fill: var(--lime-grad-b); }
.marca-item path { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plano-cartao-itens .nao { color: var(--muted-foreground); }
.plano-cartao-itens .nao .marca-item circle { fill: rgba(14, 20, 17, .12); }
.plano-cartao-itens .nao .marca-item path { stroke: var(--muted-foreground); }
.plano-cartao-itens .nao b { font-weight: 600; }
.plano-cartao-coberturas .resumo-linha { padding: 13px 0; font-size: .875rem; }
.plano-cartao-coberturas .resumo-linha:last-child { border-bottom: 0; }

/* -------------------------------------------------------------------------
   PODIO DE PLANOS

   Os tres planos com `.plano-cartao` do /cadastro, sem alterar o componente.
   O mais barato fica no meio e um degrau acima: e o de entrada, o que a pagina
   esta recomendando. Em telas estreitas o podio vira coluna e o destaque sobe
   pra primeira posicao, porque degrau nao existe em pilha vertical.
   ------------------------------------------------------------------------- */
.podio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; margin-top: 8px; }
.podio > * { min-width: 0; }
.podio-degrau { transform: translateY(-28px); }
.podio-degrau .plano-cartao { border-color: var(--honra-lima); box-shadow: var(--honra-sombra-alta); }
.podio-selo {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--honra-lima); color: var(--honra-mata);
  font-family: var(--honra-display); font-weight: 700;
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
}
.podio .acoes-par { justify-content: center; }
.podio .acoes-par .botao { width: 100%; }
/* O botao ficava aqui embaixo, solto sob o cartao. Entrou pra dentro em 03/09:
   fora dele, quem lia rapido nao sabia qual botao pertencia a qual plano. */

/* Linha de exclusao: mesma grade das outras, so mais apagada. Nao vira icone
   nem tarja vermelha, que num cartao de seguro le como recusa de cobertura. */
.plano-cartao-coberturas .resumo-linha--nao .valor { color: var(--muted-foreground); font-weight: 500; }

/* A carencia vale igual pros tres planos (clausula 3.3 do Termo), entao ela fica
   FORA dos cartoes, uma vez so, embaixo do podio. Decisao do Glauber em 03/09:
   repetida dentro de cada cartao era uma linha gasta tres vezes com a mesma
   informacao. A excecao de morte acidental esta no texto por exigencia do Termo. */
.podio-carencia {
  margin: 18px auto 0;
  max-width: 60ch;
  padding: 14px 20px;
  border-radius: var(--honra-r-m);
  background: var(--honra-lima-suave);
  color: var(--honra-mata);
  font-size: .875rem;
  line-height: 1.55;
  text-align: center;
}
@media (max-width: 899px) {
  .podio { grid-template-columns: 1fr; gap: 16px; }
  .podio-degrau { transform: none; order: -1; }
}

/* ---------- podio da home: os tres do mesmo tamanho ----------
   Pedido do Glauber em 03/09. O cartao do meio continua elevado e em lima, que
   e o destaque, mas para de crescer a tipografia: com o seletor mensal/anual
   logo acima, tres escalas de preco na mesma tela liam como tres produtos
   diferentes, nao como o mesmo produto em tres tamanhos.

   O stretch iguala a altura: sem ele cada cartao termina onde o texto dele
   acabou, e "Quem cobre" quebra em duas linhas no Select e no Ampla e em uma
   so no Essencial. */
.podio-igual { align-items: stretch; }
.podio-igual > * { display: flex; flex-direction: column; }
.podio-igual .plano-cartao { flex: 1; }
.podio-igual .podio-degrau .plano-cartao-topo { padding: 20px 20px 18px; }
.podio-igual .podio-degrau .plano-cartao-nome { font-size: 1.375rem; }
.podio-igual .podio-degrau .plano-cartao-valor { font-size: 2.375rem; margin-top: 12px; }
.podio-igual .podio-degrau .plano-cartao-coberturas .resumo-linha { padding: 13px 0; }

/* Sem degrau na home, e de proposito. Os cartoes de la entram com o reveal, e o
   `[data-reveal].revelado { transform: none }` do reveal anula qualquer
   transform do cartao depois da animacao: o degrau ficaria elevado no primeiro
   frame e cairia sozinho. Declarado aqui pra o comportamento ser escolha e nao
   acidente de cascata. O Select continua destacado pela cor e pela borda lima. */
.podio-igual .podio-degrau { transform: none; }



/* -------------------------------------------------------------------------
   UM PAR DE COR POR PLANO

   Os tres pares de contraste cheio que o brand book autoriza, um em cada
   cartao, com a ancora do grafismo tambem diferente pra o padrao nao se
   repetir. O texto segue a regra fixa: sobre lima e sobre verde e sempre
   MATA; sobre mata e branco.
   ------------------------------------------------------------------------- */
/* Lima cheio empastava com a borda e o grafismo, os dois tambem lima.
   lima-suave e o tom que o `.plano-cartao-topo` ja usa por padrao no
   /cadastro (--lime-soft): mais claro, mais distinto dos vizinhos. */
.podio-plano--lima  .plano-cartao-topo { background: var(--honra-lima-suave); color: var(--honra-mata); }
.podio-plano--lima  .grafismo-h { color: var(--honra-lima); }
.podio-plano--verde .plano-cartao-topo { background: var(--honra-verde); color: var(--honra-mata); }
.podio-plano--mata  .plano-cartao-topo { background: var(--honra-mata);  color: var(--honra-fundo); }
.podio-plano--mata .plano-cartao-rotulo { color: var(--honra-lima); }

/* O cartao do meio e 20% mais alto: o topo respira mais e o preco cresce. */
.podio-degrau .plano-cartao-topo { padding: 34px 22px 32px; }
.podio-degrau .plano-cartao-nome { font-size: 1.625rem; }
.podio-degrau .plano-cartao-valor { font-size: 2.875rem; margin-top: 12px; }
.podio-degrau .plano-cartao-coberturas .resumo-linha { padding: 17px 0; }

.grafismo-h--lima { color: var(--honra-lima); }

.grafismo-h--lima-clara { color: var(--honra-lima-clara); }

.grafismo-h--tinta { color: var(--honra-tinta); }

.podio--unico { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
.podio--unico .podio-degrau { transform: none; }


/* ---------- Checkout: Seleção de Planos ---------- */
.checkout-planos-selecao {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 20px;
}
.checkout-plano-card-opcao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
}
.checkout-plano-card-opcao:hover {
  border-color: var(--honra-lima);
  background: var(--lime-soft);
}
.checkout-plano-card-opcao:active {
  transform: scale(0.985);
}
.checkout-plano-card-info strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--foreground);
}
.checkout-plano-card-info p {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin-top: 4px;
}
.checkout-plano-card-preco {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--foreground);
  text-align: right;
  flex-shrink: 0;
}
.checkout-plano-card-preco span {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted-foreground);
  margin-left: 2px;
}

/* O seletor existe, mas nao compete com o plano escolhido: vira um controle discreto
   embaixo, e nao o elemento principal da tela. */
.campo-trocar label { font-size: .75rem; color: var(--muted-foreground); font-weight: 600; }
.campo-trocar select { min-height: 48px; font-size: .875rem; }

/* Espera do cartao de plano. A etapa 1 depende da API de produtos, e uma caixa vazia
   por meio segundo parece tela quebrada. Barras cinzas dizem "esta vindo". */
.plano-espera {
  border: 2px solid var(--border); border-radius: var(--r-lg);
  padding: 22px 20px; background: var(--card);
  display: grid; gap: 12px;
}
.plano-espera-barra {
  height: 14px; border-radius: 999px;
  background: linear-gradient(90deg, var(--muted) 0%, var(--border) 50%, var(--muted) 100%);
  background-size: 200% 100%;
  animation: plano-espera-brilho 1.4s ease-in-out infinite;
}
.plano-espera-barra:nth-child(1) { width: 45%; }
.plano-espera-barra:nth-child(2) { width: 70%; height: 26px; }
.plano-espera-barra:nth-child(3) { width: 100%; }
@keyframes plano-espera-brilho {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .plano-espera-barra { animation: none; }
}

/* Selo da transicao de conclusao. Antes era o mesmo indicador giratorio usado em
   carregamento, o que fazia a conclusao parecer espera. */
.transicao-selo {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin: 0 auto;
  border-radius: 999px;
  background: var(--gradient-lime); color: var(--lime-foreground);
  font-size: 1.5rem; font-weight: 700;
  animation: selo-entra .4s cubic-bezier(.2, .8, .3, 1.2);
}
@keyframes selo-entra {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .transicao-selo { animation: none; }
}

/* ---------- leitura do Termo ---------- */

.termo-bloco { margin: 22px 0 16px; }
.termo-bloco .termo-caixa { margin: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.termo-leitura {
  padding: 12px 18px 14px;
  background: var(--card);
  border: 2px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.termo-trilho { height: 4px; border-radius: 999px; background: rgba(14, 20, 17, .1); overflow: hidden; }
.termo-cheio {
  height: 100%; width: 100%;
  border-radius: 999px; background: var(--gradient-lime);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .12s linear;
}
.termo-status { margin-top: 9px; font-size: .75rem; color: var(--muted-foreground); }

/* Chegou ao fim: o bloco confirma junto, pra leitura terminada nao passar batida. */
.termo-leitura.lido { background: var(--lime-soft); border-color: var(--lime); }
.termo-leitura.lido .termo-status { color: var(--lime-foreground); font-weight: 600; }
.termo-leitura.lido .termo-trilho { background: rgba(18, 48, 28, .12); }

/* ---------- resumo em blocos ---------- */

.resumo-bloco {
  padding: 16px 18px; margin-bottom: 12px;
  background: var(--card);
  border: 2px solid var(--border); border-radius: var(--r-md);
}
.resumo-bloco:last-child { margin-bottom: 0; }
.resumo-bloco-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.resumo-bloco-titulo {
  font-family: var(--fonte-titulo); font-weight: 600;
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.resumo-editar {
  flex: none; background: none; border: 0; padding: 2px 0;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: .8125rem;
  color: var(--deep); cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease;
}
.resumo-editar:hover { border-bottom-color: var(--deep); }
.resumo-editar:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; border-radius: 4px; }
.resumo-bloco .resumo-linha { padding: 9px 0; font-size: .875rem; }
.resumo-bloco .resumo-linha:last-child { border-bottom: 0; padding-bottom: 2px; }

.navegacao { display: flex; gap: 10px; margin-top: 26px; }
.navegacao .botao { flex: 1; }

/* ---------- obrigado ---------- */

/* Antes .obrigado era coluna unica de 640px, centralizada, sozinha no meio
   de telas largas: em desktop sobrava tela vazia dos dois lados e o momento
   de maior confianca da jornada (pagamento acabou de ser confirmado) parecia
   um alerta de sistema. A partir de 760px a pagina vira duas colunas: recibo
   e proximos passos na principal, a historia da marca e o suporte na lateral.
   Em celular as duas colunas empilham na mesma ordem. */
.obrigado { padding-top: 88px; padding-bottom: 60px; }

.obrigado-topo { padding: 20px var(--passo) 36px; text-align: center; }
.obrigado-topo .container { max-width: 640px; }
.obrigado-topo h1 { margin-top: 18px; }
.obrigado-topo .sub { margin-top: 16px; font-size: 1.0625rem; color: var(--muted-foreground); }

.obrigado-corpo { max-width: 980px; }
.obrigado-grade { display: flex; flex-direction: column; gap: 20px; }
.obrigado-principal, .obrigado-lateral { display: flex; flex-direction: column; gap: 20px; }
.obrigado-lateral .historia { margin-top: 0; }
@media (min-width: 760px) {
  .obrigado-grade { flex-direction: row; align-items: flex-start; gap: 28px; }
  .obrigado-principal { flex: 1.2; min-width: 0; }
  .obrigado-lateral { flex: 1; min-width: 0; }
}

.obrigado-final { margin-top: 32px; max-width: 420px; margin-inline: auto; }

/* ---------- proximos passos: numero em pilula, mesmo padrao do .selo-ok ---------- */
.passos-lista { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 16px; }
.passos-lista li { display: flex; gap: 14px; align-items: flex-start; }
.passos-numero {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 999px; background: var(--gradient-lime); color: var(--lime-foreground);
  font-family: var(--fonte-titulo); font-size: .8125rem; font-weight: 700;
}
.passos-lista strong { display: block; font-family: var(--fonte-titulo); font-size: .9375rem; }
.passos-lista p { margin-top: 3px; font-size: .875rem; color: var(--muted-foreground); line-height: 1.55; }

.suporte p { margin-top: 8px; font-size: .9375rem; color: var(--muted-foreground); }
.suporte .botao { margin-top: 14px; }
.obrigado h1 { margin-top: 18px; }
.obrigado .sub { margin-top: 16px; font-size: 1.0625rem; color: var(--muted-foreground); }

.selo-ok {
  display: inline-grid; place-items: center;
  width: 64px; height: 64px; border-radius: 999px;
  background: var(--gradient-lime); color: var(--lime-foreground);
  font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 700;
}

.recibo { margin-top: 26px; }
.recibo-rotulo { font-family: var(--fonte-titulo); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--deep-foreground); opacity: .75; }
.recibo-codigo { font-family: var(--fonte-titulo); font-size: clamp(1.6rem, 7vw, 2.2rem); font-weight: 700; margin-top: 8px; letter-spacing: -.01em; }
.recibo-grade { margin-top: 18px; border-top: 1px solid rgba(251, 251, 247, .2); }
.recibo-grade .resumo-linha { border-bottom-color: rgba(251, 251, 247, .16); }
.recibo-grade .resumo-linha .rotulo { color: rgba(251, 251, 247, .7); }
.recibo-grade .resumo-linha .valor { color: var(--deep-foreground); }

.historia { margin-top: 32px; }
.historia h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
.historia .olho + h2 { margin-top: 14px; }
.historia p { margin-top: 14px; font-size: 1rem; line-height: 1.75; }
/* A assinatura que fecha a historia passou a ser a logo de verdade, nao o nome
   escrito na fonte do corpo. Em fundo claro, a versao mata. */
.historia .assinatura { margin-top: 26px; }
.historia .assinatura .marca-logo { height: 22px; }
.historia.centrado .assinatura .marca-logo { margin-inline: auto; }

.secao { padding: 64px 0; }
.secao-suave { background: var(--secondary); }
.secao-profunda {
  background: var(--honra-mata, #12301C);
  color: var(--deep-foreground, #FFFFFF);
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}
.secao-profunda h2, .secao-profunda h3 { color: #FFFFFF; }

.secao-topo { margin-bottom: 26px; }
.secao-topo h2 { margin-top: 14px; }
.secao-topo p { margin-top: 14px; text-wrap: pretty; font-size: 1rem; color: var(--muted-foreground); max-width: 48ch; }

.motivos-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}
.motivos-coluna-esquerda {
  display: flex;
  flex-direction: column;
}
.motivos-topo h2 {
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  line-height: 1.2;
  margin-top: 8px;
}
.motivos-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.motivos-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .02);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.motivos-item:hover {
  transform: translateX(4px);
  border-color: var(--honra-verde, #43C150);
  box-shadow: var(--sombra-baixa);
}
.motivos-item-check {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--honra-mata, #12301C);
  color: var(--honra-lima, #9CE933);
  display: grid;
  place-items: center;
  flex: none;
}
.motivos-item-conteudo strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.35;
}
.motivos-item-conteudo p {
  font-size: .8125rem;
  color: var(--muted-foreground);
  margin-top: 2px;
  line-height: 1.45;
}
.motivos-acao {
  margin-top: 28px;
}

/* Lado Direito: Mosaico 2x2 */
.motivos-mosaico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px;
}
.motivos-card-visual {
  position: relative;
  background: var(--honra-mata, #12301C);
  border-radius: var(--r-xl);
  padding: 24px 20px;
  color: #FFFFFF;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: var(--sombra-media);
}
.motivos-card-glow {
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(156, 233, 51, .35) 0%, rgba(18, 48, 28, 0) 70%);
  pointer-events: none;
}
.motivos-card-visual--2 .motivos-card-glow {
  background: radial-gradient(circle, rgba(67, 193, 80, .4) 0%, rgba(18, 48, 28, 0) 70%);
  right: -30px;
  left: auto;
}
.motivos-card-visual--3 .motivos-card-glow {
  background: radial-gradient(circle, rgba(209, 255, 61, .3) 0%, rgba(18, 48, 28, 0) 70%);
}
.motivos-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--fonte-titulo);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--honra-lima, #9CE933);
  position: relative;
  z-index: 1;
}
.motivos-frase {
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
  position: relative;
  z-index: 1;
}
.motivos-card-destaque {
  background: var(--card);
  border: 2px dashed var(--honra-verde, #43C150);
  border-radius: var(--r-xl);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.motivos-card-destaque h3 {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--foreground);
}
.motivos-destaque-sub {
  margin-top: 10px;
  font-size: .875rem;
  font-weight: 700;
  color: var(--honra-ok, #1F8F45);
}

/* ---------- banner de diferenciais (layout inspirado em Loovi) ---------- */

.banner-diferenciais {
  margin-top: 48px;
  background: var(--honra-mata, #12301C);
  border-radius: var(--r-xl);
  padding: 48px;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sombra-alta);
}
.banner-diferenciais-conteudo {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.banner-tag {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--honra-lima, #9CE933);
  margin-bottom: 12px;
}
.banner-diferenciais-lado-texto h2 {
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  line-height: 1.2;
  color: #FFFFFF;
}
.banner-subtexto {
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  max-width: 48ch;
}
.botao-lima {
  background: var(--honra-lima, #9CE933) !important;
  color: var(--honra-mata, #12301C) !important;
  font-weight: 800 !important;
  margin-top: 24px !important;
  box-shadow: 0 4px 18px rgba(156, 233, 51, .35) !important;
}
.botao-lima:hover {
  transform: translateY(-2px);
  background: var(--honra-lima-clara, #D1FF3D) !important;
}

/* Cards Flutuantes Brancos */
.banner-diferenciais-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.diferencial-stat-card {
  background: #FFFFFF;
  color: var(--honra-tinta, #0E1411);
  border-radius: var(--r-xl);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  transition: transform .2s ease;
}
.diferencial-stat-card:hover {
  transform: translateY(-4px);
}
.diferencial-stat-icone {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.diferencial-stat-icone--coracao {
  background: rgba(67, 193, 80, .15);
  color: var(--honra-ok, #1F8F45);
}
.diferencial-stat-icone--solidez {
  background: rgba(156, 233, 51, .25);
  color: var(--honra-mata, #12301C);
}
.diferencial-stat-numero {
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--honra-tinta, #0E1411);
}
.diferencial-stat-legenda {
  margin-top: 8px;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

/* Barra inferior de linha de marca e tags */
.banner-diferenciais-barra-marca {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 1;
}
.banner-linha-marca {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
}
.banner-ponto-marca {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 800;
  color: var(--honra-lima, #9CE933);
  letter-spacing: .05em;
}
.banner-trilho {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(156, 233, 51, .4), rgba(67, 193, 80, .2));
}
.banner-tags-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.banner-pill {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--fonte-titulo);
  font-size: .8125rem;
  font-weight: 700;
  color: #FFFFFF;
}
.banner-pill-destaque {
  margin-left: auto;
  font-size: .875rem;
  font-weight: 700;
  color: var(--honra-lima, #9CE933);
}

@media (max-width: 980px) {
  .banner-diferenciais { padding: 32px 20px; }
  .banner-diferenciais-conteudo { grid-template-columns: 1fr; gap: 32px; }
  .banner-diferenciais-cards { grid-template-columns: 1fr; }
  .banner-pill-destaque { margin-left: 0; }
}

/* ---------- documentos ---------- */

.documento { padding: 108px var(--passo) 60px; max-width: 780px; margin: 0 auto; }
.documento .termo-caixa { height: auto; overflow: visible; font-size: .9375rem; padding: 28px 22px; }

/* ---------- telas maiores ---------- */

@media (min-width: 760px) {
  :root { --passo: 32px; --modal-passo: 36px; }

  .modal-janela {
    top: 50%; bottom: auto; left: 50%; right: auto;
    transform: translate(-50%, -50%);
    width: min(660px, 90vw);
    max-height: 86vh;
    animation: apareceModal .24s cubic-bezier(.2, .7, .3, 1);
  }

  body { font-size: 17px; }

  .selo-topo { font-size: .6875rem; }

  .hero-central { max-width: 860px; }
  .hero h1 { font-size: clamp(2.6rem, 4vw, 3.6rem); }
  .hero .sub { font-size: 1.1875rem; }
  .hero-acoes { flex-direction: row; justify-content: center; gap: 12px; max-width: none; }
  .hero-acoes .botao { flex: none; padding: 0 32px; font-size: 1rem; }

  .secao { padding: 80px 0; }
  .secao-topo { margin-bottom: 36px; }

  /* stretch, nao start: os tres cards tem que fechar na mesma altura. */
  .planos { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .plano-resumo { min-height: 3.4em; }

  .duvida { padding: 32px; }
  .duvida-grade { grid-template-columns: 1fr 1fr; gap: 32px; }
  .contraste { grid-template-columns: .82fr 1.18fr; gap: 24px; align-items: stretch; }

  /* Introducao de secao centralizada no desktop: eyebrow, titulo e paragrafo
     no meio da coluna, largura maxima pra nao esticar em linha unica. Os
     grids de conteudo abaixo (cartoes, tabela) continuam com o proprio
     alinhamento interno. */
  .secao-topo { text-align: center; }
  .secao-topo p { margin-inline: auto; }

  /* "Por que criamos": mesma logica, a historia e o bloco da missao ficam
     centralizados no meio da secao. Os cartoes dos pilares continuam com o
     texto interno a esquerda (paragrafo de varias linhas le melhor assim),
     so o bloco inteiro fica no centro. */
  .historia { margin-inline: auto; text-align: center; }
  .historia .assinatura .marca-logo { margin-inline: auto; }
  .historia p { margin-inline: auto; }
  .sobre-missao { margin-inline: auto; }
  .sobre-missao > .citacao { text-align: center; margin-inline: auto; max-width: 46ch; }
  .sobre-missao > .botao { display: flex; width: fit-content; margin-inline: auto; }

  .contraste-lado { padding: 40px 36px; }
  .blocos-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .pilares { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .depoimento-corpo { grid-template-columns: 220px 1fr; align-items: start; }
  .depoimento-quem { flex-direction: column; align-items: flex-start; text-align: left; }

  /* Do tablet pra cima a tabela cabe inteira; abaixo disso vale a ficha por plano. */
  .tabela-planos { display: block; }
  .comparador-mobile { display: none; }
  .tabela-planos th, .tabela-planos td { padding: 18px 16px; }
  .tabela-planos .col-nome { font-size: 1.05rem; }

  .profundo { padding: 56px 48px; }
  .fecho-grade { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }

  .campos-duplo { grid-template-columns: 1fr 1fr; }
  .form-corpo { padding-top: 40px; }
  .rodape { padding-bottom: 48px; }
  .rodape-grade { grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; }
  .obrigado, .documento { padding-top: 120px; }
}

@keyframes apareceModal {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  *, .trilho::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- stripe Card Element (mantido: plataforma tokeniza com Card Element) ---------- */

.stripe-element {
  width: 100%;
  min-height: 56px;
  padding: 16px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.stripe-element.StripeElement--focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(156, 233, 51, .35);
}
.stripe-element.StripeElement--invalid,
.stripe-element.stripe-element--invalido {
  border-color: var(--destructive);
}
.campo-erro {
  margin: 6px 0 0;
  color: var(--destructive);
  font-size: .75rem;
  font-weight: 500;
}

/* ---------- data de nascimento dd/mm/aaaa + calendario nativo ---------- */

.campo-data { position: relative; overflow: hidden; }
.campo-data input[type="text"] { padding-right: 48px; }
.campo-data-abrir {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 48px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.campo-data-abrir:hover { color: var(--foreground); }
/* Mais especifico que `.campo input` (width:100% / min-height:56px): sem isso o
   date absoluto herda 100% e senta a direita do campo, dobrando a largura da etapa 2
   e gerando deslize lateral. */
.campo .campo-data-nativo {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ---------- botao que pulsa ----------
   Modificador de botao, nao componente novo: a mesma cor do botao, respirando,
   pra o olho voltar pra ele depois de ler o cartao. Para no hover, no foco e
   pra quem pediu menos movimento no sistema. Nasceu na /presente. */
.botao-pulsa { animation: botao-pulsa 2.6s ease-in-out infinite; }
.botao-pulsa:hover, .botao-pulsa:focus-visible { animation: none; }
@keyframes botao-pulsa {
  0%   { box-shadow: 0 0 0 0 rgba(156, 233, 51, .55); }
  65%  { box-shadow: 0 0 0 14px rgba(156, 233, 51, 0); }
  100% { box-shadow: 0 0 0 0 rgba(156, 233, 51, 0); }
}
@media (prefers-reduced-motion: reduce) { .botao-pulsa { animation: none; } }

/* ---------- convite pra familia (obrigado) ---------- */

.modal-familia { max-width: 520px; margin-inline: auto; }
.modal-familia .modal-conteudo { padding: 0 var(--modal-passo) calc(24px + env(safe-area-inset-bottom)); }
.modal-familia h2 { margin: 8px 0 0; font-size: clamp(24px, 4.4vw, 31px); line-height: 1.15; }
.modal-familia > .modal-conteudo > p { margin-top: 12px; }
.familia-lista { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.familia-lista li { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; line-height: 1.5; }
.familia-acoes { margin-top: 22px; display: grid; gap: 10px; }
.familia-depois {
  margin-top: 2px;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--muted-foreground);
  font-family: inherit;
  font-size: .875rem;
  cursor: pointer;
}
.familia-depois:hover { color: var(--foreground); }