/* ==========================================================================
   bprodutora — Holding audiovisual
   Sistema visual: DNA.md §3  ·  areia 70% · carvão 25% · amarelo 5%
   Regras duras respeitadas: sem #000/#fff · sem gradiente · sem sombra ·
   raio 0 na marca / raio 10 nos componentes · amarelo só como sinal.
   ========================================================================== */

/* ---------------------------------------------  0. a Lato, local  -------
   Hospedada aqui desde 24.08. Antes a página pedia a folha do
   fonts.googleapis.com, que por sua vez pedia os arquivos ao fonts.gstatic.com
   — era o único pedido a terceiro que o site fazia, e valia dois DNS, duas
   conexões TLS e uma folha de estilo bloqueante antes do primeiro caractere.
   Os arquivos vieram DESSA MESMA folha do Google: o que está aqui é o woff2
   oficial, byte a byte, só que servido do nosso domínio.
   O `unicode-range` foi preservado de propósito, e não é detalhe: é ele que
   faz o navegador baixar o latin-ext SÓ quando a página usa um caractere que
   caia nele. Juntar tudo num arquivo por peso pareceria mais simples e faria
   cada visita baixar o dobro.
   `font-display:swap` mantido: o texto aparece na fonte de sistema e troca
   quando a Lato chega — nunca fica invisível esperando.
   ATENÇÃO: o marquee da 02 e a fita de clientes medem a largura DEPOIS de
   `document.fonts.ready`. Mexer nos pesos aqui muda essa medida. */
/* latin */
@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;
  src:url(../fontes/lato-300-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* latin-ext */
@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;
  src:url(../fontes/lato-300-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin */
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fontes/lato-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* latin-ext */
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fontes/lato-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin */
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fontes/lato-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* latin-ext */
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fontes/lato-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin */
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;
  src:url(../fontes/lato-900-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* latin-ext */
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;
  src:url(../fontes/lato-900-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* --------------------------------------------------  1. tokens  ---------- */
/* Os dois tokens de base são REGISTRADOS como cor. Custom property comum é
   texto para o navegador: trocar seu valor recalcula quem depende dela, mas não
   interpola — no pulso da abertura o fundo atravessava (o body tem transição
   própria) enquanto o botão do menu saltava, porque ele deriva de var(--carvao)
   por dentro e a troca não dispara transição nenhuma.
   Registrados, os tokens viram valores animáveis: quem os anima é a transição
   no html, logo abaixo, e TUDO que deriva deles atravessa em bloco — fundo,
   símbolo, links, botão, burger, réguas. Sem suporte a @property nada quebra:
   as cores apenas trocam de uma vez, como antes. */
@property --areia{syntax:"<color>";inherits:true;initial-value:#F1EDE4}
@property --carvao{syntax:"<color>";inherits:true;initial-value:#1E1E1E}

:root{
  /* paleta — DNA 3.1 */
  --areia:#F1EDE4;
  --carvao:#1E1E1E;
  --amarelo:#D8B14E;
  --pedra:#8C8A84;
  --linho:#E3DED2;
  --grafite:#3A3937;

  /* acentos de submarca — DNA 3.9 */
  --vinho:#7E4952;
  --teal:#4E8079;
  --ameixa:#7E6A8A;

  /* papéis */
  --bg:var(--areia);
  --fg:var(--carvao);
  --rule:rgba(30,30,30,.16);

  /* tipografia — DNA 3.2 (duas famílias, mono do sistema para dados) */
  --ff:"Lato","Poppins","Montserrat",system-ui,-apple-system,sans-serif;
  --ff-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --t-display:clamp(2.9rem,7.4vw,7.25rem);
  --t-h1:clamp(2.15rem,4.6vw,4.15rem);
  --t-h2:clamp(1.7rem,3vw,2.9rem);
  --t-h3:clamp(1.35rem,2vw,2rem);
  --t-lead:clamp(1.12rem,1.65vw,1.55rem);
  --t-body:clamp(1rem,1.05vw,1.14rem);
  --t-cap:clamp(.88rem,.95vw,1rem);
  --t-label:.715rem;

  /* grade */
  --gut:clamp(20px,5vw,92px);
  /* Deslocamento com que a âncora encosta uma seção no topo. O mesmo número
     está no main.js, nos dois goTo() — se mudar aqui, mudar lá. Serve para a
     seção 02 saber que só tem 100vh MENOS isto para caber inteira. */
  --anc:70px;
  /* Respiro ENTRE a barra de menu e o cabeçalho, para as seções que a âncora
     estaciona pelo cabeçalho (03, 04, 05 — ver alvoAncora no main.js). Não
     confundir com o --anc acima: aquele é o deslocamento de âncora, de onde a
     02 tira a própria altura, e é MENOR que a barra (70 contra 93 em 1440x800).
     Enquanto as seções estacionavam pela BORDA, os 158px de respiro do topo
     escondiam a diferença; pelo cabeçalho, ela virou headline cortada.
     A altura da barra não entra aqui: é lida do DOM, que é quem sabe. */
  /* VALOR SIMPLES, não clamp(): quem lê este token é o ancHead() no main.js,
     e getPropertyValue() devolve a expressão CRUA de uma custom property não
     registrada — `clamp(...)` chegava lá como texto, parseFloat dava NaN e o
     JS caía no fallback. O clamp ficou meses sem valer nada. Se um dia isto
     precisar variar por viewport, registrar com @property ou resolver no JS. */
  --anc-folga:26px;
  --maxw:1560px;
  --r:10px;                 /* raio de componente — DNA 3.6 */
  --bar:6px;                /* filete de início de seção — DNA 3.1 */

  /* movimento */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
  --sp:clamp(5.5rem,11vw,11rem);
}

/* --------------------------------------------------  2. base  ------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;
  /* a travessia do pulso da abertura; fora dele estes tokens não mudam */
  transition:--areia .5s var(--e-io),--carvao .5s var(--e-io)}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--ff);
  font-weight:400;
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0;text-wrap:pretty}
h1,h2,h3{font-weight:300;text-wrap:balance}
::selection{background:var(--carvao);color:var(--areia)}
:focus-visible{outline:2px solid var(--carvao);outline-offset:4px;border-radius:2px}
.is-dark :focus-visible{outline-color:var(--areia)}

/* --------------------------------------------------  3. layout  ---------- */
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative;padding-block:var(--sp);background:var(--areia)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* superfície escura — o "bloco de contraste" da marca */
.is-dark{background:var(--carvao)!important;color:var(--areia);--fg:var(--areia);--rule:rgba(241,237,228,.18)}

/* Pulso da abertura: a cena alterna entre areia e carvão depois que o símbolo
   fecha. Em vez de pintar o fundo direto, TROCA os dois tokens de cor — tudo
   que deriva deles vira negativo junto (o símbolo, o botão do menu, as réguas,
   a seleção de texto) e nada some por ficar da cor do fundo.
   O --amarelo fica de fora da troca de propósito: o ponto da marca é a única
   coisa igual nos dois estados, e é ele que costura a alternância.
   Quem liga e desliga é o alternarFundo(), no main.js. */
.cena-negativa{--areia:#1E1E1E;--carvao:#F1EDE4;--rule:rgba(241,237,228,.18)}

/* Desliga a travessia dos tokens por um quadro.
   Serve para a SAÍDA do negativo, quando a cena entrega a tela ao amarelo: ali
   o amarelo já cobre 98,7% da tela, então a troca do fundo não se vê — mas a
   FRASE começa a aparecer logo depois e usa var(--carvao). Com a travessia de
   0,5s correndo, numa rolagem rápida o texto podia nascer no meio do caminho
   entre carvão e areia, cinza sobre amarelo.
   Snapando, o texto está certo desde o primeiro quadro em que existe.
   A ENTRADA do carvão continua atravessando: ali a travessia é o efeito. */
/* Alcança os DESCENDENTES, não só o <html>. O botão tem transição própria de
   fundo e de cor, e fundo e texto dele são os dois tokens em papéis opostos:
   atravessando juntos existe um instante em que o texto fica exatamente da cor
   do próprio fundo e some. É a mesma armadilha que o pulso antigo resolvia
   trocando o botão seco no meio da travessia. Snapando tudo, o instante não
   existe. Vale por um quadro só. */
.sem-travessia,.sem-travessia *{transition:none!important}

/* --------------------------------------------------  4. tipos ------------ */
.label{
  font-size:var(--t-label);font-weight:900;letter-spacing:.18em;
  text-transform:uppercase;line-height:1;
}
.mono{font-family:var(--ff-mono);font-size:var(--t-label);letter-spacing:.04em;
      font-variant-numeric:tabular-nums}
.lead{font-size:var(--t-lead);font-weight:300;line-height:1.45;letter-spacing:-.01em;max-width:34ch}
.muted{color:var(--pedra)}
.is-dark .muted{color:#A9A69E}

.h1{font-size:var(--t-h1);font-weight:300;line-height:1.06;letter-spacing:-.02em}
.h2{font-size:var(--t-h2);font-weight:300;line-height:1.1;letter-spacing:-.014em}
.h3{font-size:var(--t-h3);font-weight:400;line-height:1.15;letter-spacing:-.01em}
.copy{max-width:46ch;line-height:1.6}

/* --------------------------------------------------  5. marca ------------ */
.mark{display:block;height:auto;color:inherit}
.mark .mk-ponto{fill:var(--amarelo)}
.mark .mk-fig{fill:currentColor}

/* Motion do símbolo — a marca se constrói sobre a própria malha.
   Primeiro entram as guias de construção (o círculo de R410, o interno de R210,
   a baseline, o eixo da haste e o círculo do ponto) desenhando-se como num
   plotter; depois as formas sólidas assentam em cima e as guias se recolhem.
   É a mesma malha que está em 01-LOGO/CONSTRUCAO — leitura de instrumento, não
   de efeito, e sem gradiente, glow ou sombra.

   Nada anima dentro de <defs>: lá o elemento não é renderizado e o navegador
   não roda a transição — era o que fazia a marca aparecer pela metade em outro
   navegador. Sem a classe .mark--anim o estado é o símbolo inteiro. */
.mark--anim{overflow:visible}

/* 1 · as guias se FORMAM, na ordem em que a marca é construída:
   eixo da haste, baseline, arco externo R410, arco interno R210.
   3 · e se apagam desenhando ao contrário — o traço é consumido, não some.
   Traço em unidade do viewBox, não vector-effect: a propriedade não herda do
   <g> e falha calado (ficou em 0,22px, invisível).

   display:none no repouso, não só opacity:0. Fora de .mark--anim o
   stroke-dasharray volta a `none`, que é o traço INTEIRO desenhado: enquanto a
   invisibilidade dependia só da opacidade, as duas precisavam trocar no mesmo
   recálculo para nada aparecer. Com display:none não há o que pintar, em
   qualquer ordem — e display nunca interpola.

   A folga contra o fio de subpixel está no --len de cada guia, no HTML: cada um
   é ~2 unidades MAIOR que o comprimento real do caminho. Nunca no offset — ver
   o porquê no montarGuias(). */
.mk-guias{display:none;opacity:0;fill:none;stroke:var(--pedra);stroke-width:5}
.mark--anim .mk-guias{display:inline;opacity:1}
/* Só o estado de repouso mora aqui: traço inteiro, recolhido. O movimento é
   escrito quadro a quadro pelo montarGuias(), no main.js.
   Era transição de CSS e não funcionava. stroke-dashoffset é propriedade de
   PINTURA, e a cena inteira vive dentro do transform 3D da câmera, que a
   promove a camada composta — lá o navegador reaproveita o raster e a transição
   não repinta: as guias ficavam congeladas desenhadas e sumiam de golpe quando
   algo forçava a recomposição. É a mesma descoberta que já estava escrita no
   montarArco(), e é por isso que haste e ponto sempre funcionaram: eles animam
   TRANSFORM, que o compositor resolve sozinho, sem repintar. */
.mark--anim .mk-g{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}

/* ---- 2 · o b ------------------------------------------------------------
   A haste sobe da base e o arco preenche girando, por recorte angular. Isso é
   comum às duas opções em decisão — o que separa A de B é a câmera, abaixo. */
.mark--anim .mk-haste{transform:scaleY(0);transform-origin:0px 814px;
  transform-box:view-box}
.mark--anim.is-built .mk-haste{transform:none;
  transition:transform .42s cubic-bezier(.3,.05,.3,1) .74s}
/* o recorte angular abre de 180° até 390,5°, a volta exata do desenho (30,5°
   além da horizontal, como manda o DNA). Sem a classe não há recorte — o arco
   fica inteiro. */
.mark--anim .mk-arco{clip-path:url(#cpArco)}

/* ---- 3 · o ponto -------------------------------------------------------- */
.mark--anim .mk-ponto{transform:scale(0);transform-origin:900px 781px;transform-box:view-box}
.mark--anim.is-built .mk-ponto{transform:scale(1);
  transition:transform .4s cubic-bezier(.3,1.4,.45,1) 1.46s}

/* wordmark em curvas — nunca substituído por fonte (DNA 3.2) */
.wordmark{color:inherit}
.wordmark path{fill:currentColor}


/* --------------------------------------------------  6. botões ----------- */
.btn{
  --btn-fg:var(--areia);--btn-bg:var(--carvao);
  position:relative;display:inline-flex;align-items:center;gap:.85em;
  min-height:56px;padding:0 clamp(20px,2vw,30px);
  border-radius:var(--r);
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:var(--t-cap);font-weight:700;letter-spacing:.01em;
  overflow:hidden;isolation:isolate;
  transition:color .45s var(--e-io),background-color .45s var(--e-io),
             border-color .45s var(--e-io);
}
.btn > *{position:relative;z-index:1}
/* preenchimento amarelo entra por baixo — o único uso de amarelo em bloco.
   z-index NEGATIVO, não 0. O rótulo do botão é nó de texto solto, sem elemento
   em volta, então o `.btn > *` acima não o alcança — ele pega só a seta, que é
   <svg>. Com o ::before em z-index 0 o preenchimento pintava por cima do texto
   (elemento posicionado vem depois de conteúdo inline na ordem de pintura), e
   no hover o rótulo sumia, sobrando a seta sozinha.
   Em -1 ele cai entre o fundo do botão e o texto. Fica dentro do botão porque
   o `isolation:isolate` acima abre contexto de empilhamento próprio. */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--amarelo);
  transform:translateY(101%);transition:transform .55s var(--e-io);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
/* Carvão LITERAL, não var(--carvao). O preenchimento do hover é sempre claro
   (amarelo, ou areia sobre o amarelo), mas durante o pulso da abertura os
   tokens estão trocados — e ali var(--carvao) virava areia, deixando texto
   claro sobre preenchimento claro. O texto do hover não pode depender de um
   token que gira. */
.btn:hover,.btn:focus-visible{color:#1E1E1E}
.btn__ar{width:15px;flex:none;transition:transform .55s var(--e-out)}
.btn:hover .btn__ar{transform:translateX(5px)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--fg);box-shadow:inset 0 0 0 1px var(--rule)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:#1E1E1E}   /* idem acima */
.is-dark .btn,.nav.on-dark .btn{--btn-bg:var(--areia);--btn-fg:var(--carvao)}
.nav.on-dark .btn--ghost{--btn-bg:transparent;--btn-fg:var(--areia)}
.is-dark .btn--ghost{--btn-bg:transparent;--btn-fg:var(--areia)}

.btns{display:flex;flex-wrap:wrap;gap:12px}

/* link com filete que se desenha */
.lnk{position:relative;display:inline-flex;align-items:center;gap:.7em;
     font-weight:700;font-size:var(--t-cap);padding-bottom:6px}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--e-io)}
.lnk:hover::after,.lnk:focus-visible::after{transform:scaleX(1)}
.lnk svg{width:14px;transition:transform .5s var(--e-out)}
.lnk:hover svg{transform:translateX(4px)}

/* --------------------------------------------------  7. reveals ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px)}
.js [data-reveal].is-in{opacity:1;transform:none;
  transition:opacity .95s var(--e-out) var(--d,0ms),transform .95s var(--e-out) var(--d,0ms)}

.w{display:inline-block;overflow:hidden;vertical-align:bottom;
   padding-bottom:.14em;margin-bottom:-.14em}
.js .w-i{display:inline-block;transform:translateY(112%);
   transition:transform 1.05s var(--e-out) var(--wd,0ms)}
.js .is-in .w-i{transform:translateY(0)}

/* filete que se desenha ao entrar */
.js [data-draw]{transform:scaleX(0);transform-origin:0 50%}
.js [data-draw].is-in{transform:scaleX(1);
  transition:transform 1.1s var(--e-io) var(--d,0ms)}

/* --------------------------------------------------  8. chrome ----------- */
/* barra de progresso */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:80;
  background:var(--carvao);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* cursor — a seta do sistema sai e entra o ponto da marca */
.cursor-none,.cursor-none *{cursor:none!important}
.cur{position:fixed;top:0;left:0;z-index:95;pointer-events:none;
  width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--amarelo);opacity:0;transition:opacity .3s,background-color .35s}
.cur.is-on{opacity:1}
.cur.on-yellow{background:var(--carvao)}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* HUD de canto — mono, dados (DNA 3.2) */
.hud{position:fixed;left:var(--gut);bottom:26px;z-index:60;display:flex;gap:14px;
  align-items:center;pointer-events:none;color:var(--pedra);
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .8s var(--e-out),color .5s}
.hud.is-on{opacity:1}
.hud.on-dark{color:#8F8C85}
.hud__sep{width:22px;height:1px;background:currentColor;opacity:.5}
@media (max-width:900px){.hud{display:none}}

/* grão de papel — textura mínima, remova .grain do body para desligar */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}
  100%{transform:translate(0,0)}}

/* --------------------------------------------------  10. nav ------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;
  transition:transform .6s var(--e-io),background-color .5s var(--e-io),color .5s var(--e-io)}
/* Durante o pulso da abertura a nav perde a transição de COR — e só ela.
   O token --carvao já atravessa em 0,26s; com a nav perseguindo esse alvo em
   movimento por mais 0,5s, sobravam dois easings empilhados e o menu chegava
   atrasado em relação ao fundo. Sem a transição própria ele acompanha o token,
   no mesmo tempo que todo o resto. As de transform e fundo ficam: são da barra
   que se esconde ao rolar, nada a ver com o pulso. */
.pulso .nav{transition:transform .6s var(--e-io),background-color .5s var(--e-io)}

/* O botão troca de uma vez, no MEIO da travessia.
   Ele usa os DOIS tokens, um em cada papel: --btn-bg é o carvão, --btn-fg é a
   areia. Como os dois atravessam em sentidos opostos, cruzam-se no meio — e ali
   o texto ficava exatamente da cor do próprio fundo. Medido: ambos em
   rgb(136,134,129) na metade. Por isso ele sai da travessia e usa cor literal.
   Mas trocar no INÍCIO fazia o botão virar meio segundo antes do fundo, e a
   dianteira se via. Quem adia é o JS: a classe .botao-negativo entra 250ms
   depois da .cena-negativa, na metade da travessia de 0,5s — que é onde a cor
   do fundo está no meio do caminho, o instante em que a mudança se lê.
   Foi tentado adiar por CSS, com duração 0s e atraso .25s: não dispara. Quando
   o valor vem de custom property trocada por CLASSE NO ANCESTRAL, o navegador
   não cria a transição — só cria quando a property muda no próprio elemento.
   A transição de transform saiu junto com o ímã, em 01.09: não sobrou nada
   que mova o botão, então ela não tinha mais o que amortecer. */
.pulso .btn{--btn-bg:#1E1E1E;--btn-fg:#F1EDE4}
.pulso.botao-negativo .btn{--btn-bg:#F1EDE4;--btn-fg:#1E1E1E}

/* O botão dentro do menu mobile vai ao contrário: o painel do menu já é o
   negativo da página, então o botão dele tem de ser o negativo do painel.
   Sem estas duas linhas a regra acima o pintava claro nos dois estados — e
   quando o painel clareava, o botão sumia dentro dele. Especificidade cresce
   de propósito para vencer a `.pulso.cena-negativa .btn` logo acima. */
.pulso .sheet .btn{--btn-bg:#F1EDE4;--btn-fg:#1E1E1E}
.pulso.botao-negativo .sheet .btn{--btn-bg:#1E1E1E;--btn-fg:#F1EDE4}
.nav.is-hidden{transform:translateY(-102%)}
.nav.on-dark{color:var(--areia)}
.nav__in{display:flex;align-items:center;gap:clamp(16px,3vw,48px);
  height:clamp(72px,7vw,92px)}
.nav__logo{flex:none;display:block}
.nav__logo .mark{transition:transform .6s var(--e-out)}
.nav__logo:hover .mark{transform:translateY(-2px)}
.nav__menu{display:flex;gap:clamp(14px,2vw,34px);margin-left:auto}
.nav__a{position:relative;font-size:var(--t-cap);font-weight:400;padding:6px 0}
.nav__a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .5s var(--e-io)}
.nav__a:hover::after,.nav__a:focus-visible::after,.nav__a[aria-current="true"]::after{
  transform:scaleX(1);transform-origin:0 50%}
/* Sobre a tela amarela o preenchimento do hover não pode ser amarelo: o botão
   sumiria no fundo, sobrando só o texto solto. Vira areia, o mesmo que os
   botões de dentro da cena já fazem (ver .stage__say .btn::before). Quem liga
   a classe é o laço da cena, junto com o HUD e o cursor. */
.nav.on-yellow .btn::before{background:var(--areia)}

.nav__cta{flex:none}
.nav__cta .btn{min-height:44px;font-size:var(--t-label);letter-spacing:.06em;
  text-transform:uppercase}
.nav__rule{height:1px;background:var(--rule);transform-origin:0 50%;transform:scaleX(0);
  transition:transform .8s var(--e-io),background-color .5s}
.nav.is-stuck .nav__rule{transform:scaleX(1)}
.nav.is-stuck{background:var(--areia)}
.nav.is-stuck.on-dark{background:var(--carvao)}
.nav__burger{display:none;flex:none;width:44px;height:44px;margin-left:auto;
  position:relative}
.nav__burger span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;
  transition:transform .5s var(--e-io),opacity .3s}
.nav__burger span:nth-child(1){top:17px}
.nav__burger span:nth-child(2){bottom:17px}
.is-menu .nav__burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.is-menu .nav__burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* menu mobile */
.sheet{position:fixed;inset:0;z-index:65;background:var(--carvao);color:var(--areia);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 var(--gut);clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--e-io);visibility:hidden}
.is-menu .sheet{clip-path:inset(0 0 0 0);visibility:visible}
.sheet__a{font-size:clamp(2rem,9vw,3.2rem);font-weight:300;letter-spacing:-.02em;
  line-height:1.24;opacity:0;transform:translateY(18px)}
.is-menu .sheet__a{opacity:1;transform:none;
  transition:opacity .6s var(--e-out) var(--d),transform .7s var(--e-out) var(--d)}
.sheet__foot{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:860px){
  .nav__menu,.nav__cta{display:none}
  .nav__burger{display:block}
}

/* --------------------------------------------------  11. cabeça de seção -- */
/* A barrinha amarela vai NA FRENTE da headline, não em cima dela. Duas colunas:
   a barra na primeira, todo o resto na segunda, alinhado com a headline.
   Os números de página ("02 / 06") saíram em 23.08 — a barra ficou sozinha na
   .head__top, que agora só serve para dar altura de primeira linha a ela. */
.head{display:grid;grid-template-columns:auto 1fr;
  gap:clamp(18px,2vw,26px) clamp(13px,1.3vw,20px);
  margin-bottom:clamp(38px,5vw,68px)}
.head > *{grid-column:2}
.head .head__top{grid-column:1;grid-row:1;align-self:start}

/* Cabeçalho enxuto nas seções que a âncora estaciona pelo cabeçalho (03, 04 e
   05 — ver alvoAncora() no main.js). Só o espaço encolhe: o corpo do tipo é o
   mesmo do resto do site, porque a headline é a voz da seção e o DNA não
   admite duas escalas de h1 na mesma página. */
.enq-head .head{gap:clamp(12px,1.3vw,17px);margin-bottom:clamp(22px,2.4vw,32px)}
/* A altura é exatamente a da PRIMEIRA LINHA da headline (o .h1 tem
   line-height 1.06 sobre --t-h1), e a barra se centra dentro dela. É isso que
   mantém o alinhamento quando a headline tem uma, duas ou três linhas: centrar
   pelo bloco inteiro faria a barra descer junto com o texto. */
.head__top{display:flex;align-items:center;justify-content:center;gap:16px;
  height:calc(var(--t-h1) * 1.06)}
/* filete de 6px marcando início de seção — uso aprovado do amarelo (DNA 3.1) */
.head__bar{width:var(--bar);height:clamp(30px,3vw,44px);background:var(--amarelo);flex:none;
  transform-origin:50% 100%}
.js [data-bar]{transform:scaleY(0);transform-origin:50% 100%}
.js [data-bar].is-in{transform:scaleY(1);transition:transform .8s var(--e-io)}
/* SEM USO desde 23.08: os números de página ("02 / 06", um por seção) foram
   removidos do HTML. A regra fica porque o caminho de volta é barato — basta
   recolocar <span class="head__n">02 / 06</span> dentro da .head__top, que hoje
   leva só a barra. Se voltarem, rever o `justify-content:center` da .head__top:
   ele existe para centrar a barra sozinha na coluna. */
.head__n{color:var(--pedra);font-family:var(--ff-mono);font-size:var(--t-label);
  letter-spacing:.14em}
.head__sub{max-width:44ch;color:var(--pedra);font-size:var(--t-lead);font-weight:300;
  line-height:1.45}
.is-dark .head__sub{color:#A9A69E}

/* --------------------------------------------------  13. soluções -------- */
/* Os treze termos VOLTAM a correr na tela, em três faixas de sentidos
   alternados — era assim antes e voltou a ser em 23.08. As palavras ficam
   soltas, sem pílula nem moldura: quem separa é o ponto da marca, pequeno,
   entre um termo e outro.
   A seção ocupa a tela inteira e as faixas tomam o vão que sobra entre o
   cabeçalho e o rodapé, por isso o flex em coluna com .sols__mq{flex:1}.
   A velocidade responde à rolagem — o `vel` do loop, que tinha ficado órfão
   quando o marquee saiu, voltou a ter função. */

/* padding menor que o das outras seções: aqui o assunto são as faixas, e cada
   rem de respiro no topo é um rem que elas deixam de ocupar.
   A altura é 100vh MENOS o deslocamento da âncora: clicando em "Soluções" no
   menu, a seção encosta em --anc do topo, e com 100vh cheios os últimos 70px
   — justamente onde fica o "Quem entrega o quê" — caíam fora do quadro. */
/* dvh, com vh de reserva na linha anterior. No Safari do iPhone e do iPad
   100vh é a altura com as barras RECOLHIDAS — maior que a área visível —, então
   a seção ficava mais alta que a tela e o "Quem entrega o quê" caía abaixo da
   dobra justamente quando se clicava em Soluções no menu. dvh é a altura
   visível de verdade, e acompanha as barras aparecendo e sumindo.
   A declaração dupla é o fallback: navegador sem dvh ignora a segunda linha e
   fica com a primeira, que é o comportamento antigo. */
.sols{min-height:calc(100vh - var(--anc));
  min-height:calc(100dvh - var(--anc));display:flex;flex-direction:column;
  padding-block:clamp(2.2rem,3.4vw,4rem)}
.sols .head{flex:none}
/* Sobrou só o link "Quem entrega o quê" — a linha "Treze frentes · uma equipe ·
   três empresas" saiu em 23.08. O filete de topo fica: é ele que fecha a banda
   de faixas e separa do rodapé. */
.sols__foot{flex:none;display:flex;justify-content:flex-end;align-items:baseline;
  margin-top:clamp(26px,3vw,44px);padding-top:20px;
  border-top:1px solid var(--rule)}

/* space-between, não center: as quatro faixas se espalham pelo vão inteiro
   entre cabeçalho e rodapé, que é o que "ocupar a seção" quer dizer. Com
   center elas viravam uma tira no meio, com vão morto em cima e embaixo. */
/* SEM ALTERNÂNCIA desde 25.08: a seção fica sempre em areia. O pulso areia ↔
   carvão de 1,2s que morava aqui está em alpha/pulso-solucoes/, com as três
   armadilhas medidas — em especial a de que a função e a chamada dentro de
   `run()` têm de sair e voltar JUNTAS, sob pena de derrubar a abertura inteira.

   O `color` explícito FICA, e não é sobra do pulso. --fg é declarada no :root
   como var(--carvao), e custom property resolve o var() no próprio elemento e
   depois herda o valor já resolvido. Sem a cor herdada aqui, qualquer troca
   futura de token dentro da seção não alcançaria o título. */
.sols{color:var(--carvao)}

/* A `.sols.trocando .mq__t` que morava aqui NÃO precisa de substituto: ela só
   existia para desligar a transição de cor das palavras durante a travessia
   dos tokens. Sem travessia, a transição da própria `.mq__t` (mais abaixo,
   background-size + color) volta a valer sozinha, que é o que o hover pede. */

/* CENTRADAS, não espalhadas. Com justify-content:space-between as quatro faixas
   se abriam para preencher a coluna, e numa tela alta — iPad em retrato — o vão
   entre as linhas virava o dobro do que é no desktop. Centradas, o que separa
   as linhas é só o gap, que é o mesmo nos três tamanhos: nada de vão elástico.
   A seção continua com a altura da tela (min-height acima), então o bloco fica
   no meio e a seção seguinte não aparece junto. */
.sols__mq{flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(10px,1vw,16px);overflow:hidden;
  margin-block:clamp(16px,2.2vw,32px)}

/* overflow hidden e nowrap: a fila é mais larga que a tela de propósito e o
   corte nas margens é o efeito. O will-change avisa o compositor de que o
   transform muda todo quadro. */
.mq{overflow:hidden}
.mq__in{display:flex;align-items:center;width:max-content;white-space:nowrap;
  will-change:transform}

/* O hover devolve o gesto que as pilulas antigas tinham: o bloco de contraste
   da marca entra POR BAIXO e o texto troca para areia. Em repouso a palavra
   segue solta, sem moldura - o bloco so existe sob o mouse.
   A faixa NAO para mais sob o cursor: o tranco de parar e voltar custava mais
   do que o hover ganhava, e a fila precisa ler como fluxo continuo.
   Feito com background-size, e nao com um ::before de z-index negativo: assim
   nao se cria contexto de empilhamento novo para o bloco escapar por tras.
   O raio e o mesmo dos botoes (--r): border-radius recorta o background-image
   junto, entao o bloco chega arredondado sem precisar de outro elemento. O
   respiro lateral subiu de .1em para .16em para o canto ter onde acontecer —
   so na horizontal, porque altura extra aqui estoura a conta de quatro faixas
   por tela explicada abaixo. */
/* O tamanho é limitado pela LARGURA e pela ALTURA, com min(). Só pela largura
   — como era, em 6.2vw — o tipo ficava enorme numa tela larga e baixa: em
   1440x800 dava 89px, as quatro faixas somavam 372px, a seção estourava o
   min-height e crescia para 925px contra 730 disponíveis, jogando o "Quem
   entrega o quê" 151px para fora do quadro. O termo em vh é o que garante que
   quatro faixas caibam na altura que existe. Mexer nele exige refazer a conta:
   4 faixas x (tamanho x 1,04) + cabeçalho + rodapé + margens <= 100vh - --anc.
   O 6,6vh não foi escolhido no olho: varrendo valores em 1440x800, o ponto em
   que a seção deixa de estourar é exatamente 7vh. Ficar nele é ficar no limite,
   e qualquer variação de fonte ou zoom volta a jogar o rodapé para fora — daí
   os 6,6vh, com folga deliberada. */
.mq__t{font-size:min(clamp(2.1rem,5.2vw,5rem),6.6vh);font-weight:300;line-height:1.04;
  letter-spacing:-.03em;color:var(--carvao);padding:0 .16em;
  border-radius:var(--r);
  background-image:linear-gradient(var(--carvao),var(--carvao));
  background-repeat:no-repeat;background-position:50% 100%;background-size:100% 0;
  transition:background-size .42s var(--e-io),color .34s var(--e-io)}
.mq__t:hover{background-size:100% 100%;color:var(--areia)}

/* o separador é o ponto da marca — mesma geometria, tamanho de pontuação */
.mq__p{flex:none;display:block;border-radius:50%;background:var(--amarelo);
  width:clamp(7px,.72vw,13px);aspect-ratio:1;
  margin-inline:clamp(18px,2.6vw,50px)}

/* Sem JS ou com movimento reduzido a fila não corre: vira uma linha estática,
   legível, cortada nas margens. Nada pisca, nada some. */
.no-js .mq__in,
.mq__in{transform:none}

/* No celular a seção VOLTA a encher a tela. Ela tinha deixado de ser 100vh
   porque encher 812px com quatro faixas pediria tipo de ~100px, o que numa tela
   de 375 mostraria três letras por linha; e com o tipo que cabe sobravam vãos
   de 111px entre as linhas, esparso em vez de cheio.
   A altura mínima voltou por outro motivo: sem ela a seção terminava antes do
   fim da tela e a seção seguinte aparecia junto. As quatro faixas ficam
   CENTRADAS na altura que sobra, com respiro em cima e embaixo — não esticadas
   para preencher, que era o que abria os vãos. */
@media (max-width:620px){
  /* o tipo continua sendo só função da largura: quem enche a altura é a
     quantidade de faixas, não o corpo da letra */
  .mq__t{font-size:clamp(2.4rem,8.4vw,3.2rem)}
  .sols__mq{margin-block:clamp(26px,7vw,40px)}
}

/* --------------------------------------------------  14. as três --------- */
/* CARROSSEL 3D. Um conjunto por empresa: vídeo vertical COLADO ao card — os
   dois são uma peça só, por isso o raio é externo e o vão entre eles é zero.
   O da frente fica inteiro; os outros dois ficam atrás, girados e menores.
   PROFUNDIDADE SEM SOMBRA E SEM GRADIENTE: o DNA proíbe os dois (3.1). O que
   empurra para trás é escala + rotação + opacidade + sobreposição. Não
   acrescentar box-shadow aqui "para dar volume" — seria sair do DNA.
   Quem escreve os transforms é o main.js (bloco 9): eles dependem da posição
   relativa e do arrasto em curso, que o CSS não tem como saber.
   Variantes anteriores: alpha/secao-empresas/ e alpha/secao-empresas-acordeao/ */
/* A seção é CARVÃO (`is-dark` no <section>). Os cards ficam em linho e saltam
   do fundo; as setas viram areia para não sumirem nele. */
/* AS TRÊS EM GRADE, uma ao lado da outra (25.08). Antes era um carrossel 3D
   com setas, pontos e arraste — está em alpha/carrossel-3d-empresas/, com o
   que a troca exigiu além de mover os cards.

   O VÍDEO SUBIU. No carrossel o item era um par horizontal — vídeo 9:16 à
   esquerda, card à direita — e três desses dariam 2001px de largura. Lado a
   lado o vídeo tem de ir para CIMA do card.

   4:5 e não 9:16: a filmagem é vertical, então cortar para paisagem decepa o
   assunto; mas 9:16 numa coluna de 438px daria 778px só de vídeo, e a seção
   viraria três telas. 4:5 guarda o caráter vertical e fecha a coluna em altura
   de tela. */
/* CARROSSEL 3D — de volta em 25.08 ("volte com o sistema de cards inicial,
   que puxa para o lado para revelar ele inteiro"). A grade lado a lado que
   morava aqui saiu; o carrossel voltou de alpha/carrossel-3d-empresas/.

   ADAPTADO: o item já não é vídeo + card, é só o card. A conta antiga de
   --citem somava a largura do vídeo (`--valt * 9/16 + --cc`) — sem vídeo ela
   devolveria um item estreito demais e as setas cairiam sobre os cards de
   trás, porque o afastamento delas sai da mesma --citem. Hoje --citem É a
   largura do card, e o card ficou mais largo para ocupar o lugar que o vídeo
   deixou: 600px a 1440 contra os 420 de quando havia vídeo ao lado.

   `--cv` também mudou de sentido: era a altura do vídeo vertical, virou o
   piso do palco enquanto o JS não mediu o item mais alto. */
.car{--cv:clamp(300px,40vh,440px);      /* piso do palco, até o JS medir */
     --cc:clamp(300px,42vw,600px);      /* largura do card = largura do item */
     --citem:var(--cc);
     margin-top:clamp(30px,4.6vw,68px);position:relative}
/* A altura do palco é escrita pelo JS: é a do item MAIS ALTO. Os itens são
   absolutos, então o palco não a herda sozinho. */
.car__palco{position:relative;min-height:var(--cv);
  perspective:1800px;perspective-origin:50% 50%;
  touch-action:pan-y;cursor:grab;overflow:hidden}
.car__palco.is-drag{cursor:grabbing}

.car__i{position:absolute;top:0;left:50%;display:flex;align-items:stretch;
  width:var(--citem);height:var(--valt,auto);min-height:0;
  margin-left:calc(var(--citem) / -2);
  border-radius:var(--r);overflow:hidden;background:var(--linho);
  transform-style:preserve-3d;will-change:transform,opacity;
  /* SEM transition. Quem anima a passagem é o rAF no main.js, porque o
     transform e a opacidade precisam sair do MESMO deslocamento — com dois
     relógios de CSS a opacidade sempre entra em hora errada. Ver o bloco 9. */
  }

/* Sem vídeo desde 25.08, o card É o item inteiro. */
.car__card{flex:1 1 auto;min-width:0;background:var(--linho);color:var(--carvao);
  padding:clamp(22px,2.4vw,36px);display:flex;flex-direction:column;
  gap:clamp(14px,1.6vw,24px);position:relative}
/* o filete do acento no topo do card — marca a cor da marca antes do nome */
.car__card::before{content:"";position:absolute;top:0;left:0;right:0;
  height:var(--bar);background:var(--ac)}
.car__topo{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
/* A WORDMARK das submarcas, do sistema OFICIAL em `02-SUBMARCAS/SVG/`.

   O nome numa LINHA SÓ vem do lockup `-endosso`, que é o único da família que
   compõe assim — o `-carvao` põe o descritor numa segunda linha (translate y
   248 → 385) e no mobile as duas linhas embolavam. Do endosso eu tiro só o
   grupo do nome; a linha "uma empresa bprodutora" e o filete ficam de fora.

   A COR é a do lockup principal, não a do endosso: o endosso pinta a linha
   inteira de carvão, e a 20px de altura num card a quebra de cor é o que
   separa "allframe" de "filmes" — o espaço sozinho não dá conta. Cada acento
   é lido do próprio `-carvao` da marca: vinho #7E4952 · teal #4E8079 ·
   ameixa #7E6A8A. (Para voltar ao endosso puro, é um grupo só em #1E1E1E.)

   Numa linha as razões são ~9:1 (allframe, medical) e ~5:1 (Vyzora+), contra
   ~2,5:1 empilhado. Quem limita passou a ser a LARGURA, não a altura — por
   isso a caixa é larga e a altura é só teto de segurança, e o Vyzora+, mais
   curto, ganha caixa própria para não sair maior que os irmãos.

   object-fit:contain é rede de segurança, não enfeite: o logo é item de um
   flex, e item de flex ENCOLHE. Com o `fill` padrão, encolher esmaga o
   desenho. */
.car__logo{display:block;width:auto;height:auto;object-fit:contain;
  max-width:min(100%,236px);max-height:clamp(22px,1.9vw,26px)}
.car__i[data-tri=vyzora] .car__logo{max-width:min(100%,132px)}

.car__ctl{display:flex;align-items:center;gap:16px;
  margin-top:clamp(16px,1.8vw,26px)}
/* As setas ficam FORA dos cards de trás, não sobre eles. O fator 0,76 sai de
   medição, não de conta: os de trás projetam até ~0,76 da largura do item a
   partir do centro, contando translateX, escala e a compressão da perspectiva
   — a projeção não é linear, então conta no papel erraria.
   O `min()` é a trava: sem ela, num iPad em retrato o afastamento jogava a
   seta para fora da tela. Garante pelo menos 60px de borda. */
.car__seta{position:absolute;top:calc(var(--valt,var(--cv)) / 2);z-index:30;
  width:46px;height:46px;border-radius:50%;border:0;padding:0;
  background:var(--areia);color:var(--carvao);cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--rule);
  display:grid;place-content:center;
  transform:translateY(-50%);
  transition:background-color .4s var(--e-io),transform .4s var(--e-out)}
.car__seta--esq{right:calc(50% + min(var(--citem) * .76 + clamp(10px,1.2vw,18px), 50vw - 60px))}
.car__seta--dir{left:calc(50% + min(var(--citem) * .76 + clamp(10px,1.2vw,18px), 50vw - 60px))}
.car__seta:hover{background:var(--linho)}
.car__seta svg{color:var(--carvao);width:16px;height:auto;aspect-ratio:1/1}
.car__seta--esq:hover{transform:translateY(-50%) translateX(-3px)}
.car__seta--dir:hover{transform:translateY(-50%) translateX(3px)}
.car__seta[data-car="-1"] svg{transform:rotate(180deg)}
.car__pontos{display:flex;gap:8px;margin-inline:auto}
.car__ponto{width:34px;height:4px;border:0;padding:0;border-radius:2px;cursor:pointer;
  background:var(--rule);transition:background-color .45s var(--e-io)}
.car__ponto[aria-selected=true]{background:var(--ac,var(--carvao))}

.car__idx{font-family:var(--ff-mono);font-size:var(--t-label);letter-spacing:.14em;
  color:var(--pedra)}
/* piso de DUAS linhas: as headlines têm 1 ou 2, e sem ele a copy começaria em
   alturas diferentes nas três colunas. Nasceu para alinhar o topo dos vídeos
   (ver alpha/cards-com-video/); sem vídeo continua valendo, agora pela copy. */
.car__phr{min-height:2.48em;
  font-size:clamp(1.1rem,1.55vw,1.5rem);font-weight:300;line-height:1.24;
  letter-spacing:-.018em;margin:0}
.car__cp{font-size:var(--t-body);line-height:1.6;color:var(--grafite);margin:0;
  flex:1 1 auto}
.car__tags{display:flex;flex-wrap:wrap;gap:5px}
.car__tags li{font-size:var(--t-label);letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r);color:var(--grafite);
  box-shadow:inset 0 0 0 1px rgba(30,30,30,.16)}
/* margin-top:auto empurra o link para o PÉ do card. Sem isso ele encostaria
   nas tags, e como as copies têm tamanhos diferentes os três CTAs ficariam em
   alturas diferentes — numa grade de três isso salta à vista. */
.car__lnk{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-cap);
  font-weight:700;border-top:1px solid rgba(30,30,30,.16);padding-top:14px;
  margin-top:auto}
.car__lnk svg{width:15px;height:auto;aspect-ratio:1/1;
  transition:transform .55s var(--e-out)}
.car__lnk:hover svg{transform:translateX(5px)}

/* controles */

/* ABAIXO DE 760px o card passa a ficar SOBRE o vídeo, não embaixo dele.
   Empilhado, o vídeo 9:16 precisava encolher para caber, e sobrava faixa vazia
   dos dois lados — 63px de cada lado num card de 330 (medido em 375x812). Era
   a única sobra real do componente: em 768, 1024 e 1440 os cards fecham em
   zero.
   Sobreposto, o vídeo ocupa a largura inteira, não há faixa nenhuma, e o
   conjunto ainda ENCOLHE: de 757px para a altura do próprio vídeo. É a mesma
   construção da seção Cinema e IA — bloco chapado sobre a imagem, sem
   gradiente e sem sombra, que o DNA proíbe. */
/* Abaixo de 900 as três empilham. A sobreposição do card sobre o vídeo, que o
   mobile fazia antes, saiu junto com o carrossel: ela existia porque o vídeo
   9:16 deixava 63px de faixa vazia de cada lado num card de 330 (medido em
   375x812). Com 4:5 o vídeo preenche a coluna e a faixa não existe — por isso
   as tags, que o mobile escondia, também voltaram. */
@media (max-width:900px){
  .car{--cc:min(88vw,420px)}
  .car__card{padding:clamp(20px,5vw,26px);gap:clamp(11px,2.8vw,16px)}
  /* Sem folga lateral: as setas encostam nas bordas, por cima do conjunto.
     Continuam ABSOLUTAS — soltá-las no fluxo as jogaria para o topo. */
  .car__seta{width:40px;height:40px}
  .car__seta--esq{right:auto;left:2px}
  .car__seta--dir{left:auto;right:2px}
}

@media (prefers-reduced-motion:reduce){
  .car__i{transition:none}
  .car__i{transition:none}
}

/* --------------------------------------------------  15. padrão ---------- */
/* --------------------------------------------------  16. cta final ------- */
/* O CTA final enche a TELA, para o carvão ser fundo e não faixa. Sem isto a
   seção media pela altura do próprio conteúdo — 770px em 1920x1080 e 508px no
   iPhone — e sobrava rodapé areia por baixo: 241px e 234px, medidos em 23.08.
   Em 1440x800 ela dava 731 contra 730 disponíveis e fechava por coincidência,
   que foi o que escondeu o defeito.
   A conta é a mesma da .sols: 100dvh menos o deslocamento da âncora, porque a
   06 estaciona pela BORDA e encosta em --anc do topo. dvh com vh de reserva na
   linha anterior — no Safari do iPhone 100vh conta a altura com as barras
   recolhidas (§6).
   align-items:center porque agora sobra altura: sem isso o bloco ficaria
   colado no topo com um vão morto embaixo. O .fin__fig não entra na conta,
   é absoluto. */
.fin{position:relative;overflow:hidden;
  min-height:calc(100vh - var(--anc));
  min-height:calc(100dvh - var(--anc));
  display:flex;align-items:center}
/* Em 23.08 este símbolo foi ampliado para SANGRAR pela direita, em duas escalas
   (52vw/teto 880 e 40vw/teto 680), e a sangria foi RECUSADA — voltou ao tamanho
   original. O caminho de volta está em `alpha/simbolo-06-sangrado/`. */
/* O fundo do CTA final. Em 23.08 o `b` desenhado saiu daqui e no lugar dele
   entrou a arte `background carvao.png` (raiz do projeto), copiada para
   assets/brand/fundo-06-carvao.png.
   Medido antes de usar: a base da arte é EXATAMENTE #1E1E1E, o carvão do DNA,
   e o arco é #26251F. É por isso que ela encaixa sem emenda — onde a imagem
   não cobre, o fundo da seção continua a mesma cor.
   Vive no .fin__fig, e não no `background` do .fin, por um motivo prático: o
   .is-dark declara `background:var(--carvao)!important`, e `background` é
   ATALHO — ele zeraria o background-image, com !important por cima. Camada
   própria evita a briga inteira.
   Enquadramento por dispositivo: ver `alpha/fundo-06/`. */
.fin__fig{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(../brand/fundo-06-carvao.png) no-repeat center right / cover}
.fin__in{position:relative;z-index:1;display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(24px,3vw,40px) clamp(13px,1.3vw,20px);justify-items:start}
/* mesma lógica da .head, que a 06 não usa: a barra na coluna 1, o resto na 2 */
.fin__in > *{grid-column:2}
.fin__in .head__top{grid-column:1;grid-row:1;align-self:start}
.fin__in .h1{max-width:15ch}
/* Grifo em amarelo na headline final. font-style volta a normal porque o <em>
   entra itálico por padrão e a Lato light em itálico não é voz da marca.
   Fica DENTRO do data-split: o split() clona os elementos que encontra, então o
   grifo sobrevive à quebra em palavras e entra na mesma onda das outras. */
.grifo{font-style:normal;color:var(--amarelo)}
.fin__cp{max-width:38ch;color:#A9A69E;font-size:var(--t-lead);font-weight:300;line-height:1.42}

/* --------------------------------------------------  17. rodapé ---------- */
.foot{padding-top:clamp(56px,6vw,88px);padding-bottom:26px}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(26px,4vw,60px);
  padding-bottom:clamp(44px,5vw,72px);border-bottom:1px solid var(--rule)}
.foot__lock{width:clamp(180px,17vw,240px);margin-bottom:20px}
.foot__t{font-size:var(--t-label);font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pedra);margin-bottom:16px}
.foot__l{display:grid;gap:9px}
.foot__l a,.foot__l span{font-size:var(--t-cap);transition:opacity .3s}
.foot__l a:hover{opacity:.55}
.foot__ac{display:inline-flex;align-items:center;gap:.55em}
.foot__ac i{width:7px;height:7px;border-radius:50%;background:var(--ac);flex:none}
.foot__bar{display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;padding-block:22px}
.foot__bar p,.foot__bar a{font-family:var(--ff-mono);font-size:11px;letter-spacing:.05em;
  color:var(--pedra)}
/* SEM USO desde 23.08: a wordmark grande que fechava o rodapé foi retirada.
   As regras ficam porque o caminho de volta é curto — sem git, apagar é para
   sempre. Para trazê-la de volta: último filho do .shell do <footer>,
   <div class="foot__word" data-reveal aria-hidden="true"> com um
   <svg class="wordmark" viewBox="0 0 643.507 130.282"> cujos paths saem de
   `01-LOGO bprodutora/SVG/wordmark/b-produtora-wordmark-carvao.svg` (o grupo
   com translate(-1.803,95.337), 10 paths, fill trocado para currentColor).
   Nunca redesenhar no olho — os vetores são LIDOS de 01-LOGO. */
.foot__word{width:100%;color:var(--linho);margin-top:8px}
.foot__word .wordmark{transition:color 1.1s var(--e-io)}
.foot__word:hover .wordmark{color:var(--carvao)}
@media (max-width:860px){.foot__grid{grid-template-columns:1fr;gap:34px}}

/* --------------------------------------------------  18. scroll ---------- */
#scroll{position:fixed;top:0;left:0;right:0;will-change:transform}
/* relative, não static: o #scroll precisa ser POSICIONADO para o z-index:2 de
   .stage-on valer. Como static ele era ignorado, e no celular a cena (fixa,
   z-index 1) ficava por cima do conteúdo até o visibility:hidden cortá-la — o
   que fazia a primeira seção depois do herói nascer já colada no topo, em vez
   de deslizar por cima do amarelo como acontece no desktop.
   top/left/right:0 em relative são deslocamento zero, então nada se move. */
html.no-vs #scroll{position:relative}
html.no-vs body{height:auto!important}

/* --------------------------------------------------  19. reduced ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .grain{display:none}
  .js [data-reveal]{opacity:1;transform:none}
  .js .w-i{transform:none}
  .js [data-draw],.js [data-bar]{transform:none}
  .cur{display:none}
}

/* --------------------------------------------------  20. encaixe --------- */
.mark{width:100%}
.wordmark,.lockup{display:block;width:100%;height:auto}
.btn__ar,.lnk svg{height:auto;aspect-ratio:1/1}
/* Desde 23.08 a barra leva SÓ o símbolo com o ponto — a assinatura por extenso
   passou a chegar na hero. A caixa mudou de escala junto: o lockup é uma faixa
   deitada (2925x1042) e cabia em 126–158px de largura; o símbolo é quase
   quadrado (933x936), e na mesma largura viraria um bloco maior que a barra,
   que tem 56px de altura. */
.nav__logo{width:clamp(30px,2.6vw,38px)}
.nav__logo .mark{width:100%}
/* Sobre a tela amarela da abertura o ponto da marca sumia: amarelo em amarelo.
   Ali ele vira carvão. O valor é LITERAL, não var(--carvao): durante o pulso da
   abertura os tokens giram, e com a variável o ponto viraria areia justamente
   sobre o amarelo. É a mesma razão do texto do hover dos botões (§6).
   Fora da tela amarela — ou seja, sobre carvão e sobre areia — ele continua
   amarelo, que é a regra da marca. */
.nav.on-yellow .nav__logo .mk-ponto{fill:#1E1E1E}
.tri__nm--one b em{font-style:normal;color:var(--ac)}

/* --------------------------------------------------  21. telas pequenas -- */
@media (max-width:620px){
  .btns{width:100%}
  .btn{flex:1 1 auto;justify-content:space-between}
  .hero{padding-bottom:clamp(72px,14vw,110px)}
}

/* menu aberto: a barra passa a ler sobre carvão */
.is-menu .nav{color:var(--areia);background:transparent}
.is-menu .nav__rule{transform:scaleX(0)}
.sheet .btn{--btn-bg:var(--areia);--btn-fg:var(--carvao)}
.is-menu body{overflow:hidden}

/* --------------------------------------------------  22. cinema e IA ----- */
/* O "tecnológico" aqui é instrumento, não efeito: marcas de enquadramento,
   filete de varredura, dados em mono e faixa de slate — tudo canto vivo,
   sem gradiente, sem glow. A tela do vídeo é o bloco de contraste. */

/* --- 17b. o vídeo em tela cheia ---------------------------------------
   A seção É o vídeo: sangra de ponta a ponta, sem moldura e sem .shell em
   volta. Padding zero porque quem dá respiro aqui é a própria imagem. */
.cine{padding-block:0;overflow:hidden}
.cine .vid{margin:0;border-radius:0;
  min-height:calc(100vh - var(--anc));
  min-height:calc(100dvh - var(--anc));
  position:relative;overflow:hidden}

/* O POSTER entra como fundo, não como <img>: o <video> fica por cima com
   opacity 0 até `loadeddata`, então o quadro nunca aparece vazio — mostra o
   primeiro frame enquanto o arquivo carrega e o vídeo cobre por cima. */
/* `.cine .vid--exemplo` e não `.vid--exemplo` só: a regra genérica `.vid`
   declara `background:var(--carvao)` mais abaixo no arquivo, e `background` é
   ATALHO — na mesma especificidade ela vence por ordem e zera a imagem. Foi
   exatamente o que aconteceu na primeira tentativa. */
.cine .vid--exemplo{background:var(--carvao) url(../video/reel-poster.jpg) center / cover no-repeat}
.cine .vid__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* A camada de texto. Usa .shell para o bloco alinhar com o grid do site em
   vez de encostar na borda da tela. */
.vid__over{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;
  padding-block:clamp(28px,4vw,64px);pointer-events:none}
.vid__in{display:grid;gap:clamp(14px,1.6vw,22px);justify-items:start}

/* O bloco de contraste: carvão chapado. Sem gradiente e sem sombra — o DNA
   proíbe os dois, e é justamente o bloco o recurso que a marca tem para
   garantir leitura sobre imagem. Duas colunas, como a .head: barrinha na
   primeira, texto na segunda. */
/* AREIA CHAPADA, sem opacidade. Virou areia em 25.08; era carvão.

   Chapado, e não translúcido: a translucidez a 86% foi tentada em 23.08 e
   recusada. Fica registrado o que foi medido, caso a ideia volte — o quadro
   mais claro do reel é praticamente branco puro (rgb 255,254,255, achado em
   22.656 amostras de 177 quadros), e compondo contra ele o texto dava 9,26:1
   a 86%, 6,09:1 a 74% e 3,78:1 a 60%; este último já reprova a linha de apoio,
   que é texto normal e pede 4,5:1. Chapado o contraste é 14,27:1 — e continua
   14,27:1 depois da inversão, porque são as MESMAS duas cores trocando de
   papel.

   O raio é o --r do DNA (10px), o MESMO dos botões. */
.vid__diz{margin:0;max-width:min(100%,760px);
  background:var(--areia);color:var(--carvao);
  border-radius:var(--r);
  padding:clamp(20px,2.4vw,34px) clamp(22px,2.8vw,40px);
  display:grid;grid-template-columns:auto 1fr;gap:0 clamp(13px,1.3vw,20px)}
.vid__diz .head__top{grid-column:1;grid-row:1;align-self:start}
.vid__txt{grid-column:2;display:grid;gap:clamp(12px,1.4vw,20px)}
.cine__ttl{max-width:20ch;margin:0}
.cine__sub{max-width:44ch;color:var(--pedra);font-size:var(--t-lead);font-weight:300;
  line-height:1.42;margin:0}

/* SEM USO desde 23.08: a linha "No reel: filme publicitário · motion design ·
   fake OOH · documentário · conteúdo para redes · transmissão ao vivo" foi
   ocultada. As regras ficam porque o caminho de volta é curto — sem git,
   apagar é para sempre. Para voltar, recolocar dentro do .vid__in, depois do
   <figcaption>:
     <p class="cine__list" data-reveal style="--d:120ms">No reel: …</p>
   O .cine__nota era a etiqueta "imagem de exemplo", que morreu junto quando o
   reel de verdade entrou. */
.cine__list{margin:0;color:var(--areia);font-size:var(--t-cap);
  background:var(--carvao);padding:9px 14px;border-radius:var(--r)}
.cine__nota{display:block;color:var(--pedra);font-size:var(--t-label);
  letter-spacing:.09em;text-transform:uppercase;margin-top:5px}

@media (max-width:620px){
  .vid__diz{max-width:100%;grid-template-columns:1fr}
  .vid__diz .head__top{grid-column:1;margin-bottom:12px;height:auto}
  .vid__txt{grid-column:1}
}

.vid{position:relative;margin:0;background:var(--carvao);color:var(--areia);
  border-radius:var(--r);overflow:hidden}
.vid__frame{position:relative;overflow:hidden;background:var(--carvao)}
.vid--main .vid__frame{aspect-ratio:16/9}
.vid__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;pointer-events:none;user-select:none;
  transition:opacity .9s var(--e-io),transform 1.1s var(--e-out)}
.vid.is-ready .vid__v{opacity:1}
.vid:hover .vid__v{transform:scale(1.035)}

/* enquanto o arquivo não chega, o quadro se anuncia em vez de quebrar */
.vid__ph{position:absolute;inset:0;z-index:1;display:grid;place-content:center;gap:7px;
  text-align:center;font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;
  color:var(--pedra);transition:opacity .5s var(--e-io)}
.vid__ph i{font-style:normal;display:block;color:var(--grafite);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase}
.vid.is-ready .vid__ph{opacity:0}

/* marcas de enquadramento — canto de visor */
.vid__mark{position:absolute;inset:clamp(10px,1vw,16px);z-index:2;pointer-events:none}
.vid__mark i{position:absolute;width:16px;height:16px;border:0 solid var(--areia);opacity:.5}
.vid__mark i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}
.vid__mark i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}
.vid__mark i:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.vid__mark i:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}

/* varredura: um filete atravessa o quadro uma vez, na entrada */
.vid__scan{position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:var(--areia);opacity:0}
.js .vid--main.is-in .vid__scan{animation:scan 1.5s var(--e-io) .25s 1}
@keyframes scan{0%{top:0;opacity:0}8%{opacity:.7}92%{opacity:.7}100%{top:100%;opacity:0}}

/* faixa de dados — mesma gramática do slate de produção (DNA 5.7) */
.vid__meta{display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);
  padding:clamp(13px,1.3vw,20px) clamp(16px,1.6vw,26px);
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.vid__sep{width:18px;height:1px;background:currentColor;opacity:.45;flex:none}
.vid__tc{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--pedra)}

/* a faixa de dados enxuga no celular — sobra o essencial, sem quebra feia */
@media (max-width:560px){
  .vid__meta{gap:10px;letter-spacing:.06em}
  .vid__meta .vid__sep,.vid__meta .vid__spec{display:none}
}

/* --------------------------------------------------  24. abertura -------- */
/* A cena vive FORA do #scroll, fixa, e é dirigida pela posição de rolagem.
   O herói no fluxo é só o espaço que ela percorre. Ordem em z: a cena atrás,
   o conteúdo por cima — é a seção seguinte que cobre o amarelo, sem truque.
   Sem JS o bloco cai para o empilhamento normal: símbolo, depois a frase. */

.stage{display:grid;justify-items:start;gap:clamp(30px,5vw,54px);
  padding:clamp(120px,14vw,180px) 0 clamp(60px,8vw,96px)}
.stage__bloom,.stage .cue{display:none}
.stage__mark{width:clamp(112px,13vw,190px);margin-left:var(--gut)}
.stage__mark .mark{width:100%}
.hero{display:none}

/* A largura do símbolo em cena. Estava escrita três vezes (marca, lupa, alvo
   de clique) e agora a moldura também precisa dela — vira variável, para não
   haver quatro cópias do mesmo clamp para manter em sincronia. */
/* --assin é a largura da assinatura. Token e não número solto porque TRÊS
   coisas dependem dela: a wordmark, a lente de cor dela e o alvo de hover. Se
   virarem três números, voltam a divergir — já aconteceu com o --anc. */
.stage-on{--marca:clamp(132px,15vw,232px);--assin:var(--marca)}

/* com JS: a cena assume a tela */
.stage-on .stage{display:block;position:fixed;inset:0;z-index:1;
  overflow:hidden;padding:0;pointer-events:none}
/* Durante o herói a cena sobe para a frente do #scroll (z-index 2). É o que
   torna os botões da frase clicáveis: o z-index 3 deles vale dentro da cena,
   e com a cena em 1 o conteúdo ficava por cima. A classe cai em cur >= heroLen
   e a ordem original volta, para a seção seguinte cobrir o amarelo. */
.stage-on.cena-frente .stage{z-index:3}

/* Movimento de câmera (opção B, escolhida em 23.08.2026). A opção A era esta
   mesma cena SEM câmera — bastam apagar as duas regras .stage__cam com
   transform abaixo e ela volta. Passo a passo em
   alpha/animacao-A/COMO-VOLTAR-NO-SITE.md
   -------------------------------------------------------------------------
   A cena começa oblíqua, como quem olha a prancheta de
   lado, e sobe até ficar frontal no instante em que a marca fecha. É o mesmo
   ponto de vista que o desenho da malha pressupõe: alguém debruçado sobre a
   mesa. Vive num invólucro próprio porque a mola da bolha reescreve o
   transform do .stage__mark a cada quadro — os dois brigariam no mesmo nó. */
.stage__cam{position:absolute;inset:0;transform-style:preserve-3d;
  transform-origin:50% 60%}
/* parte em 3D de verdade — inclinada, girada e afastada — e vai perdendo
   perspectiva até ficar chapada. Quando o transform zera, a cena é 2D e trava:
   é o mesmo quadro que fica no ar o resto do tempo.
   A escala parte de 0,84, não de 1,1: com rotateX de 58° a borda de baixo vem
   em direção à lente e amplia ~24%, e o desenho saía do quadro no começo.
   Partindo afastada, ela compensa a ampliação e vira travelling de entrada. */
.stage-on .stage__cam{transform:perspective(1200px) rotateX(58deg) rotateY(-16deg)
  translateZ(-120px) translateY(3%) scale(.84)}
/* O atraso de 0,3s é o que faz a câmera ser vista: sem ele a curva gasta 85%
   do movimento antes das guias aparecerem, e a cena chega quase chapada quando
   há o que olhar. Agora ela segura a inclinação enquanto o traço começa e trava
   junto com o ponto. */
.stage-on .stage.is-live .stage__cam{transform:perspective(1200px) rotateX(0deg)
  rotateY(0deg) translateZ(0) translateY(0) scale(1);
  transition:transform 1.62s cubic-bezier(.5,.05,.35,1) .3s}
.stage-on #scroll{z-index:2}
/* A assinatura entra no mesmo gesto da headline: o JS liga .is-in no mesmo
   instante em que as palavras sobem, e a duração aqui é a mesma do .w-i. */
.stage-on .nav__logo{opacity:0;transition:opacity 1.05s var(--e-out)}
.stage-on .nav__logo.is-in{opacity:1}
.stage-on .hero{display:block;background:transparent;height:280vh;padding:0;
  pointer-events:none}
.stage-on .stage__bloom,.stage-on .stage .cue{display:block}

/* ato 1 — o símbolo, no centro */
.stage-on .stage__mark{position:absolute;top:50%;left:50%;z-index:1;margin:0;
  width:var(--marca);pointer-events:none;
  transform:translate3d(-50%,-50%,0);will-change:transform}

/* O símbolo não existe antes da abertura começar.
   Com .stage-on decidida no <head>, a marca passa a estar centralizada já no
   primeiro quadro — e o estado natural do SVG é o símbolo INTEIRO. Sem esta
   regra o desenho pronto aparecia antes da construção, achatado pelo tombo da
   câmera: no iPad isso lia como um ponto amarelo piscando antes de tudo.
   .is-live entra no mesmo instante que .mark--anim, então a marca só se revela
   já sob a animação, com a haste em scaleY(0) e o ponto em scale(0).
   visibility, não opacity: o laço da cena escreve opacity inline a cada quadro
   e passaria por cima. Sem JS nada disto se aplica — o símbolo fica visível. */
.stage-on .stage__mark{visibility:hidden}
.stage-on .stage.is-live .stage__mark{visibility:visible}


/* ato 1b — a assinatura chega, embaixo do símbolo.
   Fora da cena (movimento reduzido) isto é só mais um item do grid do .stage,
   parado e inteiro, embaixo do símbolo. */
.stage__word{width:min(72vw,300px);margin-left:var(--gut)}
.stage__word-m{display:block}

/* Na cena, centrada com o símbolo. A caixa do símbolo tem var(--marca) de
   largura e proporção ~1:1 (933x936), centrada em 50%/50% — então a base dele
   cai em 50% + --marca/2, e é daí que sai o deslocamento vertical desta.
   Mudar --marca move as duas juntas, sem remedir nada. */
.stage-on .stage__word{position:absolute;top:50%;left:50%;z-index:1;margin:0;
  /* TESTE (24.08): a assinatura com a MESMA largura do símbolo — de uma ponta
     dele até o ponto. Medido: a tinta do símbolo vai de x 0 a x 933 no viewBox,
     que é a caixa inteira (a haste começa em 0, o ponto termina em 933), então
     "de ponta a ponta" é exatamente var(--marca), sem fator.
     Escalas já testadas antes: 1,62 · 1,45 · 1,30.
     Mudar --assin move a lente e o alvo de hover junto. */
  width:var(--assin);
  transform:translate(-50%,calc(var(--marca) * .5 + clamp(16px,1.6vw,26px)));
  pointer-events:none}

/* A subida atrás da máscara é o MESMO gesto do .w-i da headline: mesma duração
   (1,05s), mesma curva e a mesma construção de dois elementos — máscara fora,
   peça que anda dentro. A assinatura e a frase falam com a mesma voz.
   Sem a classe, a wordmark fica FORA da máscara — não é preciso visibility
   como no símbolo, porque aqui o estado natural já é "escondido atrás do
   recorte", e não "desenho inteiro".
   Quem anda é o <span>, não o <svg>. Transform no `<svg>` raiz FUNCIONA — isto
   foi verificado depois de eu ter concluído o contrário: as identidades que eu
   lia vinham de estar com `.is-word` ligada (translateY(0)) e de ler no meio de
   uma transição em curso, que vence a cascata (§6). O <span> fica assim mesmo,
   porque é a mesma construção do .w/.w-i da headline — máscara fora, peça que
   anda dentro — e uma construção só é mais fácil de manter que duas. */
.stage-on .stage__word-m{overflow:hidden}
.stage-on .stage__word-i{display:block;transform:translateY(108%);
  transition:transform 1.05s var(--e-out)}
.stage-on .stage.is-word .stage__word-i{transform:translateY(0)}

/* O "holding" chega em SEGUNDO tempo, 300ms depois — só em opacidade.
   Opacidade e não transform: transform em <g> dentro de SVG depende de
   transform-box e a unidade passa a ser a do viewBox, que aqui é 643x166 e não
   pixels. O efeito lido é o mesmo e não há armadilha de unidade. */
.stage-on .stage__word .wm-holding{opacity:0;transition:opacity .62s var(--e-out) .3s}
.stage-on .stage.is-word .stage__word .wm-holding{opacity:1}

/* A camada de avanço: a tela inteira responde ao clique durante a abertura.
   Fica no mesmo z do #stHit e ANTES dele no HTML, então o símbolo continua
   ganhando o clique na área dele — e com ele a mola, o realce do cursor e o
   anel de foco, que são calibrados na caixa pequena e não podem crescer.
   Para estreitar o alvo um dia, é só trocar o inset:0 por uma caixa própria. */
.stage__adv{display:none}
/* pointer-events NONE por padrão, e o JS liga só durante a abertura. Ao
   contrário — que era como estava — esta camada invisível cobre a tela inteira
   e engole clique de tudo que houver embaixo, em qualquer ponto da página,
   sempre que o laço de animação não rodar (aba em segundo plano, quadro
   perdido, rAF estrangulado). O rodapé ficou inclicável assim. Mesma regra da
   marca: o estado SEM a mão do JS tem que ser o inofensivo. */
.stage-on .stage__adv{display:block;position:fixed;inset:0;z-index:3;
  pointer-events:none}

/* A LUPA — a interação do símbolo no hover.
   Uma segunda cópia da marca, ampliada em torno do cursor e recortada num
   círculo que segue o mouse. A marca de baixo fica IMÓVEL: a leitura de lente
   vem do recorte se mover, não do desenho se deformar.
   Sem aspect-ratio próprio — a altura sai da proporção do SVG, igual à
   .stage__mark; se as duas caixas não coincidirem, a lente desalinha do desenho.
   O clip-path recorta o conteúdo pintado INTEIRO, inclusive o que transborda da
   caixa: é o que deixa a tinta ampliada aparecer perto da borda em vez de ser
   cortada num quadrado. */
.stage__lupa{display:none}
.stage-on .stage__lupa{display:block;position:absolute;top:50%;left:50%;z-index:2;
  margin:0;width:var(--marca);pointer-events:none;
  transform:translate3d(-50%,-50%,0);opacity:0;transition:opacity .22s var(--e-out)}
.stage-on .stage__lupa.is-on{opacity:1}
/* A troca de cor: a haste e o arco viram amarelo e o ponto vira carvão —
   as duas cores da marca invertidas dentro do círculo. Sem isso a lente
   passaria por cima do ponto sem que nada acontecesse, já que ele já é
   amarelo. Nenhuma geometria muda: só o que se pinta. */
.stage-on .stage__lupa .mark{width:100%;color:var(--amarelo)}
.stage-on .stage__lupa .mk-ponto{fill:var(--carvao)}

/* A LENTE DA ASSINATURA — irmã da do símbolo, mesma construção.
   Fica exatamente sobre a wordmark: mesma largura (--assin) e mesmo
   deslocamento vertical, copiado do .stage__word. Se as duas caixas não
   coincidirem, a lente desalinha do desenho — é o mesmo cuidado que a do
   símbolo já pedia.
   Aqui não há ponto para inverter: a wordmark é só letra, então a troca é a
   letra virando amarelo. */
.stage-on .stage__lupa--w{width:var(--assin);
  transform:translate(-50%,calc(var(--marca) * .5 + clamp(16px,1.6vw,26px)))}
.stage-on .stage__lupa--w .wordmark{width:100%;color:var(--amarelo)}
.stage-on .stage__lupa--w .wordmark path{fill:currentColor}

/* O alvo de hover da assinatura. Mesma caixa da wordmark; a altura sai da
   proporção do SVG (643,507 x 165,688), não de um número chutado. */
/* Duas classes no seletor de propósito: a regra genérica `.stage-on
   .stage__hit` mora MAIS ABAIXO no arquivo e, com a mesma especificidade,
   vencia por ordem — o alvo nascia na posição do símbolo. */
.stage-on .stage__hit.stage__hit--w{width:var(--assin);
  aspect-ratio:643.507 / 165.688;
  transform:translate(-50%,calc(var(--marca) * .5 + clamp(16px,1.6vw,26px)))}


/* A CAIXA é a mesma para todos os clientes, e o mask-size:contain ajusta cada
   desenho dentro dela. Foi pedido em 24.08 — antes cada logo tinha `--h`
   próprio, calculado por ÁREA ÓPTICA, para o de traço fino não sumir ao lado
   do cheio. Os valores daquela equalização estão em
   alpha/hero-faixa-clientes/alturas-area-optica.md, com a conta.
   O que a padronização custa está medido lá: o Instituto Gabrielle Monteiro
   tem 7,5% de tinta e a Caixa tem 64,2% — na mesma caixa, um é quase nove
   vezes mais claro que o outro. */
.cli{display:block;width:100%;height:var(--cli-h);
  background:currentColor;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* --- 05 · quem já confiou ---------------------------------------------
   TRÊS FILEIRAS correndo em sentidos alternados, em laço. É o mesmo mecanismo
   do marquee da seção 02, e as lições de lá valem inteiras aqui.

   A DURAÇÃO daqui é só PISO. Quem manda é o main.js, que a calcula a partir
   da distância medida de cada fileira para a velocidade em px/s ficar igual
   em qualquer tela. Com duração fixa no CSS, a fita do herói andava a 99 px/s
   em 1440 e 47 px/s no iPhone — menos da metade, e no celular lia como
   travada. A distância do laço depende de quantas cópias couberam, e isso
   depende da largura da tela: por isso a duração não pode ser escrita aqui.

   A fileira NÃO PARA sob o cursor. Isso foi tentado na seção 02 e descartado
   no mesmo dia: o tranco de parar e voltar custava mais do que o hover
   ganhava. O destaque vem do BLOCO DE CONTRASTE, que acompanha a peça em
   movimento porque mora dentro dela.

   A cor da tinta vem de `color` HERDADA, não de custom property, e isso é de
   propósito: está no §6 do HANDOFF que custom property resolve o var() onde é
   declarada e herda o valor já resolvido, então trocar `--carvao` num pedaço
   da página não re-resolve quem deriva dele lá de cima. `color` é propriedade
   de verdade e re-resolve no elemento — a célula em hover só precisa declarar
   a sua, e a .cli (que pinta com currentColor) acompanha sozinha.

   Formas anteriores, as duas de 24.08: alpha/muro-lente-de-cor/ (lente que
   seguia o cursor) e alpha/muro-grade-estatica/ (grade parada, onda diagonal). */
/* Sem filete nenhum, por pedido de 24.08. O que separa as fileiras agora é
   só respiro — e por isso ele precisa ser maior do que era quando havia
   linha: com a linha, 1px já dizia "acabou esta e começou a outra". */
/* O muro DESCE dentro da seção e o pé dela encolhe — as duas coisas juntas,
   por pedido de 25.08 ("desce mais pra proximo do vídeo"). Mexer só no pé
   aproximaria os dois, mas quem andaria seria o vídeo, subindo; mexer só na
   margem empurraria o muro para fora da seção. Com as duas, o muro anda para
   baixo e a seção mantém praticamente a mesma altura.

   O pé fica MENOR que o topo de propósito: abaixo do muro vem vídeo sangrando
   de borda a borda, e contra imagem cheia o respiro precisa ser curto para o
   muro ler como a última coisa da seção, não como algo solto no meio dela. */
.muro-sec{padding-bottom:clamp(1.6rem,3.2vw,3.2rem)}
.muro{margin-top:clamp(88px,9vw,132px);color:var(--carvao);
  display:grid;gap:clamp(10px,1.2vw,20px)}

.muro__f{overflow:hidden}

/* A fita anda até -50%, que é EXATAMENTE metade das cópias — por isso o JS
   sempre escreve um número PAR delas. Qualquer outro valor deixa emenda. */
.muro__fita{display:flex;width:max-content;
  animation:muroFita 46s linear infinite}
/* sentido: a fileira 2 corre ao contrário, com a MESMA curva e a mesma
   velocidade — `reverse` em vez de um segundo @keyframes, senão os dois
   precisariam ser mantidos em dia juntos */
.muro__f[data-dir="1"] .muro__fita{animation-direction:reverse}
@keyframes muroFita{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.muro__fila{display:flex;align-items:center;list-style:none;margin:0;padding:0}

/* A CAIXA é a mesma para todos os clientes, e o mask-size:contain ajusta cada
   desenho dentro dela. Foi pedido em 24.08 — antes cada logo tinha `--h`
   próprio, calculado por ÁREA ÓPTICA, para o de traço fino não sumir ao lado
   do cheio. Os valores daquela equalização estão em
   alpha/hero-faixa-clientes/alturas-area-optica.md, com a conta. */
.muro__i{flex:none;width:clamp(158px,14.6vw,214px);
  display:grid;place-items:center;position:relative;isolation:isolate;
  padding:clamp(22px,2.4vw,32px) clamp(14px,1.6vw,24px);
  transition:color .3s var(--e-io)}
.muro__i .cli{--cli-h:clamp(38px,4vw,58px)}

/* O bloco entra ATRÁS do logo, recuado das bordas — o que se vê é um retângulo
   solto dentro da célula, não a célula inteira pintada. Mesmo raio dos botões
   (--r, DNA 3.6), como o bloco do hover das faixas da 02. */
.muro__i::before{content:'';position:absolute;inset:clamp(6px,.7vw,10px);
  border-radius:var(--r);background:var(--carvao);
  opacity:0;transform:scale(.94);
  transition:opacity .3s var(--e-io),transform .3s var(--e-io);z-index:-1}
.muro__i:hover::before,.muro__i:focus-within::before{opacity:1;transform:none}
.muro__i:hover,.muro__i:focus-within{color:var(--areia)}

@media (max-width:760px){
  .muro__i{width:clamp(126px,38vw,168px);padding:18px 12px}
  .muro__i .cli{--cli-h:34px}
}
@media (prefers-reduced-motion:reduce){
  .muro__fita{animation:none}
  .muro__i::before{transition:none}
}


/* Uma classe por cliente, com o caminho RELATIVO À FOLHA — como todos os
   outros assets deste arquivo. Passar a URL por custom property no style
   inline NÃO funciona: ela resolve contra a folha de estilo e não contra o
   documento, então `assets/clientes/x.png` virava
   `/assets/css/assets/clientes/x.png` e dava 404 em silêncio, com a máscara
   vazia e o logo invisível. */
/* O libbs.png tinha o alfa quebrado: uma caixa branca OPACA por cima do "Li",
   invisível sobre fundo branco e sólida como máscara — o logo lia "bbs" com um
   bloco na frente. O defeito está no arquivo do CLIENTE, não no recorte: o
   traço reproduziu igual. Resolvido lendo a LUMINÂNCIA em vez do alfa, que
   descarta a caixa branca e mantém as letras. Só apareceu quando a seção
   #clientes aumentou o logo de 26px para 58px. */
.cli--libbs{-webkit-mask-image:url(../clientes/libbs.svg);mask-image:url(../clientes/libbs.svg)}
.cli--akzonobel{-webkit-mask-image:url(../clientes/akzonobel.png);mask-image:url(../clientes/akzonobel.png)}
.cli--apsen{-webkit-mask-image:url(../clientes/apsen.png);mask-image:url(../clientes/apsen.png)}
.cli--avene{-webkit-mask-image:url(../clientes/avene.png);mask-image:url(../clientes/avene.png)}
.cli--usp-talks{-webkit-mask-image:url(../clientes/usp-talks.png);mask-image:url(../clientes/usp-talks.png)}
.cli--fem-clinica{-webkit-mask-image:url(../clientes/fem-clinica.png);mask-image:url(../clientes/fem-clinica.png)}
.cli--via-varejo{-webkit-mask-image:url(../clientes/via-varejo.png);mask-image:url(../clientes/via-varejo.png)}
.cli--agesbec{-webkit-mask-image:url(../clientes/agesbec.png);mask-image:url(../clientes/agesbec.png)}
/* PENDENTE — o Mafra precisa de versão monocromática do cliente.
   O arquivo dele é de DUAS cores por construção: disco branco atrás,
   assinatura em preto por cima dele e "Produções Musicais" em branco fora.
   Em silhueta de uma cor só não existe leitura possível — pelo alfa vira
   disco cheio com um rabisco, pela luminância escura sobra só o "Ma".
   Fica com o alfa, que ao menos é o contorno verdadeiro. */
.cli--mafra{-webkit-mask-image:url(../clientes/mafra.png);mask-image:url(../clientes/mafra.png)}
.cli--guardia{-webkit-mask-image:url(../clientes/guardia.png);mask-image:url(../clientes/guardia.png)}

/* Os nove de 24.08 são SVG, não PNG — a máscara aceita os dois igual, e em
   vetor o logo não serrilha em tela retina nem no zoom. Cinco vêm do arquivo
   oficial do próprio dono (Claro e ADP do design system deles, LLYC do site,
   Makro e Caixa do Wikimedia); quatro foram VETORIZADOS aqui a partir de
   raster, com o `vetorizar.py` — Mocotó do LOGO.mov do cliente, Vanzolini do
   site deles, Clínica AR e Stuppendo de arquivo fechado.
   ARMADILHA: SVG com width/height no raiz que discordem do viewBox vira
   letterbox dentro da máscara. O do LLYC vinha `width="100"` com viewBox de
   766 e o logo, que é 3,3:1, era desenhado a 25:1 — uma tira. Todos passaram
   pelo `normalizar-svg.py`, que tira as medidas do raiz e aperta o viewBox na
   tinta. Ver o cabeçalho daquele arquivo para o porquê de cada passo. */
.cli--claro{-webkit-mask-image:url(../clientes/claro.svg);mask-image:url(../clientes/claro.svg)}
.cli--adp{-webkit-mask-image:url(../clientes/adp.svg);mask-image:url(../clientes/adp.svg)}
.cli--caixa{-webkit-mask-image:url(../clientes/caixa.svg);mask-image:url(../clientes/caixa.svg)}
.cli--makro{-webkit-mask-image:url(../clientes/makro.svg);mask-image:url(../clientes/makro.svg)}
.cli--llyc{-webkit-mask-image:url(../clientes/llyc.svg);mask-image:url(../clientes/llyc.svg)}
.cli--mocoto{-webkit-mask-image:url(../clientes/mocoto.svg);mask-image:url(../clientes/mocoto.svg)}
.cli--vanzolini{-webkit-mask-image:url(../clientes/vanzolini.svg);mask-image:url(../clientes/vanzolini.svg)}
.cli--clinica-ar{-webkit-mask-image:url(../clientes/clinica-ar.svg);mask-image:url(../clientes/clinica-ar.svg)}
.cli--stuppendo{-webkit-mask-image:url(../clientes/stuppendo.svg);mask-image:url(../clientes/stuppendo.svg)}
.cli--kalil{-webkit-mask-image:url(../clientes/kalil.svg);mask-image:url(../clientes/kalil.svg)}
.cli--gabrielle-monteiro{-webkit-mask-image:url(../clientes/gabrielle-monteiro.svg);mask-image:url(../clientes/gabrielle-monteiro.svg)}


/* o alvo do mouse, invisível, acima de tudo */
.stage__hit{display:none}
.stage-on .stage__hit{display:block;position:fixed;top:50%;left:50%;z-index:3;
  pointer-events:none;   /* o JS liga durante a abertura — ver .stage__adv */
  width:var(--marca);aspect-ratio:1;transform:translate(-50%,-50%);
  background:none;border:0;padding:0}
.stage__hit:focus-visible{outline:2px solid var(--carvao);outline-offset:10px;
  border-radius:50%}

/* ato 2 — o ponto vira a tela.
   clip-path em vez de scale: um círculo escalado 100× rasteriza borrado;
   o recorte é recalculado a cada quadro e fica limpo em qualquer raio. */
/* Os nomes levam prefixo porque --r JÁ EXISTE no :root: é o raio de componente
   (10px, DNA 3.6). Escrito como var(--r,0px) o bloom herdava esses 10px e o
   fallback 0px nunca valia — um disco amarelo de 10px no centro da tela até o
   laço de quadro escrever o valor real no elemento. Ficava escondido enquanto
   .stage-on chegava tarde e o laço já estava correndo; com a classe decidida no
   <head> a janela abriu e o ponto apareceu nos três aparelhos. */
.stage-on .stage__bloom{position:absolute;inset:0;z-index:2;background:var(--amarelo);
  pointer-events:none;
  clip-path:circle(var(--bloom-r,0px) at var(--bloom-x,50%) var(--bloom-y,50%));
  will-change:clip-path}

/* ato 3 — a frase, sobre o amarelo */
/* O tamanho das DUAS etiquetas da tela amarela, num lugar só: "Holding
   audiovisual" no topo e "Nossas empresas" no pé. Elas foram desenhadas como
   a mesma etiqueta e precisam continuar iguais — em 24.08 a de cima cresceu
   sozinha e ficou 15,1px contra 11,4px da de baixo. Como número solto elas
   voltariam a divergir; foi o que já aconteceu com o --anc e com o --assin. */
.stage{--t-eti:clamp(.86rem,1.18vw,1.05rem)}
.stage__say{color:var(--carvao)}
.stage-on .stage__say{position:absolute;inset:0;z-index:3;display:flex;
  align-items:center;opacity:0;pointer-events:none}
.stage__in{display:grid;gap:clamp(22px,3vw,38px);width:100%;justify-items:start}
.stage-on .stage__in{padding-top:clamp(70px,8vw,104px)}
/* Tamanho pelo --t-eti, não pelo --t-label. Ela é a primeira palavra da tela
   amarela e precisa de mais presença que uma etiqueta de canto — e mexer no
   token global levaria junto o rodapé, as tags do carrossel, os números do
   padrão e mais seis lugares. */
.stage__tag{font-size:var(--t-eti);font-weight:900;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grafite)}
.stage__ttl{max-width:17ch;font-size:clamp(2.2rem,5.1vw,4.9rem);font-weight:300;
  line-height:1.05;letter-spacing:-.025em}
/* sobre amarelo o preenchimento de hover não pode ser amarelo */
.stage-on .stage__say .btn::before{background:var(--areia)}
.stage-on .stage__say .btn--ghost{box-shadow:inset 0 0 0 1px rgba(30,30,30,.3)}

.stage-on .stage .cue{position:absolute;right:var(--gut);bottom:26px;z-index:4;
  color:var(--grafite);left:auto}

.hud.on-yellow{color:var(--grafite)}
.foot{position:relative;z-index:2;background:var(--areia)}

@media (max-width:860px){
  .stage-on .hero{height:250vh}
  .stage-on{--marca:clamp(112px,26vw,170px)}
}

/* --------------------------------------------------  25. medidor --------- */
/* O único dado em tela na abertura: quanto do amarelo já cobriu. Fica no pé,
   longe da marca — a mira e a linha de construção saíram por poluírem. */

.stage__meter{display:none}
.stage-on .stage__meter{display:block;position:absolute;left:50%;bottom:26px;z-index:4;
  transform:translateX(-50%);pointer-events:none;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pedra)}
.stage__meter b{font-weight:400;font-variant-numeric:tabular-nums;color:var(--carvao)}

/* --------------------------------------------------  26. pista de rolagem  */
/* Sobrou do herói antigo; a cena de abertura continua usando. */

.cue{display:flex;align-items:center;gap:12px;color:var(--pedra);
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.cue__l{position:relative;width:1px;height:46px;background:currentColor;overflow:hidden}
.cue__l::after{content:"";position:absolute;inset:0;background:var(--carvao);
  animation:cue 2.2s var(--e-io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

@media (max-width:900px){.stage-on .stage .cue{display:none}}

@media (max-width:720px){
  /* a linha de construção não cabe numa linha só — quebra em vez de ser cortada */
  }

/* --------------------------------------------------  27. as três no canto -- */
/* A faixa entre o herói e a seção 02 foi eliminada em 23.08. As três empresas
   passaram para o CANTO INFERIOR DIREITO da tela amarela, pequenas: é cromagem,
   não seção. Mesma família do HUD e do medidor — mono 11px, rodapé de 26px,
   cor grafite, que é o que o site já usa sobre o amarelo.
   Os nomes vão escritos, não em logo: em carvão com opacidade, o que sobre o
   amarelo os assenta no peso do grafite. Como é texto e a cor sai do token,
   eles acompanham o pulso da abertura sozinhos — um jogo de PNGs não
   acompanharia. */

.stage__emp{display:none}
/* O bloco usa a MESMA MECÂNICA DO .shell — largura máxima, margem automática
   e recuo pelo --gut —, e não um `left:var(--gut)` solto. Isso não é
   preferência de estilo: com o left cru ele só coincidia com a headline
   enquanto a tela fosse mais estreita que o --maxw. Passando disso o .shell
   passa a centrar e o bloco não, e os dois se separam. Medido em 1920:
   "HOLDING AUDIOVISUAL" em 265px e "NOSSAS EMPRESAS" em 92px — 172px de
   desalinho, que ninguém vê em 1440 e salta em monitor grande.
   Repetindo a mecânica em vez de refazer a conta, os dois não têm como
   divergir de novo.

   justify-items:start alinha o rótulo pela BORDA ESQUERDA da fila — a
   etiqueta encosta no primeiro nome, não no último.

   À ESQUERDA e não à direita: o canto direito é da dica "role"
   (`.stage-on .stage .cue`), que usa exatamente os mesmos dois valores,
   right:var(--gut) e bottom:26px. No mesmo canto, um cobre o outro. */
.stage-on .stage__emp{display:grid;justify-items:start;gap:clamp(7px,.8vw,11px);
  position:absolute;left:0;right:0;bottom:26px;z-index:4;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gut)}

/* Mesmo padrão da etiqueta "Holding audiovisual" (.stage__tag): Lato Black,
   caixa alta, letter-spacing .2em, grafite. Não é mono — a família mono é do
   HUD e do medidor, que são leitura de instrumento; esta é etiqueta de marca. */
.stage__emp-l{font-size:var(--t-eti);font-weight:900;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grafite)}

/* O ponto médio separa os nomes — é o separador que o site já usa no texto.
   Mora num ::before do irmão, nunca dentro do link: assim não entra no nome
   acessível de nenhuma empresa, e desaparece sozinho se algum dia a lista
   ficar com um item só. A margem à direita repete o gap para o ponto ficar
   CENTRADO entre os dois nomes — sem ela ele encosta no nome seguinte. */
/* A tipografia mora no container, não no <a>: assim o ponto separador herda o
   mesmo tamanho dos nomes. Estando no <a>, ele herdava a fonte do body e saía
   maior que aquilo que separa. */
.stage__emp-m{--sep:clamp(9px,1vw,15px);
  display:flex;align-items:center;gap:var(--sep);
  font-size:calc(var(--t-eti) * 1.16);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase}
/* O <li> vira flex para o ponto ficar AO LADO do nome. O <a> é display:block
   (herdado de quando isto era um logo), e contra um bloco o ::before inline
   caía numa linha acima, sobre o nome, ocupando zero de largura na fila. */
.stage__emp-m li{display:flex;align-items:center}
.stage__emp-m li + li::before{content:"·";margin-right:var(--sep);
  line-height:1;color:var(--carvao);opacity:.38}
/* Um degrau acima do rótulo (que é --t-label, 0,715rem): aqui os nomes são o
   conteúdo e a etiqueta é a legenda, então a hierarquia se lê pelo tamanho.
   Caixa alta com espaçamento menor que o do rótulo — mesma família de cromagem
   do canto, sem competir com ele.
   nowrap porque "Allframe Filmes" quebrando em duas linhas desalinharia a fila,
   que é centrada pelo eixo vertical. */
.stage__emp-m a{display:block;opacity:.62;
  color:var(--carvao);white-space:nowrap;
  transition:opacity .4s var(--e-io),transform .5s var(--e-out)}
.stage__emp-m a:hover{opacity:1;transform:translateY(-2px)}

/* No celular a tela é estreita: o bloco vai para o meio do rodapé, mas
   CENTRADO COMO UNIDADE — left:50% mais translate, e não justify-items:center.
   Com justify-items o rótulo voltaria a centralizar sobre a fila em vez de
   encostar no primeiro nome. */
/* CENTRADO no celular e no iPad, alinhado à esquerda só na web. O corte em
   1024px é o iPad DEITADO — em retrato ele tem 768. Como o bloco agora é uma
   .shell, centrar é só trocar o justify-items: não precisa de left:50% nem de
   transform, e o recuo do --gut continua valendo nas bordas. */
@media (max-width:1024px){
  .stage-on .stage__emp{justify-items:center;text-align:center}
  .stage__emp-m{justify-content:center}
}

@media (max-width:620px){
  .stage-on .stage__emp{bottom:52px}
  /* O celular tem degrau PRÓPRIO, e não é preferência: com o tamanho do
     desktop a fila mede 423px numa tela de 375 e sai cortada 24px de cada
     lado. Os três nomes têm de caber numa linha — quebrando em duas, o ponto
     médio vira o primeiro caractere da segunda linha.
     O separador aperta junto: são quatro vãos na fila (dois `gap` e dois
     `margin-right`), então cada pixel tirado dele vale quatro. */
  .stage{--t-eti:clamp(.64rem,2.85vw,.8rem)}
  .stage__emp-m{--sep:clamp(3px,1.1vw,7px)}
}

/* ------------------------------------------------------------ 15. FAQ ----
   Acordeão em <details>/<summary> NATIVO. Não há JS nenhum aqui, e isso é
   escolha: o elemento já vem com teclado, com estado que o navegador conhece,
   e é anunciado por leitor de tela sem uma linha de aria. O `name="faq"` no
   HTML fecha o item anterior sozinho.

   O PAINEL NÃO ANIMA, de propósito. `<details>` não interpola altura sem
   `interpolate-size` + `::details-content`, que ainda não valem em todo
   navegador, e o truque de grid 0fr→1fr exigiria mais uma div de embrulho por
   pergunta. O que se move é só o sinal de mais virando xis — gesto suficiente
   e que funciona em qualquer lugar.

   O SINAL é feito de dois traços de 1px, não de um glifo tipográfico: "+" e
   "×" de fonte têm pesos ópticos diferentes e o giro de 45° denunciaria a
   troca. Dois traços girando são a mesma tinta o tempo todo. */
.faq{border-top:1px solid var(--rule);margin-top:clamp(30px,4.6vw,68px)}
.faq__i{border-bottom:1px solid var(--rule)}

.faq__q{list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(16px,2vw,32px);
  padding:clamp(17px,1.9vw,26px) 0;
  font-size:clamp(1.02rem,1.45vw,1.35rem);font-weight:300;line-height:1.32;
  color:var(--carvao);
  transition:color .4s var(--e-io)}
/* o Safari desenha um triângulo próprio, e ele ignora list-style */
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--grafite)}
.faq__i[open] .faq__q{color:var(--carvao)}

.faq__s{flex:none;position:relative;width:15px;height:15px;margin-top:.34em;
  transition:transform .45s var(--e-out)}
.faq__s::before,.faq__s::after{content:"";position:absolute;
  left:0;right:0;top:calc(50% - .5px);height:1px;background:currentColor}
.faq__s::after{transform:rotate(90deg)}
.faq__i[open] .faq__s{transform:rotate(135deg)}

/* 64ch é o limite de leitura confortável — a resposta não acompanha a largura
   do shell, que a 1440 daria mais de 120 caracteres por linha. */
.faq__r{padding-bottom:clamp(17px,1.9vw,26px);max-width:64ch}
.faq__r p{margin:0;font-size:var(--t-body);line-height:1.62;color:var(--grafite)}

/* o anel de foco é o do teclado, e tem de aparecer sobre areia */
.faq__q:focus-visible{outline:2px solid var(--carvao);outline-offset:4px;
  border-radius:var(--r)}

@media (max-width:620px){
  .faq__q{gap:14px;padding:15px 0}
  .faq__r{padding-bottom:15px}
}