/* ============================================================
   Agência — folha de estilo
   ------------------------------------------------------------
   Uma página só, sem framework e sem build. A ordem aqui é a
   ordem da página, para achar as coisas rolando em vez de
   procurando.

   Tudo que muda de cor, fonte ou espaço mora nas variáveis do
   :root. É por elas que a aba Estilo do editor mexe no site
   inteiro de uma vez — e é por isso que valor solto no meio da
   folha (um #E11D2E escrito à mão dentro de uma regra) escapa
   do painel e some do controle de quem edita.

   Este site é escuro do começo ao fim, ao contrário dos outros
   três. Isso muda uma coisa importante: num site claro a
   profundidade vem de uma faixa escura no meio; aqui ela vem da
   luz. Cada seção tem um brilho vermelho vindo de um canto
   diferente, e é a variação de luz de uma faixa para a outra que
   faz a página parecer ter camadas em vez de ser um retângulo
   preto de dez mil pixels de altura.

   Os nomes das variáveis de cor continuam --rs-*, e não --vm-*,
   porque o editor.js procura por esses nomes na aba Global. Cor
   renomeada aqui vira campo em branco no painel.

   O bloco do editor visual fica no fim do arquivo, abaixo de uma
   linha de marca. Não escreva nada depois dela: aquele trecho é
   reescrito inteiro a cada publicação.
   ============================================================ */

/* ============================================================
   1 · Variáveis
   ============================================================ */

:root{
  /* --- vermelho, do mais escuro ao mais claro ---
     Variações de um matiz só, como foi pedido: o mesmo vermelho
     do --rs-500 puxado para o vinho de um lado e para o rosa
     claro do outro. O que muda entre eles é quanta luz têm. */
  --rs-900:#3D0710;    /* vinho quase preto, para brilhos e bordas */
  --rs-700:#8A0F1C;
  --rs-600:#C1121F;
  --rs-500:#E11D2E;    /* o vermelho da marca */
  --rs-300:#FF6B78;    /* rosa claro, para texto de destaque no escuro */
  --rs-100:#FFE1E4;

  /* --- os três fundos ---
     Três degraus de preto, e não um preto só. A diferença entre
     eles é pequena de propósito: num site escuro, degrau grande
     de fundo parece defeito de tela. Quem faz o trabalho pesado
     de separar as seções são os brilhos vermelhos e as bordas. */
  --bg-0:#09080A;      /* o mais escuro, base da página */
  --bg-1:#0F0D10;
  --bg-2:#161318;      /* cartões e caixas */

  /* --- os dois tons que mandam no site --- */
  --ac-1:#E11D2E;      /* botões e preenchimentos — texto branco em cima passa em 4,8:1 */
  --ac-2:#FF4757;      /* links e palavras de destaque — 5,9:1 sobre o fundo */

  /* --- texto ---
     Sobre o --bg-0, o corpo dá 9:1 e o título 19:1. Se você
     escurecer o texto pelo painel, é essa folga que está
     gastando: abaixo de 4,5:1 o site fica ilegível no celular
     em ambiente claro, que é onde ele mais vai ser visto. */
  --tx-1:#FFFFFF;      /* títulos */
  --tx-2:#A8A2A6;      /* corpo */
  /* Medido, e não escolhido no olho: em #6E686D o rótulo de 12px dava
     3,4:1 sobre o fundo do cartão — reprovado. Este tom dá 5,2:1 no
     cartão e 5,6:1 sobre o fundo da página, e continua nitidamente
     mais quieto que o --tx-2. Escurecer daqui reprova de novo, e só
     nos rótulos pequenos, que é onde ninguém repara. */
  --tx-3:#8C868B;      /* rótulos e legendas de número */
  --tx-c1:#FFFFFF;     /* nomes que o editor espera existir */
  --tx-c2:#A8A2A6;

  /* Transparente de propósito: o mesmo filete precisa funcionar
     sobre o fundo da página e sobre o cartão, que é mais claro.
     Cor opaca resolveria um dos dois e estragaria o outro. */
  --linha:rgba(255,255,255,.09);
  --linha-forte:rgba(255,255,255,.16);

  /* --- fontes ---
     Archivo pesada e apertada nos títulos é o que dá o ar de
     agência; Inter no corpo porque em 14px ela é a que menos
     cansa. As duas têm licença livre e vêm do Google Fonts. */
  --ff-tit:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-txt:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* --- escala de texto ---
     O piso do clamp é o que vale no celular: os pisos daqui cabem
     em 320px de largura. Piso grande é a causa mais comum de
     título cortado, e não aparece em nenhum teste feito só no
     computador. */
  --fs-1:0.75rem;
  --fs-2:0.875rem;
  --fs-3:1rem;
  --fs-4:clamp(1.05rem,1.6vw,1.2rem);
  --fs-5:clamp(1.35rem,2.6vw,1.75rem);
  --fs-6:clamp(1.9rem,4.2vw,3rem);
  --fs-7:clamp(2.2rem,5.6vw,3.9rem);
  /* O número gigante da seção de resultados. Só ele usa este
     degrau, e é o único lugar do site onde o texto encosta na
     borda da caixa de propósito. */
  --fs-8:clamp(3.5rem,13vw,9rem);

  /* --- espaços ---
     O espaço acompanha a largura da tela em vez de pular nos
     pontos de quebra. O primeiro número do clamp é o que vale no
     celular, o último é o teto no computador.

     Os dois primeiros degraus são fixos: são distâncias entre um
     rótulo e o seu valor, e não têm por que mudar de tamanho com
     a tela. Do --sp-3 para cima o valor cresce junto com a
     largura, que é o que tira o solavanco de 768px e de 480px
     sem precisar de exceção dentro das media queries. */
  --sp-1:.35rem;
  --sp-2:.7rem;
  --sp-3:clamp(1rem,    .86rem + 0.57vw, 1.375rem);
  --sp-4:clamp(1.375rem, 1.14rem + 0.95vw, 2rem);
  --sp-5:clamp(2rem,     1.63rem + 1.52vw, 3rem);
  --sp-6:clamp(2.5rem,   1.76rem + 3.05vw, 4.5rem);
  --sp-7:clamp(3.5rem,   1.90rem + 6.6vw,  8rem);

  /* --- cantos e sombras --- */
  --r-1:10px;
  --r-2:18px;
  --r-3:999px;
  --sb-1:0 2px 14px rgba(0,0,0,.4);
  --sb-2:0 18px 50px rgba(0,0,0,.5);
  --sb-3:0 30px 80px rgba(0,0,0,.6);
  /* A sombra vermelha dos botões e do que estiver aceso. É ela
     que faz o vermelho parecer emitir luz em vez de ser tinta. */
  --br-1:0 6px 24px rgba(225,29,46,.28);
  --br-2:0 10px 44px rgba(225,29,46,.42);

  --topo-h:76px;
  --env:1200px;
}

/* ============================================================
   2 · Base
   ============================================================ */

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

html{
  scroll-behavior:smooth;
  /* A barra do topo flutua sobre o conteúdo. Sem isto, clicar em
     "Metodologia" para a rolagem com o título escondido atrás
     dela. */
  scroll-padding-top:calc(var(--topo-h) + 20px);

  /* Os blocos que entram de lado começam 32px fora do lugar. Num
     celular de 390px isso sobrava 18px para a direita, e a página
     inteira podia ser arrastada de lado antes de as animações
     rodarem — o defeito clássico de quem anima com translateX.
     "clip" corta sem virar caixa de rolagem, então o cabeçalho
     continua grudando no topo; "hidden" fica só para quem ainda
     não entende "clip". */
  overflow-x:hidden;
  overflow-x:clip;
  /* Celular: só rola na vertical. Sem arrastar de lado e sem
     pinça de zoom — pedido do Samuel. O comparador (.comp) tem o
     próprio touch-action e continua arrastando. */
  touch-action:pan-y;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* Safari do iPhone e navegadores dentro de apps (Instagram,
   WhatsApp) ignoram o overflow do html: o corte precisa estar
   também no body e em cada seção, senão a página arrasta de lado. */
body, main{ overflow-x:clip; max-width:100% }
section, footer{ overflow-x:hidden; overflow-x:clip; max-width:100% }

body{
  touch-action:pan-y;
  margin:0;
  background:var(--bg-0);
  color:var(--tx-2);
  font-family:var(--ff-txt);
  font-size:var(--fs-3);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* Rede de segurança: todo texto desta página é editável pelo
     painel e pode virar uma palavra longa demais. Quebrar dentro
     da caixa é sempre melhor do que vazar pela lateral da tela. */
  overflow-wrap:break-word;
}

img,picture,iframe,svg,video{ display:block; max-width:100% }
img{ height:auto }

h1,h2,h3,h4{
  font-family:var(--ff-tit);
  color:var(--tx-1);
  font-weight:700;
  line-height:1.08;
  margin:0;
  /* Aperto negativo. É o detalhe que separa um título de agência
     de um título de documento do Word — e some se alguém trocar
     a fonte por uma que já venha apertada. */
  letter-spacing:-.025em;
}

p{ margin:0 0 var(--sp-3) }

/* O último parágrafo de uma caixa não empurra o fundo dela para
   baixo — é o que mantém o texto centrado dentro dos cartões.

   A ressalva do .sub-secao não é capricho: "p:last-child" tem
   especificidade maior que ".sub-secao", então ganharia mesmo
   estando antes no arquivo, e zeraria a margem que separa o
   cabeçalho de cada seção do conteúdo dela. */
p:last-child:not(.sub-secao){ margin-bottom:0 }

a{ color:var(--ac-2); text-decoration:none }
a:hover{ color:var(--rs-300) }

:focus-visible{
  outline:2px solid var(--ac-2);
  outline-offset:3px;
  border-radius:3px;
}

.pular{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ac-1); color:#fff;
  padding:.7rem 1.1rem; border-radius:0 0 var(--r-1) 0;
}
.pular:focus{ left:0 }

/* ============================================================
   3 · Peças de texto que se repetem
   ============================================================ */

.env{
  width:min(100% - 2.4rem, var(--env));
  margin-inline:auto;
}

.secao{
  padding:var(--sp-7) 0;
  position:relative;
  /* Os brilhos das seções são desenhados com ::before em posição
     absoluta e podem passar da borda. Sem isto eles vazariam para
     a seção de baixo e o ritmo de luz da página se perderia. */
  isolation:isolate;
}

/* A linha pequena em maiúsculas que anuncia cada seção, com o
   ponto vermelho na frente. O ponto é ::before e não um caractere
   digitado: assim ele acompanha a cor do painel e não some se
   alguém reescrever o texto do rótulo. */
.olho{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--ff-txt);
  font-size:var(--fs-1);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ac-2);
  font-weight:500;
  margin:0 0 var(--sp-3);
}
.olho::before{
  content:"";
  width:6px; height:6px; flex:none;
  border-radius:50%;
  background:var(--ac-1);
  box-shadow:0 0 10px var(--ac-1);
}

.tit-secao{
  font-size:var(--fs-6);
  margin:0 0 var(--sp-3);
  max-width:20ch;
}
.tit-secao--centro{
  text-align:center;
  margin-inline:auto;
  max-width:22ch;
}

.sub-secao{
  max-width:56ch;
  margin:0 0 var(--sp-6);
  font-size:var(--fs-4);
  color:var(--tx-2);
}
.sub-secao--centro{
  text-align:center;
  margin-inline:auto;
}

.centro{ text-align:center }

/* A palavra em vermelho dentro dos títulos. É o que faz a frase
   inteira ter um assunto sem precisar de negrito nem de fonte
   diferente. */
.destaque{ color:var(--ac-2) }

/* Título com o topo em branco e o resto em vermelho, como nos
   títulos grandes de abertura. */
.tit-quebra span{ display:block }

.acoes-centro{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:var(--sp-2);
  margin-top:var(--sp-6);
}

/* O vermelho mais claro marca o que ainda é exemplo e precisa ser
   trocado por informação real antes do site ir para o ar. Todo
   número desta página nasce assim de propósito: número de
   propaganda tem que ser número verdadeiro. */
.a-preencher{ color:var(--rs-300) }

/* ============================================================
   4 · Botões
   ------------------------------------------------------------
   Um só nome de classe, .bt, e variações por modificador. Cada
   botão novo criado no editor nasce com a mesma altura, o mesmo
   canto e o mesmo toque — que é o que impede a página de virar
   uma coleção de botões parecidos, mas nenhum igual.

   52px de altura mínima não é estética: é o alvo de dedo.
   ============================================================ */

.bt{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem;
  min-height:52px;
  padding:.85rem 1.8rem;
  border:1px solid transparent;
  border-radius:var(--r-3);
  font-family:var(--ff-txt);
  font-size:var(--fs-2);
  font-weight:600;
  line-height:1.2;
  letter-spacing:.01em;
  text-align:center;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.bt:hover{ transform:translateY(-2px) }
.bt:active{ transform:translateY(0) }
.bt svg{ width:18px; height:18px; flex:none }

.bt--cheio{
  background:var(--ac-1); color:#fff;
  box-shadow:var(--br-1);
}
.bt--cheio:hover{ background:var(--rs-600); color:#fff; box-shadow:var(--br-2) }

.bt--vazado{
  background:rgba(255,255,255,.04);
  color:var(--tx-1);
  border-color:var(--linha-forte);
}
.bt--vazado:hover{
  border-color:var(--ac-1);
  color:#fff;
  background:rgba(225,29,46,.10);
}

.bt--claro{
  background:#fff; color:#111;
}
.bt--claro:hover{ background:var(--rs-100); color:#111 }

.bt--largo{ width:100% }

/* ============================================================
   5 · Barra do topo
   ------------------------------------------------------------
   Cápsula flutuante, e não uma barra colada na largura toda: é o
   que dá o ar de site novo. Ela flutua sobre o conteúdo, então o
   hero abre com folga em cima para não passar por baixo dela.
   ============================================================ */

.topo{
  position:fixed; top:14px; left:0; right:0; z-index:40;
  display:flex; justify-content:center;
  pointer-events:none;   /* só a cápsula recebe clique, não a faixa toda */
}

.topo__env{
  pointer-events:auto;
  width:min(100% - 2rem, var(--env));
  height:var(--topo-h);
  display:flex; align-items:center; gap:var(--sp-4);
  padding:0 .6rem 0 1.4rem;
  border-radius:var(--r-3);
  border:1px solid var(--linha);
  background:rgba(16,13,16,.72);
  backdrop-filter:blur(16px);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* Classe posta pelo script quando a página sai do topo. Sem ela a
   cápsula fica igual em cima de conteúdo e em cima do nada. */
.topo.is-preso .topo__env{
  background:rgba(12,10,12,.9);
  border-color:var(--linha-forte);
  box-shadow:var(--sb-2);
}

.marca{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--ff-tit);
  font-weight:800;
  font-size:clamp(1.05rem,.85rem + .65vw,1.3rem);
  letter-spacing:-.03em;
  color:var(--tx-1);
  line-height:1;
  min-width:0;
}
.marca:hover{ color:var(--tx-1) }
.marca__sinal{ width:30px; height:30px; color:var(--ac-1); flex:none }
.marca__b{ color:var(--ac-1) }
/* A palavra pequena embaixo do nome, como "assessoria" no
   original. Fica em bloco para cair na linha de baixo. */
.marca__sub{
  display:block;
  font-family:var(--ff-txt);
  font-size:.58rem;
  font-weight:400;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--tx-3);
  margin-top:.15rem;
}

.topo__spacer{ flex:1 }

.nav{ display:flex; align-items:center; gap:var(--sp-4) }
.nav a{
  color:var(--tx-2);
  font-size:var(--fs-2);
  font-weight:400;
  padding:.4rem 0;
  position:relative;
  white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--ac-1);
  transition:right .25s ease;
}
.nav a:hover{ color:#fff }
.nav a:hover::after{ right:0 }

.topo__cta{
  min-height:44px;
  padding:.5rem 1.3rem;
  font-size:var(--fs-2);
}

/* O botão do menu só existe no celular; no computador ele some
   pelo media query lá embaixo. */
.menu-bt{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--linha-forte);
  border-radius:var(--r-1);
  color:var(--tx-1); cursor:pointer;
}
.menu-bt svg{ width:22px; height:22px }

/* ============================================================
   6 · Hero
   ------------------------------------------------------------
   Texto de um lado, formulário do outro. O formulário na primeira
   tela é a diferença entre "vou ver o site" e "deixei meu
   contato": a pessoa não precisa rolar nem procurar por onde
   falar com você.
   ============================================================ */

.hero{
  position:relative;
  padding:calc(var(--topo-h) + var(--sp-7)) 0 var(--sp-7);
  overflow:hidden;
  background:var(--bg-0);
}

/* Os dois brilhos e a malha de pontos do fundo. Ficam num ::before
   e num ::after em vez de virar imagem: não custam download
   nenhum e acompanham a cor quando a paleta mudar no painel. */
.hero::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background:
    radial-gradient(46% 60% at 78% 8%,  rgba(225,29,46,.20) 0%, transparent 60%),
    radial-gradient(50% 55% at 6% 92%, rgba(138,15,28,.22) 0%, transparent 62%);
}
/* A poeira de pontos. É um gradiente repetido de 3px, quase
   invisível de perto e responsável por a área escura não parecer
   um buraco chapado. */
.hero::after{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(75% 75% at 50% 40%, #000 0%, transparent 100%);
  -webkit-mask-image:radial-gradient(75% 75% at 50% 40%, #000 0%, transparent 100%);
}

.hero__env{
  position:relative; z-index:1;
  width:min(100% - 2.4rem, var(--env));
  margin-inline:auto;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:var(--sp-6);
  align-items:center;
}

.hero__tit{
  font-size:var(--fs-7);
  font-weight:800;
  line-height:1.05;
  margin:0 0 var(--sp-4);
  max-width:16ch;
}

.hero__sub{
  font-size:var(--fs-4);
  max-width:46ch;
  margin-bottom:var(--sp-5);
}

/* Os três números embaixo do texto de abertura. Sem caixa e sem
   borda: é uma fileira de fatos, não uma tabela. */
.hero__nums{
  display:flex; flex-wrap:wrap; gap:var(--sp-5);
  margin-bottom:var(--sp-5);
}
.num__val{
  display:block;
  font-family:var(--ff-tit);
  font-weight:800;
  font-size:var(--fs-5);
  color:var(--tx-1);
  letter-spacing:-.03em;
  line-height:1.1;
}
.num__rot{
  display:block;
  font-size:var(--fs-1);
  color:var(--tx-3);
  letter-spacing:.02em;
}

/* --- o cartão do formulário --- */
.forma{
  background:var(--bg-2);
  border:1px solid var(--linha);
  border-radius:var(--r-2);
  padding:var(--sp-4);
  box-shadow:var(--sb-3);
}
.forma__tit{
  font-size:var(--fs-5);
  margin:0 0 .3rem;
}
.forma__sub{
  font-size:var(--fs-2);
  color:var(--tx-3);
  margin:0 0 var(--sp-3);
}

.campo{ margin-bottom:var(--sp-3) }
.campo:last-of-type{ margin-bottom:var(--sp-4) }
.campo label{
  display:block;
  font-size:var(--fs-2);
  color:var(--tx-2);
  margin-bottom:.35rem;
}
.campo input,
.campo select,
.campo textarea{
  width:100%;
  min-height:48px;
  padding:.7rem .9rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--linha);
  border-radius:var(--r-1);
  color:var(--tx-1);
  font-family:var(--ff-txt);
  /* Nunca abaixo de 16px: o iPhone dá zoom sozinho ao tocar num
     campo com letra menor, e a página fica ampliada depois. */
  font-size:max(16px, var(--fs-2));
  transition:border-color .2s ease, background .2s ease;
}
.campo input::placeholder,
.campo textarea::placeholder{ color:var(--tx-3) }
.campo input:focus,
.campo select:focus,
.campo textarea:focus{
  outline:none;
  border-color:var(--ac-1);
  background:rgba(255,255,255,.07);
}
/* A seta do select some no Chrome quando o fundo é escuro; esta
   é a seta desenhada de volta. As opções abertas são pintadas
   pelo sistema, por isso o color-scheme escuro logo abaixo. */
.campo select{
  color-scheme:dark;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8A2A6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .8rem center;
  background-size:16px;
  padding-right:2.4rem;
}
/* A lista aberta é desenhada pelo Windows, que ignora o color-scheme
   e pinta fundo branco com o texto claro herdado daqui: as opções só
   apareciam com o mouse em cima. Cor explícita em cada opção resolve. */
.campo select option{
  background:#1d181c;
  color:#f3eef1;
}
.campo select option[value=""]{ color:#a8a2a6 }
.campo select:invalid,
.campo select.is-vazio{ color:var(--tx-3) }

/* Erro de campo: borda vermelha e a frase logo abaixo dizendo o que
   corrigir. A frase fica vazia (altura zero) até existir erro. */
.campo__erro{
  margin:.35rem 0 0;
  font-size:var(--fs-1);
  line-height:1.35;
  color:#ff6b86;
}
.campo__erro:empty{ display:none }
.campo.is-erro input,
.campo.is-erro select{
  border-color:#ff4d6d;
  background:rgba(255,77,109,.07);
}
.campo.is-ok input,
.campo.is-ok select{ border-color:rgba(34,197,94,.55) }
.campo.is-erro{ animation:treme .32s ease }
@keyframes treme{
  20%{ transform:translateX(-5px) } 40%{ transform:translateX(5px) }
  60%{ transform:translateX(-3px) } 80%{ transform:translateX(2px) }
}
@media (prefers-reduced-motion:reduce){ .campo.is-erro{ animation:none } }

/* Fora da tela e fora do teclado; só robô preenche. */
.campo-mel{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
.forma{ position:relative }
.forma__nota.is-ok{ color:#4ade80 }
.forma__nota.is-erro{ color:#ff6b86 }
.forma__nota{
  font-size:var(--fs-1);
  color:var(--tx-3);
  text-align:center;
  margin:var(--sp-2) 0 0;
}

/* ============================================================
   7 · Faixa de logos
   ------------------------------------------------------------
   Corre sozinha da direita para a esquerda. A lista aparece duas
   vezes no HTML de propósito: é o que faz a volta ser contínua
   em vez de dar um salto quando termina.
   ============================================================ */

.logos{
  padding:var(--sp-5) 0;
  border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha);
  background:var(--bg-1);
  overflow:hidden;
}
.logos__rot{
  text-align:center;
  font-size:var(--fs-1);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--tx-3);
  margin:0 0 var(--sp-4);
}
.esteira{
  display:flex;
  width:max-content;
  gap:var(--sp-6);
  animation:correr 38s linear infinite;
}
/* Parar quando o ponteiro está em cima é o mínimo de educação com
   quem quer ler um nome da lista. */
.logos:hover .esteira{ animation-play-state:paused }
@keyframes correr{
  from{ transform:translateX(0) }
  to  { transform:translateX(-50%) }
}
.esteira__item{
  display:flex; align-items:center; justify-content:center;
  height:44px;
  padding:0 var(--sp-3);
  font-family:var(--ff-tit);
  font-weight:700;
  font-size:var(--fs-4);
  letter-spacing:-.02em;
  color:var(--tx-3);
  white-space:nowrap;
  opacity:.7;
  transition:opacity .25s ease, color .25s ease;
}
.esteira__item:hover{ opacity:1; color:var(--tx-1) }
.esteira__item img{ max-height:44px; width:auto; object-fit:contain }

/* ============================================================
   8 · Serviços
   ------------------------------------------------------------
   Seis cartões. A borda acende em vermelho no toque e um brilho
   nasce no canto de cima — é o "vão se conectando" pedido, feito
   com dois pseudo-elementos e nenhuma biblioteca.
   ============================================================ */

.servicos{ background:var(--bg-0) }
.servicos::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(50% 50% at 85% 0%, rgba(225,29,46,.13) 0%, transparent 65%);
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-3);
}

.card{
  position:relative;
  display:flex; flex-direction:column;
  padding:var(--sp-4);
  border:1px solid var(--linha);
  border-radius:var(--r-2);
  background:var(--bg-2);
  color:var(--tx-2);
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
/* O brilho que nasce no canto de cima no hover. Fica num ::before
   apagado, e não numa mudança de background, para a transição ter
   o que animar — background com gradiente não transiciona. */
.card::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 0%, rgba(225,29,46,.18) 0%, transparent 70%);
  opacity:0;
  transition:opacity .35s ease;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(225,29,46,.5);
  color:var(--tx-2);
}
.card:hover::before{ opacity:1 }
.card > *{ position:relative }

.card__ico{
  width:48px; height:48px;
  margin:0 0 var(--sp-3);
  flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-1);
  background:rgba(225,29,46,.12);
  border:1px solid rgba(225,29,46,.28);
  color:var(--ac-2);
  transition:background .3s ease, color .3s ease;
}
.card__ico svg{ width:22px; height:22px }
.card:hover .card__ico{ background:var(--ac-1); color:#fff }

.card__tit{
  font-size:var(--fs-4);
  font-weight:700;
  margin:0 0 .45rem;
}
.card__txt{
  font-size:var(--fs-2);
  margin:0;
  flex:1;
}

/* ============================================================
   9 · Case de destaque
   ------------------------------------------------------------
   Faixa de foto inteira com o texto por cima. É a seção mais
   pesada da página e por isso tem só uma imagem: o véu escuro por
   cima existe para o texto continuar legível seja qual for a foto
   que você trocar no painel.
   ============================================================ */

.case{
  position:relative;
  padding:var(--sp-7) 0;
  overflow:hidden;
  background:var(--bg-1);
}
.case__foto{
  position:absolute; inset:0;
  z-index:0;
}
.case__foto img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* O véu. Escuro à esquerda, onde fica o texto, e transparente à
   direita, onde a foto pode aparecer. Sem ele, foto clara =
   título branco invisível. */
.case__veu{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(9,8,10,.95) 0%, rgba(9,8,10,.82) 45%, rgba(9,8,10,.35) 100%),
    linear-gradient(0deg, rgba(9,8,10,.9) 0%, transparent 40%);
}
.case__env{
  position:relative; z-index:2;
  width:min(100% - 2.4rem, var(--env));
  margin-inline:auto;
}
.case__tit{
  font-size:var(--fs-6);
  max-width:18ch;
  margin:0 0 var(--sp-3);
}
.case__txt{
  font-size:var(--fs-3);
  max-width:52ch;
  margin-bottom:var(--sp-5);
}

/* Os números do case, em caixinhas de vidro. Vidro e não cor
   sólida: por cima de foto, caixa opaca vira adesivo colado. */
.selos{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
}
.selo{
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--linha-forte);
  border-radius:var(--r-1);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
  min-width:130px;
}

/* ============================================================
   10 · Números
   ------------------------------------------------------------
   O número gigante é o clímax da página. Ele sobe do zero quando
   entra na tela — a contagem está no script.js e depende do
   atributo data-conta no HTML.
   ============================================================ */

.numeros{ background:var(--bg-0) }
.numeros::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 60% at 50% 55%, rgba(225,29,46,.16) 0%, transparent 70%);
}

.gigante{
  font-family:var(--ff-tit);
  font-weight:800;
  font-size:var(--fs-8);
  line-height:.92;
  letter-spacing:-.045em;
  color:var(--tx-1);
  margin:var(--sp-3) 0 var(--sp-2);
  /* O brilho atrás do número. Sem ele o número gigante fica
     branco e chapado no meio do preto. */
  text-shadow:0 0 60px rgba(225,29,46,.55);
}
.gigante__leg{
  font-size:var(--fs-3);
  color:var(--tx-2);
  max-width:40ch;
  margin:0 0 var(--sp-6);
}

.grade-num{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-4);
  padding-top:var(--sp-5);
  border-top:1px solid var(--linha);
}
.grade-num .num__val{ font-size:var(--fs-6) }

/* ============================================================
   11 · Comparador de arrastar
   ------------------------------------------------------------
   Duas listas sobrepostas e uma alça que corta a caixa ao meio. O
   corte é feito por clip-path com a variável --corte, escrita
   pelo script conforme você arrasta. Sem script, a variável fica
   no valor inicial e as duas metades continuam visíveis — não é
   um pedaço de página quebrada.
   ============================================================ */

.compara{ background:var(--bg-1) }

.comp{
  position:relative;
  border:1px solid var(--linha);
  border-radius:var(--r-2);
  overflow:hidden;
  background:var(--bg-2);
  /* touch-action é o que faz o arrasto funcionar no celular sem
     a página rolar junto por baixo do dedo. */
  touch-action:none;
  user-select:none;
  cursor:ew-resize;
}

.comp__lado{
  padding:var(--sp-6) var(--sp-5);
  min-height:340px;
}
/* O lado "depois" fica por cima, recortado pela --corte. O
   clip-path corta a caixa inteira, inclusive o fundo aceso. */
.comp__lado--depois{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 90% at 80% 50%, rgba(225,29,46,.22) 0%, transparent 70%),
    var(--bg-2);
  clip-path:inset(0 0 0 var(--corte,50%));
  text-align:right;
}
.comp__eti{
  display:inline-block;
  font-size:var(--fs-1);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:.4rem 1rem;
  border-radius:var(--r-3);
  margin-bottom:var(--sp-4);
}
.comp__eti--antes{
  background:rgba(255,255,255,.07);
  border:1px solid var(--linha-forte);
  color:var(--tx-2);
}
.comp__eti--depois{
  background:var(--ac-1);
  color:#fff;
  box-shadow:var(--br-1);
}
.comp__ul{ list-style:none; margin:0; padding:0 }
.comp__ul li{
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem 0;
  font-size:var(--fs-3);
}
.comp__lado--depois .comp__ul li{ justify-content:flex-end }
.comp__ul svg{ width:18px; height:18px; flex:none }
.comp__lado--antes .comp__ul li{ color:var(--tx-3) }
.comp__lado--antes svg{ color:var(--tx-3) }
.comp__lado--depois .comp__ul li{ color:var(--tx-1) }
.comp__lado--depois svg{ color:var(--ac-2) }

/* A linha e a alça. A linha é filha da alça para as duas andarem
   juntas com uma variável só. */
.comp__alca{
  position:absolute; top:0; bottom:0;
  left:var(--corte,50%);
  width:2px;
  background:var(--ac-1);
  box-shadow:0 0 22px rgba(225,29,46,.75);
  z-index:3;
}
.comp__botao{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:48px; height:48px;   /* alvo de dedo; abaixo de 44 escorrega */
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--ac-1); color:#fff;
  border:0;
  box-shadow:var(--br-2);
  cursor:ew-resize;
}
.comp__botao svg{ width:20px; height:20px }
.comp__dica{
  text-align:center;
  font-size:var(--fs-2);
  color:var(--tx-3);
  margin:var(--sp-3) 0 0;
}

/* ============================================================
   12 · Metodologia
   ------------------------------------------------------------
   Quatro passos em escada: cada cartão desce um pouco mais que o
   anterior, e uma linha atravessa os quatro. É a tradução do
   "vão se conectando" — dá a leitura de percurso, e não de quatro
   caixas soltas lado a lado.

   No celular a escada some (viraria uma pilha torta) e a linha
   vira vertical.
   ============================================================ */

.metodo{ background:var(--bg-0) }
.metodo::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(55% 50% at 15% 100%, rgba(138,15,28,.20) 0%, transparent 65%);
}

.passos{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-3);
  /* A escada precisa de espaço embaixo para o quarto cartão
     descer sem encostar no fim da seção. */
  padding-bottom:var(--sp-6);
}
/* A linha que liga os quatro. Fica atrás dos cartões e é
   inclinada de leve, acompanhando a descida deles. */
.passos::before{
  content:"";
  position:absolute;
  left:6%; right:6%; top:34%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(225,29,46,.5), rgba(225,29,46,.5), transparent);
  transform:rotate(4.2deg);
  transform-origin:left center;
  z-index:0;
}

.passo{
  position:relative; z-index:1;
  padding:var(--sp-4);
  border:1px solid var(--linha);
  border-radius:var(--r-2);
  background:var(--bg-2);
  transition:transform .3s ease, border-color .3s ease;
}
/* A escada. Quatro degraus escritos à mão porque são quatro; com
   dez isto viraria um cálculo, com quatro é mais claro assim. */
.passo:nth-child(1){ margin-top:0 }
.passo:nth-child(2){ margin-top:var(--sp-5) }
.passo:nth-child(3){ margin-top:calc(var(--sp-5) * 2) }
.passo:nth-child(4){ margin-top:calc(var(--sp-5) * 3) }
.passo:hover{ transform:translateY(-6px); border-color:rgba(225,29,46,.5) }

.passo__n{
  font-family:var(--ff-tit);
  font-size:var(--fs-2);
  font-weight:700;
  color:var(--ac-2);
  letter-spacing:.1em;
  margin:0 0 var(--sp-3);
}
.passo__ico{
  width:44px; height:44px;
  margin:0 0 var(--sp-3);
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-1);
  background:rgba(225,29,46,.12);
  border:1px solid rgba(225,29,46,.28);
  color:var(--ac-2);
}
.passo__ico svg{ width:20px; height:20px }
.passo__tit{ font-size:var(--fs-4); margin:0 0 .45rem }
.passo__txt{ font-size:var(--fs-2); margin:0 }

/* ============================================================
   13 · Equipe
   ------------------------------------------------------------
   Retratos com o nome por cima da própria foto, no rodapé dela.
   Enquanto não houver foto de verdade, o quadro fica com a
   moldura vazia e o aviso — melhor um espaço claramente vazio do
   que uma foto de banco de imagem fingindo ser a sua equipe.
   ============================================================ */

.equipe{ background:var(--bg-1) }

.time{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-3);
}
/* A primeira fileira tem dois retratos maiores, como no modelo:
   fundadores em destaque e o resto do time abaixo. */
.time--topo{ grid-template-columns:repeat(2,1fr) }

.pessoa{
  position:relative;
  border-radius:var(--r-2);
  overflow:hidden;
  border:1px solid var(--linha);
  background:var(--bg-2);
  aspect-ratio:4/5;
  transition:transform .3s ease, border-color .3s ease;
}
.time--topo .pessoa{ aspect-ratio:16/11 }
.pessoa:hover{ transform:translateY(-5px); border-color:rgba(225,29,46,.45) }
.pessoa img{
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
}
/* O véu embaixo, para o nome não sumir em foto de fundo claro. */
.pessoa__legenda{
  position:absolute; left:0; right:0; bottom:0;
  padding:var(--sp-5) var(--sp-3) var(--sp-3);
  background:linear-gradient(0deg, rgba(9,8,10,.95) 0%, transparent 100%);
}
.pessoa__nome{
  font-size:var(--fs-4);
  font-weight:700;
  color:#fff;
  margin:0;
}
.pessoa__cargo{
  font-size:var(--fs-1);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ac-2);
  margin:.2rem 0 0;
}

/* O quadro vazio à espera de foto. O tracejado diz sozinho que
   ali falta alguma coisa, sem precisar de legenda extra. */
.vazio{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:.5rem;
  border:1px dashed var(--linha-forte);
  border-radius:var(--r-2);
  color:var(--tx-3);
  font-size:var(--fs-2);
  text-align:center;
  padding:var(--sp-3);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 10px, transparent 10px 20px),
    var(--bg-2);
}
.vazio svg{ width:26px; height:26px; opacity:.5 }

/* ============================================================
   14 · Perguntas
   ------------------------------------------------------------
   <details> e <summary> de verdade, e não caixas com JavaScript:
   abre e fecha sozinho, funciona com teclado, aparece na busca do
   Ctrl+F e continua funcionando se o script falhar.
   ============================================================ */

.perguntas{ background:var(--bg-0) }

.faq__env{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:var(--sp-6);
  align-items:start;
}

.qa{
  border:1px solid var(--linha);
  border-radius:var(--r-1);
  background:var(--bg-2);
  margin-bottom:var(--sp-2);
  overflow:hidden;
  transition:border-color .25s ease, background .25s ease;
}
.qa[open]{
  border-color:rgba(225,29,46,.45);
  background:
    radial-gradient(60% 100% at 0% 0%, rgba(225,29,46,.10) 0%, transparent 70%),
    var(--bg-2);
}
.qa__p{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  min-height:60px;
  cursor:pointer;
  font-family:var(--ff-tit);
  font-weight:600;
  font-size:var(--fs-3);
  color:var(--tx-1);
  list-style:none;
}
/* O triângulo padrão do <summary>. Sai nos dois motores. */
.qa__p::-webkit-details-marker{ display:none }
.qa__p::marker{ content:"" }
/* O sinal de mais, que vira × quando abre. São dois riscos
   desenhados com pseudo-elementos: um deles gira 90 graus e o
   sinal se transforma sem trocar de caractere. */
.qa__mais{
  position:relative;
  width:22px; height:22px; flex:none;
}
.qa__mais::before,
.qa__mais::after{
  content:"";
  position:absolute; top:50%; left:50%;
  width:13px; height:1.5px;
  background:var(--ac-2);
  transform:translate(-50%,-50%);
  transition:transform .3s ease;
}
.qa__mais::after{ transform:translate(-50%,-50%) rotate(90deg) }
.qa[open] .qa__mais::before{ transform:translate(-50%,-50%) rotate(45deg) }
.qa[open] .qa__mais::after { transform:translate(-50%,-50%) rotate(-45deg) }

.qa__r{
  padding:0 var(--sp-4) var(--sp-4);
  font-size:var(--fs-2);
  color:var(--tx-2);
  margin:0;
}

/* ============================================================
   15 · Chamada final
   ============================================================ */

.final{
  position:relative;
  background:var(--bg-1);
  overflow:hidden;
  text-align:center;
}
.final::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(60% 80% at 50% 110%, rgba(225,29,46,.30) 0%, transparent 65%);
}
.final .env{ position:relative; z-index:1 }
.final__tit{
  font-size:var(--fs-7);
  max-width:18ch;
  margin:0 auto var(--sp-3);
}
.final__sub{
  font-size:var(--fs-4);
  max-width:50ch;
  margin:0 auto var(--sp-5);
}

/* ============================================================
   16 · Rodapé
   ============================================================ */

.rodape{
  background:var(--bg-0);
  border-top:1px solid var(--linha);
  padding:var(--sp-6) 0 var(--sp-4);
}
.rodape__env{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:var(--sp-5);
}
.rodape__txt{
  font-size:var(--fs-2);
  color:var(--tx-3);
  margin:var(--sp-3) 0 0;
  max-width:38ch;
}
.rodape__tit{
  font-size:var(--fs-2);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tx-3);
  margin:0 0 var(--sp-3);
}
.rodape__lista{ list-style:none; margin:0; padding:0 }
.rodape__lista li{ margin-bottom:.15rem }
/* Bloco, e não texto solto: medido no celular, o link ficava com 17px
   de altura, metade do alvo de dedo. O acréscimo é todo em padding
   vertical, então o link cresce só na área de toque — o desenho da
   coluna continua igual. */
.rodape__lista a,
.rodape__lista span{
  display:flex; align-items:center;
  min-height:44px;
  color:var(--tx-2);
  font-size:var(--fs-2);
  line-height:1.3;
}
.rodape__lista a:hover{ color:#fff }
.rodape__fim{
  margin-top:var(--sp-5);
  padding-top:var(--sp-3);
  border-top:1px solid var(--linha);
  font-size:var(--fs-1);
  color:var(--tx-3);
  text-align:center;
}

/* ============================================================
   17 · Botão flutuante do WhatsApp
   ------------------------------------------------------------
   Nasce escondido e o script o mostra depois do hero. Aparecer de
   cara cobriria o formulário da primeira tela.
   ============================================================ */

.zap{
  position:fixed; right:20px; bottom:20px; z-index:35;
  width:58px; height:58px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-3);
  background:#25D366; color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.zap.is-on{ opacity:1; visibility:visible; transform:none }
.zap:hover{ color:#fff; transform:scale(1.06) }
.zap svg{ width:30px; height:30px }

/* ============================================================
   18 · Entrada em cena
   ------------------------------------------------------------
   O script põe .is-in quando o bloco entra na tela. O estado
   inicial fica aqui, e não no script, para não haver um quadro
   com tudo visível antes do JavaScript rodar.

   O atraso sai da variável --d escrita no próprio elemento, e é
   assim que os cartões de uma fileira entram um depois do outro
   sem nenhuma linha de código a mais.
   ============================================================ */

[data-reveal]{
  opacity:0;
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),
             transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0s);
  will-change:opacity, transform;
}
[data-reveal="sobe"]  { transform:translateY(32px) }
[data-reveal="desce"] { transform:translateY(-26px) }
[data-reveal="esquerda"]{ transform:translateX(-34px) }
[data-reveal="direita"] { transform:translateX(34px) }
[data-reveal="cresce"] { transform:scale(.94) }
[data-reveal="aparece"]{ transform:none }

[data-reveal].is-in{
  opacity:1;
  transform:none;
}

/* Quem pediu menos movimento no sistema não recebe movimento
   nenhum — e, principalmente, não fica com a página em branco se
   o script falhar. A esteira de logos também para: faixa correndo
   sozinha é justamente do que quem liga essa opção quer distância. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{ opacity:1; transform:none }
  .esteira{ animation:none }
}

/* Impresso, o site inteiro tem que sair. Sem isto, tudo que ainda
   não tinha entrado em cena sai como página em branco. */
@media print{
  [data-reveal]{ opacity:1; transform:none }
  .zap,.topo,.menu-bt{ display:none }
}

/* ============================================================
   19 · Foto em tela cheia
   ============================================================ */

.lente{
  position:fixed; inset:0; z-index:60;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(6,5,7,.94);
  padding:3rem 1rem;
}
.lente.is-on{ display:flex }
.lente__img{
  max-width:min(94vw,1100px);
  max-height:88vh;
  width:auto; height:auto;
  border-radius:var(--r-1);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.lente__x,.lente__nav{
  position:absolute;
  background:rgba(255,255,255,.12);
  color:#fff; border:0;
  width:46px; height:46px;
  border-radius:var(--r-3);
  font-size:1.6rem; line-height:1;
  cursor:pointer;
}
.lente__x:hover,.lente__nav:hover{ background:rgba(255,255,255,.26) }
.lente__x{ top:18px; right:18px }
.lente__nav--ant{ left:16px; top:50%; transform:translateY(-50%) }
.lente__nav--pro{ right:16px; top:50%; transform:translateY(-50%) }

/* ============================================================
   20 · Telas menores
   ------------------------------------------------------------
   As quebras são as mesmas que o editor conhece: 768px (tablet) e
   480px (celular). Uma quebra escrita aqui e desconhecida do painel
   viraria uma regra invisível para quem edita.

   Nenhum --sp-* é reescrito aqui dentro: eles são clamp() e já
   chegam encolhidos por conta própria. Fixar o valor de novo
   desfaria a fluidez justamente na faixa onde ela mais importa.
   ============================================================ */

@media (max-width:1024px){
  .cards{ grid-template-columns:repeat(2,1fr) }
  .grade-num{ grid-template-columns:repeat(2,1fr) }

  /* A escada vira duas fileiras de dois. Em quatro colunas
     apertadas os cartões ficariam altos e finos, e a linha que
     os liga passaria por cima do texto. */
  .passos{ grid-template-columns:repeat(2,1fr) }
  .passos::before{ display:none }
  .passo:nth-child(n){ margin-top:0 }

  .faq__env{ grid-template-columns:1fr; gap:var(--sp-4) }
  .time{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:768px){
  .nav{
    position:fixed; inset:calc(var(--topo-h) + 22px) 1rem auto 1rem;
    flex-direction:column; align-items:stretch;
    gap:0;
    background:rgba(14,12,15,.98);
    backdrop-filter:blur(16px);
    border:1px solid var(--linha-forte);
    border-radius:var(--r-2);
    box-shadow:var(--sb-3);
    padding:var(--sp-2) var(--sp-3);
    /* Escondido por altura e não por display:none: assim a lista
       continua no fluxo do leitor de tela quando aberta e a
       transição tem para onde ir. */
    max-height:0; overflow:hidden;
    opacity:0; visibility:hidden;
    transition:max-height .3s ease, opacity .25s ease, visibility .3s;
  }
  .nav.is-open{ max-height:70vh; opacity:1; visibility:visible }
  .nav a{ padding:.85rem .3rem; border-bottom:1px solid var(--linha) }
  .nav a:last-child{ border-bottom:0 }
  .nav a::after{ display:none }

  .menu-bt{ display:flex }
  .topo__cta{ display:none }
  .topo__env{ padding-right:1rem }

  /* No celular o texto e o botão vêm primeiro, e o formulário
     depois. Formulário na frente é uma parede de campos antes de
     a pessoa saber o que você faz. */
  .hero__env{ grid-template-columns:1fr; gap:var(--sp-5) }
  .hero__tit{ max-width:none }

  /* No celular os blocos ocupam a largura toda, e um translateX(34px)
     de entrada empurrava o conteúdo para 391px numa tela de 375. O
     "overflow-x:clip" do html impede a rolagem lateral — isso foi
     medido —, mas a caixa de rolagem continua com 391px de largura, e
     a cápsula do topo, que é fixa e centralizada dentro dela, nascia
     8px fora do meio. Aqui as entradas laterais viram verticais: no
     celular ninguém sente falta, e a largura para de crescer. */
  [data-reveal="esquerda"],
  [data-reveal="direita"]{ transform:translateY(28px) }

  .comp__lado{ padding:var(--sp-5) var(--sp-4); min-height:400px }

  .rodape__env{ grid-template-columns:1fr 1fr; gap:var(--sp-4) }
  .rodape__env > :first-child{ grid-column:1/-1 }
}

@media (max-width:480px){
  /* Margem lateral de 17px de cada lado: com 14px o texto encostava
     na borda da tela e a página parecia apertada. */
  .env,.topo__env,.hero__env,.case__env{ width:min(100% - 2.2rem, var(--env)) }
  .topo__env{ width:min(100% - 1.6rem, var(--env)) }

  .cards{ grid-template-columns:1fr }
  .passos{ grid-template-columns:1fr }
  .grade-num{ grid-template-columns:repeat(2,1fr); gap:var(--sp-3) }
  .time,.time--topo{ grid-template-columns:1fr }

  .hero__nums{ gap:var(--sp-4) }
  .hero__acoes{ flex-direction:column; align-items:stretch }
  .hero__acoes .bt{ width:100% }
  .acoes-centro .bt{ width:100% }

  .selo{ flex:1 1 44%; min-width:0 }

  /* O comparador fica mais alto no celular porque as duas listas
     ficam mais estreitas e cada linha quebra em duas. */
  .comp__lado{ min-height:460px }
  .comp__ul li{ font-size:var(--fs-2) }

  .rodape__env{ grid-template-columns:1fr }

  .zap{ right:14px; bottom:14px; width:52px; height:52px }
  .zap svg{ width:26px; height:26px }
}

/* ============================================================
   17 · Ajustes do Coliseu
   ------------------------------------------------------------
   Quatro regras que nasceram do conteúdo real, e não do modelo.
   Ficam no fim do arquivo, mas ACIMA da linha do editor: o que
   está abaixo dela é reescrito inteiro a cada publicação.
   ============================================================ */

/* O título da primeira tela ficou maior, como foi pedido. O piso
   subiu de 2,2rem para 2,6rem e o teto de 3,9rem para 4,8rem; o
   max-width caiu junto, de 16 para 14 caracteres, senão a frase
   deixa de quebrar nos dois pontos certos — depois de "post." e
   antes de "entrando" — e vira um bloco de texto grande em vez de
   uma frase com pausa. */
.hero__tit{
  font-size:clamp(2.6rem,6.2vw,4.8rem);
  max-width:14ch;
}
/* Este bloco está DEPOIS das quebras lá de cima, então ele venceria
   o ".hero__tit{max-width:none}" dos 768px e devolveria a coluna
   estreita ao celular — que é justamente onde ela não cabe. Por isso
   a repetição: não é descuido, é a ordem da cascata cobrando. */
@media (max-width:768px){
  .hero__tit{ max-width:none }
}

/* Uma marca só, então nada de esteira rolante: palavra sozinha
   dando voltas na tela grita "não tenho cliente". Parada e
   centralizada, ela é só um fato. */
.logos__uma{
  display:flex;
  justify-content:center;
}
.logos__uma .esteira__item{ opacity:1; color:var(--tx-2) }

/* O time é uma pessoa. Sem isto, o card único esticaria na largura
   de um terço da grade e ficaria encostado à esquerda, parecendo
   que dois irmãos dele não carregaram. */
.time--solo{
  grid-template-columns:minmax(0,440px);
  justify-content:center;
}

/* A linha que diz que o case foi feito de dentro da escola. Menor
   que o texto do case e acima dele, porque a ressalva só serve se
   for lida ANTES dos números — depois, já não é ressalva. */
.case__nota{
  font-size:var(--fs-2);
  color:var(--tx-3);
  margin:0 0 var(--sp-2);
  padding-left:.85rem;
  border-left:2px solid var(--ac-1);
}

/* ============================================================
   21 · Movimento — o site que se mexe
   ------------------------------------------------------------
   Pedido do Samuel em 10/10/2026: mais lúdico, mais coisa se
   mexendo. Tudo aqui é decoração por cima do conteúdo que já
   existia: se este bloco inteiro sumir, a página continua igual
   e legível. E nada roda para quem pediu menos movimento — a
   regra do fim do bloco desliga tudo.

   Só transform e opacity animam. São as duas propriedades que o
   navegador move sem recalcular a página, e é isso que mantém o
   celular liso mesmo com dez coisas flutuando.
   ============================================================ */

/* --- barra de leitura no topo --- */
.progresso{
  position:fixed; left:0; right:0; top:0; z-index:60;
  height:3px; pointer-events:none;
}
.progresso span{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--rs-700), var(--ac-1), var(--rs-300));
  transform-origin:left center;
  transform:scaleX(var(--lido,0));
  box-shadow:0 0 12px rgba(225,29,46,.7);
}

/* --- o palco do hero --- */
.palco{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
/* O brilho que segue o ponteiro. O script escreve --px e --py no
   .hero; parado (ou no celular) ele fica no canto de cima. */
.luz{
  position:absolute;
  width:520px; height:520px;
  left:var(--px,70%); top:var(--py,20%);
  margin:-260px 0 0 -260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(225,29,46,.22) 0%, transparent 65%);
  transition:left .5s cubic-bezier(.22,.61,.36,1), top .5s cubic-bezier(.22,.61,.36,1);
}
.bolha{
  position:absolute; border-radius:50%;
  filter:blur(2px);
  background:radial-gradient(circle at 30% 30%, rgba(255,107,120,.55), rgba(225,29,46,.18) 55%, transparent 72%);
  animation:boiar 14s ease-in-out infinite;
}
.bolha--1{ width:180px; height:180px; left:50%; top:4%; opacity:.7 }
.bolha--2{ width:90px;  height:90px;  left:8%;  top:70%; animation-duration:11s; animation-delay:-4s }
.bolha--3{ width:60px;  height:60px;  left:88%; top:78%; animation-duration:9s;  animation-delay:-2s }

/* Os ícones em vidro. Cada um boia num ritmo, para nunca andarem
   em fila — movimento sincronizado parece carregamento travado. */
.flutua{
  position:absolute;
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  color:var(--rs-300);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  animation:boiar 9s ease-in-out infinite;
}
.flutua svg{ width:24px; height:24px }
.flutua--1{ left:47%; top:16%; animation-delay:-1s; --gira:-8deg }
.flutua--2{ left:36%; top:7%; animation-duration:11s; animation-delay:-3s; --gira:10deg }
.flutua--3{ left:53.5%; top:60%; animation-duration:10s; animation-delay:-5s; --gira:-6deg }
.flutua--4{ left:93%; top:8%;  animation-duration:12s; animation-delay:-2s; --gira:12deg }
.flutua--5{ left:46%; top:93%; animation-duration:8s;  animation-delay:-6s; --gira:-10deg }

@keyframes boiar{
  0%,100%{ transform:translate(0,0) rotate(0) }
  33%    { transform:translate(10px,-18px) rotate(var(--gira,6deg)) }
  66%    { transform:translate(-8px,10px) rotate(calc(var(--gira,6deg) * -.5)) }
}

/* --- a pílula com a palavra que troca --- */
.gira{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:0 0 var(--sp-3);
  padding:.45rem 1rem .45rem .8rem;
  border:1px solid rgba(225,29,46,.35);
  border-radius:var(--r-3);
  background:rgba(225,29,46,.08);
  font-size:var(--fs-2);
  color:var(--tx-2);
}
.gira__ponto{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--ac-1);
  animation:pingo 1.8s ease-out infinite;
}
@keyframes pingo{
  0%  { box-shadow:0 0 0 0 rgba(225,29,46,.6) }
  100%{ box-shadow:0 0 0 10px rgba(225,29,46,0) }
}
.gira__caixa{ display:inline-block; overflow:hidden; vertical-align:bottom; height:1.5em }
.gira__palavra{
  display:inline-block;
  font-weight:700; color:var(--tx-1);
  transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
}
.gira__palavra.is-sai{ transform:translateY(-110%); opacity:0 }
.gira__palavra.is-entra{ transform:translateY(110%); opacity:0; transition:none }

/* O destaque vermelho dos títulos ganha um brilho que passa. */
.destaque{
  background:linear-gradient(100deg, var(--ac-2) 0%, var(--ac-2) 40%, #fff 50%, var(--ac-2) 60%, var(--ac-2) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:reflexo 5.5s ease-in-out infinite;
}
@keyframes reflexo{
  0%,55%{ background-position:100% 0 }
  100%  { background-position:-50% 0 }
}

/* --- faixa em movimento --- */
.faixa{
  position:relative;
  padding:var(--sp-5) 0;
  background:var(--bg-0);
  overflow:hidden;
  border-bottom:1px solid var(--linha);
}
.faixa__linha{ display:flex; overflow:hidden }
.faixa__linha + .faixa__linha{ margin-top:.4rem }
.faixa__trilho{
  display:flex; align-items:center; gap:1.4rem;
  width:max-content;
  padding-right:1.4rem;
  animation:correr 32s linear infinite;
}
.faixa__linha--volta .faixa__trilho{ animation-direction:reverse; animation-duration:38s }
.faixa:hover .faixa__trilho{ animation-play-state:paused }
.faixa span{
  font-family:var(--ff-tit);
  font-weight:800;
  font-size:clamp(1.8rem,5vw,3.6rem);
  letter-spacing:-.03em;
  line-height:1.1;
  color:var(--tx-1);
  white-space:nowrap;
}
/* Letra vazada: só o contorno. Alternar cheia e vazada é o que
   dá ritmo à faixa sem precisar de cor nova. */
.faixa span.oco{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.45);
}
.faixa i{
  display:inline-block;
  font-style:normal;
  color:var(--ac-1);
  font-size:clamp(1.1rem,2.6vw,1.8rem);
  animation:girar 6s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg) } }

/* --- cartões de serviço: inclinação e lanterna ---
   O script escreve --rx/--ry (inclinação) e --mx/--my (onde está
   o ponteiro). Sem ponteiro fino — celular — nada disso é escrito
   e o cartão fica só com o hover que já tinha. */
.cards{ perspective:1000px }
.card{ transition:transform .35s cubic-bezier(.22,.61,.36,1), border-color .3s ease, background .3s ease }
.card.is-mira{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
  transition:transform .08s linear, border-color .3s ease;
}
.card::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.09), transparent 60%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.card:hover::after{ opacity:1 }
.card:hover .card__ico{ animation:sacode .6s ease }
@keyframes sacode{
  0%,100%{ transform:rotate(0) scale(1) }
  25%    { transform:rotate(-12deg) scale(1.12) }
  60%    { transform:rotate(9deg) scale(1.08) }
}

/* --- botão cheio: magnético e com reflexo ---
   O script escreve --bx/--by quando o ponteiro chega perto. O
   reflexo é um ::after que atravessa o botão de tempos em tempos. */
.bt--cheio{
  position:relative; overflow:hidden; isolation:isolate;
  transform:translate(var(--bx,0px),var(--by,0px));
}
.bt--cheio:hover{ transform:translate(var(--bx,0px),calc(var(--by,0px) - 2px)) }
.bt--cheio::after{
  content:"";
  position:absolute; top:0; bottom:0; left:-60%;
  width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
  animation:varre 4.5s ease-in-out infinite;
  z-index:-1;
}
@keyframes varre{
  0%,70%{ left:-60% }
  100%  { left:130% }
}

/* --- case: foto que respira e desliza com a rolagem --- */
.case__foto{ inset:-8% 0; transform:translateY(var(--sobe,0px)) }
.case__foto img{ animation:respira 22s ease-in-out infinite alternate }
@keyframes respira{
  from{ transform:scale(1.04) }
  to  { transform:scale(1.14) }
}
.selo{ transition:transform .3s ease, border-color .3s ease }
.selo:hover{ transform:translateY(-4px) rotate(-1.5deg); border-color:var(--ac-1) }

/* --- número gigante pulsando a luz --- */
.gigante{ animation:pulsa 3.6s ease-in-out infinite }
@keyframes pulsa{
  0%,100%{ text-shadow:0 0 40px rgba(225,29,46,.45) }
  50%    { text-shadow:0 0 90px rgba(225,29,46,.85), 0 0 20px rgba(255,107,120,.4) }
}

/* --- método: a linha se desenha com a rolagem ---
   Mesma geometria da linha fina do bloco 12, só que acesa e
   esticada pelo --trilha que o script escreve de 0 a 1. */
.passos::after{
  content:"";
  position:absolute;
  left:6%; right:6%; top:34%;
  height:3px; margin-top:-1px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--rs-700), var(--ac-1), var(--rs-300));
  box-shadow:0 0 14px rgba(225,29,46,.8);
  transform:rotate(4.2deg) scaleX(var(--trilha,0));
  transform-origin:left center;
  z-index:0;
}
.passo.is-in .passo__ico{ animation:acende .9s cubic-bezier(.22,.61,.36,1) both; animation-delay:calc(var(--d,0s) + .35s) }
@keyframes acende{
  0%  { transform:scale(.6); box-shadow:0 0 0 0 rgba(225,29,46,.7) }
  60% { transform:scale(1.15) }
  100%{ transform:scale(1); box-shadow:0 0 0 14px rgba(225,29,46,0) }
}
.passo__n{ transition:letter-spacing .3s ease }
.passo:hover .passo__n{ letter-spacing:.3em }

/* --- retrato com etiquetas em volta --- */
.pessoa-palco{ position:relative; padding:var(--sp-4) 0 }
.pessoa-palco::before{
  content:"";
  position:absolute; inset:2% -12%;
  border-radius:50%;
  background:conic-gradient(from 0deg, transparent, rgba(225,29,46,.35), transparent 40%);
  filter:blur(30px);
  animation:girar 12s linear infinite;
  z-index:0;
}
.pessoa-palco .pessoa{ z-index:1 }
.pessoa img{ transition:transform .6s cubic-bezier(.22,.61,.36,1) }
.pessoa:hover img{ transform:scale(1.05) }
.etiqueta{
  position:absolute; z-index:2;
  padding:.45rem .85rem;
  border-radius:var(--r-3);
  background:rgba(22,19,24,.88);
  border:1px solid var(--linha-forte);
  backdrop-filter:blur(8px);
  box-shadow:var(--sb-1);
  color:var(--tx-1);
  font-size:var(--fs-2); font-weight:600;
  white-space:nowrap;
  animation:boiar 7s ease-in-out infinite;
}
.etiqueta--1{ left:-14%;  top:14%; --gira:-4deg }
.etiqueta--2{ right:-12%; top:30%; animation-delay:-2s; --gira:5deg }
.etiqueta--3{ left:-10%;  top:62%; animation-delay:-4s; --gira:4deg }
.etiqueta--4{ right:-14%; top:78%; animation-delay:-1s; --gira:-5deg }

/* --- botão do WhatsApp com onda e balão --- */
.zap::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  border:2px solid #25D366;
  animation:onda 2.4s ease-out infinite;
}
@keyframes onda{
  0%  { transform:scale(1); opacity:.8 }
  100%{ transform:scale(1.7); opacity:0 }
}
.zap__balao{
  position:fixed; right:88px; bottom:30px; z-index:35;
  padding:.6rem .95rem;
  border-radius:16px 16px 4px 16px;
  background:#fff; color:#111;
  font-size:var(--fs-2); font-weight:600;
  box-shadow:var(--sb-2);
  opacity:0; transform:translateX(10px) scale(.9);
  transform-origin:right bottom;
  transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.zap__balao.is-on{ opacity:1; transform:none }

/* --- telas menores --- */
@media (max-width:1024px){
  .passos::after{ display:none }
}
@media (max-width:768px){
  .flutua--1,.flutua--2,.flutua--3,.bolha--1{ display:none }
  .flutua{ width:44px; height:44px; border-radius:13px }
  .flutua svg{ width:20px; height:20px }
  .luz{ width:360px; height:360px; margin:-180px 0 0 -180px }
  /* No computador as etiquetas saem para fora do retrato. No
     celular não existe "lado de fora": elas entram na moldura, ou
     a página ganharia largura (os 375 → 389 do translateX). */
  .etiqueta--1,.etiqueta--3{ left:4% }
  .etiqueta--2,.etiqueta--4{ right:4% }
  /* No celular a etiqueta entra no cartão: sobe para não tapar o cargo. */
  .etiqueta--3{ top:52% }
  .etiqueta--4{ top:66% }
  .pessoa-palco::before{ inset:4% 0 }
}
@media (max-width:480px){
  /* Enfeites do topo que nascem colados na borda direita: num
     celular estreito ficam cortados pela metade e parecem defeito. */
  .flutua--4, .bolha--3{ display:none }
  /* A etiqueta "Comercial" descia em cima do nome na foto. */
  .etiqueta--4{ top:43% }
  .zap__balao{ right:76px; bottom:22px }
  .gira{ font-size:var(--fs-1) }
}

/* Menos movimento: tudo parado, nada escondido. A regra geral do
   bloco 18 já encurta as animações; aqui as infinitas saem de vez,
   para nada ficar piscando num quadro só. */
@media (prefers-reduced-motion:reduce){
  .bolha,.flutua,.etiqueta,.faixa__trilho,.faixa i,.destaque,
  .gigante,.bt--cheio::after,.zap::before,.gira__ponto,
  .pessoa-palco::before,.case__foto img{ animation:none !important }
  .destaque{ background:none; -webkit-text-fill-color:currentColor; color:var(--ac-2) }
  .passos::after{ transform:rotate(4.2deg) scaleX(1) }
}

/* ==== DAQUI PARA BAIXO É DO EDITOR VISUAL — não edite à mão ==== */