/* ═══════════════════════════════════════════════════════════════════════
   CREATO STUDIO — site novo (recriado do zero)
   Fundação travada: cores + fontes.
   Cores:  --graphite #1A1A1A · --ice #F9FAFB · --gray #D4D4D4 · --purple #9E23B2
   Fontes: Entrada=Montenegrin Gothic One · Título=Antonio bold · Subtítulo=Antonio
           Corpo=News Cycle · Destaque=Unica One (linha "3 pilares")
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --graphite:#1A1A1A; --ice:#F9FAFB; --gray:#D4D4D4; --purple:#9E23B2;
  --font-title:'Antonio', sans-serif;   /* título = Antonio bold (700) */
  --font-sub:'Antonio', sans-serif;
  --font-body:'News Cycle', Arial, sans-serif;
  --font-accent:'Unica One', sans-serif;
  /* DISPLAY = Figtree Black Italic. Substituiu a Anton: a referência aprovada é
     uma grotesca PESADA e INCLINADA, e a Anton é o oposto disso (condensada,
     reta, peso único). O itálico não é enfeite — é ele que dá a impressão de
     avanço/velocidade que a Anton não tem em nenhum corte. */
  --font-display:'Figtree', 'Antonio', sans-serif;

  /* ── ESCALA TIPOGRÁFICA — DUAS RÉGUAS, e é de propósito ──────────────────
     `--fs-*` serve as fontes de largura NORMAL (Antonio, News Cycle, Unica One).
     `--fd-*` serve a DISPLAY. Existem separadas porque medi as duas famílias nas
     frases reais do site: a Figtree Black Italic é 1,31–1,39× mais larga que a
     Anton no mesmo corpo (média 1,35). Trocar a família mantendo os números
     antigos quebraria toda manchete em 2–3 linhas e derrubaria os slots fixos
     de cada cena em cima uns dos outros — foi exatamente o que aconteceu no
     primeiro teste. Os degraus são os MESMOS; só a régua mudou.
     Regras das duas: piso = mínimo legível · MEIO em `vw` manda no celular ·
     teto segura o desktop grande.
     ⚠️ Ao criar texto novo, USAR UM DESTES. Não inventar clamp local.
     ⚠️ Texto na display usa `--fd-*`; texto nas outras usa `--fs-*`. Misturar
        é o que produz duas frases do mesmo nível com pesos visuais diferentes. */
  --fs-xl:   clamp(2rem,   9.4vw, 4.4rem);     /* frase-herói de uma seção */
  --fs-lg:   clamp(1.6rem, 7.2vw, 3rem);       /* título de seção */
  --fs-md:   clamp(1.2rem, 5.2vw, 1.95rem);    /* frase de apoio */
  --fs-sm:   clamp(.95rem, 3.9vw, 1.18rem);    /* legenda */
  --fs-xs:   clamp(.72rem, 3vw,   .88rem);     /* kicker / rótulo / número */

  /* régua da DISPLAY. O salto de `mega` pra `xl` é grande de propósito: `mega`
     é só pra PALAVRA curta ("A Lembrada.") e `xl` é pra FRASE inteira — na
     mesma largura de tela uma frase precisa de bem menos corpo que uma palavra. */
  --fd-mega: clamp(2.2rem,  11.4vw, 5.4rem);   /* a palavra do ato: 1 por seção */
  --fd-xl:   clamp(1.65rem,  6.6vw, 3.4rem);   /* frase-manchete */
  --fd-lg:   clamp(1.3rem,   5.6vw, 2.45rem);  /* título de seção */
  --fd-md:   clamp(1.05rem,  4.4vw, 1.65rem);  /* apoio na display */

  /* ── RESPIRO (uma régua só, como a de tipografia) ────────────────────────
     Cada seção inventava o seu `gap`/`margin` na hora — daí seções apertadas e
     seções com buraco. Escala em `vh` porque tudo aqui é cena de tela cheia:
     o respiro tem que encolher junto com a altura da tela, não com a largura. */
  --sp-1: clamp(5px,  0.9vh, 11px);
  --sp-2: clamp(11px, 1.9vh, 22px);
  --sp-3: clamp(19px, 3.2vh, 38px);
  --sp-4: clamp(30px, 5.2vh, 62px);
  --sp-5: clamp(46px, 8vh,   96px);

  /* ── PAPÉIS ──────────────────────────────────────────────────────────────
     `--font-display` (Figtree Black Italic) é o PESO: caixa alta, inclinada,
     é ela que dá o soco nos momentos grandes.
     `--font-title` (Antonio 700) fica um degrau abaixo: títulos de seção e
     frases de apoio, onde a display pesaria demais e brigaria com o momento. */
  --tracking-display:-.022em;  /* peso 900 fecha os contraformas; sem o negativo
                                  as letras parecem soltas umas das outras */

  /* ── ENTRELINHA: por que estes números e não uns menores ─────────────────
     `line-height` mede a CAIXA. Os GLIFOS não cabem nela quando ela é menor
     que a caixa de conteúdo da fonte — e aí o acento do "Ó" da linha de baixo
     sobe DENTRO da linha de cima, e a perna do "Q"/"Ç"/vírgula desce dentro da
     de baixo. Foi o bug relatado ("texto sobrepondo, principalmente com acento
     ou coisa que desce"), e ele é invisível pra qualquer medição por caixa:
     as caixas ficam perfeitamente encostadas (0px), a TINTA é que se cruza.
     Medido em `scratchpad/audita-fontes.mjs`, em caixa alta PT-BR:
       fonte              acento sobe   perna desce   altura de caixa alta
       Figtree 900 it        0,95em        0,22em           0,70em
       Antonio 700/600       1,14em        0,32em           0,86em
       News Cycle 400        0,96em        0,22em           0,74em
       Unica One 400         0,85em        0,24em           0,65em
     Regra: entrelinha ≥ (subida do acento da linha de BAIXO) + (descida da
     linha de CIMA) + folga. A Antonio é a mais faminta — 1,14em de acento é
     mais que a altura de caixa alta dela, então título em Antonio com acento
     precisa de MUITO mais entrelinha do que parece.
     ⚠️ Só use `--lh-display-tight` onde o bloco é garantidamente de UMA linha. */
  --lh-display:1.18;           /* padrão da display: cabe acento embaixo */
  --lh-display-tight:.95;      /* uma linha só — apertado é parte do desenho */
  --lh-title:1.30;             /* Antonio caixa alta em várias linhas */

  /* a inclinação faz a última letra AVANÇAR além da caixa. Sem esta folga o
     itálico encosta/corta na margem direita e no recorte das cenas. */
  --slant-pad:.09em;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--graphite); color:var(--ice);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* A regra que aplica a DISPLAY mora no FIM do arquivo — ver "UTILITÁRIOS" lá
   embaixo. Ficando aqui em cima ela perdia por ordem de fonte pras regras de
   seção de mesma especificidade (`.sec3-line` vencia `.sec3-line--cycle`). */

/* ═══════════════════════════════════════════════════════════════════════
   01 · HERO MARKETING — "DEIXE DE SER MAIS UM"
   ═══════════════════════════════════════════════════════════════════════ */
.hero-mkt{
  position:relative; min-height:100svh; width:100%;
  overflow:hidden; background:var(--graphite);
}
/* ⚠️ Esta imagem é o PRIMEIRO QUADRO do vídeo do voo, extraído do arquivo já
   codificado — não é a arte original. É isso que faz o vídeo entrar por cima
   sem nenhum salto. Se o vídeo for regerado, esta imagem tem que ser reextraída
   junto. (a arte original, 'Unico oficial.jpeg', ficou sem uso) */
.hero-mkt__media{
  position:absolute; inset:0; z-index:0;
  background-image:url('../img/s1-hero.jpg');
  background-size:cover; background-position:center;
}
/* O VOO (S1→S2) — vídeo dirigido pela rolagem, mesmo princípio da escada da S7.
   Vive DENTRO do .hero-mkt__media de propósito: a imagem estática atrás é o
   poster real, então a primeira pintura do site não espera vídeo nenhum (o herói
   é o LCP). O arquivo só é pedido depois do `load`, e enquanto não estiver pronto
   o site se comporta exatamente como antes — crossfade das duas estáticas.
   `object-fit:cover` casa com o `background-size:cover` de baixo: os dois
   recortam igual em qualquer viewport, então a troca vídeo→imagem no fim do voo
   não desloca o pássaro um pixel. */
.hero-mkt__film{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; transition:opacity .4s ease;
  pointer-events:none;
}
.hero-mkt__film.is-ready{ opacity:1; }
/* escurece topo e base (p/ leitura da logo e do título gelo) e deixa o MIOLO
   limpo — onde vive o pássaro rosa, que precisa aparecer */
.hero-mkt__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,8,10,.58) 0%, rgba(8,8,10,.14) 18%,
    transparent 40%, transparent 56%,
    rgba(8,8,10,.34) 76%, rgba(8,8,10,.78) 100%);
}

/* Coluna: logo no topo · pássaro no meio (imagem) · título na base */
.hero-mkt__content{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:clamp(22px,4.5vh,52px) clamp(12px,3vw,44px) clamp(26px,5vh,62px);
}

/* Logo — topo, centralizada, pulsando E trocando de cor.
   Técnica: a silhueta do PNG vira MÁSCARA e "pintamos" a logo com uma
   background-color animada. 1 arquivo só, cores exatas, transição suave. */
.hero-mkt__logo{ flex:0 0 auto; }
.hero-mkt__logo .logo-mark{
  display:block; width:clamp(40px,5vw,58px); aspect-ratio:1/1;
  background-color:var(--purple);
  -webkit-mask:var(--logo-mask) no-repeat center / contain;
          mask:var(--logo-mask) no-repeat center / contain;
  animation:logoPulse 2.6s ease-in-out infinite,
            logoColor 2s  ease-in-out infinite;
  transform-origin:center; will-change:transform;
}
@keyframes logoPulse{
  0%,100%{ transform:scale(1);    filter:drop-shadow(0 0 0  rgba(255,255,255,0)); }
  50%    { transform:scale(1.06); filter:drop-shadow(0 0 16px rgba(255,255,255,.28)); }
}
/* Troca de cor da logo — 2 cores, alternância rápida e uniforme: roxo ⇄ gelo */
@keyframes logoColor{
  0%,100%{ background-color:var(--purple); }  /* roxo assinatura */
  50%    { background-color:var(--ice);    }  /* gelo            */
}

/* Título — base, gelo, caixa alta, preenche a largura (efeito pôster).
   DISPLAY (Figtree Black Italic), igual ao resto do site. Era a última manchete
   grande em Antonio: como é a PRIMEIRA coisa que se lê, ficava prometendo uma
   voz (condensada, reta) que nenhuma outra seção cumpria. */
.hero-mkt__title{
  flex:0 0 auto; margin:0; width:100%; text-align:center;
  font-family:var(--font-display); font-weight:900; font-style:italic;
  text-transform:uppercase;
  color:var(--ice); line-height:.9; letter-spacing:var(--tracking-display);
  text-shadow:0 6px 44px rgba(0,0,0,.5);
}
/* desktop: 1 linha, o JS (data-fit) escala pra encher a largura.
   clamp = fallback caso o JS não rode (a Figtree é ~1,35× mais larga que a
   Antonio, então o fallback desce junto — senão estoura a linha).
   A folga da inclinação vai nos DOIS lados: o itálico avança pra direita no
   alto da última letra E recua pra esquerda na base da primeira. Simétrica
   também porque o `text-align:center` continua valendo. */
.hero-mkt__title span{
  display:inline-block; white-space:nowrap;
  padding:0 var(--slant-pad);
  font-size:clamp(1.7rem, 9.2vw, 9rem);
}
/* mobile: quebra em linhas e fica grande (peso), com o pássaro visível acima */
@media (max-width:640px){
  /* no retrato o herói QUEBRA em "DEIXE DE SER / MAIS UM". O corpo aqui é
     MEDIDO, não escolhido: em 390px de tela a quebra vira "DEIXE DE / SER MAIS
     UM" (feia, e o pôster perde a forma) a partir de 56px. 13,2vw dá 51,5px —
     ~8% de folga, que é o que cobre variação de rasterização entre motores.
     Entrelinha .98: a frase é toda caixa alta SEM acento e SEM perna descendo
     (D,E,I,X,S,R,M,A,U), então a tinta cabe abaixo do mínimo da família. */
  .hero-mkt__title span{ white-space:normal; font-size:clamp(2.2rem,13.2vw,4rem); line-height:.98; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PALCO FIXO + TRILHA DE ROLAGEM (transição contínua e reversível 1↔2)
   Ativa só com <html class="js">. Sem JS, tudo empilha em fluxo normal e
   fica visível (degradação graciosa). O JS lê a posição do scroll e
   controla opacidade/deslocamento — rolar pra cima desfaz (inverso).
   ═══════════════════════════════════════════════════════════════════════ */
.js .scroll-space{ height:4300vh; }                      /* comprimento da trilha (1↔2↔3↔4↔5↔6↔7) */
/* sticky (não fixed): o palco gruda no topo ENQUANTO a trilha (scroll-space)
   ainda não terminou e solta sozinho depois — sem isso, ao adicionar mais
   seções o palco ficaria colado na tela pra sempre após a última cena. */
.js .stage{ position:sticky; top:0; height:100svh; overflow:hidden; z-index:0; }
/* SEM will-change aqui de propósito: 6 cenas de tela cheia com camada GPU
   permanente estouram a memória de vídeo no mobile e travam a rolagem.
   O navegador promove a camada sozinho durante a transição de opacity. */
/* SEM `isolation:isolate` aqui, e é DE PROPÓSITO: isolar a cena resolveria os
   z-index vazando entre cenas, mas obriga o navegador a compor cada cena num
   buffer por causa do grão em `mix-blend-mode` de tela cheia (S5/S6) — medido,
   derruba o FPS no celular. O vazamento é resolvido na escada de z-index da S7
   (ver comentário lá embaixo, antes de .sec7__film). */
.js .scene{ position:absolute; inset:0; width:100%; height:100%; }
.js .hero-mkt{ min-height:0; }                           /* hero ocupa o palco todo */

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE — fundos VERTICAIS dedicados + corte de efeitos caros.
   As imagens originais são deitadas (2.0 a 2.36), então no retrato o `cover`
   descarta ~80% delas. Aqui cada fundo tenta primeiro a versão *-mobile*; se
   o arquivo ainda não existir, o navegador simplesmente pinta a 2ª camada
   (a original) — nada quebra enquanto as artes não chegam.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  /* Camada ÚNICA (sem o fallback deitado por baixo). As artes mobile são a arte
     definitiva; se um arquivo faltar, aparece o fundo da seção (grafite).
     ⚠️ IMPORTANTE: cada override de fundo tem que vir DEPOIS da sua regra-base
     no arquivo, senão a base (que vem depois) vence por ordem de fonte. A base
     do hero está ANTES daqui (linha ~30), então o hero pode ficar aqui. As de
     sec2 e sec3 vêm DEPOIS (≈147 e ≈235) → os overrides delas ficam colados
     logo após cada base (ver blocos mobile das seções 02 e 03). */
  .hero-mkt__media{ background-image:url('../img/Mobile/s1-hero-mobile.jpg'); background-position:center center; }

  /* efeitos que derrubam o FPS no celular (grão de tela cheia com blend,
     sombra do recorte da folha). O surto roxo é tratado depois da regra-base
     (mais abaixo no arquivo) — senão a base o sobrescreve por ordem de fonte. */
  .sec5::before, .sec6__grain{ display:none; }
  .sec4{ filter:none !important; }

  /* Trilha mais curta no celular. O JS remapeia o eixo do tempo (ver WARP em
     site.js) eliminando ~7 telas de rolagem morta; sem isso, encurtar aqui só
     apressaria as animações. Com as duas coisas juntas: 28% menos rolagem no
     total e cada animação ~17% mais rápida. */
  .js .scroll-space{ height:3100vh; }
}
.js .sec2, .js .sec3{ opacity:0; }                       /* entram via scroll */
.js .beat, .js .pillar{ opacity:0; }                     /* surgem via scroll */
.js .sec3-line, .js .video-stack{ opacity:0; }           /* idem, seção 3 */

/* ═══════════════════════════════════════════════════════════════════════
   02 · POSICIONAMENTO + 3 PILARES  (base clara — fundo 2)
   ═══════════════════════════════════════════════════════════════════════ */
.sec2{ background:var(--ice); color:var(--graphite); overflow:hidden; }
/* ⚠️ ÚLTIMO QUADRO do vídeo do voo (extraído do arquivo codificado). O
   `background-position` TEM QUE SER O MESMO `object-position` do <video> do
   herói — os dois recortam a mesma proporção (2036x1016) e, se divergirem, o
   pássaro PULA no crossfade que fecha o voo. Era `right center` quando a arte
   era 2.357:1; agora é `center` nos dois lugares. */
.sec2__media{
  position:absolute; inset:0; z-index:0;
  background-image:url('../img/s2-pedra.jpg');
  background-size:cover; background-position:center;
}
/* clareia a esquerda p/ leitura do texto grafite; solta a direita p/ o pássaro */
.sec2__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(249,250,251,.94) 0%, rgba(249,250,251,.82) 32%,
    rgba(249,250,251,.30) 54%, rgba(249,250,251,0) 70%);
}
.sec2__content{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(26px,4.5vh,54px);
  padding:clamp(40px,7vw,120px);
}

/* Frases (Anton, grafite) — cada uma surge/some com a rolagem */
/* ⚠️ o respiro entre frases na display precisa ser MAIOR do que a conta ingênua
   sugere: com `line-height:.95` a caixa é mais BAIXA que os glifos, então a
   perna do "g" e o acento do "Ç" saem dela. Um gap de 9px entre caixas vira
   ~2px entre desenhos. Daí a régua `--sp-*` começar em ~11px. */
.sec2__lines{ display:flex; flex-direction:column; gap:var(--sp-2); }
.beat{ margin:0; color:var(--graphite); font-size:var(--fd-xl); line-height:var(--lh-display); }
.beat em{ font-style:normal; color:var(--purple); }      /* "identidade" */

/* "utilizando 3 pilares" muda de VOZ (Unica One) — é a linha que apresenta os
   pilares, não uma manchete. Unica One é bem mais larga que Anton, então desce
   um degrau na escala pra continuar cabendo em uma linha no celular. */
.beat[data-beat="3"]{
  font-family:var(--font-accent); font-weight:400; letter-spacing:.02em;
  font-size:var(--fs-lg); line-height:1.06;
  /* ⚠️ RESETAR o itálico da regra de display. A Unica One não tem corte
     itálico: herdando `font-style:italic` o navegador SINTETIZA a inclinação,
     ou seja, entorta os desenhos das letras em vez de usar um desenho feito
     pra isso. Aqui a diferença é o efeito: duas manchetes inclinadas e pesadas,
     depois esta linha reta e leve apresentando os pilares. */
  font-style:normal;
}

/* Camada GELO (knockout mobile): o texto que passa por cima do pássaro fica
   gelo; o resto revela o texto grafite de baixo. Cópia exata por cima,
   mascarada pela silhueta do pássaro (alinhada ao mesmo cover do fundo). */
/* ⚠️ O alinhamento da máscara TEM QUE SER O MESMO do .sec2__media e do <video>
   do herói — os três recortam 2036x1016 com `cover`, e basta um divergir pra
   silhueta sair do lugar do pássaro. Era `right center` na arte antiga (2.357:1);
   com o enquadramento do vídeo virou `center` nos três. */
.sec2__content--ice{
  z-index:3; color:var(--ice); pointer-events:none;
  -webkit-mask:var(--bird-mask) no-repeat center / cover;
          mask:var(--bird-mask) no-repeat center / cover;
}
.sec2__content--ice .beat em{ color:var(--ice); }       /* identidade também vira gelo sobre o pássaro */
/* ⚠️ OS PILARES ENTRAM NO KNOCKOUT. Enquanto eram monólitos grafite eles
   traziam o próprio contraste, então a camada gelo os escondia e eles serviam
   só de espaçador. Virando TEXTO puro sobre a foto, o contraste tem que vir de
   algum lugar — e o lugar já existe: a mesma dupla de camadas que resolve as
   frases. Agora eles leem grafite sobre o céu claro e gelo sobre o pássaro,
   sem véu novo e sem caixa. Por isso o `visibility:hidden` saiu daqui. */
.sec2__content--ice .pillar__num{ color:var(--ice); }   /* o roxo some sobre o pássaro, como em .beat em */

/* Pilares — TEXTO, um por linha. Sem retângulo: o número roxo e o filete fazem
   o trabalho que a caixa fazia, e o nome fica com o peso, que é o que a seção
   está de fato apresentando. */
.pillars{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
}
.pillar{
  position:relative;
  display:flex; align-items:baseline; gap:clamp(14px,1.7vw,28px);
  padding:clamp(11px,1.5vh,19px) 0;
  /* ⚠️ O JS dá zoom no pilar 1 na virada pra S3 ('pilar 1 expandido'). Quando
     ele era uma caixa estreita, escalar pelo centro lia como o monólito vindo
     pra frente. Virando LINHA de largura cheia, escalar pelo centro joga as
     duas pontas pra fora ao mesmo tempo e o gesto some. Ancorando na esquerda,
     o zoom entra PELA PALAVRA — que é o que a S3 vai abrir. */
  transform-origin:left center;
}
/* filete SÓ entre as linhas — não abre nem fecha o bloco, senão vira caixa de
   novo por outro caminho. `currentColor` é de propósito: assim o filete vira
   gelo junto com o texto quando cruza o pássaro. */
.pillar + .pillar::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:currentColor; opacity:.20;
}
.pillar__num{
  flex:0 0 auto; min-width:clamp(34px,3.8vw,56px);
  font-family:var(--font-accent); color:var(--purple);
  font-size:clamp(.9rem,1.05vw,1.12rem); letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
}
.pillar__name{
  font-family:var(--font-sub); font-weight:700;
  text-transform:uppercase; line-height:1.06;
  font-size:var(--fd-lg); letter-spacing:.005em;
  /* ⚠️ NÃO herdar o itálico da display: as frases da S2 são Antonio itálico e
     os nomes são Antonio reto. É esse contraste que separa "o que a agência
     diz" de "como os três se chamam" — se os dois inclinarem, some. */
  font-style:normal;
}

/* Mobile: texto no alto sobre o céu claro; pilares embaixo.
   (este bloco vem DEPOIS da base .sec2__media, então o override de fundo pega) */
@media (max-width:640px){
  .sec2__media{ background-image:url('../img/Mobile/s2-pedra-mobile.jpg'); background-position:center center; }
  /* máscara PRÓPRIA do mobile (9:16), gerada do último quadro do voo-mobile.
     Antes aqui esticava a silhueta 2:1 do desktop e corrigia com um `center 22%`
     no olho — com uma máscara do mesmo enquadramento do fundo, `center` basta. */
  .sec2__content--ice{
    -webkit-mask-image:var(--bird-mask-mob); mask-image:var(--bird-mask-mob);
    -webkit-mask-position:center;            mask-position:center;
  }
  /* véu branco SÓ no topo (onde vive o texto grafite) e some rápido, pra imagem
     aparecer limpa e nítida no resto — o véu pesado antigo esmaecia tudo */
  .sec2__scrim{
    background:linear-gradient(180deg,
      rgba(249,250,251,.55) 0%, rgba(249,250,251,.22) 20%,
      rgba(249,250,251,0) 42%);
  }
  .sec2__content{ justify-content:flex-start; padding-top:clamp(40px,10vh,80px); gap:clamp(22px,3.8vh,42px); }
  /* no retrato o número sai da frente e vai pra cima do nome: numa coluna de
     ~330px, o par lado a lado esmagaria "TRÁFEGO PAGO" em duas linhas curtas. */
  .pillar{ flex-direction:column; align-items:flex-start; gap:2px; padding:clamp(9px,1.3vh,14px) 0; }
  .pillar__num{ min-width:0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   03 · CONTEÚDO — pilar 1 expandido (fundo Céu, vídeos de clientes reais)
   ═══════════════════════════════════════════════════════════════════════ */
/* ⚠️ `isolation:isolate` NÃO É DECORATIVO. A linha 1 usa `mix-blend-mode` para
   vazar sobre a câmera; sem isolar aqui, a mistura procuraria backdrop acima da
   seção e acabaria se misturando com o que estiver pintado atrás da S3 (as
   cenas são absolutas e empilhadas). Isolando, a mistura fica presa às camadas
   da própria seção — que é exatamente o que ela tem que enxergar. */
.sec3{ background:var(--graphite); color:var(--ice); overflow:hidden; isolation:isolate; }

/* ── A TRAVESSIA (S3.1 → S3.2) ────────────────────────────────────────────
   Três camadas empilhadas na mesma moldura, e a ORDEM é o que garante o
   degradê gracioso quando o vídeo não carrega:
     __media = último quadro (dentro do tubo, o céu)   ← o destino
     __cam   = primeiro quadro (a câmera na mão)       ← some conforme o push
     __film  = o vídeo, por cima dos dois
   COM vídeo: o filme cobre tudo desde o quadro 0 (que É a câmera), então o
   __cam nunca aparece. SEM vídeo: o __cam faz crossfade para o céu ao longo
   da mesma faixa — vira dissolve em vez de zoom, sem tela preta.
   ⚠️ Os três usam `center`. Basta um divergir e a imagem salta na troca. */
.sec3__media, .sec3__cam{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.sec3__media{ z-index:0; background-image:url('../img/s3-ceu.jpg'); }
.sec3__cam  { z-index:1; background-image:url('../img/s3-camera.jpg'); }
.sec3__film{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; pointer-events:none;
}
.sec3__film.is-ready{ opacity:1; }

/* Mobile: artes dedicadas (vêm DEPOIS da base → o override pega) */
@media (max-width:640px){
  .sec3__media{ background-image:url('../img/Mobile/s3-ceu-mobile.jpg'); }
  .sec3__cam  { background-image:url('../img/Mobile/s3-camera-mobile.jpg'); }
}

/* AS QUINAS DO TUBO. Uma elipse que ultrapassa o meio de cada borda deixa
   escuro SÓ as quatro quinas — que é exatamente a moldura pedida. Feito em
   CSS, e não na arte, porque é geometria pura: fica idêntico nos dois
   breakpoints e dá pra ajustar sem regerar imagem.
   64%: no meio da borda a fração é 50/64 = 0,78 (ainda limpo); na quina é
   0,78 × 1,414 = 1,10 (passa de 100% → escuro cheio). */
.sec3__barrel{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  /* ⚠️ NASCE INVISÍVEL. As quinas pertencem ao DESTINO, não à partida: ligadas
     desde o começo elas enfiam a foto de estúdio (clara, limpa) dentro de um
     túnel. O JS acende junto com a travessia, então elas chegam com a chegada. */
  opacity:0;
  background:radial-gradient(ellipse 64% 64% at 50% 50%,
    transparent 0%, transparent 78%,
    rgba(9,7,11,.55) 92%, rgba(9,7,11,.94) 100%);
}
.sec3__scrim{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  /* ⚠️ ENXUTO de propósito. O degradê antigo (.4 no topo, .6 na base) foi
     calibrado para um céu de quadro cheio; com as quinas do tubo já
     escurecendo as bordas, os dois somados fechavam o quadro. Ficou só um
     reforço leve nas pontas. */
  background:linear-gradient(180deg,
    rgba(8,8,10,.22) 0%, transparent 20%, transparent 80%, rgba(8,8,10,.3) 100%);
}
.sec3__stage{ position:absolute; inset:0; z-index:5; }

/* Linhas de texto — posição BASE = empilhadas/centralizadas ("stacked").
   O JS soma um translate() extra pra levar cada uma até a posição final
   (esquerda/direita/legenda) conforme a rolagem — mesma técnica de sempre,
   agora interpolando X e Y (e largura) ao mesmo tempo. */
/* ⚠️ Os três `top` abaixo são o ÚNICO respiro entre as linhas no desktop (elas
   são irmãs absolutas, não uma pilha), então mexer em `line-height` ou no corpo
   OBRIGA a reconferir estes números — foi o que aconteceu: subir a entrelinha
   pra caber o acento fez a linha 2, que tem duas linhas, invadir a linha 1. */
.sec3-line{
  position:absolute; left:50%; top:38vh; margin:0;
  transform:translate(-50%,-50%);
  width:min(78vw,640px); text-align:center;
  font-family:var(--font-title); font-weight:700; text-transform:uppercase;
  line-height:var(--lh-title); letter-spacing:.004em; color:var(--ice);
  /* `--s3-shrink` é escrito pelo JS na divisão do desktop (as linhas vão pros
     lados e a coluna estreita, então o corpo tem que encolher junto). É um
     FATOR e não um tamanho absoluto de propósito: assim a hierarquia entre a
     linha e o clímax continua valendo o tempo todo. */
  font-size:calc(var(--fs-lg) * var(--s3-shrink, 1));
  text-shadow:0 6px 30px rgba(0,0,0,.4);
}
.sec3-line[data-line="2"]{ top:51vh; }

/* A LINHA 1 — A FRASE QUE ATRAVESSA A CÂMERA.
   ⚠️ Ela ERA grafite e morava em `top:14vh`. O motivo era real: grafite sobre o
   corpo preto da câmera é invisível, e a parede limpa só vai até ~25vh — então
   a frase era espremida na única faixa clara do quadro. A saída foi resolver
   por MISTURA em vez de fuga: a letra passa a reagir ao que está atrás dela.

   ⚠️⚠️ ERRO CORRIGIDO EM 26/08 — A FRASE TINHA SUMIDO. Ela estava em
   `mix-blend-mode:overlay`, e overlay com fonte BRANCA faz o seguinte:
     • base clara (>0,5) → satura pra BRANCO CHEIO
     • base escura (<0,5) → devolve ~2×base, quase o próprio fundo
   Só que a linha 1 vive inteira ANTES do push-in (entra em 0,298, sai em
   0,356; o push começa em 0,342), ou seja: o quadro embaixo dela é a PAREDE
   PÁLIDA do estúdio. Branco cheio sobre parede pálida dá ~1,1:1. A frase não
   ficou fraca — ficou literalmente invisível, e nos dois caminhos: com vídeo
   (a parede do primeiro quadro) e sem vídeo (o `.sec3__cam`, a mesma parede).

   A CORREÇÃO é trocar o modo, não a cor: `difference` com fonte branca
   devolve exatamente `1 − fundo`, pixel a pixel. Ou seja:
     • sobre a parede pálida → letra ESCURA, ~19:1 de contraste
     • sobre o corpo preto da câmera → letra CLARA, vazada, o objeto
       aparecendo através dela
   É o mesmo efeito que se queria, agora com o contraste GARANTIDO nos dois
   extremos em vez de garantido em um só. E continua acompanhando a câmera
   sozinho enquanto o push-in a movimenta — coisa que máscara fixa não faz.

   Depende de dois vizinhos: `isolation:isolate` na `.sec3` e a frase estar FORA
   do `.sec3__stage` (ver o HTML). Mexer num dos dois desliga o efeito.
   ⚠️ NÃO voltar pra `overlay` nem pra grafite chapado. Se o vazado incomodar,
   o caminho é `exclusion` (idêntico com fonte branca, mas mais suave quando o
   fundo tem cor). */
.sec3-line--out{
  top:50vh;                    /* CENTRADA: é sobre a câmera que o efeito existe */
  /* ⚠️⚠️ ESTA LINHA É A CAUSA REAL DO SUMIÇO — e o `mix-blend-mode` nunca teve
     culpa nenhuma. Quando a frase saiu do `.sec3__stage` (que tem z-index:5)
     para poder se misturar com a câmera, ela virou filha direta da `.sec3`
     SEM z-index. E as camadas da seção são todas numeradas:
        __media 0 · __cam 1 · __film 2 · __barrel 3 · __scrim 4 · __stage 5
     Elemento posicionado com `z-index:auto` pinta ANTES de qualquer z-index
     positivo. Ou seja: a frase estava sendo pintada DEBAIXO da câmera, do
     vídeo, do scrim e do palco. Não estava fraca, nem mal misturada — estava
     enterrada, nos dois breakpoints (no mobile ela também é `absolute`, e o
     `!important` de lá não devolve z-index nenhum).
     ⚠️ Tem que ser >= 4 (passar do scrim) e continuar FORA do `__stage`: é a
     posição que deixa a frase por cima do quadro e ainda dentro do grupo
     isolado da `.sec3`, que é o que o blend precisa enxergar. */
  z-index:4;
  width:min(88vw,860px);
  font-size:clamp(2rem, 8.4vw, 4.2rem);   /* acima do --fs-lg das irmãs, de propósito */
  line-height:1.06;
  letter-spacing:.002em;
  color:#fff;
  text-shadow:none;            /* sombra e blend brigam: a sombra vaza junto e suja */
  /* ⚠️ A MISTURA VAI NO <p>, NUNCA NO <span> DE DENTRO. O JS escreve um
     `transform` neste <p> pra posicionar e animar a frase, e `transform` cria
     contexto de empilhamento: um `mix-blend-mode` no filho ficaria preso
     DENTRO do parágrafo e se misturaria com nada — a frase sairia branca
     chapada e o efeito não apareceria, sem erro nenhum no console.
     No próprio <p> a mistura acontece contra o grupo isolado da `.sec3`, que é
     onde o vídeo da câmera está pintado. */
  mix-blend-mode:difference;
}
/* ⚠️ REDE DE SEGURANÇA. O modo de falha aqui é TEXTO INVISÍVEL — que foi
   exatamente o que aconteceu — e navegador sem `mix-blend-mode` entregaria
   branco chapado sobre parede branca de novo, calado. Sem suporte, a frase
   volta pro grafite com halo claro: feia, legível, nunca ausente. */
@supports not (mix-blend-mode: difference){
  .sec3-line--out{
    color:var(--graphite); mix-blend-mode:normal;
    text-shadow:0 2px 22px rgba(249,250,251,.9), 0 0 6px rgba(249,250,251,.85);
  }
}
/* "com:" — a frase quebra na travessia e retoma aqui. Fica um degrau abaixo da
   manchete de propósito: é conjunção, não conteúdo. */
.sec3-line__kicker{
  display:block; margin:0 0 .28em;
  font-family:var(--font-body); font-weight:400; text-transform:none;
  font-size:var(--fs-sm); letter-spacing:.02em; color:var(--gray);
  animation:none;   /* não entra no ciclo de cor da manchete */
}
/* o clímax da seção — sobe um degrau na escala e ganha a display */
/* 1,26 (e não o 1,18 padrão): esta é a frase do site que quebra VÍRGULA em cima
   ▸ TIL/ACENTO embaixo ("ESTRATÉGIA, / INTENÇÃO E") — perna descendo contra
   acento subindo, o pior caso de colisão de entrelinha que o site tem. */
.sec3-line--cycle{ font-size:calc(var(--fd-xl) * var(--s3-shrink, 1)); line-height:1.26; }
/* A LEGENDA — reescrita. Antes: --fs-sm, peso 400, cor --gray, e empurrada
   18vh abaixo da manchete pelo JS.
   ⚠️ O deslocamento não era diagramação, era CONSERTO DE CONTRASTE: em --gray
   (#D4D4D4) ela media 2,36 no alto da coluna direita e só chegava a 5,66 duas
   faixas abaixo. Ou seja, ela morava lá embaixo porque era fraca demais pra
   morar em cima.
   A correção ataca a causa: a legenda deixa de depender do que está atrás dela.
   Sobe pra --fs-md/500 em --ice, ganha uma pilha de halo de três camadas (difuso
   pra separar do fundo + apertado pra fechar a letra + rente pra segurar a
   borda) e uma RÉGUA ROXA acima. Com isso ela lê sobre nuvem clara e sobre
   parede escura do tubo — e aí pode voltar pra altura da manchete, que é onde
   a composição de três colunas quer que ela esteja. */
.sec3-line--caption{
  top:51vh;   /* MESMA âncora de [data-line="2"]: as duas colunas centram juntas */
  font-weight:600; font-family:var(--font-body); text-transform:none;
  font-size:var(--fs-md); letter-spacing:.004em; line-height:1.34; color:var(--ice);
  text-shadow:0 2px 18px rgba(8,8,10,.85), 0 0 5px rgba(8,8,10,.8), 0 1px 2px rgba(8,8,10,.9);
}
/* ⚠️ A RÉGUA ROXA FOI REMOVIDA EM 26/08 — e o pedido foi explícito: refinar o
   TEXTO, não pendurar coisa em volta dele. Um traço acima de uma legenda é
   decoração que finge estrutura: não codifica nada, não separa nada, e some da
   leitura no instante seguinte.
   O que dá presença à frase agora é a própria frase, em TRÊS NÍVEIS:

     "NÃO É TEORIA,"          lead-in — pequeno, espaçado, caixa alta, peso 400
     "é o que entregamos"     o corpo  — --fs-md, peso 600
     "toda semana"            o pico   — peso 700, branco puro

   A negação é a preparação e a afirmação é a entrega: a tipografia agora diz
   isso sozinha. E o lead-in em linha própria dá à legenda a silhueta de duas
   alturas que o traço tentava dar de mentira.
   ⚠️ Nada disso mexe em COR: os três níveis vivem em --ice/branco. Foi de
   propósito — a legenda só pôde subir pra altura da manchete porque parou de
   depender do fundo, e apagar um pedaço dela em cinza devolveria o problema de
   contraste que a pilha de halo abaixo existe pra resolver. */
.sec3-line--caption .cap-neg{
  display:block; margin:0 0 .30em;
  font-size:.62em;             /* proporcional ao corpo: encolhe junto no mobile */
  font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ice);
}
/* "toda semana" é a prova da frase — é o que separa "a gente faz" de "a gente
   entrega". Ganha peso e branco puro; o resto fica em --ice. */
.sec3-line--caption em{ font-style:normal; font-weight:700; color:#fff; }

/* ⚠️ O CICLO DE COR SAIU DAQUI, e não foi escolha estética.
   Esta frase ciclava entre `--ice` e `--purple`, igual à logo. Funcionava
   quando o fundo da S3 era um céu escuro e liso. Com o fundo novo — nuvem
   roxa da própria marca — a fase roxa mede **1,05:1** contra o que está atrás:
   não é "difícil de ler", é invisível.
   E não há roxo que salve: para 4,5:1 naquele fundo a cor precisaria de
   luminância 0,74, o que já é quase branco. Cor de marca não sobrevive sobre
   a própria marca. Fica gelo, com halo escuro para aguentar as nuvens claras.
   O `@keyframes` foi removido junto: era o único uso dele no site. */
.sec3-line--cycle{
  text-shadow:0 2px 18px rgba(0,0,0,.55), 0 0 3px rgba(0,0,0,.5);
}

/* Pilha de vídeos — some/aparece junto da divisão; 1 na frente + 2 espiando
   atrás. JS calcula o offset de cada .video-card (0=frente,1/2=espiando). */
.video-stack{
  position:absolute; left:50%; top:50%; z-index:3;
  width:min(60vw,300px); aspect-ratio:9/16;
  touch-action:pan-y; /* deixa o scroll VERTICAL da página passar; só o arraste horizontal é capturado */
}
.video-card{
  position:absolute; inset:0; border:none; padding:0; border-radius:16px; overflow:hidden;
  background-size:cover; background-position:center; cursor:pointer;
  box-shadow:0 40px 80px -24px rgba(0,0,0,.65);
  /* ⚠️ O `transform` PRECISA transicionar. Sem ele a pilha trocava de cartão
     num salto instantâneo — sem movimento pra acompanhar, um avanço de UM
     cartão lia como se tivesse pulado vários. É metade do conserto do "pula
     vídeos"; a outra metade está no clique, em initVideoStack(). */
  transition:opacity .25s ease, transform .28s cubic-bezier(.4,0,.2,1);
}
.video-card__play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--ice); opacity:.92; pointer-events:none;
}
.video-card__play svg{ width:44px; height:44px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.5)); }

.video-stack__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(249,250,251,.28);
  background:rgba(26,26,26,.55); color:var(--ice); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); transition:border-color .15s, background .15s;
}
.video-stack__nav:hover{ border-color:var(--purple); background:rgba(158,35,178,.25); }
.video-stack__nav--prev{ left:-52px; }
.video-stack__nav--next{ right:-52px; }

/* Mobile: sem divisão — ordem vertical fixa: linha1 / vídeo / linha2(cor) / linha3.
   !important sobrepõe qualquer inline style que o JS de desktop tenha deixado. */
@media (max-width:640px){
  .sec3__stage{
    position:relative; height:100%; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:16px; padding:24px;
  }
  .sec3-line{ position:static !important; transform:none !important; width:100% !important; }
  /* ⚠️ A LINHA 1 SAI DO FLUXO DA COLUNA. Ela morre antes das outras nascerem —
     nunca coexiste com elas, então não participa do empilhamento.
     Antes ela era empurrada pra `top:11vh` pra fugir do corpo preto da câmera
     (grafite sobre preto sumia). Com o `overlay` isso deixou de ser fuga: cair
     EM CIMA da câmera é o efeito. Fica centrada, igual ao desktop.
     Vem DEPOIS da regra acima de propósito: `!important` empata, ordem decide. */
  .sec3-line--out{
    position:absolute !important; top:50vh; left:50%;
    width:90% !important; transform:translate(-50%,-50%) !important;
    font-size:clamp(1.9rem, 11.6vw, 3.2rem);
  }

  /* ── No celular a PILHA não funciona: os cartões que espiam atrás vivem em
     translate(34px,-26px)/(64px,-48px) e o `overflow` (necessário pro desdobrar
     por max-height) os RECORTAVA — sobrava 1 vídeo só, sem pista de que há mais.
     Aqui vira uma FAIXA rolável nativa: o ativo fica centralizado, o anterior e o
     próximo espiam dos dois lados, o dedo arrasta com inércia do sistema e o
     scroll-snap assenta cada vídeo no centro. Sem setas (pedido do usuário). ── */
  .video-stack{
    position:relative !important; left:auto !important; top:auto !important;
    transform:none !important; order:2;
    align-self:stretch; width:auto;
    margin:4px -24px;                          /* -24px = anula o padding do palco (sangra) */
    aspect-ratio:auto;
    display:flex; gap:10px; padding:0 20vw;    /* 20vw de cada lado centraliza o 1º e o último */
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* X rola a faixa, Y continua rolando a página (o dedo escolhe a direção) */
    touch-action:pan-x pan-y;
  }
  .video-stack::-webkit-scrollbar{ display:none; }
  /* !important porque initVideoStack() escreve o layout de PILHA em style inline */
  .video-card{
    position:relative !important; inset:auto !important;
    transform:none !important; opacity:1 !important;
    z-index:auto !important; pointer-events:auto !important;
    flex:0 0 60vw; width:60vw; aspect-ratio:9/16;
    scroll-snap-align:center;
    box-shadow:0 22px 44px -20px rgba(0,0,0,.7);
  }
  .sec3-line--cycle{ order:3; }
  /* ⚠️ Era `.88rem` — menor que o --fs-sm do site inteiro, ou seja, o texto mais
     apagado da página. No retrato a legenda atravessa o quadro todo e cruza
     claro e escuro na mesma linha, então ela é justamente a que MAIS precisa de
     corpo e halo. Sobe pra --fs-sm de verdade e mantém a régua roxa (que aqui
     também faz o serviço de separar a legenda da manchete, já que no flex as
     duas ficam coladas pelo `gap`). */
  .sec3-line--caption{ order:4; font-size:var(--fs-sm); line-height:1.36; }
  /* o lead-in fica um degrau MAIOR no retrato: em --fs-sm o 0,62em do desktop
     cairia abaixo de 11px, e caixa alta espaçada nesse tamanho vira risco */
  .sec3-line--caption .cap-neg{ font-size:.72em; letter-spacing:.14em; margin-bottom:.34em; }
  .video-stack__nav{ display:none; } /* mobile: arrasta direto na faixa */
}

/* ═══════════════════════════════════════════════════════════════════════
   04 · TRÁFEGO PAGO — pilar 2 (folha clara PUXADA da quina inferior direita)
   ═══════════════════════════════════════════════════════════════════════ */
/* Fundo = "estúdio" claro: leve gradiente de parede→chão dá corpo ao espaço
   (nada de folha branca chapada). Mantém-se claro p/ o multiply da pessoa. */
.sec4{
  background:linear-gradient(to bottom,
    #FCFDFE 0%, #F8F9FC 42%, #EFF1F6 74%, #E6E8F1 100%);
  color:var(--graphite); overflow:hidden;
}
/* estado inicial: folha ainda não puxada (miolo colado na quina) — o JS
   dirige o clip-path (a "puxada") conforme a rolagem. */
.js .sec4{ clip-path:polygon(100% 100%, 100% 100%, 100% 100%); }

/* Parede ao fundo: papel-milimetrado bem sutil que dá textura ao topo (antes
   um vazio). Fica atrás de tudo (z-index:-1) e some rumo ao topo e ao chão. */
.sec4::after{
  content:""; position:absolute; left:0; right:0; top:0; height:66%; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(to right,  transparent 0 62px, rgba(30,30,58,.055) 62px 63px),
    repeating-linear-gradient(to bottom, transparent 0 62px, rgba(30,30,58,.045) 62px 63px);
  -webkit-mask:linear-gradient(to bottom, transparent 0%, #000 26%, #000 58%, transparent 100%);
          mask:linear-gradient(to bottom, transparent 0%, #000 26%, #000 58%, transparent 100%);
}

/* Atmosfera: vinheta que emoldura + spotlight de palco na pessoa + uplight
   roxo da marca subindo do chão (dá foco, profundidade e assinatura). */
.sec4::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    /* vinheta que emoldura o quadro (evita o "estouro" branco) */
    radial-gradient(140% 120% at 50% 38%, transparent 52%, rgba(20,20,42,.11) 100%),
    /* pool de luz concentrado no chão, onde a pessoa pisa */
    radial-gradient(40% 27% at 50% 90%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%),
    /* spotlight amplo de palco */
    radial-gradient(82% 60% at 50% 85%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 58%),
    /* uplight roxo da marca subindo do chão */
    radial-gradient(66% 54% at 50% 102%, rgba(158,35,178,.24) 0%, rgba(158,35,178,0) 64%);
}

/* Chão em perspectiva (nod ao caderno, porém em 3D) — mais alto, mais forte e
   com um brilho roxo na linha do horizonte. Some suave rumo ao fundo. */
.sec4__grid{
  position:absolute; left:-40%; right:-40%; bottom:-4%; height:82%; z-index:0;
  transform-origin:bottom center; transform:perspective(680px) rotateX(62deg);
  background:
    linear-gradient(to top, transparent 0 74%, rgba(158,35,178,.18) 86%, transparent 93%),
    repeating-linear-gradient(to bottom,
      transparent 0 46px, rgba(26,26,26,.36) 46px 48px),
    repeating-linear-gradient(to right,
      transparent 0 104px, rgba(26,26,26,.16) 104px 105px);
  -webkit-mask:linear-gradient(to top, #000 0%, rgba(0,0,0,.9) 42%, transparent 88%);
          mask:linear-gradient(to top, #000 0%, rgba(0,0,0,.9) 42%, transparent 88%);
  pointer-events:none;
}

/* Pessoa — recorte sépia "impresso" na folha. mix-blend multiply integra ao
   papel claro e dispensa depender de transparência perfeita do PNG. Ancorada
   embaixo; a 2 (aprovação) entra no clímax por cima da 1. */
.sec4__person{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.sec4__person-img{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:min(1320px,104vw); height:auto;
  mix-blend-mode:multiply; filter:contrast(1.02);
}
.sec4__person-img--2{ opacity:0; }

/* Texto — na frente da pessoa */
.sec4__stage{ position:absolute; inset:0; z-index:2; }
.sec4__lines{
  position:absolute; left:50%; top:37%; transform:translate(-50%,-50%);
  width:min(88vw,1000px); text-align:center;
  display:flex; flex-direction:column; gap:var(--sp-2);
}
.sec4-line{
  margin:0; font-family:var(--font-title); font-weight:700;
  text-transform:uppercase; line-height:var(--lh-title); letter-spacing:.004em;
  color:var(--graphite); font-size:var(--fs-lg);
}
/* ⚠️ `.sec4-line--trio` (era "Estratégia, Gestão e Otimização.") FOI REMOVIDO.
   Não por diagramação: repetia a construção da S3 ("Estratégia, Intenção e
   Autenticidade.") — dois tercetos de substantivos abstratos em seções
   vizinhas liam como a mesma frase dita duas vezes. O apoio da S4 passou a ser
   a frase do investimento, abaixo. */

/* O APOIO DA SEÇÃO — dividido em duas metades que flanqueiam a pessoa.
   Continua dividido (e não centralizado) porque no centro ele cai sobre o terno
   escuro e some. Antonio, a família do título, mas em peso médio: casa com as
   manchetes e contrasta pela caixa baixa. "seu objetivo" em roxo = o payoff.
   ⚠️ Subiu de --fs-md para --fs-lg quando herdou o posto do trio: com o trio
   fora, esta é a única frase de apoio da seção e precisava do corpo pra
   sustentar sozinha a faixa entre a manchete e o clímax. */
.sec4-flank{
  position:absolute; top:57%; margin:0; opacity:0; width:34%;
  font-family:var(--font-title); font-weight:600; color:var(--graphite);
  font-size:var(--fs-lg); line-height:1.24; letter-spacing:.006em;
  text-shadow:0 1px 10px rgba(249,250,251,.9);
}
.sec4-flank em{ font-style:normal; color:var(--purple); font-weight:700; }
.sec4-flank--left{  left:3%;  text-align:right; }
.sec4-flank--right{ right:3%; text-align:left;  }

/* Clímax — duas linhas, surgem uma por vez, dentro de uma PILHA.
   A pilha é o que garante o respiro: o `gap` é a única medida entre as duas
   linhas, então elas não se encavalam mesmo que uma quebre em duas linhas. */
.sec4__climax-stack{
  position:absolute; left:50%; top:34%; transform:translate(-50%,-50%);
  width:min(94vw,1180px); z-index:1;
  display:flex; flex-direction:column; gap:var(--sp-2);
}
/* apertado pode aqui: as duas quebras são "SE VOCÊ TEM / RESULTADO," e "NÓS
   TEMOS / RESULTADO." — nenhuma linha de baixo começa com acento e nenhuma de
   cima acaba com perna, então a tinta sobra. É o pôster do ato. */
.sec4-climax{ margin:0; text-align:center; opacity:0; font-size:var(--fd-mega); line-height:var(--lh-display-tight); }
.sec4-climax--a{ color:var(--graphite); }
.sec4-climax--b{ color:var(--purple); }

@media (max-width:640px){
  .sec4__grid{ height:70%; transform:perspective(440px) rotateX(63deg); }
  .sec4::after{ height:64%; }
  /* homem MUITO maior: a imagem é 2100x900 (deitada), então a figura é um trecho
     central pequeno — só ampliando bastante ela ocupa a metade de baixo e mata o
     vazio. A pessoa é ancorada embaixo (bottom:0), então crescer = cabeça sobe. */
  .sec4__person-img{ width:min(1180px,320vw); }
  .sec4__lines{ top:21%; width:92vw; }
  /* frases de apoio: stack coeso e centrado no respiro claro acima do homem,
     lidas como uma frase só (texto precisa do fundo claro; no terno sumiria) */
  /* ⚠️ No retrato o corpo NÃO acompanha o --fs-lg do desktop. A pessoa ocupa a
     metade de baixo e a manchete a de cima; a frase vive na faixa clara estreita
     entre as duas, e em --fs-lg cada metade quebrava em duas linhas e as quatro
     linhas encostavam na cabeça do homem. Fica --fs-md, e o destaque vem do
     peso e do respiro, não do corpo. */
  .sec4-flank{ width:auto; left:7%; right:7%; text-align:center; top:auto;
               font-size:var(--fs-md); font-weight:600; letter-spacing:.008em; line-height:1.28; }
  /* as duas se leem como UMA frase ("Cada real investido / alinhado com o seu
     objetivo") — 7% de tela entre elas quebrava a leitura em dois pensamentos.
     Subiu de 41/46 para 39/45,5 quando o trio saiu: sem ele a faixa clara
     começa mais alto, e 6,5% (em vez de 5) aguenta a metade de baixo quebrar. */
  .sec4-flank--left{  top:39%; }
  .sec4-flank--right{ top:45.5%; }
  /* No retrato o clímax QUEBRA de propósito em 2+2 ("SE VOCÊ TEM / RESULTADO," ·
     "NÓS TEMOS / RESULTADO.") e é isso que faz a palavra RESULTADO cair duas
     vezes alinhada — vira pôster em vez de sobrar espaço vazio em volta de duas
     linhas tímidas. A quebra é estável: medi a frase na Figtree e ela passa da
     largura do bloco em todo o intervalo mobile (320–640px), sempre depois de
     "TEM"/"TEMOS". Só é seguro porque as duas agora vivem numa PILHA. */
  .sec4__climax-stack{ top:31%; width:92vw; gap:var(--sp-2); }
}

/* ═══════════════════════════════════════════════════════════════════════
   05 · SITES E LPs — a "página" se RASGA do centro p/ as bordas; o texto é
   DIGITADO (cursor piscando) e a logo "escreve" a frase final andando pra
   direita. Fundo escuro p/ o rasgo aparecer contra a S4 clara.
   ═══════════════════════════════════════════════════════════════════════ */
/* Fundo "ateliê de criação premium": grafite com profundidade + grade de canvas
   (pontos tipo Figma) + blooms roxos + spotlight na mensagem. Grão fílmico e um
   wireframe-fantasma de landing page entram por ::before/::after. */
/* Fundo = CADERNO PAUTADO dark do tamanho da página: linhas de pauta + margem
   roxa vertical (feito bloco de rascunho) + furos na margem; o texto é "digitado"
   sobre ele. Dark p/ manter o contraste com o rasgo vindo da S4 clara. */
/* CÉU = CSS puro no gelo da paleta (escala infinita, cor exata, peso zero) */
.sec5{
  background:linear-gradient(180deg, #FFFFFF 0%, var(--ice) 46%, #EFEFF3 100%);
  color:var(--graphite); overflow:hidden;
}
.js .sec5{ clip-path:inset(50% 50% 50% 50%); }   /* rasgo fechado no centro — o JS abre */

/* grão fílmico (textura, mata o "chapado" digital) */
.sec5::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:url("../img/grain.svg") repeat; background-size:140px 140px;
  opacity:.06; mix-blend-mode:multiply;
}

/* ── CENÁRIO: imagem ÚNICA cobrindo a cena (troca no mobile) ─────────────── */
.sec5__scene{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('../img/S5 cenario desktop.jpg') no-repeat center bottom;
  background-size:cover; will-change:transform, opacity;
  opacity:0;   /* ⚠️ nasce apagado: o cenário pertence ao ATO B. O JS acende. */
}

/* ═══════════════════════════════════════════════════════════════════════
   ATO A · A LUPA
   ═══════════════════════════════════════════════════════════════════════
   O fundo aqui é o gradiente claro da própria `.sec5` — e isso é escolha,
   não economia: a metáfora é alguém PESQUISANDO, e página branca é o que
   uma busca parece. Nenhuma arte nova entra.

   TRÊS CAMADAS, e a geometria das duas primeiras tem que ser IDÊNTICA:
     __base  texto borrado, sempre visível  → "existe algo escrito"
     __lens  recorte circular que a rolagem move
     __mag   o mesmo texto, nítido e AMPLIADO em torno do centro da lupa
   ⚠️ O recorte fica no `__lens` e a ampliação no `__mag`, em elementos
   SEPARADOS de propósito: `clip-path` é aplicado no espaço local do
   elemento, então se os dois vivessem no mesmo nó o círculo seria escalado
   junto com o texto e a lupa cresceria em vez de ampliar.
   ⚠️ Os dois wrappers usam `inset:0` + o MESMO padding. É isso que faz a
   origem percentual do `transform-origin` e a do `clip-path` caírem no
   mesmo sistema de coordenadas. Mudar o padding de um só desalinha tudo. */
.s5-glass{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  opacity:0;                       /* o JS acende */
  --lx:12%; --ly:44%;              /* centro da lupa — escrito pelo JS */
  --r:clamp(74px,10.5vw,142px);    /* raio do vidro */
  --k:1.5;                         /* aumento */
}
.s5-glass__base, .s5-glass__mag{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(28px,6vw,90px);
}
.s5-glass__base p, .s5-glass__mag p{
  margin:0; width:min(92vw,880px); text-align:center; color:var(--graphite);
  font-family:var(--font-display); font-weight:900; font-style:italic;
  text-transform:uppercase; letter-spacing:var(--tracking-display);
  font-size:var(--fd-lg);
  /* ⚠️ ERA 1.06 e ficou grudado. Aqui a entrelinha não é só estética: a lupa
     percorre UMA LINHA DE CADA VEZ (ver o trajeto de leitura no site.js), e
     com 1.06 o vidro pegava a linha de baixo junto — o efeito lia como borrão
     móvel em vez de leitura. O respiro é o que deixa uma linha ficar nítida
     enquanto a outra continua borrada, que é o argumento inteiro da seção. */
  line-height:1.28;
}
/* ILEGÍVEL DE PROPÓSITO. O borrão é o argumento da seção: dá pra ver que há
   um negócio ali e não dá pra saber qual. Se der pra ler sem a lupa, o efeito
   inteiro perde a razão — este blur é o número a mexer, não a opacidade. */
.s5-glass__base{ filter:blur(9px); opacity:.4; }
.s5-glass__lens{ position:absolute; inset:0; clip-path:circle(var(--r) at var(--lx) var(--ly)); }
.s5-glass__mag{ transform:scale(var(--k)); transform-origin:var(--lx) var(--ly); }

/* ⚠️ O VIDRO — REFEITO EM 26/08. A versão anterior tinha três coisas que
   denunciavam o desenho, e a primeira era a pior:

     1. O ARO ERA ROXO (`2px solid rgba(158,35,178,.5)`). Nenhuma lupa tem aro
        colorido. Cor de marca em cima de um objeto que o olho conhece de cor
        transforma o objeto em ícone — e ícone com sombra e brilho lê como
        adesivo, não como vidro. A marca sai do ARO e vai pro halo e pro
        reflexo interno, onde ela é atmosfera em vez de material errado.
     2. O CABO era uma barra reta de 9px com gradiente roxo, saindo da quina
        `bottom/right` — não encostava no aro, não tinha volume, não tinha
        ponta. Agora sai do CENTRO em ângulo, com virola, cônico, em metal.
     3. FALTAVA A FÍSICA DO VIDRO: borda que refrata (escurece junto ao aro),
        uma quina de luz e um glint pequeno e duro. Sem isso o círculo é um
        buraco, não uma lente.

   O aro agora é METAL: um `conic-gradient` mascarado em anel, com claro em
   cima-esquerda e escuro embaixo-direita, coerente com a luz que o cenário
   da S5 já tem. Máscara e não `border` porque `border` só aceita cor chapada.

   ⚠️ A ORDEM DAS SOMBRAS IMPORTA. As `inset` desenham a refração da borda de
   dentro pra fora; as externas pousam a lupa sobre a página. Trocar a ordem
   apaga a refração. */
.s5-glass__ring{
  position:absolute; z-index:1; pointer-events:none;
  left:var(--lx); top:var(--ly);
  width:calc(var(--r) * 2); height:calc(var(--r) * 2);
  transform:translate(-50%,-50%);
  border-radius:50%;
  /* fallback: sem máscara o aro vira este cinza chapado, que é feio mas honesto */
  border:3px solid #A9ABB5;
  background:
    /* o glint duro, pequeno — é ele que diz "vidro" e não "plástico" */
    radial-gradient(circle at 27% 20%, rgba(255,255,255,.95), rgba(255,255,255,0) 9%),
    /* a quina de luz: um arco largo e macio, uma só (duas viram bolha de sabão) */
    radial-gradient(115% 95% at 30% 22%, rgba(255,255,255,.46), rgba(255,255,255,.05) 40%, rgba(255,255,255,0) 66%),
    /* o roxo da marca vive AQUI: um respiro no lado oposto à luz, dentro do vidro */
    radial-gradient(85% 75% at 74% 84%, rgba(158,35,178,.14), rgba(158,35,178,0) 72%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72),        /* fio de luz colado no aro    */
    inset 0 0 24px -5px rgba(26,26,26,.34),       /* REFRAÇÃO: a borda adensa    */
    inset 0 -10px 22px -14px rgba(26,26,26,.40),  /* peso embaixo do vidro       */
    0 2px 3px -1px rgba(255,255,255,.55),         /* contra-luz sob o aro        */
    0 22px 44px -18px rgba(26,26,26,.55),         /* a lupa pousada na página    */
    0 8px 16px -8px rgba(26,26,26,.32),
    0 0 42px -10px rgba(158,35,178,.30);          /* halo de marca, atmosférico  */
}
/* O ARO DE METAL. `inset:-3px` cobre exatamente a borda de fallback. */
@supports ((-webkit-mask: radial-gradient(#000,#000)) or (mask: radial-gradient(#000,#000))){
  .s5-glass__ring{ border-color:transparent; }
  .s5-glass__ring::before{
    content:''; position:absolute; inset:-3px; border-radius:50%; z-index:-1;
    background:conic-gradient(from 128deg,
      #55575F 0deg, #8B8D97 34deg, #D9DBE3 76deg, #FFFFFF 104deg,
      #C6C8D1 132deg, #85878F 186deg, #4E505A 232deg, #6E707A 286deg,
      #A8AAB4 322deg, #55575F 360deg);
    -webkit-mask:radial-gradient(closest-side, transparent 0 calc(100% - 6px), #000 calc(100% - 6px));
            mask:radial-gradient(closest-side, transparent 0 calc(100% - 6px), #000 calc(100% - 6px));
  }
}
/* O CABO. Sai do CENTRO da lente a 45°, então a virola encosta no aro por
   construção e não por número chutado. Cônico (afina na ponta), com fio de luz
   na aresta de cima — a mesma direção de luz do vidro. */
.s5-glass__ring::after{
  content:''; position:absolute; left:50%; top:50%;
  width:calc(var(--r) * .95); height:calc(var(--r) * .215);
  transform-origin:left center;
  transform:rotate(45deg) translate(calc(var(--r) * .99), -50%);
  background:
    /* a virola: um colar mais claro nos primeiros 14% do cabo */
    linear-gradient(90deg, #EDEEF2 0 6%, #A9ABB5 6% 14%, rgba(0,0,0,0) 14%),
    linear-gradient(180deg, #F1F2F6 0%, #C3C5CE 22%, #7A7C86 58%, #4B4D56 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  clip-path:polygon(0 0, 100% 13%, 100% 87%, 0 100%);   /* o afinamento */
  /* ⚠️ a sombra do cabo é `filter`, NÃO `box-shadow`: `clip-path` recorta a
     box-shadow externa junto com o elemento, então ela simplesmente sumiria.
     `drop-shadow` segue a silhueta recortada, que é o que se quer aqui. */
  filter:drop-shadow(0 8px 11px rgba(26,26,26,.42));
}
/* o texto de verdade para leitor de tela: o visual é decorativo e está todo
   marcado com aria-hidden, então sem isto a pergunta simplesmente não existe */
.s5-glass__sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.sec5__inner{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:clamp(28px,6vw,90px); padding-top:clamp(44px,8.5vh,104px);
}
.sec5__head{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(26px,6vh,72px); will-change:transform;
}

/* ⚠️ A PERGUNTA DIGITADA SAIU DAQUI. `.sec5__type`, `.s5-line`, `.s5-caret` e
   o `@keyframes s5blink` foram removidos junto com o elemento: a abertura da
   seção deixou de ser texto sendo digitado e passou a ser o ato da lupa
   (ver "ATO A · A LUPA" mais acima). O efeito de máquina de escrever ainda
   existe no site? Não — este era o único uso, e `typeInto()` saiu do JS. */

/* A RESPOSTA — o momento maior da seção, e é ele que a logo "escreve".
   ⚠️ Antes era `white-space:nowrap`: uma frase de 63 caracteres numa linha só
   OBRIGAVA a fonte a ser minúscula pra caber, e era daí que vinha o "fraco".
   Quebrando em 2–3 linhas (largura em `ch`, que acompanha o corpo do texto) ela
   pode ser grande de verdade. A logo corre num TRILHO ACIMA — antes ela ia no
   meio da linha, o que só funcionava com uma linha só. */
/* ⚠️ largura em px/vw, NÃO em `ch`: Anton é muito condensada, então `1ch` é
   estreitíssimo e um limite em `ch` picotava a frase numa coluna de uma palavra
   por linha. */
.sec5__reveal{
  /* 900px e não 660: com a Figtree (35% mais larga que a Anton) a resposta
     passou de 3 pra 4 linhas e a última caiu ABAIXO DA LINHA DO HORIZONTE do
     cenário — texto grafite sobre grama roxa saturada, ilegível. Alargando o
     bloco a frase volta pra 3 linhas e o conjunto inteiro fica no céu.
     ⚠️ Este número está amarrado ao CENÁRIO, não ao gosto: se a arte da S5
     mudar (ou o horizonte subir), refazer a conta. */
  position:relative; max-width:min(94vw, 900px);
  padding-top:clamp(58px,9.4vh,88px);    /* reserva o trilho da logo (a logo corre
                                            ACIMA da frase; com menos que isso a
                                            marca encosta na primeira linha) */
}
/* A RESPOSTA — display, mas em CAIXA DE FRASE (ver o comentário na lista da
   display, lá no fim do arquivo). Mantém família, peso e itálico dos momentos
   grandes; o que muda é a caixa, porque a frase é longa.
   ⚠️ Como saiu da regra coletiva, ela precisa declarar a display aqui — se
   alguém apagar este bloco a frase cai na fonte de corpo sem avisar. */
.s5-final{
  position:relative; margin:0; text-align:center; color:var(--graphite);
  font-family:var(--font-display); font-weight:900; font-style:italic;
  text-transform:none;                    /* ← a mudança */
  letter-spacing:var(--tracking-display);
  padding-right:var(--slant-pad);         /* folga pro avanço da inclinação */
  font-size:var(--fd-xl);
  line-height:1.06;              /* em caixa de frase entram descendentes (g, p, q)
                                    que a caixa alta não tinha: 1.0 encostava */
}

/* ═══ O "C" É A LOGO ═════════════════════════════════════════════════════
   A marca da Creato é um C, então ela não acompanha a palavra: ela É a
   primeira letra. Mesma técnica da logo do topo — a silhueta do PNG vira
   MÁSCARA e o que pinta é uma `background-color` animada, então dá pra ciclar
   a cor sem trocar arquivo.
   ⚠️ O CICLO AQUI NÃO PODE SER O DA SEÇÃO 1. Lá é roxo ⇄ GELO, sobre um
   quadro escuro. A S5 é clara: gelo sobre cenário claro é a mesma armadilha
   que já apagou a manchete da S3 e o indicador de rolagem. Aqui o ciclo é
   roxo ⇄ GRAFITE — mesmo compasso de 2s, mesma ideia (a marca pulsando dentro
   da palavra), e o grafite é justamente a cor do resto da frase: metade do
   tempo o C se dissolve na palavra, metade do tempo ele se assume como marca.
   ⚠️ A logo NÃO é inclinada junto com o itálico da frase. Deformar marca é
   errado; ela fica de pé e lê como mark, que é o que é. */
.s5-final__c{
  display:inline-block; vertical-align:baseline;
  width:.82em; height:.82em; position:relative; top:.11em;
  margin-right:.01em;
  background-color:var(--purple);
  -webkit-mask:var(--logo-mask) no-repeat center / contain;
          mask:var(--logo-mask) no-repeat center / contain;
  animation:logoColorClaro 2s ease-in-out infinite;
  opacity:0;                     /* o JS acende: o C é o 1º caractere digitado */
}
@keyframes logoColorClaro{
  0%,100%{ background-color:var(--purple); }
  50%    { background-color:var(--graphite); }
}

/* AS LETRAS. O JS embrulha cada caractere não-espaço num <i> e vai acendendo.
   ⚠️ É `visibility` e NÃO fatiar o texto. Fatiando (`slice`) a linha cresce a
   cada letra, e com texto CENTRADO isso empurra tudo meio caractere pro lado a
   cada quadro — a frase inteira treme enquanto digita. Com os <i> no lugar
   desde o começo, a quebra de linha já está resolvida e as letras só acendem:
   zero reflow, zero tremor. */
.s5-final__txt > i{ font-style:inherit; visibility:hidden; }
.s5-final__txt > i.on{ visibility:visible; }

/* O CURSOR. Um bloco fino na cor da marca, piscando em `steps` (liga/desliga
   seco, sem fade — fade lê como respiro, não como cursor). O JS o move pra
   depois da última letra acesa e o esconde quando a frase termina. */
.s5-caret{
  display:inline-block; width:.055em; height:.74em;
  vertical-align:baseline; position:relative; top:.06em; margin-left:.03em;
  background:var(--purple);
  animation:caretBlink 1.05s steps(1,end) infinite;
}
@keyframes caretBlink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }

/* a frase de verdade pro leitor de tela: o visual é o C mascarado + letras
   soltas, que não formam texto legível por tecnologia assistiva */
.s5-final__sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* "Confira algumas:" — a ponte entre a promessa e a prova. Corpo pequeno e
   caixa baixa DE PROPÓSITO: é uma deixa, não uma manchete. Se ela competir
   com a frase de cima, as duas perdem. */
.s5-kicker{
  position:relative; margin:clamp(14px,2.2vh,26px) 0 0; text-align:center;
  /* ⚠️ cinza LITERAL e não `var(--gray)`: o `--gray` da paleta é #D4D4D4, um
     cinza CLARO feito pra viver sobre fundo escuro. Aqui o fundo é o cenário
     claro do ato B — usar o token deixaria a deixa quase invisível. */
  font-family:var(--font-body); font-weight:500; color:#55555C;
  font-size:var(--fs-sm); letter-spacing:.02em; opacity:0;
  text-shadow:0 1px 8px rgba(249,250,251,.8);
}

/* carrossel das landing pages reais (prova) — ROLAGEM HORIZONTAL NATIVA:
   swipe no mobile, trackpad/arraste no desktop. Deriva automática sutil (JS) que
   pausa ao interagir. Barra de rolagem escondida (o design pede limpo); o arraste
   + as bordas em fade sinalizam que dá pra rolar.
   ⚠️ `touch-action` tem que ser `pan-x pan-y`: com `pan-x` sozinho o navegador
   PROÍBE o pan vertical em cima do elemento — como o carrossel ocupa uma faixa
   larga na parte de baixo da tela, todo swipe pra cima/baixo que começava nele
   morria e a rolagem da página parecia travada. Com os dois, o dedo escolhe:
   X rola o carrossel, Y avança a cena. */
.sec5__sites{
  position:absolute; left:0; right:0; bottom:clamp(20px,4.5vh,58px); z-index:2;
  opacity:0; overflow-x:auto; overflow-y:hidden; touch-action:pan-x pan-y; cursor:grab;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  -webkit-mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.sec5__sites::-webkit-scrollbar{ display:none; }
.sec5__sites:active{ cursor:grabbing; }
.sites-track{ display:flex; gap:clamp(16px,1.6vw,26px); width:max-content; padding:8px 16px; }
.site-card{ flex:0 0 auto; width:clamp(220px,24vw,336px); text-decoration:none; color:var(--graphite); }
.site-card__frame{
  display:block; position:relative; border-radius:12px; overflow:hidden;
  border:1px solid rgba(249,250,251,.14); background:#0e0e10; aspect-ratio:16/10;
  box-shadow:0 26px 50px -22px rgba(0,0,0,.7); transition:border-color .2s, transform .2s;
}
.site-card:hover .site-card__frame{ border-color:var(--purple); transform:translateY(-4px); }
.site-card__bar{ position:absolute; top:0; left:0; right:0; height:22px; z-index:2;
  background:rgba(20,20,22,.92); display:flex; align-items:center; gap:6px; padding:0 10px; }
.site-card__bar i{ width:8px; height:8px; border-radius:50%; background:rgba(249,250,251,.3); }
.site-card__frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; user-select:none; -webkit-user-drag:none; }
.site-card__label{ display:flex; align-items:center; gap:6px; justify-content:center;
  margin-top:10px; font-family:var(--font-body); font-size:.92rem; color:var(--ice);
  text-shadow:0 1px 10px rgba(40,4,50,.75), 0 0 3px rgba(40,4,50,.6); }
.site-card__label svg{ width:14px; height:14px; }
.site-card:hover .site-card__label{ color:#F0BFFA; }

@media (max-width:640px){
  .sec5__head{ gap:clamp(20px,3.4vh,30px); }
  .sec5__reveal{ max-width:94vw; padding-top:clamp(44px,7vh,60px); }
  /* no retrato a resposta desce um degrau da escala: em --fs-xl ela ocupava meia
     tela e invadia o cenário */
  .s5-final{ font-size:var(--fs-lg); }
  .sec5__sites{ bottom:16px; }
  .site-card{ width:72vw; }
  /* cenário: versão vertical (a deitada mostraria só uma fatia no retrato) */
  .sec5__scene{ background-image:url('../img/Mobile/S5 cenario mobile.jpg'); }
  /* A LUPA NO RETRATO. Duas coisas mudam e as duas são consequência da largura:
     a frase quebra em 3–4 linhas em vez de 2, então o bloco de texto é ALTO e
     estreito — e um vidro do tamanho do desktop cobriria quase a frase inteira,
     matando o efeito. Raio menor, aumento um pouco maior (a letra é menor, então
     precisa de mais lente pra virar leitura), e a varredura fica mais VERTICAL
     que horizontal: é assim que ela cruza todas as linhas. */
  .s5-glass{ --r:clamp(56px,15vw,88px); --k:1.72; }
  .s5-glass__base{ filter:blur(7px); }   /* corpo menor borra mais rápido */
  .s5-glass__base p, .s5-glass__mag p{ width:min(94vw,520px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   07 · ENCERRAMENTO — O DISPARO. Um vídeo (uma arqueira solta a flecha; o mundo
   vai de desenho chapado a fotografia; a flecha crava no centro do alvo) cujo
   TEMPO é dirigido pela rolagem. Por cima entra a copy; "A Esquecida" despenca
   num degrau e fica pra trás. (JS dirige.)
   ═══════════════════════════════════════════════════════════════════════ */
/* o gradiente É o clima do primeiro quadro, em CSS puro: enquanto o vídeo não
   chegou (ou se nunca chegar) a seção já está na cor certa, sem pesar um byte
   nem piscar branco.
   ⚠️ As três paradas NÃO são cores novas: são --purple (#9E23B2) com a MESMA
   matiz e a MESMA saturação — hsl(292°, 67%) — só variando a luminosidade
   (30% / 24% / 16%). Misturar o roxo da marca em direção ao grafite, que foi a
   primeira tentativa, derruba a saturação de 67% para 49% e o resultado deixa
   de ser o roxo da casa. Variar SÓ a luminosidade preserva a identidade.
   O primeiro quadro do vídeo é chapado, então o gradiente é quase plano de
   propósito — ele existe pro caso de o vídeo não chegar, não pra decorar. */
.sec7{
  background:radial-gradient(118% 88% at 40% 45%, #72197F 0%, #5C1466 55%, #3D0D44 100%);
  color:var(--ice); overflow:hidden;

  /* ── A ESCADA DE SLOTS DA S7 ────────────────────────────────────────────
     Os seis blocos de copy são posicionados um a um (cada um entra e sai na
     sua hora, então não dá pra usar um wrapper de fluxo). Sem estas variáveis
     eram seis percentuais soltos, e mexer em um obrigava a reconferir os
     outros cinco na mão. Aqui a régua é declarada: `--s7-a` é o degrau de
     cima do par, `--s7-step` é a distância entre os dois degraus, e o degrau
     de baixo é derivado. Mudar o par de lugar = mexer em UM número. */
  /* ── O LADO DA COPY (só desktop) ─────────────────────────────────────────
     O vídeo troca de lado no meio da seção: a arqueira nasce na ESQUERDA e o
     alvo termina na DIREITA. A copy faz o caminho inverso — começa na direita,
     atravessa junto com a câmera e termina na esquerda. Sem isso o texto cai
     em cima do desenho no começo e em cima do alvo no fim.
     `--s7-side` é 1 (direita) ou 0 (esquerda); o JS escreve a interpolação.
     `--s7-dx` faz a conta uma vez, em CSS, pro JS não precisar saber a largura
     da viewport nem repetir o clamp. No retrato a copy é centralizada e larga,
     então --s7-dx é zerado lá embaixo. */
  /* ⚠️ --s7-vw é a largura REAL da cena, escrita pelo JS. NÃO trocar por 100vw:
     100vw inclui a barra de rolagem e a cena não, e a diferença (~15px no
     Windows) empurra a copy pra fora da margem quando ela está na direita. */
  --s7-vw:   100vw;
  --s7-pad:  clamp(40px,6.5vw,118px);
  --s7-w:    min(calc(0.52 * var(--s7-vw)),660px);
  --s7-side: 1;
  --s7-dx:   calc(var(--s7-side) * (var(--s7-vw) - 2 * var(--s7-pad) - var(--s7-w)));

  --s7-lead: 20%;
  --s7-a:    36%;      /* degrau de cima: onde A LEMBRADA assenta */
  /* ⚠️ `--s7-step` tem um PISO: ele precisa ser maior que a altura de A LEMBRADA
     (corpo + traço roxo, ~11vh no desktop / ~6,5vh no retrato) mais o respiro.
     Abaixo disso a palavra de cima encosta na de baixo quando as duas assentam,
     por mais que a animação esteja certa. Mexer aqui = refazer essa conta. */
  --s7-step: 17vh;     /* distância entre os dois degraus do par */
  --s7-q:    34%;
  --s7-cta:  46%;
  --s7-sign: 62%;
}
/* estado inicial: folha ainda não puxada (miolo colado na quina inferior
   ESQUERDA) — o JS dirige o clip-path conforme a rolagem. Mesmo mecanismo da
   folha da S4, espelhado: lá vem da quina inferior direita, aqui da esquerda.
   Espelhar não é enfeite — a S7 anda da esquerda pra direita (a arqueira à
   esquerda, a flecha voando, o alvo à direita), e a folha varre no mesmo
   sentido em vez de contra. */
/* ⚠️ O z-index:10 AQUI É O QUE FAZ A FOLHA FUNCIONAR — não é ajuste fino.
   No instante em que a S7 ganhou clip-path ela virou CONTEXTO DE EMPILHAMENTO, e
   a escada 7/8/9/10 dos filhos (logo abaixo) deixou de valer no contexto da
   página: passou a valer só dentro da própria S7. A S6 continua sem contexto
   (a opacidade que o JS escreve chega a exatamente 1, e 1 não isola), então os
   z-index internos dela (.sec6__inner=3, .sec6__track=4, .sec6__title=6) são
   POSITIVOS na raiz e pintam depois de qualquer irmã com z-index auto.
   Resultado sem esta linha: a S7 inteira pintava POR BAIXO dos cartões e do
   título dos serviços — a folha entrava, o vídeo rodava, e os cartões ficavam
   boiando por cima. Com 10, a cena inteira passa acima do maior valor da S6 (6)
   e continua abaixo do diafragma (.iris = 19). Quem entrar depois continua a conta. */
.js .sec7{ opacity:0; z-index:10; clip-path:polygon(0% 100%, 0% 100%, 0% 100%); }

/* ⚠️ ESCADA DE z-index DA S7 (7,8,9,10) — não é decoração.
   As cenas são irmãs e a S4/S5 se isolam sozinhas (têm clip-path, que cria
   contexto de empilhamento). A S6 NÃO tem: a opacidade que o JS escreve chega a
   exatamente 1, e 1 não cria contexto. Resultado: os z-index internos da S6
   (.sec6__inner=3, .sec6__title=6) disputavam no MESMO contexto que os da S7 e
   ganhavam — o último cartão ficava sobrando por cima da seção final.
   Resolver com `isolation:isolate` na cena custou caro (medido: a S5/S6 têm grão
   em multiply de tela cheia, e isolar obriga o navegador a compor o grupo inteiro
   num buffer → derrubou o FPS no celular). Esta escada resolve de graça: tudo da
   S7 fica acima de tudo da S6. Quem entrar depois da S7 precisa continuar a conta.
   ⚠️ DESDE A FOLHA, esta escada é INTERNA: a S7 tem clip-path e isola sozinha, então
   estes números só ordenam as camadas da S7 entre si (filme < véu < copy). Quem
   levanta a S7 acima da S6 é o z-index:10 da cena — ver o bloco logo acima.
   Não há mais peça sobreposta na virada: a própria S7 é a folha (z-index 20
   ficou vago). */
.sec7__film{
  position:absolute; inset:0; z-index:7; width:100%; height:100%;
  object-fit:cover; pointer-events:none; background:transparent;
}
/* VÉU — o vídeo passa de um quadro escuro (céu fechado) pra um bem claro (céu
   aberto), então a copy gelo precisa de um piso de contraste que valha nos dois.
   Gradiente chapado de propósito: sem `backdrop-filter` e sem blend (os dois são
   caros no celular e este é justamente o trecho com vídeo rolando). Escurece só
   o lado onde a copy vive — no desktop a ESQUERDA, no mobile o TOPO. */
.sec7__veil{
  position:absolute; inset:0; z-index:8; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(18,4,24,.66) 0%, rgba(18,4,24,.44) 26%, rgba(18,4,24,.12) 48%, rgba(18,4,24,0) 64%);
}

/* Blocos de copy: cada um é posicionado sozinho (não há wrapper de layout), porque
   cada um entra e sai na sua própria hora. Ancorados pela ESQUERDA — o vídeo do
   desktop deixa a metade esquerda livre de escada de propósito. O JS só escreve
   `opacity` e um `translate3d` vertical; nada aqui depende de transform pra
   posicionar (senão o JS teria que reescrever a centralização a cada frame). */
.sec7__lead, .sec7__keep, .sec7__lost, .sec7__q, .sec7__cta-wrap, .sec7__sign{
  position:absolute; z-index:9; left:var(--s7-pad); right:auto;
  max-width:var(--s7-w); margin:0; text-align:left;
  opacity:0; will-change:opacity,transform;
}
.sec7__lead{
  /* 1,38: "No fim," acaba em VÍRGULA e "dois tipos" começa com haste alta — na
     Antonio (acento/haste de 1,14em) o 1,26 anterior deixava 2,5px de tinta */
  top:var(--s7-lead); font-family:var(--font-title); font-weight:500; line-height:1.44;
  font-size:var(--fs-md); color:rgba(249,250,251,.86); letter-spacing:.012em;
}

/* ── O PAR — uma LISTA DE DOIS que anda um degrau ─────────────────────────
   A copy promete "só existem dois tipos de marca", então os dois têm que
   estar na tela juntos: é a comparação, não uma troca.
   A versão anterior fazia A ESQUECIDA aparecer no degrau de cima e descer
   enquanto A LEMBRADA subia de baixo — as duas cruzavam os MESMOS pixels no
   meio do caminho, e era daí que vinha o "estranho": por um instante lia-se
   uma palavra borrada em cima da outra.
   Agora as duas andam PRA BAIXO na mesma janela: A LEMBRADA desce de cima
   para o degrau que A ESQUECIDA está deixando, e A ESQUECIDA desce um degrau
   inteiro. Como só existe uma direção, nenhuma passa por dentro da outra —
   lê-se como uma lista que ganhou um item no topo e empurrou o outro pra
   baixo. Quem chega fica em luz cheia; quem desceu perde o brilho.
   As DISTÂNCIAS são diferentes de propósito (a rebaixada anda muito mais):
   é o que faz o movimento ser lido como "cedeu o lugar" e não como "as duas
   deslizaram". */
/* as três do fecho são de UMA LINHA por construção (a escada de slots reserva
   altura pra uma linha só), então o apertado vale — e é ele que dá o soco */
.sec7__keep{
  top:var(--s7-a); display:block; line-height:var(--lh-display-tight);
  font-size:var(--fd-mega); color:var(--ice);
  text-shadow:0 0 52px rgba(158,35,178,.55);
}
/* o traço roxo é a MARCA da escolhida — desenha da esquerda pra direita depois
   que ela assenta, e é o único enfeite que A ESQUECIDA não ganha. Inclinado no
   mesmo ângulo da fonte pra ler como parte da letra, não como uma régua solta. */
.sec7__keep::after{
  content:""; display:block; height:clamp(4px,.55vh,7px); margin-top:.16em;
  width:calc(100% - var(--slant-pad)); border-radius:2px;
  background:linear-gradient(90deg, var(--purple), #d94ff0);
  transform:scaleX(var(--s7-rule,0)) skewX(-11deg); transform-origin:left center;
  box-shadow:0 0 22px rgba(158,35,178,.7);
}
.sec7__lost{
  top:calc(var(--s7-a) + var(--s7-step)); display:block; line-height:var(--lh-display-tight);
  font-size:var(--fd-lg); color:var(--ice); pointer-events:none;
}
/* "Qual vai ser a sua?" — o fecho, no lugar que o par acabou de vagar */
.sec7__q{
  top:var(--s7-q); font-size:var(--fd-xl); line-height:var(--lh-display-tight);
  color:var(--ice); text-shadow:0 0 44px rgba(158,35,178,.5);
}
/* largura pelo conteúdo: o halo é um ::after ancorado nas bordas do wrap, então um
   wrap esticado viraria uma elipse de largura de tela. No mobile a centralização
   vem de `left:0;right:0` + margens automáticas (e não de um translateX, que o
   transform do JS sobrescreveria). */
.sec7__cta-wrap{ top:var(--s7-cta); display:block; width:max-content; max-width:none; }
/* assinatura fechando o ato — entra por último, depois do botão */
.sec7__sign{
  top:var(--s7-sign); display:block; width:clamp(148px,15vw,224px); height:auto;
  max-width:none; pointer-events:none;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.5));
}
/* ── BOTÃO DO FECHO ────────────────────────────────────────────────────────
   O antigo era um comprimido roxo com brilho passando. Este é construído em
   camadas, e cada uma tem uma função:
     · halo no WRAP (o botão tem overflow:hidden por causa da varredura);
     · ANEL girando — um cônico atrás do corpo, aparecendo só na moldura de 1,5px
       que sobra. É o que dá o "vivo" sem piscar nada;
     · corpo com gradiente + relevo interno;
     · CHIP circular com a seta, que vira gelo no hover e empurra a seta.
   O anel e o halo só rodam com `.is-live` (o JS liga quando o botão entra) —
   parado, animação de fundo é bateria queimada à toa. */
.sec7__cta-wrap::after{
  content:""; position:absolute; inset:-22px; z-index:0; border-radius:999px; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(200,64,221,.72), rgba(158,35,178,0) 70%);
  opacity:.34; animation:ctaGlow 2.8s ease-in-out infinite; animation-play-state:paused;
}
.sec7__cta-wrap.is-live::after{ animation-play-state:running; }
@keyframes ctaGlow{ 0%,100%{ opacity:.3; transform:scale(.97); } 50%{ opacity:.8; transform:scale(1.05); } }

.sec7__cta{
  position:relative; z-index:1; isolation:isolate;
  display:inline-flex; align-items:center; gap:1.15rem;
  padding:1.15rem 1.15rem 1.15rem 2.6rem; border-radius:999px;
  text-decoration:none; color:#fff; white-space:nowrap;
  background:
    linear-gradient(#c23ad8,#c23ad8) padding-box,                 /* fica por baixo do anel */
    conic-gradient(from var(--cta-a,0deg),
      rgba(249,250,251,0) 0deg, #F9FAFB 34deg, rgba(249,250,251,.25) 88deg,
      rgba(249,250,251,0) 150deg, rgba(249,250,251,0) 220deg,
      #F9FAFB 268deg, rgba(249,250,251,.2) 320deg, rgba(249,250,251,0) 360deg) border-box;
  border:2px solid transparent;
  box-shadow:0 22px 56px -12px rgba(158,35,178,.9), 0 2px 0 rgba(255,255,255,.14) inset;
  transition:transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .24s ease;
}
/* o corpo colorido é um ::before ancorado no padding-box: assim o `border-box` do
   cônico só aparece na moldura de 1,5px, que é o anel. */
.sec7__cta::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(135deg,#d94ff0 0%,#9E23B2 54%,#6b1187 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 24px rgba(0,0,0,.26);
}
.sec7__cta-txt{
  position:relative; z-index:2;
  font-family:var(--font-accent); text-transform:uppercase; letter-spacing:.17em;
  font-size:clamp(.95rem,1.5vw,1.18rem); line-height:1;
}
.sec7__cta-chip{
  position:relative; z-index:2; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:2.9em; height:2.9em; border-radius:50%; font-size:clamp(.95rem,1.5vw,1.18rem);
  background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
  transition:background .24s ease, box-shadow .24s ease, transform .24s ease;
}
.sec7__cta-chip svg{ width:1.15em; height:1.15em; transition:transform .24s cubic-bezier(.2,.8,.3,1); }
.sec7__cta:hover{ transform:translateY(-2px); box-shadow:0 30px 70px -12px rgba(158,35,178,1), 0 2px 0 rgba(255,255,255,.2) inset; }
.sec7__cta:hover .sec7__cta-chip{ background:var(--ice); box-shadow:inset 0 0 0 1px rgba(255,255,255,.9); color:#6b1187; }
.sec7__cta:hover .sec7__cta-chip svg{ transform:translateX(3px); }
.sec7__cta:focus-visible{ outline:3px solid var(--ice); outline-offset:4px; }

/* o anel só gira quando o botão está vivo. Sem @property o `from <angle>` não
   interpola, então quem gira é a variável via keyframe de ângulo — Chrome/Safari
   modernos animam; onde não animar, o anel simplesmente fica parado (e bonito). */
@property --cta-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.sec7__cta-wrap.is-live .sec7__cta{ animation:ctaRing 5.5s linear infinite; }
@keyframes ctaRing{ to{ --cta-a:360deg; } }

/* fallback sem scrub (prefers-reduced-motion): sem vídeo (ele SÓ existe se houver
   rolagem pra dirigi-lo), então entra o mesmo quadro inicial como imagem de fundo
   e a copy inteira aparece empilhada e legível. */
.js.reduce .sec7{
  opacity:1 !important; visibility:visible !important; min-height:100svh;
  /* ⚠️ clip-path:none É OBRIGATÓRIO AQUI. O estado inicial da folha
     (.js .sec7) recorta a cena até um ponto, e quem tem movimento reduzido não
     rola nada pra abrir esse recorte — sem esta linha a seção final some por
     completo justo pra quem mais depende dela. Mesma linha que a folha da S4 já
     carrega. O filter acompanha pelo mesmo motivo. */
  clip-path:none !important; filter:none !important;
  background-image:url('../video/s7/poster-arco-desktop.jpg');
  background-size:cover; background-position:center;
}
.js.reduce .sec7__film{ display:none; }
/* as posições animadas se sobrepõem (o par lembrada/esquecida e o fecho ocupam a
   mesma faixa em momentos diferentes); parado, viram uma pilha */
/* escada PRÓPRIA do fallback: aqui as seis peças ficam todas na tela ao mesmo
   tempo (não há rolagem pra revezá-las), então os degraus são outros. Refeita
   junto com a troca de fonte — a display nova é mais alta e a de antes deixava
   "A LEMBRADA." encostada na linha de apoio. */
.js.reduce .sec7__lead{ top:13%; }
.js.reduce .sec7__keep{ top:25%; }
.js.reduce .sec7__lost{ top:40%; opacity:.34 !important; }
.js.reduce .sec7__keep::after{ transform:scaleX(1) skewX(-11deg); }
.js.reduce .sec7__q{ top:52%; }
.js.reduce .sec7__cta-wrap{ top:66%; }
.js.reduce .sec7__sign{ top:82%; opacity:.9 !important; }
.js.reduce .sec7__lead, .js.reduce .sec7__keep, .js.reduce .sec7__lost,
.js.reduce .sec7__q, .js.reduce .sec7__cta-wrap, .js.reduce .sec7__sign{
  opacity:1; transform:none !important;
}

@media (max-width:640px){
  /* no retrato a copy mora no TOPO — é a única faixa que o vídeo vertical mantém
     livre de escada do primeiro ao último quadro. Por isso o véu também gira. */
  .sec7__veil{
    background:linear-gradient(180deg,
      rgba(18,4,24,.72) 0%, rgba(18,4,24,.5) 26%, rgba(18,4,24,.16) 46%, rgba(18,4,24,0) 60%);
  }
  .sec7__lead, .sec7__keep, .sec7__lost, .sec7__q, .sec7__cta-wrap, .sec7__sign{
    left:20px; right:20px; max-width:none; text-align:center;
  }
  /* no retrato a copy é centralizada e ocupa a largura toda — não há lado pra
     trocar, e o vídeo vertical reserva a faixa de cima pra ela. */
  .sec7{ --s7-dx: 0px; }
  /* mesma escada, valores do retrato — a copy inteira mora acima de ~45%
     porque é a faixa que o vídeo vertical mantém livre de escada */
  .sec7{ --s7-lead:7%; --s7-a:19%; --s7-step:12vh; --s7-q:12%; --s7-cta:24%; --s7-sign:38%; }
  /* centralizado por margens automáticas (largura = conteúdo), e não por
     translateX — o transform é do JS. Ver comentário na regra base. */
  .sec7__cta-wrap{ left:0; right:0; margin-left:auto; margin-right:auto; }
  .sec7__cta{ padding:.9rem .9rem .9rem 1.9rem; gap:.8rem; }
  .sec7__sign{ left:0; right:0; width:clamp(132px,38vw,178px); margin-left:auto; margin-right:auto; }
  /* centralizado: o traço acompanha a palavra em vez de sangrar até a margem */
  .sec7__keep::after{ width:min(100%, 8.2em); margin-left:auto; margin-right:auto; transform-origin:center; }

  /* texto que ANIMA a cada quadro + sombra borrada = o navegador repinta o brilho
     junto, e aqui isso acontece com um vídeo rolando ao lado. A sombra sai. */
  .sec7__keep, .sec7__q{ text-shadow:none; }

  .js.reduce .sec7{ background-image:url('../video/s7/poster-arco-mobile.jpg'); }
}
@media (prefers-reduced-motion: reduce){ .sec7__cta{ animation:none; } }

/* ═══════════════════════════════════════════════════════════════════════
   06 · SERVIÇOS — CARTÕES QUE DESFILAM. Fundo claro (ice) + grão analógico.
   7 cartões roxos (sombra dura em BLOCO, cantos arredondados, inclinados e
   soltos) entram pela direita e passam pela cena: o scroll vertical (g6) dirige
   o translateX da trilha (JS). Posições/rotações variadas quebram o grid.
   ═══════════════════════════════════════════════════════════════════════ */
.sec6{ background:var(--ice); color:var(--graphite); overflow:hidden; }
.js .sec6{ opacity:0; }                    /* entra via scroll (cobre a S5) */

.sec6__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(85% 55% at 50% 118%, rgba(158,35,178,.08), rgba(249,250,251,0) 62%),
    linear-gradient(180deg, #FCFCFE 0%, #F1F1F5 100%);
}
/* grão analógico (poeira/ruído fino) por cima do claro — multiply p/ só escurecer
   os pontos, dando tato de filme sem tirar a base clara. Intensidade = opacity. */
.sec6__grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.55;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}

.sec6__inner{ position:absolute; inset:0; z-index:3; }

.sec6__title{
  position:absolute; top:clamp(26px,6.5vh,66px); left:clamp(20px,5vw,72px); z-index:6;
  margin:0; text-align:left; max-width:min(84%,720px);
  color:var(--graphite); font-size:var(--fd-lg); line-height:var(--lh-display);
}
.sec6__title::after{
  content:""; display:block; width:clamp(48px,7vw,96px); height:5px; margin-top:.55em;
  background:var(--purple); border-radius:3px;
}

/* TRILHA — desliza no X conforme g6: JS faz translateX(calc(var(--s6-travel)*g6)) */
.sec6__track{ position:absolute; inset:0; z-index:4; --s6-travel:-280vw; will-change:transform; }

/* CARTÃO — roxo com leve gradiente (material rico), cantos arredondados, sombra
   dura em BLOCO + sombra suave (profundidade premium), hairline e brilho no topo. */
.sec6__card{
  position:absolute; box-sizing:border-box; overflow:hidden;
  width:clamp(310px,40vw,530px); min-height:clamp(320px,44vh,460px);
  padding:clamp(26px,2.7vw,44px);
  display:flex; flex-direction:column;
  background:linear-gradient(158deg, #AC2CC2 0%, var(--purple) 48%, #8A1E9C 100%);
  color:#fff; border-radius:clamp(22px,2vw,34px); border:1px solid rgba(255,255,255,.14);
  box-shadow:12px 14px 0 rgba(24,24,24,.92), 0 34px 58px -26px rgba(72,8,86,.6);
}
/* brilho suave descendo do topo (dá o "material" premium) */
.sec6__card::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 34%);
}
/* marca-d'água: o MESMO glifo do serviço, gigante e tom-sobre-tom, sangrando no canto */
.sec6__wm{
  position:absolute; right:-7%; bottom:-11%; z-index:0; width:60%; max-width:330px;
  color:rgba(255,255,255,.085); pointer-events:none;
}
.sec6__wm svg{ width:100%; height:auto; display:block; }

.sec6__card-top{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
/* emblema: ícone monoline do serviço num badge de vidro (embossed) */
.sec6__badge{
  display:grid; place-items:center; flex:0 0 auto;
  width:clamp(48px,3.7vw,62px); height:clamp(48px,3.7vw,62px); border-radius:50%;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -6px 14px rgba(0,0,0,.12);
}
.sec6__badge svg{ width:52%; height:52%; }
.sec6__num{ font-family:var(--font-accent); font-size:.82rem; letter-spacing:.28em; color:rgba(255,255,255,.55); }

.sec6__card-foot{ margin-top:auto; position:relative; z-index:2; }
/* "PRODUÇÃO DE / ARTES" e "GESTÃO DE REDES / SOCIAIS" quebram: cedilha descendo
   contra caixa alta subindo */
.sec6__card-title{ margin:0; font-size:clamp(1.45rem,2.4vw,2.3rem); max-width:96%; line-height:1.06; }
.sec6__divider{
  display:block; width:clamp(34px,3vw,50px); height:3px; margin:var(--sp-2) 0;
  background:rgba(255,255,255,.55); border-radius:2px;
}
.sec6__card-body{
  margin:0; font-family:var(--font-body); font-weight:400;
  font-size:clamp(1.02rem,1.15vw,1.24rem); line-height:1.48; color:rgba(255,255,255,.9); max-width:32ch;
}

/* posições soltas: left = ponto na trilha; top/rotação variados (quebram o grid) */
.sec6__card:nth-child(1){ left:60vw;  top:30%; transform:rotate(-3.5deg); }
.sec6__card:nth-child(2){ left:103vw; top:46%; transform:rotate(2.4deg); }
.sec6__card:nth-child(3){ left:143vw; top:29%; transform:rotate(-1.6deg); }
.sec6__card:nth-child(4){ left:182vw; top:47%; transform:rotate(3deg); }
.sec6__card:nth-child(5){ left:226vw; top:32%; transform:rotate(-2.6deg); }
.sec6__card:nth-child(6){ left:268vw; top:45%; transform:rotate(2deg); }
.sec6__card:nth-child(7){ left:310vw; top:30%; transform:rotate(-2deg); }

@media (max-width:640px){
  .sec6__title{ max-width:88%; }
  /* MOBILE = um cartão por vez, todos no MESMO lugar (o JS desliza cada um pelo
     centro). Sem trilha de ~590vw: a camada gigante na GPU era o que deixava os
     cartões com aspecto "pixelado" e pesava a rolagem. */
  .sec6__track{ --s6-travel:0vw; transform:none !important; will-change:auto; }
  .sec6__track .sec6__card{
    /* min-height de verdade (era `auto`): o cartão encolhia até o texto e
       sobrava meia tela vazia embaixo dele no retrato */
    left:7vw; right:auto; top:27%; width:86vw; min-height:clamp(340px,45vh,420px);
    padding:24px 22px 26px; will-change:transform,opacity;
    box-shadow:8px 10px 0 rgba(24,24,24,.92), 0 22px 38px -20px rgba(72,8,86,.5);
  }
  .sec6__card-title{ font-size:clamp(1.45rem,6vw,1.95rem); }
  .sec6__card-body{ font-size:1rem; line-height:1.44; max-width:30ch; }
  /* `margin-top:auto` (o da regra-base) e NÃO uma margem fixa: a margem fixa
     vinha de quando o cartão tinha `min-height:auto` e se ajustava ao texto —
     ali o `auto` não tinha espaço livre pra distribuir e não fazia nada. Agora
     que o cartão tem altura mínima de verdade, a margem fixa deixava o texto
     colado no topo e um terço do cartão vazio embaixo. */
  .sec6__card-foot{ margin-top:auto; }
  .sec6__badge{ width:48px; height:48px; }
  .sec6__wm{ width:58%; right:-6%; bottom:-8%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DIAFRAGMA (transição S2→S3) — sete lâminas que FECHAM e REABREM.

   ⚠️ Por que lâminas desenhadas e não `clip-path` na .sec3: os dois lados da
   transição são CLAROS (a S2 termina num céu quase branco e a S3 abre na
   parede do estúdio). Sem contraste, uma fronteira de recorte não se lê e o
   diafragma vira crossfade sem forma. Desenhadas, o contraste vem delas.

   Cada lâmina é um retângulo que cobre o semiplano acima do centro. Girado em
   k·(360/7) e empurrado para fora por R, a UNIÃO das sete deixa um heptágono
   de raio interno R. R=0 fecha a tela; R=150 sai inteiro do quadro.
   `slice` mantém as lâminas circulares em qualquer proporção de tela — a
   distância do centro até a quina visível nunca passa de 141 unidades.

   Nunca fecha 100% (R mínimo ~8): tela preta chapada faz quem parou a rolagem
   ali achar que quebrou. Mesmo princípio dos anéis do alvo da S6→S7.
   ═══════════════════════════════════════════════════════════════════════ */
.iris{
  position:absolute; inset:0; z-index:19; pointer-events:none;
  visibility:hidden;
}
.iris svg{ display:block; width:100%; height:100%; }
.iris__blade{ fill:#0B0A0D; }

/* ═══════════════════════════════════════════════════════════════════════
   Lightbox de vídeo (reels da seção Conteúdo)
   ═══════════════════════════════════════════════════════════════════════ */
.vmodal{ position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:1.5rem; }
.vmodal.is-open{ display:flex; }
.vmodal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.86); backdrop-filter:blur(7px); }
.vmodal__stage{ position:relative; z-index:1; display:inline-flex; animation:vmodalUp .28s ease-out; }
@keyframes vmodalUp{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
.vmodal__media{ display:flex; border-radius:18px; overflow:hidden; background:#000; box-shadow:0 30px 90px -20px rgba(0,0,0,.85); }
.vmodal__video{ display:block; max-height:86vh; max-width:92vw; width:auto; height:auto; background:#000; }
.vmodal__close{
  position:absolute; top:.55rem; right:.55rem; z-index:2; width:40px; height:40px; border-radius:50%;
  background:rgba(20,20,20,.7); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.25);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  transition:border-color .2s, background .2s;
}
.vmodal__close:hover{ border-color:var(--purple); background:rgba(20,20,20,.9); }

/* ═══════════════════════════════════════════════════════════════════════
   Movimento reduzido / sem scrub → empilha tudo e mostra (acessível)
   ═══════════════════════════════════════════════════════════════════════ */
.js.reduce .scroll-space{ height:auto; }
.js.reduce .stage{ position:static; overflow:visible; }
.js.reduce .scene{ position:relative; height:auto; min-height:100svh; }
.js.reduce .hero-mkt{ min-height:100svh; }
.js.reduce .sec2, .js.reduce .beat, .js.reduce .pillar{ opacity:1; transform:none; }
.js.reduce .sec3{ opacity:1; min-height:100svh; }
.js.reduce .sec3-line, .js.reduce .video-stack{ opacity:1; transform:none; }
/* sem scrub não há travessia: fica só o destino (o céu dentro do tubo) */
.js.reduce .sec3__film, .js.reduce .sec3__cam, .js.reduce .iris{ display:none; }
/* sem scrub o vídeo não existe, então não há câmera atrás pra vazar: a mistura
   ficaria sem backdrop e a frase sumiria. Aqui ela volta a ser texto normal. */
.js.reduce .sec3-line--out{ color:var(--ice); text-shadow:0 6px 30px rgba(0,0,0,.4);
                            mix-blend-mode:normal; }
.js.reduce .sec4{ opacity:1; min-height:100svh; clip-path:none; filter:none; display:flex; align-items:center; }
.js.reduce .sec4__grid, .js.reduce .sec4__person{ display:none; }
.js.reduce .sec4__stage{ position:relative; width:100%; }
.js.reduce .sec4__lines{ position:relative; top:auto; left:auto; transform:none; margin:0 auto; }
.js.reduce .sec4-line{ opacity:1 !important; transform:none !important; }
.js.reduce .sec4-flank{ opacity:1 !important; transform:none !important; position:relative; top:auto; left:auto; right:auto; width:auto; text-align:center; margin:6px auto 0; }
.js.reduce .sec4__climax-stack{ position:relative; top:auto; left:auto; transform:none; width:auto; margin:14px auto 0; }
.js.reduce .sec4-climax{ transform:none !important; opacity:1 !important; }
.js.reduce .sec5{ clip-path:none !important; min-height:100svh; }
.js.reduce .sec5__inner{ position:relative; }
/* sem scrub não há varredura: a lupa nunca passaria e a pergunta ficaria
   borrada e ilegível na tela pra sempre. Ela sai, e o texto sobrevive no
   `.s5-glass__sr` (que já é o que o leitor de tela lê nos dois casos). */
.js.reduce .s5-glass{ display:none; }
.js.reduce .s5-glass__sr{ position:static; width:auto; height:auto; margin:0 auto 18px;
  clip:auto; overflow:visible; white-space:normal; text-align:center;
  font-family:var(--font-display); font-weight:900; font-style:italic;
  text-transform:uppercase; letter-spacing:var(--tracking-display);
  font-size:var(--fd-lg); line-height:1.06; color:var(--graphite); }
.js.reduce .sec5__scene{ opacity:1 !important; }
.js.reduce .s5-kicker{ opacity:1 !important; }
.js.reduce .s5-final{ position:relative; top:auto; left:auto; transform:none; clip-path:none !important; opacity:1 !important; text-align:center; margin:10px auto 0; }
/* sem movimento não há digitação: o C acende de vez, parado, e o texto fica
   inteiro (o JS não chega a fatiar as letras em `<i>` neste modo) */
.js.reduce .s5-final__c{ opacity:1 !important; animation:none; background-color:var(--purple); }
.js.reduce .s5-caret{ display:none; }
/* reduce: sem scroll/scrub → marquee vira lista estática legível; multidão fica de fundo */
.js.reduce .sec6{ opacity:1 !important; min-height:100svh; }
.js.reduce .sec6__inner{ position:relative; inset:auto; padding:clamp(48px,9vh,90px) 24px; }
.js.reduce .sec6__title{ position:relative; top:auto; left:auto; text-align:center; margin:0 auto clamp(28px,5vh,52px); max-width:none; }
.js.reduce .sec6__title::after{ margin-left:auto; margin-right:auto; }
.js.reduce .sec6__track{ position:relative; inset:auto; transform:none !important; display:flex; flex-wrap:wrap; gap:26px; justify-content:center; }
.js.reduce .sec6__card{ position:relative; left:auto !important; top:auto !important; transform:none !important; width:min(440px,90vw); min-height:0; }

@media (prefers-reduced-motion: reduce){
  .hero-mkt__logo .logo-mark{ animation:none; }          /* fica no roxo padrão */
}

/* ═══════════════════════════════════════════════════════════════════════
   BOTÃO FLUTUANTE DE WHATSAPP — vive em todas as cenas do ato Marketing
   ═══════════════════════════════════════════════════════════════════════
   Fala a MESMA língua do botão do fecho (anel cônico girando + corpo com
   relevo + halo roxo), porque é o mesmo gesto da marca em escala menor —
   um botão flutuante genérico do lado de um CTA desenhado à mão denuncia
   que um dos dois não foi pensado.
   Três cuidados que não são decoração:
     · `position:fixed` FORA do palco (o palco recorta o que está dentro);
     · a base respeita a `safe-area` do iPhone (a barra de gestos come 34px);
     · ele SOME quando o CTA do fecho entra — ver o JS. */
/* ── COR: verde do WhatsApp, e não o roxo da marca ────────────────────────
   O roxo fazia o botão pertencer ao site e NÃO pertencer ao WhatsApp — e a
   função dele é ser reconhecido em 1 segundo como "isso abre uma conversa".
   Cor de plataforma funciona como ícone: é significado, não decoração, e por
   isso é a única coisa aqui que legitimamente foge da paleta.
   O premium não vem da cor, vem do tratamento: verde claro em cima, verde
   escuro em baixo (luz vindo de cima), brilho branco interno na borda de
   cima, sombra interna embaixo, e o mesmo anel cônico do CTA do fecho. O
   branco do anel e do ícone é o `--ice` do site — é ele que costura o botão
   ao resto sem tirar dele a identidade do WhatsApp. */
/* ═══════════════════════════════════════════════════════════════════════
   INDICADOR DE ROLAGEM — o convite que só aparece na pausa
   ═══════════════════════════════════════════════════════════════════════
   Uma seta fixa e permanente é o oposto do que este site é: ela grita
   "role" pra quem já está rolando, e num site imersivo vira sujeira em
   cima da cena. Aqui ele nasce escondido, some ao primeiro movimento e só
   volta depois de 2s de imobilidade — quem parou é justamente quem pode
   não ter entendido que a página anda.

   O problema que uma seta sozinha tem é ler como BOTÃO. A versão antiga
   resolvia isso com uma haste de 1px acima dela; esta resolve com o disco:
   uma seta dentro de um alvo circular, balançando no eixo vertical, lê como
   "a página continua" e não como "clique". */
/* ⚠️ REFEITO EM 26/08. A versão anterior era uma haste de 1px e uma seta de
   15px soltas na tela, ciclando roxo ⇄ gelo. Dois defeitos, e o segundo é o
   que fazia ela sumir:
     1. PESO — 1px de haste não sobrevive ao lado de tipografia display 900 e
        de vídeo em tela cheia. Lia como sujeira de render, não como convite.
     2. CHÃO — elemento `fixed` atravessa seções escuras (S1, S3, S7) E claras
        (S2, S4, S5, S6). A fase GELO do ciclo desaparecia por completo sobre
        as claras: metade de cada compasso o convite simplesmente não existia.
   A correção ataca os dois de uma vez: ele passa a TRAZER O PRÓPRIO FUNDO.
   Disco de vidro escuro (grafite + desfoque do que está atrás) → o contraste
   deixa de depender da seção. Em cima dele, um arco roxo que gira na borda:
   é o ANEL DE FOCO de uma lente, o mesmo vocabulário ótico do diafragma da S3
   e da lupa da S5 — o convite passa a ser da mesma família visual do site em
   vez de um ícone genérico de rodapé.
   A cor não cicla mais: quem cicla é o giro do arco. Ciclo de cor foi o que
   quebrou aqui e o que já tinha quebrado a manchete da S3 — cor de marca não
   sobrevive a fundo variável. */
.scrollcue{
  --cue-d:clamp(46px,5.4vw,58px);            /* diâmetro do disco */
  position:fixed; z-index:100;
  left:50%; bottom:calc(clamp(16px,2.6vh,30px) + env(safe-area-inset-bottom, 0px));
  width:var(--cue-d); height:var(--cue-d);
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:var(--ice); pointer-events:none;
  background:
    radial-gradient(120% 120% at 50% 8%, rgba(255,255,255,.16), rgba(255,255,255,0) 52%),
    rgba(18,18,21,.74);
  -webkit-backdrop-filter:blur(12px) saturate(1.25);
          backdrop-filter:blur(12px) saturate(1.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),         /* quina de cima pegando luz   */
    inset 0 0 0 1px rgba(255,255,255,.09),       /* aro interno, segura a forma */
    0 14px 34px -12px rgba(0,0,0,.62),           /* pousado sobre a página      */
    0 0 0 1px rgba(158,35,178,.30),              /* fio roxo — a marca, discreta */
    0 0 26px -6px rgba(158,35,178,.42);          /* halo: é o que dá o "aceso"  */
  opacity:0; transform:translate(-50%,14px) scale(.9);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.3,1);
  will-change:opacity,transform;
}
.scrollcue.is-on{ opacity:1; transform:translate(-50%,0) scale(1); }

/* O ARO DE FOCO. Um arco roxo de ~90° girando devagar na borda do disco.
   Feito com `conic-gradient` + máscara radial: o furo do meio é a máscara, não
   um `border` — assim o arco tem PONTA (some suave nas duas extremidades), que
   é o que separa "anel de lente girando" de "spinner de carregamento". */
.scrollcue__ring{
  position:absolute; inset:-1px; border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(158,35,178,0) 0deg, rgba(158,35,178,0) 186deg,
    rgba(158,35,178,.55) 224deg, #C24BD6 268deg, rgba(214,120,232,.9) 300deg,
    rgba(158,35,178,0) 344deg, rgba(158,35,178,0) 360deg);
  -webkit-mask:radial-gradient(closest-side, transparent 0 calc(100% - 2.5px), #000 calc(100% - 2.5px));
          mask:radial-gradient(closest-side, transparent 0 calc(100% - 2.5px), #000 calc(100% - 2.5px));
}
.scrollcue.is-on .scrollcue__ring{ animation:cueSpin 4.2s linear infinite; }
/* sem suporte a máscara o arco viraria um DISCO roxo tapando a seta: melhor
   não existir. O disco de vidro sozinho já cumpre o papel. */
@supports not ((-webkit-mask: radial-gradient(#000,#000)) or (mask: radial-gradient(#000,#000))){
  .scrollcue__ring{ display:none; }
}

.scrollcue__arrow{
  display:block; width:clamp(19px,2vw,23px); height:auto;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.scrollcue.is-on .scrollcue__arrow{ animation:cueBob 1.9s ease-in-out infinite; }
@keyframes cueBob{ 0%,100%{ transform:translateY(-2.5px); } 50%{ transform:translateY(3.5px); } }
@keyframes cueSpin{ to{ transform:rotate(360deg); } }
/* sem movimento: o convite continua existindo, só para de girar e de balançar.
   O disco e o fio roxo permanecem — é deles que vem a legibilidade. */
@media (prefers-reduced-motion: reduce){
  .scrollcue.is-on .scrollcue__ring{ animation:none; }
  .scrollcue.is-on .scrollcue__arrow{ animation:none; }
}
/* navegador sem desfoque de fundo: o vidro cai pra grafite quase sólido, senão
   o disco fica translúcido demais sobre as seções claras */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
  .scrollcue{ background:radial-gradient(120% 120% at 50% 8%, rgba(255,255,255,.16), rgba(255,255,255,0) 52%), rgba(18,18,21,.93); }
}
/* na versão empilhada a página é uma rolagem comum: o convite não tem função */
.js.reduce .scrollcue{ display:none; }

.wa{
  --wa-bright:#4BE98A;   /* topo — a luz bate aqui              */
  --wa-base:#25D366;     /* o verde da marca, no corpo          */
  --wa-deep:#0F9D58;     /* base — dá volume sem virar oliva    */
  --wa-shadow:#0B7A4A;   /* sombra projetada, verde escurecido  */

  position:fixed; z-index:110;
  right:clamp(14px,2.2vw,30px);
  bottom:calc(clamp(14px,2.2vw,30px) + env(safe-area-inset-bottom, 0px));
  opacity:0; transform:translateY(16px) scale(.86); pointer-events:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1);
  will-change:opacity,transform;
}
.wa.is-on{ opacity:1; transform:none; pointer-events:auto; }
/* ⚠️ RECOLHE enquanto o carrossel de landing pages está na tela.
   Tentei ELEVAR o botão em vez de escondê-lo (pra manter a promessa de "em
   todas as seções") e a conta não fecha: o carrossel ocupa ~256px da faixa de
   baixo, então a subida necessária é ~33vh — o que numa tela baixa joga o botão
   no meio do conteúdo, e no caminho ele ainda passava a atropelar os cartões da
   S6. Recolher é a decisão certa e não é preguiça: aquele canto tem um elemento
   ARRASTÁVEL com links, ou seja, é disputa de TOQUE, não de pixel. O botão
   volta assim que a prova sai de cena. */
.wa.is-on.is-recolhido{
  opacity:0; pointer-events:none;
  transform:translateY(10px) scale(.9);
}

/* HALO — respiração lenta, não pulso. 3,6s é o ritmo de uma respiração calma;
   abaixo de ~2s vira alarme e a página inteira fica ansiosa. */
.wa::after{
  content:""; position:absolute; inset:-15px; z-index:0; border-radius:999px; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(75,233,138,.62), rgba(37,211,102,0) 70%);
  opacity:0; transition:opacity .5s ease;
  /* camada própria: é o único elemento do site que anima SEM PARAR, então vale
     o custo de memória (90px) pra garantir que a respiração seja composição
     pura e não repintura junto com a cena que estiver rolando atrás */
  will-change:transform,opacity;
}
.wa.is-on::after{ opacity:1; animation:waRespira 3.6s ease-in-out infinite; }
@keyframes waRespira{
  0%,100%{ transform:scale(.92); opacity:.34; }
  50%    { transform:scale(1.07); opacity:.72; }
}

.wa__btn{
  position:relative; z-index:1; isolation:isolate;
  display:flex; align-items:center; justify-content:flex-end;
  height:clamp(54px,4.3vw,62px); border-radius:999px;
  text-decoration:none; color:#fff;
  /* mesmo truque do CTA do fecho: o cônico só aparece na moldura de 2px
     (border-box), porque o corpo colorido é pintado no padding-box */
  background:
    linear-gradient(var(--wa-base),var(--wa-base)) padding-box,
    conic-gradient(from var(--cta-a,0deg),
      rgba(249,250,251,0) 0deg, #F9FAFB 34deg, rgba(249,250,251,.25) 88deg,
      rgba(249,250,251,0) 150deg, rgba(249,250,251,0) 220deg,
      #F9FAFB 268deg, rgba(249,250,251,.2) 320deg, rgba(249,250,251,0) 360deg) border-box;
  border:2px solid transparent;
  box-shadow:0 16px 34px -10px rgba(11,122,74,.85), 0 2px 0 rgba(255,255,255,.16) inset;
  transition:transform .26s cubic-bezier(.2,.8,.3,1), box-shadow .26s ease;
}
.wa__btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(160deg, var(--wa-bright) 0%, var(--wa-base) 46%, var(--wa-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -10px 24px rgba(6,74,45,.34);
}
/* ⚠️ O ANEL SÓ GIRA NO HOVER/FOCO — e isso é medição, não gosto.
   Girar o cônico obriga o navegador a REPINTAR o gradiente a cada quadro. No
   CTA do fecho isso dura alguns segundos e vale a pena; aqui o botão vive em
   TODAS as cenas, ou seja, seria repintura permanente concorrendo com a
   rolagem cênica. Medido: com o anel girando sempre, as 7 faixas caíram de
   59–61 fps pra 49–58. O halo que respira continua sempre — ele é transform +
   opacity, que a GPU compõe sem repintar nada. */
.wa__btn:hover, .wa__btn:focus-visible{ animation:ctaRing 5.5s linear infinite; }

/* o ícone é um quadrado do tamanho da altura → recolhido, o botão é um CÍRCULO */
.wa__ico{
  flex:0 0 auto; width:calc(clamp(54px,4.3vw,62px) - 4px);
  height:calc(clamp(54px,4.3vw,62px) - 4px);
  display:grid; place-items:center;
}
.wa__ico svg{ width:54%; height:54%; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }

/* RÓTULO — cresce PRA ESQUERDA (o elemento é ancorado pela direita), então a
   pílula se abre pra dentro da tela em vez de empurrar pra fora dela. */
.wa__label{
  display:block; overflow:hidden; white-space:nowrap;
  max-width:0; opacity:0; margin-left:0;
  font-family:var(--font-accent); text-transform:uppercase;
  letter-spacing:.15em; font-size:.76rem; line-height:1;
  transition:max-width .42s cubic-bezier(.2,.8,.3,1), opacity .26s ease, margin-left .42s cubic-bezier(.2,.8,.3,1);
}
.wa__btn:hover, .wa__btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 24px 46px -10px rgba(11,122,74,1), 0 2px 0 rgba(255,255,255,.22) inset;
}
.wa__btn:hover .wa__label, .wa__btn:focus-visible .wa__label{
  max-width:220px; opacity:1; margin-left:1.25rem;
}
.wa__btn:focus-visible{ outline:3px solid var(--ice); outline-offset:4px; }

@media (prefers-reduced-motion: reduce){
  .wa.is-on::after{ animation:none; opacity:.5; }
  .wa__btn:hover, .wa__btn:focus-visible{ animation:none; }
  .wa{ transition:opacity .2s ease; }
}
/* sem rolagem cênica o JS não roda o palco — o botão entra pelo CSS */
.js.reduce .wa{ opacity:1; transform:none; pointer-events:auto; }

/* ═══════════════════════════════════════════════════════════════════════
   UTILITÁRIOS — TEM QUE FICAR NO FIM DO ARQUIVO
   ═══════════════════════════════════════════════════════════════════════
   Esta regra é quem aplica a DISPLAY. Ela vive aqui embaixo por um motivo
   concreto: `.sec3-line--cycle` e `.sec3-line` têm a MESMA especificidade
   (0,1,0), então quem estiver por último vence. Com a regra lá em cima,
   `.sec3-line{ font-family:Antonio; font-weight:700 }` ganhava dela e a
   frase-clímax da S3 ("Estratégia, Intenção e Autenticidade.") saía em
   **Antonio com itálico SINTETIZADO** — letras entortadas pelo navegador, não
   desenhadas assim. Passou despercebido porque continuava "parecendo" display.
   ⚠️ NÃO mover isto pra cima. ⚠️ Texto novo na display: entrar NESTA lista.

   Entrelinha NÃO entra aqui de propósito: ela depende das palavras de cada
   bloco (quem tem acento, quem tem vírgula), então é decidida por elemento —
   ver o comentário da régua de entrelinha no `:root`. */
/* ⚠️ `.s5-final` SAIU DESTA LISTA. Não por gosto: a resposta da S5 tem 76
   caracteres, e caixa alta em frase longa vira parede — o olho perde a
   contagem das palavras e a leitura desacelera justo onde o site está fazendo
   a promessa. Ela continua na display (mesma família, mesmo peso, mesmo
   itálico), só que em caixa de frase, com regra própria mais abaixo.
   As que ficam aqui são todas CURTAS — 2 a 5 palavras —, que é onde caixa alta
   funciona: vira pôster em vez de parágrafo.
   `.s5-line` saiu junto porque o elemento deixou de existir (a pergunta
   digitada virou o ato da lupa). */
.beat, .sec3-line--cycle, .sec4-climax,
.sec6__title, .sec6__card-title, .sec7__keep, .sec7__lost, .sec7__q{
  font-family:var(--font-display); font-weight:900; font-style:italic;
  text-transform:uppercase; letter-spacing:var(--tracking-display);
  padding-right:var(--slant-pad);   /* folga pro avanço da inclinação */
}
/* exceção declarada: a Unica One não tem corte itálico, e herdar o itálico faz
   o navegador SINTETIZAR a inclinação (entorta os desenhos). Especificidade
   0,2,0 — vence a lista acima esteja ela onde estiver. */
.beat[data-beat="3"]{ font-family:var(--font-accent); font-style:normal; font-weight:400; }