/* ==========================================================================
   DROP AGENCY - landing page V2
   Gerado por ferramentas/importar-v2.py a partir do canvas da cliente.

   A V2 mantem os estilos inline que vieram do canvas: sao eles que definem
   o visual que a cliente aprovou, e mexer neles aqui so criaria diferenca.
   Este arquivo cuida do que NAO cabe inline: keyframes, hover, foco, media
   query e estado.

   As regras de hover/foco usam !important de proposito. Declaracao inline
   vence qualquer seletor de classe, entao sem isso o hover nunca aplicaria.
   ========================================================================== */

:root { --nav-h: 70px; }

/* A nav e fixed, entao a ancora tem que parar exatamente na altura dela.

   UM mecanismo so: scroll-padding no container. scroll-padding-top do html e
   scroll-margin-top do alvo SOMAM (70 + 70 = 140), e a secao parava meia
   barra abaixo, deixando aparecer uma listra da secao anterior. Por isso o
   scroll-margin que veio do canvas (clamp(64px,14vw,86px), inline) e zerado.
   Precisa de !important: e declaracao inline. */
html { scroll-padding-top: var(--nav-h); }
section[id], footer[id] { scroll-margin-top: 0 !important; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #F5F5F6;
  color: #17171B;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #E63946; text-decoration: none; }
input, select, textarea, button { font-family: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* --- barra de rolagem: some só a VERTICAL da página ----------------------
   Pedido do cliente. A página continua rolando por roda, teclado, gesto e
   arrasto: some o desenho da barra, não o scroll.

   As esteiras HORIZONTAIS (cases, depoimentos e os cards da seção 03) ficam
   com a barra nativa, por decisão do cliente: ali ela é a única pista de que
   há mais conteúdo ao lado, e o conjunto lê melhor com ela.

   Custo assumido na vertical: numa página de 14 seções o visitante perde a
   referência de quanto falta. Se incomodar, o substituto é uma barra de
   progresso fina no topo, presa à nav. */
html, body {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* Edge legado */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* --- animacoes, vindas do canvas --------------------------------------- */
@keyframes dropZoom      { from { opacity:0; transform:scale(2.6) rotate(-18deg); } to { opacity:1; transform:scale(1) rotate(0deg); } }
@keyframes dropZoomFaint { from { opacity:0; transform:scale(2.6) rotate(-18deg); } to { opacity:.05; transform:scale(1) rotate(0deg); } }
@keyframes dropSpin      { to { transform: rotate(360deg); } }
@keyframes dropRise      { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes dropMarquee   { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes dropFlow      { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
@keyframes dropPulse     { 0%,100% { opacity:.35; } 50% { opacity:1; } }
@keyframes dropRipple    { 0% { transform:scale(1); opacity:.55; } 100% { transform:scale(2.1); opacity:0; } }
@keyframes dropCore      { 0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(230,57,70,.35); } 50% { transform:scale(1.18); box-shadow:0 0 0 10px rgba(230,57,70,0); } }
@keyframes dropOrbitIn   { from { opacity:0; transform:translate(-50%, calc(-50% + 20px)); } to { opacity:1; transform:translate(-50%,-50%); } }

/* --- nav: o canvas trocava por JS no resize, aqui e media query --------- */
.so-estreito { display: none !important; }
@media (max-width: 879px) {
  .so-largo    { display: none !important; }
  .so-estreito { display: inline-flex !important; }
}

/* ==========================================================================
   O PRELOADER
   O simbolo nasce centrado na tela, com a barra enchendo embaixo, e no fim
   VIAJA ate a posicao exata dele no hero. Tecnica FLIP: mede-se o destino,
   aplica-se transform no que esta na tela e deixa-se a transicao correr.

   NUNCA existem dois simbolos visiveis. O do hero fica em opacity 0 enquanto
   .carregando estiver no <html>, e so acende no quadro em que o do preloader
   chega no lugar dele e some.

   Tudo pendurado em html.carregando: sem JS a classe nunca entra, o overlay
   fica display:none e a pagina abre direto.
   ========================================================================== */
.preloader { display: none; }

html.carregando { overflow: hidden; }
html.carregando body { overflow: hidden; }

html.carregando .preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(46px,7vh,64px);
  background: #08080A;
  transition: background-color .55s ease;
}
/* .saindo apaga o FUNDO, nunca o overlay inteiro: com opacity:0 no elemento
   o simbolo, que e filho, some junto e a viagem nao chega a ser vista. Aqui
   so a cor de fundo vai a transparente, o simbolo segue opaco ate pousar, e
   o overlay e removido do DOM no fim. */
html.carregando .preloader.saindo {
  background-color: transparent;
  pointer-events: none;
}

/* o palco e o que o FLIP move: o transform vai nele, nao no svg */
.preloader-palco {
  position: relative;
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  will-change: transform;
}
.preloader-simbolo { width: 132px; height: 132px; display: block; }

/* os tres arcos se desenham, na mesma linguagem da entrada do hero */
.preloader-simbolo .sb-arco {
  stroke-dasharray: 1.05;
  stroke-dashoffset: 1.05;
  animation: sbTraco .95s cubic-bezier(.16,1,.3,1) both;
}
.preloader-simbolo .sb-a1 { animation-delay: .05s; }
.preloader-simbolo .sb-a2 { animation-delay: .20s; }
.preloader-simbolo .sb-a3 { animation-delay: .35s; }
.preloader-simbolo .sb-nucleo {
  transform-origin: 50px 50px;
  animation: sbNucleo .6s .75s cubic-bezier(.16,1,.3,1) both;
}

/* O movimento continuo de "carregando" fica NESTE anel, nao nos arcos.
   Girar os arcos obrigaria a devolve-los a rotate(0) antes da viagem, e
   qualquer sobra faria o simbolo saltar ao encostar no hero. */
.preloader-anel {
  position: absolute;
  top: 50%; left: 50%;
  margin: -89px 0 0 -89px;
  width: 178px;
  height: 178px;
  border: 1px solid rgba(244,244,245,.10);
  border-top-color: rgba(230,57,70,.75);
  border-radius: 50%;
  animation: dropSpin 1.5s linear infinite;
}

.preloader-rodape {
  flex: 0 0 auto;
  width: min(230px, 62vw);
  text-align: center;
  transition: opacity .35s ease;
}
.preloader.saindo .preloader-rodape,
.preloader.saindo .preloader-anel { opacity: 0; }

.preloader-barra {
  height: 2px;
  background: rgba(244,244,245,.12);
  overflow: hidden;
}
.preloader-barra span {
  display: block;
  height: 100%;
  width: 0%;
  background: #E63946;
  transition: width .3s ease;
}
.preloader-legenda {
  margin: 14px 0 0;
  font-family: 'Lexend', sans-serif;
  font-size: 11px;
  letter-spacing: .24em;
  color: #7E7E88;
  font-variant-numeric: tabular-nums;
}
.preloader-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- o que o hero faz enquanto o preloader esta na tela ------------------ */

/* o simbolo do hero fica apagado E sem a animacao de entrada: e a medida
   dele parado que serve de destino para o FLIP. Com a dropZoom rodando, o
   rect medido seria o de uma escala intermediaria e o simbolo saltaria. */
/* O SIMBOLO DO HERO NAO ANIMA QUANDO O PRELOADER RODA.

   O `*` nao e preguica: alem da dropZoom no proprio <svg>, cada .sb-arco tem
   a sua sbTraco (atrasos de .55s, .75s e .95s) e o .sb-nucleo tem a sbNucleo
   (atraso de 1,35s). Desligar so o container deixa os filhos animando por
   baixo, invisiveis, e no pouso o simbolo acende PELA METADE: medido, arco
   interno com 33% do traco e nucleo ainda em opacity 0. O do preloader sumia
   completo e entrava um incompleto que terminava de se desenhar sozinho.
   Era a "segunda animacao" que aparecia na logo.

   Quem anima este simbolo e o preloader, durante o voo. */
html.carregando .hero-simbolo,
html.carregando .hero-simbolo * { animation: none !important; }
html.carregando .hero-simbolo { opacity: 0; }

/* Os dois aneis do hero. A entrada e so de opacidade de proposito: o giro
   ja usa transform, e duas animacoes disputando a mesma propriedade fazem a
   ultima ganhar. Elas comecam junto com a viagem, entao o simbolo pousa
   DENTRO de uma composicao que ja se montou. */
.hero-anel { animation: dropAnelIn .9s cubic-bezier(.16,1,.3,1) both, dropSpin 46s linear infinite; }
.hero-anel--2 { animation: dropAnelIn .9s .12s cubic-bezier(.16,1,.3,1) both, dropSpin 26s linear infinite reverse; }
@keyframes dropAnelIn { from { opacity: 0; } to { opacity: 1; } }

/* a marca d'agua levava 2,6s e ainda estava crescendo bem depois do pouso */
.hero-simbolo-fundo { animation-duration: 1.6s !important; }

/* Posta pelo JS ao aterrissar. Sem ela, tirar html.carregando devolve a
   dropZoom ao simbolo e ele faz um SEGUNDO zoom logo depois de pousar: quem
   ja animou foi o do preloader, durante a viagem. */
.hero-simbolo.ja-entrou,
.hero-simbolo.ja-entrou * { animation: none !important; }
.hero-simbolo.ja-entrou { opacity: 1; }
/* estado final de cada propriedade que as animacoes desligadas deixariam */
.hero-simbolo.ja-entrou .sb-arco { stroke-dashoffset: 0; }
.hero-simbolo.ja-entrou .sb-nucleo { transform: none; opacity: 1; }

/* As entradas do hero e da nav esperam ate o voo COMECAR, nao ate ele
   acabar. O JS posta .revelando no primeiro quadro da viagem, e a partir dai
   os textos sobem, os aneis acendem e a marca d'agua cresce ENQUANTO o
   simbolo viaja. Soltando so no pouso viravam dois movimentos separados: o
   simbolo chegava e o hero comecava a montar depois.

   Precisa de !important porque a shorthand `animation` inline reseta o
   play-state para running. */
html.carregando:not(.revelando) #topo *,
html.carregando:not(.revelando) .nav * { animation-play-state: paused !important; }

/* --- movimento reduzido ------------------------------------------------- */
/* o preloader continua aparecendo, porque progresso e informacao, mas o
   simbolo nao viaja: o overlay so apaga e o do hero acende no lugar */
@media (prefers-reduced-motion: reduce) {
  .preloader-anel { animation: none; border-top-color: rgba(230,57,70,.75); }
  .preloader-simbolo .sb-arco { stroke-dashoffset: 0; }
  .preloader-simbolo .sb-nucleo { animation: none; }
}

/* ==========================================================================
   A NAV
   Refeita em 01/09/2026. O canvas entregava uma barra sempre solida, com os
   quatro links sumindo abaixo de 880px sem nada no lugar: em celular a pagina
   ficava sem navegacao nenhuma.

   Agora: transparente sobre o hero, solida ao rolar, secao ativa marcada, e
   um menu de verdade no mobile.
   ========================================================================== */
/* fixed e nao sticky: sticky ocupa espaco proprio e empurra o hero para
   baixo, entao nunca ha nada atras dela e "transparente" vira a cor do body,
   que aqui e claro. Fixed deixa a barra flutuar sobre o topo escuro do hero.
   O espaco que ela deixaria de ocupar volta como padding-top no #topo. */
.nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
/* .solida entra por JS depois de 40px de scroll. O hero e escuro, entao a
   barra pode nascer transparente sem prejudicar a leitura dos links */
.nav.solida {
  background: rgba(8,8,10,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(244,244,245,.10);
}

/* altura fixa e nao derivada do conteudo: com ela o padding que o hero
   precisa ganhar de volta e um numero conhecido, sem JS medindo nada */
/* O padding lateral fica na .nav, FORA do container de 1240, porque e assim
   que todas as secoes da pagina fazem: o <section> leva o padding e o
   max-width:1240px mora num filho. Com o padding dentro do container a barra
   nascia um padding inteiro a direita do grid (40px em tela larga), e a logo
   nao batia com o comeco do h1. */
.nav { padding: 0 clamp(20px,4vw,40px); }

.nav-caixa {
  max-width: 1240px;
  margin: 0 auto;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ==========================================================================
   A ALTURA DO HERO
   Tres numeros, e so eles. Mexer aqui, nao no inline do markup.

   --hero-topo    espaco entre a nav e o rotulo "Drop Agency · Aceleradora"
   --hero-base    espaco entre o CTA e a esteira de numeros
   --hero-palco   altura minima da coluna do simbolo

   ATENCAO: --hero-topo empurra o CTA para baixo e mexe na regra da dobra do
   briefing. --hero-base e --hero-palco nao empurram (crescem para baixo e na
   outra coluna). Subiu o topo, rodar a bateria.
   ========================================================================== */
:root {
  --hero-topo:  clamp(64px,6vw,108px);
  --hero-base:  clamp(76px,9vw,150px);
  --hero-palco: clamp(300px,58vw,560px);
  /* o vao entre as duas colunas do hero. Em duas colunas ele e horizontal e
     nao mexe em altura nenhuma; empilhado ele entra na conta da dobra E na
     do veu, que precisa saber onde o texto comeca */
  --hero-vao:   56px;
  /* a base do palco. Em duas colunas ela e uma porcentagem da COLUNA; em uma
     coluna ela vira vw, porque o veu tem que somar essa altura em pixel e
     porcentagem de coluna nao entra na conta dele */
  --hero-sw:    min(96%, 560px);
}

/* o espaco que a nav deixou de ocupar ao virar fixed volta aqui */
#topo { padding-top: calc(var(--nav-h) + var(--hero-topo)) !important; }
.hero-grade { padding-bottom: var(--hero-base); }
.hero-palco { min-height: var(--hero-palco); }

.nav-marca { display: flex; align-items: center; flex: 0 0 auto; }
/* 01/09: a logo cresceu de 180 para 210px de largura. O teto de 70px da nav
   aguenta: na proporcao 180x30 do arquivo, 210 de largura da 35px de altura. */
.nav-marca img {
  width: clamp(148px,36vw,210px);
  height: auto;
  display: block;
  transition: opacity .25s ease;
}
.nav-marca:hover img { opacity: .78; }

/* --- os links ----------------------------------------------------------- */
/* o teto do gap subiu de 28 para 44px em 01/09: em desktop os quatro links
   liam como uma palavra so. O piso continua em 16 porque abaixo de 880px o
   menu vira painel vertical e o gap horizontal nao vale mais nada. */
.nav-menu { display: flex; align-items: center; gap: clamp(16px,3.4vw,44px); }
.nav-menu a {
  position: relative;
  font-family: 'Lexend', sans-serif;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #A9A9B2;
  padding: 6px 0;
  transition: color .25s ease;
}
/* o sublinhado cresce do centro: hover trocando so a cor lia como link de
   texto corrido, nao como item de menu */
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 2px;
  background: #E63946;
  transition: left .28s cubic-bezier(.16,1,.3,1), right .28s cubic-bezier(.16,1,.3,1);
}
.nav-menu a:hover { color: #FFFFFF; }
.nav-menu a:hover::after,
.nav-menu a.ativo::after { left: 0; right: 0; }
.nav-menu a.ativo { color: #FFFFFF; }

/* --- o CTA -------------------------------------------------------------- */
.nav-fim { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: 'Lexend', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #E63946;
  padding: 12px 20px;
  border-radius: 2px;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.nav-cta:hover {
  background: #FFFFFF;
  color: #08080A;
  transform: translateY(-1px);
}
.nav-cta span { transition: transform .25s ease; }
.nav-cta:hover span { transform: translateX(3px); }

/* --- o botao do menu, so no mobile -------------------------------------- */
.nav-botao {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(244,244,245,.18);
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-botao span {
  position: absolute;
  left: 11px;
  width: 20px;
  height: 1.5px;
  background: #F4F4F5;
  transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
.nav-botao span:nth-child(1) { top: 14px; }
.nav-botao span:nth-child(2) { top: 20px; }
.nav-botao span:nth-child(3) { top: 26px; }
.nav-botao[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-botao[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- mobile ------------------------------------------------------------- */
@media (max-width: 879px) {
  .nav { background: rgba(8,8,10,.86); backdrop-filter: blur(14px);
         border-bottom-color: rgba(244,244,245,.10); }
  .nav-botao { display: block; }

  .nav-menu {
    position: absolute;
    /* a .nav agora tem padding lateral; o painel ignora e vai de borda a borda */
    left: calc(-1 * clamp(20px,4vw,40px));
    right: calc(-1 * clamp(20px,4vw,40px));
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* fundo SOLIDO e sem backdrop-filter proprio. Com blur aqui dentro (a
       .nav pai ja tem o dela) o Chrome compoe o painel por cima do backdrop
       do pai e o alpha .97 nao cobre: media de cor varia so 3 pontos, mas
       contra preto quase puro isso basta para o olho ler o texto do hero
       atravessando os itens do menu. Medido. */
    background: #08080A;
    border-bottom: 1px solid rgba(244,244,245,.10);
    /* visibility junto com a transicao: so max-height esconde da vista mas
       deixa o link no tab order, e o teclado foca item invisivel */
    max-height: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height .32s cubic-bezier(.16,1,.3,1), visibility 0s .32s;
  }
  .nav-menu.aberto {
    max-height: 60vh;
    visibility: visible;
    transition: max-height .32s cubic-bezier(.16,1,.3,1), visibility 0s;
  }
  /* O padding e DOBRADO de proposito. O painel vaza um padding para cada
     lado (o left/right negativo acima) para o fundo ir de borda a borda da
     tela; com um padding so, o texto dos itens caia exatamente na borda,
     um padding inteiro a esquerda da logo. E a mesma armadilha ja anotada
     no CLAUDE.md: container que vaza precisa devolver o vazamento.
     Medido em 360px: painel de -20 a 380, item comecando em 0, logo em 20. */
  .nav-menu a {
    padding: 18px calc(clamp(20px,4vw,40px) * 2);
    font-size: 13px;
    border-top: 1px solid rgba(244,244,245,.08);
  }
  .nav-menu a::after { left: 0; right: auto; width: 0; height: 100%;
                       background: rgba(230,57,70,.10); transition: width .28s ease; }
  .nav-menu a:hover::after, .nav-menu a.ativo::after { width: 100%; }
}

/* --- no MOBILE o CTA sai da barra e vira item do painel ------------------
   Pedido do Lucca em 02/09. Ate entao isso so acontecia abaixo de 389px, por
   falta de espaco: logo + botao "Diagnostico" + hamburguer somam 329px e a
   caixa da nav tem 280 em 320px de tela. Agora a barra do mobile inteiro e
   logo + hamburguer, e o CTA e o ultimo item do painel, em vermelho.

   A troca e sempre em 880px, o mesmo numero em que os quatro links somem da
   barra: uma quebra so para a barra inteira, em vez das quatro que existiam
   (389, 400, 419, 479). O que sobrou de corte por largura e a logo, que
   continua travando em 140px onde a tela e muito estreita.

   O CTA e o unico item do painel que nao entra no scrollspy: ele carrega
   data-spy="nao" no markup, senao piscaria de "ativo" junto com a secao 13,
   que e para onde ele aponta. Ele e botao, nao item de menu. */
.nav-menu-cta { display: none; }

@media (max-width: 879px) {
  .nav-cta { display: none; }

  .nav-menu-cta {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #E63946;
    color: #FFFFFF;
    font-weight: 600;
    letter-spacing: .1em;
  }
  /* o realce de item de menu nao vale para o CTA: ele ja e o bloco vermelho */
  .nav-menu-cta::after { display: none; }
  .nav-menu-cta span { transition: transform .25s ease; }
  .nav-menu-cta:hover span { transform: translateX(3px); }
}

/* sem o CTA a barra estreita tem folga de sobra (logo 180 + hamburguer 42 +
   gap 24 = 246 em 280), mas a logo continua travada porque em 320px ela
   sozinha ja come dois tercos da caixa */
@media (max-width: 419px) {
  .nav-caixa { gap: 14px; }
  .nav-marca img { width: 140px; }
}

/* --- o simbolo do hero, agora em SVG -----------------------------------
   Era symbol-light-sm.png (55 KB, hoje em refs/marca/) em duas <img>. Em SVG escala sem
   perder nada, recolore por CSS e, principalmente, deixa animar cada arco
   separadamente, que e o efeito da entrada.

   A geometria e a do projeto, medida no LOGOTIPO-30.png original: tres
   semicirculos concentricos, cada um girado 90 graus, mais o nucleo. Confere
   pixel a pixel com o PNG que a cliente usava.
   -------------------------------------------------------------------------- */
.hero-simbolo,
.hero-simbolo-fundo { grid-area: 1/1; display: block; }

.sb-arco {
  fill: none;
  stroke: #F4F4F5;
  stroke-width: 9.87;
}
.sb-nucleo { fill: #E63946; }

/* --- o palco: TODO circulo sai da mesma base ----------------------------
   Antes cada camada tinha o seu proprio min(): marca d'agua 96%/560,
   anel de fora 90%/420, anel de dentro 66%/300, simbolo 46%/208. Quatro
   bases diferentes, entao a relacao entre eles mudava a cada largura: em
   1440 os aneis quase caiam nos vaos da marca d'agua, em 390 caiam em
   qualquer lugar. Era o desalinhamento que se via.

   Agora existe uma base so, --sw, e as outras tres sao fracoes dela. As
   fracoes nao sao gosto, sao a geometria do proprio simbolo lida do
   viewBox de 100 (raio do arco, mais ou menos meio traco de 9,87):

     arco 1   faixa de 40,135 a 50,005   ->  .8027 a 1.0000 do diametro
     arco 2   faixa de 26,365 a 36,235   ->  .5273 a  .7247
     simbolo da frente, diametro cheio   ->  .3714

   Daí saem os dois vaos, e e neles que os aneis moram:
     anel de fora   (.8027 + .7247) / 2 = .7637
     anel de dentro (.5273 + .3714) / 2 = .4494

   Em desktop a marca d'agua e o simbolo ficam nos mesmos 560 e 208px de
   sempre; o que mudou de tamanho foram os dois aneis. Mexer em --sw move
   as quatro camadas juntas, que e o ponto. */
.hero-palco {
  --sw: var(--hero-sw);
  /* CENTRAGEM OPTICA. A marca da Drop nao e simetrica: o arco de fora abre
     para a direita, entao no viewBox de 100 a tinta vai de 0 a 86,235 e
     sobra um vao de 13,765 do lado direito. Nao e defeito nosso, e a marca:
     refs/marca/simbolo.png, o recorte justo que a cliente mandou, tem proporcao
     0,8627 e o nosso SVG da 0,8623. O symbol-light-sm.png dela carrega a
     mesma sobra (34px de folga em tres lados, 121px na direita).

     Os aneis TEM que ficar concentricos com os arcos, entao eles giram em
     volta do centro de rotacao da marca, nao do centro da tinta. Resultado:
     com tudo centrado geometricamente, o bloco inteiro pesa para a esquerda
     e sobra um vazio na direita. Era o que se via.

     A conta, em unidades de --sw e a partir da borda esquerda da caixa:
       tinta comeca em      0        (ponta esquerda do arco de fora)
       tinta termina em      .88185  (borda do anel de fora, que passa da
                                      marca d'agua, que para em .86235)
     folga esquerda 0, folga direita .11815, entao o grupo anda metade
     disso para a direita e as duas folgas empatam. Verticalmente ja empata,
     por isso o deslocamento e so no eixo X.

     Mexer numa fracao dos aneis muda este numero: se .7637 mudar, .0591
     muda junto. */
  transform: translateX(calc(var(--sw) * .0591));
}

/* a marca d'agua atras, grande e quase apagada. Ela leva so os dois arcos
   de fora: ver o comentario no markup */
.hero-simbolo-fundo {
  width: var(--sw);
  opacity: .05;
  pointer-events: none;
  animation: dropZoomFaint 2.6s cubic-bezier(.16,1,.3,1) both;
}

/* o simbolo da frente: entra em zoom e os tres arcos se desenham */
.hero-simbolo {
  width: calc(var(--sw) * .3714);
  animation: dropZoom 1.8s cubic-bezier(.16,1,.3,1) both;
}

/* Os dois aneis. A geometria estava inline e veio para ca porque agora e
   conta, e porque inline vence media query.

   Cada um leva UMA linha vermelha, e em eixos opostos: a de fora no topo,
   a de dentro embaixo. Como eles giram em sentidos contrarios, as duas se
   cruzam duas vezes por volta em vez de andarem juntas. Antes era uma so,
   no anel de dentro. */
.hero-anel {
  grid-area: 1/1;
  aspect-ratio: 1;
  border: 1px solid rgba(244,244,245,.10);
  border-radius: 50%;
  pointer-events: none;
}
.hero-anel--1 {
  width: calc(var(--sw) * .7637);
  border-top-color: rgba(230,57,70,.62);
}
.hero-anel--2 {
  width: calc(var(--sw) * .4494);
  border-color: rgba(244,244,245,.16);
  border-bottom-color: rgba(230,57,70,.72);
}
/* pathLength 1.05 e nao 1: com 1 o Chrome arredonda a escala do dasharray e
   deixa uma lasca visivel na ponta do arco, que num traco de 9.87 aparece */
/* o pathLength e ATRIBUTO do <path> no HTML, nao propriedade CSS. Declarado
   aqui ele nao faz nada e o dasharray vira tracinho de 1px no viewBox de 100 */
.hero-simbolo .sb-arco {
  stroke-dasharray: 1.05;
  stroke-dashoffset: 1.05;
  animation: sbTraco 1.1s cubic-bezier(.16,1,.3,1) both;
}
.hero-simbolo .sb-a1 { animation-delay: .55s; }
.hero-simbolo .sb-a2 { animation-delay: .75s; }
.hero-simbolo .sb-a3 { animation-delay: .95s; }
.hero-simbolo .sb-nucleo {
  transform-origin: 50px 50px;
  animation: sbNucleo .7s 1.35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes sbTraco  { to { stroke-dashoffset: 0; } }
@keyframes sbNucleo { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* com movimento reduzido o simbolo nasce inteiro, sem traco nenhum */
@media (prefers-reduced-motion: reduce) {
  .hero-simbolo .sb-arco { stroke-dashoffset: 0; }
  .hero-simbolo .sb-nucleo { transform: none; opacity: 1; }
}

/* --- hero em tela muito estreita ---------------------------------------- */
/* Em 320px o paragrafo de apoio empurra o CTA 139px abaixo da dobra. A regra
   do briefing e que o caminho ate o diagnostico nunca fique atras de um
   scroll, entao ali o paragrafo sai. De 360px para cima ele fica. */
@media (max-width: 359px) {
  .hero-apoio { display: none !important; }
}

/* ==========================================================================
   SECAO 02: o diagrama das oito frentes
   Refeito em 01/09/2026. O canvas entregava tudo inline: oito pares de
   top/left cravados a mao, o raio da bolinha diferente do raio dos cards e
   os aneis em quatro insets sem relacao entre si.

   AQUI TODO RAIO SAI DE UMA VARIAVEL. Mexer em --r-card move os oito cards
   juntos; mexer em --r-orbita move a bolinha e o raio dela. Nao ha numero
   de posicao no markup.

   O TEMPO TAMBEM E UM SO. --orb-t e uma volta da bolinha. Como sao oito
   cards a 45 graus, ela passa por um a cada --orb-t / 8, e e desse mesmo
   valor que saem o atraso do brilho de cada card, o pulso do nucleo e o
   intervalo das ondas. Trocar --orb-t reacerta as quatro coisas de uma vez.
   Encostar em qualquer duracao isolada quebra a sincronia, e o defeito e
   silencioso: a bolinha passa e o card acende meio segundo depois.
   -------------------------------------------------------------------------- */
@property --passa { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --hov   { syntax: "<number>"; inherits: false; initial-value: 0; }

.tensao-grade {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(48px, 6vw, 80px); align-items: center;
}
/* O asset vem PRIMEIRO nas duas composicoes: a esquerda em duas colunas, em
   cima quando empilha. Ele continua depois do texto no HTML, entao a ordem
   de leitura de um leitor de tela e a do documento; quem troca e o `order`.

   Ate 02/09 o `order` valia so em desktop e no celular o texto vinha antes.
   O Lucca pediu a inversao junto com a do hero, e a razao e a mesma: o
   diagrama e o que faz a pessoa parar, e ele nao pode nascer duas rolagens
   abaixo do titulo da secao. */
.tensao-visual { order: -1; }
@media (min-width: 900px) {
  .tensao-grade { grid-template-columns: 1.06fr 1fr; }
}

.orb {
  --orb-t: 14s;        /* uma volta da bolinha */
  /* Os raios sao os do desenho original da cliente. Chegaram a virar um
     ritmo de 8 em 8 por cco, com um anel a mais passando pelos cards, e
     o Lucca preferiu o desenho dela: os cards logo fora da orbita, a
     bolinha correndo colada por dentro deles, e so dois aneis. */
  /* O RAIO DOS CARDS ENCOLHE SOZINHO QUANDO O DIAGRAMA E PEQUENO, e nao
     quando a TELA e pequena. Sao coisas diferentes: em 900px de tela o
     diagrama tem 398px, porque a coluna e estreita, e ali o card do eixo
     horizontal ficava a 3px da borda com o clip comendo o brilho dele.
     Media query de viewport nao pega esse caso.

     A conta: o card fica a --r-card do centro e ainda gasta metade da
     propria largura. MARCA tem 74px, entao 37 de metade, mais 5 do halo
     do brilho, mais folga: 44px. Daí calc(50% - 44px), com teto de 40%,
     que e o valor do desenho da cliente. A troca acontece em 440px de
     diagrama; acima disso nada muda. */
  --r-card: min(40%, calc(50% - 44px));
  /* a bolinha corre 4% por dentro dos cards, coladinha, e acompanha o
     encolhimento deles: fixa em 36% ela passaria por FORA em diagrama
     pequeno */
  --r-orbita: calc(var(--r-card) - 4%);
  --r-meio: 21%;
  --r-dentro: 17%;     /* de onde saem as ondas */
  position: relative; width: 100%; max-width: 600px; aspect-ratio: 1;
  margin: 0 auto; display: grid; place-items: center;
  /* CLIP OBRIGATORIO. .orb-gira e o anel tracejado sao caixas quadradas
     que GIRAM, e caixa girada tem bounding box maior por raiz de 2: elas
     passam para fora do diagrama de cada lado. Nada disso e visivel, mas
     entra no scrollWidth do documento e vira scroll lateral justamente nas
     larguras em que o diagrama ocupa a coluna inteira: quando os cards
     ainda moravam em caixas giradas isso dava 36px em 390 e 55px em 620.
     Nada visivel e cortado: os cards ficam dentro da caixa e a bateria
     mede essa folga em sete larguras. */
  overflow: clip;
}

/* raio para inset: um circulo de raio R centrado e inset (50% - R) */
.orb-anel { position: absolute; border-radius: 50%; }
/* o anel dos cards passa POR TRAS deles, e e o que faz os oito lerem como
   um circulo so em vez de oito caixas soltas. Fundo branco do card corta a
   linha, entao ela so aparece nos vaos */
.orb-anel--fora   { inset: calc(50% - var(--r-orbita)); border: 1px solid rgba(8,8,10,.12); }
.orb-anel--meio   { inset: calc(50% - var(--r-meio));   border: 1px dashed rgba(8,8,10,.14);
                    animation: dropSpin 90s linear infinite; }

/* as ondas saem do anel de dentro. Uma a cada --orb-t / 8, que e o mesmo
   intervalo com que a bolinha passa por um card */
.orb-pulso {
  position: absolute; inset: calc(50% - var(--r-dentro));
  border-radius: 50%; border: 1px solid rgba(230,57,70,.45);
  animation: dropRipple calc(var(--orb-t) / 4) ease-out infinite;
}
.orb-pulso--2 { animation-delay: calc(var(--orb-t) / 8); }

/* a bolinha e o raio moram no MESMO elemento que gira: e o que garante que
   nunca saiam de fase um do outro */
.orb-gira {
  position: absolute; inset: calc(50% - var(--r-orbita));
  animation: dropSpin var(--orb-t) linear infinite;
}
.orb-ponto {
  position: absolute; top: 0; left: 50%;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: #E63946;
  box-shadow: 0 0 0 6px rgba(230,57,70,.14);
}

.orb-nucleo {
  position: relative; width: 23%; aspect-ratio: 1;
  border-radius: 50%; background: #17171B;
  display: grid; place-items: center;
}
.orb-nucleo span {
  width: 26%; aspect-ratio: 1; border-radius: 50%; background: #E63946;
  animation: dropCore calc(var(--orb-t) / 4) ease-in-out infinite;
}

/* CADA CARD CARREGA O PROPRIO VETOR, --x e --y, cosseno e seno do angulo
   dele (0, +-1 ou +-0,70711). A distancia sai de --r-card, entao continua
   havendo um numero so mandando nos oito.

   ANTES ISSO ERA UMA CAIXA GIRADA com o card contragirado dentro, e a
   conta fechava igual. So que rotate(225deg) seguido de rotate(-225deg)
   nao volta exatamente ao ponto de partida: o navegador rasteriza a borda
   de 1px em subpixel e as quatro caixas das diagonais ficavam com um
   fantasma de sombra em volta. Era isso que aparecia no CONVERSAO. Sem
   rotacao nenhuma o problema some.

   Porcentagem em top/left resolve contra a caixa, que e o que se quer;
   dentro de translate() ela seria da largura do PROPRIO card e --r-card
   nao chegaria la. Por isso a posicao e top/left e o centramento fica no
   translate(-50%,-50%). */
.orb-card {
  position: absolute;
  top:  calc(50% + var(--y) * var(--r-card));
  left: calc(50% + var(--x) * var(--r-card));
  transform: translate(-50%,-50%);
  white-space: nowrap; cursor: default;
  font-family: "Lexend", sans-serif; letter-spacing: .08em; font-size: 12px;
  text-transform: uppercase; padding: 7px 12px;
  /* Largura natural, como no desenho da cliente. Chegou a ter min-width
     para emparelhar as caixas curtas com as longas e o Lucca achou que
     descaracterizava. Consequencia a lembrar: o card do eixo horizontal
     (MARCA, DADOS) e o unico que pode furar a caixa, porque fica a
     --r-card do centro e ainda gasta metade da propria largura, entao
     precisa caber em (50% - --r-card) = 10% dela. Em diagrama pequeno nao
     cabe, e por isso os raios encolhem abaixo de 460px. A bateria mede
     essa folga em sete larguras. */
  /* O ESTADO ACESO VEM DE DUAS FONTES SOMADAS EM max(), e isso nao e
     enfeite de arquitetura: propriedade que esta sob animacao NAO
     transiciona. Com o brilho e o hover mexendo na mesma cor, o hover
     mudava o card num quadro so (medido: rgba(8,8,10,.14) para
     rgb(230,57,70) em menos de 30ms) e nao havia transition que pegasse.

       --passa  quem move e a animacao orbPassa, quando a bolinha chega
       --hov    quem move e o hover, com transicao propria

     As duas sao <number> registrados em @property, senao nao interpolam:
     custom property nao registrada anda de 0 para 1 de uma vez. */
  --acende: max(var(--passa), var(--hov));
  color:       color-mix(in srgb, #E63946 calc(var(--acende) * 100%), #5A5A63);
  background:  color-mix(in srgb, #FFF5F6 calc(var(--acende) * 100%), #FFFFFF);
  border: 1px solid
       color-mix(in srgb, #E63946 calc(var(--acende) * 100%), rgba(8,8,10,.14));
  box-shadow: 0 0 0 calc(var(--acende) * 5px) rgba(230,57,70,.11);
  transition: --hov .28s ease;
  /* O ATRASO DO BRILHO E NEGATIVO, e isso importa. Atraso positivo
     (i * volta / 8) poe o pico na hora certa, mas a rampa de entrada mora
     no FIM do ciclo: na primeira volta ela nao existe, porque o ciclo
     ainda nem comecou, e o card acende de supetao em vez de antecipar a
     bolinha. Medido: aos 311 graus da primeira volta nenhum card estava
     aceso. Com (i - 8) * volta / 8 a animacao ja nasce adiantada e o
     comportamento e igual da primeira volta em diante. */
  animation: orbEntra .7s calc(var(--i) * .08s) ease both,
             orbPassa var(--orb-t) linear calc((var(--i) - 8) * var(--orb-t) / 8) infinite;
}
/* a entrada precisa repetir o translate de centramento, senao ela SUBSTITUI
   o transform da classe e o card salta meia caixa enquanto anima */
@keyframes orbEntra {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); }
  to   { opacity: 1; transform: translate(-50%,-50%); }
}
/* O BRILHO DA PASSAGEM. Duracao igual a da volta e atraso de i * volta / 8,
   entao o pico de 0% cai no instante exato em que a bolinha chega no card.
   Nada de transform aqui: ele ja e usado pela posicao e pela entrada, e a
   ultima animacao a declarar a propriedade ganharia. */
/* A janela e curta de proposito. Acender de 96% a 100% e apagar de 0% a
   10% da 14 graus de rampa antes da bolinha chegar e 36 depois: o card
   acende QUANDO ela passa. Com a janela larga (era 88% e 13%) o proximo ja
   estava acendendo enquanto o anterior apagava, e a leitura virava um
   brilho girando em vez de uma passagem. */
@keyframes orbPassa {
  0%   { --passa: 1; }
  10%  { --passa: 0; }
  96%  { --passa: 0; }
  100% { --passa: 1; }
}

/* Hover: acende o card, e so o card. O diagrama NAO para: chegou a parar
   no hover e o Lucca tirou, porque congelar a cena inteira para destacar
   uma caixa e uma resposta grande demais para o gesto.

   Ele so acende --hov, e quem cuida da ida e da volta e a transition do
   .orb-card. Sem transicao o card mudava de cor num quadro so, o que num
   diagrama que ja se move sozinho le como falha.

   Atras de (hover: hover) para nao grudar em tela de toque. */
@media (hover: hover) {
  .orb-card:hover { --hov: 1; }
}

/* Em tela estreita a fonte de 12px fica grande demais para um diagrama de
   280px, e os dois aneis de dentro ficam apertados contra o nucleo. O raio
   dos cards NAO entra aqui: quem cuida dele e o min() la em cima, que
   responde ao tamanho do diagrama e nao ao da tela. */
@media (max-width: 460px) {
  .orb { --r-meio: 18%; --r-dentro: 14%; }
  .orb-card { font-size: 10.5px; padding: 6px 9px; letter-spacing: .05em; }
}

/* com movimento reduzido o diagrama para inteiro e os oito cards ficam
   legiveis do mesmo jeito: nenhuma informacao mora dentro da animacao */
@media (prefers-reduced-motion: reduce) {
  .orb-gira, .orb-anel--meio, .orb-pulso,
  .orb-nucleo span, .orb-card { animation: none; }
  .orb-pulso { opacity: .3; }
}

/* ==========================================================================
   SECAO 04: as cinco etapas do Metodo Drop Reset, com timeline

   O canvas entregava cinco linhas de duas colunas e um hover que pintava a
   FAIXA INTEIRA de rosa, com o texto encostado na borda do bloco pintado.
   Duas mudancas: entrou um trilho vertical a esquerda que preenche junto ao
   scroll, e o realce do hover virou um retangulo recuado.

   O TRILHO E UMA COLUNA DE VERDADE NO GRID, nao um enfeite posicionado por
   cima. E o que garante que texto nenhum passe por baixo dele em largura
   nenhuma: a coluna existe, entao o conteudo comeca depois dela.
   -------------------------------------------------------------------------- */
.metodo-lista {
  --trilho: 16px;          /* a coluna que o trilho ocupa */
  --vao: 40px;             /* o vao entre colunas do grid */
  --no: 13px;              /* o diametro do no */
  --num: 34px;             /* o numero da etapa; o no se alinha pelo centro dele */
  --tit: 22px;
  --preenchido: 0;         /* 0 a 1, escrito pelo pagina-v2.8bdf4055.js */
  /* Onde comeca o "card" da etapa: o realce que marca a etapa ativa e a
     divisa que fecha ela embaixo. Os dois saem daqui para nao sair de
     sincronia, e no celular eles abrem mais (ver o bloco do fim do arquivo). */
  --realce-x: calc(var(--trilho) + var(--vao) / 2);
  --realce-y: 6px;
  position: relative;
}
/* EM TELA ESTREITA O TRILHO ENCOLHE E O VAO TAMBEM. O gap de coluna que veio
   do canvas era 40px, pensado para duas colunas de texto: somado ao trilho ele
   comia 80 dos 280px de conteudo em 320px de tela, e "05 MOVIMENTO" deixava de
   caber. Aqui sobram 232px. */
@media (max-width: 859px) {
  .metodo-lista { --trilho: 12px; --no: 11px; --vao: 20px; }
}
/* So na faixa de 320: com o trilho na borda a coluna ganhou 24px e a
   tipografia dela passou a caber em 360px, que cobre praticamente todo
   celular real. Em 320 "05 MOVIMENTO" ainda fica com 1px de folga, e 1px
   nao e folga. */
@media (max-width: 359px) { .metodo-lista { --num: 30px; --tit: 20px; } }

/* A LINHA FICA NA BORDA ESQUERDA DA LISTA, nao no meio de uma coluna larga:
   left: -1px poe os 2px dela em cima do proprio limite do container, que e a
   mesma vertical do h2 da secao. O no fica centrado nela e sobra meio no
   para fora, dentro do padding lateral da secao (20px no minimo). */
.metodo-lista::before,
.metodo-lista::after {
  content: ""; position: absolute; top: 0; width: 2px; left: -1px;
  pointer-events: none;
}
.metodo-lista::before { bottom: 0; background: rgba(8,8,10,.12); }
/* e o preenchimento vermelho por cima dela. A altura sai direto de
   --preenchido, entao sem JavaScript ele fica em zero e o trilho continua
   sendo uma linha cinza legitima, nao um estado quebrado */
.metodo-lista::after {
  height: calc(var(--preenchido) * 100%);
  background: linear-gradient(180deg, #E63946 0%, #E63946 82%, rgba(230,57,70,.55) 100%);
}

.metodo-etapa {
  position: relative;
  display: grid;
  grid-template-columns: var(--trilho) 1fr;
  gap: 18px var(--vao);
  padding: 38px 0;
}
@media (min-width: 860px) {
  .metodo-etapa { grid-template-columns: var(--trilho) 1fr 1fr; }
}

/* A DIVISA COMECA DEPOIS DO TRILHO. Era border-bottom no inline e cruzava a
   linha vertical; onde o trilho esta pintado, um risco cinza atravessando o
   vermelho fica sujo. Como pseudo ela pode comecar onde o conteudo comeca. */
.metodo-etapa::after {
  content: ""; position: absolute; bottom: 0; right: 0;
  left: var(--realce-x);
  height: 1px; background: rgba(8,8,10,.12);
}

/* O REALCE MARCA A ETAPA EM QUE A TIMELINE ESTA, nao a que o mouse esta em
   cima. Ele era hover e o Lucca tirou: a etapa que interessa e a que o
   visitante esta lendo, e o trilho ja sabe qual e. Quem poe .ativa e o
   pagina-v2.8bdf4055.js, na ultima etapa cujo no ja acendeu.

   Ele e pseudo e nao background porque background pinta a caixa inteira: a
   faixa ia de borda a borda e o texto nascia colado nela. Aqui ele comeca
   depois do halo do no, vaza 16px para a direita (sempre menos que os 20px
   minimos de padding da secao, entao nunca gera scroll lateral) e recua 6px
   em cima e embaixo, para nao encostar nas divisas. */
.metodo-etapa::before {
  content: ""; position: absolute;
  inset: var(--realce-y) -16px calc(var(--realce-y) + 1px) var(--realce-x);
  background: rgba(230,57,70,.05);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.metodo-etapa.ativa::before { opacity: 1; }

/* os tres filhos sobem acima do realce */
.metodo-no, .metodo-cabeca, .metodo-corpo { position: relative; z-index: 1; }

/* O NUMERO E O TITULO ENCOLHEM NA FAIXA ESTREITA, e nao e capricho: a linha
   dos dois e um flex de uma linha so, entao o minimo dela e numero + vao +
   MAIOR PALAVRA do titulo, e palavra nao quebra. Em 320px "05 MOVIMENTO"
   pedia mais que os 232px da coluna e estourava a pagina inteira.

   flex-wrap: wrap chegou a ser a saida e voltou atras: flex prefere QUEBRAR a
   encolher, entao o titulo caia para baixo do numero ja em 390px, que e a
   largura de celular mais comum. Encolher a tipografia resolve sem mexer na
   composicao que a cliente aprovou.

   Os dois tamanhos moram em variavel porque o no se alinha pelo centro do
   numero: mudar --num sem mudar o no desalinha o trilho inteiro. */
.metodo-lista .hv4       { font-size: var(--num) !important; }
.metodo-cabeca > div > p { font-size: var(--tit) !important;
                           overflow-wrap: anywhere; }
@media (max-width: 859px) { .metodo-corpo { grid-column: 2; } }

/* O NO SENTA NA COLUNA DO TRILHO, alinhado com o centro do numero: o numero
   tem line-height 1, entao o centro dele esta a --num/2 do topo da caixa.
   O no desce isso menos o proprio raio. */
.metodo-no {
  grid-row: 1; grid-column: 1; align-self: start;
  justify-self: start; margin-left: calc(var(--no) / -2);
  margin-top: calc(var(--num) / 2 - var(--no) / 2);
  width: var(--no); height: var(--no); border-radius: 50%;
  background: #FFFFFF; border: 2px solid rgba(8,8,10,.18);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.metodo-etapa.aceso .metodo-no {
  background: #E63946; border-color: #E63946;
  box-shadow: 0 0 0 5px rgba(230,57,70,.14);
}
/* O NUMERO DA ETAPA NAO MUDA DE COR COM O TRILHO, de proposito. Chegou a
   escurecer quando a etapa acendia, e isso apagava o desenho da cliente: o
   05 ja nasce vermelho no inline dela (e a etapa do fecho, MOVIMENTO), e a
   regra de "ja lido" ia justamente por cima dele. Quem sinaliza o progresso
   e o no, que ja e sinal suficiente. */

@media (prefers-reduced-motion: reduce) {
  .metodo-no, .metodo-etapa::before { transition: none; }
}

/* ==========================================================================
   SECAO 03: os cinco custos e a calculadora
   Ajustada em 01/09/2026. O canvas entregava os cinco cards numa esteira
   horizontal com scroll-snap, e a calculadora com sliders nativos.

   OS CINCO CARDS NAO SAO MAIS ESTEIRA. Cinco itens curtos cabem lado a lado
   em desktop, e esconder tres deles atras de um arrasto so tirava leitura
   de uma secao que existe para ser lida inteira. Em telas medias eles
   viram 3 + 2 CENTRADOS: com repeat(3,1fr) a ultima fila encostava a
   esquerda e a secao, que agora tem o cabecalho centrado, ficava torta.
   O truque e dobrar as colunas (6) e fazer cada card ocupar 2, o que da
   meia coluna de deslocamento para centrar a fila incompleta.
   -------------------------------------------------------------------------- */
.custo-grade {
  display: grid; gap: 14px; margin-top: 38px;
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1039px) {
  .custo-grade { grid-template-columns: repeat(6, 1fr); }
  .custo-grade > *              { grid-column: span 2; }
  .custo-grade > :nth-child(4)  { grid-column: 2 / span 2; }
}
/* no celular um embaixo do outro, sem arrasto nenhum */
@media (max-width: 639px) {
  .custo-grade                 { grid-template-columns: 1fr; }
  .custo-grade > *,
  .custo-grade > :nth-child(4) { grid-column: auto; }
}

/* A CALCULADORA.
   O canvas usava repeat(auto-fit, minmax(min(100%,320px),1fr)), que quebra
   em funcao da largura do CONTAINER, nao da tela: nao da para saber em que
   viewport ela vira uma coluna, e o border-left do painel de resultado
   continuava sendo border-left depois de empilhar, virando um risco solto
   no lado esquerdo. Aqui a quebra e um numero conhecido (760px) e a divisa
   acompanha a direcao da pilha. */
.sim-caixa { display: grid; grid-template-columns: 1fr; }
/* min-width:0 nos dois paineis: sem isso o min-width:auto do item de grade
   resolve para o min-content, e o texto em nowrap dos numeros (abaixo)
   passaria a esticar a coluna em vez de caber nela */
.sim-caixa > * { min-width: 0; }

/* OS DOIS NUMEROS DA CALCULADORA NUNCA QUEBRAM LINHA.
   Com os sliders no maximo o gap chega a R$ 216.000.000, catorze caracteres
   numa Zalando Sans Expanded 900: em 1440 ele quebrava em duas linhas, e no
   celular quebrava com muito menos que isso.

   O tamanho daqui e o TETO. O pagina-v2.8bdf4055.js mede a caixa a cada mudanca de
   valor e a cada resize e encolhe a fonte ate o numero caber numa linha so.
   Sem JavaScript nada disso acontece e o numero volta a quebrar, que e o
   comportamento de hoje: nao ha regressao no fallback. */
.sim-valor--atual { font-size: 30px; }
.sim-valor--gap   { font-size: clamp(28px, 3.6vw, 52px); }
.sim-resultado { border-top: 1px solid rgba(8,8,10,.08); }
@media (min-width: 760px) {
  .sim-caixa     { grid-template-columns: 1fr 1fr; }
  .sim-resultado { border-top: 0; border-left: 1px solid rgba(8,8,10,.08); }
}

/* A NOTA DE RODAPE DO PAINEL DE RESULTADO NAO PODE TERMINAR EM ORFA.
   Medido: sem isto a ultima linha fica so com "real." em 640, 1440, 1920 e
   2560px. text-wrap:pretty so mexe na ULTIMA linha (balance mexeria em
   todas e mudaria o recorte que a cliente aprovou), e em navegador que nao
   suporta a orfa simplesmente volta: e cosmetico, nao quebra nada. */
.sim-resultado p { text-wrap: pretty; }

/* OS TRES SLIDERS.
   Eram input[type=range] nativos com accent-color: trilho grosso e cinza de
   sistema, o unico pedaco da secao que nao parecia desenhado. appearance:none
   entrega o desenho para o CSS, e a parte preenchida vem de --pct, que o
   pagina-v2.8bdf4055.js escreve no proprio input a cada input (o track do WebKit nao
   tem como saber o valor sozinho; o Firefox tem ::-moz-range-progress).

   O outline nativo do foco sai, mas o foco NAO some: ele volta como halo no
   trilho. Slider e controle de teclado, quem navega por Tab precisa ver. */
.sim-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 20px; background: transparent;
  cursor: pointer; margin: 0;
}
.sim-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg,
              #E63946 0 var(--pct, 0%), rgba(8,8,10,.13) var(--pct, 0%) 100%);
  transition: box-shadow .2s ease;
}
.sim-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: #E63946; border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 1px rgba(8,8,10,.16), 0 3px 8px -2px rgba(230,57,70,.55);
  transition: transform .18s cubic-bezier(.16,1,.3,1);
}
.sim-range::-moz-range-track {
  height: 4px; border-radius: 2px; background: rgba(8,8,10,.13);
}
.sim-range::-moz-range-progress {
  height: 4px; border-radius: 2px; background: #E63946;
}
.sim-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #E63946; border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 1px rgba(8,8,10,.16), 0 3px 8px -2px rgba(230,57,70,.55);
  transition: transform .18s cubic-bezier(.16,1,.3,1);
}
.sim-range:hover::-webkit-slider-thumb,
.sim-range:active::-webkit-slider-thumb { transform: scale(1.2); }
.sim-range:hover::-moz-range-thumb,
.sim-range:active::-moz-range-thumb     { transform: scale(1.2); }

.sim-range:focus { outline: none; }
.sim-range:focus-visible::-webkit-slider-runnable-track {
  box-shadow: 0 0 0 3px rgba(230,57,70,.22);
}
.sim-range:focus-visible::-moz-range-track {
  box-shadow: 0 0 0 3px rgba(230,57,70,.22);
}
@media (prefers-reduced-motion: reduce) {
  .sim-range::-webkit-slider-thumb { transition: none; }
  .sim-range::-moz-range-thumb     { transition: none; }
}

/* --- FAQ ---------------------------------------------------------------- */
.faq-botao { width: 100%; }
.faq-mais {
  font-size: 22px; line-height: 1; color: #B4B4BC;
  transform: rotate(0deg); transition: transform .25s ease, color .25s ease;
}
.faq-botao[aria-expanded="true"] .faq-mais { color: #E63946; transform: rotate(45deg); }
.faq-corpo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease; overflow: hidden;
}
.faq-corpo.aberto { grid-template-rows: 1fr; }
/* a resposta herdava os 960px do container e dava 128 caracteres por linha */
.faq-corpo p { max-width: 600px; }

/* --- chips de faixa (faturamento e investimento) ------------------------ */
.chip {
  font-family: Lexend, sans-serif; font-size: 13px; padding: 13px 18px; cursor: pointer;
  border: 1px solid rgba(244,244,245,.18); background: transparent; color: #A9A9B2;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.chip:hover { border-color: rgba(230,57,70,.6); color: #FFFFFF; }
.chip.ativo { border-color: #E63946; background: rgba(230,57,70,.16); color: #FFFFFF; }

/* --- formulario --------------------------------------------------------- */
.form-voltar {
  background: transparent; border: 0; cursor: pointer;
  font-family: Lexend, sans-serif; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: #A9A9B2;
}
.form-voltar[disabled] { cursor: default; color: #2A2A31; }
.campo-erro { border-color: #E63946 !important; }
.form-aviso {
  margin: 18px 0 0; font-family: Lexend, sans-serif; font-size: 13px; color: #E63946;
}

/* --- marcas de conteudo provisorio (convencao do projeto) ---------------- */
.provisorio { outline: 1px dashed rgba(230,57,70,.75); outline-offset: 4px; }
/* A VAGA PERDEU O TRACEJADO em 02/09. O Lucca apresenta a pagina para a
   cliente antes de os cases existirem, e o pontilhado lia como defeito de
   layout, nao como "falta conteudo aqui". O [[ ]] no texto continua sendo a
   marca, e e ele que o bloco 19 da bateria conta: o que saiu foi so o
   desenho de aviso. A regra .provisorio continua no arquivo para o dia em
   que um bloco inteiro precisar dela. */
.vaga {
  display: inline-block; padding: 3px 9px; background: rgba(230,57,70,.09);
  color: #E63946; font-size: 11px; letter-spacing: .08em;
}

/* --- foco visivel de teclado -------------------------------------------- */
:focus-visible { outline: 2px solid #E63946; outline-offset: 3px; }

/* --- reduced motion: nada some, tudo so para de se mexer ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --- hover e foco extraidos do canvas ----------------------------------- */
.hv1:hover{color:#FFFFFF !important}
.hv2:hover{background:#FFFFFF !important; color:#08080A !important}
.hv3:hover{background:rgba(230,57,70,.04) !important}
.hv4:hover{color:#E63946 !important; transform:translateY(-4px) scale(1.14) !important}
.hv5:hover{border-color:rgba(230,57,70,.6) !important}
.hv6:hover{background:#E63946 !important; color:#FFFFFF !important}
.hv7:hover{opacity:1 !important}
.hv8:hover{border-color:#E63946 !important; color:#E63946 !important}
.hv9:hover{border-color:rgba(230,57,70,.55) !important}
.hv10:hover{transform:translateY(-6px) !important; border-color:rgba(230,57,70,.5) !important; box-shadow:inset 0 2px 0 0 #E63946, 0 14px 30px -14px rgba(230,57,70,.45) !important}
.fc11:focus{border-color:#E63946 !important}
.hv12:hover{color:#E63946 !important}
.hv13:hover{background:#E63946 !important; color:#FFFFFF !important; transform:translateY(-3px) !important}
.hv14:hover{color:#E63946 !important; border-color:#E63946 !important; background:rgba(230,57,70,.12) !important}

/* ==========================================================================
   O CTA DO HERO USA O MESMO HOVER DO BOTAO DA NAV
   Pedido do Lucca em 01/09: o hover da barra ficou melhor que o do hero.

   O .hv2 que veio do canvas ja troca fundo e cor (branco sobre preto). O que
   faltava era o movimento: o botao sobe 1px e a seta anda 3px para a direita,
   igual ao .nav-cta. Nao da para so reaproveitar .nav-cta porque o resto do
   estilo (tamanho, padding, fonte) mora inline no markup do canvas.

   A seta precisa de display:inline-block: <span> em fluxo e inline, e
   transform nao aplica em caixa inline.
   ========================================================================== */
.hero-cta {
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.hero-cta:hover { transform: translateY(-1px); }
.hero-cta span { display: inline-block; transition: transform .25s ease; }
.hero-cta:hover span { transform: translateX(3px); }

/* ==========================================================================
   O FUNDO WEBGL DO HERO
   Portado do widget que o Lucca fez para a C4 Growth. O motor esta em
   assets/fundo-webgl.9fdb270b.js; aqui fica so o que e visual.

   Tres camadas dentro de .dgl, todas atras do conteudo:
     background-image  o gradiente de espera. E ele que aparece enquanto o
                       shader nao pintou o primeiro quadro, e e ele que fica
                       para sempre se o navegador nao tiver WebGL. Por isso
                       ele repete o degrade que veio do canvas da cliente:
                       sem shader, a pagina volta a ser exatamente a que ela
                       aprovou, nao uma versao pela metade
     .dgl-canvas       o shader. Entra por opacidade, com --intensidade
     .dgl-veu          o que protege a coluna de texto. LER o bloco do veu
                       antes de mexer em qualquer coisa de contraste aqui
     .dgl-saida        a mascara que devolve o fundo solido embaixo, para a
                       esteira de numeros nao correr sobre ruido

   A intensidade final e a opacidade do canvas sobre a base escura: baixar
   --intensidade esmaece o efeito inteiro sem tocar no shader. Aqui ela e
   .62, menor que a da C4 (.80), porque metade deste hero e texto.
   ========================================================================== */
.dgl {
  contain: strict;
  /* A intensidade mora aqui, nao no inline do markup, para que um ajuste por
     largura seja possivel: em inline ela venceria qualquer media query.
     Hoje nao ha nenhum, e o valor e o mesmo em toda largura. Quem cuida do
     contraste e o veu, nao ela. */
  --intensidade: .62;
  background-image: radial-gradient(110% 85% at 80% 6%,
                    rgba(230,57,70,.22) 0%, rgba(230,57,70,.05) 36%, rgba(8,8,10,0) 64%);
}
/* quando o shader assume, o gradiente de espera sai de cena */
.dgl.is-webgl { background-image: none; }

.dgl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .6s ease;
}
.dgl.is-webgl .dgl-canvas { opacity: var(--intensidade,1); }

/* seis paradas em vez de duas: gradiente linear de dois pontos deixa uma
   banda visivel no meio da transicao, e num fundo quase preto ela aparece */
.dgl-saida {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--saida,0px);
  background: linear-gradient(180deg,
    rgba(var(--fundo-rgb,8,8,10),0)    0%,
    rgba(var(--fundo-rgb,8,8,10),.04) 20%,
    rgba(var(--fundo-rgb,8,8,10),.16) 38%,
    rgba(var(--fundo-rgb,8,8,10),.40) 56%,
    rgba(var(--fundo-rgb,8,8,10),.70) 74%,
    rgba(var(--fundo-rgb,8,8,10),.92) 89%,
    rgba(var(--fundo-rgb,8,8,10),1)  100%);
}

@media (max-width: 760px) {
  .dgl { --saida: 220px; }
}
/* ==========================================================================
   O VEU
   Baixar a intensidade sozinha NAO resolve o contraste, e isso foi medido:
   o nucleo claro do shader se desloca, e no pior quadro de uma amostra de
   4s o "Leva menos de 2 minutos" caia para 4,05:1 tanto com intensidade .62
   quanto com .30. O texto e #7E7E88 sobre #08080A, que ja nasce com 4,98:1:
   com 0,48 de folga, qualquer clareada de fundo que passe por baixo dele
   quebra o AA em algum quadro. Dimmer nenhum conserta isso, so adia.

   O veu resolve pela composicao, que e como a C4 faz: o brilho fica do lado
   do simbolo e a coluna de texto fica no escuro. Nao e concessao de
   acessibilidade, e o desenho: fundo animado atras de texto e ruim de ler
   mesmo quando o numero passa.

   Em duas colunas (>=810px) o veu e horizontal, porque o texto e a metade
   esquerda. Em uma coluna o texto passa a ocupar o alto inteiro e o simbolo
   cai para baixo, entao o veu vira vertical.
   ========================================================================== */
.dgl-veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(var(--fundo-rgb,8,8,10),.90)  0%,
    rgba(var(--fundo-rgb,8,8,10),.86) 34%,
    rgba(var(--fundo-rgb,8,8,10),.62) 52%,
    rgba(var(--fundo-rgb,8,8,10),.24) 66%,
    rgba(var(--fundo-rgb,8,8,10),0)   80%);
}
/* 810 e onde o grid do hero deixa de ter duas colunas: 340 + 340 de coluna
   mais 56 de gap nao cabem mais no container.

   EM UMA COLUNA O VEU E DE PONTA-CABECA, e desde 02/09 ele virou junto com o
   layout: o simbolo passou a vir em cima e o texto embaixo, entao quem tem
   que ficar no escuro e a METADE DE BAIXO. Deixar como estava seria proteger
   o simbolo, que nao precisa de contraste nenhum, e entregar o texto para o
   nucleo aceso do shader.

   As paradas sao em PIXEL e saem de uma conta, nao de porcentagem. Ja foi
   pago o preco disso na secao 13: a altura da secao muda de 1003 a 1316px no
   celular (o texto reflui, o palco muda de tamanho), mas o comeco do texto e
   sempre nav + topo + palco + gap. Em fracao, esse mesmo ponto varia de 32%
   a 42% da secao, e nenhum numero unico serve. Em pixel, ele e exato.

   O corte comeca 40px ACIMA do texto e completa 110px depois: a rampa cai em
   cima do vao entre o simbolo e o rotulo, que e a unica faixa da dobra sem
   nada escrito. */
@media (max-width: 809px) {
  #topo .dgl-veu {
    --veu-corte: calc(var(--nav-h) + var(--hero-topo) + var(--hero-sw) + var(--hero-vao));
    background: linear-gradient(180deg,
      rgba(var(--fundo-rgb,8,8,10),0)    0px,
      rgba(var(--fundo-rgb,8,8,10),0)    calc(var(--veu-corte) - 40px),
      rgba(var(--fundo-rgb,8,8,10),.62)  calc(var(--veu-corte) + 30px),
      rgba(var(--fundo-rgb,8,8,10),.90)  calc(var(--veu-corte) + 110px),
      rgba(var(--fundo-rgb,8,8,10),.92)  100%);
  }
}

/* ==========================================================================
   O MESMO FUNDO NO BLOCO DOS 13 ESPECIALISTAS (secao 05)
   Segunda instancia do mesmo motor: fundo-webgl.9fdb270b.js varre TODOS os .dgl da
   pagina, entao nao ha codigo novo de JS aqui, so composicao.

   E ela muda por um motivo geometrico. No hero metade da tela e texto e a
   outra metade e o simbolo, entao o veu escurece um lado e libera o outro.
   Aqui o bloco e uma caixa larga e baixa com conteudo nos DOIS lados (o
   paragrafo a esquerda, o CTA a direita) e o vao livre no meio.

   Isso cai bem no shader por acidente feliz. A vinheta dele e radial sobre
   p, com p.x multiplicado pelo ratio da caixa: num bloco de ratio ~5 as
   bordas caem em dist ~4 e apagam sozinhas, e o brilho aditivo, que vive em
   smoothstep(0.8, 0.0, dist), sobra numa faixa estreita no centro, que e
   exatamente o vao entre as duas colunas. O veu so termina o servico.

   O VERMELHO E MAIS FORTE QUE O DO HERO, a pedido do Lucca. Subiram as duas
   cores de baixo da rampa (#2A0A0E -> #3A0C12 e #7E1520 -> #9E1B28) e a
   intensidade (.62 -> .72). O TOPO continua sendo o #E63946 da marca: subir
   ele seria inventar um vermelho que nao existe no manual.
   ========================================================================== */

/* A QUEBRA DAS DUAS COLUNAS VIROU UM NUMERO CONHECIDO. Ela era
   repeat(auto-fit, minmax(min(100%,300px),1fr)), que quebra em funcao do
   CONTAINER: dava por volta de 796px de viewport, mas nao ha media query que
   case com "por volta de". Como o veu precisa saber se o conteudo esta lado a
   lado ou empilhado, o numero passou a ser 800, e o inline perdeu a
   propriedade para a classe poder mandar. */
.bloco-webgl { grid-template-columns: 1fr; }
@media (min-width: 800px) {
  .bloco-webgl { grid-template-columns: 1fr 1fr; }
}
/* o .dgl e position:absolute com z-index:0, e dentro de um mesmo contexto de
   empilhamento isso pinta ACIMA de conteudo nao posicionado. Os irmaos
   precisam subir junto, igual a .hero-grade faz no hero. */
.bloco-webgl > :not(.dgl) { position: relative; z-index: 1; }

/* o gradiente de espera aqui e o degrade que a cliente aprovou, com a mesma
   animacao: sem WebGL o bloco volta a ser exatamente o que ele era */
.dgl-bloco {
  --intensidade: .72;
  background-image: linear-gradient(115deg, rgba(230,57,70,0) 0%, rgba(230,57,70,.30) 22%, rgba(255,110,120,.16) 40%, rgba(230,57,70,0) 62%, rgba(230,57,70,.22) 84%, rgba(230,57,70,0) 100%);
  background-size: 260% 100%;
  animation: dropFlow 14s ease-in-out infinite;
}
/* .dgl.is-webgl ja zera o background-image; a animacao tambem tem que parar,
   senao ela continua movendo um fundo que nao existe mais */
.dgl-bloco.is-webgl { animation: none; }

/* O VEU AQUI E QUASE LISO, e isso e o oposto do veu do hero. La ele abre um
   lado inteiro porque metade da tela e simbolo. Aqui nao ha lado nenhum para
   abrir: medido em fracao da largura do bloco, o paragrafo ocupa 3,6% a 48,2%
   e o CTA 51,8% a 96,4%. A UNICA janela livre e o vao de 44px entre as duas
   colunas, 3,6% da largura, e um nucleo aceso ali sairia como uma costura
   brilhante no meio do bloco, nao como fundo. Empilhado e igual: sobram 8
   pontos percentuais entre o fim do texto e o comeco do botao.

   Entao a composicao aqui e outra: o campo inteiro fica vermelho e VIVO, com
   o brilho contido. O teto e o proprio degrade que a cliente aprovou, que
   picava em rgb(80,28,34): o pior quadro daqui fica na mesma casa, so que a
   cor cobre o bloco todo e se move, em vez de ser uma faixa diagonal parada.
   A modulacao vem da vinheta do proprio shader, que numa caixa de ratio ~5
   ja apaga as bordas sozinha.

   Se um dia alguem quiser abrir mais, o numero que quebra primeiro e o CTA:
   #E63946 sobre o fundo do card ja nasce em 4,59:1, entao cada ponto de
   brilho atras dele sai do bolso desse texto. */
/* O VEU SO ENTRA COM O SHADER. Sem ele o veu escureceria o degrade da
   cliente por nada, e a promessa deste bloco (como a do hero) e que sem WebGL
   a pagina volta a ser exatamente a que ela aprovou, nao uma versao abafada.
   A mesma transicao do canvas, para os dois aparecerem juntos. */
.dgl-bloco .dgl-veu { opacity: 0; transition: opacity .6s ease; }
.dgl-bloco.is-webgl .dgl-veu { opacity: 1; }

.dgl-bloco .dgl-veu {
  background: linear-gradient(90deg,
    rgba(var(--fundo-rgb,26,11,14),.57)  0%,
    rgba(var(--fundo-rgb,26,11,14),.53) 22%,
    rgba(var(--fundo-rgb,26,11,14),.50) 50%,
    rgba(var(--fundo-rgb,26,11,14),.53) 78%,
    rgba(var(--fundo-rgb,26,11,14),.57) 100%);
}
/* empilhado a caixa fica alta e estreita, e ai a vinheta do shader quase nao
   ajuda: o veu compensa com um pouco mais de peso */
@media (max-width: 799px) {
  .dgl-bloco .dgl-veu {
    background: linear-gradient(180deg,
      rgba(var(--fundo-rgb,26,11,14),.61)  0%,
      rgba(var(--fundo-rgb,26,11,14),.55) 30%,
      rgba(var(--fundo-rgb,26,11,14),.51) 62%,
      rgba(var(--fundo-rgb,26,11,14),.57) 100%);
  }
}

/* O CTA E BRANCO COM TEXTO VERMELHO, pedido do Lucca, e o fundo animado
   agradece: sendo OPACO, ele tira o botao da conta do contraste de vez.
   Antes era um contorno vazado, e ai o shader passava por tras dele: no pior
   quadro o vermelho de 13px caia para 2,5:1 (e o proprio degrade da cliente
   ja derrubava para 3,3:1). Agora e um valor fixo, 4,17:1, que nao depende
   de quadro nenhum. Continua abaixo dos 4,5 do AA porque a dupla e a mesma
   da pendencia 8, o #E63946 da marca; a diferenca e que agora e estavel.

   Sem !important de proposito: o inline do botao nao declara background, e o
   .hv6:hover (que inverte para fundo vermelho e texto branco) precisa
   continuar ganhando. A borda continua vermelha, entao a inversao do hover
   troca so o miolo. */
.bloco-webgl .hv6 { background-color: #FFFFFF; }

/* com movimento reduzido o motor desenha um quadro so e nao liga o laco.
   O quadro fica: e imagem, nao animacao. */

/* ==========================================================================
   LENIS
   Pedido do Lucca em 01/09. E a UNICA biblioteca da pagina, 16 KB, servida
   de assets/ (nada de CDN, igual as fontes).

   O CSS que vem junto do pacote e pequeno e esta transcrito aqui para nao
   precisar de um segundo arquivo. `html.lenis` entra sozinho quando a
   instancia sobe: com JS desligado, movimento reduzido ou erro de carga,
   nada disso aplica e a pagina volta ao scroll nativo.

   scroll-behavior:smooth do html BRIGA com Lenis (dois motores de rolagem
   suave ao mesmo tempo, a ancora anda em dois tempos). Por isso ele vira
   auto assim que a classe entra, e continua smooth no fallback sem JS.
   ========================================================================== */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }


/* ==========================================================================
   RODADA DE 02/09 - O QUE VALE PARA MAIS DE UMA SECAO
   ========================================================================== */

/* --------------------------------------------------------------------------
   .btn-suave: o hover que a nav e o CTA do hero ja tinham, virado classe.
   Sobe 1px, a seta anda 3px, e tudo transiciona em vez de trocar num quadro.
   A seta precisa ser <span class="seta">: <span> em fluxo e caixa inline, e
   transform nao aplica em caixa inline.

   NAO tem !important: as regras .hv* do canvas e que precisam, porque
   competem com estilo inline. Aqui nao ha inline nenhum de transform.
   -------------------------------------------------------------------------- */
.btn-suave {
  transition: background .25s ease, color .25s ease, border-color .25s ease,
              transform .25s ease, box-shadow .25s ease;
}
.btn-suave:hover { transform: translateY(-1px); }
.btn-suave .seta { display: inline-block; transition: transform .25s ease; }
.btn-suave:hover .seta { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   .cabeca-centro: o cabecalho centrado, que ja era o da secao 03 e passou a
   ser tambem o da 10 e o da 11. Os filhos precisam de margin auto porque
   varios tem max-width proprio vindo do inline.
   -------------------------------------------------------------------------- */
.cabeca-centro { text-align: center; }
.cabeca-centro > * { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   SECAO 05 - os seis cards e o CTA do bloco

   Os cards so trocavam a cor da borda, sem transicao nenhuma: num quadro so.
   O hover agora e o mesmo gesto do resto da pagina (sobe e ganha sombra), e
   o !important e obrigatorio porque background e transform disputam com o
   style inline que veio do canvas.
   ========================================================================== */
.hv5 {
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease,
              background-color .35s ease, box-shadow .35s ease;
}
.hv5:hover {
  transform: translateY(-6px) !important;
  background-color: #14141A !important;
  box-shadow: 0 18px 40px -20px rgba(230,57,70,.45) !important;
}

/* ==========================================================================
   SECAO 06 - a esteira de mercados

   O CABECALHO ESTAVA FORA DO GRID DA PAGINA, e isso e a armadilha que ja
   estava anotada no CLAUDE.md: a secao nao tem padding lateral (a esteira
   precisa sangrar), entao o padding foi parar DENTRO do container de 1240.
   Resultado: em 1440 o titulo comecava em 140px enquanto todo o resto da
   pagina comeca em 100px, um padding inteiro de diferenca.

   A correcao e a mesma da nav: o padding vai para fora (.mercados-faixa) e o
   max-width fica num filho (.mercados-grade). Assim a conta vira
   (largura - 1240) / 2, igual a de todas as outras secoes.
   ========================================================================== */
.mercados-faixa { padding: 0 clamp(20px, 4vw, 40px); }
.mercados-grade { max-width: 1240px; margin: 0 auto; }

/* O FECHO SUBIU PARA O LADO DO TITULO. Ele era um bloco de 900px CENTRADO
   debaixo de um titulo alinhado a esquerda (a bagunca), e alinhar sozinho
   deixava meia pagina vazia a direita do h2 com a esteira espremida entre
   dois blocos de texto. Em duas colunas a leitura fica: o que se repete NAO e
   o segmento, e ai a lista de segmentos passa embaixo. A esteira vira a prova
   da frase.

   As medidas sao as mesmas do cabecalho da 05 de proposito: minmax de 320px,
   gap de 64 e align-items:end, para os dois cabecalhos quebrarem juntos. */
.mercados-cabeca {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}
.mercados-esteira { margin-top: clamp(44px, 5vw, 64px); }

/* ==========================================================================
   SECAO 10 - o bloco de nao fit

   REGRA DO BRIEFING: este bloco e PARAGRAFO CORRIDO, nunca lista. Em lista
   ele ganha peso igual ao do bloco de fit e a secao passa a parecer mais
   sobre rejeicao do que sobre parceria. E VERMELHO NAO ENTRA AQUI: na marca
   ele e intervencao estrategica, nunca erro nem recusa. Por isso a caixa e
   neutra e o fecho e branco, nao vermelho.

   O que mudou foi so a diagramacao: ele era uma pilha de 700px encostada a
   esquerda, debaixo de dois cards que ocupam a largura toda. Virou uma caixa
   centrada da largura do grid, com a medida da linha controlada por dentro.
   ========================================================================== */
.nao-fit {
  margin-top: clamp(40px, 5vw, 60px);
  padding: clamp(32px, 4.4vw, 52px) clamp(24px, 4vw, 56px);
  border: 1px solid rgba(244,244,245,.14);
  background: #0F0F13;
  text-align: center;
}
.nao-fit-titulo {
  margin: 0;
  font-family: 'Zalando Sans Expanded', 'Zalando Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: #FFFFFF;
  text-wrap: balance;
}
/* 720px e o teto da medida. O bloco 4 da bateria reprova linha acima de 92
   caracteres, e a conta dele e largura > 46 x font-size: com 16px isso da
   736px. 780 passava disso, e a falha aparecia so em 1440 e 1920, porque
   abaixo o container ja segura. */
.nao-fit-corpo {
  max-width: 720px;
  margin: 22px auto 0;
  font-size: 16px;
  line-height: 1.9;
  color: #7E7E88;
  text-wrap: pretty;
}
.nao-fit-fecho {
  max-width: 620px;
  margin: 30px auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(244,244,245,.12);
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: #FFFFFF;
}


/* ==========================================================================
   O CARROSSEL: UM COMPONENTE SO PARA A 08 E A 12

   As duas esteiras eram markup solto e diferente entre si: a dos cases tinha
   setas e scroll-behavior:smooth, a dos depoimentos nao tinha nem uma coisa
   nem outra. Agora as duas sao .carrossel, com o mesmo cabecalho, as mesmas
   setas, a mesma barra e o mesmo arrasto.

   A BARRA E CUSTOMIZADA, NAO ESCONDIDA. A vertical da pagina some (decisao
   antiga do cliente), mas nestas duas a barra e a unica pista de que existe
   mais conteudo ao lado. Ela so deixou de ser a barra do sistema.

   Firefox usa scrollbar-width/-color; Chrome usa os pseudo ::-webkit-. Os
   dois estao aqui, e o valor `thin` e o que a bateria cobra: `none` aqui
   seria conteudo escondido.
   ========================================================================== */
.carrossel-cabeca {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.carrossel-setas { display: flex; gap: 10px; }
.carrossel-seta {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(8,8,10,.18);
  background: transparent;
  color: #17171B;
  font-size: 16px;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease,
              background-color .25s ease, opacity .25s ease;
}
.carrossel-seta:hover:not(:disabled) {
  border-color: #E63946; color: #E63946; background-color: rgba(230,57,70,.06);
}
/* seta desligada na ponta: some quase toda em vez de sumir de vez, senao o
   par de botoes pula de largura */
.carrossel-seta:disabled { opacity: .26; cursor: default; }

.carrossel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  /* O RECUO DE CIMA E O ESPACO DO HOVER. overflow-x:auto forca o eixo Y a
     virar auto tambem (regra do CSS: se um eixo nao e visible, o outro nao
     pode ser), entao um card que sobe 6px seria cortado. Os 12px daqui sao a
     folga dele, e o margin-top do inline ja veio descontado. */
  padding: 12px 0 20px;
  scroll-behavior: smooth;
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: rgba(230,57,70,.55) rgba(8,8,10,.07);
}
.carrossel::-webkit-scrollbar { height: 6px; }
.carrossel::-webkit-scrollbar-track {
  background: rgba(8,8,10,.07); border-radius: 3px;
}
.carrossel::-webkit-scrollbar-thumb {
  background: rgba(230,57,70,.55); border-radius: 3px;
  transition: background-color .25s ease;
}
.carrossel::-webkit-scrollbar-thumb:hover { background: #E63946; }

/* DURANTE O ARRASTO o scroll-behavior TEM que voltar a auto: com smooth cada
   escrita de scrollLeft vira uma animacao, e o trilho anda atrasado em
   relacao ao mouse. E o hover sai de cena, senao os cards piscam por baixo do
   cursor enquanto passam. */
.carrossel.arrastando {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
  -webkit-user-select: none;
}
.carrossel.arrastando .carrossel-card { transition: none; }
.carrossel.arrastando .carrossel-card:hover { transform: none; box-shadow: none; }

.carrossel-card {
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .4s ease,
              box-shadow .4s ease;
}
.carrossel-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px -22px rgba(8,8,10,.45);
}

@media (prefers-reduced-motion: reduce) {
  .carrossel { scroll-behavior: auto; }
  .carrossel-card, .carrossel-card:hover { transition: none; transform: none; }
}


/* ==========================================================================
   SECAO 13 - O FUNDO WEBGL DO FORMULARIO

   Terceira instancia do mesmo motor. Aqui a geometria e a mais confortavel
   das tres: o formulario e um card OPACO (#0F0F13) no meio da secao, entao o
   shader aparece nas duas margens laterais e na faixa de baixo, onde nao ha
   texto nenhum. Quem precisa de protecao e so o cabecalho, que e centrado e
   ocupa o alto.

   E ele tem o mesmo elo fraco do hero: o "2 minutos para responder" e
   #7E7E88, que sobre #08080A nasce em 4,98:1 contra os 4,5 do AA. Meio ponto
   de folga. Por isso o veu e forte ate ~26% da altura e so depois abre.

   data-vinheta 0.45: a secao e quase quadrada, e com a vinheta cheia o brilho
   ficaria concentrado no centro, que e exatamente onde o card opaco cobre.
   Baixando ela o brilho chega nas margens, que e onde da para ver.
   ========================================================================== */
.dgl-form {
  --intensidade: .58;
  background-image: radial-gradient(90% 70% at 50% 0%,
                    rgba(230,57,70,.20) 0%, rgba(8,8,10,0) 62%);
}
.dgl-form .dgl-veu { opacity: 0; transition: opacity .6s ease; }
.dgl-form.is-webgl .dgl-veu { opacity: 1; }
/* AS PARADAS DESTE VEU SAO EM PIXEL, NAO EM PORCENTAGEM, e isso e o unico
   jeito de ele funcionar. O cabecalho tem altura mais ou menos constante
   (termina entre 357 e 512px do topo da secao), mas a SECAO nao: ela vai de
   1179px em desktop a 1845px em 320, porque o formulario empilha. Em fracao
   da altura, entao, o mesmo cabecalho ocupa 25% num celular e 43% em 1440.
   Foi assim que a primeira versao, em %, passou em 390 e 768 e derrubou o
   "2 minutos para responder" para 4,01:1 em 1440.

   Em pixel a conta e uma so: escuro ate 540px, que cobre o cabecalho em
   qualquer largura, e dali para baixo abre. O que fica embaixo e o card do
   formulario, que e opaco e nao se importa. */
.dgl-form .dgl-veu {
  background: linear-gradient(180deg,
    rgba(var(--fundo-rgb,8,8,10),.92)   0px,
    rgba(var(--fundo-rgb,8,8,10),.90) 540px,
    rgba(var(--fundo-rgb,8,8,10),.60) 680px,
    rgba(var(--fundo-rgb,8,8,10),.44) 820px,
    rgba(var(--fundo-rgb,8,8,10),.48) 100%);
}

/* ==========================================================================
   SECAO 13 - ACABAMENTO DO FORMULARIO

   A TROCA DE ETAPA NAO PRECISA DE JS. O JS so liga e desliga o atributo
   hidden, e elemento que sai de display:none reinicia as animacoes dele: a
   keyframe abaixo roda sozinha a cada etapa que aparece, inclusive na tela de
   sucesso. Se alguem trocar hidden por opacity um dia, isto para de rodar.
   ========================================================================== */
@keyframes formEntra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.form-etapa:not([hidden]),
.form-sucesso:not([hidden]) {
  animation: formEntra .45s cubic-bezier(.16,1,.3,1) both;
}

/* o campo tinha a borda trocando num quadro so, sem transicao, e o foco era
   so a cor da borda: num fundo escuro isso quase nao aparece */
.fc11 {
  transition: border-color .25s ease, background-color .25s ease,
              box-shadow .25s ease;
}
.fc11:hover { border-color: rgba(244,244,245,.3) !important; }
.fc11:focus { box-shadow: 0 0 0 3px rgba(230,57,70,.16); }
.fc11::placeholder { color: #5A5A63; }

.chip:hover { background: rgba(230,57,70,.07); }
.chip.ativo { box-shadow: inset 0 0 0 1px rgba(230,57,70,.5); }

.form-voltar { transition: color .25s ease, transform .25s ease; }
.form-voltar:hover:not([disabled]) { color: #FFFFFF; transform: translateX(-3px); }

@media (prefers-reduced-motion: reduce) {
  .form-etapa:not([hidden]),
  .form-sucesso:not([hidden]) { animation: none; }
}


/* ==========================================================================
   SECAO 14 - O FAQ EM DUAS COLUNAS

   Formato do projeto da Produtive, adaptado: titulo a esquerda, acordeao a
   direita, e o card de CTA debaixo do titulo. O acordeao em si nao mudou (os
   mesmos .faq-botao e .faq-corpo, o mesmo JS): mudou so a moldura.

   A COLUNA DA ESQUERDA E STICKY, e para isso ela precisa das duas coisas
   juntas: align-items:start no grid (senao o item estica e nao sobra caminho
   para grudar) e o proprio position:sticky. O bloco de referencia dele e a
   AREA de grid, que tem a altura da linha inteira, ou seja a altura do
   acordeao; e dai que vem o percurso.

   O topo do sticky sai de --nav-h, e nao de um numero solto: a barra e fixa e
   passaria por cima.
   ========================================================================== */
.faq-grade {
  display: grid;
  gap: clamp(36px, 5vw, 72px);
  max-width: 1240px;
  margin: 0 auto;
  align-items: start;
}
@media (min-width: 960px) {
  .faq-grade { grid-template-columns: minmax(300px, .84fr) 1.16fr; }
  .faq-coluna { position: sticky; top: calc(var(--nav-h) + 36px); }
}

/* A CAIXA E A QUE JA EXISTIA NO FIM DA SECAO, so mudou de lugar e de forma.
   A copy e a da cliente. Uma segunda chamada, inventada, diria a mesma coisa
   duas vezes na mesma secao. Ela era uma faixa larga com o texto de um lado e
   o botao do outro; numa coluna estreita ela empilha. O degrade animado
   (dropFlow) e o mesmo. */
.faq-card {
  position: relative;
  overflow: hidden;
  margin-top: clamp(32px, 4vw, 44px);
  padding: clamp(28px, 3.4vw, 36px);
  border: 1px solid rgba(230,57,70,.32);
  background-color: #0F0F13;
  background-image: linear-gradient(115deg, rgba(230,57,70,0) 0%, rgba(230,57,70,.32) 22%, rgba(255,110,120,.18) 40%, rgba(230,57,70,0) 62%, rgba(230,57,70,.24) 84%, rgba(230,57,70,0) 100%);
  background-size: 260% 100%;
  animation: dropFlow 14s ease-in-out infinite;
}
.faq-card > * { position: relative; }
.faq-card-rotulo {
  margin: 0;
  font-family: 'Lexend', sans-serif;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #FF8A93;
}
.faq-card-titulo {
  margin: 12px 0 26px;
  font-family: 'Zalando Sans Expanded', 'Zalando Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: -.015em;
  color: #FFFFFF;
}
.faq-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  color: #08080A;
  font-family: 'Lexend', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 18px 26px;
}

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

   O PATTERN ESTAVA COM O CIRCULO DA LOGO AZUL, e a culpa era do
   filter: invert(1). O arquivo e preto (os arcos) mais #E63946 (o nucleo), e
   o invert existia para os arcos pretos aparecerem num rodape preto. So que
   invert nao separa uma cor da outra: ele leva o preto para branco, que era a
   intencao, e leva o #E63946 para #19C6B9, que e ciano.

   Filtro de CSS nao recolore seletivamente, entao a saida foi gerar o arquivo
   ja na cor certa. assets/pattern-rodape.df2de10d.png tem os arcos em #F4F4F5 e o
   nucleo no vermelho da marca, com o alfa preservado, e dispensa filtro. De
   quebra ele ficou 75 KB mais leve que o original.

   O pattern-sm.png saiu de assets/ em 02/09 e foi para refs/marca/: ele e a
   fonte do arquivo recolorido, e um dia pode precisar ser gerado de novo.
   ========================================================================== */
.rodape-fim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 64px;
  padding-top: 26px;
  border-top: 1px solid rgba(244,244,245,.10);
  font-size: 12px;
  color: #6E6E78;
}
.rodape-link {
  color: #A9A9B2;
  text-decoration: none;
  border-bottom: 1px solid rgba(244,244,245,.18);
  padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.rodape-link:hover { color: #FFFFFF; border-bottom-color: #E63946; }

/* os icones sociais ja tinham hover (.hv14) e nenhuma transicao: trocavam as
   tres propriedades num quadro so */
.hv14 { transition: color .25s ease, border-color .25s ease, background-color .25s ease; }

/* AS QUATRO LINHAS DO TITULO DA 13 valem de 430px para cima, e ai elas sao
   <br> explicitos. Abaixo disso nao ha fonte que segure quatro: "JA CHEGOU
   ATE AQUI." pede 19 caracteres numa Zalando Sans Expanded, e em 320px a
   caixa tem 280px, o que daria uma h2 de 18px. Menor que o corpo da pagina.

   Entao abaixo de 430 os <br> SAEM (display:none nao quebra linha) e o
   navegador reparte sozinho com text-wrap:balance. Sao mais linhas, mas todas
   do mesmo tamanho, em vez de um "PROXIMO" orfao no meio. */
@media (max-width: 429px) {
  /* `.form-titulo br` saiu daqui em 04/09: virou a regra geral `h2 br`
     no fim do arquivo, que vale para os doze titulos com quebra manual */
  .form-titulo { text-wrap: balance; }
}


/* ==========================================================================
   O SIMBOLO EM CIMA DO TEXTO, NO MOBILE
   Pedido do Lucca em 02/09, junto com a mesma inversao na secao 02. Em duas
   colunas nada muda: o simbolo continua a direita do texto.

   Empilhado, quem vem primeiro era o texto, e o simbolo so aparecia depois de
   uma rolagem inteira. Agora a marca abre a pagina.

   O QUE ISSO CUSTA, medido em 02/09 e assumido de proposito:

     768x1024  CTA na dobra, 174px de sobra
     430x932   CTA na dobra,  92px de sobra
     390x844   CTA na dobra,  26px de sobra
     360x740   CTA  90px ABAIXO da dobra
     320x568   CTA  80px abaixo da dobra

   Nos dois ultimos nao ha ajuste que resolva, e a conta mostra por que. Em
   360 a coluna de texto sozinha mede 545px (rotulo + h1 de quatro linhas +
   duas frases + CTA) numa tela de 740 menos 70 de nav: o CTA so cabia porque
   sobravam 96px, e o simbolo em cima custa `palco + vao - o que o topo
   devolveu`. Resolvendo, a sobra vira `108 - palco` em 360 e `96 - palco` em
   320: para o CTA continuar na dobra o simbolo teria que ter menos de 108px
   de altura no primeiro e menos de 96 no segundo, contando os dois aneis. Ai
   nao e mais marca, e enfeite. A escolha foi ter a marca em cima.

   A bateria sabe disso: abaixo de 810px ela cobra o h1 inteiro na dobra e o
   CTA a no maximo 1,25 tela de distancia, em vez do CTA na dobra.

   Tres coisas foram apertadas para segurar 390 e 430, que sao as larguras de
   celular que importam hoje:
     --hero-sw     de min(96%, 560px), que dava 336px em 390, para
                   min(55vw, 290px), que da 215
     --hero-vao    de 56 para 24px
     --hero-topo   de 64 para 28px, porque agora quem abre e o simbolo e nao
                   faz sentido ele nascer no meio da tela
   -------------------------------------------------------------------------- */
@media (min-width: 810px) {
  .hero-grade { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 809px) {
  :root {
    --hero-topo: 28px;
    --hero-vao:  24px;
    --hero-sw:   min(55vw, 290px);
  }
  /* o inline manda gap:56px, entao aqui precisa de !important */
  .hero-grade { gap: var(--hero-vao) !important; }
  /* E A QUEBRA DO GRID VIRA UM NUMERO, nao mais o auto-fit do inline.
     Motivo: auto-fit quebra em funcao do CONTAINER, e o container depende do
     gap. Baixar o gap de 56 para 24 mexeu na quebra sem ninguem pedir, e em
     768px o hero voltou a ter duas colunas com o simbolo a esquerda e o veu
     ainda virado para uma coluna so. O veu tem media query em 809; o grid
     tinha 736 + padding. Agora os dois usam o mesmo 810.
     Em 810 para cima o resultado e identico ao do auto-fit: container de
     1240 da duas colunas de 592 nos dois casos. */
  .hero-grade { grid-template-columns: 1fr !important; }
  /* o min-height do palco tem que acompanhar, senao sobra caixa vazia embaixo
     do simbolo: a altura natural dele e o proprio --sw (a marca d'agua e
     quadrada e e a camada maior) */
  .hero-palco { order: -1; min-height: var(--hero-sw); }
}

/* ==========================================================================
   A GRADE DE "ANTES DE COMECAR" (secao 11)
   Sao cinco cards em repeat(auto-fit, minmax(min(100%,148px), 1fr)). Em duas
   colunas o quinto ("05 PROPOSTA") ficava sozinho na esquerda com um buraco
   do tamanho de um card na direita. O Lucca pediu ele em largura total.

   A faixa de duas colunas e um numero conhecido, e sai da propria conta do
   auto-fit: cabem n colunas quando a caixa tem n*148 + (n-1)*14. A caixa e a
   tela menos 2 x 20 de padding (abaixo de 500px o clamp(20px,4vw,40px) esta
   travado no minimo), entao:
     2 colunas a partir de 310 de caixa  ->  350px de tela
     3 colunas a partir de 472 de caixa  ->  512px de tela
   Medido e confere: 320 da uma coluna, 430 da duas, 520 da tres.

   `1 / -1` e nao `span 2` de proposito: se um dia a faixa mudar, span 2 mente
   em silencio e o -1 continua sendo a ultima coluna que existir. */
@media (min-width: 350px) and (max-width: 511px) {
  .comeca-antes > :last-child { grid-column: 1 / -1; }
}


/* ==========================================================================
   AJUSTES DA CLIENTE, 02/09
   ========================================================================== */

/* --- secao escondida ------------------------------------------------------
   A 08 (Cases) saiu do ar a pedido da cliente: ela quer separar os dados dos
   8 cases antes de mostrar a secao. Ela esta ESCONDIDA, nao apagada: os 8
   cards com as marcas [[ ]] continuam no index.html, e tirar o atributo
   `hidden` do <section id="cases"> devolve a secao inteira.

   O `!important` e porque a secao carrega `display` em nenhum lugar mas
   carrega estilo inline de sobra, e um dia alguem pode acrescentar display
   la; a regra do agente de usuario para [hidden] perderia calada. */
section[hidden],
.sim-caixa[hidden] { display: none !important; }

/* A CALCULADORA DA 03 SAIU DO AR em 03/09: a cliente achou que ela confunde
   mais do que ajuda. Some so a caixa do simulador; o cabecalho da secao e os
   cinco cards de custo continuam, e a 03 continua sendo a secao 03.
   Tirar o `hidden` do <div class="sim-caixa"> devolve ela inteira, com os
   tres sliders e a conta em tempo real. */

/* --- o CTA do painel mobile e BRANCO --------------------------------------
   Ele nascia `color: #FFFFFF` na propria classe e saia cinza na tela, e o
   motivo e especificidade: `.nav-menu a` (uma classe + um elemento) ganha de
   `.nav-menu-cta` (uma classe so). O botao herdava o #A9A9B2 dos itens de
   menu em cima do fundo vermelho.

   Duas classes resolvem sem `!important`. A seta e <span> dentro do <a>,
   entao ela herda. */
.nav-menu .nav-menu-cta,
.nav-menu .nav-menu-cta:hover { color: #FFFFFF; }

/* --- "LER MAIS" NOS DEPOIMENTOS (secao 12) --------------------------------
   Os sete depoimentos sao reais e tem tamanhos muito diferentes: medido em
   390px, o maior dava 19 linhas e o menor 4. Como a esteira e flex e o
   alinhamento padrao e `stretch`, os sete ficavam com a altura do maior:
   712px de card, sendo que um deles tinha 550px de vazio embaixo.

   O corte e em SETE LINHAS, e o numero nao e arbitrario: e onde os tres
   depoimentos curtos cabem inteiros e so os quatro longos ganham botao.

   Duas regras fazem a altura ficar igual:
     min-height no texto     o card curto se estica ate as sete linhas
     align-items: flex-start o card que abre cresce SOZINHO, em vez de puxar
                             os outros seis junto (que era o stretch de novo)

   Sem JavaScript nao ha corte nenhum: a classe .depo-corta e posta pelo
   pagina-v2.8bdf4055.js e o botao nasce `hidden` no markup. O texto aparece inteiro e
   nao sobra botao morto, que e a mesma promessa do resto da pagina. */
#depoTrack { align-items: flex-start; }

.depo-texto {
  /* 1.7 e o line-height do inline. Sete linhas cheias, sempre. */
  min-height: calc(7 * 1.7em);
}
/* O card SEM botao reserva a altura que o botao ocuparia. Sem isto os quatro
   que ganham botao ficam 35px mais altos que os tres que nao ganham, e o
   pedido era justamente que os sete tivessem a mesma altura.
   35 = 20 do gap da coluna + 19 do botao - 4 da margem negativa dele. */
#depoTrack .carrossel-card:not(.depo-corta) .depo-texto {
  min-height: calc(7 * 1.7em + 35px);
}
.depo-corta .depo-texto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  overflow: hidden;
}
.depo-corta.aberto .depo-texto {
  display: block;
  overflow: visible;
}
/* o nome e o cargo: dois cards tem o cargo em duas linhas, e sem isto eles
   ficavam 15px mais altos que os outros cinco */
.depo-rodape { min-height: 78px; }

.depo-ler {
  align-self: flex-start;
  margin: -4px 0 0;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(230,57,70,.35);
  background: none;
  font-family: 'Lexend', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  color: #E63946;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.depo-ler:hover { border-bottom-color: #E63946; color: #C42D39; }
.depo-ler:focus-visible { outline: 2px solid #E63946; outline-offset: 3px; }

/* --- MAIS PADDING NOS CARDS DA TIMELINE, NO CELULAR (secao 04) ------------
   Pedido da cliente. No celular a etapa tinha 38px em cima e embaixo e o
   realce colava no texto: 6px de folga vertical e 10px do lado esquerdo.

   O que NAO da para fazer e empurrar o texto para a direita. Medido em
   02/09: a linha do numero mais o titulo fica com 0px de folga em 320 e em
   360px ("03 PONTOS CEGOS" e a pior), entao qualquer pixel tirado da coluna
   quebra o titulo. A folga so aparece em 390 (19px) e 430 (59px).

   Entao o padding vem de dois lugares que nao custam largura nenhuma: o
   vertical da propria etapa, e o realce ABRINDO para a esquerda, na direcao
   do trilho, em vez de o texto andar para a direita. Os 14px deixam o realce
   livre do no, que tem 11px de diametro centrado no zero (chega a 5,5px). */
@media (max-width: 859px) {
  .metodo-lista { --realce-x: 14px; --realce-y: 16px; }
  .metodo-etapa { padding: 46px 0; }
}


/* ==========================================================================
   TUDO CENTRADO NO CELULAR
   Pedido da cliente em 02/09, com print de doze secoes. Vale so empilhado: em
   duas colunas nada muda, e desktop continua identico.

   A QUEBRA E 809px, e e a mesma que o hero e o veu ja usavam. Ela nao e a
   quebra "certa" de cada secao (a 02 empilha em 900, o bloco da 05 em 800, a
   timeline em 860, o FAQ em 960): e um numero so, assumido, porque doze
   quebras diferentes dariam doze faixas de tela em que a pagina fica meio
   centrada e meio nao. Entre 810 e 899 a 02 fica empilhada e alinhada a
   esquerda, e essa e a unica faixa em que da para ver a escolha.

   COMO CENTRAR ALGO QUE VEIO DE UM CANVAS. `text-align: center` sozinho
   resolve um terco do problema. Faltam:

     margin auto     tudo que tem max-width proprio (o .hero-apoio de 560, a
                     coluna de 520 da 02, o h2 de 760 da 12) continuaria
                     encostado a esquerda com o texto centrado dentro
     justify-content quem e flex nao obedece text-align nenhum: o rotulo com a
                     bolinha, a fila do CTA, as duas setas do carrossel, os
                     cinco icones do rodape. A propriedade so age em flex e
                     grid, entao aplicar em `div` e `a` sem distincao e
                     inofensivo no resto
     !important      o estilo veio do canvas em `style=`, e boa parte usa a
                     forma curta `margin: 0 0 18px`, que escreve as quatro
                     longhands. Sem !important o margin auto perde

   Os dois filetes vermelhos (a citacao da 02 e o blockquote da 09) sao o unico
   caso que nao e alinhamento: barra vertical a esquerda de um texto centrado
   fica torta. Eles viram filete de topo, que faz o mesmo trabalho de destaque.
   O vermelho continua sendo intervencao, nunca erro, que e regra do briefing.
   -------------------------------------------------------------------------- */
@media (max-width: 809px) {
  .mob-centro { text-align: center; }

  .mob-centro h1, .mob-centro h2, .mob-centro h3,
  .mob-centro p, .mob-centro blockquote,
  .mob-centro img, .tensao-corpo {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* `> div` FICOU DE FORA DESTA LISTA, e a razao e sutil: `margin: auto` num
     item de GRID ou de FLEX nao centra o item esticado, ele faz o item PARAR
     de esticar e encolher para o tamanho do conteudo. Com a regra valendo para
     todo filho, o cabecalho da 04 em 640px encolheu de 589 para 388px, e o h2
     saiu 101px da vertical do trilho da timeline, que a bateria mede.
     Quem tem max-width proprio e precisa de auto e uma div so, a coluna de
     520px da 02, e ela ganhou classe. */
  .mob-centro img { display: block; }

  /* so faz efeito em quem e flex ou grid */
  .mob-centro, .mob-centro div, .mob-centro a { justify-content: center; }

  /* A BOLINHA DO ROTULO VOLTA PARA JUNTO DO TEXTO. O rotulo do hero e um flex
     de dois filhos: a bolinha de 7px e o texto. Centrando o flex, o texto
     quebra em duas linhas e ocupa a largura inteira, entao a bolinha fica
     sozinha na ponta esquerda, longe da palavra. Vira bloco, e a bolinha vira
     inline-block dentro do fluxo do texto: ela acompanha a primeira linha. */
  .hero-rotulo { display: block !important; }
  .hero-rotulo > span:first-child {
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
  }

  /* A ULTIMA FILA DA GRADE DA 07 CENTRA. Sao tres numeros numa grade de
     auto-fit de 130px com 24 de gap: entre 324 e 477px de tela cabem duas
     colunas, e o "7 anos" ficava sozinho encostado a esquerda debaixo de um
     cabecalho centrado, que e exatamente o que ja foi corrigido na 03 e na 11.
     A conta da faixa: n colunas cabem com n*130 + (n-1)*24 de caixa, e a caixa
     e a tela menos 40 de padding. */
  .rodape-fim { justify-content: center; text-align: center; }

  /* o filete vermelho vira filete de topo */
  .tensao-citacao, .sobre-citacao {
    border-left: 0 !important;
    padding-left: 0 !important;
    border-top: 3px solid #E63946;
    padding-top: 20px;
  }
  .sobre-citacao { border-top-width: 2px; }

  /* A .sobre-citacao e a unica das duas que e CARD (fundo branco e padding
     nos quatro lados: `28px 30px`). Zerar so o padding-left deixava ela com
     30px de um lado e 0 do outro, e o efeito nao e o que parece:

       - o texto centrado nascia 30px torto, medido. Foi o que a cliente viu
         no print da assinatura em 04/09 e leu como "nao esta centralizado"
       - e a linha cheia encostava na borda esquerda do card

     A .tensao-citacao nao tem esse problema porque nao e card: e um <p> com
     `padding-left:22px` e nada do outro lado, entao zerar deixa simetrico.
     Ver a rodada de 04/09 no CLAUDE.md. */
  .sobre-citacao { padding-left: 30px !important; }
}

@media (min-width: 324px) and (max-width: 477px) {
  .prova-numeros > :last-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   CENTRAR NO CELULAR OS BLOCOS QUE TINHAM FICADO A ESQUERDA
   Pedido da cliente em 04/09/2026, por cinco prints: os cards de custo (03),
   os dois grupos de card do "como comeca" (11), o formulario (13) e o
   acordeao do FAQ (14).

   Sao exatamente os que a secao "O que continua alinhado a esquerda, de
   proposito" do CLAUDE.md listou na rodada de 02/09, quando ela mandou os
   doze primeiros prints. O caminho previsto la era este.

   POR QUE AQUI E POR SELETOR DE SECAO e nao pela classe .mob-centro no
   markup, que foi como os dezesseis blocos anteriores foram feitos: o alvo
   agora sao 5 cards da 03, 8 da 11, 15 campos da 13 e 8 perguntas da 14.
   Marcar um por um seria edicao por numero de linha em dezenas de `style=`
   de assinatura repetida, que e a armadilha que ja custou 98 KB do
   index.html uma vez. Num bloco so isto se le, se mede e se desfaz.

   A TIMELINE DA 04 CONTINUA A ESQUERDA, e continua de proposito: ela tem
   trilho vertical na borda esquerda, e centrar o texto faria cada etapa
   comecar num lugar diferente do no dela. A cliente nao pediu essa, e o
   CLAUDE.md ja registrava que ela precisaria de outro desenho.
   ========================================================================== */
@media (max-width: 809px) {

  /* --- 03 · os cinco cards de custo. O cabecalho ja era centrado --------- */
  #custo .custo-grade > div { text-align: center; }

  /* --- 11 · os dois rotulos e os dois grupos de card -------------------- */
  #comeca > div > p,
  #comeca .comeca-antes > div,
  #comeca .comeca-depois > div { text-align: center; }

  /* --- 13 · titulo da etapa, rotulo de campo e as duas filas de chip ----
     O CAMPO DIGITAVEL FICA A ESQUERDA, e isso nao e esquecimento: texto
     centrado dentro de input faz o cursor pular de lado a cada letra e
     atrapalha quem confere o que digitou. Centrar rotulo e centrar valor
     sao coisas diferentes.

     E `align-items` do label NAO se mexe. O label e um flex de coluna e o
     input nao tem largura propria: ele preenche por causa do `stretch`.
     Trocar para `center` encolheria todo campo para a largura do texto. */
  #diagnostico .form-etapa { text-align: center; }
  #diagnostico .form-etapa input,
  #diagnostico .form-etapa textarea { text-align: left; }
  #diagnostico .chip-fila { justify-content: center; }

  /* --- 14 · a pergunta do acordeao --------------------------------------
     O "+" fica onde estava, na direita, e um vao invisivel do mesmo tamanho
     entra na esquerda. Sem ele o "centrado" sai torto pela largura do
     proprio "+" mais o gap de 24px do botao. O ::before usa o mesmo
     caractere e o mesmo corpo justamente para nunca precisar de um numero
     magico que envelhece quando o "+" mudar de tamanho. */
  .faq-botao::before {
    content: "+";
    visibility: hidden;
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
  }
  .faq-botao > span:first-of-type { flex: 1; text-align: center; }

  /* a resposta tem 40px de padding so na direita, herdados do canvas. Com o
     texto centrado esse padding assimetrico joga a linha para a esquerda */
  .faq-corpo p { text-align: center; padding-right: 0 !important; }
}

/* ==========================================================================
   AS QUEBRAS DE TITULO NO CELULAR
   Pedido do Lucca em 04/09, com print da secao 09: "A DROP TAMBEM PASSOU /
   PELO / PROPRIO PONTO DE / VIRADA." A palavra "pelo" sozinha numa linha.

   A CAUSA. Os h2 da pagina tem `<br>` escrito na mao, herdado do canvas, e
   esses `<br>` foram decididos olhando a largura de DESKTOP. No celular a
   linha ja quebra sozinha antes de chegar no `<br>`, e aí o `<br>` quebra de
   novo: o resto do segmento fica orfao. Medido a 430px, a secao 09 tinha
   DUAS linhas orfas, "pelo" com 21% da largura e "virada." com 33%.

   Nao e um titulo so. Na varredura das quatro larguras de celular
   (320/360/390/430) apareceram orfas na 03, na 09, na 11 e na 12.

   A CORRECAO, em duas partes que so funcionam juntas:

   1. `br { display: none }` devolve a quebra para o navegador, que usa a
      largura inteira. Sozinho isso COLA PALAVRA: o markup do canvas escreve
      `passou pelo<br />proprio`, sem espaco ao redor da quebra, porque
      enquanto o `<br>` existe ele nao precisa mesmo. Por isso todo `<br>`
      dentro de h2 ganhou um espaco antes no `index.html`. Foi exatamente o
      defeito que o h2 da secao 13 tinha ("SUA EMPRESAJA CHEGOU"), corrigido
      mais cedo hoje, e a regra `.form-titulo br` que existia la virou esta,
      geral.
   2. `text-wrap: balance` pede ao navegador para igualar o comprimento das
      linhas em vez de encher uma e sobrar a ultima. E ele que impede a orfa
      de voltar por outro caminho, agora natural.

   O H1 DO HERO FICA DE FORA, e nao e esquecimento. As quatro linhas dele sao
   travadas de proposito, de 320 a 3440px, e o `text-wrap: balance` ja tinha
   sido TIRADO dele na conversao do canvas justamente porque reflui e briga
   com quebra manual. Alem disso a bateria cobra o h1 inteiro dentro da dobra
   em catorze larguras. Ver "O h1 do hero tem quatro linhas travadas".
   ========================================================================== */
@media (max-width: 809px) {
  h2 br { display: none; }
  h2 { text-wrap: balance; }
}

/* --- e a 03, que e outro problema com a mesma cara -----------------------
   Depois de devolver a quebra ao navegador, um titulo continuou com orfa: "O"
   sozinho, com 8% da largura, em 320 e 360px. Ali nao e o `<br>`: e o
   tamanho da palavra.

   Medido a 320px, com a fonte em 25px e a caixa em 280:

     "desalinhamento" sozinha ....... 297px   TRANSBORDA a caixa em 17px
     "O desalinhamento" ............. 327px   nao cabe, entao o "O" e expulso

   Ou seja, antes de ser uma quebra feia isso ja era um transbordo. Ele nao
   aparecia como rolagem lateral (a pagina mede 0), o que e justamente o que
   fez isso passar despercebido: teste de scroll horizontal nao pega palavra
   que estoura dentro de caixa que corta.

   E a UNICA da pagina: varridos os onze h2 visiveis em 320 e 360px, a
   segunda maior palavra e "perguntando..." da 14, com 244px numa caixa de
   280. Por isso a regra e so daqui, e nao um teto novo para todo h2: baixar
   o piso de todos achataria a hierarquia entre as secoes, que hoje vai de
   23 a 28px, para consertar uma palavra so.

   O `!important` e obrigatorio porque o `font-size` desta pagina mora no
   atributo `style` de cada titulo, e inline vence media query.

   `clamp(21px, 6.6vw, 25px)` da 21,1px em 320 (o teto para caber e 21,4),
   23,8px em 360 (teto 24,5) e volta aos 25px originais a partir de 389. */
@media (max-width: 389px) {
  #custo h2 { font-size: clamp(21px, 6.6vw, 25px) !important; }
}