/* =========================================================================
   PAGINA DE TESTE — hero em mosaico animado (_teste-home-agressiva.html)

   Camada fina em cima de honra-tokens.css + honra.css. Nao redefine token,
   nao repinta componente do site: so existe o hero novo, a lista de gasto
   mensal e dois ajustes de fecho.

   O movimento e UM momento so: as tres fotos entram por revelacao de
   clip-path, o selo `h` assenta por cima e as linhas do titulo sobem
   saindo de desfoque. Depois disso a cena fica viva num deslocamento
   lento, quase imperceptivel, e nada mais se mexe.
   ========================================================================= */

/* ---------- mosaico ---------- */

.hero-mosaico { position: relative; isolation: isolate; overflow: hidden; }

.mosaico {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* O veu: sem ele o texto branco cai pra 2:1 em cima da foto clara.
   Radial mais forte no centro (onde mora o titulo) e degrade no rodape
   pra emendar com a secao de planos. */
.mosaico::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(64% 54% at 50% 52%, rgba(11,31,18,.93) 0%, rgba(11,31,18,.86) 55%, rgba(11,31,18,.42) 88%, rgba(11,31,18,.12) 100%),
    linear-gradient(180deg, rgba(11,31,18,.78) 0%, rgba(11,31,18,.14) 26%, rgba(11,31,18,.2) 62%, var(--honra-mata-fundo) 99%);
}

.mosaico-peca {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: var(--honra-r-g);
  /* estado final; a animacao parte de um clip fechado */
  clip-path: inset(0 0 0 0 round var(--honra-r-g));
  will-change: clip-path, transform;
}
.mosaico-peca img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* a foto e cenario, nao assunto: dessatura um passo e ganha o vies verde
     da marca, senao o mosaico briga com o lima do botao */
  filter: saturate(.94) contrast(1.06) brightness(1.04);
}

/* Desktop: colagem assimetrica. A peca grande entra pela direita, as duas
   menores ancoram o canto esquerdo e o rodape. Nenhuma cruza o miolo onde
   o titulo respira. */
.mosaico-peca--a { top: -6%;  right: -4%;  width: 42vw;  height: 78%; }
.mosaico-peca--b { top: 8%;   left: -8%;   width: 30vw;  height: 46%; }
.mosaico-peca--c { bottom: -10%; left: 14%; width: 26vw; height: 40%; }

.mosaico-peca--a img { object-position: 42% 30%; }
.mosaico-peca--b img { object-position: 50% 38%; }
.mosaico-peca--c img { object-position: 50% 44%; }

/* O selo `h`: o unico elemento de marca que se move, e ele assenta por
   ultimo, como carimbo. Fica sobre o encontro das pecas. */
.mosaico-selo {
  position: absolute;
  top: 12%;
  right: 30vw;
  width: clamp(72px, 7vw, 116px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 26%;
  background: var(--honra-lima-clara);
  color: var(--honra-mata);
  box-shadow: 0 10px 22px rgba(11,31,18,.34), 0 34px 70px rgba(11,31,18,.42);
}
.mosaico-selo svg { width: 58%; height: 58%; fill: currentColor; }

/* ---------- coluna de texto ---------- */

.hero-central--mosaico {
  position: relative;
  z-index: 1;
  max-width: 880px;
}

.hero-selo-apolice {
  display: block;
  width: fit-content;
  margin: 0 auto 20px;
  padding: 7px 16px;
  border-radius: var(--honra-r-pilula);
  background: rgba(251,251,247,.09);
  border: 1px solid rgba(251,251,247,.2);
  color: rgba(251,251,247,.86);
  font-size: .8125rem;
  letter-spacing: .01em;
}

.hero-titulo {
  margin: 0;
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.18;
  font-size: clamp(2.125rem, 4.9vw, 3.75rem);
  text-wrap: balance;
}
/* Quem anima este titulo e o split.js do site, palavra por palavra agrupada
   por linha visual. Nao duplicar aqui: duas animacoes na mesma caixa brigam. */
.hero-acusa {
  margin: 0 auto 14px;
  max-width: 34ch;
  font-family: var(--honra-display);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  font-size: clamp(1.0625rem, 2vw, 1.375rem);
  color: rgba(251,251,247,.78);
}
.hero-acusa b { font-weight: 700; color: var(--honra-lima-clara); }
.acusa-gira {
  display: inline-block;
  vertical-align: bottom;
  text-align: left;
  overflow: hidden;
}
.acusa-item {
  display: inline-block;
  opacity: 0;
  transform: translateY(.35em);
  transition: opacity 360ms cubic-bezier(.16,1,.3,1), transform 360ms cubic-bezier(.16,1,.3,1);
}
.acusa-item.ativo { opacity: 1; transform: none; }
.hero-titulo b { font-weight: 700; color: var(--honra-lima-clara); }

.hero-central--mosaico .sub strong { font-weight: 600; color: #FFFFFF; }

.hero-central--mosaico .sub {
  margin-top: 22px;
  max-width: 54ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(251,251,247,.8);
}

/* ---------- os tres selos ---------- */

.hero-selos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 26px auto 0;
  padding: 0;
}
.hero-selos li {
  flex: 1 1 172px;
  max-width: 220px;
  padding: 14px 16px;
  border-radius: var(--honra-r-m);
  background: rgba(251,251,247,.07);
  border: 1px solid rgba(251,251,247,.16);
  text-align: center;
}
.hero-selos strong {
  display: block;
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 1.125rem;
  color: var(--honra-lima-clara);
}
.hero-selos span {
  display: block;
  margin-top: 3px;
  font-size: .8125rem;
  color: rgba(251,251,247,.7);
}

.hero-central--mosaico .hero-acoes { margin-top: 26px; max-width: 420px; }

/* Dois botoes lado a lado nao cabem em 375px sem cortar palavra. */
@media (max-width: 900px) {
  .hero-central--mosaico .hero-acoes { max-width: 340px; }
  .hero-central--mosaico .hero-acoes .botao { width: 100%; }
}

.hero-desarme {
  margin: 16px auto 0;
  font-size: .875rem;
  color: rgba(251,251,247,.72);
}
.hero-regulamento {
  margin: 10px auto 0;
  max-width: 62ch;
  font-size: .75rem;
  line-height: 1.55;
  color: rgba(251,251,247,.5);
}

/* ---------- o momento ----------
   Saida exponencial, uma vez, escalonada. O default e o estado FINAL:
   sem JS, sem fonte, sem animacao, a pagina ja le certa. */

@media (prefers-reduced-motion: no-preference) {
  .mosaico-peca {
    animation: peca-revela 1100ms cubic-bezier(.16, 1, .3, 1) both;
  }
  .mosaico-peca--a { animation-delay: 60ms; }
  .mosaico-peca--b { animation-delay: 200ms; }
  .mosaico-peca--c { animation-delay: 320ms; }

  .mosaico-selo {
    animation: selo-assenta 760ms cubic-bezier(.16, 1, .3, 1) 560ms both;
  }

  /* depois da entrada, a cena respira: 22s, alguns pixels, sem loop visivel */
  .mosaico-peca--a { animation: peca-revela 1100ms cubic-bezier(.16,1,.3,1) 60ms both, deriva-a 22s ease-in-out 1600ms infinite alternate; }
  .mosaico-peca--b { animation: peca-revela 1100ms cubic-bezier(.16,1,.3,1) 200ms both, deriva-b 26s ease-in-out 1600ms infinite alternate; }
  .mosaico-peca--c { animation: peca-revela 1100ms cubic-bezier(.16,1,.3,1) 320ms both, deriva-c 30s ease-in-out 1600ms infinite alternate; }
}

@keyframes peca-revela {
  from { clip-path: inset(0 0 100% 0 round var(--honra-r-g)); transform: translateY(18px) scale(1.06); }
  to   { clip-path: inset(0 0 0 0 round var(--honra-r-g)); transform: none; }
}
@keyframes selo-assenta {
  from { opacity: 0; transform: scale(.7) rotate(-9deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes deriva-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(-10px, 14px, 0); } }
@keyframes deriva-b { from { transform: translate3d(0,0,0); } to { transform: translate3d(12px, -10px, 0); } }
@keyframes deriva-c { from { transform: translate3d(0,0,0); } to { transform: translate3d(-8px, -12px, 0); } }

/* ---------- onde seu dinheiro vai ----------
   Era uma lista de linhas finas sobre fundo claro, com o valor pequeno a
   direita: informacao correta, apresentacao de extrato bancario. Virou um
   cartao mata, com os valores em corpo de display, e a linha do Clube em
   lima. O contraste e o argumento: tres gastos apagados e um aceso. */

.gasto {
  max-width: 660px;
  margin: 0 auto clamp(36px, 6vw, 56px);
  padding: clamp(22px, 4vw, 34px);
  border-radius: var(--honra-r-g);
  background: var(--honra-mata-fundo);
  box-shadow: var(--honra-sombra-alta);
}
.gasto-lista { list-style: none; margin: 0; padding: 0; }
.gasto-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 4px;
  border-bottom: 1px solid rgba(251,251,247,.12);
  color: rgba(251,251,247,.62);
}
.gasto-lista li span { flex: 1; font-size: .9375rem; line-height: 1.35; }
.gasto-lista li b {
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.03em;
  font-size: 1.375rem;
  color: rgba(251,251,247,.5);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gasto-item--nosso {
  margin-top: 10px;
  padding: 20px 20px !important;
  border-bottom: 0 !important;
  border-radius: var(--honra-r-m);
  background: var(--honra-lima);
  color: var(--honra-mata) !important;
}
.gasto-item--nosso span { font-weight: 600; }
.gasto-item--nosso b { font-size: 2rem; color: var(--honra-mata) !important; }
.gasto-nota {
  margin: 20px auto 0;
  max-width: 52ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: rgba(251,251,247,.72);
}

.secao-topo--meio { margin-top: clamp(40px, 7vw, 68px); }

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

.fecho-desarme {
  margin-top: 14px;
  font-size: .8125rem;
  color: rgba(251,251,247,.66);
}

/* ---------- telas menores ----------
   No mobile a colagem vira fundo inteiro: uma foto so, cobrindo, com o veu
   mais pesado. Tres retangulos de 30vw num celular viram confete. */

@media (max-width: 900px) {
  .mosaico-peca--a { top: 0; right: 0; width: 100%; height: 62%; border-radius: 0; clip-path: none; }
  .mosaico-peca--b,
  .mosaico-peca--c { display: none; }
  .mosaico-selo { top: auto; bottom: 30%; right: 6vw; }
  .mosaico::after {
    background:
      radial-gradient(120% 56% at 50% 26%, rgba(11,31,18,.34) 0%, rgba(11,31,18,.72) 62%, var(--honra-mata-fundo) 100%),
      linear-gradient(180deg, rgba(11,31,18,.62) 0%, rgba(11,31,18,.3) 22%, rgba(11,31,18,.9) 58%, var(--honra-mata-fundo) 74%);
  }
  @media (prefers-reduced-motion: no-preference) {
    .mosaico-peca--a { animation: peca-revela-cheia 1100ms cubic-bezier(.16,1,.3,1) 60ms both; }
  }
  @keyframes peca-revela-cheia {
    from { clip-path: inset(0 0 100% 0); transform: scale(1.08); }
    to   { clip-path: inset(0 0 0 0); transform: none; }
  }
  .hero-titulo { font-size: clamp(1.875rem, 7.6vw, 2.5rem); line-height: 1.18; }
  /* A frase de acusacao cai em cima dos rostos: no mobile ela ganha um veu
     proprio em vez de escurecer a foto inteira. */
  .hero-acusa {
    font-size: 1rem;
    display: block;
    width: fit-content;
    margin-inline: auto;
    padding: 8px 14px;
    border-radius: var(--honra-r-p);
    background: rgba(11,31,18,.5);
    backdrop-filter: blur(3px);
    color: rgba(251,251,247,.86);
  }
  .mosaico-selo { top: 13%; bottom: auto; right: 6vw; width: 62px; }
  /* Os tres selos ficam lado a lado tambem no celular: em coluna eles viravam
     uma lista de tres linhas e o preco perdia o contraste de cartao. */
  .hero-selos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 22px;
  }
  .hero-selos li {
    flex: none;
    max-width: none;
    padding: 11px 7px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
  }
  .hero-selos strong { font-size: .875rem; letter-spacing: -.025em; line-height: 1.15; }
  .hero-selos span { margin-top: 0; font-size: .6875rem; line-height: 1.25; }

  /* A pilula da seguradora sai do celular: a prova de apolice ja volta na
     secao "Por que confiar", e aqui ela so empurrava o titulo pra baixo. */
  .hero-selo-apolice { display: none; }

  /* Um botao so. Comparar planos continua no menu e na propria secao. */
  .hero-central--mosaico .hero-acoes #cta-honra-hero-comparar { display: none; }
}

/* =========================================================================
   Mobile: titulo e subtitulo centralizados em toda a pagina (pedido do
   Glauber em 21/09/2026). So cabecalho de secao e texto de apoio: lista,
   tabela, cartao de plano e texto legal continuam alinhados a esquerda,
   porque centralizar bloco longo destroi a leitura.
   ========================================================================= */
@media (max-width: 900px) {
  .secao-topo,
  .secao-topo h2,
  .secao-topo h3,
  .secao-topo p,
  .fecho-grade > div:first-child,
  .fecho-grade h2,
  .fecho-grade .citacao,
  .gasto-nota { text-align: center; }

  .secao-topo p,
  .gasto-nota { margin-inline: auto; }

  /* A cauda que gira nao pode ter largura travada no celular: a frase
     quebra em duas linhas e o bloco centraliza junto com o resto. */
  .acusa-gira { min-width: 0 !important; text-align: center; }
  .hero-acusa { max-width: 28ch; }
}

/* =========================================================================
   O brilho que atravessa TODOS os botoes

   Uma faixa clara em diagonal cruza o botao a cada 3,4s e some. Nao e um
   gradiente pintado por cima: e uma camada atras do texto, entao o contraste
   da palavra nao cai em nenhum quadro. O ciclo tem pausa longa de proposito,
   senao vira pisca-pisca de outdoor.

   Vale em todo `.botao` da pagina, inclusive o do topo. O que NAO vale pra
   todos e a respiracao (a escala): ela fica so nos botoes de conversao, mais
   abaixo. Pagina inteira pulsando nao chama atencao, cansa, e a pessoa para
   de distinguir qual botao importa.
   ========================================================================= */

.botao {
  position: relative;
  overflow: hidden;
  font-weight: 700;
  letter-spacing: -.01em;
}
.botao > * { position: relative; z-index: 1; }

.botao::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -40%;
  width: 34%;
  z-index: 0;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.28) 42%,
    rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.28) 58%,
    rgba(255,255,255,0) 100%);
}

/* No botao vazado o fundo e claro: faixa branca sobre branco nao aparece,
   entao ali o brilho e da cor da marca. */
.botao-vazado::after,
.topo-portal::after {
  background: linear-gradient(90deg,
    rgba(18,48,28,0) 0%,
    rgba(18,48,28,.1) 42%,
    rgba(18,48,28,.2) 50%,
    rgba(18,48,28,.1) 58%,
    rgba(18,48,28,0) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .botao::after { animation: brilho-passa 3400ms cubic-bezier(.4, 0, .2, 1) 900ms infinite; }
  /* fora de fase: dois botoes na mesma tela brilhando juntos parecem um
     banner piscando, separados parecem dois objetos vivos */
  .hero-acoes .botao-vazado::after { animation-delay: 2100ms; }
  .bento-acao .botao::after { animation-delay: 1500ms; }
  #cta-honra-ctafinal-cadastro::after { animation-delay: 2600ms; }
  .botao:hover::after,
  .botao:focus-visible::after { animation-play-state: paused; }
}

@keyframes brilho-passa {
  0%   { left: -40%; }
  /* a travessia leva ~26% do ciclo; o resto do tempo o botao fica em paz */
  26%  { left: 106%; }
  100% { left: 106%; }
}

/* =========================================================================
   Ancoragem de preco e PS
   ========================================================================= */

.ancora {
  max-width: 620px;
  margin: clamp(32px, 6vw, 52px) auto 0;
  padding: clamp(22px, 4vw, 30px);
  border-radius: var(--honra-r-g);
  background: var(--honra-superficie);
  border: 1px solid var(--honra-fiapo);
  box-shadow: var(--honra-sombra);
}
.ancora-titulo {
  margin: 0 0 4px;
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.025em;
  font-size: 1.25rem;
  color: var(--honra-tinta);
}
.ancora-lista { list-style: none; margin: 14px 0 0; padding: 0; }
.ancora-lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--honra-fiapo);
  color: var(--honra-musgo);
}
.ancora-lista li span { flex: 1; }
.ancora-lista li b {
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--honra-musgo);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ancora-conferir { color: var(--honra-atencao) !important; font-size: .8125rem; }
.ancora-item--nosso {
  margin-top: 8px;
  padding: 17px 16px !important;
  border-bottom: 0 !important;
  border-radius: var(--honra-r-m);
  background: var(--honra-lima-suave);
  color: var(--honra-mata) !important;
  font-weight: 500;
}
.ancora-item--nosso b { font-size: 1.375rem; color: var(--honra-mata) !important; }
.ancora-fonte {
  margin-top: 14px;
  font-size: .75rem;
  line-height: 1.55;
  color: var(--honra-musgo);
}
.ancora-fonte strong { color: var(--honra-atencao); }

/* O PS fecha a pagina depois do botao: e a ultima coisa lida e por isso
   nao entra dentro da grade do fecho, fica embaixo dela. */
.ps {
  margin: clamp(26px, 5vw, 38px) auto 0;
  max-width: 52ch;
  padding-top: clamp(22px, 4vw, 30px);
  border-top: 1px solid rgba(251,251,247,.16);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(251,251,247,.78);
}
.ps b { color: var(--honra-lima-clara); font-weight: 700; }

@media (max-width: 900px) {
  .ancora-titulo { text-align: center; }
  .ancora-fonte,
  .ps { text-align: center; }
}

/* =========================================================================
   Prova social: tres depoimentos de associado

   Os cartoes estao vazios de proposito. A variante --vazio e um andaime de
   revisao e SAI antes de publicar, junto com o aviso: o que fica e a moldura.
   ========================================================================= */

.depo-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: clamp(26px, 5vw, 40px);
}
.depo {
  margin: 0;
  padding: clamp(20px, 3vw, 26px);
  border-radius: var(--honra-r-g);
  background: var(--honra-superficie);
  border: 1px solid var(--honra-fiapo);
  box-shadow: var(--honra-sombra);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.depo blockquote {
  margin: 0;
  flex: 1;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--honra-tinta);
}
.depo blockquote small {
  display: block;
  margin-top: 10px;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--honra-musgo);
}
.depo figcaption { display: flex; align-items: center; gap: 12px; }
.depo-nome {
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--honra-tinta);
}
.depo-dado { font-size: .8125rem; color: var(--honra-musgo); }



/* =========================================================================
   A respiracao dos botoes de conversao

   Escala minima (1 -> 1.028) num ciclo longo, com o halo lima acompanhando.
   Tres cuidados que separam "chama atencao" de "propaganda de outlet":

     1. So os tres botoes que levam pro cadastro respiram. Os secundarios
        (comparar, portal, WhatsApp) ficam so com o brilho.
     2. O pico e curto e o vale e longo: o botao passa a maior parte do ciclo
        parado, entao o movimento le como lembrete, nao como pisca-pisca.
     3. Para no hover, no foco e no toque. Alvo que se mexe enquanto a pessoa
        mira e alvo que erra o toque, e no celular o dedo cobre o botao.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  #cta-honra-hero-planos,
  #cta-honra-emvida-planos,
  #cta-honra-ctafinal-cadastro {
    animation: botao-respira 2600ms cubic-bezier(.4, 0, .2, 1) 1200ms infinite;
    transform-origin: center;
  }
  /* cada um no seu tempo, pelo mesmo motivo do brilho */
  #cta-honra-emvida-planos { animation-delay: 2000ms; }
  #cta-honra-ctafinal-cadastro { animation-delay: 2800ms; }

  #cta-honra-hero-planos:hover, #cta-honra-hero-planos:focus-visible, #cta-honra-hero-planos:active,
  #cta-honra-emvida-planos:hover, #cta-honra-emvida-planos:focus-visible, #cta-honra-emvida-planos:active,
  #cta-honra-ctafinal-cadastro:hover, #cta-honra-ctafinal-cadastro:focus-visible, #cta-honra-ctafinal-cadastro:active {
    animation-play-state: paused;
  }
}

@keyframes botao-respira {
  0%   { transform: scale(1);     box-shadow: 0 0 0 0 rgba(156, 233, 51, .34); }
  16%  { transform: scale(1.028); box-shadow: 0 0 0 9px rgba(156, 233, 51, .16); }
  34%  { transform: scale(1);     box-shadow: 0 0 0 16px rgba(156, 233, 51, 0); }
  /* o resto do ciclo e silencio */
  100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(156, 233, 51, 0); }
}

/* =========================================================================
   "Um seguro de vida que voce usa em vida" — o bento dos beneficios

   A secao anterior era tres cartoes iguais de titulo e paragrafo, que e
   exatamente o desenho que o olho pula. Aqui os quatro blocos tem tamanhos,
   fundos e pesos diferentes, e a hierarquia conta a historia sozinha:

     1. o premio em dinheiro, grande, escuro e com numero gigante
     2. o desconto, em lima, porque e o beneficio de uso frequente
     3. a Indicacao de Honra, o menor, porque ainda esta nascendo
     4. a protecao, larga e com foto, fechando a secao

   Fundo da secao e claro. Os cartoes e que sao escuros: dark sobre dark,
   colado no hero, faria as duas secoes virarem uma mancha so.
   ========================================================================= */

/* O grifo lima sob "em vida". Sem pseudo-elemento de proposito: um ::after
   com z-index negativo some atras do fundo da secao. Gradiente no proprio
   texto resolve e acompanha a quebra de linha. */
.grifo {
  padding: 0 .08em;
  color: var(--honra-tinta);
  background-image: linear-gradient(to top, var(--honra-lima) 0 .34em, transparent .34em);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.bento {
  display: grid;
  gap: 14px;
  margin-top: clamp(30px, 5vw, 48px);
  grid-template-columns: repeat(6, 1fr);
}

.bento-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 250px;
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: var(--honra-r-g);
  isolation: isolate;
}
.bento-corpo { position: relative; z-index: 2; }

.bento-foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1) contrast(1.06) brightness(1.06);
}
/* Veu por cima da foto: o texto e sempre branco, entao o piso de contraste
   precisa estar no cartao, nao na sorte do recorte da imagem. */
/* O veu so pesa onde o texto encosta. O terco de cima fica limpo pra foto
   aparecer, e o degrade cobre do meio pra baixo. */
.bento-card--protecao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(11,31,18,0)   0%,
    rgba(11,31,18,.06) 26%,
    rgba(11,31,18,.55) 48%,
    rgba(11,31,18,.88) 68%,
    rgba(11,31,18,.96) 100%);
}

.bento-olho {
  margin: 0 0 6px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.bento-card h3 {
  margin: 0 0 10px;
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.12;
  font-size: clamp(1.25rem, 2.1vw, 1.625rem);
}
.bento-texto { margin: 0; font-size: .9375rem; line-height: 1.55; }
.bento-nota { margin: 12px 0 0; font-size: .6875rem; line-height: 1.45; }

/* O grafismo `h` sangrando no canto do cartao do premio: a foto saiu dali
   porque o numero e o assunto, e imagem verde ao lado do cartao lima deixava
   a fileira inteira na mesma cor. */
.bento-grafismo {
  position: absolute;
  right: -14%;
  bottom: -26%;
  width: 62%;
  z-index: 0;
  color: rgba(156, 233, 51, .1);
  pointer-events: none;
}
.bento-grafismo svg { width: 100%; height: auto; fill: currentColor; }

/* 1. o premio -------------------------------------------------------- */
.bento-card--premio {
  grid-column: span 3;
  min-height: 340px;
  background: var(--honra-mata-fundo);
  color: #FFFFFF;
}
.bento-card--premio .bento-olho { color: var(--honra-lima-clara); }
.bento-numero {
  margin: 0 0 10px;
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .9;
  font-size: clamp(3.25rem, 7vw, 5rem);
  color: var(--honra-lima-clara);
}
.bento-card--premio .bento-texto { color: rgba(251,251,247,.84); }
.bento-card--premio .bento-nota { color: rgba(251,251,247,.52); }

/* 2. o desconto, em lima --------------------------------------------- */
.bento-card--desconto {
  grid-column: span 3;
  min-height: 340px;
  background: var(--honra-lima);
  color: var(--honra-mata);
}
.bento-card--desconto .bento-olho { color: rgba(18,48,28,.62); }
/* O texto deste cartao e curto, entao o topo ficava vazio. O grafismo ocupa
   a metade de cima em mata translucido, que e o par correto sobre o lima. */
.bento-card--desconto .bento-grafismo {
  right: -10%;
  top: -18%;
  bottom: auto;
  width: 58%;
  color: rgba(18, 48, 28, .14);
}
.bento-card--desconto .bento-texto { color: rgba(18,48,28,.82); }

/* 3. a Indicacao de Honra -------------------------------------------- */
.bento-card--indica {
  grid-column: span 2;
  background: var(--honra-superficie);
  border: 1px solid var(--honra-fiapo);
  color: var(--honra-tinta);
  box-shadow: var(--honra-sombra);
}
.bento-card--indica .bento-olho { color: var(--honra-ok); }
/* O cartao branco cresce junto com o da protecao, que e o mais alto da
   fileira. Sem o grafismo, sobrava um vazio branco grande no topo dele. */
.bento-card--indica .bento-grafismo {
  right: auto;
  left: -18%;
  top: -14%;
  bottom: auto;
  width: 72%;
  color: rgba(156, 233, 51, .22);
}
.bento-card--indica .bento-texto { color: var(--honra-musgo); }

/* 4. a protecao ------------------------------------------------------ */
.bento-card--protecao {
  grid-column: span 4;
  min-height: 470px;
  color: #FFFFFF;
  background: var(--honra-mata-fundo);
  text-align: center;
}
/* O arquivo pai-filho.webp ja vem com o grafismo `h` queimado na metade
   esquerda. Puxar o enquadramento pra direita tira o grafismo de cima dos
   rostos e cumpre a regra do brandbook de foto sem grafismo por cima. */
.bento-card--protecao .bento-foto { object-position: 72% 32%; }
.bento-card--protecao .bento-olho { color: rgba(251,251,247,.6); }
.bento-card--protecao .bento-texto { color: rgba(251,251,247,.84); }

/* O CTA mora dentro do cartao da protecao: e o ultimo bloco do bento, entao
   a pessoa termina de ler a secao ja com o botao na mao. */
/* O botao e a linha de preco ficam centrados em qualquer largura, mesmo
   quando o resto do cartao esta alinhado a esquerda. Botao encostado na
   margem esquerda le como rodape, nao como chamada. */
.bento-acao {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.bento-acao .botao { min-width: 260px; }
.bento-acao p {
  margin: 10px 0 0;
  font-size: .8125rem;
  text-align: center;
  color: rgba(251,251,247,.78);
}

/* ---------- telas menores ---------- */

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bento-card { min-height: 210px; text-align: left; }
  .bento-card--premio { grid-column: span 2; min-height: 280px; }
  /* o cartao da protecao fica centralizado tambem no celular: e o unico do
     bento que tem botao, e botao solto na esquerda parece rodape */
  .bento-card--protecao { grid-column: span 2; min-height: 440px; text-align: center; }
  .bento-card--protecao .bento-foto { object-position: 76% 28%; }
  /* no celular o cartao acompanha o texto: sem altura minima nao sobra vazio */
  .bento-card--desconto { grid-column: span 2; min-height: 0; }
  .bento-card--indica { grid-column: span 2; min-height: 180px; }
  .bento-numero { font-size: 3.75rem; }
  .secao-topo h2 .grifo { white-space: nowrap; }
}

/* =========================================================================
   "Quem esta por tras" — a voz do corretor

   Era um bloco de texto a esquerda com um cartao de autor pendurado embaixo.
   Virou uma coluna unica centrada: selo, aspa, frase grande, duas linhas de
   contexto e a assinatura. A aspa e o unico elemento decorativo, e ela vem
   em lima, grande e sangrando por tras do texto, pra secao ter um ponto de
   entrada sem precisar de foto (nao existe foto do Randel no vault).
   ========================================================================= */

/* ---------- o carrossel ----------
   Quem rola e o trilho, com scroll-snap: no celular o dedo funciona sozinho
   e as setas so empurram o mesmo scroll. Sem biblioteca. */

.vozes { position: relative; }

.vozes-trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.vozes-trilho::-webkit-scrollbar { display: none; }
.vozes-trilho:focus-visible { outline: 2px solid var(--honra-lima); outline-offset: 6px; border-radius: var(--honra-r-m); }

.voz {
  position: relative;
  flex: 0 0 100%;
  max-width: 760px;
  margin: 0 auto;
  padding-inline: 4px;
  scroll-snap-align: center;
  text-align: center;
}

.vozes-controle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: clamp(24px, 4vw, 34px);
}
.vozes-seta {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(251,251,247,.22);
  background: rgba(251,251,247,.06);
  color: #FFFFFF;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.vozes-seta:hover { background: rgba(251,251,247,.14); border-color: rgba(251,251,247,.4); }
.vozes-seta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.vozes-pontos { display: flex; align-items: center; gap: 8px; }
/* O ponto ativo cresce por transform, nao por largura: animar largura obriga
   o navegador a refazer o layout da fileira a cada quadro. */
.vozes-ponto {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(251,251,247,.28);
  cursor: pointer;
  transition: transform 260ms cubic-bezier(.16,1,.3,1), background 260ms ease;
}
.vozes-ponto.ativo { background: var(--honra-lima); transform: scale(1.45); }

.voz-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 12px;
  border-radius: var(--honra-r-pilula);
  background: rgba(251,251,247,.08);
  border: 1px solid rgba(251,251,247,.18);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--honra-lima-clara);
}
.voz-selo-ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--honra-lima);
}

.voz-aspas {
  position: absolute;
  top: clamp(26px, 5vw, 44px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  font-family: var(--honra-display);
  font-weight: 700;
  font-size: clamp(9rem, 20vw, 15rem);
  line-height: .7;
  color: rgba(156, 233, 51, .12);
  pointer-events: none;
  user-select: none;
}

.voz-frase {
  position: relative;
  z-index: 1;
  margin: clamp(26px, 4vw, 38px) 0 0;
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.16;
  font-size: clamp(1.625rem, 4vw, 2.75rem);
  color: #FFFFFF;
  text-wrap: balance;
}

.voz-texto {
  position: relative;
  z-index: 1;
  margin: 20px auto 0;
  max-width: 54ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(251,251,247,.76);
}

.voz-assina {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(30px, 5vw, 42px);
  padding-top: clamp(24px, 4vw, 32px);
  border-top: 1px solid rgba(251,251,247,.16);
  text-align: left;
}

.voz-avatar {
  flex: none;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--honra-lima);
  color: var(--honra-mata);
  font-family: var(--honra-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -.02em;
}

.voz-dados { display: flex; flex-direction: column; gap: 1px; }
.voz-nome {
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 1.125rem;
  color: #FFFFFF;
}
.voz-papel { font-size: .875rem; color: var(--honra-lima-clara); }
.voz-familia { font-size: .8125rem; color: rgba(251,251,247,.55); }

@media (max-width: 560px) {
  /* Em coluna a assinatura fica centrada junto com o resto. */
  .voz-assina { flex-direction: column; gap: 12px; text-align: center; }
  .voz-dados { align-items: center; }
  .voz-frase br { display: none; }
}

/* =========================================================================
   "As regras, sem letra miuda"

   Substitui o legal-card. Era um cartao com tres icones, tres paragrafos e
   um rodape em cinza pequeno: informacao necessaria, apresentada do jeito
   que faz a pessoa pular. Agora os tres numeros que importam aparecem em
   corpo grande, uma frase explica a diferenca entre os planos, e o texto
   contratual inteiro mora dentro de um <details>. Nada foi removido: o que
   era letra miuda virou um clique, o que e decisivo virou numero.
   ========================================================================= */

.regras {
  max-width: 760px;
  margin: clamp(34px, 6vw, 56px) auto 0;
  text-align: center;
}
.regras-titulo {
  margin: 0 0 clamp(20px, 3vw, 28px);
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.03em;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  color: var(--honra-tinta);
}

.regras-grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
/* Cartao escuro com numero em lima, o mesmo par do cartao do premio la em
   cima. Tres caixas brancas numa secao branca era o que deixava esta parte
   apagada. */
.regra {
  padding: clamp(20px, 3vw, 28px) 12px;
  border-radius: var(--honra-r-g);
  background: var(--honra-mata-fundo);
  box-shadow: var(--honra-sombra-alta);
}
.regra-numero {
  display: block;
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  font-size: clamp(1.75rem, 4.6vw, 2.75rem);
  color: var(--honra-lima-clara);
}
.regra-rotulo {
  display: block;
  margin-top: 8px;
  font-size: .8125rem;
  line-height: 1.3;
  color: rgba(251,251,247,.66);
}

.regras-linha {
  margin: clamp(22px, 3vw, 30px) auto 0;
  max-width: 56ch;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--honra-musgo);
}

.regras-detalhe {
  margin-top: 20px;
  text-align: left;
}
.regras-detalhe > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline: auto;
  width: fit-content;
  padding: 10px 18px;
  border-radius: var(--honra-r-pilula);
  background: var(--honra-elevado);
  border: 1px solid var(--honra-fiapo);
  font-size: .875rem;
  font-weight: 600;
  color: var(--honra-mata);
  cursor: pointer;
  list-style: none;
}
.regras-detalhe > summary::-webkit-details-marker { display: none; }
.regras-detalhe > summary::after {
  content: "+";
  font-size: 1.125rem;
  line-height: 1;
}
.regras-detalhe[open] > summary::after { content: "\2212"; }
.regras-detalhe > summary:hover { background: var(--honra-lima-suave); }

.regras-detalhe-corpo {
  margin: 16px auto 0;
  max-width: 68ch;
  padding: 18px 20px;
  border-radius: var(--honra-r-m);
  background: var(--honra-elevado);
}
.regras-detalhe-corpo p {
  margin: 0 0 10px;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--honra-musgo);
}
.regras-detalhe-corpo p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .regras-grade { grid-template-columns: 1fr; gap: 8px; }
  .regra {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
    text-align: left;
  }
  .regra-rotulo { margin-top: 0; text-align: right; }
}

/* ---------- os tres depoimentos de associado ----------
   Cinco estrelas no topo, citacao, e a assinatura em duas linhas. A bolinha
   com a inicial saiu: com tres cartoes lado a lado ela virava tres circulos
   verdes disputando atencao com o lima dos botoes.
   ========================================================================= */

.depo-estrelas { display: inline-flex; gap: 3px; }
.depo-estrelas svg {
  width: 17px;
  height: 17px;
  fill: var(--honra-lima);
}

.depo figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--honra-fiapo);
}

.depo-acao { margin-top: clamp(26px, 4vw, 38px); text-align: center; }

@media (max-width: 900px) {
  .depo { text-align: center; align-items: center; }
  .depo figcaption { align-items: center; width: 100%; }
}

/* ---------- rodape ----------
   Menos portas de saida: sobraram dois links de navegacao e dois documentos.
   O resto do texto legal, que nao e obrigatorio ficar visivel, mora num
   details. O paragrafo com a frase exigida pela SUSEP continua aberto.
   ========================================================================= */

.rodape-mais { margin-top: 10px; }
.rodape-mais > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-size: .75rem;
  color: rgba(251, 251, 247, .62);
  cursor: pointer;
  list-style: none;
}
.rodape-mais > summary::-webkit-details-marker { display: none; }
.rodape-mais > summary::after { content: "+"; font-size: .9375rem; line-height: 1; }
.rodape-mais[open] > summary::after { content: "\2212"; }
.rodape-mais > summary:hover { color: var(--honra-lima-clara); }
.rodape-mais p { margin-top: 6px; }

/* =========================================================================
   "Sem risco": tres formas de sair

   Componente proprio, com a cor declarada no cartao e nao herdada da secao.
   A versao anterior reusava `.blocos-3` dentro de uma secao escura e o `h3`
   herdava branco em cima de cartao claro: titulo invisivel.

   O primeiro cartao e lima porque a garantia de 7 dias e a promessa mais
   forte da pagina; os outros dois sao superficie escura elevada.
   ========================================================================= */

.risco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: clamp(28px, 5vw, 44px);
}

.risco-card {
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--honra-r-g);
  background: rgba(251, 251, 247, .06);
  border: 1px solid rgba(251, 251, 247, .14);
  color: #FFFFFF;
}
.risco-card h3 {
  margin: 0 0 10px;
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.2;
  font-size: 1.125rem;
  color: #FFFFFF;
}
.risco-card p:last-child {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: rgba(251, 251, 247, .76);
}

.risco-numero {
  margin: 0 0 12px;
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  font-size: clamp(2.25rem, 5vw, 3rem);
  color: var(--honra-lima-clara);
}

.risco-card--destaque {
  background: var(--honra-lima);
  border-color: transparent;
  color: var(--honra-mata);
  box-shadow: var(--honra-sombra-alta);
}
.risco-card--destaque .risco-numero,
.risco-card--destaque h3 { color: var(--honra-mata); }
.risco-card--destaque p:last-child { color: rgba(18, 48, 28, .82); }

@media (max-width: 900px) {
  .risco-card { text-align: center; }
}

/* ---------- ritmo do fecho ----------
   A citacao, o titulo, a linha de apoio e o desarme estavam todos com quase
   a mesma largura de medida, entao o bloco lia como um paragrafo so. */
.fecho .citacao {
  max-width: 30ch;
  margin-inline: auto;
  text-wrap: balance;
}
.fecho-grade h2 { text-wrap: balance; }
.fecho-grade p { text-wrap: pretty; }
.fecho-desarme { max-width: 40ch; margin-inline: auto; }
.ps { max-width: 52ch; }

@media (max-width: 900px) {
  .fecho .citacao,
  .fecho-grade h2,
  .fecho-grade > div > p { text-align: center; }
}

/* =========================================================================
   BLOCOS RESTAURADOS (21/09/2026)

   Uma edicao por script truncou este arquivo e levou junto os estilos dos
   botoes, do duelo carro x familia, da lista de gastos, do bloco de virada,
   do manifesto e do FAQ. Reescritos abaixo, iguais ao que estava valendo.
   ========================================================================= */

/* ---------- botoes: baixos, largos, com a palavra grande ---------- */

.botao {
  min-height: 40px;
  padding: 0 24px;
  font-size: 1.0625rem;
  line-height: 1.1;
  letter-spacing: -.018em;
}
.botao-grande {
  min-height: 44px;
  padding: 0 30px;
  font-size: 1.125rem;
}
.topo .botao { min-height: 36px; padding: 0 18px; font-size: .9375rem; }

@media (max-width: 900px) {
  .botao { min-height: 42px; font-size: 1.0625rem; }
  .botao-grande { min-height: 46px; font-size: 1.125rem; }
}

/* ---------- lista de gastos: X vermelho, risco e check ---------- */

.gasto { --gasto-erro: #FF7A70; }

.gasto-lista li .gasto-icone {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transform: scale(.4);
  opacity: 0;
}
.gasto-icone svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gasto-icone--x { background: rgba(255, 122, 112, .16); color: var(--gasto-erro); }
.gasto-icone--ok { background: var(--honra-mata); color: var(--honra-lima); }

.gasto-lista li b { color: var(--gasto-erro); }

.gasto-valor { position: relative; font-style: normal; }
.gasto-valor::after {
  content: "";
  position: absolute;
  left: -4%;
  top: 52%;
  width: 108%;
  height: 2.5px;
  border-radius: 2px;
  background: var(--gasto-erro);
  transform: scaleX(0);
  transform-origin: left center;
}

.gasto.revelado .gasto-icone { animation: gasto-icone-entra 460ms cubic-bezier(.16, 1, .3, 1) both; }
.gasto.revelado .gasto-valor::after { animation: gasto-risca 420ms cubic-bezier(.65, 0, .35, 1) both; }

.gasto.revelado li:nth-child(1) .gasto-icone { animation-delay: 120ms; }
.gasto.revelado li:nth-child(2) .gasto-icone { animation-delay: 300ms; }
.gasto.revelado li:nth-child(3) .gasto-icone { animation-delay: 480ms; }
.gasto.revelado li:nth-child(4) .gasto-icone { animation-delay: 760ms; }
.gasto.revelado li:nth-child(1) .gasto-valor::after { animation-delay: 220ms; }
.gasto.revelado li:nth-child(2) .gasto-valor::after { animation-delay: 400ms; }
.gasto.revelado li:nth-child(3) .gasto-valor::after { animation-delay: 580ms; }

.gasto.revelado .gasto-icone--ok {
  animation: gasto-check-entra 720ms cubic-bezier(.16, 1, .3, 1) 760ms both;
}

@keyframes gasto-icone-entra { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes gasto-check-entra {
  0%   { opacity: 0; transform: scale(.3) rotate(-14deg); box-shadow: 0 0 0 0 rgba(18,48,28,.5); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 12px rgba(18,48,28,0); }
}
@keyframes gasto-risca { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .gasto .gasto-icone { opacity: 1; transform: none; animation: none; }
  .gasto .gasto-valor::after { transform: scaleX(1); animation: none; }
}

/* ---------- o duelo: o carro contra a familia ---------- */

.duelo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 720px;
  margin: clamp(28px, 5vw, 44px) auto 0;
  border-radius: var(--honra-r-g);
  overflow: hidden;
  box-shadow: var(--honra-sombra-alta);
}
.duelo-coluna {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(20px, 3.4vw, 30px) clamp(14px, 2.6vw, 24px);
  text-align: center;
}
.duelo-coluna--carro { background: var(--honra-superficie); color: var(--honra-tinta); }
.duelo-coluna--familia { background: var(--honra-mata-fundo); color: #FFFFFF; }

.duelo-topo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 22px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.duelo-coluna--carro .duelo-topo { color: var(--honra-musgo); }
.duelo-coluna--familia .duelo-topo { color: var(--honra-lima-clara); }
.duelo-icone { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.duelo-gasto {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  align-content: start;
  text-align: left;
}
.duelo-gasto li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 4px 0;
  font-size: .9375rem;
  color: var(--honra-musgo);
}
.duelo-gasto li b {
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  color: var(--honra-tinta);
  white-space: nowrap;
}

.duelo-falta {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  align-content: start;
  text-align: left;
}
.duelo-falta li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 4px 0 4px 26px;
  font-size: .9375rem;
  line-height: 1.3;
  color: rgba(251,251,247,.86);
}
.duelo-falta li::before,
.duelo-falta li::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 12px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: #FF7A70;
}
.duelo-falta li::before { transform: rotate(45deg); }
.duelo-falta li::after { transform: rotate(-45deg); }

.duelo-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 2px solid var(--honra-mata);
  text-align: left;
}
.duelo-total span { flex: 1; font-size: .8125rem; color: var(--honra-musgo); }
.duelo-total b {
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  font-size: clamp(1.75rem, 5.4vw, 2.5rem);
  color: var(--honra-mata);
  white-space: nowrap;
}
.duelo-total--zero { border-top-color: rgba(251,251,247,.34); }
.duelo-total--zero span { color: rgba(251,251,247,.6); }
.duelo-total--zero b { color: var(--honra-lima-clara); }

@media (max-width: 420px) {
  .duelo-coluna { padding: 18px 12px; }
  .duelo-gasto li,
  .duelo-falta li { font-size: .8125rem; }
  .duelo-falta li { padding-left: 22px; }
}

/* ---------- a virada, em lima ---------- */

.placar-virada {
  max-width: 620px;
  margin: clamp(28px, 5vw, 44px) auto 0;
  padding: clamp(24px, 4vw, 34px);
  border-radius: var(--honra-r-g);
  background: var(--honra-lima-suave);
  text-align: center;
}
.placar-fecho {
  margin: 0;
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.03em;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  line-height: 1.2;
  color: var(--honra-mata);
  text-wrap: balance;
}
.placar-sub {
  margin: 10px auto 0;
  max-width: 34ch;
  font-size: clamp(.9375rem, 1.8vw, 1.0625rem);
  line-height: 1.5;
  color: rgba(18,48,28,.78);
  text-wrap: balance;
}
.placar-sub b { color: var(--honra-mata); font-weight: 700; }

.placar-ganha {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 22px auto;
  padding: 0;
  max-width: 300px;
  text-align: left;
}
.placar-ganha li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding-left: 28px;
  font-size: .9375rem;
  line-height: 1.3;
  color: var(--honra-mata);
}
.placar-ganha li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 11px;
  height: 6px;
  margin-top: -6px;
  border-left: 2.4px solid var(--honra-ok);
  border-bottom: 2.4px solid var(--honra-ok);
  transform: rotate(-45deg);
}
.placar-fonte {
  margin: 18px auto 0;
  max-width: 48ch;
  font-size: .6875rem;
  line-height: 1.5;
  color: rgba(18,48,28,.62);
}

/* ---------- manifesto ---------- */

.manifesto-frase {
  margin: 22px 0 0;
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.028em;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  line-height: 1.3;
  color: var(--honra-mata);
}
#cta-honra-manifesto-planos { margin-top: 22px; }

/* ---------- FAQ ---------- */

.faq-card {
  max-width: 760px;
  padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 40px);
}
.faq-card > .olho { display: block; width: fit-content; margin-inline: auto; }
.faq-card > h2 { text-align: center; margin-bottom: clamp(24px, 4vw, 34px); }
.faq-pergunta { text-align: left; letter-spacing: -.022em; line-height: 1.3; }
.faq-resposta {
  text-align: left;
  max-width: 62ch;
  font-size: .9375rem;
  line-height: 1.62;
  color: var(--honra-musgo);
}

/* O honra.css tem `.hero-acoes .botao { font-size: .875rem }`, que vence a
   minha regra de `.botao` por especificidade. Repete o tamanho novo com a
   mesma forca, senao o botao do hero fica menor que todos os outros. */
.hero-acoes .botao { font-size: 1.0625rem; min-height: 40px; }
.hero-acoes .botao-grande { font-size: 1.125rem; min-height: 44px; }

@media (max-width: 900px) {
  .hero-acoes .botao { font-size: 1.0625rem; min-height: 42px; }
  .hero-acoes .botao-grande { font-size: 1.125rem; min-height: 46px; }
}

/* ---------- plano unico ----------
   Com um cartao so, o podio de tres colunas nao serve: a caixa fica centrada
   e com largura de leitura, e o CTA ocupa a base inteira.
   ========================================================================= */

/* O cartao unico e o fundo escuro da secao dos planos sairam em 21/09/2026,
   quando os tres planos voltaram: o podio vem da API e cada cartao tem cor
   propria. Com isso o bloco de cores que existia aqui (pra corrigir texto
   branco sobre cartao branco) deixou de fazer sentido e foi removido. O
   `.plano-cartao-nota` fica, e e usado se um dia voltar cartao estatico. */
.plano-cartao-garantia {
  margin: 12px 0 0;
  font-size: .75rem;
  line-height: 1.5;
  text-align: center;
  color: var(--honra-musgo);
}

/* ---------- formulario: check do titulo e marca em destaque ---------- */

.form-check {
  display: inline-grid;
  place-items: center;
  width: 1em;
  height: 1em;
  margin-left: .28em;
  vertical-align: -.1em;
  border-radius: 50%;
  background: var(--honra-ok);
}
.form-check svg {
  width: .62em;
  height: .62em;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.etapa .sub b { font-weight: 700; color: var(--honra-ok); }

/* ---------- /presente/: o cartao unico do plano ----------
   A pagina do presente usa o mesmo cartao da bio e das paginas de plano, mas
   sozinho no meio da secao. O selo dos tres meses fica no topo lima, junto do
   preco, porque e ali que a pessoa olha primeiro.
   ========================================================================= */

.plano-unico {
  max-width: 420px;
  margin: clamp(28px, 5vw, 44px) auto 0;
}
.plano-unico .plano-cartao { height: auto; }

.plano-cartao-selo-presente {
  margin: 10px 0 0;
  padding: 7px 14px;
  display: inline-block;
  border-radius: var(--honra-r-pilula);
  background: rgba(18, 48, 28, .12);
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--honra-mata);
}
.plano-cartao-selo-presente b { font-weight: 700; }

/* ---------- /presente/: o mosaico no hero do convite ----------
   A pagina reusa `.hero-mosaico` e `.mosaico` da home. Duas diferencas, e as
   duas vem do fato de o conteudo daqui nao morar em `.hero-central--mosaico`:
   o container precisa subir acima do veu, e o grafismo `h` da secao precisa
   passar por cima da foto, senao ele fica soterrado.
   ========================================================================= */

.hero-presente.hero-mosaico > .container {
  position: relative;
  z-index: 1;
}
.hero-presente.hero-mosaico > .grafismo-h { z-index: 1; }

/* O relogio e a barra do topo ficam acima de tudo. */
.hero-presente.hero-mosaico ~ * { position: relative; }

/* O veu do hero do presente pesa um pouco mais que o da home: aqui o texto e
   mais longo (titulo, subtitulo, frase que gira, aviso do convite) e ocupa
   quase toda a altura, entao nao existe canto limpo pra foto respirar. */
.hero-presente.hero-mosaico .mosaico::after {
  background:
    radial-gradient(58% 50% at 50% 48%, rgba(11,31,18,.9) 0%, rgba(11,31,18,.8) 58%, rgba(11,31,18,.24) 92%, rgba(11,31,18,0) 100%),
    linear-gradient(180deg, rgba(11,31,18,.52) 0%, rgba(11,31,18,.06) 22%, rgba(11,31,18,.16) 62%, var(--honra-mata-fundo) 99%);
}

@media (max-width: 900px) {
  .hero-presente.hero-mosaico .mosaico::after {
    background:
      radial-gradient(120% 52% at 50% 26%, rgba(11,31,18,.26) 0%, rgba(11,31,18,.7) 60%, var(--honra-mata-fundo) 100%),
      linear-gradient(180deg, rgba(11,31,18,.5) 0%, rgba(11,31,18,.18) 20%, rgba(11,31,18,.86) 60%, var(--honra-mata-fundo) 76%);
  }
}

/* O hero do convite e mais curto que o da home (nao tem `min-height: 100svh`),
   entao a foto ficava reduzida a uma faixa. Uma altura minima da espaco pra
   ela existir sem empurrar o cartao do plano fora da segunda tela. */
/* Tela cheia: a primeira visao do convite nao divide espaco com nada. */
.hero-presente.hero-mosaico {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* No celular a foto cobre um pedaco maior: com 62% sobrava uma faixa escura
   grande embaixo do texto, entre o fim da imagem e o fim da secao. */
@media (max-width: 900px) {
  .hero-presente.hero-mosaico .mosaico-peca--a { height: 100%; border-radius: 0; }
}

/* O selo dos 3 meses usa `.plano-cartao-nota` porque e essa a classe que o
   presente.js procura quando o convite vale um numero de meses diferente de
   tres. A linha da garantia virou `.plano-cartao-garantia` pelo mesmo motivo:
   com o nome antigo, o script escrevia "2 meses gratis" em cima dela. */
.plano-cartao-nota.plano-cartao-selo-presente { text-align: left; color: var(--honra-mata); }

/* ---------- /presente/: selos e CTA no hero ----------
   O hero do convite nao tinha botao nenhum: a pessoa dependia da barra do
   cronometro ou do topo pra agir. Os tres selos repetem a oferta em numero,
   e o botao encerra a primeira tela com a acao.
   ========================================================================= */

.presente-selos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: clamp(22px, 4vw, 30px) auto 0;
  padding: 0;
  max-width: 620px;
}
.presente-selos li {
  flex: 1 1 168px;
  max-width: 200px;
  padding: 13px 14px;
  border-radius: var(--honra-r-m);
  background: rgba(251, 251, 247, .08);
  border: 1px solid rgba(251, 251, 247, .18);
  text-align: center;
}
.presente-selos strong {
  display: block;
  font-family: var(--honra-display);
  font-weight: 700;
  letter-spacing: -.03em;
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--honra-lima-clara);
}
.presente-selos span {
  display: block;
  margin-top: 4px;
  font-size: .75rem;
  line-height: 1.3;
  color: rgba(251, 251, 247, .74);
}

.presente-acao { margin-top: clamp(24px, 4vw, 32px); }
.presente-acao .botao { min-width: 260px; }
.presente-desarme {
  margin: 14px auto 0;
  max-width: 44ch;
  font-size: .8125rem;
  color: rgba(251, 251, 247, .7);
}

@media (max-width: 560px) {
  .presente-selos { gap: 7px; }
  .presente-selos li { flex: 1 1 0; min-width: 0; padding: 11px 6px; }
  .presente-selos strong { font-size: 1rem; letter-spacing: -.035em; }
  .presente-selos span { font-size: .6875rem; }
  .presente-acao .botao { width: 100%; min-width: 0; }
}

/* ---------- /presente/: o vao depois da nota do convite ----------
   Duas secoes empilhadas somam 64px de padding de baixo com 64px do de cima,
   e ainda a margem da nota. Entre um texto pequeno e cinza e o selo da secao
   seguinte, isso le como buraco. O padding de baixo desta secao encolhe e a
   nota encosta no cartao.
   ========================================================================= */

#planos .podio-carencia { margin-top: clamp(18px, 3vw, 26px); }
#planos .nota { margin-top: 10px; }
.pagina-presente #planos { padding-bottom: clamp(20px, 3vw, 30px); }
.pagina-presente #em-vida { padding-top: clamp(34px, 5vw, 48px); }