/* =============================================================================
   Vegas Aceleradora — sistema de design
   =============================================================================

   Um arquivo, todas as paginas. Fica em cache entre navegacoes, o que importa
   num site de 36 paginas: a partir da segunda, o CSS nao e baixado de novo.

   ---------------------------------------------------------------------------
   DE ONDE VEM A PALETA
   ---------------------------------------------------------------------------
   Nada aqui foi inventado. Os valores saem do site que esta no ar, por
   frequencia de uso:

     #F49E1D  80 ocorrencias   ambar da marca  -> e o "dourado" do briefing
     #D3372B  43               vermelho da marca
     #F3EDE3  37               off-white do texto
     #9C968A  33               cinza de apoio
     #141210  26               superficie clara/escura
     #0A0908  24               preto Vegas

   O briefing pede "tons dourados derivados da identidade original" e proibe
   trocar os elementos oficiais por uma identidade generica. As duas coisas se
   resolvem no mesmo ponto: o #F49E1D JA E o dourado da Vegas — e o extremo
   ambar do degrade da marca. Entao o dourado nao foi escolhido, foi extraido.

   O degrade completo (#D3372B -> #F49E1D) continua existindo, mas com uso
   muito mais restrito que na LP atual: so no botao primario. O briefing pede
   explicitamente para evitar excesso de gradientes e brilhos, e o dourado
   como acento pontual.

   ---------------------------------------------------------------------------
   CONTRASTE
   ---------------------------------------------------------------------------
   O dourado #F49E1D tem contraste alto sobre o preto e REPROVA sobre o
   off-white. Por isso existem dois acentos: --ouro para fundo escuro e
   --acento-claro para fundo claro. Nunca troque um pelo outro.
   ========================================================================== */

:root {
  /* ---- fundo e superficie ---- */
  --preto:        #0A0908;   /* fundo principal */
  --superficie:   #0F0D0C;   /* faixa alternada sobre o preto */
  --elevado:      #141210;   /* card sobre fundo escuro */
  --claro:        #F3EDE3;   /* secao clara */
  --branco:       #FFFFFF;   /* card sobre secao clara */

  /* ---- texto ---- */
  --tinta:        #F3EDE3;   /* texto sobre escuro */
  --tinta-2:      #C9C3B6;   /* paragrafo sobre escuro */
  --tinta-3:      #9C968A;   /* apoio, rotulo sobre escuro */
  --tinta-escura: #141210;   /* texto sobre claro */
  --tinta-escura-2: #5C574E; /* paragrafo sobre claro */

  /* ---- acentos ---- */
  --ouro:         #F49E1D;   /* acento sobre ESCURO */
  --ouro-fundo:   rgba(244,158,29,0.12);
  --acento-claro: #B4482B;   /* acento sobre CLARO (o ouro reprova la) */
  --vermelho:     #D3372B;   /* so no degrade do botao primario */

  /* ---- linhas ---- */
  --linha:        rgba(243,237,227,0.10);
  --linha-forte:  rgba(243,237,227,0.20);
  --linha-clara:  rgba(20,18,16,0.12);

  /* ---- tipografia ---- */
  --fonte: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-display: clamp(38px, 5.4vw, 68px);
  --t-h1:      clamp(34px, 4.8vw, 58px);
  --t-h2:      clamp(27px, 3.4vw, 42px);
  --t-h3:      clamp(19px, 1.5vw, 22px);
  --t-corpo-g: clamp(17px, 1.3vw, 19px);
  --t-corpo:   17px;
  --t-peq:     15px;
  --t-rotulo:  13px;

  /* ---- espaco: escala de 4 ---- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;
  --secao: clamp(64px, 8vw, 112px);   /* respiro vertical de secao */
  --gutter: clamp(20px, 5vw, 72px);   /* respiro lateral */

  /* ---- forma ---- */
  --r-peq: 10px; --r: 16px; --r-g: 22px; --r-pill: 100px;

  /* ---- movimento: discreto, como o briefing pede ---- */
  --transicao: 0.25s cubic-bezier(.22,.61,.36,1);
}

/* =============================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* compensa o cabecalho fixo quando se chega por ancora */
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--preto);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.7;
  /* clip, nao hidden: hidden no body quebra position:sticky */
  overflow-x: clip;
}

img, svg, video { max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

/* Link em texto corrido nao pode se distinguir so pela cor (WCAG 1.4.1).
   Escopo preso ao conteudo: a primeira versao usava `li a` solto e sublinhava
   o menu inteiro, porque navegacao tambem e feita de <li>. */
main p a:not(.btn),
main li:not(.chip) a:not(.btn),
main dd a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
main .chips a, main .grade a.card, main .editorial a.card { text-decoration: none; }
.escuro p a:not(.btn) { color: var(--ouro); }
.claro  p a:not(.btn) { color: var(--acento-claro); }

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.01em; line-height: 1.3; }

p { margin: 0 0 var(--e4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Titulo tem margem zero para o espaco ser decidido pelo bloco. O paragrafo
   que vem logo depois e a excecao: sem isso ele cola no titulo. */
h1 + p, h2 + p, h3 + p, h2 + ul, h3 + ul { margin-top: var(--e3); }

/* Foco visivel em tudo que recebe teclado. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--ouro);
  outline-offset: 3px;
  border-radius: var(--r-peq);
}

/* Atalho para quem navega por teclado ou leitor de tela. */
.pular {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ouro); color: var(--preto);
  padding: var(--e3) var(--e5); font-weight: 800;
}
.pular:focus { left: var(--e3); }

.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =============================================================================
   LAYOUT
   ========================================================================== */

.wrap { max-width: 1240px; margin: 0 auto; }
.wrap-estreito { max-width: 820px; margin: 0 auto; }

.secao { padding: var(--secao) var(--gutter); }
.secao-curta { padding: calc(var(--secao) * 0.55) var(--gutter); }

.escuro     { background: var(--preto);      color: var(--tinta); }
.superficie { background: var(--superficie);  color: var(--tinta); border-top: 1px solid var(--linha); }
.claro      { background: var(--claro);       color: var(--tinta-escura); }

.escuro p, .superficie p { color: var(--tinta-2); }
.claro p { color: var(--tinta-escura-2); }

/* Grade responsiva padrao. auto-fit + minmax faz a quebra sem media query,
   e o min() impede estouro quando a tela e menor que o minimo. */
.grade { display: grid; gap: var(--e5); }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
/* Indice do blog: coluna larga, leitura editorial. Com minimo menor a
   grade cabe tres por linha e deixa card orfao em numero par. */
.grade-blog { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

/* Grade com a ultima linha centrada.
   Grade CSS ancora todo item numa coluna, entao 7 cards em tres por linha
   terminam em 3+3+1 com o ultimo encostado na esquerda, parecendo erro. Em
   flex com justify-content:center a sobra fica no eixo — 3+3+1 centrado le
   como decisao. A base e fracao exata para a linha cheia nao virar 4 por
   engano, e os cortes trocam a fracao em vez de deixar o auto-fit decidir. */
.grade-centrada { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e5); }
.grade-centrada > * { flex: 0 1 calc((100% - 2 * var(--e5)) / 3); min-width: 280px; }
.grade-centrada-2 > * { flex-basis: calc((100% - var(--e5)) / 2); min-width: 400px; }
@media (max-width: 1000px) {
  .grade-centrada > * { flex-basis: calc((100% - var(--e5)) / 2); }
}
@media (max-width: 680px) {
  .grade-centrada > *, .grade-centrada-2 > * { flex-basis: 100%; min-width: 0; }
}

/* Cabeca de secao centrada: rotulo, titulo e linha de apoio no eixo da pagina.
   Antes era alinhada a esquerda e o titulo ficava colado na borda de um wrap de
   1240px, longe do conteudo que anunciava. */
.cabeca-secao {
  max-width: 760px;
  margin: 0 auto var(--e7);
  text-align: center;
}
.cabeca-secao .apoio { margin-inline: auto; }

/* Centraliza um bloco de texto inteiro — usado nos herois das paginas internas,
   que sao uma coluna so. O heroi da Home nao recebe: ali o texto divide a linha
   com o retrato, e centrar uma coluna ao lado de uma foto desalinha as duas. */
.centro { text-align: center; }
.centro .apoio, .centro > p { margin-inline: auto; }
.centro .linha-botoes { justify-content: center; }

/* Hero: o texto manda, a foto acompanha. Em 50/50 a headline de display
   quebrava em cinco linhas e pesava demais. */
.hero-grade { grid-template-columns: 7fr 5fr; }
@media (max-width: 860px) { .hero-grade { grid-template-columns: 1fr; } }

/* =============================================================================
   COMPONENTES
   ========================================================================== */

/* ---- faixa de eixos (sob o heroi) ----
   Tres palavras separadas por um ponto dourado. O separador e gerado pelo CSS,
   e nao escrito como <li>, por um motivo pratico: como <li> ele era um item de
   flex independente e, quando a linha quebrava no celular, sobrava sozinho no
   inicio da linha de baixo ("• RECORRENCIA"). Aqui ele pertence ao item, entao
   quebra junto. O gap tambem encolhe com a tela, para a linha caber inteira em
   390px em vez de quebrar. */
.faixa { padding: var(--e5) var(--gutter); }
.faixa ul {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--e2) clamp(14px, 4vw, 56px);
  list-style: none; margin: 0 auto; padding: 0; max-width: 1240px;
}
.faixa li {
  display: flex; align-items: center; gap: clamp(14px, 4vw, 56px);
  white-space: nowrap;
  font-size: clamp(13px, 2.6vw, 14px); font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-2);
}
.faixa li + li::before { content: '•'; color: var(--ouro); letter-spacing: 0; }

/* No celular as tres palavras e os dois pontos nao cabem numa linha: sobram
   13px. Em vez de espremer a tipografia ate caber, o separador sai de cena e
   ficam so as palavras, que ai cabem com folga. Em tela muito estreita elas
   quebram — e quebram limpas, sem ponto orfao abrindo a segunda linha. */
@media (max-width: 560px) {
  .faixa li + li::before { content: none; }
  .faixa ul { gap: var(--e2) var(--e4); }
  .faixa li { letter-spacing: 0.12em; }
}

/* ---- tabela comparativa ----
   Estava escrita com estilo inline em cada <td>, o que dava trinta atributos
   style identicos por tabela e nenhum lugar para mudar a regra. */
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-peq); min-width: 600px; }
.tabela th, .tabela td { padding: var(--e3); text-align: left; border-bottom: 1px solid var(--linha); }
.claro .tabela th, .claro .tabela td { border-bottom-color: var(--linha-clara); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela thead th { color: var(--tinta-2); }
.claro .tabela thead th { color: var(--tinta-escura); }

/* ---- rotulo em pilula ----
   Versao do rotulo que a LP usava no topo das secoes centradas: contorno
   dourado, fundo quase transparente. Ancora o eixo central muito melhor do que
   a palavra solta, que some num wrap de 1240px. */
.rotulo-pill {
  display: inline-block; margin: 0 0 var(--e4);
  padding: 9px var(--e5);
  border: 1px solid rgba(244,158,29,0.45); border-radius: var(--r-pill);
  background: var(--ouro-fundo);
  font-size: var(--t-rotulo); font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ouro);
}
.claro .rotulo-pill {
  border-color: rgba(180,72,43,0.40); background: rgba(180,72,43,0.08);
  color: var(--acento-claro);
}

/* ---- trecho em degrade dentro do titulo ----
   `<em class="gradiente">` colore uma expressao do titulo com o degrade da
   marca. Fallback de cor solida antes do clip: navegador sem
   background-clip:text mostra a palavra em ouro, nao invisivel. */
.gradiente {
  font-style: normal;
  color: var(--ouro);
  background: linear-gradient(100deg, var(--vermelho) 0%, var(--ouro) 70%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.claro .gradiente {
  color: var(--acento-claro);
  background: linear-gradient(100deg, var(--acento-claro) 0%, #D9722F 80%);
  -webkit-background-clip: text; background-clip: text;
}

/* ---- card com icone ----
   Chip quadrado com o icone a esquerda do titulo. */
.card-icone { display: grid; grid-template-columns: auto 1fr; gap: var(--e4); align-items: start; }
.icone-chip {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: var(--r-peq);
  border: 1px solid rgba(244,158,29,0.35); background: var(--ouro-fundo);
  color: var(--ouro); flex-shrink: 0;
}
.claro .icone-chip {
  border-color: rgba(180,72,43,0.30); background: rgba(180,72,43,0.08);
  color: var(--acento-claro);
}
.icone-chip svg { width: 22px; height: 22px; display: block; }

/* ---- passos numerados ----
   O numero gigante vive no canto do card, em marca d'agua, e o numero legivel
   fica no fluxo. Era o melhor componente da LP e nao tinha equivalente aqui: o
   .card-num e discreto demais para uma sequencia. */
.passo { position: relative; overflow: hidden; }
.passo::before {
  content: attr(data-passo);
  position: absolute; top: -18px; right: -6px;
  font-size: clamp(76px, 9vw, 124px); font-weight: 800; line-height: 1;
  color: var(--ouro); opacity: 0.07; pointer-events: none;
}
.claro .passo::before { color: var(--acento-claro); opacity: 0.09; }
.passo-num {
  display: block; font-size: clamp(26px, 2.6vw, 34px); font-weight: 800;
  line-height: 1; margin-bottom: var(--e3); color: var(--ouro);
}
.claro .passo-num { color: var(--acento-claro); }

/* ---- comparacao sem/com ----
   Duas colunas de cards e um disco "VS" no meio. O disco e decorativo e some
   no empilhamento do celular, onde "no meio" nao quer dizer nada. */
.vs { position: relative; display: grid; gap: var(--e5); grid-template-columns: 1fr 1fr; }
.vs-titulo {
  align-self: end;
  font-size: var(--t-rotulo); font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase; margin: 0;
}
.vs-item { display: grid; grid-template-columns: auto 1fr; gap: var(--e3) var(--e4); align-items: start; }
.vs-marca { font-size: 20px; line-height: 1.2; }
.vs-nao { color: var(--tinta-3); }
.vs-sim { color: var(--ouro); }
.claro .vs-sim { color: var(--acento-claro); }
/* O card herda a cor do lado so na marca e no rotulo; texto segue o padrao. */
.vs-item h3 { color: var(--tinta); }
.claro .vs-item h3 { color: var(--tinta-escura); }
.vs-disco {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(135deg, var(--vermelho), var(--ouro));
  color: #FFF; font-size: 15px; font-weight: 800; letter-spacing: 0.08em;
  box-shadow: 0 10px 30px rgba(211,55,43,0.40);
}
@media (max-width: 860px) {
  .vs { grid-template-columns: 1fr; }
  .vs-disco { display: none; }
}

/* ---- faixa de chamada sobre marmore ----
   O bloco de conversao da LP: textura da marca ao fundo, selo, tudo centrado.
   A sobreposicao escura existe para o contraste do texto nao depender do ponto
   da textura que calhar de ficar atras dele. */
.faixa-marmore {
  position: relative; isolation: isolate;
  padding: var(--secao) var(--gutter);
  background: var(--preto) center/cover no-repeat;
  text-align: center;
}
.faixa-marmore::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.88) 100%);
}
.faixa-marmore .selo {
  width: 62px; height: 62px; margin: 0 auto var(--e4); display: block;
  border-radius: 50%; box-shadow: 0 0 36px rgba(244,158,29,0.45);
}
.faixa-marmore h2 { margin: 0 auto var(--e4); max-width: 18ch; }
.faixa-marmore .apoio { margin: 0 auto var(--e6); color: var(--tinta-2); }

/* ---- rotulo de secao (eyebrow) ---- */
.rotulo {
  display: block;
  font-size: var(--t-rotulo); font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  margin: 0 0 var(--e4);
}
.escuro .rotulo, .superficie .rotulo { color: var(--ouro); }
.claro .rotulo { color: var(--acento-claro); }

/* ---- texto de apoio ---- */
.apoio { font-size: var(--t-corpo-g); max-width: 62ch; }

/* ---- botoes ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 52px; padding: var(--e4) var(--e6);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: inherit; font-size: 14px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; text-align: center;
  transition: transform var(--transicao), box-shadow var(--transicao),
              background-color var(--transicao), color var(--transicao),
              border-color var(--transicao);
}
/* O degrade da marca aparece AQUI e so aqui. */
.btn-1 {
  background-color: var(--vermelho);
  background-image: linear-gradient(90deg, var(--vermelho), var(--ouro));
  color: #FFF;
  box-shadow: 0 10px 30px rgba(211,55,43,0.28);
}
.btn-1:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(211,55,43,0.38); }

.btn-2 { border-color: var(--linha-forte); color: var(--tinta); }
.btn-2:hover { border-color: var(--ouro); color: var(--ouro); transform: translateY(-2px); }
.claro .btn-2 { border-color: var(--linha-clara); color: var(--tinta-escura); }
.claro .btn-2:hover { border-color: var(--acento-claro); color: var(--acento-claro); }

.btn-3 { /* link com seta, para dentro de card */
  /* 44px de altura mesmo sem fundo visivel: e o alvo de toque minimo, e sem
     isso o link fica com 24px de altura no celular. */
  min-height: 44px; padding: 0; border-radius: 0;
  justify-content: flex-start;
  letter-spacing: 0.06em; font-size: 13px;
}
.escuro .btn-3, .superficie .btn-3 { color: var(--ouro); }
.claro .btn-3 { color: var(--acento-claro); }
.btn-3::after { content: '→'; transition: transform var(--transicao); }
.btn-3:hover::after { transform: translateX(4px); }

.linha-botoes { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* ---- card ---- */
.card {
  background: var(--elevado);
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
  padding: var(--e6);
  display: flex; flex-direction: column; gap: var(--e3);
  transition: border-color var(--transicao), transform var(--transicao);
}
.claro .card { background: var(--branco); border-color: var(--linha-clara); }
a.card:hover, .card-interativo:hover { transform: translateY(-3px); }
.escuro a.card:hover, .superficie a.card:hover { border-color: rgba(244,158,29,0.45); }
.claro a.card:hover { border-color: var(--acento-claro); }

.card h3 { margin: 0; }
.card p { font-size: var(--t-peq); line-height: 1.65; margin: 0; }

/* numero do card (01, 02, 03) */
.card-num {
  font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
}
.escuro .card-num, .superficie .card-num { color: var(--ouro); }
.claro .card-num { color: var(--acento-claro); }

/* ---- lista editorial (linha divisoria, rotulo a esquerda) ---- */
.editorial { list-style: none; margin: 0; padding: 0; }
.editorial > li {
  padding: var(--e5) 0;
  border-top: 1px solid var(--linha);
  display: grid; grid-template-columns: 1fr; gap: var(--e2);
}
.claro .editorial > li { border-top-color: var(--linha-clara); }
/* Cada <li> e um grid proprio: `auto` mediria cada rotulo isoladamente e o
   texto comecaria desalinhado linha a linha. Coluna fixa resolve. */
.editorial-rotulos > li { grid-template-columns: clamp(118px, 13vw, 170px) 1fr; gap: var(--e4); }
/* Numeros tem todos a mesma largura: coluna estreita, sem o vao que a coluna
   de rotulos por extenso precisa. */
.editorial-num > li { grid-template-columns: 56px 1fr; gap: var(--e4); }
.editorial .marca {
  font-size: var(--t-peq); font-weight: 800; letter-spacing: 0.08em;
  padding-top: 2px;
}
.escuro .editorial .marca, .superficie .editorial .marca { color: var(--ouro); }
.claro .editorial .marca { color: var(--acento-claro); }

/* ---- chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; margin: 0; padding: 0; }
.chip {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px var(--e3); border-radius: var(--r-pill);
  border: 1px solid var(--linha); color: var(--tinta-3);
}
.claro .chip { border-color: var(--linha-clara); color: var(--tinta-escura-2); }

/* ---- acordeao: <details> nativo, abre sem JavaScript ---- */
.faq details { border-top: 1px solid var(--linha); }
.claro .faq details { border-top-color: var(--linha-clara); }
.faq details:last-of-type { border-bottom: 1px solid var(--linha); }
.claro .faq details:last-of-type { border-bottom-color: var(--linha-clara); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--e5) 0; font-weight: 700; font-size: var(--t-corpo);
  display: flex; justify-content: space-between; align-items: center; gap: var(--e4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 26px; font-weight: 300; line-height: 1; flex-shrink: 0; }
.faq details[open] summary::after { content: '–'; }
.escuro .faq details[open] summary, .superficie .faq details[open] summary { color: var(--ouro); }
.claro .faq details[open] summary { color: var(--acento-claro); }
.faq details > div { padding-bottom: var(--e5); max-width: 74ch; }

/* ---- breadcrumbs ---- */
.trilha { font-size: var(--t-peq); padding: var(--e4) var(--gutter) 0; }
.trilha ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; padding: 0; }
.trilha li::after { content: '/'; margin-left: var(--e2); color: var(--tinta-3); }
.trilha li:last-child::after { content: ''; }
.trilha a { color: var(--tinta-3); text-decoration: underline; text-underline-offset: 3px; }
.trilha a:hover { color: var(--ouro); }
.trilha [aria-current] { color: var(--tinta-2); }

/* ---- formulario ---- */
.campo { display: block; margin-bottom: var(--e4); }
.campo > span { display: block; font-size: 14px; font-weight: 700; margin-bottom: 7px; color: var(--tinta-escura); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 15px var(--e4);
  font: inherit; font-size: 16px;  /* 16px evita o zoom automatico no iOS */
  border: 1px solid var(--linha-clara); border-radius: var(--r-peq);
  background: var(--branco); color: var(--tinta-escura);
}
.campo textarea { min-height: 104px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acento-claro); }
.campo [aria-invalid="true"] { border-color: var(--vermelho); }
.form-erro { color: #8C2018; font-size: 14px; font-weight: 700; min-height: 20px; }
.form-ok { display: none; color: #1F6B3A; font-size: 14px; font-weight: 700; }

/* =============================================================================
   CABECALHO
   ========================================================================== */

.topo {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); padding: var(--e3) var(--gutter);
  background: rgba(10,9,8,0.90);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--linha);
  transition: box-shadow var(--transicao);
}
.topo-logo img { height: 40px; width: auto; display: block; }

.topo-nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
.topo-nav > ul {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  list-style: none; margin: 0; padding: 0;
}
.topo-nav a:not(.btn) {
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta-3); transition: color var(--transicao);
}
.topo-nav a:not(.btn):hover, .topo-nav a[aria-current] { color: var(--tinta); }
.topo .btn { min-height: 44px; padding: var(--e3) var(--e5); font-size: 11px; gap: 0; }

/* ---- submenu: hover no desktop, <details> no mobile ---- */
.tem-sub { position: relative; }
.tem-sub > button {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; padding: 0; color: var(--tinta-3);
  font: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: color var(--transicao);
}
.tem-sub > button::after { content: '▾'; font-size: 10px; }
.tem-sub > button:hover, .tem-sub[data-aberto] > button { color: var(--tinta); }
.sub {
  position: absolute; top: calc(100% + 14px); left: -16px; min-width: 272px;
  background: var(--elevado); border: 1px solid var(--linha-forte);
  border-radius: var(--r); padding: var(--e2);
  box-shadow: 0 24px 50px rgba(0,0,0,0.6);
  list-style: none; margin: 0;
  display: none;
}
.tem-sub:hover > .sub, .tem-sub:focus-within > .sub, .tem-sub[data-aberto] > .sub { display: block; }
.sub a {
  display: block; padding: var(--e3) var(--e4); border-radius: var(--r-peq);
  font-size: 14px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--tinta-2) !important;
}
.sub a:hover { background: var(--ouro-fundo); color: var(--ouro) !important; }

/* ---- sanduiche ---- */
.sanduiche { display: none; }
.sanduiche > summary {
  list-style: none; cursor: pointer; width: 48px; height: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linha-forte); border-radius: var(--r-peq);
}
.sanduiche > summary::-webkit-details-marker { display: none; }
.barras { position: relative; }
.barras, .barras::before, .barras::after {
  display: block; width: 22px; height: 2px; background: var(--tinta); border-radius: 2px;
  transition: transform var(--transicao), background-color var(--transicao);
}
.barras::before, .barras::after { content: ''; position: absolute; }
.barras::before { transform: translateY(-7px); }
.barras::after  { transform: translateY(7px); }
.sanduiche[open] .barras { background: transparent; }
.sanduiche[open] .barras::before { transform: rotate(45deg); }
.sanduiche[open] .barras::after  { transform: rotate(-45deg); }

/* O painel se posiciona pelo .topo, que ja e sticky (logo, posicionado). */
.sanduiche-painel {
  position: absolute; top: 100%; left: 0; right: 0;
  max-height: calc(100vh - 76px); overflow-y: auto;
  padding: var(--e2) var(--gutter) var(--e5);
  background: #17130F; border-bottom: 2px solid rgba(244,158,29,0.35);
  box-shadow: 0 26px 50px rgba(0,0,0,0.65);
}
.sanduiche-painel ul { list-style: none; margin: 0; padding: 0; }
.sanduiche-painel a {
  display: flex; align-items: center; min-height: 52px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta); border-bottom: 1px solid var(--linha);
}
.sanduiche-painel .sub-mobile a {
  min-height: 44px; padding-left: var(--e4);
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--tinta-3);
}
.sanduiche-painel .btn { width: 100%; margin-top: var(--e4); }

/* =============================================================================
   RODAPE
   ========================================================================== */

.rodape { background: var(--superficie); border-top: 1px solid var(--linha); padding: var(--secao) var(--gutter) var(--e6); }
.rodape h2 { font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ouro); margin: 0 0 var(--e4); }
.rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.rodape a { font-size: var(--t-peq); color: var(--tinta-2); }
.rodape a:hover { color: var(--ouro); }
.rodape-fim {
  margin-top: var(--e7); padding-top: var(--e5); border-top: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; gap: var(--e4); justify-content: space-between;
  font-size: 14px; color: var(--tinta-3);
}

/* =============================================================================
   POPUP DE DIAGNOSTICO
   ==========================================================================
   Criado pelo vegas.js no primeiro clique em um CTA. Nao existe no HTML: sem
   JavaScript o mesmo CTA navega para /diagnostico/, que tem o formulario na
   pagina. */

.popup { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--e4); }
.popup[hidden] { display: none; }
.popup-fundo { position: absolute; inset: 0; background: rgba(5,4,4,0.78); backdrop-filter: blur(4px); }
.popup-cartao {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 2 * var(--e4));
  overflow-y: auto; padding: clamp(24px, 4vw, 40px);
  background: var(--claro); color: var(--tinta-escura);
  border-radius: var(--r-g); box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.popup-cartao .rotulo { color: var(--acento-claro); }
.popup-cartao h2 { font-size: var(--t-h3); margin: 0 0 var(--e3); }
.popup-apoio { font-size: var(--t-peq); color: var(--tinta-escura-2); margin: 0 0 var(--e5); }
.popup-x {
  position: absolute; top: var(--e3); right: var(--e3);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--tinta-escura-2);
}
.popup-x:hover { background: rgba(20,18,16,0.07); color: var(--tinta-escura); }

/* ---- WhatsApp flutuante ---- */
.zap {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 62px; height: 62px; border-radius: 50%; overflow: hidden;
  border: 2px solid #25D366; box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.zap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =============================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 1000px) {
  .topo-nav > ul { display: none; }      /* vira sanduiche */
  .sanduiche { display: block; }
}

@media (max-width: 720px) {
  :root { --t-corpo: 16px; }
  .btn { width: 100%; max-width: 420px; }
  /* O CTA do topo nao acompanha: em largura total engole a logo. */
  .topo .btn { width: auto; max-width: none; padding: 11px 14px; font-size: 10px; }
  .topo-logo img { height: 34px; }
  .editorial-rotulos > li, .editorial-num > li { grid-template-columns: 1fr; gap: var(--e2); }
  .so-largo { display: none; }           /* encurta o CTA do topo */
}

/* =============================================================================
   MOVIMENTO
   ==========================================================================
   O reveal nasce VISIVEL e o JavaScript e que esconde para animar. Assim a
   pagina continua legivel com JavaScript desligado ou quebrado — o contrario
   deixaria o site em branco. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .topo, .zap, .sanduiche, .rodape { display: none; }
  body { background: #FFF; color: #000; }
}

/* Pilula que e link: atalho para um conjunto de paginas sem repetir o texto
   delas. Usado no /servicos/ para apontar os segmentos. */
.chips-link .chip { transition: border-color var(--transicao), color var(--transicao); }
.escuro .chips-link .chip:hover, .superficie .chips-link .chip:hover {
  border-color: var(--ouro); color: var(--ouro);
}
.claro .chips-link .chip:hover { border-color: var(--acento-claro); color: var(--acento-claro); }