/* =====================================================================
   s360-design.css — sistema de design da LP Aceleracao Saude 360.

   Carregado DEPOIS do lp.min.css (Tailwind pre-compilado e purgado).
   O Tailwind segue servindo de layout (grid, flex, spacing); esta folha
   assume tipografia, cor, profundidade e movimento.

   Por que uma folha propria em vez de recompilar o Tailwind: o build
   purgado nao tem fonte (nao existe tailwind.config.js no repo), entao
   classe nova nao existiria no CSS. Aqui o rollback e remover 1 arquivo.

   Marca: navy #184868 e ambar #f89828, AMOSTRADOS do logo do cliente.
   O que sai e o azul vivo #3b82f6, que brigava com o navy no H1.

   Tipografia: Outfit + Plus Jakarta Sans, as duas que o tema ja trazia.
   Nada de fonte importada de outro projeto.

   Fundo: as dobras seguem uma progressao de temperatura fria derivada
   do navy (hero claro -> #f7fafb -> #eaf1f5 -> navy), nao branco
   chapado. O branco puro fica reservado a cards e painel, que e o que
   cria a separacao entre elemento e superficie.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. FONTES — as que o tema JA TINHA: Outfit + Plus Jakarta Sans.
   Ambas variable e self-hosted, declaradas no lp.min.css; nao ha
   @font-face novo aqui.

   Por que estas e nao outras: as letras do logo do cliente sao
   geometricas e arredondadas (o "a", o "S", o miolo da espiral).
   Outfit e uma geometrica arredondada — mesma familia de forma do
   logotipo. Uma grotesque de contraste alto brigaria com a marca.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   2. TOKENS
   Escada de cinza real no lugar do slate-* generico do Tailwind.
   --------------------------------------------------------------- */
:root {
  /* marca — amostradas do proprio logo do cliente (logo_360.webp):
     navy #184868 e ambar #f89828 sao as duas cores dominantes reais. */
  --s-navy:        #184868;
  --s-navy-deep:   #103048;
  --s-navy-soft:   #2d6fa1;
  --s-amber:       #f89828;
  --s-amber-deep:  #d97b00;   /* laranja como TEXTO precisa escurecer p/ AA */

  /* tinta e texto — contraste medido contra a dobra MAIS ESCURA das
     claras (#e6eef3 em #processo), nao contra o branco. Foi assim que
     o lead reprovou por 4.44:1: passava no branco e caia na dobra
     azulada. Estes valores garantem AA em todas as superficies. */
  --s-ink:         #0e2230;
  --s-text:        #2f434b;
  --s-muted:       #52686f;

  /* SUPERFICIES — ritmo de dobras, nao branco chapado.
     Todas puxam o azul do navy da marca (matiz ~205), variando so
     luminosidade. A diferenca entre degraus e pequena de proposito:
     percebe-se a troca de dobra sem virar "site listrado". */
  --s-paper:       #ffffff;   /* branco puro: so cards e painel        */
  --s-surface-1:   #f7fafb;   /* dobra 2 - frio claro, ja perceptivel  */
  --s-surface-2:   #eaf1f5;   /* dobra 3 - azulado nitido              */
  --s-surface-3:   #e8eef2;   /* faixas de apoio                        */
  --s-mist:        #f4f7f8;
  --s-mist-2:      #eaf0f2;
  --s-line:        #dbe5ea;
  --s-line-soft:   #e7edf1;

  /* tipografia — as duas ja vinham no tema */
  --s-display: 'Outfit', system-ui, sans-serif;
  --s-sans:    'Plus Jakarta Sans', system-ui, sans-serif;

  /* HAIRLINE (P6): a borda e um ANEL de box-shadow, nunca border CSS.
     Border desloca layout no hover/foco; o anel troca so a cor. */
  --s-hair:        #d3e0e7;   /* hairline canonica, versao fria do cliente */
  --s-hair-soft:   #e4edf1;   /* divisoria suave                           */
  --s-ring:        0 0 0 1px var(--s-hair);
  --s-ring-soft:   0 0 0 1px var(--s-hair-soft);
  --s-ring-focus:  0 0 0 1px var(--s-navy), 0 0 0 4px rgba(45,111,161,.28);

  /* ELEVACAO (P7/A3): quase zero. Profundidade vem de TOM, nao de sombra.
     UMA sombra, reservada a overlay real (modal). Conteudo e plano. */
  --s-elev-overlay: 0 5px 15px 0 rgba(0,0,0,.12), 0 15px 35px 0 rgba(14,34,48,.08);

  /* RAIO (P8/A7): DOIS tokens que nao se cruzam. 6 controle, 8 superficie.
     O raio encolhe pra dentro: painel 8 > botao 6 > detalhe 4. */
  --s-r-ctrl:    6px;
  --s-r-surface: 8px;
  --s-r-micro:   4px;

  /* Aliases das sombras antigas -> anel plano.
     Mantidos para nao quebrar as ~20 referencias existentes, mas todos
     agora resolvem em hairline, cumprindo A3 (zero drop-shadow difuso
     em conteudo). A unica sombra real da pagina e --s-elev-overlay. */
  --s-sh-sm: var(--s-ring-soft);
  --s-sh-md: var(--s-ring);
  --s-sh-lg: var(--s-ring);
  --s-sh-xl: var(--s-ring);

  /* motion — curva de assinatura Stripe; nada acima de .3s */
  --s-ease: cubic-bezier(0, 0, 0.4, 1);
  --s-fast: .1s;
  --s-base: .22s;
}

/* ---------------------------------------------------------------
   2b. UTILIDADES DE ESPACAMENTO
   O lp.min.css e um build Tailwind PURGADO e o projeto nao tem
   tailwind.config.js: classe que o markup antigo nao usava simplesmente
   NAO existe no CSS (ex.: gap-7, mb-9, p-7 — 17 das 21 que este redesign
   precisa). Em vez de limitar o layout ao vocabulario do build antigo,
   as que este template usa ficam declaradas aqui.
   --------------------------------------------------------------- */
.gap-5  { gap: 1.25rem }
.gap-7  { gap: 1.75rem }
.gap-9  { gap: 2.25rem }
.gap-10 { gap: 2.5rem }

.mb-2   { margin-bottom: .5rem }
.mb-5   { margin-bottom: 1.25rem }
.mb-7   { margin-bottom: 1.75rem }
.mb-9   { margin-bottom: 2.25rem }
.mb-11  { margin-bottom: 2rem }
.mb-14  { margin-bottom: 2.5rem }
.mt-3   { margin-top: .75rem }
.mt-5   { margin-top: 1.25rem }
.mb-auto{ margin-bottom: auto }

.p-7    { padding: 1.75rem }
.px-5   { padding-left: 1.25rem; padding-right: 1.25rem }
.py-11  { padding-top: 2.75rem; padding-bottom: 2.75rem }
.pt-36  { padding-top: 9rem }
.pb-20  { padding-bottom: 5rem }

/* ESPACAMENTO VERTICAL DAS DOBRAS
   Estava em 128px topo + 128px base = 256px de vao entre secoes, quase
   um terco de tela so de branco. A escala da skill trabalha com gap de
   secao ~44px e miolo de hero 48px; 128 era 3x o vocabulario dela.
   72px (mais 8px do ritmo) da respiro sem soltar as dobras. */
.py-28,
.py-32,
section.py-28,
section.py-32 {
  padding-top: 4.5rem !important;      /* 72px */
  padding-bottom: 4.5rem !important;
}
@media (min-width: 768px) {
  .md\:py-32 { padding-top: 5rem !important; padding-bottom: 5rem !important; }  /* 80px */
}
/* o hero fecha mais rente na base: a dobra seguinte comeca a leitura */
/* O hero e o unico caso onde a coluna de texto acaba antes da foto:
   com items-center sobra um vazio sob o texto que SOMA ao padding.
   Por isso ele fecha mais rente que as demais dobras. */
.s-hero { padding-bottom: 2.5rem !important; }
@media (min-width: 1024px) {
  .s-hero { padding-bottom: 2.5rem !important; padding-top: 8.5rem !important; }
}

.mt-0\.5 { margin-top: .125rem }
.mt-14   { margin-top: 3.5rem }
.top-5   { top: 1.25rem }
.bottom-7{ bottom: 1.75rem }
.left-7  { left: 1.75rem }
.right-7 { right: 1.75rem }

/* gradiente do veu sobre as fotos (o build so tinha o /60 e o /40) */
.from-slate-900\/75 { --tw-gradient-from: rgba(15,23,42,.75) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(15,23,42,0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) }
.via-slate-900\/20  { --tw-gradient-to: rgba(15,23,42,0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgba(15,23,42,.2) var(--tw-gradient-via-position), var(--tw-gradient-to) }

@media (min-width: 640px) {
  .sm\:h-9 { height: 2.25rem }
}
@media (min-width: 768px) {
  .md\:p-10  { padding: 2.5rem }
  .md\:py-32 { padding-top: 8rem; padding-bottom: 8rem }
  .md\:gap-10{ gap: 2.5rem }
  .md\:h-11  { height: 2.75rem }
  .md\:px-7  { padding-left: 1.75rem; padding-right: 1.75rem }
}

/* Modal de sucesso do formulario: as classes animate-in/fade-in/zoom-in
   sao do plugin tailwindcss-animate e NUNCA existiram neste build — o
   modal ja subia sem animacao antes deste redesign. Definidas aqui para
   que a confirmacao de lead apareca com transicao. */
.animate-in {
  animation: s360In .3s var(--s-ease) both;
}
@keyframes s360In {
  from { opacity: 0; transform: scale(.96) }
  to   { opacity: 1; transform: none }
}
@media (prefers-reduced-motion: reduce) {
  .animate-in { animation: none }
}
@media (min-width: 1024px) {
  .lg\:pt-40 { padding-top: 10rem }
  .lg\:pb-28 { padding-bottom: 7rem }
}
@media (min-width: 1280px) {
  .xl\:gap-20 { gap: 5rem }
}

/* ---------------------------------------------------------------
   2c. MEDIDA DE LEITURA (P15 / A15)
   A Stripe capa a copy do hero em ~890px dentro de um card de 1265px
   e deixa o terco direito VAZIO de proposito. O vazio sinaliza
   "isto e um comeco", e e o que impede a pagina de virar um bloco
   uniforme de texto de ponta a ponta.
   Esticar copy ate a borda e o anti-padrao A15.
   --------------------------------------------------------------- */
.s-lead { max-width: 62ch; }
.s-h1   { max-width: 19ch; }
.s-h2   { max-width: 22ch; }

/* O max-width acima limita a largura, mas NAO centraliza: num bloco
   com text-align:center o texto centraliza dentro da caixa e a CAIXA
   fica encostada a esquerda. Era o caso do "Pronto para acelerar?",
   com centro em 384px enquanto o formulario estava em 720px.
   Onde o container centraliza, a caixa do titulo centraliza junto. */
.text-center .s-h1,
.text-center .s-h2,
.text-center .s-lead { margin-left: auto; margin-right: auto; }

/* cabecalho de secao: copy capada, coluna direita deliberadamente vazia */
#regimes  > div > .max-w-3xl,
#processo > div > .max-w-3xl {
  max-width: 620px;
}

/* ---------------------------------------------------------------
   2d. ESCALA TIPOGRAFICA CANONICA
   Antes o mesmo nivel hierarquico tinha 5 tratamentos diferentes
   (H3 de card 18/600, de painel 20/600, de passo 16/600, de FAQ
   16/600, tag de regime 20/700). Sem padrao, a leitura nao se
   organiza e a pagina parece "quase igual" em toda parte.

   Tres niveis de titulo, um corpo, um meta. So isto:

     display  48/700   H1, so no hero              (evento unico)
     titulo   32/700   H2 de secao                 (1 por dobra)
     sub      20/600   titulo de bloco/painel      (poucos)
     item     16/600   titulo de card/passo/FAQ    (repete)
     corpo    14/400   texto corrido               (dominante)
     meta     12/600   eyebrow, label, chip        (apoio)

   Line-height travado por nivel: sem 22/23/24/26 no mesmo 14px.
   --------------------------------------------------------------- */
.s-h1        { line-height: 1.08 !important; font-weight: 700 !important; }
.s-h2        { line-height: 1.15 !important; font-weight: 700 !important; }

/* SUB (20/600): titulo de bloco dentro de secao */
.s-eq-req h3,
.s-quote p,
.s-panel h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

/* ITEM (16/600): titulo de card, passo, FAQ, item de requisito.
   Todos sao o MESMO nivel hierarquico e agora tem o mesmo peso. */
.s-card h3,
.s-passo h3,
.s-faq-item summary,
.s-eq-list strong,
.s-inc-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* nome do regime: nivel ITEM, mas lidera o card pela tinta */
.s-regime-tag {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--s-ink) !important;
}
/* no card ESCURO a tinta se inverte: --s-ink sobre navy dava 1.19:1,
   texto praticamente invisivel. O ambar aqui tem contraste alto. */
.s-regime-dest .s-regime-tag { color: var(--s-amber) !important; }

/* #2 e #3: itens da FAQ e da lista de servicos entram escalonados.
   O [data-reveal] fica no bloco PAI, entao os filhos precisam do
   proprio estado inicial.

   ARMADILHA: a primeira versao usava o shorthand `transition` num
   seletor de especificidade (0,2,2), que vencia o `.s-stagger >
   *:nth-child()` (0,2,0) E resetava o transition-delay pra 0 (o
   shorthand reseta tudo que nao e declarado). Resultado: delay 0s em
   todos e nenhum escalonamento.
   Solucao: o delay vem no MESMO seletor, por nth-child, entao nao ha
   disputa. Longhand em vez de shorthand, pela mesma razao. */
html.js [data-reveal] .s-faq-item,
html.js [data-reveal] .s-inc-item {
  opacity: 0;
  transform: translateY(8px);
  transition-property: opacity, transform;
  transition-duration: .3s;
  transition-timing-function: var(--s-ease);
}
html.js [data-reveal] .s-faq-item:nth-child(1),
html.js [data-reveal] .s-inc-item:nth-child(1) { transition-delay: 0ms }
html.js [data-reveal] .s-faq-item:nth-child(2),
html.js [data-reveal] .s-inc-item:nth-child(2) { transition-delay: 60ms }
html.js [data-reveal] .s-faq-item:nth-child(3),
html.js [data-reveal] .s-inc-item:nth-child(3) { transition-delay: 120ms }
html.js [data-reveal] .s-faq-item:nth-child(4),
html.js [data-reveal] .s-inc-item:nth-child(4) { transition-delay: 180ms }
html.js [data-reveal] .s-faq-item:nth-child(5),
html.js [data-reveal] .s-inc-item:nth-child(5) { transition-delay: 240ms }
/* teto: do 6o em diante todos no ultimo degrau (a FAQ tem 6) */
html.js [data-reveal] .s-faq-item:nth-child(n+6),
html.js [data-reveal] .s-inc-item:nth-child(n+6) { transition-delay: 300ms }

html.js [data-reveal].is-in .s-faq-item,
html.js [data-reveal].is-in .s-inc-item { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] .s-faq-item,
  html.js [data-reveal] .s-inc-item {
    opacity: 1; transform: none;
    transition: none; transition-delay: 0ms;
  }
}

/* CORPO (14/400, lh 1.6): todo texto corrido da pagina */
.s-card p,
.s-passo p,
.s-faq-corpo p,
.s-eq-list p,
.s-regime-txt,
.s-inc-item p,
.s-eq-nota,
.s-regime-nota {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* LEAD (16/400, lh 1.62): o paragrafo de abertura de secao */
.s-lead { font-size: 16px !important; font-weight: 400 !important; line-height: 1.62 !important; }

/* META (12/600): eyebrow, label, chip, limite de regime */
.s-eyebrow,
.s-label,
.s-passo-t,
.s-regime-lim,
.s-quote cite,
.s-card-idx {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* ---------------------------------------------------------------
   3. BASE
   --------------------------------------------------------------- */
/* .font-sans do Tailwind esta na tag <body> e vence seletor de elemento;
   por isso a familia precisa ser reafirmada aqui. */
body, body.font-sans, .font-sans {
  font-family: var(--s-sans) !important;
}
body {
  color: var(--s-text);
  background: var(--s-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

/* P1 + A12: hierarquia por PESO e TINTA, tracking ZERO.
   O tracking negativo em titulo e o "premium" que a Stripe recusa. */
h1, h2, h3, h4, h5,
.font-heading {
  font-family: var(--s-display) !important;
  color: var(--s-ink);
  letter-spacing: normal;
  font-weight: 600;
}

/* Tailwind escreve text-slate-* direto no markup; remapeia pra escada  */
/* branco explicito no markup vence a cor de heading (titulo sobre foto/navy) */
.text-white, .text-white h1, .text-white h2, .text-white h3, .text-white h4,
h1.text-white, h2.text-white, h3.text-white, h4.text-white { color: #fff !important; }

.text-slate-900 { color: var(--s-ink)   !important; }
.text-slate-800 { color: var(--s-text)  !important; }
.text-slate-600 { color: var(--s-text)  !important; }
/* slate-500 do Tailwind (#64748b) da 3.85:1 no corpo dos cards — reprova
   no AA. Passa a usar o token de texto, nao o secundario. */
.text-slate-500 { color: var(--s-text)  !important; }
/* onde "apagado" e intencional (rodape, legendas), usar .s-muted-text */
.s-muted-text   { color: var(--s-muted) !important; }
.text-primary   { color: var(--s-navy)  !important; }

.bg-primary { background-color: var(--s-navy) !important; }

/* =============================================================
   RITMO DE DOBRAS — atribuido POR SECAO, nao por classe utilitaria.

   Antes .bg-slate-50 (beneficios) e .s-sec-alt (regimes, processo)
   apontavam para o MESMO token: 3 dobras seguidas com #eaf1f5
   identico, ~2900px de rolagem sem uma unica troca de cor. Dava o
   efeito de documento corrido.

   Agora cada dobra tem a sua superficie declarada pelo id, o que
   torna impossivel duas vizinhas coincidirem sem se ver aqui.
   A escada alterna claro/medio e passa por escuro duas vezes.
   ============================================================= */
#inicio        { }                                   /* gradiente proprio  */
#como-funciona { background-color: #ffffff !important; }        /* branco  */
#equiparacao   { background-color: var(--s-navy-deep) !important; } /* ESCURO */
#regimes       { background-color: #eef4f7 !important; }        /* azulado */
#beneficios    { background-color: #ffffff !important; }        /* branco  */
#processo      { background-color: #e6eef3 !important; }        /* azulado+ */
#duvidas       { background-color: #fafcfd !important; }        /* quase branco */
#contato       { background-color: var(--s-navy-deep) !important; } /* ESCURO */

/* costura: filete claro no topo das dobras claras que sucedem uma
   escura, para a troca nao virar degrau duro */
#regimes  { border-top: 1px solid rgba(255,255,255,.10); }
#duvidas  { border-top: 1px solid #dde8ee; }
#processo { border-top: 1px solid #dae5ec; }

/* Card branco sobre dobra branca desaparece. Onde a dobra e branca, o
   elemento elevado ganha um tom frio + borda mais definida; onde a
   dobra e colorida, ele fica branco puro. A separacao vem sempre do
   contraste entre os dois, nunca de sombra sozinha. */
#beneficios .s-panel,
#como-funciona .s-card {
  background: #f6fafc !important;
  box-shadow: 0 0 0 1px #cfdde5 !important;   /* anel, nao border (P6) */
}
#beneficios .s-panel { box-shadow: 0 0 0 1px #cfdde5 !important; }
#como-funciona .s-card-dark { background: var(--s-navy-deep) !important; }

.border-slate-100 { border-color: var(--s-line-soft) !important; }
.border-slate-200,
.border-slate-200\/40 { border-color: var(--s-line) !important; }

::selection { background: rgba(24,72,104,.14); color: var(--s-ink); }

:focus-visible {
  outline: 2px solid var(--s-navy-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------
   4. O QUE SAI — vicios de template gerado
   --------------------------------------------------------------- */

/* 4a. Os dois blobs .glow eram decoracao sem significado, e o de cima
   ainda jogava azul-vivo por baixo do H1. Fora. */
.glow { display: none !important; }

/* 4b. glass-card: blur em tudo achatava a hierarquia. Vira superficie
   solida com linha de 1px — profundidade por cinza, nao por vidro. */
.glass-card {
  background: var(--s-paper) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--s-ring) !important; border: 0 !important;
}

/* 4c. O H1 usava gradiente navy -> #3b82f6 (azul vivo). Duas marcas
   brigando. Vira peso tipografico + navy solido. */
.text-gradient {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--s-navy) !important;
  font-weight: 800;
}

/* 4d. Raios de 3rem em tudo davam ar de template. Escada calibrada. */
.rounded-\[3rem\], .md\:rounded-\[3rem\],
.rounded-\[2\.5rem\], .rounded-\[2rem\] { border-radius: 8px !important; }
.rounded-3xl { border-radius: 8px !important; }
.rounded-2xl { border-radius: 6px !important; }
.rounded-xl  { border-radius: 6px !important; }

/* ---------------------------------------------------------------
   5. TIPOGRAFIA DA PAGINA
   --------------------------------------------------------------- */
h1 {
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.03;
  text-wrap: balance;
}
h2 { font-weight: 700; letter-spacing: normal; line-height: 1.12; text-wrap: balance; }
h3, h4 { font-weight: 600; letter-spacing: normal; }

/* ESCALA DE TITULOS
   Definida aqui, nao via classe arbitraria do Tailwind: o build do tema e
   purgado e nao tem fonte no repo, entao `text-[clamp(...)]` novo nao
   existiria no CSS e o titulo cairia pra 16px. */
/* Calibrado para o Outfit (geometrica): ele tem olho maior e hastes mais
   uniformes que uma grotesque, entao pede tracking um pouco menos
   negativo e peso 700 em vez de 800 para nao encorpar demais. */
.s-h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: normal;
}
.s-h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: normal;
}
.s-h2-cta { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.s-inc-title { font-size: 16px; line-height: 1.35; }
/* card: o conteudo flui do topo; a altura minima so iguala as fileiras.
   align-items:stretch garante que o card escuro acompanhe o vizinho. */
.s-stagger { align-items: stretch; }

/* Dobra 2: a coluna dos cards era 58px mais curta que a do retrato e
   ficava boiando. A grade agora ocupa a altura da linha e a sobra vai
   pro gap entre as fileiras, nao pro rodape. */
@media (min-width: 1024px) {
  #como-funciona .s-stagger {
    height: 100%;
    align-content: stretch;
  }
}
.s-card-min { min-height: 210px; height: 100%; }
.s-card-min .s-ico { margin-bottom: 18px; }
.s-card-min h3 { margin-top: 0; }

/* marcador da lista de credenciais (era bg-[#ff9800] no markup) */
.s-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--s-amber);
  display: inline-block;
}

/* subtitulo do hero e leads de secao */
.s-lead {
  font-size: 16px;
  line-height: 1.62;
  color: var(--s-muted);
  max-width: 54ch;
}

/* lead sobre fundo navy (secao CTA) */
.s-lead-invert {
  color: rgba(255,255,255,.72) !important;
  max-width: 42rem;
}

/* eyebrow: o badge do hero vira rotulo tipografico, sem pilula */
/* A12: eyebrow deixa de ser CAIXA-ALTA ESPACADA (o tracking "premium"
   que a Stripe recusa). Vira o padrao dela para rotulo de grupo:
   tamanho menor + peso 600 + tom muted, tracking ZERO. */
.s-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--s-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--s-muted);
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
}
.s-eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--s-amber);
  flex: 0 0 auto;
}
/* o ponto que pulsava vira redundante ao tracinho */
.s-eyebrow > span:first-child { display: none !important; }

/* ---------------------------------------------------------------
   6. BOTOES
   --------------------------------------------------------------- */
.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--s-sans);
  font-weight: 700;
  letter-spacing: normal;
  border-radius: 6px;
  transition: background-color var(--s-fast) ease,
              box-shadow var(--s-base) var(--s-ease),
              transform var(--s-fast) ease;
  will-change: transform;
}
.s-btn-lg {
  font-size: 16px;
  padding: 15px 30px;
  border-radius: 6px;
}
.s-btn-primary {
  background: var(--s-navy) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px var(--s-navy);
}
.s-btn-primary:hover {
  background: var(--s-navy-deep) !important;
  box-shadow: 0 0 0 1px var(--s-navy-deep);
}
.s-btn-amber {
  background: var(--s-amber) !important;
  color: #24160a !important;
  box-shadow: 0 0 0 1px var(--s-amber);
}
.s-btn-amber:hover { background: #f08e00 !important; }

/* REFLEXO NO HOVER (shine)
   Uma faixa de luz diagonal atravessa o botao uma vez por hover.
   Regras que ela respeita:
   - so transform anima (fica no compositor), nunca left/width;
   - .45s: e decorativo e atravessa uma distancia longa, mas o feedback
     de cor do botao continua em .1s, entao a resposta ao mouse nao
     fica lenta;
   - so em ponteiro fino: no toque nao existe hover e o efeito ficaria
     preslo depois do tap;
   - overflow contido no proprio botao;
   - desligado em prefers-reduced-motion. */
@media (hover: hover) and (pointer: fine) {
  .s-btn { position: relative; overflow: hidden; isolation: isolate; }
  .s-btn::after {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: 0;
    width: 42%;
    pointer-events: none;
    z-index: 1;
    /* faixa estreita no miolo do gradiente: brilho, nao bloco */
    background: linear-gradient(100deg,
                transparent 0%,
                rgba(255,255,255,.10) 34%,
                rgba(255,255,255,.38) 50%,
                rgba(255,255,255,.10) 66%,
                transparent 100%);
    transform: translateX(-130%) skewX(-18deg);
    transition: transform .55s var(--s-ease);
  }
  .s-btn:hover::after { transform: translateX(290%) skewX(-18deg); }

  /* no botao ambar o branco puro estoura: luz mais discreta */
  .s-btn-amber::after {
    background: linear-gradient(100deg,
                transparent 0%,
                rgba(255,255,255,.14) 34%,
                rgba(255,255,255,.50) 50%,
                rgba(255,255,255,.14) 66%,
                transparent 100%);
  }
  /* o conteudo do botao fica acima da faixa */
  .s-btn > * { position: relative; z-index: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .s-btn::after { display: none; }
}

/* press feedback: o site inteiro tinha hover e nenhum :active */
a[href]:active, button:active, .s-btn:active {
  transform: scale(.985);
  transition: transform var(--s-fast) ease;
}
a[href], button { -webkit-tap-highlight-color: transparent; }

/* mata o hover:scale-105 / translate-y do template: escala em botao
   grande borra o texto. Profundidade passa a ser sombra. */
.hover\:scale-105:hover { transform: none !important; }
.hover\:translate-y-\[-2px\]:hover { transform: none !important; }
.hover\:scale-\[1\.02\]:hover { transform: none !important; }

/* ---------------------------------------------------------------
   7. NAV
   --------------------------------------------------------------- */
.s-nav {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: var(--s-sh-md) !important;
  transition: box-shadow var(--s-base) var(--s-ease),
              background-color var(--s-base) var(--s-ease);
}
.s-nav.is-stuck {
  background: rgba(255,255,255,.94) !important;
  box-shadow: var(--s-sh-lg) !important;
}
.s-nav a { font-family: var(--s-sans); }
/* o botao nao pode ser espremido pelos links */
.s-nav > a:last-child, .s-nav .s-btn { flex: 0 0 auto; white-space: nowrap; }
.s-nav .s-btn { padding: 10px 20px; }
.s-nav .s-navlink {
  position: relative;
  color: var(--s-text);
  font-weight: 600;
  transition: color var(--s-fast) ease;
}
.s-nav .s-navlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 2px;
  background: var(--s-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--s-base) var(--s-ease);
}
.s-nav .s-navlink:hover { color: var(--s-ink); }
.s-nav .s-navlink:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------------
   8. HERO
   --------------------------------------------------------------- */
/* Hero: luz vinda de cima-direita (atras do retrato), descendo pro
   branco e terminando EXATAMENTE na cor da dobra 2, pra emendar. */
/* FUNDO DO HERO — gradiente linear limpo, sem blob.
   Tentei a aurora do trampolim aqui e nao funciona: la a marca e
   multicolor (rosa/violeta/laranja) e as camadas se misturam com
   contraste; aqui sao navy e ambar sobre claro, e a mistura vira
   um bege-acinzentado sujo (o "LCD queimado"). Dois blobs que se
   sobrepoem so ficam limpos com matizes distantes.
   A cor aqui vem de uma diagonal continua: sem mancha, sem borda
   suja, sem animacao (a deriva ainda somava 0.43 de CLS). */
.s-hero {
  position: relative;
  background:
    linear-gradient(160deg,
      #cfe2ec 0%,
      #dbe9f1 22%,
      #e7f0f5 44%,
      #f1f7fa 66%,
      #f9fcfd 84%,
      #ffffff 100%);
}
/* respiro quente sutil no alto, do lado do logo: um unico ponto de
   ambar bem diluido, sem blur, sem sobreposicao de camadas */
.s-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 42% at 12% 0%,
              rgba(248,152,40,.10) 0%, rgba(248,152,40,0) 68%);
}
/* filete de marca fechando a dobra */
/* o conteudo do hero ja usa .relative.z-10 no markup, entao fica
   acima dos dois pseudo-elementos */
.s-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
              transparent 8%, var(--s-hair) 42%, transparent 92%);
}


/* retrato: moldura editorial em vez de card flutuante com sombra 2xl */
/* O retrato do hero entrava em altura livre: 756px, 81% da altura da
   dobra, mais alto que a coluna de texto inteira. Um retrato 3:4
   esticado pesa mais que o argumento, que e o que deve liderar.
   Proporcao controlada em 4:5 e enquadramento no rosto. */
.s-portrait {
  position: relative;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: var(--s-sh-xl) !important;
}
/* A foto original e 1024x1536 (2:3), um retrato de meio corpo bem
   composto: luz lateral, terno azul que ja conversa com a marca e o
   fundo navy #103040, quase o proprio --s-navy-deep.
   O erro nao era a foto: era espremer um 2:3 num quadro 4:5 e cortar
   fora a composicao. Respeitar a proporcao nativa resolve. */
#inicio .s-portrait {
  aspect-ratio: 2 / 3;
  width: 100% !important;
  max-width: 430px;
  margin-left: auto;
}
/* a coluna do texto precisa de largura pro CTA nao quebrar em 2 linhas */
@media (min-width: 1024px) {
  #inicio > div > div { gap: 56px !important; }
  #inicio .flex-1:first-child { flex: 1.25 1 0%; }
  #inicio .flex-1:last-child  { flex: .75 1 0%; }
  .s-btn-lg { white-space: nowrap; }
}
#inicio .s-portrait > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;   /* respeita a composicao original */
  display: block;
}
/* a legenda respira da base e nao encosta no ombro */
#inicio .s-portrait-tag { bottom: 16px; left: 16px; right: 16px; padding: 14px 16px; }
@media (max-width: 1023px) {
  /* mesma proporcao nativa do desktop: o quadrado cortava a composicao
     e a legenda acabava sobre o peito */
  #inicio .s-portrait {
    width: 100% !important;
    max-width: 300px;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
  }
  #inicio .s-portrait-tag { bottom: 12px; left: 12px; right: 12px; padding: 12px 14px; }
  #inicio .s-portrait-tag p:first-child { font-size: 15px; }
  #inicio .s-portrait-tag p:last-child  { font-size: 12.5px; }
}
/* faixa de marca na base do retrato (profundidade por cor, nao por blur) */
.s-portrait::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--s-navy) 0%, var(--s-amber) 100%);
  z-index: 3;
}
.s-portrait-tag {
  background: rgba(14,34,48,.82) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) !important; border: 0 !important;
  border-radius: 6px !important;
}

/* FAIXA DE PROVA no hero: os numeros da LEI acima da dobra.
   O impacto vem do dado verificavel, nao de adjetivo. O 32% -> 8%
   estava enterrado na terceira dobra; e o argumento mais forte da
   pagina e agora aparece na primeira tela. */
.s-prova {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
  padding: 18px 0 0;
  border-top: 1px solid var(--s-hair);
}
.s-prova-item { display: flex; flex-direction: column; gap: 3px; }
.s-prova-item strong {
  font-family: var(--s-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--s-navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.s-prova-item strong span {
  color: var(--s-navy-soft);   /* ambar como texto sobre claro reprova
                                  no AA (2.76:1); ver --s-amber-deep */
  margin: 0 3px;
}
.s-prova-item > span {
  font-size: 13px;
  line-height: 1.45;
  color: var(--s-muted);
  max-width: 24ch;
}
@media (max-width: 1023px) {
  .s-prova { justify-content: center; gap: 24px; }
  .s-prova-item { align-items: center; text-align: center; }
}
@media (max-width: 560px) {
  .s-prova { flex-direction: column; gap: 16px; padding-top: 16px; margin-bottom: 26px; }
  .s-prova-item strong { font-size: 20px; }
  .s-prova-item > span { max-width: none; }
}

/* selo de confianca ao lado do CTA */
.s-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--s-muted);
}
.s-trust svg { color: var(--s-navy) !important; width: 18px; height: 18px; }

/* ---------------------------------------------------------------
   9. CARDS
   --------------------------------------------------------------- */
/* card fica em BRANCO PURO: agora que a dobra tem cor, o branco do card
   e que cria a separacao (antes card e fundo eram ambos brancos) */
.s-card {
  background: #ffffff;
  box-shadow: var(--s-ring); border: 0;
  border-radius: 8px;
  box-shadow: var(--s-sh-sm);
  transition: box-shadow var(--s-base) var(--s-ease),
              border-color var(--s-base) var(--s-ease),
              transform var(--s-base) var(--s-ease);
}
.s-card:hover {
  box-shadow: var(--s-sh-lg);
  border-color: #cfdde1;
  transform: translateY(-2px);
}
/* o card escuro (a "solucao") — contraste como argumento */
.s-card-dark {
  background: var(--s-navy-deep) !important;
  border-color: var(--s-navy-deep) !important;
  color: #fff;
}
.s-card-dark h3 { color: #fff !important; }
.s-card-dark p  { color: #bed4dd !important; } /* ~7:1 sobre o navy escuro */

/* numeracao dos cards de problema: indice discreto, editorial */
/* o indice e pequeno (13px/700): opacity aqui derruba o contraste real
   (dava 2.86:1). Cor solida, sem opacity — a discricao vem do tamanho. */
.s-card-idx {
  font-family: var(--s-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--s-muted);
}

/* icone dentro do card */
.s-ico {
  width: 42px; height: 42px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--s-mist-2);
  color: var(--s-navy);
  box-shadow: var(--s-ring); border: 0;
}
.s-card-dark .s-ico {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: #fff;
}

/* citacao do Marcus: era um card cinza com italico centralizado.
   Vira citacao editorial com regua de marca a esquerda. */
.s-quote {
  border-left: 3px solid var(--s-amber);
  padding: 6px 0 6px 28px;
  margin: 0 auto;
}
/* respiro proprio: a citacao fecha a secao, nao encosta nos cards */
.s-quote { margin-top: 4.5rem !important; }
@media (max-width: 1023px) { .s-quote { margin-top: 3rem !important; } }
.s-quote p {
  font-family: var(--s-display);
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: normal;
  font-weight: 600;
  color: var(--s-ink);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.s-quote p::before { content: "\201C"; }
.s-quote p::after  { content: "\201D"; }
.s-quote cite {
  font-family: var(--s-sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--s-muted);
}
@media (max-width: 640px) {
  .s-quote { padding-left: 20px; }
}

/* ---------------------------------------------------------------
   CARD DE AUTORIDADE (foto + credenciais)
   O padrao anterior era legenda flutuante SOBRE a foto: funciona com
   uma linha (nome + cargo), mas ali eram titulo + 4 itens, cobrindo
   40% da imagem e tampando maos e mesa.
   Aqui a foto fica inteira e as credenciais ficam ABAIXO, no mesmo
   cartao. Um objeto so, sem sobreposicao.
   --------------------------------------------------------------- */
.s-autor {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: var(--s-r-surface);
  box-shadow: var(--s-ring);
  overflow: hidden;
}
.s-autor-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--s-surface-2);
}
.s-autor-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 48% calculado, nao chutado: na imagem 768x1024 o topo da cabeca
     esta em y=246 e as maos em y=819 (span 573px). A janela 4:3 tem
     576px, entao o busto inteiro cabe centrando em 48%. Com 28% sobrava
     teto e a mao com a caneta ficava cortada. */
  object-position: 50% 48%;
  display: block;
}
.s-autor-info {
  padding: 20px 22px 22px;
  border-top: 1px solid var(--s-hair-soft);
}
.s-autor-nome {
  margin: 0 0 3px;
  font-family: var(--s-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--s-ink);
}
.s-autor-cargo {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--s-muted);
}
.s-autor-creds {
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid var(--s-hair-soft);
  display: grid;
  gap: 9px;
}
.s-autor-creds li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--s-text);
}
.s-autor-creds li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--s-amber);
}
@media (max-width: 1023px) {
  .s-autor-foto { aspect-ratio: 16 / 10; }
  .s-autor-info { padding: 18px 18px 20px; }
}

/* ---------------------------------------------------------------
   10. LISTA DE SERVICOS ("O que esta incluido")
   Vira lista com regua, nao 5 caixas com sombra.
   --------------------------------------------------------------- */
/* a coluna da lista carrega mais texto que o painel: 1.15 vs 0.85 evita
   que os itens quebrem em 3 linhas enquanto sobra espaco a direita */
@media (min-width: 1024px) {
  #beneficios > div > div > .flex-1:first-child { flex: 1.15 1 0%; }
  #beneficios > div > div > .flex-1:last-child  { flex: .85 1 0%; }
}

.s-inc { border-top: 1px solid var(--s-line); }
.s-inc-item {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--s-line);
  transition: background-color var(--s-base) var(--s-ease);
}
.s-inc-item:hover { background: rgba(244,247,248,.7); }
.s-inc-mark {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--s-navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: none !important;
  transition: background-color var(--s-fast) ease;
}
.s-inc-mark svg { width: 17px; height: 17px; color: #fff !important; }
.s-inc-item:hover .s-inc-mark { background: var(--s-navy-soft); }

/* ---------------------------------------------------------------
   11. PAINEL "O QUE VOCE GANHA"
   --------------------------------------------------------------- */
.s-panel {
  background: #ffffff !important;
  box-shadow: var(--s-ring) !important; border: 0 !important;
  border-radius: 8px !important;
  box-shadow: var(--s-sh-lg) !important;
}
.s-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--s-line-soft);
}
.s-panel-row:last-child { border-bottom: 0; }
.s-panel-k { color: var(--s-muted); font-weight: 600; font-size: 14px; }
.s-panel-v {
  font-family: var(--s-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: normal;
  color: var(--s-ink);
  text-transform: none;
}
.s-panel-v.is-good { color: #0f7a52; }

/* selo -30%: era um circulo laranja rotacionado 12 graus, colidindo com
   o card. Vira etiqueta reta, ancorada, com hierarquia interna. */
.s-badge {
  position: absolute;
  top: -18px; right: 22px;
  transform: none !important;
  background: var(--s-amber) !important;
  color: #24160a !important;
  border-radius: 6px !important;
  padding: 12px 18px !important;
  box-shadow: 0 0 0 1px rgba(180,105,20,.35) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  z-index: 20;
}
.s-badge b {
  font-family: var(--s-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: normal;
}
.s-badge span {
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  margin-top: 4px !important;
  opacity: .82;
}

/* ---------------------------------------------------------------
   12. CTA / FORMULARIO
   --------------------------------------------------------------- */
.s-cta {
  background: var(--s-navy-deep) !important;
  position: relative;
  overflow: hidden;
}
/* trama geometrica discreta no lugar do blob branco borrado */
/* ARCOS CONCENTRICOS — referencia a espiral do logo (aceleracao em
   curva). Elemento grafico proprio da marca, nao trama generica. */
.s-cta-mesh {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.s-cta-mesh::before {
  content: "";
  position: absolute;
  right: -14%; top: 50%;
  width: 780px; height: 780px;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 27%, rgba(255,255,255,.055) 27% 27.35%, transparent 27.35%),
    radial-gradient(circle, transparent 0 37%, rgba(255,255,255,.05)  37% 37.3%,  transparent 37.3%),
    radial-gradient(circle, transparent 0 47%, rgba(248,152,40,.20)   47% 47.35%, transparent 47.35%),
    radial-gradient(circle, transparent 0 57%, rgba(255,255,255,.04)  57% 57.25%, transparent 57.25%);
  -webkit-mask-image: linear-gradient(120deg, transparent 26%, #000 78%);
  mask-image: linear-gradient(120deg, transparent 26%, #000 78%);
}
/* brilho quente no miolo, como o laranja da seta do logo */
.s-cta-mesh::after {
  content: "";
  position: absolute;
  top: -20%; right: -6%;
  width: 52%; height: 140%;
  background: radial-gradient(closest-side, rgba(248,152,40,.13), transparent 74%);
}
@media (max-width: 1023px) {
  .s-cta-mesh::before {
    width: 520px; height: 520px;
    right: -32%;
    -webkit-mask-image: linear-gradient(150deg, transparent 34%, #000 86%);
    mask-image: linear-gradient(150deg, transparent 34%, #000 86%);
  }
}

.s-form-shell {
  background: var(--s-paper) !important;
  border-radius: 8px !important;
  box-shadow: var(--s-elev-overlay) !important;
  border: 0 !important;
}

.s-label {
  display: block;
  font-family: var(--s-sans);
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--s-muted);
  margin-bottom: 7px;
}
.s-field {
  width: 100%;
  font-family: var(--s-sans);
  font-size: 14px;
  color: var(--s-ink);
  background: var(--s-mist) !important;
  box-shadow: var(--s-ring) !important; border: 0 !important;
  border-radius: var(--s-r-surface) !important;
  padding: 12px 12px !important;
  transition: background-color var(--s-fast) ease,
              box-shadow var(--s-fast) ease;
  outline: none;
}
.s-field::placeholder { color: #9aabb1; }
.s-field:hover { box-shadow: 0 0 0 1px #c3d4dc !important; }
.s-field:focus {
  background: var(--s-paper) !important;
  box-shadow: var(--s-ring-focus) !important;
}
select.s-field {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b8087' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 38px !important;
}

.s-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--s-muted) !important;
}
.s-privacy svg { width: 14px; height: 14px; opacity: .8; }

/* ===============================================================
   12b. DOBRAS NOVAS (equiparacao, regimes, processo, FAQ)
   =============================================================== */

/* superficie da dobra escura */
.s-sec-dark { background: var(--s-navy-deep); color: #cddbe4; }

/* nota de embasamento legal: obrigatoria onde ha percentual da lei */
.s-disclaimer {
  margin-top: 34px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--s-muted);
  max-width: 68ch;
}

/* ===============================================================
   MOMENTO EDITORIAL (a excecao deliberada)

   As outras 8 dobras seguem a mecanica Stripe: contencao, densidade,
   hairline de 1px, tudo dentro de 1280px, nada acima de 32px.
   Isso e certo pra uma interface que a pessoa usa 8h por dia, e
   conservador demais pra uma LP que tem 5 segundos.

   Esta dobra quebra a regra de proposito, UMA vez:
   - full-bleed de verdade (100vw, sem container);
   - o numero em escala que nenhum outro elemento tem;
   - o argumento sozinho, sem card, sem grade, sem vizinho.

   A raridade e o que faz funcionar. Se repetisse, viraria ruido.
   =============================================================== */
.s-editorial {
  position: relative;
  width: 100%;
  background:
    radial-gradient(120% 90% at 78% 8%, #1c5878 0%, rgba(28,88,120,0) 58%),
    linear-gradient(160deg, #16466a 0%, #123a55 46%, #0a2334 100%);
  color: #fff;
  overflow: hidden;
  padding: 112px 24px 104px;
  isolation: isolate;
}
/* trama de arcos: a espiral do logo em escala grande, quase invisivel */
.s-ed-trama {
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 78% 34%, transparent 0 22%, rgba(255,255,255,.05) 22% 22.25%, transparent 22.25%),
    radial-gradient(circle at 78% 34%, transparent 0 32%, rgba(248,152,40,.16) 32% 32.25%, transparent 32.25%),
    radial-gradient(circle at 78% 34%, transparent 0 44%, rgba(255,255,255,.04) 44% 44.2%,  transparent 44.2%),
    radial-gradient(circle at 78% 34%, transparent 0 58%, rgba(255,255,255,.03) 58% 58.18%, transparent 58.18%);
  -webkit-mask-image: linear-gradient(115deg, transparent 18%, #000 72%);
  mask-image: linear-gradient(115deg, transparent 18%, #000 72%);
}
/* as duas dobras escuras se encostam; o filete marca a troca sem
   precisar clarear o fundo */
.s-editorial::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 12%, rgba(248,152,40,.45) 50%, transparent 88%);
  z-index: 2;
}
.s-ed-in {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.s-ed-eyebrow {
  margin: 0 0 26px;
  font-size: 12px;
  font-weight: 600;
  /* medido em headless sobre o navy desta dobra: #8fb6cd dava 4.39:1 e
     12px exige 4.5:1 (AA). Este tom sobe a razao sem clarear a ponto de
     competir com o numerao ambar logo abaixo. */
  color: #a9c8da;
}

/* O EVENTO: unico elemento da pagina acima de 48px.
   clamp generoso, porque aqui o tamanho E o argumento. */
.s-ed-num {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.2vw, 30px);
  font-family: var(--s-display);
  font-weight: 700;
  line-height: .92;
  font-size: clamp(64px, 13vw, 168px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.s-ed-de {
  color: #7695a8;   /* apagado de proposito, mas AA: #56798f dava 2.41:1 */
  position: relative;
}
/* risco sobre o numero antigo: mostra que ele fica pra tras */
.s-ed-de::after {
  content: "";
  position: absolute;
  left: -3%; right: -3%;
  top: 52%;
  height: clamp(4px, .7vw, 9px);
  border-radius: 999px;
  background: #7695a8;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--s-ease) .15s;
}
[data-reveal].is-in .s-ed-de::after { transform: scaleX(1); }
.s-ed-seta {
  font-size: clamp(28px, 4.5vw, 62px);
  color: var(--s-amber);
  font-weight: 400;
  transform: translateY(-.06em);
}
.s-ed-para { color: #fff; }

.s-ed-legenda {
  margin: 34px auto 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: #cddbe4;
}
.s-ed-fonte {
  margin: 22px 0 0;
  font-size: 12.5px;
  color: #9dbdd0;   /* 4.18:1 nao passava; a fonte da lei precisa ser lida */
}

@media (prefers-reduced-motion: reduce) {
  .s-ed-de::after { transform: scaleX(1); transition: none; }
}
@media (max-width: 720px) {
  .s-editorial { padding: 72px 20px 68px; }
  .s-ed-legenda { margin-top: 26px; }
  .s-ed-trama { inset: -10% -30%; }
}

/* ---- EQUIPARACAO (dobra escura) ---- */
/* coluna esquerda = argumento + grafico; direita = requisitos.
   O grafico fecha o raciocinio do texto que esta acima dele. */
.s-eq {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 32px 56px;
  align-items: start;
  grid-template-areas:
    "texto  req"
    "viz    req";
}
/* o painel de requisitos acompanha a altura da coluna da esquerda
   (texto + grafico); antes sobravam 103px sob ele */
@media (min-width: 1024px) {
  /* o painel acompanha a coluna da esquerda, mas a folga vai pros
     ESPACOS ENTRE OS ITENS, nao pro rodape: empurrar so a nota criava
     um buraco de ~100px entre o item 03 e ela. */
  .s-eq-req { height: 100%; display: flex; flex-direction: column; }
  .s-eq-req .s-eq-list { flex: 1; justify-content: space-between; gap: 22px; }
  .s-eq-req .s-eq-nota { margin-top: 22px; }
}
.s-eq > div:first-child { grid-area: texto; }
.s-eq-viz              { grid-area: viz; }
.s-eq-req              { grid-area: req; }
.s-eyebrow-invert { color: #7fb4d4; }
.s-eq h2, .s-eq h3 { color: #fff; }

.s-eq-req {
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 1px rgba(255,255,255,.11); border: 0;
  border-radius: 8px;
  padding: 34px 32px 30px;
}
.s-eq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.s-eq-list li { display: flex; gap: 16px; align-items: flex-start; }
.s-eq-num {
  flex: 0 0 auto;
  font-family: var(--s-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--s-amber);
  padding-top: 3px;
  min-width: 22px;
}
.s-eq-list strong {
  display: block;
  font-family: var(--s-display);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 5px;
  letter-spacing: normal;
}
.s-eq-list p { margin: 0; font-size: 14px; line-height: 1.6; color: #a8c2d1; }
.s-eq-nota {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.11);
  font-size: 14px;
  line-height: 1.6;
  color: #cddbe4;
}
/* arcos da espiral tambem aqui, no lado oposto ao do CTA */
.s-eq-arcs {
  position: absolute;
  left: -16%; top: 50%;
  width: 680px; height: 680px;
  transform: translateY(-50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 0 32%, rgba(255,255,255,.045) 32% 32.3%, transparent 32.3%),
    radial-gradient(circle, transparent 0 44%, rgba(248,152,40,.16)  44% 44.3%, transparent 44.3%),
    radial-gradient(circle, transparent 0 56%, rgba(255,255,255,.035) 56% 56.25%, transparent 56.25%);
  -webkit-mask-image: linear-gradient(300deg, transparent 30%, #000 82%);
  mask-image: linear-gradient(300deg, transparent 30%, #000 82%);
}

/* ---- VISUALIZACAO DA DIFERENCA (dobra escura) ----
   O argumento central da pagina ("voce pode estar pagando mais imposto
   do que deveria") estava so em prosa. Aqui ele vira grafico: duas
   barras na mesma escala, e a diferenca se ve antes de se ler. */
.s-eq-viz {
  margin-top: 0;
  padding: 26px 28px 24px;
  background: rgba(255,255,255,.045);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
  border-radius: var(--s-r-surface);
}
.s-viz-titulo {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 600;
  color: #9fc0d4;
}
.s-barras { display: grid; gap: 16px; }
.s-barra-linha {
  display: grid;
  grid-template-columns: 148px 1fr 54px;
  align-items: center;
  gap: 16px;
}
.s-barra-rot { font-size: 14px; color: #cddbe4; }
.s-barra-trilho {
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.s-barra {
  height: 100%;
  border-radius: 999px;
  /* a barra e proporcional ao valor: 32% e 8% na MESMA escala,
     senao o grafico mente sobre a diferenca */
  width: calc(var(--v) * 1%);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .5s var(--s-ease);
}
.is-in .s-barra,
[data-reveal].is-in .s-barra { transform: scaleX(1); }
.s-barra-alta  { background: linear-gradient(90deg, #5b7183, #7d95a6); }
.s-barra-baixa { background: linear-gradient(90deg, var(--s-amber), #ffb45c); transition-delay: .12s; }
.s-barra-val {
  font-family: var(--s-display);
  font-size: 16px;
  font-weight: 700;
  color: #cddbe4;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.s-barra-val-dest { color: var(--s-amber); }
.s-viz-nota {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 13px;
  line-height: 1.55;
  color: #a8c2d1;
}
@media (prefers-reduced-motion: reduce) {
  .s-barra { transform: scaleX(1); transition: none; }
}
@media (max-width: 640px) {
  .s-barra-linha { grid-template-columns: 1fr 44px; grid-template-areas: "rot rot" "trilho val"; }
  .s-barra-rot { grid-area: rot; }
  .s-barra-trilho { grid-area: trilho; }
  .s-barra-val { grid-area: val; }
  .s-eq-viz { padding: 20px 18px 18px; }
}

/* ---- REGIMES ---- */
.s-regimes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
.s-regime {
  background: #fff;
  box-shadow: var(--s-ring); border: 0;
  border-radius: 8px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--s-sh-sm);
  transition: box-shadow var(--s-base) var(--s-ease),
              border-color var(--s-base) var(--s-ease),
              transform var(--s-base) var(--s-ease);
}
.s-regime:hover {
  box-shadow: var(--s-sh-lg);
  border-color: #c9dae1;
  transform: translateY(-2px);
}
.s-regime-tag {
  display: block;
  font-family: var(--s-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--s-ink);
}
.s-regime-lim {
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--s-muted);
}
.s-regime-txt {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.66;
  color: var(--s-text);
}
.s-regime-ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--s-line-soft);
  padding-top: 18px;
}
.s-regime-ul li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 14px;
}
.s-regime-ul li .s-mini { grid-column: 1 / -1; }
.s-regime-ul strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--s-ink);
}
.s-regime-ul span {
  font-family: var(--s-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--s-navy);
  text-align: right;
}
/* mini-barra: da escala visual ao numero dentro do card de regime.
   A largura e proporcional a aliquota (6% -> 38, 15,5% -> 100), entao
   a diferenca entre Anexo III e V se ve, nao so se le. */
.s-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.s-mini {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.s-mini-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--s-navy-soft);
  /* trilho de fundo + preenchimento proporcional: a barra sozinha nao
     dava referencia de escala (6% e 15,5% pareciam so "duas barras") */
  width: 100%;
  background-image: linear-gradient(90deg, var(--s-navy-soft) 0 calc(var(--v,38) * 1%), var(--s-surface-3) calc(var(--v,38) * 1%) 100%);
  background-color: var(--s-surface-3);
}
.s-mini-alta {
  background-image: linear-gradient(90deg, #7f95a3 0 calc(var(--v,100) * 1%), var(--s-surface-3) calc(var(--v,100) * 1%) 100%);
}

.s-regime-nota {
  margin: auto 0 0;
  padding-top: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--s-muted);
  font-style: italic;
}
/* o terceiro card e o argumento, nao um regime: inverte o peso */
.s-regime-dest {
  background: var(--s-navy-deep);
  border-color: var(--s-navy-deep);
}
.s-regime-dest .s-regime-tag { color: var(--s-amber); font-size: 14px; letter-spacing: normal; }
.s-regime-dest .s-regime-txt { color: #bed4dd; }
.s-regime-nota-dest {
  color: #fff !important;
  font-style: normal;
  font-weight: 600;
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 22px;
}

/* ---- SIMULADOR DE BASE DE CALCULO ----
   Transforma a pagina de informativa em ferramenta: o visitante ve a
   ordem de grandeza com a propria faixa de faturamento, usando as
   MESMAS faixas que o formulario pergunta depois. */
.s-sim {
  margin-top: 40px;
  background: #fff;
  border-radius: var(--s-r-surface);
  box-shadow: var(--s-ring);
  padding: 30px 30px 28px;
}
.s-sim-topo { max-width: 62ch; margin-bottom: 24px; }
.s-sim-topo h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--s-ink);
  margin: 0 0 8px;
}
.s-sim-topo p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--s-text);
}

.s-sim-controle { margin-bottom: 26px; }
.s-sim-controle .s-label { margin-bottom: 10px; }
.s-sim-faixas { display: flex; flex-wrap: wrap; gap: 8px; }
.s-sim-btn {
  font-family: var(--s-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--s-text);
  background: var(--s-surface-1);
  border: 0;
  border-radius: var(--s-r-ctrl);
  box-shadow: var(--s-ring);
  padding: 9px 14px;
  cursor: pointer;
  transition: background-color var(--s-fast) ease,
              box-shadow var(--s-fast) ease,
              color var(--s-fast) ease;
}
.s-sim-btn:hover { box-shadow: 0 0 0 1px #c3d4dc; }
.s-sim-btn.is-on {
  background: var(--s-navy);
  color: #fff;
  box-shadow: 0 0 0 1px var(--s-navy);
}
.s-sim-btn:focus-visible { box-shadow: var(--s-ring-focus); outline: 0; }

/* ALVO DE TOQUE (WCAG 2.5.8): no dedo estes botoes mediam 35px de altura
   com 8px de folga entre si — erro de toque num controle que fica no meio
   do funil. Em ponteiro grosso sobem para 44px. Mouse nao e afetado. */
@media (pointer: coarse) {
  .s-sim-btn { min-height: 44px; padding: 11px 16px; }
  .s-sim-faixas { gap: 10px; }
}

.s-sim-saida {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--s-hair);
  border-radius: var(--s-r-ctrl);
  overflow: hidden;
}
.s-sim-col {
  background: #fff;
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.s-sim-col-dest { background: var(--s-surface-1); }
.s-sim-col-dif  { background: var(--s-navy-deep); }
.s-sim-rot {
  font-size: 12px;
  font-weight: 600;
  color: var(--s-muted);
  line-height: 1.4;
}
.s-sim-val {
  font-family: var(--s-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--s-ink);
  font-variant-numeric: tabular-nums;   /* nao trepida ao trocar faixa */
}
.s-sim-det { font-size: 12px; line-height: 1.45; color: var(--s-muted); }
.s-sim-col-dif .s-sim-rot { color: #9fc0d4; }
.s-sim-col-dif .s-sim-val { color: var(--s-amber); }
.s-sim-col-dif .s-sim-det { color: #a8c2d1; }

.s-sim-nota {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--s-hair-soft);
  font-size: 13px;
  line-height: 1.6;
  color: var(--s-muted);
  max-width: 88ch;
}
.s-sim-nota strong { color: var(--s-text); font-weight: 700; }
.s-sim-cta { margin-top: 22px; padding: 13px 22px; align-self: flex-start; }
.s-sim { display: flex; flex-direction: column; align-items: stretch; }

@media (max-width: 900px) {
  .s-sim { padding: 24px 20px 22px; }
  .s-sim-saida { grid-template-columns: 1fr; }
  .s-sim-btn { font-size: 12.5px; padding: 8px 12px; }
  .s-sim-val { font-size: 22px; }
  .s-sim-cta { width: 100%; }
}

/* ---- PROCESSO (4 passos) ---- */
.s-passos {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--s-line);
}
.s-passo {
  padding: 30px 26px 28px 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.s-passo + .s-passo { border-left: 1px solid var(--s-line); padding-left: 26px; }
/* o ambar da marca e claro demais para TEXTO sobre fundo claro
   (#d97b00 dava 2.71:1). Numeral usa o navy; o ambar fica na regua
   acima, onde e forma e nao texto. Ver --s-amber-deep no topo. */
.s-passo-n {
  font-family: var(--s-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--s-navy);
  margin-bottom: 14px;
  position: relative;
  padding-top: 14px;
}
.s-passo-n::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 22px; height: 3px;
  background: var(--s-amber);
}
.s-passo h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--s-ink);
  margin: 0 0 9px;
}
.s-passo p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--s-text);
}
.s-passo-t {
  margin-top: auto;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--s-navy);
  background: var(--s-surface-3);
  border-radius: 999px;
  padding: 6px 12px;
}

/* ---- FAQ (details nativo: abre sem JS) ---- */
.s-faq-wrap {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 72px;
  align-items: start;
}
.s-faq-intro { position: sticky; top: 118px; }
.s-faq { border-top: 1px solid var(--s-line); }
.s-faq-item { border-bottom: 1px solid var(--s-line); }
.s-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 21px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--s-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--s-ink);
  transition: color var(--s-fast) ease;
}
.s-faq-item summary::-webkit-details-marker { display: none; }
.s-faq-item summary:hover { color: var(--s-navy); }
.s-faq-ico {
  width: 19px; height: 19px;
  flex: 0 0 auto;
  color: var(--s-muted);
  transition: transform var(--s-base) var(--s-ease), color var(--s-fast) ease;
}
.s-faq-item[open] .s-faq-ico { transform: rotate(180deg); color: var(--s-navy); }
/* anima a altura REAL (0fr -> 1fr), sem max-height chutado.
   O <details> nativo garante que abre mesmo sem JS; o JS so faz a ponte
   da transicao (ver rodape do index.php). */
.s-faq-corpo {
  padding: 0 44px 22px 0;
  display: grid;
  grid-template-rows: 1fr;
}
.s-faq-item[data-anim] .s-faq-corpo {
  grid-template-rows: 0fr;
  padding-bottom: 0;
  opacity: 0;
  transition: grid-template-rows .26s var(--s-ease),
              opacity .2s var(--s-ease),
              padding-bottom .26s var(--s-ease);
  /* NOTA MEDIDA: esta transicao de altura NAO roda. O <details> nativo
     tira o conteudo do fluxo quando fechado, entao o browser nao tem
     estado inicial pra interpolar 0fr->1fr: a altura salta de 0px pra
     67px sem passos (verificado a cada 40ms, inclusive com
     transition-behavior: allow-discrete).
     Fica declarada porque nao custa nada e passa a valer sozinha se o
     comportamento do <details> mudar. Faze-la funcionar hoje exigiria
     trocar <details> por div + JS, e a FAQ deixaria de abrir sem
     JavaScript: troca ruim por um detalhe de 260ms. */
}
.s-faq-item[data-anim][open] .s-faq-corpo {
  grid-template-rows: 1fr;
  padding-bottom: 22px;
  opacity: 1;
}
.s-faq-item[data-anim] .s-faq-corpo > * { overflow: hidden; min-height: 0; }
.s-faq-corpo p {
  margin: 0;
  font-size: 14px;
  line-height: 1.68;
  color: var(--s-text);
}

/* ---------------------------------------------------------------
   13. RODAPE
   --------------------------------------------------------------- */
/* RODAPE
   Era uma linha de copyright. Numa pagina que capta dado de medico,
   o rodape precisa carregar navegacao, a ressalva de que o site nao
   e consulta tributaria e a nota de uso dos dados (LGPD). */
.s-footer {
  background: var(--s-surface-1);
  border-top: 1px solid var(--s-line);
  color: var(--s-muted);
  padding: 56px 0 28px;
}
.s-footer-topo {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 36px;
}
.s-footer-marca img {
  height: 40px;
  width: auto;
  margin-bottom: 16px;
}
.s-footer-marca p {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--s-text);
  max-width: 46ch;
}
.s-footer-nav { display: flex; flex-direction: column; gap: 10px; }
.s-footer-tit {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--s-ink);
}
.s-footer-nav a {
  font-size: 14px;
  line-height: 1.4;
  color: var(--s-text);
  text-decoration: none;
  transition: color var(--s-fast) ease;
  width: fit-content;
}
.s-footer-nav a:hover { color: var(--s-navy); }

/* Mesmo motivo do simulador: no dedo, 6 links de 20px a 10px um do outro
   erram alvo. O link vira bloco de 44px; o respiro vem do proprio alvo,
   entao o gap encolhe e a altura do rodape quase nao muda. */
@media (pointer: coarse) {
  .s-footer-nav { gap: 2px; }
  .s-footer-nav a { min-height: 44px; display: flex; align-items: center; width: 100%; }
}

.s-footer-legal {
  padding: 22px 0;
  border-top: 1px solid var(--s-hair-soft);
  border-bottom: 1px solid var(--s-hair-soft);
}
.s-footer-legal p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--s-muted);
  max-width: 92ch;
}

.s-footer-base {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 22px;
}
.s-footer-base p { margin: 0; font-size: 12.5px; color: var(--s-muted); }

@media (max-width: 900px) {
  .s-footer { padding: 40px 0 24px; }
  .s-footer-topo { grid-template-columns: 1fr; gap: 30px; padding-bottom: 28px; }
  .s-footer-base { flex-direction: column; gap: 8px; }
}

/* ---------------------------------------------------------------
   14. ENTRADA — reveal no scroll, com stagger.
   Decorativo: nunca esconde conteudo se o JS falhar (ver .no-js).
   --------------------------------------------------------------- */
/* So esconde se o JS assumiu (html.js). Se o JS falhar ou for bloqueado,
   o conteudo nasce visivel — nunca uma pagina em branco. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .24s var(--s-ease), transform .24s var(--s-ease);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

.s-stagger > *:nth-child(1) { transition-delay: 0ms }
.s-stagger > *:nth-child(2) { transition-delay: 70ms }
.s-stagger > *:nth-child(3) { transition-delay: 140ms }
.s-stagger > *:nth-child(4) { transition-delay: 210ms }
.s-stagger > *:nth-child(5) { transition-delay: 280ms }
/* Teto, nao progressao infinita: a FAQ tem 6 perguntas e o 6o item
   entrava sem escalonar. Do 6o em diante todos usam o ultimo degrau,
   senao uma lista longa acumularia atraso ate parecer travada. */
.s-stagger > *:nth-child(n+6) { transition-delay: 280ms }

/* SAIDA DO MODAL (simetrica a entrada .animate-in / s360In).
   Sem isto o modal some com display:none, um corte seco. */
#successModal {
  transition: opacity .2s var(--s-ease);
}
#successModal.is-closing {
  opacity: 0;
  pointer-events: none;
}
#successModal.is-closing .animate-in {
  transform: scale(.96);
  transition: transform .2s var(--s-ease);
}
@media (prefers-reduced-motion: reduce) {
  #successModal, #successModal.is-closing .animate-in { transition: none; }
}

/* ---------------------------------------------------------------
   15. RESPONSIVO
   --------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* o hero tinha pt-44 (11rem) e empurrava a promessa pra fora da dobra */
  .s-hero { padding-top: 104px !important; padding-bottom: 56px !important; min-height: 0 !important; }
  .s-badge { top: -14px; right: 14px; padding: 10px 14px !important; }
  .s-badge b { font-size: 20px; }
}
@media (max-width: 640px) {
  h1 { letter-spacing: normal; }
  .s-inc-item { gap: 14px; padding: 18px 0; }
  .s-form-shell { border-radius: 8px !important; }
}

/* No mobile o hero e centralizado: o eyebrow tem que centralizar junto,
   senao o tracinho ambar fica solto na margem esquerda. */
@media (max-width: 1023px) {
  .text-center .s-eyebrow { justify-content: center; }
}

/* ---- responsivo das dobras novas ---- */
@media (max-width: 1023px) {
  .s-eq        { grid-template-columns: 1fr; gap: 28px; grid-template-areas: 'texto' 'viz' 'req'; }
  .s-eq-req    { padding: 28px 22px 26px; }
  .s-eq-arcs   { width: 460px; height: 460px; left: -40%; }

  .s-regimes   { grid-template-columns: 1fr; gap: 16px; }
  .s-regime    { padding: 26px 22px; }
  .s-regime-nota { margin-top: 18px; }

  /* 4 colunas viram 2x2, com as reguas trocando de eixo */
  .s-passos    { grid-template-columns: 1fr 1fr; }
  .s-passo     { padding: 26px 20px 24px 0; }
  .s-passo + .s-passo { padding-left: 0; border-left: 0; }
  .s-passo:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--s-line); }
  .s-passo:nth-child(n+3)  { border-top: 1px solid var(--s-line); }

  .s-faq-wrap  { grid-template-columns: 1fr; gap: 38px; }
  .s-faq-intro { position: static; }
  .s-faq-corpo { padding-right: 30px; }
}

@media (max-width: 640px) {
  .s-passos { grid-template-columns: 1fr; }
  .s-passo, .s-passo:nth-child(even) {
    padding: 22px 0;
    border-left: 0 !important;
    padding-left: 0 !important;
  }
  .s-passo + .s-passo { border-top: 1px solid var(--s-line); }
  .s-faq-item summary { font-size: 14px; gap: 14px; }
  .s-faq-corpo { padding-right: 0; }
  .s-regime-ul li { grid-template-columns: 1fr; gap: 3px; }
  .s-regime-ul span { text-align: left; }
}

/* ---------------------------------------------------------------
   16. ACESSIBILIDADE — respeitar reduced motion
   Gentil, nao zero: o conteudo aparece, so nao desloca.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .s-stagger > * { transition-delay: 0ms !important; }
  a[href]:active, button:active { transform: none !important; }
  .s-card:hover { transform: none; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* impressao / fallback sem JS: nada pode ficar invisivel */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }