/* =========================================================
   CardConsig — estilos
   Direção: escuro e premium, fiel aos mockups aprovados.
   Marca: verde #009B3A, amarelo #FFDF00.
   Fontes locais: Plus Jakarta Sans nos títulos, Inter no corpo.
   ========================================================= */

/* Só os pesos que a folha de estilo realmente usa, no subconjunto latin.
   Títulos são sempre 600, então a família de exibição traz só esse peso. */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Fundo da página. O navegador pinta --bg-base; os outros dois são as
     paradas do meio do gradiente contínuo, que fica em body::before. O
     theme-color das páginas HTML repete --bg-base. */
  --bg-base: #080E1A;
  --bg-meio: #0B1320;       /* 40% do gradiente */
  --bg-verde: #08171A;      /* 70%: puxa de leve para o verde da marca */
  /* outros fundos */
  --bg-900: #010A17;        /* azul mais fechado: botão escuro e menu no celular */
  --bg-800: #0A1628;        /* superfícies (cartões sobre o fundo) */
  /* marca */
  --green: #009B3A;
  --green-lt: #3FCB72;
  --yellow: #FFDF00;
  --gold: #E4BD4A;          /* botões e detalhes, como nos mockups */
  --gold-hi: #F0CD5E;
  /* texto */
  --white: #FFFFFF;
  --text-dim: rgba(255,255,255,.74);
  --text-mute: rgba(255,255,255,.54);
  --ink: #0B1730;
  --ink-soft: #4B566C;
  --surface-2: #0D1627;     /* cards sobre essa superfície */
  --borda-sutil: rgba(255,255,255,.08);
  /* Véu claro que levanta os cards do fundo escuro. É o mesmo em toda parte:
     mudou aqui, mudou em todos. */
  --veu-card: linear-gradient(135deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
  --line: rgba(255,255,255,.10);
  --line-lt: #DDE2E8;

  /* --font é o texto corrido e a interface; --font-titulo é a voz dos títulos */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-titulo: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  /* Escala pensada para 100% de zoom em tela de notebook. O corpo fica em
     16px, que é a medida padrão da web: a anterior, de 17px, empurrava tudo
     para cima e fazia o site inteiro parecer ampliado. Os dois tamanhos
     grandes são fluidos, mas com teto: sem ele o título do topo passava de
     56px em tela larga. */
  --fs-xs: .8125rem;                                          /* 13px */
  --fs-sm: .875rem;                                           /* 14px */
  --fs-base: 1rem;                                            /* 16px */
  --fs-md: 1.125rem;                                          /* 18px */
  --fs-lg: 1.375rem;                                          /* 22px */
  --fs-xl: clamp(1.6rem, 1.4vw + 1.1rem, 2.125rem);           /* 26 a 34px */
  --fs-hero: clamp(1.9rem, 1.9vw + 1.15rem, 2.875rem);        /* 30 a 46px */

  --cabecalho: 4.25rem;      /* altura do cabeçalho, usada também no cálculo da primeira tela */
  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(2.75rem, 4.2vw, 3.75rem);   /* 60px em notebook: eram 104px, depois 76px */
  --radius: 14px;
  /* caixa padrão dos ícones de card */
  --icone-caixa: 40px;
  --icone-raio: 10px;
  --icone-tamanho: 20px;
  --icone-fundo: rgba(0,155,58,.12);
}

*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter reserva o espaço da barra de rolagem mesmo quando ela
   não aparece. Sem isso, páginas curtas ficam ~17px mais largas que as
   longas, e o layout inteiro — inclusive o rodapé — desloca entre elas. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem;
  scrollbar-gutter: stable;
  /* Barra de rolagem fina e no tom do site, em vez da barra clara e larga do
     sistema, que destoa de um fundo escuro. Estas duas propriedades são o
     padrão da especificação e valem no Chrome atual e no Firefox. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent; }

/* Mesmo resultado em navegadores que só entendem a forma antiga, como o
   Safari. A borda transparente com background-clip afina o cursor sem
   estreitar a área de clique. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); background-clip: content-box;
  border: 3px solid transparent; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }


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

/* Brilho de fundo que segue o cursor, único em todo o site.
   O raio é fixo em rem, não em porcentagem da tela: assim tem o mesmo
   tamanho em qualquer monitor e em qualquer página. Fica atrás de tudo e
   só aparece nas seções escuras sem fundo próprio. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* foco que segue o cursor */
    radial-gradient(18rem 18rem at var(--mx, 50%) var(--my, 40%), rgba(0,155,58,.07), transparent 72%),
    /* orbe no canto superior esquerdo, no verde da marca */
    radial-gradient(38rem 38rem at -5% -8%, rgba(0,155,58,.10), transparent 68%),
    /* orbe à direita, no turquesa do logotipo oficial */
    radial-gradient(34rem 34rem at 104% 22%, rgba(1,179,168,.08), transparent 68%),
    /* gradiente contínuo do site, por baixo de tudo */
    linear-gradient(180deg, var(--bg-base) 0%, var(--bg-meio) 40%, var(--bg-verde) 70%, var(--bg-base) 100%); }


body {
  margin: 0; overflow-wrap: break-word; font-family: var(--font); font-size: var(--fs-base); line-height: 1.6;
  color: var(--white);
  /* Cor sólida de base. O gradiente contínuo vai na camada fixa body::before:
     um gradiente com background-attachment:fixed direto no body só pintaria a
     altura da viewport, e o resto do documento apareceria branco. */
  background-color: var(--bg-base);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-titulo); line-height: 1.15;
  letter-spacing: -0.02em; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--gold); color: var(--ink); padding: .75rem 1rem; font-weight: 600; text-decoration: none; border-radius: 6px; }
.skip-link:focus { top: 1rem; }

/* Dado ainda não fornecido. Procure "PREENCHER" antes de publicar. */
.pendente { background: rgba(255,223,0,.16); outline: 1px dashed var(--gold); padding: 0 .3em; border-radius: 3px; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .75rem 1.4rem; border-radius: 8px; border: 1.5px solid transparent;
  font: 600 var(--fs-sm)/1.2 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn svg { width: 1.05rem; height: 1.05rem; flex: none; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-hi); }
.btn-outline { border-color: rgba(255,255,255,.3); color: var(--white); }
.btn-outline:hover { border-color: var(--white); }
.btn-dark { background: var(--bg-900); color: var(--white); }
.btn-dark:hover { background: var(--bg-800); }
.btn[disabled] { opacity: .6; cursor: wait; }

/* ---------- Logo ---------- */
/* Logotipo oficial: arquivo único em <img>, com símbolo e marca nominal.
   Proporção 291x89. O tamanho é dado pela LARGURA, com altura automática:
   assim, se o flex do cabeçalho apertar a logo, ela encolhe proporcional
   em vez de achatar. Fixar a altura e deixar a largura em auto distorce. */
.logo { display: inline-flex; align-items: center; color: var(--white); text-decoration: none; flex: none; }
.logo img { width: 7.9rem; height: auto; }

/* ---------- Cabeçalho ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(1,10,23,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 2rem; min-height: var(--cabecalho); }
/* Margem automática dos dois lados: a sobra de espaço se divide igualmente
   entre o logotipo e o menu, e entre o menu e os botões. Com margem só à
   esquerda, toda a sobra ia para um lado e o menu ficava empurrado contra
   os botões, com um vazio grande depois do logotipo. */
.main-nav { margin-inline: auto; }
.main-nav ul { list-style: none; display: flex; gap: 1.75rem; }
.main-nav a { text-decoration: none; font-size: var(--fs-sm); color: var(--text-dim); padding-block: .5rem; white-space: nowrap; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--white); }
.main-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); }
.header-actions { display: flex; align-items: center; gap: 1rem; }
@media (max-width: 360px) {
  .header-actions { gap: .5rem; }
  .lang-btn { padding-inline: 8px; }
  .site-header .logo img { width: 6.6rem; }
}
/* Na barra do cabeçalho o botão e o seletor de idioma têm a mesma altura.
   O botão vinha com 42px numa linha em que o seletor tem 32 e os itens do
   menu 33, e por isso destoava do conjunto. O tamanho de letra não muda:
   o que sobrava era respiro interno. */
.header-actions .btn, .header-actions .lang-btn { min-height: 2.15rem; }
.header-actions .btn { padding: .4rem 1rem; }

/* ---------- Seletor de idioma ---------- */
.lang { position: relative; }

.lang-btn { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  background: transparent; border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  padding: 6px 12px; color: #94A3B8; font: 500 var(--fs-xs)/1 var(--font);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.3); color: var(--white); }

.lang-globo { width: 18px; height: 18px; flex: none; }
.lang-sigla { font-weight: 600; letter-spacing: .04em; }
.lang-seta { width: 12px; height: 12px; flex: none; transition: transform .2s ease; }
.lang-btn[aria-expanded="true"] .lang-seta { transform: rotate(180deg); }

.lang-menu { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 60;
  min-width: 11.5rem; list-style: none; padding: 6px; margin: 0;
  background: #0D1627; border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(4px); visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.lang[data-aberto="true"] .lang-menu { opacity: 1; transform: translateY(0); visibility: visible; }

.lang-menu a { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem;
  border-radius: 7px; text-decoration: none; color: var(--text-dim); font-size: var(--fs-xs);
  transition: background-color .15s ease, color .15s ease; }
.lang-menu a:hover { background: rgba(255,255,255,.06); color: var(--white); }
.lang-menu a span { flex: 1; }
.lang-menu a em { font-style: normal; font-weight: 600; letter-spacing: .05em; color: var(--text-mute); }
.lang-menu a[aria-current="true"] { color: var(--white); font-weight: 600; }
.lang-menu a[aria-current="true"] em { color: var(--white); }


.nav-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--white); width: 2.75rem; height: 2.75rem; border-radius: 8px; cursor: pointer; }
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { display: block; width: 18px; height: 2px; background: currentColor; margin: auto; position: relative; content: ""; }
.nav-toggle-bar::before { position: absolute; top: -6px; }
.nav-toggle-bar::after { position: absolute; top: 6px; }

/* Menu sanduíche. O limite é 1200px porque o menu de 6 itens precisa de
   ~1065px de conteúdo: abaixo disso ele transbordaria e jogaria rolagem
   horizontal na página inteira. */
@media (max-width: 1200px) {
  .header-inner { gap: 1rem; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .main-nav { display: none; position: absolute; inset: 100% 0 auto 0; margin: 0; background: var(--bg-900); border-bottom: 1px solid var(--line); }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; padding: .5rem var(--gutter) 1.25rem; }
  .main-nav a { display: block; padding-block: .9rem; border-bottom: 1px solid var(--line); font-size: var(--fs-base); }
  .main-nav a[aria-current="page"] { box-shadow: none; color: var(--gold); }
  .header-actions { margin-left: auto; }
  .header-actions .btn { display: none; }
}

/* ---------- Pílula (como nos mockups) ---------- */
.pill { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green-lt); border: 1px solid rgba(63,203,114,.45); border-radius: 999px; padding: .4rem .9rem; margin-bottom: 1.4rem; }
.pill-dark { color: var(--green); border-color: rgba(0,155,58,.4); }

/* ---------- Hero ---------- */
/* A primeira tela ocupa a altura util da janela, que e a altura total menos
   a do cabecalho fixo, e centra o conteudo nela. Com isso a secao seguinte
   comeca exatamente na dobra, e nao aparece cortada pela metade. E
   min-height, e nao height: em janela baixa o conteudo cresce em vez de
   ser espremido. O svh e a altura sem as barras do navegador no celular. */
.hero { position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: calc(100vh - var(--cabecalho)); min-height: calc(100svh - var(--cabecalho));
  padding-block: clamp(2.5rem, 4.5vw, 4rem) clamp(3rem, 5vw, 4.5rem);
  /* Sem luz propria. A unica fonte de luz nesta area e o brilho do palco,
     em .podium-stage::before. Antes havia um radial aqui tambem, e os dois
     somados viravam uma mancha esverdeada em vez de iluminacao. */
  background: transparent; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
.hero h1 { font-size: var(--fs-hero); letter-spacing: -.035em; font-weight: 600; }
/* destaque em cor sólida, idêntica à do botão principal */
.hero h1 .l2 { display: block; color: var(--gold); }
.hero-lead { margin-top: 1.4rem; font-size: var(--fs-md); line-height: 1.6; color: var(--text-dim); max-width: 38ch; }
.hero-cta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* palco do cartão (pedestal + chevron) */


/* ---------- Palco do cartão: pódio integrado ao fundo por luz ----------
   Sem caixa em volta. O cartão e o pódio respiram direto sobre o fundo
   escuro; quem cria o ponto focal é uma luz circular difusa atrás. */
.podium-stage { position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; margin-left: auto; max-width: 28rem; width: 100%; }

/* Luz unica da area, ancorada na base do podio e achatada como halo de chao.
   Antes era um circulo centrado atras do cartao, o que criava um borrao no ar
   em vez de luz saindo do pedestal. */
.podium-stage::before { content: ""; position: absolute; top: 74%; left: 50%;
  transform: translate(-50%, -50%); width: 30rem; height: 14rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,155,58,.16) 0%, rgba(0,155,58,.06) 45%, transparent 78%);
  filter: blur(46px); z-index: 0; pointer-events: none;
  animation: pulsarBrilho 9s ease-in-out infinite; }

/* o cartão flutua acima da base */
.floating-card { position: relative; z-index: 3; width: 74%;
  animation: flutuarCartao 6s ease-in-out infinite; }

/* sombra de contato: garante que o cartão pareça apoiado sobre o pódio */
.card-shadow { position: relative; z-index: 2; width: 58%; height: 1.5rem; margin-top: -.6rem;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 70%); }

.podium-base { position: relative; z-index: 1; width: 100%; margin-top: -1.4rem; }
/* O grão do topo do pedômio entra como sobreposição, e não como camada opaca:
   assim ele modula a luz que já existe em vez de clarear a superfície toda.
   A regra fica aqui, e não em atributo style, por causa da CSP. */
.podium-grao { mix-blend-mode: overlay; }
.podium-base svg { width: 100%; height: auto; overflow: visible; }

/* Flutuação e pulso. A regra global de prefers-reduced-motion desliga as duas. */
@keyframes flutuarCartao {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}
@keyframes pulsarBrilho {
  0%, 100% { opacity: .78; scale: 1; }
  50%      { opacity: 1;   scale: 1.03; }
}


/* ---------- Cartão em perspectiva ----------
   O cartão é um container de consulta: todo o texto é medido em "cqw"
   (porcentagem da largura do próprio cartão), então a arte inteira escala
   junto sem precisar de media query. Cada tamanho traz um valor em rem
   antes, como reserva para navegador sem suporte a container queries. */
.card-3d { user-select: none; -webkit-user-select: none; position: relative; width: 100%; aspect-ratio: 85.6 / 53.98; border-radius: 4.2% / 6.6%;
  /* Perspectiva real, como na referência. Os dois ângulos são variáveis:
     o JS as atualiza conforme o mouse, e o cartão pivota sobre o ponto de
     apoio. Sem mouse, ficam nos valores de repouso declarados aqui. */
  --cartao-giro-y: -19deg;
  --cartao-giro-x: 5deg;
  transform: perspective(1100px) rotateY(var(--cartao-giro-y)) rotateX(var(--cartao-giro-x)) rotate(-7deg);
  /* pivô no centro da base: é a "ponta" que encosta no pedestal */
  transform-origin: 50% 100%;
  /* Sem transição enquanto o mouse se move: a 60 fps já é suave, e uma
     transição a cada evento faria o cartão perseguir o cursor com atraso,
     sem nunca chegar ao ângulo pedido. Ela só entra na volta ao repouso. */
  transition: box-shadow .25s ease;
  will-change: transform;
  /* Flutuação lenta. Usa a propriedade "translate", separada de "transform",
     para não brigar com o giro do mouse. A regra global de
     prefers-reduced-motion desliga a animação de quem pede menos movimento. */
  container-type: inline-size;
  /* Relevo do texto gravado. As medidas são em em, e não em px, para o
     relevo crescer junto com a letra: o cartão é dimensionado por container
     query, e com px o relevo ficava grosso no cartão pequeno e sumia no
     grande. A ordem é fio de luz no alto à esquerda, parede escura embaixo à
     direita e projeção difusa sobre o plástico. */
  --relevo-forte:
    -.028em -.028em 0 rgba(255,255,255,.55),
     .032em  .038em 0 rgba(0,0,0,.92),
     .055em  .085em .1em rgba(0,0,0,.6);
  --relevo-suave:
    -.03em -.03em 0 rgba(255,255,255,.45),
     .035em .04em 0 rgba(0,0,0,.85),
     .06em  .085em .09em rgba(0,0,0,.5);
  background:
    /* grão fino da superfície, para a face não parecer um retângulo chapado */
    repeating-linear-gradient(108deg,
      rgba(255,255,255,.016) 0 1px, rgba(0,0,0,.022) 1px 2px, transparent 2px 4px),
    /* reflexo especular diagonal, como plástico polido */
    /* Reflexo metálico: faixa diagonal com queda suave dos dois lados, como
       luz correndo em metal escovado. Um foco radial daria "bola de luz". */
    linear-gradient(104deg,
      transparent calc(var(--cartao-luz-x, 30%) - 38%),
      rgba(255,255,255,.03) calc(var(--cartao-luz-x, 30%) - 20%),
      rgba(255,255,255,.09) calc(var(--cartao-luz-x, 30%) - 8%),
      rgba(255,255,255,.17) calc(var(--cartao-luz-x, 30%) - 1%),
      rgba(255,255,255,.17) calc(var(--cartao-luz-x, 30%) + 1%),
      rgba(255,255,255,.08) calc(var(--cartao-luz-x, 30%) + 9%),
      rgba(255,255,255,.02) calc(var(--cartao-luz-x, 30%) + 22%),
      transparent calc(var(--cartao-luz-x, 30%) + 38%)),
    /* luz fria descendo pela face */
    linear-gradient(190deg, rgba(255,255,255,.08) 0%, transparent 38%),
    /* leve luz da marca no canto superior direito */
    radial-gradient(85% 75% at 100% 0%, rgba(1,179,168,.18), transparent 62%),
    /* corpo azul-marinho com queda para quase preto */
    linear-gradient(142deg, #1B2A47 0%, #0E1A2E 46%, #060A14 100%);
  /* fio dourado na borda, como no cartão impresso */
  border: 1px solid rgba(212,170,99,.55);
  box-shadow:
    /* espessura: o cartão tem corpo, não é uma folha */
    -1px 1px 0 rgba(255,255,255,.07),
    -2px 2px 0 #0C1729,
    -3px 3px 0 #0A1322,
    -4px 4px 0 #070E1B,
    -5px 5px 0 #050A14,
    /* a sombra projetada acompanha a inclinação */
    var(--sombra-x, 0px) var(--sombra-y, 26px) 30px -14px rgba(0,0,0,.95),
    calc(var(--sombra-x, 0px) * 1.8) calc(var(--sombra-y, 26px) * 2) 70px -24px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(212,170,99,.3);
  /* Padding em porcentagem resolve contra a largura do pai. Agora o pai é
     o container de vidro, que tem a mesma largura do cartão, então a conta
     é direta. "cqw" não serve aqui: no próprio elemento-contêiner ele
     cairia para a viewport. Nos descendentes, sim, cqw mede o cartão. */
  padding: 7% 6.5%;
  /* o line-height 1.6 do corpo infla cada linha e estoura a altura do cartão */
  line-height: 1;
  /* a marca d'água sangra para fora e é cortada pela borda, como na impressão */
  overflow: hidden;
  /* o espaço flexível fica ACIMA do número: assim o chip encosta no logo
     e o número desce, sem colar num nem no outro */
  display: grid; grid-template-rows: auto auto 1fr auto auto; row-gap: 0; }

/* Aplicação (chevrons) à direita, com o logotipo à esquerda. O tamanho é
   dado pela ALTURA (o desenho é mais alto que largo), para não haver como
   ultrapassar o cartão; o overflow do cartão corta o que sangra na lateral. */
.card-3d.voltando { transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease; }
/* realce discreto quando o cursor está sobre o cartão */
.podium-stage:hover .card-3d { box-shadow:
    -1px 1px 0 rgba(255,255,255,.07), -2px 2px 0 #0C1729, -3px 3px 0 #0A1322,
    -4px 4px 0 #070E1B, -5px 5px 0 #050A14,
    0 26px 30px -14px rgba(0,0,0,.95), 0 54px 70px -24px rgba(0,0,0,.8),
    0 0 26px rgba(0,155,58,.28),
    inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(212,170,99,.3); }

.card-3d__pattern { position: absolute; right: -6%; top: -4%; height: 108%; width: auto;
  color: rgba(255,255,255,.085); pointer-events: none; }

.card-3d .card-label { justify-self: start; }
/* Marca no cartão: iconografia (símbolo) mais a escrita da logo.
   Diferente do cabeçalho, que usa o lockup fechado em arquivo único. */
.card-3d .card-marca { justify-self: start; display: flex; align-items: center; gap: 2.8cqw; }
.card-3d .card-marca img { width: 15cqw; height: auto; }
/* A escrita usa o degradê da marca, do turquesa ao dourado, correndo na
   diagonal sobre as DUAS linhas — por isso o recorte fica no bloco, e não
   em cada linha. O padding com margem negativa estica a caixa para baixo,
   senão o degradê não alcança o rabo do "g" e a letra some. */
.card-3d .card-marca > span { display: flex; flex-direction: column; line-height: .96;
  font-size: .7rem; font-size: 6.4cqw; font-weight: 600; letter-spacing: -.015em;
  text-transform: lowercase;
  background-image: linear-gradient(118deg, #17BEBB 0%, #46C295 30%, #8AC765 58%, #D8CE46 80%, #F5D93C 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .16em; margin-bottom: -.16em;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }

/* Chip EMV. O desenho segue o contato real: duas colunas de trilhas
   separadas por um sulco central, cortadas por dois sulcos horizontais, e um
   núcleo retangular no meio que interrompe o sulco vertical. O contorno
   escuro faz o metal parecer embutido no plástico, e não colado por cima. */
.chip { width: 14.5%; aspect-ratio: 1.3; border-radius: 14%; align-self: start; margin-top: 6.4cqw;
  position: relative; overflow: hidden;
  background:
    linear-gradient(126deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(130deg, #FBF0CE 0%, #E3C57C 30%, #B08D42 58%, #8A6C2E 74%, #F2DEA6 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.55),
    0 1px 2px rgba(0,0,0,.6); }
/* sulcos horizontais, com o fio de luz na aresta de baixo */
.chip::before, .chip::after { content: ""; position: absolute; left: 0; right: 0; height: 7%;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.45) 62%, rgba(255,255,255,.3) 100%); }
.chip::before { top: 26%; }
.chip::after  { top: 66%; }
/* sulco vertical e o núcleo, que o interrompe no meio */
.chip i { position: absolute; inset: 0; }
.chip i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 46%; width: 8%;
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.45) 62%, rgba(255,255,255,.28) 100%); }
.chip i::after { content: ""; position: absolute; left: 24%; right: 24%; top: 33%; bottom: 24%;
  border-radius: 10%;
  background: linear-gradient(140deg, #F4E2AE 0%, #C7A45C 55%, #9C7A36 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }

/* Número, nome e validade em alto-relevo.
   O relevo vem de três sombras: um fio de luz em cima à esquerda (a fonte
   de luz), uma sombra dura logo abaixo à direita (a parede do relevo) e
   uma sombra difusa (a projeção sobre o plástico). */
.card-num { align-self: end; font-size: .78rem; font-size: 5.7cqw; font-weight: 600;
  letter-spacing: .055em; word-spacing: .34em; color: #F4E6BE; white-space: nowrap;
  font-family: var(--font);
  /* dígitos de largura fixa: em um cartão os quatro grupos precisam ficar
     alinhados entre si, e por padrão a fonte usa largura variável */
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  text-shadow: var(--relevo-forte); }

.card-name { margin-top: 3.4cqw; font-size: .58rem; font-size: 3.7cqw; font-weight: 600;
  letter-spacing: .1em; color: #EFE0B8; text-transform: uppercase; white-space: nowrap;
  text-shadow: var(--relevo-suave); }
.card-valid { display: flex; align-items: baseline; gap: 1.8cqw; margin-top: 2.4cqw; white-space: nowrap; }
.card-valid span { font-size: .4rem; font-size: 2.3cqw; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.62); }
.card-valid strong { font-size: .52rem; font-size: 3.4cqw; font-weight: 600; color: #EFE0B8;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  text-shadow: var(--relevo-suave); }

.card-label { font-size: .7rem; font-size: 3cqw; letter-spacing: .14em; color: rgba(255,255,255,.55); text-transform: uppercase; }

@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ---------- Faixa branca de acessos (4 colunas) ---------- */
.strip { background: transparent; color: var(--white); }
.strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strip-item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 2.2rem 1.6rem; }
.strip-item > div { display: flex; flex-direction: column; }
.strip-item + .strip-item { border-left: 1px solid var(--borda-sutil); }
.strip-item > svg { width: 2.6rem; height: 2.6rem; color: var(--green-lt); }
.strip-item h3 { font-size: var(--fs-base); margin-bottom: .4rem; }
.strip-item p { font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.55; }
/* Padrao do site: o link de continuidade fica sempre colado na base do bloco,
   entao os links de uma mesma linha ficam alinhados entre si mesmo quando os
   textos acima tem numero de linhas diferente. O padding garante o respiro
   minimo quando o texto preenche o bloco e nao sobra folga. */
.more { display: inline-flex; align-items: center; align-self: start; gap: .4rem;
  margin-top: auto; padding-top: .8rem; font-size: var(--fs-xs); font-weight: 600; color: var(--green-lt); text-decoration: none; }
.more svg { width: .95rem; height: .95rem; }
.more:hover { text-decoration: underline; }
@media (max-width: 980px) { .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .strip-item:nth-child(3) { border-left: 0; } .strip-item:nth-child(n+3) { border-top: 1px solid var(--line-lt); } }
@media (max-width: 560px) { .strip-grid { grid-template-columns: 1fr; } .strip-item + .strip-item { border-left: 0; border-top: 1px solid var(--line-lt); } }

/* ---------- Faixa verde com pilares ---------- */
/* O verde da marca vira um véu que nasce e desaparece, em vez de um bloco
   sólido com aresta. Mantém a presença da marca sem corte visível. */
.band { background: linear-gradient(180deg, transparent 0%, rgba(10,42,36,.75) 22%, rgba(10,42,36,.75) 78%, transparent 100%);
  padding-block: clamp(4rem, 7vw, 5.5rem); }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
/* Mesmo padrao dos demais blocos: o conteudo comeca no topo. Com o
   alinhamento central, um pilar de texto curto descia em relacao aos
   vizinhos e os titulos da linha ficavam desencontrados. */
.pillar { display: flex; gap: 1rem; align-items: flex-start; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius); padding: 1.75rem; }
.pillar > svg { width: 2.6rem; height: 2.6rem; flex: none; color: var(--green-lt); }
.pillar:nth-child(2) > svg, .pillar:nth-child(4) > svg { color: var(--gold); }
.pillar strong { display: block; font-size: var(--fs-base); font-weight: 600; line-height: 1.2; }
.pillar span { display: block; margin-top: .2rem; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-dim); }
@media (max-width: 980px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }

/* ---------- Bloco duplo (claro + CTA escuro) ---------- */
/* Dois cards lado a lado, de mesmo peso. Antes o primeiro era mais largo
   porque abrigava uma foto ao lado do texto. */
.panel-light { background: var(--veu-card);
  border: 1px solid var(--borda-sutil); color: var(--white); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden; }
.panel-light-body { padding: clamp(1.75rem, 3.5vw, 3rem); }
.panel-light .kicker { font-size: var(--fs-xs); color: var(--green-lt); font-weight: 600; margin-bottom: .5rem; }
.panel-light h3 { font-size: var(--fs-lg); margin-bottom: .8rem; }
/* Com o painel ocupando a largura toda, o titulo e o texto de introducao
   ganham um limite de leitura. Sem ele a linha passaria de 130 caracteres.
   A lista de verificacoes nao entra nisso porque ja se divide em duas
   colunas, que por si so encurtam as linhas. */
.panel-light p { font-size: var(--fs-sm); color: var(--text-dim); }
.panel-light h3, .panel-light-body > p { max-width: 62ch; }
.checks { list-style: none; margin-top: 1.4rem; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 2.5rem; }
.checks li { display: flex; gap: .6rem; font-size: var(--fs-sm); }
.checks svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .2rem; color: var(--green-lt); }
@media (max-width: 720px) { .checks { grid-template-columns: 1fr; } }

/* ---------- Seções genéricas ---------- */
.section { padding-block: var(--section); }
.section-light { background: transparent; color: var(--white); }
.section-deep { background: transparent; }
.head { max-width: 46rem; margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }
.head h2 { font-size: var(--fs-xl); }
.head p { margin-top: .6rem; font-size: var(--fs-md); line-height: 1.5; color: var(--text-dim); }
.section-light .head p { color: var(--text-dim); }

/* passos (sequência real) */
/* Linha do tempo das etapas.
   A linha não é um elemento só atravessando tudo: cada etapa desenha o
   trecho que vai do próprio círculo até o círculo seguinte, e a última não
   desenha nada. Assim a linha nunca passa por dentro dos círculos, e não
   é preciso dar fundo sólido a eles, o que abriria um disco de cor errada
   sobre o gradiente contínuo do site. */
.steps { --steps-gap: 1.25rem; --steps-bolha: 44px;
  list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--steps-gap); }
.steps li { position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; }
.steps li::after { content: ""; position: absolute; z-index: 0; height: 2px;
  top: calc(var(--steps-bolha) / 2 - 1px);
  left: calc(50% + var(--steps-bolha) / 2);
  width: calc(100% + var(--steps-gap) - var(--steps-bolha));
  background: rgba(0,155,58,.32); }
.steps li:last-child::after { content: none; }

.steps-icone { position: relative; z-index: 1; flex: none;
  width: var(--steps-bolha); height: var(--steps-bolha); border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--green-lt); color: var(--green-lt); }
.steps-icone svg { width: 1.3rem; height: 1.3rem; }
/* a última etapa é o resultado, e não mais um passo: círculo cheio no dourado */
.steps li:last-child .steps-icone { background: var(--gold); border-color: var(--gold);
  color: var(--ink); }

.steps-rotulo { display: block; margin-top: .95rem; font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.steps h3 { font-size: var(--fs-base); margin-top: .35rem; margin-bottom: .4rem; }
.steps p { font-size: var(--fs-sm); color: var(--text-dim); }
.section-light .steps p { color: var(--text-dim); }

/* No celular a linha vira vertical, à esquerda, e o texto fica ao lado. */
@media (max-width: 980px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li { display: grid; grid-template-columns: var(--steps-bolha) 1fr;
    column-gap: 1rem; padding-block: 1rem; text-align: left; align-items: start; }
  .steps-icone { grid-row: span 3; }
  .steps li::after { top: calc(1rem + var(--steps-bolha));
    left: calc(var(--steps-bolha) / 2 - 1px); width: 2px;
    height: calc(100% - var(--steps-bolha)); }
  .steps-rotulo { margin-top: 0; }
  .steps h3 { margin-top: .2rem; }
}

/* Texto corrido de Sobre nós. A seção já foi duas colunas, texto mais
   imagem; a imagem saiu e sobrou o texto. Sem limite de medida a linha
   passaria de 130 caracteres na largura cheia do conteúdo. */
.split-text p { color: var(--text-dim); }
.split-text p + p { margin-top: 1rem; }
.texto-solo { max-width: 62ch; }

/* ---------- Caixa padrão de ícone ----------
   Quadrado de 40px, cantos de 10px, fundo no verde da marca a 12% e ícone de
   20px no verde claro. A cor vem por currentColor, então o mesmo símbolo do
   sprite serve em qualquer contexto. */
.opcao-icone { display: inline-grid; place-items: center; flex: none;
  width: var(--icone-caixa); height: var(--icone-caixa);
  border-radius: var(--icone-raio); background: var(--icone-fundo);
  color: var(--green-lt); }
.opcao-icone svg { width: var(--icone-tamanho); height: var(--icone-tamanho); }

/* ---------- Tipo OPÇÃO ----------
   Comparação de caminhos. A seção usava o .split, que é de texto mais imagem:
   ele tem colunas de larguras diferentes e centraliza cada coluna
   verticalmente, então os cards saíam desiguais e desalinhados. Aqui as duas
   colunas são iguais e os cards esticam até a mesma altura, alinhados pelo
   topo. */
.opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; align-items: stretch; }
.opcao { display: flex; flex-direction: column; align-items: stretch;
  background: var(--surface-2); border: 1px solid var(--borda-sutil);
  border-radius: 12px; padding: 1.1rem 1.2rem; }

.opcao-cabeca { display: flex; align-items: center; gap: .65rem; margin-top: .9rem; }
.opcao-rotulo { font-size: .7rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-mute); }
.opcao h3 { font-size: var(--fs-base); margin-top: .75rem; margin-bottom: .3rem; }
.opcao > p { font-size: var(--fs-sm); color: var(--text-dim); }

/* a lista fica sempre em uma coluna: em duas, as frases quebravam no meio */
.opcao-itens { list-style: none; display: grid; grid-template-columns: 1fr;
  gap: .45rem; margin-top: auto; padding-top: .9rem; }
.opcao-itens li { display: flex; gap: .55rem; font-size: var(--fs-sm); }
.opcao-itens svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .15rem;
  color: var(--green-lt); }

/* ---------- Visual concreto no topo do card ---------- */
/* A altura mínima é igual nos dois cards. Sem ela, o exemplo de código, que
   tem três linhas, empurrava rótulo e título para baixo, e os dois cards
   deixavam de se comparar linha a linha. */
.opcao-visual { width: 100%; min-height: 5.25rem; border-radius: 9px;
  padding: .7rem .8rem; display: flex; flex-direction: column; justify-content: center;
  gap: .5rem; background: rgba(255,255,255,.03); }
.opcao-visual-rotulo { display: block; font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-mute); }

.opcao-codigo { gap: .3rem; }
.opcao-codigo code { display: block; font-size: .78rem; line-height: 1.45;
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  color: var(--text-dim); }
.opcao-codigo code b { font-weight: 600; color: var(--green-lt); }
.opcao-codigo .opcao-resposta b { color: var(--gold); }

.opcao-cores { gap: .7rem; }
.opcao-amostras { display: inline-flex; gap: .4rem; flex: none; }
.opcao-amostras i { width: 1.6rem; height: 1.6rem; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.12); }
/* As três cores da paleta oficial do site: verde e amarelo da marca, mais o
   dourado dos botões. O turquesa que estava aqui era um hexadecimal cravado e
   nem era o do logotipo oficial; além disso, a pendência C registra que as
   cores do logotipo ainda não foram conciliadas com as do site, então ele
   ficaria tomando partido numa decisão que é da equipe. */
.amostra-a { background: var(--green); }
.amostra-b { background: var(--yellow); }
.amostra-c { background: var(--gold); }

@media (max-width: 900px) { .opcoes { grid-template-columns: 1fr; } }

/* lista de benefícios */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.feature { background: var(--veu-card);
  border: 1px solid var(--borda-sutil); border-radius: 12px; padding: 1.25rem 1.3rem;
  display: flex; flex-direction: column; }
.section-light .feature { background: var(--veu-card); border-color: var(--borda-sutil); }
.feature > svg { width: 1.75rem; height: 1.75rem; color: var(--green-lt); margin-bottom: .65rem; }
.section-light .feature > svg { color: var(--green-lt); }
.feature h3 { font-size: var(--fs-base); margin-bottom: .3rem; }
/* Etiqueta ao lado do título, para a sigla que qualifica o card sem
   disputar peso com ele. Fica no fluxo do próprio título, então
   acompanha a quebra de linha em tela estreita. */
.etiqueta { display: inline-block; margin-left: .5rem; vertical-align: middle;
  padding: .1rem .4rem; border-radius: 5px; font-size: .62rem; font-weight: 600;
  letter-spacing: .08em; color: var(--text-mute);
  background: rgba(255,255,255,.06); border: 1px solid var(--borda-sutil); }
.feature p { font-size: var(--fs-sm); color: var(--text-dim); }
.section-light .feature p { color: var(--text-dim); }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } }
/* variante de 4 colunas, mesma convenção de .steps-4 */
.feature-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .feature-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feature-grid-4 { grid-template-columns: 1fr; } }

/* dados institucionais */
.facts { margin: 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 13rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: var(--fs-sm); color: #94A3B8; }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 640px) { .facts div { grid-template-columns: minmax(0, 1fr); gap: .15rem; } }

/* FAQ */
.faq { max-width: 52rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 1.3rem 3rem 1.3rem 0; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .5rem; top: 50%; width: .7rem; height: .7rem; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding-bottom: 1.4rem; color: var(--text-dim); max-width: 65ch; }

/* ---------- Topo de páginas internas ---------- */
/* Topo das páginas internas: só o brilho da marca, sem cor de fundo própria,
   para o gradiente contínuo do site atravessar sem corte. */
.page-top { position: relative; overflow: hidden;
  padding-block: clamp(2.75rem, 4.5vw, 4rem) clamp(1.75rem, 2.5vw, 2.25rem);
  background: radial-gradient(50% 80% at 90% 0%, rgba(0,155,58,.14), transparent 70%); }
.page-top h1 { font-size: var(--fs-xl); max-width: 22ch; }
.page-top p { margin-top: 1rem; font-size: var(--fs-md); color: var(--text-dim); max-width: 44ch; }

/* Topo de duas colunas, com figura à direita. Usado onde o topo absorve o
   primeiro bloco de texto da página, em vez de ter uma seção logo abaixo
   repetindo quase o mesmo título. Aqui o espaçamento volta a ser igual em
   cima e embaixo, porque não há seção seguinte para somar respiro. */
.page-top-figura { padding-block: clamp(2.75rem, 4.5vw, 4rem); }
.topo-grid { display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.topo-texto .pill { margin-bottom: 1rem; }
.topo-texto h1 { max-width: 16ch; }
.topo-lead { margin-top: 1rem; font-size: var(--fs-md); color: var(--text-dim); max-width: 46ch; }
/* a lista do painel da home usa duas colunas; aqui são três itens em coluna */
.topo-texto .checks { grid-template-columns: 1fr; margin-top: 1.4rem; }
.topo-texto .hero-cta { margin-top: 1.8rem; }

/* A foto do cartão não tem canal alfa, porque o arquivo de origem é JPEG.
   Em vez de disfarçar a moldura por CSS, o fundo da própria imagem foi
   reconstruído: o vinhete e o brilho verde dela foram achatados e trocados
   pelo tom do fundo do site medido nesta área, (9, 20, 30), preservando a
   sombra que os cartões projetam. Com os dois fundos na mesma cor, basta
   tirar o arredondamento e a sombra do contêiner para a caixa desaparecer. */
.topo-figura { display: flex; justify-content: center; }
.topo-figura img { width: 100%; max-width: 24rem; height: auto;
  border-radius: var(--radius); box-shadow: none; }

@media (max-width: 900px) {
  .topo-grid { grid-template-columns: 1fr; }
  .topo-texto h1 { max-width: 20ch; }
  .topo-figura img { max-width: 17rem; }
}

/* ---------- Contato ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.channels { list-style: none; border-top: 1px solid var(--line); }
.channels li { padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.channels strong { display: block; font-weight: 600; }
.channels .val { display: block; margin: .2rem 0; font-size: var(--fs-md); color: var(--gold);
  text-decoration: none; overflow-wrap: anywhere; }
.channels .note { font-size: var(--fs-sm); color: var(--text-mute); }
.channels .wa { display: inline-flex; align-items: center; gap: .5rem; }
.channels .wa svg { width: 1.2rem; height: 1.2rem; }
.warning { margin-top: 1.5rem; font-size: var(--fs-sm); color: var(--text-dim); border-left: 3px solid var(--gold); padding-left: 1rem; }

.form { background: var(--surface-2); border: 1px solid rgba(255,255,255,.1); color: var(--white); border-radius: var(--radius); padding: clamp(1.5rem, 3.5vw, 2.4rem); }
.form h2 { font-size: var(--fs-lg); margin-bottom: .4rem; }
.form > p { font-size: var(--fs-sm); color: var(--text-dim); margin-bottom: 1.5rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field label { font-size: var(--fs-sm); font-weight: 500; }
.field input, .field textarea { font: inherit; font-size: var(--fs-sm); color: var(--white);
  background: #1E293B; border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  padding: .75rem .9rem; width: 100%; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.38); }
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(228,189,74,.22); }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--text-dim); margin: .4rem 0 1.4rem; }
.check input { margin-top: .2rem; width: 1rem; height: 1rem; flex: none; accent-color: var(--green); }
.recaptcha-note { margin-top: 1rem; font-size: .72rem; color: var(--ink-soft); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 1rem; font-size: var(--fs-sm); color: #F87171; }
.grecaptcha-badge { visibility: hidden; } /* aviso textual exibido junto ao formulário */
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }

/* ---------- Documentos legais ---------- */
.doc { background: transparent; color: var(--white); padding-block: clamp(3rem, 6vw, 5rem); }
.doc-body { max-width: 46rem; }
.doc-body h2 { font-size: var(--fs-lg); margin: 2.8rem 0 1rem; }
.doc-body h2:first-of-type { margin-top: 1.5rem; }
.doc-body p, .doc-body li { color: var(--text-dim); }
.doc-body p + p { margin-top: 1rem; }
.doc-body ul { padding-left: 1.25rem; margin: 1rem 0; display: grid; gap: .5rem; }
.doc-note { background: rgba(255,255,255,.05); border-left: 4px solid var(--gold); color: var(--white); padding: 1rem 1.25rem; border-radius: 0 8px 8px 0; font-size: var(--fs-sm); }

/* ---------- Página simples ---------- */
.simple { min-height: 62vh; display: grid; grid-template-columns: minmax(0, 1fr);
  place-items: center; text-align: center; padding: 4rem var(--gutter); }
.simple h1 { font-size: var(--fs-xl); margin-bottom: 1rem; }
.simple p { color: var(--text-dim); max-width: 46ch; margin: 0 auto 2rem; overflow-wrap: anywhere; }
.simple .alt { margin-top: 2rem; font-size: var(--fs-sm); color: var(--text-mute); }
.simple .alt a { color: var(--text-dim); }

/* ---------- Rodapé ---------- */
/* fio de luz no topo, com halo */
/* 2px com opacidade baixa, de proposito.
   O topo do rodape cai numa posicao fracionaria que muda conforme a altura
   do conteudo de cada pagina: 0,625 em Contato, 0,617 em Como funciona,
   0,895 em Sobre nos. Com 1px, a linha fica repartida entre duas fileiras de
   pixels e cada uma recebe metade da cor, entao ela some em umas paginas e
   aparece em outras. Com 2px ela sempre cobre uma fileira inteira.
   A opacidade caiu de 0,7 para 0,45 para compensar a espessura: a
   quantidade de cor na tela fica parecida com a de um tracado fino, mas
   uniforme em qualquer pagina. */
.footer-glow-line { position: absolute; top: 0; left: 0; right: 0; margin-inline: auto;
  /* Mesma largura útil do .wrap: o fio começa e termina exatamente onde o
     conteúdo do rodapé começa e termina, em qualquer largura de tela. Antes
     eram 5% de recuo de cada lado, que não acompanhavam o conteúdo e
     deixavam o traçado curto ou comprido demais dependendo da tela.
     A centralização é por margem automática, e não por left de 50% com
     translateX. As duas centralizam igual, mas a margem não cria uma caixa
     que avança para fora da página antes de ser transformada. */
  width: calc(min(100%, var(--wrap)) - var(--gutter) * 2); height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,155,58,.45) 30%,
    rgba(228,189,74,.45) 70%, transparent 100%);
  box-shadow: 0 0 10px rgba(0,155,58,.22); }

/* chamada final, antes das colunas */
.footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  background: linear-gradient(135deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.012) 100%);
  border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  padding: clamp(1.1rem, 2.4vw, 1.55rem) clamp(1.3rem, 2.8vw, 1.9rem); margin-bottom: 2.1rem; }
.footer-cta h2 { color: var(--white); font-size: var(--fs-base); font-weight: 600; margin-bottom: .3rem;
  letter-spacing: -.01em; text-transform: none; padding-top: 0; }
.footer-cta h2::before { display: none; }
.footer-cta p { color: var(--text-mute); font-size: var(--fs-xs); }
.footer-cta .btn { flex: none; }

/* selo de proteção de dados: afirmação que o site já sustenta */
.footer-selo { display: inline-flex; align-items: center; gap: .45rem; margin-top: .95rem;
  padding: 5px 11px; border-radius: 20px;
  background: rgba(0,155,58,.08); border: 1px solid rgba(0,155,58,.22);
  font-size: .78rem; font-weight: 500; color: var(--green-lt); }
.footer-selo svg { width: .95rem; height: .95rem; flex: none; }

@media (max-width: 760px) {
  .footer-cta { flex-direction: column; align-items: flex-start; }
}

/* Fundo OPACO e uniforme: antes o topo era transparente e deixava passar a
   seção anterior, que muda de página para página (faixa verde, seção
   profunda, documento). Por isso o rodapé parecia diferente em cada uma.
   Agora ele tem base própria e fica idêntico em todo o site. */
.site-footer { position: relative; background: #04060B;
  color: var(--text-dim); padding-block: 3rem 1.4rem; font-size: var(--fs-sm); }

/* Faixa de transição que sobe por cima da seção anterior e a dissolve na cor
   do rodapé. Mata o corte seco sem deixar o rodapé refém do que vem antes. */
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -5rem;
  height: 5rem; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,6,11,0) 0%, rgba(4,6,11,.55) 45%, #04060B 100%); }

/* Brilho difuso atrás do rodapé, para ele não parecer colado.
   A largura é limitada à da própria página: com os 46rem fixos, em tela
   estreita a borda do brilho passava do lado direito do documento e o
   navegador abria uma barra de rolagem horizontal em todas as páginas. */
.site-footer::after { content: ""; position: absolute; z-index: -1; left: 50%; top: -6rem;
  transform: translateX(-50%); width: min(46rem, 100%); height: 22rem; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,155,58,.09), transparent 72%); }

.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.6rem);
  padding-bottom: 1.9rem; }

.footer-brand .logo img { width: 7.1rem; }
.footer-brand p { margin-top: .85rem; max-width: 34ch; color: var(--text-mute); line-height: 1.55;
  font-size: var(--fs-xs); }

/* título de coluna: pequeno, espaçado, com um traço dourado curto acima */
.footer-grid h2 { position: relative; color: var(--white); font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: .85rem; padding-top: .7rem; }
.footer-grid h2::before { content: ""; position: absolute; top: 0; left: 0; width: 1.6rem; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--gold), rgba(228,189,74,0)); }

.footer-grid ul { list-style: none; display: grid; gap: .45rem; }
.footer-grid a { text-decoration: none; color: var(--text-mute); font-size: var(--fs-xs);
  display: inline-block; transition: color .16s ease, transform .16s ease; }
.footer-grid a:hover { color: var(--white); transform: translateX(3px); }

/* barra inferior: dados da empresa separados do resto */
.disclosure { padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.07);
  font-size: var(--fs-xs); line-height: 1.6; color: var(--text-mute); }
.disclosure p + p { margin-top: .7rem; }


@media (max-width: 860px) {
  .site-footer { padding-block: 3.5rem 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
}
.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .steps-4 { grid-template-columns: 1fr; } }
.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .steps-3 { grid-template-columns: 1fr; } }
/* duas colunas, para seções com dois cards */
.feature-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .feature-grid-2 { grid-template-columns: 1fr; } }

/* A barra de rolagem da página pertence à raiz do documento e sempre ocupa a
   altura inteira da janela, passando ao lado do cabeçalho. Não existe
   propriedade que a recue. Para ela começar abaixo do menu, quem rola precisa
   ser um contêiner que fica abaixo dele: o .rolagem, que envolve o conteúdo e
   o rodapé.

   Só no desktop. No celular, quando a rolagem acontece num contêiner interno
   em vez da própria página, a barra de endereço do navegador para de se
   recolher e o usuário perde altura de tela em toda a navegação. A consulta
   exige ponteiro fino, então aparelho de toque continua com a rolagem nativa
   mesmo em tela larga. */
@media (min-width: 900px) and (pointer: fine) {
  /* A reserva de barra na raiz existe para páginas curtas e longas terem a
     mesma largura. Aqui quem rola é o .rolagem, que faz essa reserva por
     conta própria, então a da raiz vira uma faixa vazia ao lado do conteúdo,
     do lado de fora do contêiner, e aparece como uma segunda barra. */
  html { scrollbar-gutter: auto; }
  body { height: 100vh; height: 100dvh; overflow: hidden;
    display: flex; flex-direction: column; }
  /* o cabeçalho sai da área que rola e vira um item fixo da coluna, então não
     precisa mais ser sticky para continuar visível */
  .site-header { position: static; flex: none; }
  /* min-height zero é o que permite o item encolher dentro do flex e, com
     isso, criar a própria área de rolagem em vez de esticar a página */
  .rolagem { flex: 1 1 auto; min-height: 0; overflow-y: auto;
    scrollbar-gutter: stable; scroll-behavior: smooth; scroll-padding-top: 1rem;
    /* scrollbar-width e scrollbar-color não são herdados, então a barra fina
       declarada no html não alcança este contêiner e ele voltaria à barra
       larga do sistema */
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
}
@media (prefers-reduced-motion: reduce) { .rolagem { scroll-behavior: auto; } }

/* ---------- Entrada da linha do tempo das etapas ----------
   O estado escondido depende da classe .js-anima, posta pelo main.js. Sem
   JavaScript ela não existe e o bloco aparece inteiro, sem depender de nada.
   Só opacidade e transformação, que o celular compõe sem repintar. */
.js-anima .steps li > * { opacity: 0; transform: translateY(12px); }
/* o traço da linha fica no li, e por isso o li em si nunca some: quem some
   são os filhos dele. Assim a linha pode se desenhar antes das etapas. */
.js-anima .steps li::after { transform: scaleX(0); transform-origin: left center; }

.js-anima .steps.revelado li > * { opacity: 1; transform: none;
  transition: opacity .8s ease, transform .8s ease; }
.js-anima .steps.revelado li::after { transform: scaleX(1);
  transition: transform .3s linear; }

/* As etapas entram em sequência, a 0,25s uma da outra, e a linha acompanha,
   com cada trecho levando 0,3s. Em cinco etapas são quatro trechos, então a
   linha inteira se desenha em 1,2s e o "Resultado" é o último a aparecer,
   logo depois de a linha chegar nele. */
.js-anima .steps.revelado li:nth-child(1) > * { transition-delay: 0s; }
.js-anima .steps.revelado li:nth-child(2) > * { transition-delay: .25s; }
.js-anima .steps.revelado li:nth-child(3) > * { transition-delay: .5s; }
.js-anima .steps.revelado li:nth-child(4) > * { transition-delay: .75s; }
.js-anima .steps.revelado li:nth-child(5) > * { transition-delay: 1s; }
.js-anima .steps.revelado li:nth-child(1)::after { transition-delay: 0s; }
.js-anima .steps.revelado li:nth-child(2)::after { transition-delay: .3s; }
.js-anima .steps.revelado li:nth-child(3)::after { transition-delay: .6s; }
.js-anima .steps.revelado li:nth-child(4)::after { transition-delay: .9s; }

/* No celular a linha é vertical, então ela se desenha de cima para baixo. */
@media (max-width: 980px) {
  .js-anima .steps li::after { transform: scaleY(0); transform-origin: center top; }
  .js-anima .steps.revelado li::after { transform: scaleY(1); }
}

/* Quem pede menos movimento vê tudo direto, inclusive antes de a seção
   entrar na tela. A regra global já desliga as transições; esta garante que
   nada fique preso no estado escondido. */
@media (prefers-reduced-motion: reduce) {
  .js-anima .steps li > * { opacity: 1; transform: none; }
  .js-anima .steps li::after { transform: none; }
}