/* === FONTES DA CASA, SERVIDAS POR NOS MESMOS =========================
   Antes o site pedia Poppins e Roboto ao Google a cada visita: duas
   conexoes externas antes de o texto poder aparecer, e o endereco IP de
   quem visita indo para um terceiro sem consentimento — o que a propria
   politica de cookies promete que nao acontece.
   Agora os cinco arquivos moram em assets/fonts (82 KB no total, woff2,
   subconjunto latino: o mesmo que o Google entregava para estas paginas).
   font-display:swap mantem o texto legivel enquanto a fonte chega.
   As faces "Fallback" existem para o INSTANTE do swap: sao a fonte do
   sistema com as medidas da nossa, calculadas a partir da largura real
   de uma frase do site. Sem elas, a troca empurra a pagina e conta CLS.
   ==================================================================== */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;
  src:url('assets/fonts/roboto-300.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/roboto-400.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/roboto-500.woff2') format('woff2')}
@font-face{font-family:'Poppins Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:111.4%;ascent-override:94.2%;descent-override:31.4%;line-gap-override:9.0%}
@font-face{font-family:'Roboto Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:99.4%;ascent-override:93.4%;descent-override:24.6%;line-gap-override:0%}

/* O PESO, DE NOVO — AGORA EM TODA PARTE.
   O ajuste dos titulos parou nos titulos: etiquetas, numeros grandes,
   cabecalhos de tabela, abas e botoes continuavam em 600 e 700. Numa
   tela cheia, o que pesa nao e um titulo isolado — e a soma. 500 passa
   a ser o unico peso de destaque da casa: separa do texto corrido sem
   engrossar. Nada acima de 500.
   O <b>, o <strong> e o <th> entram na regra: sem isso eles herdam o
   700 do navegador e reabrem pela porta dos fundos o peso que acabou
   de sair pela frente.
   E como 600 e 700 sairam do CSS, saem tambem do pedido ao Google
   Fonts: duas fontes a menos para baixar em cada pagina. */
b,strong,th{font-weight:500}
/* ==========================================================================
   REGRA Pilot — folha de estilo única
   Tema claro: branco, azul REGRA e dourado.
   Cores oficiais extraídas do logo:
     navy #001B33 · ouro #E8B118 -> #D0821C · off-white #FAFDFD
   Para trocar a identidade, mexa apenas no bloco :root.
   ========================================================================== */

:root{
  /* --- azul --- */
  --navy:#001B33;
  --navy-800:#0A2A45;
  --navy-600:#2B4A66;
  --navy-300:#7C93A6;

  /* --- dourado --- */
  --gold:#E8B118;
  --gold-mid:#D9A21C;
  --gold-deep:#D0821C;
  --gold-text:#96690C;              /* dourado escuro: legível sobre branco */
  --gold-grad:linear-gradient(135deg,#E8B118 0%,#E4A521 48%,#D0821C 100%);
  --gold-soft:rgba(232,177,24,.12);

  /* --- neutros --- */
  --white:#FFFFFF;
  --paper:#F7F9FB;
  --paper-2:#EEF3F7;
  --text:#12283C;
  --text-muted:#4E6478;
  --text-faint:#7C93A6;
  --line:#E2EAF0;
  --line-strong:#CBD9E4;

  --shadow-sm:0 2px 10px rgba(0,27,51,.05);
  --shadow-md:0 12px 34px rgba(0,27,51,.09);
  --shadow-lg:0 26px 60px rgba(0,27,51,.14);

  --max:1180px;
  --pad:26px;
  /* O ARREDONDAMENTO DA CASA: 10px, e nao "cada um o seu".
     Pedido dela, com o botao "Get a demo" como referencia. Vale para
     TUDO em que se clica e para as abas: botoes, abas do fluxo, setas,
     o botao flutuante, o menu de idioma, as perguntas do FAQ.
     Ficam de fora, de proposito, tres coisas que nao sao botao:
     as bolinhas do slideshow, o numero redondo dentro da aba, e a
     chave liga-desliga do painel de cookies — uma chave e pilula por
     natureza, e quadrada ela deixa de parecer uma chave. */
  --r-btn:10px;
  --r-card:14px;
  /* A FITA DO TOPO DOS QUADROS: uma espessura e uma cor, para o site e o
     app. A referencia que ela mandou em 19/09/2026 era um cartao com uma
     borda grossa colorida num lado, que entra na curva do canto e vai
     afinando ate sumir. Ela quis o mesmo acabamento, em navy, no TOPO de
     todo quadro. 4px e a espessura da referencia; a do painel era 3. */
  --fita:4px;
  --r-lg:20px;

  --font-head:'Poppins','Poppins Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Roboto','Roboto Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --ease:cubic-bezier(.22,.68,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-head);font-weight:500;line-height:1.15;letter-spacing:-.02em;margin:0;color:var(--navy)}
p{margin:0}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:110px 0}

/* ================= SEPARAR AS SECOES =================
 * O site tinha 13.000px de altura e duas faixas escuras: uma nos
 * primeiros 7% e outra nos ultimos 4%. Entre elas, doze mil pixels de
 * um campo palido so. As secoes claras se distinguiam apenas por
 * #F7F9FB contra #FFFFFF — tres por cento de diferenca, que ninguem
 * enxerga rolando a pagina. E duas delas (preco e perguntas, 4.300px
 * juntas) tinham o MESMO fundo, encostadas, sem nada entre as duas.
 * Nao era falta de beleza; era falta de borda.
 *
 * Tres tons em vez de dois, e nenhum encosta no igual:
 *   branco · navy · branco · fundo · branco · NAVY · branco · papel ·
 *   branco · navy
 * Agora ha tres ancoras escuras espalhadas — 7%, 55% e 96% da pagina —
 * em vez de duas nas pontas.
 */
.section{border-top:1px solid var(--line)}
.section.alt{background:var(--paper)}
/* O tom mais fundo fica na MAIOR secao (3.400px, um quarto do site):
   a que mais precisa de territorio proprio.
   E, desde 19/09/2026, e o fundo da secao "One connected platform" (a
   grade de modulos logo abaixo do hero). Ela era branca com cartoes
   brancos de borda #E2EAF0: nove cartoes que so viravam cartao ao passar
   o mouse. Ela olhou e disse "muito branca". Com o fundo um tom abaixo,
   o cartao branco passa a ser um objeto em cima de uma mesa, e nao um
   retangulo desenhado a lapis no papel. Nao encosta em tom igual: acima
   dela vem a faixa azul dos sinais, abaixo a faixa azul do detalhe. */
.section.deep{background:var(--paper-2)}

/* A ancora do meio. O cartao branco sobre o azul continua branco — e o
   contraste que faz a faixa valer a pena.
   AZUL CHAPADO, SEM BRILHO. Havia um halo dourado no topo desta faixa, e
   em 19/09/2026 ela pediu para tirar o brilho do site inteiro. O que da
   peso a faixa e o contraste do azul com o branco em volta — o halo so
   acrescentava uma mancha. */
.section.dark{
  background:var(--navy);
  border-top:0;
}
/* O branco fica NO CABECALHO, e nao na secao inteira. Um `color:#fff`
   solto aqui seria uma armadilha para quem editar depois: os cartoes
   desta faixa sao brancos, e o primeiro texto que alguem acrescentar
   sem cor explicita sai branco sobre branco. */
.section.dark .section-head{color:#fff}
.section.dark .section-head h2{color:#fff}
.section.dark .section-head p{color:rgba(255,255,255,.72)}
.section.dark .eyebrow{color:var(--gold)}

/* Onde a borda escura ja separa, o fio some: desenhar um fio claro
   colado embaixo de um bloco azul e sujeira, nao separacao. */
.section.dark + .section{border-top:0}
#modules{border-top:0}
.section-head{max-width:800px;margin-bottom:62px}
.section-head h2{font-size:clamp(23px,2.6vw,30px)}
.section-head p{margin-top:20px;color:var(--text-muted);font-size:18.5px}

.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--font-head);font-size:12px;font-weight:500;
  /* .2em era demais: a 12px isso abre 2,4px entre letras e a palavra deixa
     de ser lida como palavra. .1em ainda marca que e rotulo, e volta a ler. */
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);margin:0 0 20px;
}
/* O tracinho dourado antes de cada rotulo de secao saiu do site inteiro:
   ele nao dizia nada e disputava a atencao com o proprio rotulo. */

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-head);font-weight:500;font-size:15px;letter-spacing:.01em;
  padding:15px 26px;border-radius:var(--r-btn);text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}

.btn-primary{background:var(--gold-grad);color:#20160A;box-shadow:0 6px 18px rgba(208,130,28,.24)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(208,130,28,.34)}

.btn-navy{background:var(--navy);color:#fff;box-shadow:0 6px 18px rgba(0,27,51,.18)}
.btn-navy:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,27,51,.26)}

.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-text);transform:translateY(-3px);box-shadow:var(--shadow-sm)}

.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- navegação ---------- */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.nav.scrolled{box-shadow:var(--shadow-sm)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;height:84px}
.nav-logo img{height:32px;width:auto;transition:transform .3s var(--ease)}
.nav-logo:hover img{transform:scale(1.04)}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a:not(.btn){
  position:relative;text-decoration:none;color:var(--text-muted);
  font-family:var(--font-head);font-size:15px;font-weight:500;padding:6px 0;
  transition:color .25s var(--ease);
}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--gold-grad);border-radius:2px;transition:width .3s var(--ease);
}
.nav-links a:not(.btn):hover{color:var(--navy)}
.nav-links a:not(.btn):hover::after{width:100%}
.nav-toggle{display:none}

/* ---------- hero ---------- */
/* SEM O HALO DOURADO DO CANTO DIREITO (pedido de 19/09/2026: nenhum
   brilho no site). Fica a sombra azul muito leve da esquerda — ela nao
   brilha, escurece, e e o que impede o branco do topo de parecer papel
   vazio antes da imagem carregar. */
.hero{position:relative;overflow:hidden;padding:96px 0 110px;background:
  radial-gradient(900px 480px at -8% 8%, rgba(0,27,51,.055), transparent 60%),
  var(--white);
}
/* A ARTE GANHOU ESPACO: ela pediu a imagem um pouco maior, e o palco
   aguenta — o texto do hero tem tres linhas curtas e nao precisava
   da metade larga da tela. */
.hero-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:56px;align-items:center}
/* Titulo do herói bem menor: a frase tem tres linhas e no tamanho
   anterior ela ocupava a tela inteira antes de alguem ler o resto. */
.hero h1{font-size:clamp(27px,3.1vw,38px);font-weight:500;letter-spacing:-.015em}
.hero h1 em{
  font-style:normal;background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{margin-top:26px;font-size:19.5px;color:var(--text-muted);max-width:35em}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
/* A linha "Built for: ..." saiu do hero a pedido dela. Ela repetia, em
   letra fraca e logo abaixo do titulo, o que a secao "Who it's for"
   ja mostra com imagem e texto — e o fio cinza dela cortava o hero em
   dois sem separar nada. As regras saem junto: CSS sem dono e o que
   faz uma folha crescer sem ninguem notar. */

/* ---------- espaços reservados para imagem ---------- */
/* Troque a <figure class="ph"> inteira por <img src="assets/nome.jpg" alt="..."> quando a arte existir. */
.ph{
  margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg,#F4F8FB 0%,#E9F0F6 55%,#F7FAFC 100%);
  border:1px solid var(--line);box-shadow:var(--shadow-md);
  display:grid;place-items:center;text-align:center;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.ph::before{
  content:"";position:absolute;inset:14px;border:1.5px dashed rgba(232,177,24,.5);
  border-radius:calc(var(--r-lg) - 6px);pointer-events:none;
}
.ph:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.ph-label{position:relative;padding:20px;max-width:80%}
.ph-label b{
  display:block;font-family:var(--font-head);font-weight:500;font-size:15px;color:var(--navy);
  letter-spacing:.02em;
}
.ph-label span{display:block;font-size:13px;color:var(--text-faint);margin-top:6px;letter-spacing:.04em}
.ph-4x3{aspect-ratio:4/3}
.ph-16x9{aspect-ratio:16/9}
.ph-3x2{aspect-ratio:3/2}
.ph-1x1{aspect-ratio:1/1}

/* ---------- faixa de sinais ---------- */
.signals{background:var(--navy);color:#fff;padding:0}
.signals-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12)}
.signal{
  background:var(--navy);padding:40px 30px;
  transition:background-color .35s var(--ease);
}
.signal:hover{background:var(--navy-800)}
.signal b{display:block;font-family:var(--font-head);font-size:19px;font-weight:500;color:#fff}
.signal span{display:block;color:rgba(255,255,255,.6);font-size:15px;margin-top:6px}

/* ---------- módulos ---------- */
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* O CARTAO JA E CARTAO EM REPOUSO, e nao so no hover.
   Antes a sombra e a borda mais escura so apareciam com o mouse em cima
   — e no celular nao existe mouse: la os nove cartoes nunca ganhavam
   relevo nenhum. Agora a borda ja nasce na cor forte e ha uma sombra
   baixa; o hover continua levantando o cartao e trocando para a sombra
   maior, entao o gesto ainda responde. */
/* A FITA NAVY E A PROPRIA BORDA DE CIMA DO CARTAO.
   Antes havia aqui uma barra DOURADA, reta, de largura zero, que so
   crescia com o mouse em cima — e que no celular nunca aparecia. Ela foi
   trocada pela fita navy do acabamento que a dona escolheu.
   Por que a borda e nao um ::before, como no painel: este cartao usa
   overflow:hidden, e o overflow corta os filhos rente a borda por dentro.
   Uma fita desenhada por ::before perderia o pixel de fora e deixaria a
   linha cinza da borda aparecendo por cima do navy. A borda de verdade
   nao e cortada por ninguem, e com o border-radius ela ja faz sozinha o
   que a referencia mostra: entra na curva e afina nos dois cantos, onde
   encontra a borda fina das laterais. */
.module{
  background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r-card);
  border-top:var(--fita) solid var(--navy);
  padding:34px 30px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.module:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);
  border-color:var(--line-strong);border-top-color:var(--navy)}
.module-num{font-family:var(--font-head);font-size:13px;font-weight:500;color:var(--gold-text);letter-spacing:.1em}
.module h3{font-size:17px;margin:14px 0 5px}
.module .label{
  font-size:12px;color:var(--text-faint);font-family:var(--font-head);
  letter-spacing:.1em;text-transform:uppercase;font-weight:500;
}
.module p{margin-top:18px;color:var(--text-muted);font-size:16px}
.module .quote{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  font-size:15px;color:var(--gold-text);font-style:italic;
}

/* ---------- detalhe dos módulos: texto e imagem alternando de lado ---------- */
.detail-row{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
  padding:62px 0;border-top:1px solid var(--line);
}
.detail-row:first-child{border-top:none;padding-top:0}
.detail-row:nth-child(even) .detail-text{order:2}
.detail-key{
  display:inline-block;font-family:var(--font-head);font-size:12.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);
}
.detail-row h3{font-size:20px;margin-top:14px;transition:color .35s var(--ease)}
.detail-row:hover h3{color:var(--gold-text)}
.detail-row p{color:var(--text-muted);font-size:17.5px;margin-top:18px}
.detail-row .ph{box-shadow:var(--shadow-md)}

/* ---------- integrações ---------- */
.chips{display:flex;flex-wrap:wrap;gap:13px}
.chip{
  background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r-btn);
  padding:13px 22px;font-family:var(--font-head);font-size:15px;font-weight:500;color:var(--navy-600);
  transition:transform .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.chip:hover{transform:translateY(-4px);border-color:var(--gold);color:var(--navy);box-shadow:var(--shadow-sm)}
/* letra miuda de verdade: preco, contrato, termos */
.fine-note{
  margin-top:16px;color:var(--text-faint,#8299AB);font-size:13.5px;line-height:1.65;
}
.fine-note a{color:var(--text-muted)}
.roadmap-note{
  margin-top:30px;color:var(--text-muted);font-size:15px;line-height:1.65;
}
.roadmap-note strong{color:var(--navy)}

/* ---------- para quem ---------- */
.audiences{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
/* Mesma fita dos outros quadros, pelo mesmo motivo do .module: tem
   overflow:hidden (a arte do topo encosta nas bordas e precisa ser
   cortada na curva), entao a fita e a borda de cima, e nao um ::before. */
.audience{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  border-top:var(--fita) solid var(--navy);
  overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.audience:hover{transform:translateY(-7px);box-shadow:var(--shadow-md)}
.audience .ph{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--line)}
/* A ARTE DE CADA PUBLICO.
   Fica em cima, ocupando a largura do cartao, sobre um fundo levemente
   mais frio que o branco — as tres ilustracoes tem fundo transparente e
   muito branco dentro, e sobre branco puro elas perdiam o contorno e
   pareciam flutuar sem apoio.
   A ALTURA E FIXA em proporcao, e nao o tamanho natural de cada arquivo:
   as tres imagens tem proporcoes diferentes (535, 461 e 474 de altura
   para 720 de largura) e, soltas, deixavam os tres titulos em alturas
   diferentes — o olho le isso como desalinhamento, nao como variedade.
   object-fit: contain mantem cada desenho inteiro dentro da mesma caixa. */
.audience-art{
  display:block;width:100%;height:190px;object-fit:contain;
  background:linear-gradient(180deg,#F7FAFC,#EEF3F8);
  padding:16px 20px 12px;border-bottom:1px solid var(--line);
}
.audience:hover .ph{transform:none}
.audience-body{padding:28px 28px 32px}
.audience h3{font-size:19px;letter-spacing:-.01em}
.audience .who{font-size:13.5px;color:var(--gold-text);margin-top:8px;font-family:var(--font-head);font-weight:500}
.audience p{margin-top:16px;color:var(--text-muted);font-size:16px}

/* ---------- faq ---------- */
/* CADA PERGUNTA E UM CARTAO, e nao uma linha de uma lista.
   Eram linhas separadas por um fio, e a pergunta aberta ganhava uma
   moldura dourada de 2px que so aparecia nela — o resultado era uma
   caixa forte no meio de linhas fracas, como se algo estivesse
   selecionado por engano. Agora todas tem a mesma borda leve, e o que
   muda na aberta e o PESO dessa borda e a cor do texto: o destaque
   passou a ser uma diferenca de grau, e nao de especie. */
.faq{max-width:820px;margin-inline:auto}
.faq details{
  border:1px solid var(--line);border-radius:var(--r-btn);
  background:#fff;margin-bottom:12px;overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.faq details:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
/* A PERGUNTA ABERTA: so o TEXTO muda de cor.
   A caixa continua exatamente como as outras — mesma borda cinza,
   mesmo fundo branco, mesmo arredondamento de 10px. A tentativa
   anterior pintava tambem a moldura e o fundo de dourado, e o
   resultado era uma caixa destacada no meio de caixas neutras, como
   se estivesse selecionada por engano. O dourado do titulo ja diz
   qual esta aberta; a caixa nao precisa repetir. */
.faq details[open]{
  border-color:var(--line);background:#fff;box-shadow:none;
}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 56px 22px 24px;position:relative;
  font-family:var(--font-head);font-size:18px;font-weight:500;color:var(--navy);
  transition:color .25s var(--ease);
}
.faq summary:hover{color:var(--gold-text)}
.faq details[open] summary{color:var(--gold-text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:24px;top:28px;width:11px;height:11px;
  border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
  transform:rotate(45deg);transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:32px}
.faq summary:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.faq .answer{padding:0 56px 24px 24px;color:var(--text-muted);font-size:16.5px;margin-top:-4px}

/* ---------- cta final ---------- */
/* Azul chapado, como a faixa do meio — o halo dourado saiu junto com os
   outros em 19/09/2026. */
.cta{
  background:var(--navy);
  color:#fff;text-align:center;padding:118px 0;
}
.cta h2{font-size:clamp(23px,2.8vw,32px);max-width:18em;margin:0 auto;color:#fff}
.cta .eyebrow{color:var(--gold)}
.cta p{margin:24px auto 0;max-width:44em;color:rgba(255,255,255,.72);font-size:18.5px}
.cta .btn{margin-top:38px}

/* ---------- rodapé ----------
   O LOGO SAIU DAQUI (pedido dela). Era a versao empilhada: 58px de
   altura mais o respiro, quase um terco do rodape no telefone, para
   repetir uma marca que ja esta no topo da mesma pagina e na aba do
   navegador. As regras dele sairam junto — .footer img e .footer .tag
   nao tinham mais dono, e CSS sem dono e o que faz uma folha crescer
   sem ninguem perceber. */
.footer{background:var(--navy-800);color:#fff;padding:56px 0 44px}
.footer-grid{display:flex;flex-wrap:wrap;gap:38px;justify-content:space-between;align-items:flex-start}
.footer-links{display:flex;gap:30px;flex-wrap:wrap}
.footer-links a{
  color:rgba(255,255,255,.72);text-decoration:none;font-size:15px;
  transition:color .25s var(--ease);
}
.footer-links a:hover{color:var(--gold)}
.footer-meta{
  margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:13.5px;color:rgba(255,255,255,.5);
}
.pron{font-family:var(--font-head);letter-spacing:.02em}

/* ---------- entrada suave ao rolar ----------
   O CONTEUDO E VISIVEL POR PADRAO. Repare no "html.js" na frente: o que
   esconde so vale depois que o page.js rodou e marcou a pagina. Antes era
   ".reveal{opacity:0}" solto, e o dia em que o script parou de rodar — a
   CSP passou a recusar codigo escrito dentro da pagina — os 49 blocos
   ficaram invisiveis e o site abriu EM BRANCO. O texto estava todo la.
   Uma animacao de entrada nao pode ter poder de apagar a pagina: quem
   esconde tem de ser o mesmo que revela, e so depois de provar que existe. */
.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal{opacity:0;transform:translateY(22px)}
html.js .reveal.in{opacity:1;transform:none}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:52px}
  .modules{grid-template-columns:repeat(2,1fr)}
  .audiences{grid-template-columns:1fr}
  .signals-grid{grid-template-columns:repeat(2,1fr)}
  .detail-row{grid-template-columns:1fr;gap:28px;padding:44px 0}
  .detail-row:nth-child(even) .detail-text{order:0}
  .nav-links{display:none}
  .nav-links.open{
    display:flex;position:absolute;top:84px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    padding:10px 26px 24px;box-shadow:var(--shadow-md);
  }
  .nav-links.open a:not(.btn){padding:15px 0;border-bottom:1px solid var(--line)}
  .nav-links.open .btn{margin-top:18px;justify-content:center}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;background:#fff;border:1px solid var(--line-strong);
    border-radius:var(--r-btn);color:var(--navy);cursor:pointer;font-size:18px;
    transition:border-color .25s var(--ease);
  }
  .nav-toggle:hover{border-color:var(--gold)}
}
@media (max-width:620px){
  body{font-size:16px}
  .section{padding:76px 0}
  .modules{grid-template-columns:1fr}
  .signals-grid{grid-template-columns:1fr}
  .hero{padding:66px 0 80px}
  .cta{padding:88px 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   Seletor de idioma e botão de login  —  visuais apenas nesta versão
   ========================================================================== */
.lang{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--line-strong);border-radius:var(--r-btn);
  padding:9px 13px;cursor:pointer;color:var(--navy-600);
  font-family:var(--font-head);font-size:14px;font-weight:500;
  transition:border-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.lang-btn:hover{border-color:var(--gold);color:var(--navy);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.lang-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.lang-btn .caret{transition:transform .3s var(--ease)}
.lang.open .lang-btn .caret{transform:rotate(180deg)}
.lang.open .lang-btn{border-color:var(--gold);color:var(--navy)}

.lang-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:172px;margin:0;padding:7px;
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  z-index:70;
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu a{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 13px;border-radius:var(--r-btn);text-decoration:none;
  font-family:var(--font-head);font-size:14.5px;color:var(--text-muted);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.lang-menu a:hover{background:var(--paper);color:var(--navy)}
.lang-menu a.on{color:var(--navy);font-weight:500}
.lang-menu a.on::after{content:"●";color:var(--gold);font-size:9px;margin-left:12px}

.login-link{
  position:relative;text-decoration:none;color:var(--navy);
  font-family:var(--font-head);font-size:15px;font-weight:500;padding:6px 0;
  transition:color .25s var(--ease);
}
.login-link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--gold-grad);border-radius:2px;transition:width .3s var(--ease);
}
.login-link:hover{color:var(--gold-text)}
.login-link:hover::after{width:100%}

@media (max-width:980px){
  .lang{width:100%;margin-top:14px}
  .lang-btn{width:100%;justify-content:center}
  .lang-menu{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;margin-top:8px;padding:0;display:none}
  .lang.open .lang-menu{display:block}
  .nav-links.open .login-link{padding:15px 0;border-bottom:1px solid var(--line)}
}

/* Correção: as âncoras dentro do menu de idioma herdavam o sublinhado
   animado do menu principal. Aqui elas voltam ao comportamento normal. */
.lang-menu a::after{content:none!important}
.lang-menu a:hover{text-decoration:none}
.lang-menu a.on::after{
  content:"●"!important;position:static!important;width:auto!important;height:auto!important;
  background:none!important;color:var(--gold);font-size:9px;margin-left:12px;border-radius:0;
}

/* ==========================================================================
   Banner de cookies
   ========================================================================== */
.cookie{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:90;
  max-width:820px;margin:0 auto;background:#fff;
  border:1px solid var(--line-strong);border-radius:var(--r-card);
  box-shadow:var(--shadow-lg);padding:26px 28px;
  display:none;
}
.cookie.show{display:block;animation:cookieUp .5s var(--ease)}
@keyframes cookieUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cookie h2{font-size:19px;margin-bottom:10px}
.cookie p{color:var(--text-muted);font-size:15.5px}
.cookie p a{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}
.cookie-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.cookie .btn{padding:12px 22px;font-size:14.5px}
@media (max-width:620px){
  .cookie{left:12px;right:12px;bottom:12px;padding:22px}
  .cookie-actions .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.cookie.show{animation:none}}

/* ==========================================================================
   Páginas legais (cookies, privacidade)
   ========================================================================== */
.legal{padding:76px 0 100px;max-width:820px}
.legal h1{font-size:clamp(24px,2.6vw,30px)}
.legal .updated{margin-top:14px;color:var(--text-faint);font-size:14.5px}
.legal h2{font-size:18.5px;margin-top:46px}
.legal h3{font-size:15.5px;margin-top:30px}
.legal p{margin-top:16px;color:var(--text-muted);font-size:17px}
.legal ul{margin:16px 0 0;padding-left:22px;color:var(--text-muted);font-size:17px}
.legal li{margin-bottom:10px}
.legal a{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--navy)}
.legal table{width:100%;border-collapse:collapse;margin-top:20px;font-size:15.5px}
.legal th{
  text-align:left;font-family:var(--font-head);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint);padding:12px 14px;
  border-bottom:2px solid var(--line-strong);
}
.legal td{padding:14px;border-bottom:1px solid var(--line);color:var(--text-muted);vertical-align:top}
.legal .table-wrap{overflow-x:auto}
.legal table{min-width:620px}
.legal .callout{
  margin-top:26px;padding:20px 24px;border-left:3px solid var(--gold);
  background:var(--gold-soft);border-radius:0 var(--r-card) var(--r-card) 0;
  color:var(--text-muted);font-size:16px;
}
.legal .back{display:inline-flex;align-items:center;gap:8px;margin-top:48px}

/* ==========================================================================
   Botão flutuante do WhatsApp — sempre visível
   Para usar o verde oficial do WhatsApp em vez do azul da marca,
   troque o background de .wa-float por #25D366 e o hover por #1FB855.
   ========================================================================== */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:80;
  display:inline-flex;align-items:center;gap:0;
  height:60px;padding:0 18px;border-radius:var(--r-btn);
  background:var(--navy);color:#fff;text-decoration:none;
  box-shadow:0 10px 30px rgba(0,27,51,.28);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),gap .35s var(--ease),padding .35s var(--ease),background-color .35s var(--ease);
}
.wa-float svg{flex:none;width:26px;height:26px;fill:currentColor}
.wa-float .wa-text{
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  font-family:var(--font-head);font-size:15px;font-weight:500;
  transition:max-width .4s var(--ease),opacity .3s var(--ease);
}
.wa-float:hover,.wa-float:focus-visible{
  transform:translateY(-4px);gap:11px;
  box-shadow:0 16px 40px rgba(0,27,51,.34);
  background:var(--navy-800);
}
.wa-float:hover .wa-text,.wa-float:focus-visible .wa-text{max-width:170px;opacity:1}
.wa-float:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* anel dourado sutil */
.wa-float::after{
  content:"";position:absolute;inset:-3px;border-radius:13px;
  border:2px solid transparent;transition:border-color .35s var(--ease);pointer-events:none;
}
.wa-float:hover::after{border-color:rgba(232,177,24,.55)}

/* sobe o botão enquanto o banner de cookies estiver na tela */
body.cookie-open .wa-float{bottom:calc(24px + 190px)}
@media (min-width:900px){body.cookie-open .wa-float{bottom:calc(24px + 150px)}}
@media (max-width:620px){
  .wa-float{right:16px;bottom:16px;height:56px;padding:0 15px}
  body.cookie-open .wa-float{bottom:calc(16px + 300px)}
}

/* ---------- ícone dos cartões de módulo ---------- */
.module{position:relative}
.module-icon{
  display:inline-grid;place-items:center;width:52px;height:52px;
  border-radius:var(--r-btn);background:var(--navy);color:var(--gold);
  margin:18px 0 4px;
  transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.module-icon svg{width:25px;height:25px}
.module:hover .module-icon{
  background:var(--gold-grad);color:var(--navy);
  transform:translateY(-3px) rotate(-4deg);
  box-shadow:0 8px 20px rgba(208,130,28,.3);
}
.module h3{margin-top:16px}

.module-num{display:block}
.module-icon{margin-top:14px}

/* âncoras: garante que o título não fique escondido sob o menu fixo */
section[id], main[id], div[id]{scroll-margin-top:100px}

/* correcao: os botoes dentro das paginas legais herdavam o sublinhado dos links */
.legal a.btn{text-decoration:none}
.legal a.btn:hover{text-decoration:none}

/* ---- telas do produto e formulário (acrescentado na versão 3) ---- */
.shot{margin:0;border-radius:16px;overflow:hidden;background:#F4F6F8;
      box-shadow:0 18px 44px rgba(16,32,54,.14);border:1px solid rgba(16,32,54,.07)}
.shot img{display:block;width:100%;height:auto}
/* ---- a linha que diz qual versao do texto legal prevalece ---- */
.prevalece{margin:0 0 26px;padding:12px 16px;border-left:3px solid var(--gold);
  background:var(--gold-soft);border-radius:0 var(--r-card) var(--r-card) 0;
  font-size:13.5px;line-height:1.6;color:var(--text-muted)}

/* ---- a janela do formulario, aberta pelos cartoes de preco ---- */
.plan-cta{width:100%;justify-content:center;margin-top:20px}
/* O BOTAO DE PRECO VIROU LINK. Ate aqui ele abria uma janela com o
   formulario de contato: quem queria comprar caia numa conversa. Agora
   leva direto ao cadastro, e quem prefere falar antes tem a linha de
   baixo — que continua abrindo a mesma janela de sempre. */
.plan-go{display:flex;width:100%;justify-content:center;margin-top:20px;text-decoration:none}
.plan-or{display:block;text-align:center;margin-top:12px;font-size:13.5px;color:#64748B}
.plan-talk{background:none;border:0;padding:0;font:inherit;color:#1F4E79;
  text-decoration:underline;cursor:pointer}
.plan-talk:hover{color:#0F2E4A}
.pop{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;
  justify-content:center;padding:5vh 16px;overflow:auto}
.pop[hidden]{display:none}
.pop-back{position:fixed;inset:0;background:rgba(8,18,32,.55);backdrop-filter:blur(2px)}
.pop-box{position:relative;width:100%;max-width:660px;background:#fff;border-radius:16px;
  box-shadow:0 30px 70px rgba(8,18,32,.32);overflow:hidden;animation:popin .22s ease-out}
@keyframes popin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pop-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid rgba(16,32,54,.09)}
.pop-title{margin:0;font-family:var(--font-head);font-size:14px;font-weight:500;color:var(--navy)}
.pop-x{border:0;background:none;font-size:26px;line-height:1;color:var(--text-muted);
  cursor:pointer;padding:0 4px}
.pop-x:hover{color:var(--navy)}
@media (prefers-reduced-motion:reduce){.pop-box{animation:none}}

/* ---- o caminho do dinheiro, na faixa escura ---- */
.signals{background:var(--navy,#001B33);padding:40px 0}
.path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step{position:relative;padding:0}
.step + .step::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:1px;
  background:rgba(255,255,255,.14)}
.step a{display:block;padding:8px 26px;text-decoration:none;color:inherit;
  transition:transform .3s var(--ease)}
.step a:hover{transform:translateY(-3px)}
.step b{display:block;font-family:var(--font-head);font-size:17px;color:#fff;margin-bottom:8px}
.step-where{display:inline-block;font-family:var(--font-head);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:#E8B118;
  border:1px solid rgba(232,177,24,.45);border-radius:99px;padding:2px 9px;margin-bottom:10px}
.step-d{display:block;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.62)}
.step a:hover .step-d{color:rgba(255,255,255,.82)}
@media (max-width:1000px){.path{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .step:nth-child(3)::before{display:none}}
@media (max-width:620px){.path{grid-template-columns:1fr;gap:22px}
  .step + .step::before{display:none}
  .step + .step{border-top:1px solid rgba(255,255,255,.12);padding-top:20px}}

/* ---- o convite para falar com a gente ---- */
/* TITULOS DE SECAO CENTRALIZADOS
   Escolha da dona. Duas condicoes para isso nao virar dor de leitura:
   1) medida curta. Paragrafo centralizado e mais lento de ler, porque
      cada linha comeca num ponto diferente e o olho tem de procurar o
      inicio. A 60 caracteres isso quase nao pesa; a largura cheia,
      pesa muito.
   2) text-wrap:balance nos titulos. Sem isso o titulo quebra deixando
      uma palavra sozinha na segunda linha ("open."), o que alinhado a
      esquerda passa e centralizado grita.
   Os cartoes, as tabelas e o rodape continuam a esquerda: so o cabecalho
   das secoes centraliza. */
/* O ANUAL E UM PRECO, NAO UM RECADINHO.
   Ele nasceu como .plan-line comum: cinza, 13.5px, do mesmo tamanho da
   frase sobre usuarios. Ficava com menos peso que a promessa de preco
   travado logo abaixo — a unica linha do cartao que pede uma decisao
   era a mais apagada das tres. Azul da marca e um degrau de tamanho
   resolvem sem competir com o $79, que continua a 34px. */
.section-head{margin-left:auto;margin-right:auto;text-align:center;max-width:760px}
.section-head h2{text-wrap:balance}
.section-head p{margin-left:auto;margin-right:auto;max-width:60ch}
.talk{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.talk-note{font-size:14px;color:var(--text-muted)}
/* O simbolo do WhatsApp entra na cor do texto do botao e vira verde no
   hover — verde cheio o tempo todo brigaria com o dourado da marca ao
   lado. */
.talk-wa svg{width:19px;height:19px;fill:currentColor;flex:none}
.pop-after{border-top:1px solid var(--line);padding:18px 22px 22px;text-align:center}
.pop-after-q{font-family:var(--font-head);font-weight:500;color:var(--navy);margin-bottom:12px}
.talk-wa:hover{border-color:#25D366;color:#128C4A}
/* A frase quebra para a linha de baixo antes de espremer os botoes. */
.talk-note{flex-basis:100%}
@media (min-width:900px){.talk-note{flex-basis:auto}}
@media (max-width:620px){.talk{gap:12px}.talk .btn{width:100%;justify-content:center}}

/* ---- os tres jeitos de por o formulario no site do cliente ---- */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.way{position:relative;background:#fff;border:1px solid rgba(16,32,54,.09);border-radius:16px;
  padding:26px 24px;box-shadow:0 2px 10px rgba(16,32,54,.05)}
/* A FITA ANTIGA SAIU. Era uma barra reta encolhida 13px de cada lado,
   com um degrade nas pontas imitando o afinamento — ela parava antes da
   curva, e os dois cantos ficavam descobertos. Era a ultima copia da
   tecnica que o painel e os .modcard ja tinham abandonado. Agora e a
   borda de cima, como nos outros quadros (o .way tambem tem
   overflow:hidden, por causa da imagem que encosta nas bordas). */
.way{border-top:var(--fita) solid var(--navy)}
/* A imagem entra ANTES do texto e encosta nas bordas do cartao: e ela que
   explica o jeito; o texto so confirma. A moldura clara por baixo separa a
   captura do branco do cartao sem virar mais uma caixa. */
.way{padding:0;overflow:hidden}
.way-shot{display:block;background:linear-gradient(160deg,#EEF3F7,#F7FAFC);
  border-bottom:1px solid rgba(16,32,54,.07)}
.way-shot img{display:block;width:100%;height:auto}
.way h3{font-size:17px;padding:0}
.way::before{top:auto;bottom:-1px}
.way p{font-size:14px;line-height:1.65;color:var(--text-muted)}
/* OUTRA VEZ A ORDEM DO ARQUIVO DECIDINDO, E DECIDINDO ERRADO.
   `.way > p` e `.way p` tem a MESMA forca (uma classe + um elemento), e
   `.way p` vinha depois com `margin:0` — entao o paragrafo perdia as
   margens laterais e a de baixo. Na tela: o texto encostava nas bordas
   do cartao e ATRAVESSAVA a linha de baixo. O `margin:0` era sobra de
   quando o cartao tinha outra estrutura; hoje nao existe nenhum <p>
   dentro de .way-shot, entao ele nao protegia nada.
   As margens agora vem por ultimo e com o pai junto, ganhando por
   especificidade. Mesmo defeito do dourado do cartao de preco: e o
   segundo, e por isso ha teste medindo isto agora. */
.ways .way > h3{margin:18px 24px 8px}
.ways .way > p{margin:0 24px 24px}
.way em{font-style:normal;background:#F4F6F8;padding:1px 6px;border-radius:5px;font-size:13px}
@media (max-width:900px){.ways{grid-template-columns:1fr}}

/* A captura no alto do cartao de modulo. A janela e 16:10 e a imagem e
   ancorada no canto superior esquerdo: e la que esta o que identifica
   cada tela. Sem isso, a miniatura vira uma manchinha cinza igual em
   todos os cartoes. */
.module-shot{margin:0 0 18px;border-radius:12px;overflow:hidden;aspect-ratio:16/10;
  background:#F4F6F8;border:1px solid rgba(16,32,54,.08)}
.module-shot img{display:block;width:165%;max-width:none;height:auto}
/* O formulario de contato e o formulario de contato, nao mais uma captura
   de exemplo: sem cartao flutuante, sem sombra grande, alinhado com o
   texto que o apresenta. */
.formwrap{max-width:660px;margin:26px 0 0;background:#fff;border-radius:14px;
          padding:4px;border:1px solid rgba(16,32,54,.10);box-shadow:0 2px 10px rgba(16,32,54,.05)}
#pricing .module .label{font-size:34px;font-weight:500;color:var(--navy,#001B33);display:block;line-height:1.1}
/* ---- cartoes de plano ---- */
.plans{align-items:stretch}
/* Um plano so: o cartao para de ser coluna de uma grade de tres e vira
   uma caixa centrada. Solto na primeira coluna ele parecia um cartao
   que sobrou dos outros dois.
   A LARGURA SUBIU DE 520 PARA 820 (pedido dela). A 520 o cartao ficava
   como uma tira estreita no meio de uma secao larga, e as doze telas
   viravam uma coluna comprida que ninguem le ate o fim. A 820 a lista
   cabe em duas colunas e o cartao fica com a altura de um cartao. */
.plans{grid-template-columns:minmax(0,820px);justify-content:center}
@media (max-width:860px){.plans{grid-template-columns:1fr}}
.plan{display:flex;flex-direction:column;position:relative}
.plan-pick{outline:2px solid #E8B118;outline-offset:-2px}
.plan-per{font-size:13px;color:var(--muted,#4E6478);margin-left:4px}
.label-ask{font-size:19px !important;letter-spacing:0;color:#4E6478 !important}
.plan-flag{position:absolute;top:14px;right:16px;background:#E8B118;color:#20160A;
  font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 10px;border-radius:99px}
.plan-when{margin:10px 0 0;display:flex;flex-direction:column;gap:3px}
.plan-line{font-size:13.5px;color:#4E6478}
/* A linha do "preco de fundador" saiu do cartao a pedido dela, e as
   regras dela sairam junto. O comentario fica pelo que ensina sobre a
   linha que sobrou: .plan-year tem a MESMA forca que .plan-line (uma
   classe cada) e .plan-line vem depois no arquivo — entao a cor de
   .plan-line ganhava, e o valor anual saia cinza. O seletor abaixo
   leva o nome do pai junto e ganha por especificidade, nao por
   posicao no arquivo. */
.plan-when .plan-year{font-size:15px;font-weight:500;color:var(--navy,#001B33)}
.plan-for{margin:16px 0 0;font-size:14.5px;line-height:1.55}
/* AS DOZE TELAS EM DUAS COLUNAS.
   E o que faz a largura nova valer a pena: em uma coluna so, o cartao
   crescia para baixo e o botao de assinar caia abaixo da dobra. O
   flex:1 continua ali para empurrar o botao para o rodape do cartao —
   ele vale sobre o cartao (que e flex), nao sobre a lista. */
.plan-list{list-style:none;margin:20px 0 0;padding:0;flex:1;
  display:grid;grid-template-columns:1fr 1fr;gap:14px 36px;align-content:start}
@media (max-width:720px){.plan-list{grid-template-columns:1fr;gap:11px}}
.plan-list li{display:flex;flex-direction:column;gap:2px;padding-left:22px;position:relative}
.plan-list li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:7px;
  border-left:2px solid #E8B118;border-bottom:2px solid #E8B118;transform:rotate(-45deg)}
.mi-n{font-weight:500;font-size:14px;color:#001B33}
.mi-d{font-size:12.5px;line-height:1.5;color:#6B7F91}
.plan-not{margin:18px 0 0;font-size:12.5px;color:#8299AB;border-top:1px solid rgba(16,32,54,.09);padding-top:12px}
/* ---- quadros dos modulos ----
   Cartao branco, canto arredondado, sombra leve e uma fita azul-marinho
   no ALTO, comecando depois da curva do canto para acompanhar o
   arredondamento em vez de cortar reto por cima dele. E o mesmo quadro
   que o painel usa por dentro: quem ve aqui reconhece a tela depois. */
.modcards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.modcard{position:relative;background:#fff;border:1px solid rgba(16,32,54,.09);
  border-radius:16px;padding:26px 22px 24px;text-align:center;
  box-shadow:0 2px 10px rgba(16,32,54,.05);display:flex;flex-direction:column}
/* A FITA AZUL, DO MESMO JEITO QUE NO PAINEL.
   Antes era uma linha reta encolhida nas pontas (left/right:13px): ela
   parava antes da curva e os cantos ficavam descobertos, como se a fita
   fosse curta demais para o cartao. A tecnica do app resolve sem truque
   de largura: uma borda de 3px em volta do cartao inteiro, com os lados
   e o pe TRANSPARENTES e so o topo colorido. Como a borda respeita o
   border-radius, ela acompanha a curva e cobre os cantos. */
.modcard::before{content:"";position:absolute;inset:-1px;pointer-events:none;
  border-radius:16px;border:var(--fita) solid transparent;border-bottom:0;
  border-top-color:var(--navy)}
/* MOVIMENTO, como nos outros cartoes da pagina.
   O cartao sobe e ganha sombra; o icone sobe um pouco mais, o que da a
   impressao de profundidade sem animar cor nenhuma. Quem pediu menos
   movimento no sistema operacional nao ve nada disto: o bloco global de
   prefers-reduced-motion desliga toda transicao da pagina. */
.modcard{transition:transform .4s var(--ease),box-shadow .4s var(--ease),
  border-color .4s var(--ease)}
.modcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);
  border-color:rgba(16,32,54,.18)}
.modcard .modicon svg{transition:transform .4s var(--ease)}
.modcard:hover .modicon svg{transform:translateY(-3px) scale(1.06)}
.modicon{display:block;margin:0 auto 14px;width:46px;height:46px}
.modicon svg{width:46px;height:46px;fill:none;stroke:#E8B118;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.modtitle{font-size:16px;margin:0;color:#001B33}
.modin{display:block;margin:6px 0 0;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:#8299AB}
.moddesc{margin:11px 0 0;font-size:13.5px;line-height:1.6;color:#4E6478}
@media (max-width:1080px){.modcards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.modcards{grid-template-columns:1fr}}
@media (max-width:820px){.shot{border-radius:12px}}

/* ================================================================
   A FAIXA AZUL DO TOPO — o mesmo cabecalho em toda pagina
   ================================================================
   Ela perguntou por que as paginas tinham cabecalhos diferentes. A
   barra de navegacao sempre foi a mesma; o que mudava era o que vinha
   LOGO ABAIXO: a home abre com o hero claro e as outras abriam com o
   titulo solto no branco. Duas paginas do mesmo site pareciam de sites
   diferentes.
   Agora toda pagina interna abre com esta faixa navy: o titulo dentro
   dela, a data de atualizacao logo abaixo, e o corpo começa depois. E
   uma peca de identidade repetida, que e o que faz um site parecer
   feito por uma equipe e nao por encomendas separadas.
   O NAVY tambem resolve um detalhe da navegacao: a barra de cima e
   branca translucida, e sobre uma faixa escura ela ganha contorno sem
   precisar de sombra. */
.page-head{
  background:linear-gradient(160deg,var(--navy) 0%,#0A2A45 62%,#123A5C 100%);
  color:#fff;padding:58px 0 62px;position:relative;overflow:hidden;
}
/* O BRILHO DO CANTO SAIU. Aqui havia um circulo dourado de 420px no
   canto de cima, a direita, em toda pagina interna — contrato,
   privacidade, cookies, DPA, nas tres linguas. Foi este que ela apontou
   na pagina do DPA em 19/09/2026 e pediu para tirar de todo o site.
   A regra inteira foi removida, e nao so zerada: um ::after vazio com
   posicao absoluta continuaria existindo, invisivel, esperando alguem
   dar cor a ele de novo sem saber por que ele esta ali. */
.page-head .wrap{position:relative;z-index:1}
.page-head .wrap{text-align:center}
.page-head h1{color:#fff;font-size:clamp(26px,3vw,38px);letter-spacing:-.015em;margin:0}
.page-head .updated{
  margin-top:14px;color:rgba(255,255,255,.66);font-size:14.5px;
  font-family:var(--font-head);letter-spacing:.01em;
}
.page-head .eyebrow{color:var(--gold);margin-bottom:14px}
/* o corpo nao precisa mais do respiro que o titulo dava */
.page-head + main.legal{padding-top:52px}
@media (max-width:760px){ .page-head{padding:42px 0 46px} .page-head + main.legal{padding-top:38px} }

/* ================================================================
   O PALCO DO HERO — as telas do produto, uma depois da outra
   ================================================================
   Era uma captura parada do Dashboard. Virou um palco que atravessa as
   treze telas do produto, e o movimento nao e um fade: cada tela ENTRA
   inclinada de lado, se endireita, e a seguinte a substitui girando no
   mesmo eixo. E a inclinacao que ela pediu, e ela tem uma razao alem do
   gosto — uma tela de software vista de frente e um retangulo; vista
   com um grau de perspectiva, ela vira um objeto, e o olho entende que
   ha mais atras.
   CLS ZERO: o palco tem proporcao fixa (as capturas sao todas
   1600x917), entao a altura nao muda quando a imagem chega.
   PESO: so a primeira tem src. As outras carregam quando chega a vez
   delas — treze capturas de uma vez seriam quase um megabyte gasto por
   quem le o titulo e vai embora. */
.stage{position:relative;perspective:1700px}
.stage-inner{position:relative;width:100%;aspect-ratio:1600/917;transform-style:preserve-3d}
.stage .slide{
  position:absolute;inset:0;margin:0;border-radius:16px;overflow:hidden;
  background:#F4F6F8;border:1px solid rgba(16,32,54,.07);
  box-shadow:0 18px 44px rgba(16,32,54,.14);
  opacity:0;transform:rotateY(-16deg) translateX(7%) scale(.965);
  transition:opacity .85s var(--ease), transform 1.05s var(--ease);
  will-change:opacity,transform;pointer-events:none;
}
.stage .slide.on{opacity:1;transform:rotateY(0) translateX(0) scale(1);pointer-events:auto}
/* a que sai gira para o outro lado: da a sensacao de uma pilha girando,
   e nao de duas imagens trocando de lugar */
.stage .slide.out{opacity:0;transform:rotateY(14deg) translateX(-6%) scale(.965)}
.stage .slide img{display:block;width:100%;height:auto}
/* A LEGENDA PRECISA VENCER A CAPTURA QUE ESTA ATRAS DELA.
   As telas do produto sao claras, e um degrade suave deixava o texto
   branco ilegivel em cima do conteudo da captura. O degrade agora sobe
   mais alto e fecha mais escuro: a legenda e informacao, nao decoracao,
   e informacao que nao se le nao esta na pagina. */
.stage figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:64px 24px 18px;
  background:linear-gradient(transparent,rgba(0,20,38,.58) 42%,rgba(0,20,38,.92));
  color:#fff;font-family:var(--font-head);font-size:14px;letter-spacing:.01em;
  opacity:0;transition:opacity .5s var(--ease) .25s;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.stage .slide.on figcaption{opacity:1}
.dots{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:20px}
.dots .dot{
  width:7px;height:7px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:var(--line-strong);transition:background-color .3s var(--ease), width .3s var(--ease);
}
.dots .dot.on{background:var(--gold-deep);width:22px}
.dots .dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* QUEM PEDIU MENOS MOVIMENTO RECEBE MENOS MOVIMENTO. Nao e cortesia:
   movimento continuo dispara enjoo e enxaqueca em quem tem sensibilidade
   vestibular, e o sistema operacional ja sabe disso — basta perguntar. */
@media (prefers-reduced-motion:reduce){
  .stage .slide{transition:opacity .25s linear;transform:none!important}
  .stage .slide.out{transform:none!important}
}

/* ================================================================
   O FLUXO, PASSO A PASSO — um carrossel com trilha de migalhas
   ================================================================
   Eram sete blocos empilhados, um embaixo do outro: quem rolava via
   sete telas soltas e nao via que elas sao a MESMA historia em ordem —
   o pedido chega, vira orcamento, vira trabalho agendado, vira fatura,
   vira dinheiro na conta.
   Agora e um passo de cada vez, com a trilha em cima mostrando onde a
   pessoa esta e as setas entre os nomes dizendo para onde aquilo vai.
   A trilha nao e enfeite: ela e a propria explicacao do produto.
   E UM PADRAO DE ABAS DE VERDADE (role=tablist/tab/tabpanel), com as
   setas do teclado funcionando. Carrossel que so responde a clique
   deixa de fora quem navega por teclado — e aqui dentro esta metade da
   explicacao do que o produto faz. */
.flow{margin-top:42px}
.flow-steps{
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;
  gap:0;margin:0 0 30px;padding:4px 2px;list-style:none;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
}
.flow-steps::-webkit-scrollbar{display:none}
.flow-steps li{scroll-snap-align:center}
.flow-steps li{display:flex;align-items:center;flex:0 0 auto}
/* A SETA ENTRE OS PASSOS.
   Era um chevron de texto (›) na cor da linha: quase invisivel, e a
   trilha parecia uma fila de botoes soltos em vez de uma sequencia.
   Agora e um traco com ponta — o desenho que o olho le como "vai
   daqui para ali" — na cor da marca. Ela some no telefone, onde a
   trilha quebra em varias linhas e a seta apontaria para o vazio. */
.flow-arrow{
  display:flex;align-items:center;color:var(--gold-deep);
  padding:0 2px;user-select:none;flex:0 0 auto;
}
.flow-arrow svg{display:block;width:19px;height:10px}
.flow-step{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:var(--r-btn);
  padding:8px 9px;font-family:var(--font-head);font-size:13.5px;font-weight:500;
  white-space:nowrap;
  color:var(--text-muted);transition:all .25s var(--ease);
}
.flow-step .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:99px;background:var(--paper-2);
  color:var(--text-muted);font-size:11px;transition:all .25s var(--ease);
}
.flow-step:hover{color:var(--navy);background:var(--paper)}
.flow-step.on{
  color:var(--navy);background:#fff;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(232,177,24,.13);
}
.flow-step.on .n{background:var(--gold-grad);color:#20160A}
.flow-step:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.flow-stage{position:relative}
/* O PAINEL OCUPA A LARGURA DO CONTEUDO, como ela pediu: a captura de um
   lado, o texto do outro, e nada mais competindo por atencao. */
.flow .detail-row{
  display:grid;grid-template-columns:.86fr 1.14fr;gap:52px;align-items:center;
  margin:0;animation:flow-in .5s var(--ease) both;
}
.flow .detail-row[hidden]{display:none}
@keyframes flow-in{ from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:none} }
.flow .detail-text{max-width:34em}
.flow .detail-row .shot{margin:0}

.flow-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:34px}
.flow-nav button{
  width:46px;height:46px;border-radius:var(--r-btn);cursor:pointer;
  background:#fff;border:1px solid var(--line-strong);color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .25s var(--ease);
}
.flow-nav button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.flow-nav button:hover{border-color:var(--gold);color:var(--gold-text);
  transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.flow-nav button:disabled{opacity:.34;cursor:default;transform:none;box-shadow:none;
  border-color:var(--line);color:var(--text-muted)}
.flow-nav button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.flow-count{font-family:var(--font-head);font-size:14px;color:var(--text-muted);min-width:56px;text-align:center}
.flow-count b{color:var(--navy);font-weight:500}

@media (max-width:900px){
  .flow .detail-row{grid-template-columns:1fr;gap:28px}
  .flow-steps{gap:2px}
  .flow-step{padding:7px 10px;font-size:12.5px}
  .flow-arrow{padding:0}
  .flow-arrow svg{width:16px}
}
@media (prefers-reduced-motion:reduce){ .flow .detail-row{animation:none} }

/* ================================================================
   PULAR PARA O CONTEUDO
   O primeiro elemento que recebe o foco em toda pagina. Fica fora da
   tela ate alguem chegar nele com o Tab — entao desce e aparece. Sem
   ele, quem navega por teclado atravessa o menu inteiro, em toda
   pagina, antes de chegar ao texto.
   ================================================================ */
.skip{
  position:absolute;left:16px;top:-64px;z-index:200;
  display:inline-block;padding:11px 18px;border-radius:10px;
  background:var(--navy);color:#fff;text-decoration:none;
  font-family:var(--font-head);font-size:14.5px;font-weight:500;
  box-shadow:0 10px 28px rgba(0,27,51,.28);
  transition:top .18s var(--ease);
}
.skip:focus{top:12px}
main:focus{outline:none}

/* ================================================================
   A TRILHA — onde a pessoa esta, dentro da faixa azul
   ================================================================ */
.crumb{
  display:flex;justify-content:center;align-items:center;gap:9px;
  margin-bottom:16px;font-family:var(--font-head);font-size:13.5px;
  letter-spacing:.01em;color:rgba(255,255,255,.62);
}
.crumb a{color:rgba(255,255,255,.78);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease),color .2s var(--ease)}
.crumb a:hover{color:#fff;border-bottom-color:var(--gold)}
.crumb span[aria-hidden]{color:rgba(255,255,255,.38)}
.crumb [aria-current]{color:var(--gold)}

/* a seta dos botoes virou desenho: precisa alinhar com a letra */
.btn .arrow{display:inline-flex;align-items:center}
.btn .arrow svg{display:block}
.nav-toggle svg{display:block}

/* ================================================================
   BANNER DE COOKIES — SEGUNDO NIVEL E PESO IGUAL

   ACEITAR e RECUSAR usam a MESMA classe e por isso a mesma aparencia.
   Nao e estilo: o guia da ANPD diz, com essas palavras, que esconder ou
   enfraquecer o botao de recusa e "dark pattern". Antes eram
   .btn-primary (dourado cheio) contra .btn-ghost (contorno apagado) —
   o olho ia direto no "Aceitar". Se um dia alguem for mexer aqui, e
   este o paragrafo que explica por que os dois tem de continuar iguais.
   ================================================================ */
.btn-consent{
  background:var(--navy);color:#fff;border-color:var(--navy);
  box-shadow:0 4px 14px rgba(0,27,51,.16);
}
.btn-consent:hover{background:#0A2A45;border-color:#0A2A45;transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,27,51,.24)}
/* a terceira via — abrir as categorias — e deliberadamente MENOS forte
   que as duas de cima: ela nao e uma escolha, e um caminho para escolher */
.btn-quiet{
  background:transparent;color:var(--navy);border-color:transparent;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--line-strong);padding-left:14px;padding-right:14px;
}
.btn-quiet:hover{color:var(--gold-text);text-decoration-color:var(--gold)}

.cookie-cats{margin-top:20px;border-top:1px solid var(--line);padding-top:6px}
.cookie-cat{padding:15px 0;border-bottom:1px solid var(--line)}
.cookie-cat:last-child{border-bottom:none}
.cc-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cc-name{font-family:var(--font-head);font-weight:500;font-size:15px;color:var(--navy);cursor:pointer}
.cc-fixed{
  font-family:var(--font-head);font-size:12px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-faint);
  border:1px solid var(--line-strong);border-radius:999px;padding:4px 11px;
}
.cookie-cat p{font-size:14px;line-height:1.6;margin-top:7px;color:var(--text-muted)}

/* a chave: um <input type=checkbox> de verdade, so vestido.
   Teclado, leitor de tela e agente automatico continuam vendo a caixa. */
.cc-switch{position:relative;display:inline-flex;flex:0 0 auto;width:48px;height:28px}
.cc-box{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.cc-track{
  position:absolute;inset:0;border-radius:999px;background:#D8DEE5;
  transition:background .2s var(--ease);pointer-events:none;
}
.cc-track::after{
  content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,27,51,.28);
  transition:transform .2s var(--ease);
}
.cc-box:checked + .cc-track{background:var(--navy)}
.cc-box:checked + .cc-track::after{transform:translateX(20px)}
.cc-box:focus-visible + .cc-track{outline:3px solid var(--gold);outline-offset:3px}

.cookie-prazo{margin-top:16px;font-size:13px;color:var(--text-faint)}

@media (prefers-reduced-motion:reduce){
  .cc-track,.cc-track::after{transition:none}
  .btn-consent:hover,.btn-quiet:hover{transform:none}
}

/* O atributo hidden perde para qualquer display declarado em classe.
   Sem esta linha, um <button class="btn" hidden> continua na tela. */
[hidden]{display:none!important}

/* ================================================================
   AS DUAS FAIXAS AZUIS NOVAS — "How it works" e "What each module does"

   A segunda saiu de dentro da secao de preco e virou secao propria:
   nao da para pintar um pedaco do meio de uma secao sem gambiarra de
   largura total, e aquele bloco ja era uma secao disfarcada (tinha
   cabecalho proprio empurrado por um margin-top escrito no atributo
   style do elemento).

   Os cartoes brancos — .modcard — nao precisam de nada: branco sobre
   azul e o mesmo contraste que a faixa "Who it's for" ja usa. O que
   precisa e o CARROSSEL, que foi desenhado para fundo claro: o texto
   do painel, as abas, as setas e o contador estavam todos em tons de
   cinza-azulado que somem no azul.

   Todo valor abaixo foi conferido contra #001B33 com a formula de
   contraste da WCAG. O piso e 4,5:1 para texto normal e 3:1 para
   componente de interface; o menor daqui e 8,2:1 (o dourado).
   ================================================================ */

/* ---- o texto do painel ---- */
.section.dark .detail-text h3,
.section.dark .detail-row h3{color:#fff}
.section.dark .detail-row:hover h3{color:var(--gold)}
.section.dark .detail-row p{color:rgba(255,255,255,.76)}
/* O olho do painel nao e .eyebrow, e .detail-key — foi por isso que
   ele continuou no dourado escuro do fundo claro depois da faixa virar
   azul. Dourado escuro sobre azul da 3,4:1: passa para componente,
   nao para texto. */
.section.dark .detail-key{color:var(--gold)}

/* ---- a trilha de passos ---- */
.section.dark .flow-step{color:rgba(255,255,255,.72)}
.section.dark .flow-step:hover{color:#fff;background:rgba(255,255,255,.08)}
.section.dark .flow-step .n{background:rgba(255,255,255,.14);color:rgba(255,255,255,.82)}
/* A aba acesa continua sendo uma pastilha BRANCA: era assim no fundo
   claro e e o que separa "estou aqui" de "posso ir ali". Sobre o azul
   ela fica ainda mais clara, entao o halo dourado pode encolher. */
.section.dark .flow-step.on{
  color:var(--navy);background:#fff;border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(232,177,24,.38);
}
.section.dark .flow-step.on .n{background:var(--gold-grad);color:#20160A}
.section.dark .flow-arrow{color:var(--gold)}

/* ---- as setas de baixo e o contador ---- */
.section.dark .flow-nav button{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.26);color:#fff;
}
.section.dark .flow-nav button:hover{
  background:rgba(255,255,255,.14);border-color:var(--gold);color:var(--gold);
}
.section.dark .flow-nav button:disabled{
  background:transparent;border-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.34);opacity:1;
}
.section.dark .flow-count{color:rgba(255,255,255,.66)}
.section.dark .flow-count b{color:#fff}

/* A borda de cima das secoes some quando as duas sao azuis: um fio
   claro entre duas faixas da mesma cor e sujeira, nao separacao. */
.section.dark + .section.dark{border-top:0}

/* O RISCO NO TOPO DO CARTAO ERA AZUL-MARINHO — desenhado para se
   destacar sobre fundo claro. Sobre o azul ele sumiu e virou duas
   marquinhas escuras nos cantos de cima, como se o cartao estivesse
   lascado. Aqui ele vira dourado: a mesma cor do icone logo abaixo. */
.section.dark .modcard::before{border-top-color:var(--gold)}
/* OS QUADROS DE PUBLICO MORAM NA MESMA SITUACAO: tambem ficam numa faixa
   azul. Quando a fita deles virou navy (19/09/2026, o acabamento que ela
   escolheu para todo quadro), o mesmo defeito voltaria — o azul da fita
   se fundiria com o azul em volta e os dois cantos de cima pareceriam
   mordidos. Recebem a mesma excecao dourada dos .modcard. Em fundo
   claro, que e onde a fita navy aparece, ela continua navy. */
.section.dark .audience{border-top-color:var(--gold)}

/* ================================================================
   O RODAPE NO TELEFONE
   Com o logo fora, sobrou uma lista encostada na esquerda ocupando a
   largura toda — e, logo abaixo, duas linhas tambem a esquerda. Numa
   tela estreita isso vira uma coluna torta. Centrado, o rodape volta a
   ter eixo. A linha de baixo acompanha: uma lista centrada em cima de
   um texto a esquerda parece engano, nao escolha.
   ================================================================ */
@media (max-width:760px){
  .footer{padding:44px 0 36px}
  .footer-grid{justify-content:center}
  .footer-links{justify-content:center;text-align:center;gap:16px 22px}
  .footer-meta{justify-content:center;text-align:center;margin-top:34px}
}