/* ═══════════════════════════════════════════
   VOKA — sistema base
   Paleta travada no logo: tinta #111113 / papel #f2f2f2
   ═══════════════════════════════════════════ */

@view-transition{ navigation:auto; }

:root{
  --ink:    #111113;   /* tinta do logo — levemente azulada */
  --paper:  #f2f2f2;
  --breu:   #000000;   /* preto absoluto: o fundo do site inteiro */
  --ink-70: rgba(17,17,19,.70);
  --ink-45: rgba(17,17,19,.45);
  --ink-12: rgba(17,17,19,.12);
  --pap-70: rgba(242,242,242,.70);
  --pap-45: rgba(242,242,242,.45);

  /* ⚠️ A SEGUNDA cor do site. A paleta era travada no logo (breu + papel) e
     a única cor era a bandeira do Goiás no seletor de idioma. O Arthur
     abriu esta exceção em 27/08/2026, e ela tem um dono só: o nome do
     método. Não use `--laranja` em mais nada sem ele pedir. */
  --laranja: #e95228;

  /* ⚠️ A TERCEIRA cor, aberta por ele em 28/08/2026, também com um dono só:
     o pontinho de "online" da bolinha do chat (`.diag__ponto`). É o verde
     da bandeira do Brasil (#009B3A, que já está no SVG da .bandeira)
     levantado em valor para ler sobre o breu a 11px. Não use em mais nada. */
  --online: #00c853;

  /* Uma família só, como a referência: DM Sans. O contraste vem do peso
     (300 no display, 400–500 na interface), não de trocar de face. */
  --grotesk: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --pad: clamp(18px, 3.2vw, 46px);   /* margem interna da moldura */

  /* UM só tamanho para o texto de display das dobras: a capa, o estúdio e
     "o que fazemos". Os três usam este clamp inteiro, então são IDÊNTICOS em
     qualquer largura. Mexer aqui mexe nos três de uma vez — que é o ponto.

     Os dois extremos saíram de medição, e são o mínimo comum das três
     colunas (a mais apertada manda):
       piso 21px  — a 375 a capa tem razão 14.68 numa coluna de 339px, o que
                    trava o corpo em 23.1px. Com os 24px que estavam aqui
                    antes ela ENCHIA 104% e quebrava de verdade.
       teto 56px  — dois limites se somam aqui. A .capa__dizeres tem
                    max-width, então acima de ~1700px a coluna PARA de crescer
                    enquanto o vw continua (a 1920 com 66px a capa enchia 99%,
                    e num monitor maior quebrava); e a coluna esquerda da
                    grade das dobras perde o --dobra-gap, o que a 1920 levava
                    o título do estúdio a 93%.
     Com 21/56 o enchimento fica entre 82% e 87% nas três, de 375 a 1920. */
  --disp: clamp(21px, 3.45vw, 56px);

  /* GRADE PADRÃO DAS DOBRAS. A .faz e a dobra do estúdio usam esta mesma
     definição: rótulo em cima do título, os dois na coluna da esquerda,
     texto descritivo na direita. Mexer aqui mexe nas duas. */
  --dobra-gap: clamp(20px, 3vw, 56px);
  /* A coluna do título é MAIOR que a do texto. Não é estética: o corpo do
     texto diminuiu, e numa coluna de 50% ele voltaria a dar 70–84 caracteres
     por linha. Estreitando a coluna, a medida cai sem o texto parar antes da
     borda — ele continua terminando na direita da barra do topo. */
  --dobra-cols: minmax(0,1.15fr) minmax(0,.85fr);
  --dobra-rot: clamp(18px, 2.6vh, 34px);   /* rótulo → título */
  --ease: cubic-bezier(.16,1,.3,1);
  --cor:  cubic-bezier(.4,0,.5,1);   /* quase simétrica: segura a franja em cena */
}

*,*::before,*::after{ box-sizing:border-box; }
/* ⚠️ `overflow-x:clip`, NUNCA `hidden`, e no html — não no body.
   `hidden` faz do elemento um contêiner de rolagem, e com o body virando o
   scroller da página o Chrome DESISTE da view transition entre documentos:
   a navegação acontece sem animação nenhuma, em silêncio.
   Isso custou uma sessão inteira de depuração — o sintoma era "a transição
   simplesmente não dispara", com a regra @view-transition presente e válida
   no CSSOM dos dois lados. `clip` corta igual e não cria scroller. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth;
      background:var(--breu); overflow-x:clip; }
section[id]{ scroll-margin-top:clamp(70px,10vh,110px); }
/* O site é preto por padrão. --ink (o preto do logo, azulado) some da
   composição: sobre fundo escuro quem manda é --paper e seus alphas. */
body{
  margin:0; background:var(--breu); color:var(--paper);
  font-family:var(--grotesk); font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.menu-open{ overflow:hidden; height:100%; }
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--paper); color:var(--breu); }

/* ═══════════════════ TRANSIÇÃO ENTRE PÁGINAS ═══════════════════ */
/* View Transitions entre documentos. Uma linha liga tudo: o navegador tira
   um retrato da página que sai, outro da que entra, e anima os dois.
   O site é multipágina e estático — não tem roteador, não tem JS de
   navegação. Isto aqui é CSS puro.

   Onde o navegador não suportar, a regra é ignorada e a navegação é a de
   sempre. Não quebra nada, só não anima. */

/* A que sai vai PARA TRÁS e some; a que entra chega por cima, de um sopro
   maior que 1, e assenta. É por isso que a de entrada dura um pouco mais:
   ela precisa ainda estar chegando quando a outra já foi. */
@keyframes voka-sai   { to  { opacity:0; transform:scale(.965); } }
@keyframes voka-entra { from{ opacity:0; transform:scale(1.015); } }

::view-transition-old(root){ animation:voka-sai .42s var(--ease) both; }
::view-transition-new(root){ animation:voka-entra .52s var(--ease) both; }

/* ⚠️ Os dois retratos ficam sobrepostos durante a troca. Sem estas duas
   linhas o cruzamento borra: o blend padrão soma as camadas e o preto do
   site clareia no meio da transição. */
::view-transition-old(root),
::view-transition-new(root){
  mix-blend-mode:normal;
  backface-visibility:hidden;
}

/* ⚠️ O reset de prefers-reduced-motion lá embaixo usa `*`, e `*` NÃO alcança
   pseudo-elementos de view transition. Sem esta regra, quem pediu menos
   movimento continuaria recebendo o zoom. */
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none; opacity:1; transform:none; }
}

/* ═══════════════════ ENTRADA ═══════════════════ */
/* Um véu preto sobre tudo que dissolve no carregamento. Como o site já é
   preto, o que se vê é o conteúdo materializando junto — inclusive a barra,
   que fica por baixo dele. Some da composição de vez com visibility, senão
   sobra uma camada composta de tela cheia parada na página. */
body::before{
  content:''; position:fixed; inset:0; z-index:990; pointer-events:none;
  background:var(--breu); opacity:1;
  transition:opacity .8s var(--ease);
}
body.is-ready::before{
  opacity:0; visibility:hidden;
  transition:opacity .8s var(--ease), visibility 0s linear .8s;
}

/* Escada de entrada: o que NÃO é texto entra por fade + subida. O texto tem
   o reveal cromático e não passa por aqui. Cada peça tem sua vez. */
/* ⚠️ A BARRA NÃO PODE RECEBER `transform`.
   O `.topo::before` (a faixa de vidro) é `position:fixed`, e um ancestral com
   transform vira o bloco de contenção dos descendentes fixos: durante os
   1,1s da entrada a faixa passava a se posicionar pelo MENU e não pela
   janela, aparecendo encolhida dentro dele, com uma margem sem blur em cima,
   e só saltava para o lugar quando o transform terminava. Era isso que
   parecia "bug de carregamento".
   Solução: a barra entra só com opacidade, e quem sobe são os FILHOS dela. */
.topo{
  opacity:0;
  transition:opacity .9s var(--ease) var(--atraso,0s);
}
.topo > *{
  transform:translateY(var(--sobe-entra,-10px));
  transition:transform 1.1s var(--ease) var(--atraso,0s);
}
.capa__redes{
  opacity:0; transform:translateY(var(--sobe-entra,14px));
  transition:opacity .9s var(--ease) var(--atraso,0s),
             transform 1.1s var(--ease) var(--atraso,0s);
}
body.is-ready .topo{ opacity:1; }
body.is-ready .topo > *{ transform:none; }
body.is-ready .capa__redes{ opacity:1; transform:none; }

.topo       { --atraso:.15s; --sobe-entra:-10px; }
.capa__redes{ --atraso:.95s; }
/* O CTA fica fora do bloco acima: ele já tem transition própria para o hover,
   e uma declaração de transition substitui a outra por inteiro — as duas
   listas precisam morar juntas. Ver .capa__acao. */

/* ═══════════════════ CAPA ═══════════════════ */
/* Preta, sangrando de ponta a ponta. Dizeres à esquerda, redes à direita. */
.capa{
  position:relative;
  min-height:100svh; overflow:hidden;
  background:var(--breu); color:var(--paper);
  display:grid; align-content:center;
}

/* ── barra fixa ──
   Branca e simples. O negativo por mix-blend-mode saiu: exigia `sticky` mais
   margem negativa calculada no JS, e sobre as imagens de meio-tom dos cards
   o texto ficava ilegível. Num site todo preto, branco fixo resolve.
   O único efeito que ficou é o colapso do logo ao rolar (body.rolou). */
.topo{
  position:fixed; inset:var(--pad) var(--pad) auto; z-index:900;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:clamp(16px,3vw,48px);
  font-size:clamp(12px,.92vw,14.5px);
  color:var(--paper);
}
/* Faixa de vidro atrás da barra: desfoca o que passa por baixo e dissolve
   para baixo, sem borda dura. É `position:fixed` (e não absolute) para
   sangrar de ponta a ponta — a barra em si é recuada pelo --pad.
   O gradiente escuro entra junto: sobre imagem clara o blur sozinho não
   garante contraste. */
.topo::before{
  content:''; position:fixed; left:0; right:0; top:0; z-index:-1;
  height:calc(var(--pad) * 1.35 + clamp(34px,3.8vw,52px));
  pointer-events:none;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  background:linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,0));
  /* a máscara começa a dissolver cedo (30%) para a saída ser longa e macia,
     em vez de terminar em degrau */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 30%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 30%, transparent 100%);
}

.topo__marca{ display:flex; align-items:center; gap:.85em; color:inherit; }
.topo__marca .wm{
  width:clamp(52px,4.6vw,74px); height:auto; display:block;
  transition:width .45s var(--ease);
}
/* Ao rolar, o descritor colapsa e vira uma bolinha, e o wordmark encolhe.
   max-width em ch anima; width:auto não animaria. */
.topo__desc{
  font-size:1em; line-height:1; opacity:.7; white-space:nowrap;
  max-width:14ch; overflow:hidden;
  transition:max-width .45s var(--ease), opacity .3s var(--ease),
             margin-right .45s var(--ease);
}
.topo__ponto{
  width:0; height:7px; border-radius:99px; background:currentColor; flex:none;
  opacity:0;
  transition:width .45s var(--ease), opacity .3s var(--ease) .12s;
}
body.rolou .topo__marca .wm{ width:clamp(40px,3.4vw,56px); }
body.rolou .topo__desc{ max-width:0; opacity:0; margin-right:-.85em; }
body.rolou .topo__ponto{ width:7px; opacity:.7; }

.topo__nav{ display:flex; gap:clamp(14px,1.7vw,30px); padding-top:.35em; }
/* Os itens em repouso ficam a 70%, e só o atual (e o que está sob o mouse)
   vai a papel cheio. Sem esse degrau o tracinho do ativo não tem o que
   marcar: a barra inteira já estava em papel cheio. */
.topo__nav a{
  position:relative; padding:2px 0;
  color:var(--pap-70); transition:color .3s var(--ease);
}
.topo__nav a:hover{ color:var(--paper); }
.topo__nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.topo__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ── onde estamos ──
   O tracinho que marca a seção/página atual. É o MESMO `::after` do hover,
   só que encolhido no meio: assim o hover apenas o estica até a linha
   inteira, em vez de aparecer um segundo traço empilhado no primeiro.
   Marca só o item ATUAL; passar o mouse em outro não apaga este.

   ⚠️ Ordem importa. `.topo__nav a[aria-current]::after` e
   `.topo__nav a:hover::after` têm a MESMA especificidade (0,2,2), então a
   regra de baixo vence. O ativo vem depois do hover, e por isso precisa da
   sua própria regra de hover logo em seguida, senão passar o mouse no item
   ativo não faria nada. */
.topo__nav a[aria-current]{ color:var(--paper); }
.topo__nav a[aria-current]::after{
  transform:scaleX(.34); transform-origin:center; opacity:.85;
}
.topo__nav a[aria-current]:hover::after{
  transform:scaleX(1); transform-origin:center; opacity:1;
}

/* No menu de mão (mobile) o tracinho não cabe: lá o item atual é marcado
   pelo número, que fica em papel cheio em vez de 45%. */
.menu a[aria-current] em{ color:var(--paper); }

/* ── seletor de idioma ── */
.idiomas{ display:flex; align-items:center; gap:.45em; padding-top:.35em; }
.idiomas span{ opacity:.35; }
.idiomas button{
  background:none; border:0; padding:2px 0; margin:0;
  font:inherit; color:inherit; cursor:pointer;
  opacity:.45; transition:opacity .3s var(--ease);
}
.idiomas button:hover{ opacity:.8; }
.idiomas button.ativo{ opacity:1; text-decoration:underline; text-underline-offset:4px; }

/* No mobile o seletor vive dentro do menu, não na barra */
.idiomas--menu{
  display:none; margin-top:clamp(24px,4vh,46px);
  font-size:clamp(12px,.92vw,15px); font-weight:500;
}

.topo__burger{
  display:none; align-items:center; gap:9px; background:none; border:0; padding:0;
  font:inherit; color:inherit; cursor:pointer;
}
.topo__burger i{ display:block; width:18px; height:1.5px; background:currentColor;
  transition:transform .35s var(--ease); }
body.menu-open .topo__burger i:nth-of-type(1){ transform:translateX(-9.75px) rotate(15deg); }
body.menu-open .topo__burger i:nth-of-type(2){ transform:translateX(-9.75px) rotate(-15deg); }

/* ── dizeres ── */
/* ── o filme da capa ──
   Dois vídeos empilhados que se revezam. O de baixo já fica carregado quando
   o de cima está tocando, então a troca não engasga. */
.capa__filme{ position:absolute; inset:0; z-index:0; }
.capa__v{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity .9s var(--ease);
  pointer-events:none;
}
.capa__v--on{ opacity:1; }
/* ⚠️ Enquadramento MEDIDO, não chutado. O centro dos tons de pele cai em
   65,2% da largura no vídeo da Kamila e em 56,7% no do Zé: ele nascia mais
   à esquerda. A capa corta na horizontal (o quadro é 1.6:1 e o vídeo
   1.778:1), então dá para deslocar — mas o corte sozinho não tinha curso
   suficiente, por isso vai junto um leve `scale`, que aumenta a margem de
   corte e o quanto dá para andar. Assim os dois pousam no mesmo lugar. */
.capa__v[data-fonte$="ze.mp4"]{
  object-position:25% 50%;
  transform:scale(1.12);
}

/* ⚠️ O véu não é enfeite: o título da capa é o maior texto do site e fica
   por cima do vídeo. Sem ele, papel sobre a poltrona clara da Kamila some.
   Mais forte à esquerda, que é onde o texto vive. */
.capa__veu{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.78) 38%,
                           rgba(0,0,0,.42) 68%, rgba(0,0,0,.30) 100%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 30%,
                            rgba(0,0,0,0) 62%, rgba(0,0,0,.60) 100%);
}

.capa__dizeres{
  position:relative; z-index:2;
  max-width:min(64%, 980px);
  padding:calc(var(--pad) + clamp(70px,9vw,120px)) clamp(20px,3vw,54px)
          calc(var(--pad) + clamp(18px,3vh,40px)) var(--pad);
  display:grid; gap:clamp(26px,4.5vh,54px);
}
.capa__titulo{
  margin:0; font-family:var(--display); font-weight:300;
  /* Tamanho vem do --disp, junto com o estúdio e a .faz. A razão medida
     aqui é 13.21 (PT) / 11.44 (EN) — é a MAIOR das três, então é esta coluna
     que define os dois extremos do --disp. */
  font-size:var(--disp); line-height:1.08; letter-spacing:-.02em;
}
.capa__titulo em{ font-style:italic; font-weight:400; }

.capa__acao{
  display:inline-flex; align-items:center; gap:.6em; justify-self:start;
  border:1px solid var(--pap-45); border-radius:999px;
  padding:.85em 1.5em;
  font-size:clamp(13px,1.02vw,16px); font-weight:500;
  /* entrada + hover na MESMA lista: uma declaração de transition anula a
     outra por completo, não se somam */
  opacity:0; transform:translateY(14px);
  transition:opacity .9s var(--ease) .72s, transform 1.1s var(--ease) .72s,
             background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease);
}
body.is-ready .capa__acao{ opacity:1; transform:none; }
.capa__acao span{ transition:transform .35s var(--ease); }
.capa__acao:hover{ background:var(--paper); color:var(--breu); border-color:var(--paper); }
.capa__acao:hover span{ transform:translate(2px,-2px); }

.capa__nota{
  margin:0; max-width:38ch; color:var(--pap-70);
  font-size:clamp(13px,1.02vw,16px); line-height:1.45;
}

/* ── redes na borda direita ── */
.capa__redes{
  position:absolute; right:var(--pad); top:50%; transform:translateY(-50%);
  z-index:3; list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(14px,1.6vw,22px); justify-items:center;
  font-size:clamp(11px,.85vw,13px); font-weight:500; color:var(--pap-45);
}
.capa__redes a{ transition:color .3s var(--ease); }
.capa__redes a:hover{ color:var(--paper); }

/* ── menu ── */
.menu{ position:fixed; inset:0; z-index:850; background:var(--breu); color:var(--paper);
  display:grid; align-content:center; padding:var(--pad);
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease); }
.menu[hidden]{ display:none; }
body.menu-open .menu{ clip-path:inset(0 0 0 0); }
.menu__list{ display:grid; gap:clamp(4px,1vh,14px); }
.menu__list a{ font-family:var(--display); font-weight:300; font-size:clamp(38px,11vw,86px);
  line-height:1; display:flex; align-items:baseline; gap:.4em; }
.menu__list em{ font-style:normal; font-size:.16em; font-weight:700; letter-spacing:.14em;
  font-family:var(--grotesk); color:var(--pap-45); }
.menu__foot{ margin:clamp(28px,5vh,60px) 0 0; color:var(--pap-45); font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; font-weight:700; }

/* Bandeira: a única cor do site. Vai em SVG e não em emoji porque o Windows
   não desenha as bandeiras de indicador regional — mostraria "BR". */
.bandeira{ display:inline-block; width:1.35em; vertical-align:-.18em; margin:0 .12em; }
.bandeira svg{ display:block; width:100%; height:auto; }

/* ═══════════════════ TRABALHOS ═══════════════════ */
.obras{ padding:clamp(60px,10vh,120px) 0 clamp(50px,8vh,100px); }
.obras__titulo{
  margin:0 var(--pad) clamp(26px,4vh,48px);
  font-family:var(--display); font-weight:300;
  font-size:clamp(28px,3.4vw,64px); line-height:1.05; letter-spacing:-.02em;
}

/* Trilho: rolagem horizontal nativa (dedo, trackpad, teclado) + arrasto por
   ponteiro no JS. O snap deixa cada card parar alinhado. */
.obras__trilho{
  /* Quantos cartões cabem na tela, e o pedacinho do próximo que fica
     aparecendo para dizer que a fila continua. A largura do cartão sai
     DESTA conta, não de um `vw` chutado: assim o quarto cartão espia sempre
     o mesmo tanto, em qualquer largura. */
  --obra-gap: clamp(14px,1.6vw,28px);
  --obra-espia: clamp(26px,3.2vw,64px);   /* o que se VÊ do próximo, sem o gap */
  --obra-visiveis: 1;

  display:flex; gap:var(--obra-gap);
  padding-inline:var(--pad);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  /* Sem isto o snap alinha o card à borda do padding-box e ele gruda em 0,
     ignorando o padding-inline — o primeiro card ficava desalinhado do
     título. scroll-padding move a linha de encaixe para dentro da margem. */
  scroll-padding-inline:var(--pad);
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
}
.obras__trilho::-webkit-scrollbar{ display:none; }
/* nada de seleção de texto nem fantasma de arrasto enquanto se puxa o trilho */
.obras__trilho{ user-select:none; -webkit-user-select:none; }
.obras__trilho img{ -webkit-user-drag:none; user-drag:none; }
.obras__trilho.arrastando{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.obras__trilho:focus-visible{ outline:2px solid var(--pap-45); outline-offset:6px; }

/* Quantos cabem por vez. Os cortes saem da largura em que o cartão fica
   estreito demais para o nome e a descrição respirarem, não de um breakpoint
   redondo qualquer. */
@media (min-width:720px){  .obras__trilho{ --obra-visiveis:2; } }
@media (min-width:1080px){ .obras__trilho{ --obra-visiveis:3; } }

a.obra{ text-decoration:none; }
.obra{
  position:relative;
  /* `100%` num flex-basis resolve contra a largura VISÍVEL do trilho (a
     content box), não contra a largura rolável. É o que faz a conta fechar
     sozinha. Era `clamp(260px,44vw,880px)`, que a 1440 dava 634px e só
     deixava dois cartões na tela. */
  /* ⚠️ São `n` gaps, não `n-1`: os n-1 gaps ENTRE os cartões visíveis, mais o
     gap antes do que espia. Com `n-1` a conta comia o gap do quarto cartão e
     o pedacinho aparecia com metade do tamanho pedido (23px em vez de 46). */
  flex:0 0 calc(
    (100% - var(--obra-visiveis) * var(--obra-gap) - var(--obra-espia))
    / var(--obra-visiveis)
  );
  aspect-ratio:5/4; scroll-snap-align:start;
  border-radius:clamp(4px,.4vw,8px); overflow:hidden;
  background:#141416; color:var(--paper);
}
/* A escala fica na IMAGEM, nunca no card.
   No card ela crescia a caixa inteira: o primeiro card saía ~21px para a
   esquerda (metade do excesso) e desalinhava do título. Aqui a imagem cresce
   dentro do overflow:hidden — vira um zoom limpo, sem mexer no layout.
   Nunca desce abaixo de 1.02, senão aparece borda. */
.obra__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(var(--escala,1.02));
  transition:opacity .8s var(--ease);
}
.obra__img.pronta{ opacity:1; }

/* ── cartão de marca ──
   O cartão do Rango não recebe a silhueta procedural: mostra a marca do
   cliente sobre a cor dela. É o único caso real do carrossel, e uma figura
   genérica ali diria menos que o logo.

   ⚠️ Este laranja é do CLIENTE, não da VOKA. Não vira token da paleta e não
   sai deste cartão. A paleta do site continua travada no logo da VOKA (breu
   e papel), mais o laranja do Nucleos. */
.obra--marca{ background:#F3530C; }

/* ⚠️ Centrada na FAIXA LIVRE, não no cartão.
   Com `top:50%` a marca ficava no centro geométrico, mas o pé do cartão (nome
   + descrição) ocupa muito mais altura que o rótulo do topo. Resultado: sobra
   espaço em cima e a marca encosta embaixo. Medido a 1120, quando o cartão
   passou a 315px: folga de **-1px**, ou seja, encostando.

   As insets recortam as zonas do rótulo e do pé, e o `margin:auto` centra no
   que sobra. `max-width` (e não `width`) porque quem manda no tamanho passa a
   ser o menor entre a largura pedida e a altura disponível. */
.obra__marca{
  position:absolute; z-index:1;
  top:clamp(40px, 7%, 70px);        /* zona do rótulo */
  bottom:clamp(64px, 22%, 110px);   /* zona do pé, no pior caso (nome + linha) */
  left:0; right:0; margin:auto;
  max-width:36%; max-height:100%;
  /* `contain` e não `cover`: a marca não pode ser cortada nem esticada. */
  object-fit:contain;
}
/* No telefone o cartão fica estreito e a marca cede um pouco mais. */
@media (max-width:640px){ .obra__marca{ max-width:32%; } }

/* cantinho dobrado, como na referência */
.obra__dobra{
  position:absolute; top:0; right:0; z-index:2;
  /* Era clamp(26px,3vw,56px). Com três cartões na tela em vez de dois, o
     cartão caiu de 634px para 406px a 1440 e a dobra passou a pesar demais
     no canto. */
  width:clamp(16px,1.9vw,34px); aspect-ratio:1;
  background:var(--paper);
  clip-path:polygon(100% 0, 100% 100%, 0 0);
}

.obra__disc{
  position:absolute; top:clamp(14px,1.6vw,26px); left:clamp(14px,1.6vw,26px);
  right:clamp(50px,6vw,90px); z-index:2; margin:0;
  font-size:clamp(9px,.68vw,11px); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
}
.obra__pe{
  position:absolute; left:clamp(14px,1.6vw,26px); right:clamp(14px,1.6vw,26px);
  bottom:clamp(14px,2vw,30px); z-index:2;
}
.obra__pe h3{
  margin:0 0 .35em; font-family:var(--display); font-weight:300;
  font-size:clamp(20px,2.2vw,42px); line-height:1; letter-spacing:-.02em;
}
.obra__pe p{ margin:0; font-size:clamp(12px,.95vw,16px); color:var(--pap-70); }
/* véu para o texto não brigar com a imagem */
.obra::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 26%,
                                     rgba(0,0,0,0) 52%, rgba(0,0,0,.72) 100%);
}

/* ── cartão de marca CLARO ──
   Um cartão claro inverte tudo. Texto papel sobre o creme #EFE8D8 dá
   **1.09:1**: some por completo.

   ⚠️ A saída NÃO é escurecer o véu. Tentei primeiro subir o preto do topo
   para 62%, e funciona para o contraste, mas suja o creme: a cor da marca
   do cliente vira cinza nas duas pontas do cartão. Num cartão que existe
   justamente para mostrar a marca dela, isso é pior que o problema.

   Aqui o véu SAI e o texto fica escuro, no `#242933` do próprio logo. Medido:
   11.84:1, contra 4.16:1 que o véu escuro dava no rótulo. E o creme fica
   limpo de ponta a ponta.

   ⚠️ Esta regra precisa vir DEPOIS de `.obra::after`. As duas têm a mesma
   especificidade (0,1,0 + pseudo-elemento), então quem ganha é a de baixo.
   Na primeira tentativa ela ficou acima e não teve efeito nenhum: o alfa
   medido continuou 0.5. Mesma armadilha do tracinho da nav. */
/* Bhumi: cartão escuro, então o véu padrão do `.obra::after` já resolve o
   contraste (papel sobre #2C1B15 dá 14,7:1, medido). */
.obra--bhumi{ background:#2C1B15; }
/* ⚠️ A marca do Bhumi é mais ALTA que larga (razão 0,927, contra ~1,0 das
   outras três). Com a mesma largura de 36% ela ficava 157px de altura contra
   143 a 146 das vizinhas, e saltava aos olhos na fileira. O que iguala é a
   ALTURA, não a largura: 33,1% de largura devolve ~145px, igual às outras.
   Se trocar o arquivo do logo, remeça: o valor depende da razão dele. */
.obra--bhumi .obra__marca{ max-width:33.1%; }
/* Ian Carvalho ARQ: também escuro, papel sobre #4A3F35 dá 9,1:1 (medido). */
.obra--ian{ background:#4A3F35; }

.obra--clara{ background:#EFE8D8; color:#242933; }
.obra--clara::after{ background:none; }
/* o cantinho dobrado é papel: sobre creme sumiria */
.obra--clara .obra__dobra{ background:#242933; }
.obra--clara .obra__pe p{ color:rgba(36,41,51,.72); }

.obras__pontos{
  display:flex; justify-content:center; align-items:center; gap:10px;
  margin-top:clamp(28px,4.5vh,52px);
}
.obras__pontos i{
  display:block; width:9px; height:9px; border-radius:99px;
  background:rgba(242,242,242,.28);
  transition:width .35s var(--ease), background .35s var(--ease);
}
.obras__pontos i.ativo{ width:32px; background:var(--paper); }

@media (max-width:760px){
  .obra{ flex-basis:min(78vw,420px); }
}

/* ═══════════════════ O ESTÚDIO ═══════════════════ */
/* Grade padrão das dobras — a mesma da .faz:

     (O ESTÚDIO)           |  Marcas que vivem nas pessoas.
                           |
     Transformamos a       |  Desde 2020, a VOKA é um estúdio…
     visão de fundadores…  |
                           |  Nosso trabalho parte de um método…
                           |
                           |  Conheça o estúdio →

   O rótulo e o título dividem a coluna 1 (linhas 1 e 2); o corpo ocupa a
   coluna 2 inteira, começando na linha 1. */
.estudio{
  /* SEM max-width. A barra do topo e a seção de trabalhos vão de ponta a
     ponta com só o --pad, e é esse o alinhamento do site inteiro. Com um teto
     centrado, a 1920 esta dobra ficava 172px para dentro da página dos dois
     lados. Ver "Largura" no README. */
  padding:clamp(80px,14vh,170px) var(--pad);
}
.estudio__grade{
  display:grid;
  grid-template-columns:var(--dobra-cols);
  gap:0 var(--dobra-gap);
  border-top:1px solid rgba(242,242,242,.14);
  padding-top:clamp(20px,3vh,34px);
}
.estudio__rot{
  grid-column:1; grid-row:1;
  margin:0 0 var(--dobra-rot);
  font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
.estudio__dec{
  grid-column:1; grid-row:2; align-self:start;
  margin:0;
  font-family:var(--display); font-weight:300;
  /* Tamanho vem do --disp. Razão medida: ver README. */
  font-size:var(--disp); line-height:1.1; letter-spacing:-.025em;
}
.estudio__corpo{
  grid-column:2; grid-row:1 / span 2;
}
.estudio__corpo p{
  /* SEM max-width: o corpo vai até a borda da página, e a direita dele bate
     com a direita da barra do topo. É o alinhamento do site — parar antes
     deixava um vão morto e lia como texto cortado.
     Quem controla a medida é o CORPO DO TEXTO: 1.12vw dava ~80 caracteres
     por linha nesta coluna; com 1.45vw fica em ~62, o mesmo teto das páginas
     legais. O teto de 28px é só para o vw não disparar.
     ⚠️ Acima de ~2000px a medida volta a crescer, porque a página não tem
     max-width nenhum. É consequência aceita do alinhamento. */
  margin:0 0 clamp(16px,2.2vh,26px);
  font-size:clamp(14px,1.2vw,21px); line-height:1.6; color:var(--pap-70);
}
/* O lema abre o corpo em branco cheio — é a única linha da dobra em --paper.
   Especificidade (0,2,0) para ganhar de `.estudio__corpo p` (0,1,1); o CSS
   deste site não tem !important e não é aqui que vai começar. */
.estudio__corpo .estudio__lema{
  margin:0 0 clamp(24px,3.4vh,40px);
  color:var(--paper);
}
.estudio__acao{
  display:inline-block; margin-top:clamp(6px,1.4vh,16px);
  color:var(--paper); text-decoration:none;
  font-size:clamp(14px,1.2vw,21px); line-height:1.6;
  border-bottom:1px solid var(--pap-45);
  transition:border-color .35s var(--ease);
}
.estudio__acao span{
  display:inline-block; margin-left:.35em;
  transition:transform .35s var(--ease);
}
.estudio__acao:hover{ border-bottom-color:var(--paper); }
.estudio__acao:hover span{ transform:translateX(3px); }

/* O --rd do JS é índice global e aqui já passou dos cinco cards do
   carrossel. Especificidade (0,1,1) ganha do [data-rise] (0,1,0). */
.estudio__corpo > *:nth-child(1){ transition-delay:0s; }
.estudio__corpo > *:nth-child(2){ transition-delay:.08s; }
.estudio__corpo > *:nth-child(3){ transition-delay:.16s; }
.estudio__corpo > *:nth-child(4){ transition-delay:.24s; }

/* ═══════════════════ O QUE NOS DIFERENCIA ═══════════════════ */
/* Fila de QUATRO cartões de tipos diferentes, fiel ao print: imagem, texto,
   um invertido com o número, e a lista. Não são quatro cartões iguais — a
   variação entre eles é o que a referência faz, e é o que dá o ritmo.
   Vem depois das especialidades, fechando a home. */
.difer{ padding:0 var(--pad) clamp(90px,17vh,200px); }

/* barra do print: rótulo à esquerda, link à direita */
.difer__barra{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  border-top:1px solid rgba(242,242,242,.14);
  padding-top:clamp(20px,3vh,34px);
  margin-bottom:clamp(22px,3.4vh,42px);
}
.difer__rot{
  margin:0; font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
.difer__acao{
  color:var(--paper); text-decoration:none; flex:none;
  font-size:clamp(13px,.96vw,16px);
  border-bottom:1px solid var(--pap-45);
  transition:border-color .35s var(--ease);
}
.difer__acao span{ display:inline-block; margin-left:.3em;
  transition:transform .35s var(--ease); }
.difer__acao:hover{ border-bottom-color:var(--paper); }
.difer__acao:hover span{ transform:translateX(3px); }

.difer__fila{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,20px);
  align-items:stretch;
}

/* ── o cartão base ── */
.dcard{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:clamp(300px,32vw,440px);
  padding:clamp(22px,1.9vw,34px);
  background:#141416; border:1px solid rgba(242,242,242,.10);
  border-radius:clamp(8px,.85vw,16px);
}
.dcard__txt{
  margin:0; font-size:clamp(13px,.96vw,16px); line-height:1.55;
  color:var(--pap-70);
}
/* o pé de cada cartão vem depois de um fio, como no print */
.dcard__pe{
  margin:clamp(20px,3vh,34px) 0 0;
  padding-top:clamp(16px,2.4vh,26px);
  border-top:1px solid rgba(242,242,242,.14);
  font-size:clamp(13px,.96vw,16px); line-height:1.5; color:var(--paper);
}

/* ── 1: o cartão-imagem ── */
.dcard--img{ padding:0; }
.dcard__img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; opacity:.5;
}
.dcard--img::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 46%,
                                     rgba(0,0,0,.66) 100%);
}
.dcard__dec{
  position:relative; z-index:2; margin:0;
  padding:clamp(22px,1.9vw,34px);
  font-family:var(--display); font-weight:300;
  font-size:clamp(19px,1.6vw,29px); line-height:1.15; letter-spacing:-.02em;
}
.dcard__dec em{ font-style:italic; font-weight:400; }

/* ── 3: o invertido ──
   ⚠️ É o ÚNICO bloco de papel do site inteiro. No print um dos quatro
   cartões é invertido; como a nossa página é preta, o invertido é o claro.
   Continua dentro da paleta travada: --paper de fundo, --breu de tinta. */
.dcard--inverso{
  background:var(--paper); border-color:var(--paper); color:var(--breu);
}
.dcard--inverso .dcard__rot{
  margin:0; font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:rgba(17,17,19,.45);
}
.dcard__num{
  margin:auto 0 0; font-family:var(--display); font-weight:300;
  font-size:clamp(76px,8vw,150px); line-height:.9; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.dcard__numRot{
  margin:.2em 0 0; font-size:clamp(13px,.96vw,16px);
  color:rgba(17,17,19,.45);
}
.dcard__link{
  margin-top:clamp(20px,3vh,34px);
  color:var(--breu); text-decoration:none;
  font-size:clamp(13px,.96vw,16px);
  border-bottom:1px solid rgba(17,17,19,.45);
  align-self:flex-start;
  transition:border-color .35s var(--ease);
}
.dcard__link span{ display:inline-block; margin-left:.3em;
  transition:transform .35s var(--ease); }
.dcard__link:hover{ border-bottom-color:var(--breu); }
.dcard__link:hover span{ transform:translateX(3px); }

/* ── 4: a lista de critérios ── */
.dcard__lista{ list-style:none; margin:0; padding:0; }
.dcard__lista li{
  display:flex; gap:clamp(10px,1vw,16px);
  padding:clamp(10px,1.4vh,16px) 0;
  border-bottom:1px solid rgba(242,242,242,.14);
}
.dcard__lista li:first-child{ padding-top:0; }
.dcard__lista li:last-child{ border-bottom:0; }
.dcard__lista li span:first-child{
  flex:none; font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; color:var(--pap-45);
  font-variant-numeric:tabular-nums; padding-top:.25em;
}
.dcard__lista li span:last-child{
  font-size:clamp(13px,.96vw,16px); line-height:1.45; color:var(--pap-70);
}

.difer__fila .dcard:nth-child(1){ transition-delay:0s; }
.difer__fila .dcard:nth-child(2){ transition-delay:.08s; }
.difer__fila .dcard:nth-child(3){ transition-delay:.16s; }
.difer__fila .dcard:nth-child(4){ transition-delay:.24s; }

@media (max-width:1080px){
  .difer__fila{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .difer__fila{ grid-template-columns:1fr; }
  .dcard{ min-height:0; }
  .dcard--img{ min-height:clamp(240px,60vw,320px); }
}

/* ═══════════════════ O QUE FAZEMOS ═══════════════════ */
/* Mesma grade da dobra do estúdio: rótulo em cima do título, os dois na
   coluna da esquerda. A coluna 2 fica vazia aqui — esta dobra não tem texto
   descritivo — mas a medida do título é a mesma, e é isso que padroniza. */
.faz{
  display:grid;
  grid-template-columns:var(--dobra-cols);
  gap:0 var(--dobra-gap);
  /* O respiro de baixo é MENOR que o de cima de propósito: a .faz abre a
     dobra do método e as etapas fecham. Os dois blocos são uma coisa só. */
  /* SEM max-width — ver .estudio. */
  padding:clamp(90px,17vh,200px) var(--pad) clamp(46px,8vh,96px);
}
.faz__rot{
  grid-column:1; grid-row:1;
  margin:0 0 var(--dobra-rot);
  font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
.faz__frase{
  grid-column:1; grid-row:2; align-self:start;
  margin:0; font-family:var(--display); font-weight:300;
  /* Estava em 7.4vw — mais que o DOBRO da capa e do estúdio, e destoava de
     tudo. Agora entra na mesma escala (--disp). Razão medida: 10.11 (PT).
     A medida veio junto: a coluna da .faz tem ~1150px a 1360, e nesse
     tamanho a frase encheria 41% dela e leria como texto perdido. O
     max-width em `em` amarra a medida ao próprio corpo, então ela acompanha
     sozinha se o --disp mudar. */
  font-size:var(--disp); line-height:1.08; letter-spacing:-.02em;
  max-width:13.1em;
}
.faz__frase em{ font-style:italic; font-weight:400; }

/* ═══════════════════ PROCESSO — AS QUATRO ETAPAS ═══════════════════ */
/* Molde do "Our Process" do Destello, medido no site deles a 1600px:
   duas metades, número gigante grudado na esquerda, etapas passando na
   direita, ~980px de rolagem por etapa.
   As colunas usam os MESMOS tokens da grade das dobras (--dobra-gap), para
   o trilho da direita cair no mesmo lugar da .faz e da dobra do estúdio. */
.etapas{
  display:grid; grid-template-columns:var(--dobra-cols);
  gap:0 var(--dobra-gap);
  padding:0 var(--pad) clamp(90px,17vh,200px);
}

/* ── contador odômetro ──
   Dois cilindros de dígitos dentro de um quadro de UMA célula com
   overflow:hidden. Trocar de etapa translada o cilindro das unidades em
   -1 célula, e a transição de .85s faz o giro de relógio. O --passo vem do
   JS (bloco 7 do main.js). */
.etapas__cont{
  --cel:1.06em;
  grid-column:1;
  position:sticky; top:calc(50vh - var(--cel) / 2); align-self:start;
  display:flex; height:var(--cel); overflow:hidden;
  font-family:var(--display); font-weight:300; line-height:1;
  font-size:clamp(96px,15vw,300px); letter-spacing:-.03em;
  /* ⚠️ sem tabular-nums o "1" é mais estreito que os outros dígitos e o
     número inteiro pula de largura ao girar. */
  font-variant-numeric:tabular-nums;
}
.cont__col{
  display:flex; flex-direction:column; flex:none;
  transform:translateY(calc(var(--passo,0) * var(--cel) * -1));
  transition:transform .85s var(--ease);
}
.cont__col i{
  font-style:normal; height:var(--cel);
  display:flex; align-items:center; justify-content:center;
}

/* ── a coluna das etapas ── */
.etapas__lado{ grid-column:2; }
.etapas__sub{
  margin:0 0 clamp(20px,3vh,34px);
  padding-top:clamp(20px,3vh,34px);
  border-top:1px solid rgba(242,242,242,.14);
  font-family:var(--display); font-weight:400;
  font-size:clamp(17px,1.5vw,26px); line-height:1.2; letter-spacing:-.01em;
}
.etapas__sub sup{ font-size:.55em; letter-spacing:0; }

.etapas__lista{ list-style:none; margin:0; padding:0; }
/* Porta para metodo.html. Mesmo fio da .estudio__acao: a linha existe e
   RECOLHE no hover, em vez de aparecer. */
.etapas__acao{
  display:inline-block; position:relative; margin-top:clamp(26px,4vh,52px);
  padding:2px 0; font-size:clamp(13px,1.05vw,17px);
}
.etapas__acao::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform-origin:right;
  transition:transform .4s var(--ease);
}
.etapas__acao:hover::after{ transform:scaleX(0); transform-origin:left; }
.etapa{
  min-height:78vh; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(30px,6vh,70px) 0;
  border-top:1px solid rgba(242,242,242,.14);
}
.etapa:first-child{ border-top:0; }   /* o fio do .etapas__sub já divide aqui */
.etapa__num{ display:none; }          /* no desktop quem numera é o odômetro */
.etapa__icone{
  display:block; width:clamp(20px,1.7vw,26px); height:auto;
  margin:0 0 clamp(12px,1.6vh,20px);
  color:var(--pap-70);
  overflow:visible;   /* a seta da 04 encosta na borda do viewBox */
}
.etapa__nome{
  margin:0; font-family:var(--display); font-weight:300;
  font-size:clamp(21px,3.1vw,52px); line-height:1.05; letter-spacing:-.02em;
}
.etapa__txt{
  /* Mesma escala do corpo da dobra do estúdio. O corpo acompanha a COLUNA:
     com 1.12vw esta coluna dava 85 caracteres por linha a 1920. */
  margin:clamp(14px,2vh,24px) 0 0;
  font-size:clamp(14px,1.2vw,21px); line-height:1.6; color:var(--pap-70);
}
/* O eco é a conclusão da etapa — a linha solta depois do parágrafo. Sobe
   para o branco cheio, como o lema da dobra do estúdio. */
.etapa__eco{
  margin:clamp(14px,2vh,24px) 0 0;
  font-size:clamp(14px,1.2vw,21px); line-height:1.6; color:var(--paper);
}
.etapa__fig{ margin:clamp(26px,4.5vh,52px) 0 0; }
.etapa__fig img{
  display:block; width:100%; height:clamp(180px,30vh,340px);
  object-fit:cover; border-radius:clamp(8px,.85vw,16px);
}
/* O --rd que o JS distribui é índice GLOBAL do documento e aqui já chegou no
   teto (os cinco cards do carrossel vêm antes). Especificidade (0,2,0). */
.etapa .etapa__txt{ transition-delay:.06s; }
.etapa .etapa__eco{ transition-delay:.12s; }
.etapa .etapa__fig{ transition-delay:.18s; }

/* ═══════════════════ RESPONSIVO ═══════════════════ */
@media (max-width:900px){
  .topo__nav,.topo .idiomas{ display:none; }
  .idiomas--menu{ display:flex; }
  .topo__burger{ display:flex; }
  .capa__redes{ display:none; }
  /* empilhado: a imagem continua cobrindo tudo, mas o degradê vira vertical
     — claro em cima, preto embaixo, onde ficam os dizeres. */
  .capa{ align-content:end; }
  .capa__dizeres{ max-width:none;
    padding:clamp(30px,5vh,54px) var(--pad) calc(var(--pad) + clamp(24px,4vh,44px)); }
  /* as duas dobras viram coluna única, na mesma ordem em que se lê:
     rótulo, título, e o corpo descendo por baixo em vez de ficar ao lado. */
  .faz{ grid-template-columns:1fr; }
  /* Sem odômetro no mobile: uma coluna só, e o número volta para dentro da
     etapa — grudar um número de 15vw ao lado de nada não sobra espaço. */
  .etapas{ grid-template-columns:1fr; }
  .etapas__cont{ display:none; }
  .etapas__lado{ grid-column:1; }
  .etapa{ min-height:0; display:block; padding:clamp(26px,4vh,40px) 0; }
  .etapa__num{
    display:block; margin:0 0 clamp(10px,1.6vh,16px);
    font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
    letter-spacing:.13em; color:var(--pap-45);
    font-variant-numeric:tabular-nums;
  }
  /* Empilhado, a coluna vira a largura CHEIA da página. Com 1.45vw o corpo
     não acompanha. E aqui não há mais coluna estreita para segurar a medida,
     então o teto vai no PARÁGRAFO — a exceção permitida em "Largura". Sem
     ele o texto dá 110 caracteres por linha a 900px.
     ⚠️ 54ch, não 66. O `ch` da DM Sans é o avanço do "0", ~0.66em, mas a
     largura MÉDIA de caractere é ~0.58em. 66ch dava 862px numa coluna de
     842 — o teto não chegava a valer. 54ch dá 706px, ou ~62 caracteres. */
  .etapa__txt,.etapa__eco,.estudio__corpo p,.estudio__acao{
    font-size:clamp(14px,2.2vw,20px); max-width:54ch;
  }
  .estudio__grade{ grid-template-columns:1fr; }
  .estudio__rot{ grid-row:1; }
  .estudio__dec{ grid-row:2; }
  .estudio__corpo{
    grid-column:1; grid-row:3;
    margin-top:clamp(24px,4vh,42px);
  }

}

/* ═══════════════════ DIAGNÓSTICO — o chat ═══════════════════ */
/* Canto inferior direito, em todas as páginas. A marcação é montada pelo
   js/diagnostico.js — não existe no HTML de nenhuma página.

   ⚠️ O código original vinha com paleta e tipografia próprias: dois tons de
   azul-petróleo, Archivo e JetBrains Mono. Aqui ele usa os tokens do site —
   --breu, --paper, DM Sans — porque a paleta é travada no logo e a família é
   uma só. Voltar ao petróleo é mexer nas cores só deste bloco. */
.diag{ position:fixed; right:var(--pad); bottom:var(--pad); z-index:960; }

/* Só uma bolinha: o rosto da atendente num círculo. O nome dela e o rótulo
   ficam no topo do painel, depois de aberto. */
.diag__abre{
  position:relative; display:block;
  width:clamp(52px,4.4vw,64px); aspect-ratio:1;
  padding:0; border:1px solid rgba(242,242,242,.18); border-radius:50%;
  background:#141416; cursor:pointer; overflow:visible;
  box-shadow:0 10px 34px rgba(0,0,0,.55);
  transition:transform .35s var(--ease), opacity .3s var(--ease),
             border-color .3s var(--ease);
}
.diag__abre:hover{ transform:translateY(-2px); border-color:var(--pap-45); }
.diag__abre .diag__marca{ width:100%; height:100%; border:0; }
.diag__abre .diag__marca svg{ width:58%; }
/* o pontinho de "online", encostado na borda.

   ⚠️ VERDE, a pedido dele em 28/08/2026 (era papel, e branco piscando não
   diz "online", diz "notificação"). É a TERCEIRA cor do site, e como o
   laranja do Nucleos ela tem um dono só: este pontinho. Não estenda.

   O tom não foi escolhido no olho: é o verde da bandeira do Brasil que já
   está no site (`#009B3A`, no SVG da `.bandeira`) levantado em valor para
   ler sobre o breu. Mesma família de matiz (143° contra 145°), então a
   página continua com o mesmo verde de sempre, só que visível a 11px.

   O piso do pulso subiu de .45 para .55: verde escurece muito mais rápido
   que papel ao perder opacidade, e a .45 o ponto sumia na metade do ciclo. */
.diag__ponto{
  position:absolute; right:2px; bottom:2px;
  width:11px; height:11px; border-radius:50%;
  background:var(--online); border:2px solid var(--breu);
  animation:diagPulso 2.4s infinite;
}
@keyframes diagPulso{ 0%,100%{opacity:.55} 50%{opacity:1} }
.diag--aberto .diag__abre{ opacity:0; pointer-events:none; }

/* ── a mãozinha ──
   Aparece acima e à esquerda da bolinha, acena três vezes e some. Não tem
   `pointer-events`: é sinal, não alvo — o alvo é a bolinha inteira, e uma
   mão clicável no caminho do cursor só atrapalharia.
   `transform-origin` no PULSO (embaixo, ao centro): girando pelo centro do
   quadro ela balança como um pêndulo, não como quem acena. */
.diag__mao{
  position:absolute; z-index:1;
  right:calc(100% - 14px); bottom:calc(100% - 18px);
  width:clamp(24px,2vw,29px); height:auto;
  color:var(--paper); pointer-events:none;
  transform-origin:60% 90%;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.8));
  /* invisível por padrão; quem mostra é a classe. Não uso o atributo
     `hidden` porque ele não vale em SVG. */
  opacity:0; visibility:hidden;
}
.diag__mao--acena{ visibility:visible; animation:diagAcena 2.7s var(--ease); }
@keyframes diagAcena{
  0%   { opacity:0; transform:scale(.7) rotate(0deg); }
  12%  { opacity:1; transform:scale(1) rotate(0deg); }
  24%  { transform:scale(1) rotate(15deg); }
  36%  { transform:scale(1) rotate(-11deg); }
  48%  { transform:scale(1) rotate(13deg); }
  60%  { transform:scale(1) rotate(-9deg); }
  72%  { transform:scale(1) rotate(0deg); opacity:1; }
  100% { opacity:0; transform:scale(.86) rotate(0deg); }
}
/* a bolinha some com o painel aberto — a mão vai junto */
.diag--aberto .diag__mao{ display:none; }

/* ⚠️ ESTA LINHA É OBRIGATÓRIA. O atributo `hidden` esconde pela folha do
   navegador (`display:none`), e QUALQUER `display` de autor ganha dela — o
   `display:flex` logo abaixo fazia o painel nascer aberto em toda página,
   vazio, porque a conversa só começa no clique. */
.diag__painel[hidden]{ display:none; }
.diag__painel{
  position:absolute; right:0; bottom:0;
  width:min(400px, calc(100vw - var(--pad) * 2));
  height:min(600px, calc(100vh - var(--pad) * 2));
  display:flex; flex-direction:column;
  background:var(--breu); color:var(--paper);
  border:1px solid rgba(242,242,242,.14);
  border-radius:clamp(10px,1vw,18px);
  box-shadow:0 24px 70px rgba(0,0,0,.7);
  overflow:hidden;
}
.diag__topo{ display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid rgba(242,242,242,.10); }
/* ⚠️ A MARCA no lugar do rosto. Era `img/atendente-200.jpg`, foto de
   atendente gerada por IA, e antes disso uma silhueta: as duas davam corpo a
   uma pessoa que não existe, num widget que conversa e pede contato. O
   wordmark diz o que isto é: o estúdio, automático. Ver diagnostico.js. */
.diag__marca{
  width:34px; height:34px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:#141416; border:1px solid rgba(242,242,242,.14);
  color:var(--paper); overflow:hidden;
}
.diag__marca svg{ width:62%; height:auto; display:block; }
.diag__quemTopo{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.diag__nome{ font-size:13.5px; font-weight:500; letter-spacing:-.01em; }
.diag__cargo{
  font-style:normal; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pap-45);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.diag__etapa{ flex:1; text-align:right; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pap-45); font-variant-numeric:tabular-nums; }
.diag__fecha{ background:none; border:0; color:var(--pap-45); cursor:pointer;
  font-size:20px; line-height:1; padding:0 2px; transition:color .25s var(--ease); }
.diag__fecha:hover{ color:var(--paper); }
.diag__barra{ height:2px; background:rgba(242,242,242,.10); }
.diag__barra i{ display:block; height:100%; width:0; background:var(--paper);
  transition:width .5s var(--ease); }

.diag__corpo{
  flex:1; overflow-y:auto; padding:18px 16px 20px;
  /* barra de rolagem invisível, rolagem preservada. Nas duas sintaxes:
     `scrollbar-width` é o padrão, o ::-webkit é o que o Chrome/Safari usam. */
  scrollbar-width:none; -ms-overflow-style:none;
}
.diag__corpo::-webkit-scrollbar{ width:0; height:0; display:none; }
.diag__fio{ display:flex; flex-direction:column; gap:12px; }

/* ⚠️ SEM `both` no preenchimento. Com `animation: ... both` o elemento fica
   parado no quadro inicial (opacidade 0) até a animação rodar — e se ela não
   rodar por qualquer motivo, a mensagem existe no DOM e fica INVISÍVEL. O
   padrão aqui é visível; a animação só entra por cima. */
/* Entrada mais lenta e mais macia: sobe de mais longe, com escala, e o
   `--ease` (cubic-bezier .16,1,.3,1) desacelera bastante no fim. */
.diag__msg{ max-width:88%; animation:diagSobe .62s var(--ease); }
@keyframes diagSobe{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to  { opacity:1; transform:none; }
}
.diag__msg--voka{ align-self:flex-start; }
.diag__msg--eu{ align-self:flex-end; }
.diag__quem{ display:block; margin-bottom:6px; font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pap-45); }
.diag__msg--voka .diag__bolha{
  background:#141416; border:1px solid rgba(242,242,242,.10); border-radius:10px;
  padding:13px 15px; font-size:14px; line-height:1.6; color:var(--pap-70);
}
.diag__msg--voka .diag__bolha b{ color:var(--paper); font-weight:500; }
/* a minha resposta é o bloco invertido — mesmo par do cartão do "diferencia" */
.diag__msg--eu .diag__bolha{
  background:var(--paper); color:var(--breu); border-radius:10px;
  padding:11px 14px; font-size:13.5px; line-height:1.5;
}

.diag__digit{ display:flex; gap:5px; width:fit-content; background:#141416;
  border:1px solid rgba(242,242,242,.10); border-radius:10px; padding:17px 15px; }
.diag__digit i{ width:5px; height:5px; border-radius:50%; background:var(--pap-45);
  animation:diagBlip 1.5s infinite; }
.diag__digit i:nth-child(2){ animation-delay:.18s }
.diag__digit i:nth-child(3){ animation-delay:.36s }
@keyframes diagBlip{ 0%,60%,100%{opacity:.25} 30%{opacity:1} }

.diag__zona{ margin-top:18px; }
.diag__entrada{ animation:diagSobe .55s var(--ease); }
.diag__opts{ display:flex; flex-direction:column; gap:7px; }
.diag__opt{
  display:flex; align-items:center; gap:11px; text-align:left;
  background:transparent; color:var(--paper); cursor:pointer;
  border:1px solid rgba(242,242,242,.14); border-radius:9px; padding:13px 15px;
  font-family:var(--grotesk); font-size:13.5px; font-weight:300; line-height:1.45;
  transition:.22s var(--ease);
}
.diag__opt:hover{ border-color:var(--pap-45); background:rgba(242,242,242,.05); }
.diag__marca2{ width:14px; height:14px; flex:none; border-radius:3px;
  border:1px solid var(--pap-45); transition:.2s var(--ease); }
.diag__opt.on{ border-color:var(--paper); background:rgba(242,242,242,.09); }
.diag__opt.on .diag__marca2{ background:var(--paper); border-color:var(--paper); }

.diag__campo{ display:flex; gap:7px; }
.diag__campo input{
  flex:1; min-width:0; background:transparent; color:var(--paper);
  border:1px solid rgba(242,242,242,.14); border-radius:9px; padding:13px 15px;
  font-family:var(--grotesk); font-size:14px; font-weight:300;
}
.diag__campo input:focus{ outline:none; border-color:var(--paper); }
.diag__campo input::placeholder{ color:var(--pap-45); }

.diag__go{
  background:var(--paper); color:var(--breu); border:0; cursor:pointer;
  border-radius:9px; padding:13px 18px; font-family:var(--grotesk);
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  transition:.22s var(--ease);
}
.diag__go:hover{ opacity:.85; }
.diag__go:disabled{ opacity:.28; cursor:not-allowed; }
.diag__go--full{ width:100%; margin-top:9px; }
.diag__pula{ background:none; border:0; color:var(--pap-45); cursor:pointer;
  font-size:10px; letter-spacing:.13em; text-transform:uppercase; padding:11px 0 0;
  transition:color .2s var(--ease); }
.diag__pula:hover{ color:var(--paper); }

.diag__res{ animation:diagSobe .7s var(--ease); }
.diag__resL{ display:block; margin-bottom:14px; font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pap-45); }
.diag__resEst{ margin:0 0 16px; font-family:var(--display); font-weight:300;
  font-size:clamp(34px,7vw,50px); line-height:1.02; letter-spacing:-.03em; }
.diag__resEst--peq{ font-size:clamp(22px,4.4vw,30px); line-height:1.15; }
.diag__resD{ margin:0 0 14px; font-size:14px; line-height:1.65; color:var(--pap-70); }
.diag__resD b{ color:var(--paper); font-weight:500; }
.diag__resS{ margin:0 0 22px; font-size:13px; line-height:1.62; color:var(--pap-45); }
/* A foto do time no fecho do diagnóstico. Tira larga: a faixa dos rostos
   fica na parte de cima da foto, por isso o `object-position` em 32%. */
.diag__time{
  display:block; width:100%; aspect-ratio:16/8;
  object-fit:cover; object-position:50% 32%;
  border-radius:8px; margin:14px 0 4px;
}

/* ⚠️ A caixa do desfecho do envio muda de tom conforme o servidor. A de
   ERRO usa o laranja do Nucleos como fio de alerta, e é a única vez que ele
   sai do nome do método. Abri a exceção porque a alternativa era inventar
   uma quarta cor só para dizer "não chegou", e essa mensagem precisa ser
   vista. Se incomodar, o fio volta a ser papel a 45%. */
.diag__cx--erro{ border-color:rgba(233,82,40,.55); }
.diag__mail{
  display:inline-block; margin-top:2px;
  color:var(--paper); border-bottom:1px solid var(--pap-45);
  transition:border-color .3s var(--ease);
}
.diag__mail:hover{ border-bottom-color:var(--paper); }
.diag__cx{ border:1px solid rgba(242,242,242,.14); border-radius:10px;
  padding:16px; margin:20px 0; }
.diag__cx p{ margin:0; font-size:13px; line-height:1.65; color:var(--pap-45); }
.diag__cx p + p{ margin-top:10px; }
.diag__cx b{ color:var(--paper); font-weight:500; }

.diag__btns{ display:flex; gap:7px; flex-wrap:wrap; margin-top:6px; }
.diag__b{
  border:1px solid var(--pap-45); border-radius:999px; color:var(--paper);
  background:transparent; cursor:pointer; text-decoration:none;
  font-family:var(--grotesk); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; padding:13px 18px; transition:.22s var(--ease);
}
.diag__b:hover{ border-color:var(--paper); background:rgba(242,242,242,.07); }
.diag__b--cheio{ background:var(--paper); color:var(--breu); border-color:var(--paper); }
.diag__b--cheio:hover{ opacity:.85; }

.diag__resumo{ margin-top:26px; padding-top:18px;
  border-top:1px solid rgba(242,242,242,.10); }
.diag__resumoL{ display:block; margin-bottom:12px; font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pap-45); }
.diag__resR{ display:flex; justify-content:space-between; gap:16px; padding:7px 0;
  border-bottom:1px solid rgba(242,242,242,.08); font-size:12.5px; color:var(--pap-45); }
.diag__resR span:last-child{ color:var(--pap-70); text-align:right; }

/* No telefone o painel toma a tela: 400px fixos não cabem, e enquanto está
   aberta a conversa É o conteúdo principal. */
@media (max-width:560px){
  .diag{ right:0; bottom:0; left:0; }
  .diag__abre{ position:absolute; right:var(--pad); bottom:var(--pad); }
  .diag__painel{ position:fixed; inset:0; width:100vw; height:100dvh;
    border:0; border-radius:0; }
}

/* ═══════════════════════════════════════════
   REVEAL CROMÁTICO
   Cada palavra sobe de um blur com franja laranja/azul nas bordas — a cor
   existe só durante o movimento e resolve para preto puro. É artefato de
   lente, não paleta: o site continua sendo só #111113 e #f2f2f2 parado.
   ═══════════════════════════════════════════ */
/* Franja e blur em `em`, não px: o efeito escala sozinho do título de 158px
   ao rótulo de 12px. Em px o blur engoliria a franja no texto pequeno. */
/* O nome do método, em laranja. Fica ANTES do reveal de propósito: o
   `fatiar()` percorre nós de texto e preserva a marcação interna, então o
   `.nuc` sobrevive e vira o PAI dos `.pal`. Como `.pal` só mexe em
   text-shadow e nunca em `color`, a cor herda para dentro e o reveal
   continua funcionando por cima. */
.nuc{ color:var(--laranja); }

[data-fatia]{ --franja:.34em; }
[data-fatia] .lin{ display:block; }

[data-fatia] .pal{
  display:inline-block;
  opacity:.001;
  filter:blur(.17em);
  transform:translateY(.3em) skewX(28deg);
  text-shadow:calc(var(--franja) * -1) 0 rgba(255,86,0,1),
              var(--franja) 0 rgba(0,102,255,1);
  /* opacidade e movimento entram rápido (--ease); cor e blur saem devagar
     (--cor), senão a franja passa em dois frames e ninguém vê. */
  transition:opacity .6s var(--ease),
             transform .9s var(--ease),
             filter 1s var(--cor),
             text-shadow 1s var(--cor);
  transition-delay:calc(var(--i,0) * 55ms);
}
[data-fatia].is-in .pal{
  opacity:1;
  filter:blur(0);
  transform:none;
  text-shadow:0 0 rgba(255,86,0,0), 0 0 rgba(0,102,255,0);
}
/* terminada a cascata, larga as camadas compostas do blur */
[data-fatia].quieto .pal{ filter:none; text-shadow:none; transition:none; }

/* ═══════════════════ DOBRA 2 — DECLARAÇÃO ═══════════════════ */
.decl{
  padding:clamp(90px,18vh,190px) var(--pad) clamp(90px,18vh,190px);
  text-align:center;
}
/* ═══════════════════ EQUIPE ═══════════════════ */
/* Sem moldura de cartão: a foto É o cartão. Nome e redes na mesma linha,
   cargo embaixo com travessão, como no print. */
.equipe{ padding:0 var(--pad) clamp(90px,17vh,200px); }
.equipe__barra{
  border-top:1px solid rgba(242,242,242,.14);
  padding-top:clamp(20px,3vh,34px);
  margin-bottom:clamp(22px,3.4vh,42px);
}
.equipe__rot{
  margin:0; font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
.equipe__fila{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,20px);
}
.pes__foto{
  width:100%; aspect-ratio:1/1.15; object-fit:cover;
  border-radius:clamp(4px,.4vw,8px);
  margin-bottom:clamp(12px,1.6vh,20px);
}
.pes__linha{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.pes__nome{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(15px,1.25vw,22px); line-height:1.2; letter-spacing:-.01em;
}
.pes__redes{ display:flex; gap:clamp(7px,.7vw,11px); flex:none; }
.pes__redes a{
  color:var(--pap-45); text-decoration:none;
  font-size:clamp(9.5px,.72vw,11.5px); font-weight:700; letter-spacing:.08em;
  transition:color .3s var(--ease);
}
.pes__redes a:hover{ color:var(--paper); }
.pes__cargo{
  margin:clamp(5px,.8vh,9px) 0 0;
  font-size:clamp(12px,.92vw,15px); color:var(--pap-45);
}
.pes__cargo::before{ content:'· '; }

@media (max-width:1080px){ .equipe__fila{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .equipe__fila{ grid-template-columns:1fr; } }

/* ═══════════════════ ESTÁGIOS ═══════════════════ */
/* Dobra presa: trilho de 350vh, palco grudado, e as três colunas se
   revelando em sequência conforme a rolagem. Cada coluna tem um --p de 0 a 1
   vindo do JS; tudo dentro dela é função desse número.

   O molde: número gigante no alto, nome logo abaixo, e o texto assentado no
   PÉ da coluna — com fios verticais separando. É o pé alinhado que faz as
   três lerem como uma tabela, mesmo com textos de tamanhos diferentes. */
.estagios{ height:350vh; }
.estagios__palco{
  position:sticky; top:0;
  height:100vh; overflow:hidden;
  display:flex; flex-direction:column;
  padding:calc(var(--pad) + clamp(70px,9vw,120px)) var(--pad) clamp(40px,6vh,80px);
  background:var(--breu);
}
.estagios__topo{ margin-bottom:clamp(24px,4vh,50px); }
.estagios__rot{
  margin:0 0 var(--dobra-rot);
  font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
.estagios__lead{
  margin:0; max-width:46ch;
  font-size:clamp(14px,1.2vw,21px); line-height:1.6; color:var(--pap-70);
}

.estagios__fila{
  list-style:none; margin:0; padding:0; flex:1;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(20px,3vw,56px);
}
/* fios verticais entre as colunas, como no molde */
.estg + .estg{
  border-left:1px solid rgba(242,242,242,.14);
  padding-left:clamp(20px,3vw,56px);
  margin-left:calc(clamp(20px,3vw,56px) * -1);
}
.estg{
  --p:0;
  display:flex; flex-direction:column;
  min-width:0;
}
.estg__num{
  margin:0; font-family:var(--display); font-weight:300;
  font-size:clamp(64px,9vw,190px); line-height:.9; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
  /* sobe para o lugar conforme --p cresce */
  opacity:var(--p);
  transform:translateY(calc((1 - var(--p)) * 42%));
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.estg__nome{
  margin:clamp(10px,1.6vh,20px) 0 0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(17px,1.5vw,26px); line-height:1.2; letter-spacing:-.01em;
  opacity:var(--p);
  transform:translateY(calc((1 - var(--p)) * 22px));
  transition:opacity .5s var(--ease) .06s, transform .5s var(--ease) .06s;
}
/* margin-top:auto assenta o texto no PÉ da coluna */
.estg__txt{
  margin:auto 0 0; max-width:34ch;
  font-size:clamp(13px,.96vw,16px); line-height:1.55; color:var(--pap-70);
  opacity:var(--p);
  transform:translateY(calc((1 - var(--p)) * 18px));
  transition:opacity .5s var(--ease) .12s, transform .5s var(--ease) .12s;
}
.estagios__fecho{
  margin:clamp(24px,4vh,50px) 0 0; max-width:60ch;
  font-size:clamp(13px,.96vw,16px); line-height:1.55; color:var(--paper);
  opacity:var(--fecho,0);
  transition:opacity .5s var(--ease);
}

/* ⚠️ Sem prender no mobile, mesma razão da outra dobra presa: em coluna
   única não há três colunas para revelar em sequência. Vira uma lista. */
@media (max-width:900px){
  .estagios{ height:auto; }
  .estagios__palco{
    position:static; height:auto; overflow:visible;
    padding:0 var(--pad) clamp(90px,17vh,200px);
  }
  .estagios__fila{ grid-template-columns:1fr; gap:clamp(30px,5vh,54px); }
  .estg + .estg{
    border-left:0; padding-left:0; margin-left:0;
    border-top:1px solid rgba(242,242,242,.14);
    padding-top:clamp(24px,3.6vh,40px);
  }
  .estg__num,.estg__nome,.estg__txt{ opacity:1; transform:none; }
  .estg__txt{ margin:clamp(12px,2vh,18px) 0 0; max-width:54ch; }
  .estagios__fecho{ opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .estg__num,.estg__nome,.estg__txt{ opacity:1; transform:none; }
  .estagios__fecho{ opacity:1; }
}

/* ═══════════════════ MARCAS QUE CONFIARAM ═══════════════════ */
/* Dobra presa com zoom out. Trilho de 4 telas (1 presa + 3 de percurso),
   como no monod.framer.website.

   ⚠️ DOZE LADRILHOS IGUAIS, todos 16:9. A versão anterior tinha o do meio
   ocupando duas colunas, e ele destoava do resto. Com todos iguais a conta
   do zoom inicial muda, e por isso ela saiu do CSS e foi para o JS: depende
   da PROPORÇÃO da janela, não é um número fixo. Ver bloco 8 do main.js. */
/* ⚠️ 520vh, e não os 400vh de antes. O trecho novo é o dos DEPOIMENTOS, que
   ele pediu dentro da dobra presa em 28/08/2026. O que já existia não ficou
   mais lento: as frações do zoom e do título foram remapeadas por 300/420
   no main.js e ocupam a mesma distância de rolagem de antes. Mexeu na
   altura daqui, remapeie lá. */
.confia{ height:520vh; }
.confia__palco{
  position:sticky; top:0;
  height:100vh; overflow:hidden;
  background:var(--breu);
}
.confia__zoom{
  position:absolute; inset:0;
  /* ⚠️ A ORDEM importa: `translateY` antes de `scale`, para o deslocamento
     do paralaxe sair em pixels de tela e não multiplicado pelo zoom. O
     `--par` é escrito pelo JS enquanto os depoimentos abrem: o fundo desce
     devagar atrás deles, que é o que separa as duas camadas.

     ⚠️ E o `--foto` APAGA a colmeia no mesmo trecho. Não existe camada preta
     por cima: o `.confia__palco` já é `background:var(--breu)`, então apagar
     a colmeia revela o preto que já estava ali. Uma camada a mais custaria
     composição de tela cheia durante quatro telas de rolagem, de graça.
     O padrão é 1: sem JS (telefone, movimento reduzido) a foto fica. */
  opacity:var(--foto,1);
  transform:translateY(var(--par,0px)) scale(var(--z,3.4));
  transform-origin:center center;
  will-change:transform;
  /* ⚠️ Uma transição CURTA no transform, de propósito. O zoom é comandado
     pela rolagem quadro a quadro; sem ela, cada quadro é um salto seco e o
     movimento fica duro. Com .3s o zoom chega sempre um fio atrás do dedo,
     e é isso que lê como suave. Mais que isso vira borracha. */
  transition:transform .3s cubic-bezier(.22,1,.36,1),
             opacity .3s cubic-bezier(.22,1,.36,1);
}
/* ⚠️ Centragem explícita, NÃO `place-items:center` do grid.
   Com o grid centrado a grade caía uma fileira fora: a peça sobre o centro
   da tela era a da fileira 2, com o centro dela 788px fora do centro
   (medido). Com left/top 50% e translate(-50%,-50%) o centro da grade é o
   centro da tela, ponto — e o centro da grade é a peça do meio da fileira
   do meio, que é a que precisa encher a tela. */
.confia__grade{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
}
/* ── a colmeia ──
   Fileiras de 3 e de 4 alternadas. Todos os ladrilhos têm a MESMA largura
   (a de 3 por fileira), então a de 4 transborda de propósito — e é
   deslocada meia peça para a esquerda. É esse desencontro das emendas que
   dá a colmeia; com as fileiras alinhadas seria uma grade comum.
   O que sobra para fora é cortado pelo overflow do palco. */
.confia__grade{
  width:100vw;
  display:flex; flex-direction:column; align-items:center;
  gap:var(--vao);
  --vao:clamp(4px,.5vw,9px);
  --peca:calc((100vw - 2 * var(--vao)) / 3);
}
.fila{ display:flex; gap:var(--vao); flex:none; }
.fila--desloca{ margin-left:calc((var(--peca) + var(--vao)) / -2); }
.ladr{
  flex:none;
  width:var(--peca);
  overflow:hidden;
  aspect-ratio:16/9;              /* 1920×1080, todos iguais */
  border-radius:clamp(6px,.7vw,12px);
  background:#141416;
}
/* ⚠️ `--pos` por ladrilho, não um corte central para todos.
   O ladrilho é 16:9 e as fotos da entrega são RETRATO. Cortando centrado,
   sobra só 37% a 45% da altura da foto e a cabeça sai do quadro. Cada foto
   traz o seu `--pos` medido, ancorado nos rostos. */
.ladr img{
  width:100%; height:100%; object-fit:cover; display:block;
  object-position:var(--pos, 50% 50%);
}

/* ── o ladrilho do vídeo ──
   O do meio da colmeia. Enquanto o iframe não chega, mostra um cartaz. */
.ladr--video{ position:relative; }
.ladr__cartaz{ position:absolute; inset:0; }
.ladr__filme{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  /* Mesmo motivo do iframe antigo: a dobra é movida pela rolagem e um
     elemento de mídia por cima não pode capturar o ponteiro. */
  pointer-events:none;
}
/* mantido para o caso de alguém voltar ao embed; ver README */
.ladr iframe{
  position:absolute; top:50%; left:50%;
  /* ⚠️ MAIOR que o ladrilho e centrado, para o `overflow:hidden` do `.ladr`
     cortar a interface do YouTube.
     `controls=0` esconde a barra de controles, mas NÃO esconde o título do
     vídeo, o nome do canal, o "More videos" nem o logo: eles aparecem em
     cima do vídeo assim que o ladrilho cresce, e a dobra vira uma página do
     YouTube no momento em que ela deveria ser o auge do site. Medido com o
     ladrilho a 746×419: a tarja de título come o topo e a marca o pé.
     136% corta ~18% de cada borda, o suficiente para as duas sumirem.
     ⚠️ O preço é perder ~18% do enquadramento do vídeo em cada lado. Não há
     como evitar com embed do YouTube: a saída boa é hospedar o arquivo.
     Ver "Pendente" no README. */
  width:136%; height:136%;
  transform:translate(-50%,-50%);
  border:0;
  /* ⚠️ `pointer-events:none` é OBRIGATÓRIO, não enfeite. Esta dobra é presa e
     movida pela rolagem; um iframe por cima engole a roda do mouse e o zoom
     para de responder enquanto o ponteiro estiver sobre ele. Sem controles no
     player, não há nada para clicar mesmo. */
  pointer-events:none;
}
/* O cartaz some só depois que o iframe entra, para não piscar preto. */
.ladr--video.tocando .ladr__cartaz{ opacity:0; transition:opacity .6s var(--ease); }

.confia__veu{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,.6) 0%, rgba(0,0,0,.4) 45%, rgba(0,0,0,.72) 100%);
}

.confia__dizeres{
  position:absolute; z-index:2; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px,2vh,26px); text-align:center;
  padding:0 var(--pad);
  /* ⚠️ A caixa é `inset:0`, ou seja cobre o palco inteiro. Sem isto ela
     engoliria o hover dos cartões de depoimento, que ficam por baixo dela
     na pilha. O CTA reativa o clique por conta própria (--ctaClique). */
  pointer-events:none;
}
.confia__rot{
  margin:0; font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
  opacity:var(--rot,0); transition:opacity .35s var(--ease);
}
.confia__tit{
  margin:0; font-family:var(--display); font-weight:300;
  font-size:var(--disp); line-height:1.05; letter-spacing:-.025em;
  max-width:14em;
}

/* ── revelação letra por letra ──
   Cada letra é um .ltr dentro de um .cx com overflow:hidden. A letra nasce
   EMPURRADA PARA BAIXO e sobe para o lugar: é isso que dá o "de baixo para
   cima". Na saída ela continua subindo, para fora do quadro por cima.
   Quem liga e desliga cada letra é o JS, pelo progresso da rolagem — não é
   transição por tempo, é posição de scroll. */
.confia__tit .cx{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.confia__tit .ltr{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .5s var(--ease);
}
.confia__tit .cx.on .ltr{ transform:none; }
.confia__tit .cx.sai .ltr{ transform:translateY(-105%); }

.confia__acao{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.72em 1.35em; border:1px solid var(--pap-45); border-radius:999px;
  color:var(--paper); text-decoration:none;
  font-size:clamp(13px,.96vw,16px);
  opacity:var(--cta,0);
  transform:translateY(calc((1 - var(--cta,0)) * 12px));
  pointer-events:var(--ctaClique,none);
  transition:opacity .45s var(--ease), transform .45s var(--ease),
             background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease);
}
.confia__acao span{ transition:transform .35s var(--ease); }
.confia__acao:hover{ background:var(--paper); color:var(--breu); border-color:var(--paper); }
.confia__acao:hover span{ transform:translate(2px,-2px); }

/* ⚠️ Sem prender no mobile: em tela pequena o trilho de 400vh vira quatro
   telas de rolagem sem nada acontecendo. Vira uma grade normal. */
@media (max-width:760px){
  .confia{ height:auto; padding:0 var(--pad) clamp(90px,17vh,200px); }
  .confia__palco{ position:static; height:auto; }
  /* ⚠️ `display:block`, não o grid centrado do desktop: com `place-items:
     center` a grade encolhe para o conteúdo, e como aqui a largura do
     ladrilho é em %, a conta fica circular e ele colapsa (medido: 30px). */
  .confia__zoom{ position:static; transform:none; display:block; transition:none; }
  .confia__grade{ position:static; transform:none; }
  /* no telefone a colmeia vira empilhamento simples: as fileiras viram
     linhas normais, sem deslocamento e sem transbordo. */
  .confia__grade{ width:100%; --vao:clamp(6px,1.6vw,10px); }
  .fila{ flex-wrap:wrap; }
  .fila--desloca{ margin-left:0; }
  .ladr{ width:calc((100% - var(--vao)) / 2); }
  .confia__veu{ display:none; }
  .confia__dizeres{
    position:static; align-items:flex-start; text-align:left;
    padding:0 0 clamp(22px,3.4vh,40px);
  }
  .confia__rot{ opacity:1; }
  .confia__tit .ltr{ transform:none; }
  .confia__acao{ opacity:1; transform:none; pointer-events:auto; }
}
@media (prefers-reduced-motion:reduce){
  .confia__zoom{ transform:scale(1); }
  .confia__rot{ opacity:1; }
  .confia__tit .ltr{ transform:none; }
  .confia__acao{ opacity:1; transform:none; pointer-events:auto; }
}

/* ═══════════════════ DEPOIMENTOS ═══════════════════ */
/* Cartões correndo DENTRO da dobra presa "marcas que confiaram na gente".
   Pedido dele em 28/08/2026, em duas etapas: primeiro os cartões, depois
   "o scroll trava, e quando sai poderia continuar travado e aparecerem os
   feedbacks. Acho melhor do que só um slide embaixo".

   ⚠️⚠️ OS TEXTOS SÃO PROVISÓRIOS e a atribuição está em `[nome]`. Ver o
   comentário do `depo.*` no js/idiomas.js. A dobra tem `data-provisorio`
   no HTML para ser fácil de achar antes de publicar.

   ⚠️ Quantas cópias o laço precisa é decidido MEDINDO, no bloco 5c do
   main.js, e não fixado aqui: a conta depende da largura da janela e do
   idioma, e as duas mudam. O CSS só usa o `--passo` e o `--dur` que o JS
   escreve. É a versão auto-corrigida do letreiro do estudio.html, que tem
   as cópias fixas no HTML e por isso já abriu vão uma vez. */

/* ── a fila presa no palco ──
   TRÊS cartões fixos, centrados, com o CTA embaixo. Ele pediu assim em
   28/08/2026: "ter os depoimentos abrindo um por um, só que só sendo três
   embaixo", e o botão "embaixo do carrossel".

   ⚠️ Houve uma versão em LAÇO INFINITO aqui, com cópias clonadas e medidas
   pelo JS, que durou algumas horas no mesmo dia. Ele preferiu os três
   fixos. Saiu tudo: `.depo__pista`, `.depo__faixa`, `.depo__grupo`, o
   `@keyframes depo-corre` e o bloco 5c do main.js. Não reintroduza pela
   metade: o laço só fecha com a conta de cópias junto.

   ⚠️ A caixa é `inset:0` e por isso cobre o palco: `pointer-events:none`
   nela, e `auto` só nos cartões e no CTA (que tem o `--ctaClique` dele).
   Sem isso ela engoliria o clique do resto. */
.depo--presa{
  position:absolute; z-index:3; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(26px,4.4vh,58px);
  padding:0 var(--pad);
  pointer-events:none;
}
.depo__fila{
  display:flex; justify-content:center;
  gap:clamp(14px,1.4vw,26px);
  width:100%; max-width:1180px;
  /* ⚠️ EXPERIMENTO 3D: a perspectiva mora no PAI. Posta no próprio cartão,
     cada um teria o ponto de fuga no próprio centro e os dois inclinariam
     como se fossem duas cenas separadas. No pai, os dois dividem o mesmo
     ponto de fuga e a fila lê como um objeto só. Ver "DEPOIMENTO EM 3D". */
  perspective:1200px;
}

/* ⚠️ A ENTRADA é POR CARTÃO, e não da fila inteira de uma vez. Ele viu a
   primeira versão (a fila subindo em bloco) e disse que "não ficou tão
   legal, poderia ser mais dinâmico". Agora cada cartão sobe de um BORRÃO,
   um atrás do outro, enquanto o fundo desce no paralaxe.

   ⚠️ O borrão não é enfeite novo: é a mesma gramática do reveal cromático
   do site, em que a palavra sobe saindo de um blur. Aqui sem a franja, que
   é assinatura do texto de display.

   ⚠️ Quem faz a CONTA do escalonamento é o JS (bloco 8), que escreve
   `--p1`, `--p2` e `--p3` na fila. Aqui só se distribui um para cada
   cartão. A primeira versão fazia a conta em CSS, com
   `clamp(0, calc((var(--dep) - var(--atraso)) / .64), 1)` dentro de uma
   custom property: a expressão é válida isolada, mas nos cartões ela NÃO
   acompanhava o `--dep` (medido: cartão 1 travado em opacidade 1 e cartão 3
   em 0, com o `--dep` indo de 0 a 1). Três `setProperty` por quadro custam
   menos que perseguir isso.

   ⚠️ O nome é `--pd`, e não `--p`, porque `--p` já é o progresso das colunas
   da dobra dos estágios. Duas coisas diferentes com o mesmo nome numa folha
   só é armadilha esperando acontecer.

   ⚠️ O padrão é 1 nas três: SEM JS os cartões ficam visíveis. É a mesma
   armadilha que já deixou o chat abrindo vazio, e vale aqui em dobro,
   porque no telefone esta dobra nem prende. */
.dep:nth-child(1){ --pd:var(--p1,1); }
.dep:nth-child(2){ --pd:var(--p2,1); }
.dep:nth-child(3){ --pd:var(--p3,1); }

.dep{
  flex:1 1 0; min-width:0; max-width:560px;
  margin:0; display:flex; flex-direction:column;
  background:#141416; border:1px solid rgba(242,242,242,.10);
  border-radius:clamp(8px,.85vw,16px);
  overflow:hidden;                 /* o quadro do vídeo herda o raio daqui */
  pointer-events:auto;
  opacity:var(--pd,1);
  /* ⚠️ A inclinação 3D entra NO MESMO transform da entrada, no fim da lista.
     Em propriedade separada não dá: `transform` é uma só, e a última
     declaração ganharia da outra. `--rx` e `--ry` valem 0 até o ponteiro
     chegar, então sem o experimento nada muda aqui. */
  transform:translateY(calc((1 - var(--pd,1)) * -58px))
            scale(calc(.94 + var(--pd,1) * .06))
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  /* ⚠️ Teto de 11px no borrão. Acima disso o cartão vira uma mancha e o
     movimento deixa de ler como "chegando" e passa a ler como "quebrado". */
  filter:blur(calc((1 - var(--pd,1)) * 11px));
}
/* ── o quadro do vídeo ── */
.dep__quadro{ position:relative; aspect-ratio:16/9; background:#000; }
.dep__v{ display:block; width:100%; height:100%; object-fit:cover; }
/* ⚠️ BOTÃO de verdade, não decoração. Ele já foi um <span> com
   `pointer-events:none` e clicar nele não fazia nada: o navegador não trata
   clique no corpo do vídeo como play quando há `controls`, então só a
   barrinha de baixo tocava. Botão grande no meio da tela que não faz nada é
   defeito, não enfeite.

   ⚠️ `[hidden]` explícito, como no painel do chat. O atributo `hidden` é
   `display:none` da folha do navegador e QUALQUER `display` de autor ganha
   dele. Aqui não há `display` declarado, mas a regra fica porque o dia em
   que alguém puser um `display:grid` para centrar o triângulo, o botão
   aparece sem JS e some o vídeo por baixo dele. */
/* ⚠️ O botão COBRE O QUADRO INTEIRO, e é ele que alterna tocar/pausar. Ele
   já foi um <span> decorativo com `pointer-events:none` (clicar não fazia
   nada) e depois um botão redondo pequeno; hoje o alvo é o quadro todo,
   porque ele pediu "clico, toca; clico de novo, pausa" e mirar um disco de
   60px para pausar é pior do que clicar em qualquer lugar do vídeo.

   ⚠️ `[hidden]` explícito, como no painel do chat: o `hidden` é `display:none`
   da folha do navegador e QUALQUER `display` de autor ganha dele. Sem esta
   regra, o dia em que alguém puser um `display:grid` aqui para centrar o
   disco, o botão passa a aparecer sem JS e tapa o vídeo. */
.dep__play{
  position:absolute; inset:0;
  padding:0; border:0; background:transparent; cursor:pointer;
  transition:opacity .3s var(--ease);
}
.dep__play[hidden]{ display:none; }
.dep__play:focus-visible{ outline:2px solid var(--paper); outline-offset:-4px; }

/* o disco: pseudo-elemento, para o botão poder ser do tamanho do quadro e o
   desenho continuar pequeno e centrado */
.dep__play::before{
  content:''; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:clamp(48px,4.4vw,66px); aspect-ratio:1; border-radius:50%;
  background:rgba(0,0,0,.42); border:1px solid rgba(242,242,242,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .3s var(--ease), border-color .3s var(--ease),
             scale .3s var(--ease);
}
.dep__play:hover::before{ background:rgba(0,0,0,.62); border-color:var(--paper); scale:1.06; }

/* o triângulo, feito com borda: sem arquivo e sem fonte de ícone */
.dep__play::after{
  content:''; position:absolute; left:calc(50% + .06em); top:50%;
  translate:-50% -50%;
  border-style:solid; border-width:.34em 0 .34em .56em;
  border-color:transparent transparent transparent var(--paper);
  font-size:clamp(48px,4.4vw,66px);
}
/* ⚠️ TOCANDO: o mesmo pseudo-elemento vira DUAS BARRAS, com `border-left` e
   `border-right` sobre uma caixa vazia. É o que permite ter play e pause com
   um pseudo-elemento só, sem markup extra e sem ícone de arquivo. */
.dep--tocando .dep__play::after{
  left:50%;
  width:.46em; height:.56em;
  border-width:0 .17em; border-color:var(--paper);
}
/* Enquanto toca, o disco some para não tapar o vídeo, e volta no hover:
   o alvo de clique continua sendo o quadro inteiro o tempo todo. */
.dep--tocando .dep__play::before,
.dep--tocando .dep__play::after{ opacity:0; }
.dep--tocando .dep__play:hover::before,
.dep--tocando .dep__play:hover::after,
.dep--tocando .dep__play:focus-visible::before,
.dep--tocando .dep__play:focus-visible::after{ opacity:1; }
.dep__play::before,
.dep__play::after{ transition:opacity .3s var(--ease); }

.dep__quem{
  display:flex; flex-direction:column; gap:.35em;
  padding:clamp(14px,1.3vw,22px) clamp(16px,1.5vw,26px);
}
.dep__nome{ font-size:clamp(13px,1vw,17px); color:var(--paper); }
.dep__cargo{ font-size:clamp(11px,.85vw,13px); color:var(--pap-45); }

/* ⚠️ A transição CURTA existe pelo mesmo motivo da do zoom da dobra: o
   movimento é comandado pela rolagem quadro a quadro, e sem ela cada quadro
   é um salto seco. Com .3s o cartão chega sempre um fio atrás do dedo.

   ⚠️ E ela é ligada por CLASSE, não declarada direto. Na primeira armação o
   JS leva os cartões de visível (o padrão do CSS) para escondido, e com a
   transição já valendo isso vira um fade de meio segundo na carga. O JS põe
   a classe no quadro seguinte, quando eles já estão no lugar certo. */
.depo--liga .dep{
  transition:opacity .3s var(--ease),
             transform .35s cubic-bezier(.22,1,.36,1),
             filter .3s var(--ease);
}

/* No telefone a dobra não prende, então a fila deixa de ser camada do palco
   e vira um bloco normal no fim dele, com os três empilhados. */
@media (max-width:760px){
  .depo--presa{
    position:static; margin-top:clamp(26px,4vh,44px);
    align-items:flex-start; gap:clamp(22px,3.4vh,36px);
    padding:0;
  }
  .depo__fila{ flex-direction:column; max-width:none; }
  .dep{ max-width:none; }
  .depo--presa .confia__acao{ align-self:flex-start; }
}
/* O zoom já é neutralizado no bloco de reduced-motion da própria dobra,
   logo acima; aqui só os cartões. */
@media (prefers-reduced-motion:reduce){
  .dep{ opacity:1; transform:none; filter:none; }
}

/* ═══════════════════ DEPOIMENTO EM 3D ═══════════════════ */
/* Veio de um Sticky Card do Framer que ele mandou em 28/08/2026: "esse
   efeito 3D e coloca o vídeo". Ele aprovou ("ficou legal"). A parte do
   pedido que abria o vídeo num <dialog> foi DESFEITA no mesmo dia, a pedido
   dele: o vídeo toca no lugar.

   PARA TIRAR a inclinação: apague este bloco, o `perspective` da
   `.depo__fila` e o `rotateX/rotateY` do transform do `.dep`, mais o trecho
   da inclinação no bloco 5c do main.js. A inclinação não tem CSS próprio
   além disso: ela é o `--rx`/`--ry` que o JS escreve dentro do transform que
   o cartão já tinha. */

/* o cartão sobe um pouco enquanto o ponteiro está nele, para a inclinação
   ler como objeto solto da página e não como imagem torta */
.dep{ transition-property:opacity, transform, filter, box-shadow; }
.depo__fila:hover .dep:hover{
  box-shadow:0 26px 60px rgba(0,0,0,.55);
  border-color:rgba(242,242,242,.22);
}
/* ⚠️ O irmão RECUA quando o outro está sob o ponteiro. Sem isso os dois
   ficam no mesmo plano e a inclinação parece defeito de renderização em vez
   de escolha. Com o recuo, fica claro qual dos dois está na frente. */
.depo__fila:hover .dep:not(:hover){ opacity:calc(var(--pd,1) * .62); }

/* ═══════════════════ BLOG NA HOME ═══════════════════ */
.blogHome{ padding:0 var(--pad) clamp(90px,17vh,200px); }
.blogHome__barra{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  border-top:1px solid rgba(242,242,242,.14);
  padding-top:clamp(20px,3vh,34px);
}
.blogHome__barra .etapas__sub{ margin:0; }
.blogHome__ver{
  flex:none; color:var(--paper); text-decoration:none;
  font-size:clamp(13px,.96vw,16px);
  border-bottom:1px solid var(--pap-45);
  transition:border-color .35s var(--ease);
}
.blogHome__ver span{ display:inline-block; margin-left:.3em;
  transition:transform .35s var(--ease); }
.blogHome__ver:hover{ border-bottom-color:var(--paper); }
.blogHome__ver:hover span{ transform:translateX(3px); }
.blogHome .blog__grade{ margin-top:clamp(22px,3.4vh,42px); }

/* ═══════════════════ PERGUNTAS FREQUENTES ═══════════════════ */
/* Fecha a home. LAYOUT TROCADO em 28/08/2026 pelo print que ele mandou, da
   mesma família da referência do estudio.html: rótulo `/ Nome` sozinho em
   cima, e embaixo duas colunas — título, linha de apoio e botão pílula na
   estreita; a sanfona numerada na larga.

   ⚠️ A referência é CLARA (cartões brancos sobre cinza). Aqui os cartões são
   a mesma superfície escura de sempre (#141416 com fio de 10% de papel), que
   é o par que o site já usa no chat. Traduzido, como toda referência que
   entra. Ver "Paleta". */
.faq{ padding:0 var(--pad) clamp(90px,17vh,200px); }
/* O rótulo agora é linha própria, com a barra apagada como nas dobras do
   estudio.html. Era um par rótulo+título dentro de um flex com o botão. */
.faq__rot{
  margin:0 0 var(--dobra-rot);
  font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
.faq__rot span[aria-hidden]{ color:rgba(242,242,242,.22); }
.faq__tit{
  margin:0; font-family:var(--display); font-weight:300;
  font-size:var(--disp); line-height:1.05; letter-spacing:-.025em;
}
/* ⚠️ PÍLULA, não mais fio embaixo do texto. É o mesmo botão da
   `.confia__acao`: borda de 45% de papel, raio 999px, e no hover ele
   inverte para papel cheio. Não inventei um botão novo. */
.faq__acao{
  display:inline-flex; align-items:center; gap:.5em;
  margin-top:clamp(22px,3.2vh,38px);
  padding:.72em 1.35em; border:1px solid var(--pap-45); border-radius:999px;
  color:var(--paper); text-decoration:none;
  font-size:clamp(13px,.96vw,16px); line-height:1;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease);
}
.faq__acao span{ display:inline-block;
  transition:transform .35s var(--ease); }
.faq__acao:hover{ background:var(--paper); color:var(--breu); border-color:var(--paper); }
.faq__acao:hover span{ transform:translate(2px,-2px); }

.faq__grade{
  display:grid; grid-template-columns:var(--dobra-cols);
  gap:0 var(--dobra-gap);
  border-top:1px solid rgba(242,242,242,.14);
  padding-top:clamp(22px,3.4vh,42px);
}
/* `align-self:start` para a coluna não esticar até o pé da sanfona: o botão
   tem que ficar logo abaixo do texto, não flutuando no meio de um vão. */
.faq__lado{ grid-column:1; align-self:start; }
.faq__lead{
  margin:clamp(18px,2.6vh,30px) 0 0; max-width:34ch;
  font-size:clamp(13px,.96vw,16px); line-height:1.55; color:var(--pap-70);
}

/* ── a sanfona ──
   <details>/<summary> nativo: sem JS, abre com teclado, e funciona mesmo
   se o script quebrar. O marcador padrão sai e vira o + da direita. */
.faq__lista{ grid-column:2; list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:clamp(7px,.8vw,12px); }
.qa{
  background:#141416; border:1px solid rgba(242,242,242,.10);
  border-radius:clamp(8px,.85vw,14px);
}
.qa__p{
  display:flex; align-items:center; gap:clamp(8px,.8vw,14px);
  padding:clamp(15px,1.5vw,24px) clamp(18px,1.7vw,28px);
  cursor:pointer; list-style:none;
  font-family:var(--display); font-weight:400;
  font-size:clamp(14px,1.1vw,19px); line-height:1.3; letter-spacing:-.01em;
}
/* O número da pergunta, como no print. `aria-hidden` no HTML: a lista já é
   um <ol>, e o leitor de tela numera sozinho. Sem isso ele leria "1. 1." */
.qa__n{ flex:none; color:var(--pap-45); }
/* empurra o sinal para a direita sem precisar de space-between, que com o
   número no meio deixaria a pergunta boiando entre dois vãos */
.qa__p > span:not(.qa__n){ margin-right:auto; }
.qa__p::-webkit-details-marker{ display:none; }
/* ⚠️ O `+` agora vive DENTRO de um círculo, como no print. Pseudo-elemento
   com `display:grid; place-items:center` porque `line-height` sozinho não
   centra um glifo de `+` num círculo pequeno: ele senta alto. */
.qa__p::after{
  content:'+'; flex:none;
  display:grid; place-items:center;
  width:clamp(24px,2vw,30px); height:clamp(24px,2vw,30px);
  border:1px solid rgba(242,242,242,.22); border-radius:50%;
  color:var(--pap-45); font-size:1.05em; line-height:1;
  transition:transform .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease);
}
.qa[open] .qa__p::after{ transform:rotate(45deg); color:var(--paper); border-color:var(--pap-45); }
.qa__p:hover::after{ color:var(--paper); border-color:var(--pap-45); }
.qa__r{
  padding:0 clamp(18px,1.7vw,28px) clamp(18px,1.7vw,26px);
}
.qa__r p{
  margin:0; max-width:62ch;
  font-size:clamp(13px,.96vw,16px); line-height:1.6; color:var(--pap-70);
}

@media (max-width:900px){
  .faq__grade{ grid-template-columns:1fr; }
  .faq__lado,.faq__lista{ grid-column:1; }
  .faq__lista{ margin-top:clamp(24px,4vh,42px); }
  .faq__lead{ max-width:54ch; }
}

/* ═══════════════════ BLOG ═══════════════════ */
/* Listagem: data numa pastilha de papel sobre a foto, título, resumo e a
   seta no pé, com um fio embaixo de cada cartão. */
.blog{ padding:calc(var(--pad) + clamp(90px,12vh,160px)) var(--pad) clamp(60px,10vh,120px); }
.blog__cabeca{ margin-bottom:clamp(34px,6vh,70px); }
.blog__rot{
  margin:0 0 var(--dobra-rot);
  font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
.blog__tit{
  margin:0; font-family:var(--display); font-weight:300;
  font-size:var(--disp); line-height:1.1; letter-spacing:-.025em;
}
.blog__lead{
  margin:clamp(18px,2.6vh,30px) 0 0; max-width:46ch;
  font-size:clamp(14px,1.2vw,21px); line-height:1.6; color:var(--pap-70);
}
.blog__grade{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,40px);
}
.post__link{
  display:flex; flex-direction:column; height:100%;
  color:inherit; text-decoration:none;
}
.post__fig{
  position:relative; margin:0; overflow:hidden;
  border-radius:clamp(6px,.6vw,12px);
}
.post__img{ width:100%; aspect-ratio:1/1.05; object-fit:cover; display:block;
  transition:transform 1.1s var(--ease); }
@media (hover:hover){ .post__link:hover .post__img{ transform:scale(1.04); } }
/* pastilha de papel — o mesmo par invertido do cartão do "diferencia" */
.post__data{
  position:absolute; z-index:2;
  top:clamp(14px,1.4vw,24px); left:clamp(14px,1.4vw,24px);
  padding:.5em .85em; border-radius:clamp(4px,.4vw,7px);
  background:var(--paper); color:var(--breu);
  font-size:clamp(11px,.8vw,13px); line-height:1;
}
.post__tit{
  margin:clamp(16px,2.2vh,26px) 0 0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(19px,1.9vw,34px); line-height:1.15; letter-spacing:-.02em;
  /* dois lados no máximo: o print corta em um só, mas cortar título esconde
     conteúdo. Duas linhas seguram a grade sem esconder nada. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.post__pe{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-top:auto; padding:clamp(12px,1.8vh,20px) 0 clamp(14px,2vh,22px);
  border-bottom:1px solid rgba(242,242,242,.14);
}
.post__txt{
  margin:0; font-size:clamp(13px,.96vw,16px); line-height:1.55;
  color:var(--pap-70);
}
.post__seta{
  flex:none; font-size:clamp(15px,1.2vw,20px); line-height:1;
  transition:transform .35s var(--ease);
}
@media (hover:hover){ .post__link:hover .post__seta{ transform:translate(3px,-3px); } }

@media (max-width:1080px){ .blog__grade{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .blog__grade{ grid-template-columns:1fr; } }

/* ═══════════════════ ARTIGO DO BLOG ═══════════════════ */
/* Uma página destas por post. Molde medido nos prints que o Arthur mandou
   (template Kanso): título grande, deck cinza, uma fila de meta em
   rótulo/valor separada por barras, capa de cantos arredondados e o corpo
   começando por um parágrafo maior que o resto.

   A ÚNICA divergência do print, e é deliberada: lá o corpo é uma coluna
   centrada com teto de largura. Aqui não pode, pela regra do site (ver
   "Largura" no README: nada tem max-width, tudo vai de ponta a ponta com o
   --pad). Então o corpo usa a MESMA solução que as páginas legais já usam
   para texto longo: `h2` na coluna estreita da esquerda, parágrafo na larga
   da direita, com o parágrafo travado em 62ch. A página enche a tela e a
   linha continua legível. */
.art{ padding:calc(var(--pad) + clamp(90px,12vh,160px)) var(--pad) clamp(60px,10vh,120px); }

.art__migalha{
  margin:0 0 var(--dobra-rot);
  font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
.art__migalha a{ color:inherit; text-decoration:none; }
.art__migalha a:hover{ color:var(--paper); }
.art__migalha span[aria-hidden]{ margin:0 .5em; }

/* O título do post é o gesto grande da página, como nas legais. NÃO usa o
   --disp: aquele clamp é o das dobras da home e para em 56px, o que num
   post deixaria o título do tamanho de um subtítulo. Teto medido em 7.4vw;
   ver "Medidas" no README. */
.art__titulo{
  margin:0; font-family:var(--display); font-weight:300;
  font-size:clamp(28px,7.4vw,118px); line-height:1.04; letter-spacing:-.03em;
}
.art__deck{
  margin:clamp(18px,2.6vh,32px) 0 0; max-width:44ch;
  font-size:clamp(15px,1.35vw,24px); line-height:1.5; color:var(--pap-70);
}

/* fila de meta: rótulo cinza, valor em papel, barra entre os pares.
   A barra é aria-hidden porque leitor de tela já separa os <div>. */
.art__meta{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:0 clamp(10px,1vw,18px);
  margin:clamp(30px,5vh,64px) 0 0;
  font-size:clamp(12px,.95vw,15px); line-height:1.6;
}
.art__meta div{ display:flex; gap:.5em; }
.art__meta dt{ margin:0; color:var(--pap-45); }
.art__meta dd{ margin:0; color:var(--paper); }
.art__meta i{ font-style:normal; color:var(--pap-45); }

.art__capa{
  margin:clamp(26px,4.5vh,56px) 0 0; overflow:hidden;
  border-radius:clamp(8px,.9vw,18px);
}
.art__capa img{
  display:block; width:100%; aspect-ratio:16/8; object-fit:cover;
}
/* o parágrafo de abertura: maior que o corpo e em papel cheio, como no
   print. É o único trecho do texto que não entra na grade de duas colunas,
   porque ele é a ponte entre a capa e o corpo. */
.art__abre{
  margin:clamp(46px,8vh,110px) 0 0; max-width:34ch;
  font-family:var(--display); font-weight:400;
  font-size:clamp(21px,2.5vw,44px); line-height:1.2; letter-spacing:-.02em;
}

.art__corpo{
  display:grid;
  grid-template-columns:minmax(0,24ch) minmax(0,1fr);
  column-gap:clamp(24px,5vw,90px);
  align-items:start;
  margin-top:clamp(46px,8vh,110px);
}
.art__corpo h2{
  grid-column:1;
  margin:clamp(40px,6vh,72px) 0 0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(17px,1.7vw,30px); line-height:1.2; letter-spacing:-.015em;
}
.art__corpo > :not(h2){ grid-column:2; }
.art__corpo h2:first-child{ margin-top:0; }
/* Cada seção é um h2 na coluna estreita e UM bloco na larga. O bloco existe
   porque a seção tem duas partes (prosa e a lista de pontos) e filho de grid
   tem que ser direto: sem ele, a lista cairia numa linha própria e
   descolaria do título. */
.art__bloco{ margin-top:clamp(40px,6vh,72px); }
.art__bloco:first-child{ margin-top:0; }
.art__corpo h2:first-child + .art__bloco{ margin-top:0; }
.art__prosa > p:last-child{ margin-bottom:0; }
.art__corpo p{
  margin:0 0 1.15em; color:var(--pap-70);
  font-size:clamp(14px,1.1vw,17px); line-height:1.65; max-width:62ch;
}
.art__corpo strong{ color:var(--paper); font-weight:500; }
.art__corpo a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; }

/* os três pontos de cada seção: termo em papel, explicação em cinza, fio
   embaixo. Mesmo fio de 1px do resto do site. */
.art__pontos{ list-style:none; margin:clamp(10px,1.6vh,20px) 0 0; padding:0; max-width:62ch; }
.art__pontos li{
  padding:clamp(14px,2vh,22px) 0;
  border-bottom:1px solid rgba(242,242,242,.14);
}
.art__pontos li:first-child{ border-top:1px solid rgba(242,242,242,.14); }
.art__pontos b{
  display:block; font-weight:500; color:var(--paper);
  font-size:clamp(15px,1.25vw,19px); line-height:1.3; letter-spacing:-.01em;
}
.art__pontos span{
  display:block; margin-top:.45em; color:var(--pap-70);
  font-size:clamp(13px,1.02vw,16px); line-height:1.6;
}

/* fontes: lista de links, cada um com o veículo em cima e a URL embaixo */
.art__fontes{ list-style:none; margin:clamp(10px,1.6vh,20px) 0 0; padding:0; max-width:62ch; }
.art__fontes li{
  padding:clamp(12px,1.8vh,20px) 0;
  border-bottom:1px solid rgba(242,242,242,.14);
}
.art__fontes li:first-child{ border-top:1px solid rgba(242,242,242,.14); }
.art__fontes a{
  color:var(--paper); text-decoration:none;
  font-size:clamp(14px,1.1vw,17px); line-height:1.45;
  border-bottom:1px solid transparent; transition:border-color .35s var(--ease);
}
.art__fontes a:hover{ border-bottom-color:var(--pap-45); }
.art__fontes small{
  display:block; margin-top:.35em; color:var(--pap-45);
  font-size:clamp(11px,.85vw,13px); line-height:1.4; word-break:break-all;
}

/* pé do artigo: etiquetas, quem escreveu e a volta para a listagem */
.art__pe{
  margin-top:clamp(60px,10vh,130px);
  border-top:1px solid rgba(242,242,242,.14);
  padding-top:clamp(24px,4vh,48px);
  display:grid; grid-template-columns:minmax(0,24ch) minmax(0,1fr);
  column-gap:clamp(24px,5vw,90px); row-gap:clamp(24px,4vh,44px);
  align-items:start;
}
.art__tagsRot,.art__autorRot{
  margin:0; font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
.art__tags{
  grid-column:2; list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:clamp(8px,.8vw,12px);
}
.art__tags li{
  padding:.5em .9em; border-radius:clamp(4px,.4vw,7px);
  border:1px solid rgba(242,242,242,.22); color:var(--pap-70);
  font-size:clamp(11px,.8vw,13px); line-height:1;
  letter-spacing:.08em; text-transform:uppercase;
}
.art__autor{ grid-column:2; margin:0; max-width:62ch; }
.art__autor b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(17px,1.5vw,26px); line-height:1.2; letter-spacing:-.01em;
}
.art__autor span{
  display:block; margin-top:.5em; color:var(--pap-70);
  font-size:clamp(13px,1.02vw,16px); line-height:1.6;
}
.art__volta{
  grid-column:2;
  display:inline-block; justify-self:start;
  color:var(--paper); text-decoration:none;
  font-size:clamp(14px,1.2vw,21px); line-height:1.6;
  border-bottom:1px solid var(--pap-45);
  transition:border-color .35s var(--ease);
}
.art__volta span{ display:inline-block; margin-right:.35em;
  transition:transform .35s var(--ease); }
.art__volta:hover{ border-bottom-color:var(--paper); }
.art__volta:hover span{ transform:translateX(-3px); }

@media (max-width:900px){
  .art__corpo,.art__pe{ grid-template-columns:1fr; }
  .art__corpo h2{ grid-column:1; }
  .art__corpo > :not(h2){ grid-column:1; }
  .art__bloco{ margin-top:clamp(18px,2.6vh,28px); }
  .art__corpo p{ font-size:clamp(14px,2.2vw,20px); max-width:58ch; }
  .art__tags,.art__autor,.art__volta{ grid-column:1; }
  .art__tagsRot,.art__autorRot{ margin-bottom:clamp(-16px,-2vh,-10px); }
  .art__abre{ max-width:none; }
  .art__deck{ max-width:none; }
  .art__capa img{ aspect-ratio:16/10; }
}

/* ═══════════════════ PÁGINA DE SERVIÇO ═══════════════════ */
/* Uma por especialidade. Molde do destello /expertise/<slug>, medido a
   1600px: rótulo pequeno à esquerda, corpo na metade direita, uma declaração
   grande em largura cheia e uma lista numerada.
   Traduzido para a nossa gramática: os blocos usam a MESMA grade das dobras
   (--dobra-cols), o display usa o --disp, e os fios são os mesmos de 1px. */
.serv{ padding:calc(var(--pad) + clamp(90px,12vh,160px)) var(--pad) clamp(60px,10vh,120px); }

.serv__cabeca{ margin-bottom:clamp(40px,7vh,90px); }
.serv__migalha{
  margin:0 0 var(--dobra-rot);
  font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
.serv__migalha a{ color:inherit; text-decoration:none; }
.serv__migalha a:hover{ color:var(--paper); }
.serv__migalha span[aria-hidden]{ margin:0 .5em; }
.serv__titulo{
  margin:0; font-family:var(--display); font-weight:300;
  font-size:var(--disp); line-height:1.1; letter-spacing:-.025em;
}
.serv__lead{
  margin:clamp(18px,2.6vh,30px) 0 0; max-width:46ch;
  font-size:clamp(15px,1.35vw,24px); line-height:1.5; color:var(--pap-70);
}

/* ── blocos rótulo | corpo ── */
.serv__bloco{
  display:grid; grid-template-columns:var(--dobra-cols);
  gap:0 var(--dobra-gap);
  border-top:1px solid rgba(242,242,242,.14);
  padding:clamp(24px,3.6vh,44px) 0 clamp(40px,6vh,80px);
}
.serv__rot{
  grid-column:1; grid-row:1; margin:0;
  font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
/* a linha curta que fica sob o rótulo, na coluna estreita */
.serv__linha{
  grid-column:1; grid-row:2; align-self:start;
  margin:clamp(16px,2.4vh,28px) 0 0; max-width:24ch;
  font-family:var(--display); font-weight:400;
  font-size:clamp(17px,1.5vw,26px); line-height:1.25; letter-spacing:-.01em;
}
.serv__corpo{ grid-column:2; grid-row:1 / span 2; }
.serv__corpo p{
  margin:0 0 clamp(16px,2.2vh,26px);
  font-size:clamp(14px,1.2vw,21px); line-height:1.6; color:var(--pap-70);
}
.serv__corpo p:last-child{ margin-bottom:0; }

/* ── a declaração em largura cheia ── */
.serv__dec{
  margin:0 0 clamp(40px,6vh,80px);
  font-family:var(--display); font-weight:300;
  font-size:var(--disp); line-height:1.1; letter-spacing:-.025em;
  /* medida em `em` para acompanhar o --disp sozinha; 17.5em deixava a frase
     enchendo só 61% e lendo como texto perdido na largura cheia. */
  max-width:12.8em;
}
.serv__dec em{ font-style:italic; font-weight:400; }

/* ── lista de entregáveis ── */
.serv__bloco--lista .serv__lista{ grid-column:2; grid-row:1 / span 2; }
.serv__lista{ list-style:none; margin:0; padding:0; }
.serv__lista li{
  display:flex; align-items:baseline; gap:clamp(14px,1.6vw,28px);
  padding:clamp(12px,1.8vh,20px) 0;
  border-bottom:1px solid rgba(242,242,242,.14);
}
.serv__lista li:first-child{ padding-top:0; }
.serv__lista li span:first-child{
  flex:none; font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; color:var(--pap-45);
  font-variant-numeric:tabular-nums;
}
.serv__lista li span:last-child{
  font-family:var(--display); font-weight:400;
  font-size:clamp(17px,1.5vw,26px); line-height:1.2; letter-spacing:-.01em;
}

.serv__volta{
  display:inline-block; margin-top:clamp(20px,3vh,36px);
  color:var(--paper); text-decoration:none;
  font-size:clamp(14px,1.2vw,21px); line-height:1.6;
  border-bottom:1px solid var(--pap-45);
  transition:border-color .35s var(--ease);
}
.serv__volta span{ display:inline-block; margin-right:.35em;
  transition:transform .35s var(--ease); }
.serv__volta:hover{ border-bottom-color:var(--paper); }
.serv__volta:hover span{ transform:translateX(-3px); }

@media (max-width:900px){
  .serv__bloco{ grid-template-columns:1fr; }
  .serv__rot{ grid-row:1; }
  .serv__linha{ grid-row:2; max-width:none; }
  .serv__corpo,.serv__bloco--lista .serv__lista{
    grid-column:1; grid-row:3; margin-top:clamp(20px,3vh,32px);
  }
  .serv__corpo p{ font-size:clamp(14px,2.2vw,20px); max-width:54ch; }
  .serv__lead{ max-width:none; font-size:clamp(15px,2.6vw,22px); }
  /* empilhado a coluna já é estreita; o teto em `em` apertava a declaração
     a 94% e a deixava a uma palavra de quebrar. */
  .serv__dec{ max-width:none; }
}

/* ═══════════════════ ESPECIALIDADES NA HOME ═══════════════════ */
/* Mesma grade e mesmas cartas da página especialidades.html — só o invólucro
   muda, porque na home ela é uma dobra e lá é a página inteira. */
.espHome{ padding:0 var(--pad) clamp(90px,17vh,200px); }
/* ⚠️ Ela abria com a `.etapas__sub`, que é subtítulo (17 a 26px, peso 400) e
   foi feita para o "Nosso processo · Nucleos®" DENTRO da dobra do processo.
   Emprestada aqui, não anunciava dobra nenhuma: o Arthur passou por cima e
   disse "quase não percebi que era a parte de falar o que fazemos". Agora
   abre como as outras dobras da home: rótulo em cima e título no `--disp`,
   o mesmo corpo da capa e da dobra do estúdio. */
.espHome__rot{
  margin:0 0 var(--dobra-rot);
  padding-top:clamp(20px,3vh,34px);
  border-top:1px solid rgba(242,242,242,.14);
  font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
.espHome__tit{
  margin:0 0 clamp(30px,5vh,60px);
  font-family:var(--display); font-weight:300;
  font-size:var(--disp); line-height:1.05; letter-spacing:-.025em;
}

/* ═══════════════════ PÁGINA DE ESPECIALIDADES ═══════════════════ */
/* Molde do destello /expertise: declaração grande em cima, fio, e uma grade
   numerada embaixo. Duas diferenças nossas, as duas de propósito:
   1. Lá a imagem só aparece no HOVER. Aqui ela está sempre visível — hover
      não existe no toque, e a grade é o conteúdo principal da página.
   2. Lá são 4 colunas com 8 itens. Aqui são 6 itens, então 3 colunas × 2
      linhas fecham a grade sem sobra. */
.esp{ padding:calc(var(--pad) + clamp(90px,12vh,160px)) var(--pad) clamp(60px,10vh,120px); }

.esp__cabeca{ margin-bottom:clamp(30px,5vh,60px); }
.esp__rot{
  margin:0 0 var(--dobra-rot);
  font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
.esp__dec{
  margin:0; font-family:var(--display); font-weight:300;
  /* Mesmo --disp da capa e das dobras da home. A medida em `em` acompanha
     sozinha se o --disp mudar; sem ela a frase encheria ~45% da largura
     cheia e leria como texto perdido. TETO MEDIDO — ver README. */
  font-size:var(--disp); line-height:1.1; letter-spacing:-.025em;
  max-width:17.5em;
}

.esp__sub{
  margin:0 0 clamp(20px,3vh,34px);
  padding-top:clamp(20px,3vh,34px);
  border-top:1px solid rgba(242,242,242,.14);
  font-family:var(--display); font-weight:400;
  font-size:clamp(17px,1.5vw,26px); line-height:1.2; letter-spacing:-.01em;
}

.esp__grade{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.2vw,20px);
}

/* A carta é o mesmo objeto que o .obra do carrossel: imagem sangrando,
   véu por cima para o texto não brigar, e o texto assentado no pé. */
.carta{
  position:relative; overflow:hidden;
  aspect-ratio:4/5;
  border-radius:clamp(8px,.85vw,16px);
  background:#141416; color:var(--paper);
}
/* A carta inteira é o alvo do clique, não só o título. */
.carta__link{
  position:absolute; inset:0; display:block;
  color:inherit; text-decoration:none;
}
/* ── o círculo de "isto é clicável" ──
   ⚠️ Ele NÃO aparece só no hover. Mesmo motivo da imagem: hover não existe
   no toque, e a pista de que a carta é clicável é justamente o que falta no
   telefone. Ele fica sempre visível, discreto; o hover só inverte. */
.carta__ir{
  position:absolute; z-index:3;
  top:clamp(14px,1.6vw,24px); right:clamp(14px,1.6vw,24px);
  width:clamp(30px,2.4vw,42px); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--pap-45); border-radius:50%;
  font-size:clamp(13px,1vw,17px); line-height:1;
  color:var(--paper); opacity:.75;
  transition:opacity .35s var(--ease), background .35s var(--ease),
             color .35s var(--ease), border-color .35s var(--ease),
             transform .35s var(--ease);
}
@media (hover:hover){
  .carta:hover .carta__ir{
    opacity:1; background:var(--paper); color:var(--breu);
    border-color:var(--paper); transform:translate(2px,-2px);
  }
}
.carta__link:focus-visible{ outline:2px solid var(--paper); outline-offset:3px; }
.carta__img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), opacity .5s var(--ease);
  opacity:.55;   /* sempre visível, mas atrás do texto */
}
/* véu: escuro no pé, onde o texto assenta */
.carta::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 30%,
                                     rgba(0,0,0,.35) 58%, rgba(0,0,0,.88) 100%);
}
/* O hover só REALÇA o que já está lá — não revela nada. Onde não houver
   ponteiro, a carta já está no estado legível. */
@media (hover:hover){
  .carta:hover .carta__img{ opacity:.8; transform:scale(1.04); }
}
.carta__num{
  position:absolute; z-index:2;
  top:clamp(16px,1.8vw,28px); left:clamp(16px,1.8vw,28px);
  margin:0; font-family:var(--display); font-weight:300;
  font-size:clamp(34px,4.4vw,76px); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.carta__pe{
  position:absolute; z-index:2;
  left:clamp(16px,1.8vw,28px); right:clamp(16px,1.8vw,28px);
  bottom:clamp(16px,2vw,30px);
}
.carta__pe h3{
  margin:0 0 .4em; font-family:var(--display); font-weight:400;
  font-size:clamp(17px,1.45vw,26px); line-height:1.15; letter-spacing:-.015em;
}
.carta__pe p{
  margin:0; font-size:clamp(13px,.96vw,16px); line-height:1.5;
  color:var(--pap-70);
}

@media (max-width:1080px){
  .esp__grade{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .esp__grade{ grid-template-columns:1fr; }
  .carta{ aspect-ratio:5/4; }   /* deitada: em pé viraria uma torre no telefone */
}

/* ═══════════════════ PÁGINA DE PROJETO ═══════════════════ */
/* Mesma identidade da home: preta, DM Sans, reveal cromático nos textos.
   O ritmo é o da referência — rótulo, declaração, corpo, imagem, repete. */
/* A coluna vai de ponta a ponta, na MESMA largura da barra do topo: só o
   --pad de cada lado. Havia um teto de 1120px centrado, e ele apertava o
   título grande a ponto de parecer quebrado. */
/* O corpo de display desta página. Título de abertura e declaração de bloco
   compartilham ele — ver a nota em `.proj__titulo`. */
.proj{
  --proj-dec:clamp(24px,4vw,72px);
  /* Teto de medida da prosa. 49ch, MEDIDO: dá 62 caracteres por linha, o
     padrão do site. Era 62ch e dava 79 caracteres, porque `ch` é a largura
     do "0" e a razão entre ela e a largura média das letras muda com o corpo
     do tipo (a DM Sans é variável em `opsz`). Passava despercebido enquanto a
     página tinha dois parágrafos; com uma retrospectiva de 12.000px de
     altura, 79 caracteres por linha cansam de verdade. */
  --medida: 49ch;
  padding-top:calc(var(--pad) + clamp(90px,12vh,160px));
}
/* ⚠️ MARGEM, não padding. Vários filhos diretos têm `border-top` (a ficha
   técnica desde sempre, e agora os interlúdios da retrospectiva). Com
   padding o fio corre de ponta a ponta da JANELA, 46px além da barra do topo
   de cada lado; com margem, a caixa JÁ é a coluna de conteúdo e o fio
   alinha. Mesmo conserto que a `.mtd > *` da página do método. */
.proj > *{ margin-inline:var(--pad); }
.proj > .proj__capa,
.proj > .proximo{ margin-inline:0; }   /* estes sangram de propósito */

.proj__cabeca{ margin-bottom:clamp(34px,6vh,72px); }
.proj__nome{
  margin:0 0 clamp(14px,2vh,26px);
  font-size:clamp(12px,.95vw,15px); font-weight:500; color:var(--pap-45);
}
.proj__titulo{
  margin:0; font-family:var(--display); font-weight:300;
  /* Mesmo corpo da declaração dos blocos (`.proj__dec`, o "Competir por
     preço…" que vem embaixo do rótulo "Desafio"). Pedido do Arthur em
     27/08/2026: o h1 estava em 9.2vw e destoava de tudo que vinha depois.
     Os dois leem o MESMO token para não voltarem a divergir. */
  font-size:var(--proj-dec); line-height:1.06; letter-spacing:-.02em;
}
.proj__titulo em,.proj__dec em,.proj__fecho-txt em{ font-style:italic; font-weight:400; }

.proj__capa{ margin-block:0 clamp(34px,6vh,72px); height:clamp(280px,62vh,660px); overflow:hidden; }
.proj__capa img{
  width:100%; height:100%; object-fit:cover;
  /* ⚠️ Corte ancorado no LOGO, não no centro geométrico. No mockup da
     fachada o logo fica à direita do centro e um pouco acima da metade; com
     `object-position` no padrão (50% 50%) o corte do telefone, que é
     horizontal e pesado, comia parte dele. Se a foto da capa for trocada,
     confira este valor: ele é específico deste enquadramento. */
  object-position:56% 44%;
}

.proj__lead{
  margin-block:0 clamp(44px,8vh,96px); max-width:38ch;
  font-family:var(--display); font-weight:300;
  font-size:clamp(19px,2.1vw,34px); line-height:1.28; letter-spacing:-.01em;
}

/* ── ficha técnica ── */
.proj__ficha{
  margin-block:0 clamp(44px,8vh,96px);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vh,34px) clamp(20px,4vw,64px);
  border-top:1px solid rgba(242,242,242,.14);
  padding-top:clamp(22px,3.5vh,40px);
}
.proj__campo--largo{ grid-column:span 2; }
.proj__ficha dt{
  margin:0 0 .5em; font-size:clamp(11px,.85vw,13px); font-weight:500;
  color:var(--pap-45);
}
.proj__ficha dd{ margin:0; font-size:clamp(15px,1.3vw,21px); }
.proj__ficha a{ text-decoration:underline; text-underline-offset:4px; }

/* ── figuras do meio ── */
.proj__figura{ margin-block:0 clamp(44px,8vh,96px); }
.proj__figura img{ width:100%; height:clamp(220px,46vh,520px); object-fit:cover; display:block; }
.proj__figura--par{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.4vw,22px); }

/* ── blocos de texto ── */
.proj__bloco{ margin-block:0 clamp(44px,8vh,96px); }
.proj__rot{
  margin:0 0 clamp(14px,2vh,24px);
  font-size:clamp(11px,.85vw,13px); font-weight:500; color:var(--pap-45);
}
.proj__dec{
  margin:0 0 clamp(22px,3.5vh,44px);
  font-family:var(--display); font-weight:300;
  font-size:var(--proj-dec); line-height:1.06; letter-spacing:-.02em;
  max-width:24ch;
}
.proj__corpo{ max-width:var(--medida); }
.proj__corpo p{
  margin:0 0 1.1em; color:var(--pap-70);
  font-size:clamp(15px,1.15vw,18px); line-height:1.55;
}
.proj__corpo p:last-child{ margin-bottom:0; }

/* ══════ RETROSPECTIVA ══════
   Peças que só existem quando a página de projeto é uma retrospectiva e não
   um case. Ver "Página de projeto" no README. */

/* Ficha de dois campos. A de quatro divide a largura em 4 colunas; com dois
   campos aquilo virava duas colunas de 25% e um vão morto de metade da
   página. Aqui os dois ocupam metade cada. */
.proj__ficha--dupla{ grid-template-columns:repeat(2,minmax(0,1fr)); }

/* O eco fecha o parágrafo de um mês: é conclusão, não corpo. Sobe para papel
   cheio e vira itálico de display, o mesmo papel que o .etapa__eco faz na
   home. Especificidade (0,2,0) para ganhar de `.proj__corpo p` (0,1,1). */
.proj__corpo .proj__eco,
.proj__interCorpo .proj__eco{
  margin:clamp(20px,3vh,32px) 0 0;
  font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(16px,1.4vw,24px); line-height:1.35; letter-spacing:-.01em;
  color:var(--paper);
}
.proj__corpo .proj__forte{ color:var(--paper); }

/* A pergunta de setembro sozinha na linha. A quebra é dele e é a virada da
   narrativa: sai do corpo e ganha corpo de display, sem virar declaração. */
.proj__corpo .proj__pergunta{
  margin:clamp(18px,2.6vh,30px) 0;
  font-family:var(--display); font-weight:300;
  font-size:clamp(19px,1.9vw,32px); line-height:1.2; letter-spacing:-.02em;
  color:var(--paper);
}

/* A fila de nomes. Não é prosa: é para ser varrida, então entrelinha larga,
   papel cheio e fios em cima e embaixo separando do texto corrido. */
.proj__interCorpo .proj__nomes{
  margin:clamp(22px,3.2vh,36px) 0;
  padding-block:clamp(18px,2.6vh,28px);
  border-top:1px solid rgba(242,242,242,.14);
  border-bottom:1px solid rgba(242,242,242,.14);
  font-size:clamp(14px,1.05vw,17px); line-height:1.85; color:var(--paper);
}

/* ── interlúdios ──
   As partes que atravessam o ano e não cabem num mês. Leem como pausa: sem
   rótulo de mês, coluna de texto centrada e mais estreita que a do
   calendário, e um fio em cima marcando a quebra. */
.proj__inter{
  margin-block:clamp(50px,9vh,120px);
  border-top:1px solid rgba(242,242,242,.14);
  padding-top:clamp(30px,5vh,60px);
}
.proj__interRot{
  margin:0 0 clamp(20px,3vh,38px);
  font-family:var(--display); font-weight:300;
  font-size:clamp(26px,3.6vw,64px); line-height:1.06; letter-spacing:-.03em;
}

/* ── tipo vazado ──
   O segundo recurso que veio da referência (pixelpiernyc), junto com a massa
   granulada. Lá o título de uma seção é contorno puro, sem preenchimento.
   É monocromático, então cabe na paleta travada sem abrir exceção nenhuma.

   ⚠️ Só a partir de 900px. Contorno de 1px num tipo de 26px (o piso do
   clamp, no telefone) fica anêmico e some contra o preto: medido, a haste da
   DM Sans Light a 26px tem cerca de 2px, então o contorno viraria quase toda
   a letra. No telefone o título fica sólido.

   ⚠️ `@supports` obrigatório. Sem `-webkit-text-stroke` o `color:transparent`
   sozinho apagaria o título. Com a guarda, quem não suporta vê texto sólido,
   que é o estado bom. */
@supports (-webkit-text-stroke: 1px currentColor) {
  @media (min-width:900px) {
    .proj__interRot{
      color:transparent;
      -webkit-text-stroke:1px var(--paper);
    }
    /* O reveal cromático pinta franja laranja/azul via `text-shadow`, e
       sombra NÃO some com `color:transparent`: ficariam fantasmas sólidos
       coloridos atrás de uma letra vazada. Aqui o vazado fica com o
       movimento do reveal e sem a franja. */
    .proj__interRot .pal{ text-shadow:none; }
  }
}
.proj__interCorpo{ max-width:var(--medida); }
.proj__interCorpo p{
  margin:0 0 1.1em; color:var(--pap-70);
  font-size:clamp(15px,1.15vw,18px); line-height:1.55;
}
.proj__interCorpo p:last-child{ margin-bottom:0; }

/* ── o que o ano deixou ── */
.proj__licoes{ margin-block:clamp(50px,9vh,120px); }
.proj__licoesLista{
  /* margin-BLOCK e padding-inline:0 pelo mesmo motivo da .mtd__passos: o
     atalho `margin:0` e o padding de 40px que o navegador dá a toda <ol>
     tiram a lista do alinhamento da página. */
  margin-block:clamp(22px,3.4vh,40px); padding-inline:0;
  list-style:none; counter-reset:licao;
  display:grid; gap:clamp(14px,2vh,22px);
  border-top:1px solid rgba(242,242,242,.14);
  padding-top:clamp(20px,3vh,34px);
}
.proj__licoesLista li{
  counter-increment:licao;
  display:grid; grid-template-columns:2.6em 1fr; align-items:baseline;
  font-family:var(--display); font-weight:300;
  font-size:clamp(18px,1.75vw,30px); line-height:1.2; letter-spacing:-.015em;
}
.proj__licoesLista li::before{
  content:counter(licao,decimal-leading-zero);
  font-family:var(--grotesk); font-weight:500;
  font-size:clamp(11px,.85vw,13px); letter-spacing:.04em; color:var(--pap-45);
}
.proj__licoesEco{
  /* 44ch e não --medida: este é itálico de display, corpo maior, e a razão
      ch→caractere muda de novo. Medido. */
  margin:0; max-width:44ch;
  font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(16px,1.4vw,24px); line-height:1.35; color:var(--paper);
}

/* ── fecho ── */
.proj__fecho{ margin-block:clamp(20px,4vh,60px) clamp(60px,10vh,120px); }
.proj__fecho-pe{
  margin-block:clamp(24px,3.6vh,44px) 0; max-width:var(--medida);
  font-size:clamp(15px,1.15vw,18px); line-height:1.55; color:var(--pap-70);
}
.proj__fecho-txt{
  margin:0; font-family:var(--display); font-weight:300;
  /* Teto medido: 13.64× (PT é o limitante) → 6.86vw. Ficamos em 6.5. */
  font-size:clamp(23px,6.5vw,150px); line-height:1.04; letter-spacing:-.025em;
}

/* ── próximo projeto ── */
.proximo{
  position:relative; display:block; overflow:hidden;
  height:clamp(300px,64vh,640px);
}
.proximo__img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); transition:transform 1.2s var(--ease); }
.proximo:hover .proximo__img{ transform:scale(1.09); }
.proximo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 40%,
                                     rgba(0,0,0,.75) 100%);
}
.proximo__txt{
  position:absolute; left:var(--pad); right:var(--pad);
  bottom:clamp(24px,5vh,56px); z-index:2;
}
.proximo__rot{ margin:0 0 .6em; font-size:clamp(11px,.85vw,13px); color:var(--pap-45); }
.proximo__txt h2{
  margin:0 0 .3em; font-family:var(--display); font-weight:300;
  font-size:clamp(28px,4.4vw,76px); line-height:1; letter-spacing:-.02em;
}
.proximo__txt > p:last-child{ margin:0; color:var(--pap-70);
  font-size:clamp(13px,1.05vw,17px); }

/* ═══════════════════ DOCUMENTOS LEGAIS ═══════════════════ */
/* Texto longo na largura cheia. O truque: cada <h2> vai para uma coluna
   estreita à esquerda e o texto para a coluna larga à direita. A página ocupa
   tudo, mas o parágrafo mantém medida legível — linha corrida de ponta a
   ponta daria ~130 caracteres, ilegível em documento longo.
   Sem reveal cromático no corpo: em parágrafo de lei aquilo vira ruído. */
.doc{ padding:calc(var(--pad) + clamp(90px,12vh,160px)) var(--pad) clamp(60px,10vh,120px); }
.doc__cabeca{ margin-bottom:clamp(26px,4vh,48px); }
.doc__titulo{
  margin:0 0 clamp(12px,2vh,20px);
  font-family:var(--display); font-weight:300;
  /* teto medido na largura cheia; ver README */
  font-size:clamp(30px,9.5vw,190px); line-height:1.02; letter-spacing:-.03em;
}
.doc__data{ margin:0; color:var(--pap-45); font-size:clamp(12px,.95vw,15px); }

.doc__aviso{
  margin:0 0 clamp(34px,6vh,72px); max-width:none;
  border:1px solid rgba(242,242,242,.22); border-radius:clamp(6px,.6vw,12px);
  padding:clamp(14px,2vw,22px) clamp(16px,2.4vw,26px);
  color:var(--pap-70); font-size:clamp(13px,1.02vw,16px); line-height:1.5;
}
.doc__aviso strong{ color:var(--paper); font-weight:500; }

.doc__corpo{
  display:grid;
  grid-template-columns:minmax(0,24ch) minmax(0,1fr);
  column-gap:clamp(24px,5vw,90px);
  align-items:start;
}
.doc__corpo h2{
  grid-column:1;
  margin:clamp(34px,5vh,56px) 0 0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(17px,1.7vw,30px); line-height:1.2; letter-spacing:-.015em;
}
.doc__corpo > :not(h2){ grid-column:2; }
.doc__corpo h2:first-child{ margin-top:0; }
/* o primeiro parágrafo de cada seção alinha com o título dela */
.doc__corpo h2 + p{ margin-top:clamp(34px,5vh,56px); }
.doc__corpo h2:first-child + p{ margin-top:0; }
.doc__corpo p,.doc__corpo li{
  margin:0 0 1em; color:var(--pap-70);
  font-size:clamp(14px,1.1vw,17px); line-height:1.6; max-width:62ch;
}
.doc__corpo ul{ margin:0 0 1em; padding-left:1.2em; max-width:62ch; }
.doc__corpo li{ margin-bottom:.5em; }
.doc__corpo strong{ color:var(--paper); font-weight:500; }
.doc__corpo a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; }
.doc__corpo code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
  background:rgba(242,242,242,.1); padding:.15em .45em; border-radius:4px;
}

/* ═══════════════════ RODAPÉ ═══════════════════ */
.rodape{ padding:clamp(50px,8vh,110px) 0 0; overflow:hidden; }
.rodape > *:not(.rodape__marca){ padding-inline:var(--pad); }

.rodape__grade{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.1fr;
  grid-template-areas:
    "contato local  relogio"
    "contato nav    news";
  gap:clamp(28px,5vh,64px) clamp(24px,4vw,72px);
  border-top:1px solid rgba(242,242,242,.14);
  padding-top:clamp(30px,5vh,64px);
}

/* contato: o gesto grande do rodapé */
.rodape__contato{ grid-area:contato; display:grid; align-content:start; gap:.15em; }
.rodape__contato a{
  font-family:var(--display); font-weight:300;
  font-size:clamp(24px,3.4vw,58px); line-height:1.14; letter-spacing:-.025em;
  transition:opacity .3s var(--ease);
}
.rodape__contato a:hover{ opacity:.6; }

.rodape__local{ grid-area:local; margin:0; color:var(--pap-45);
  font-size:clamp(12px,.95vw,15px); line-height:1.45; }

/* relógio: hora de Goiás, não do visitante — é onde o estúdio está */
.rodape__relogio{ grid-area:relogio; margin:0; color:var(--pap-45);
  font-size:clamp(11px,.85vw,13px); letter-spacing:.1em; text-transform:uppercase;
  line-height:1.5; font-variant-numeric:tabular-nums; }

.rodape__nav{ grid-area:nav; display:flex; gap:clamp(20px,3vw,52px); }
.rodape__nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55em;
  font-size:clamp(13px,1.05vw,17px); }
.rodape__nav a{ color:var(--pap-70); transition:color .3s var(--ease); }
.rodape__nav a:hover{ color:var(--paper); }

/* newsletter */
.rodape__news{ grid-area:news; }
.rodape__newsTit{ margin:0 0 .9em; font-size:clamp(13px,1.05vw,17px); }
.rodape__campo{ display:flex; align-items:stretch;
  border:1px solid rgba(242,242,242,.18); border-radius:999px; overflow:hidden; }
.rodape__campo input{
  flex:1; min-width:0; background:none; border:0; color:var(--paper);
  font:inherit; font-size:clamp(13px,1.02vw,16px); padding:.85em 1.2em;
}
.rodape__campo input::placeholder{ color:var(--pap-45); }
.rodape__campo input:focus{ outline:none; }
.rodape__campo:focus-within{ border-color:var(--pap-45); }
.rodape__campo button{
  background:none; border:0; color:var(--paper); cursor:pointer;
  padding:0 1.2em; font:inherit; font-size:clamp(14px,1.1vw,18px);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.rodape__campo button:hover{ background:var(--paper); color:var(--breu); }
/* O aviso do envio da newsletter. Nasce vazio e só ocupa espaço quando tem
   texto, para não abrir um vão no rodapé enquanto ninguém enviou nada. */
.rodape__aviso{
  margin:8px 0 0; min-height:0;
  font-size:clamp(11px,.82vw,13px); line-height:1.45; color:var(--pap-70);
}
.rodape__aviso:empty{ display:none; }
.rodape__aviso--erro{ color:var(--paper); }
.rodape__newsTxt{ margin:1em 0 0; color:var(--pap-45);
  font-size:clamp(12px,.95vw,15px); line-height:1.5; max-width:42ch; }

/* base */
.rodape__base{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,40px); flex-wrap:wrap;
  margin-top:clamp(44px,8vh,110px);
  font-size:clamp(12px,.95vw,15px); color:var(--pap-45);
}
.rodape__base p{ margin:0; }
.rodape__redes{ list-style:none; margin:0; padding:0;
  display:flex; gap:clamp(14px,2vw,32px);
  letter-spacing:.08em; text-transform:uppercase; font-size:clamp(11px,.85vw,13px); }
.rodape__redes a{ transition:color .3s var(--ease); }
.rodape__redes a:hover{ color:var(--paper); }

/* wordmark gigante fechando o rodapé, INTEIRO.

   ⚠️ Ele já foi cortado pela borda de baixo, como na referência, e deixou de
   ser em 28/08/2026 a pedido dele: "deixa o VOKA completo até o final, e dá
   um espaçamento embaixo pra não ficar grudado".

   A versão anterior cortava na metade exata (`aspect-ratio:516.97 / 50.96`
   com `overflow:hidden`), e essa metade exata já era a correção de uma
   terceira: antes disso a altura era um `clamp(56px,11.5vw,220px)`, que não
   tem relação nenhuma com a altura do SVG e fazia a fração visível variar
   com a janela (58,3% a 625px, 62,3% a 1440). Foi esse corte em fração
   quebrada que ele viu como "a logo cortada, feito tipo partido". Se um dia
   o corte voltar, volte na metade exata, nunca num clamp de `vw`.

   Sem contêiner de altura, o SVG usa a proporção dele (516.97 × 101.92) e
   aparece inteiro em qualquer largura.

   ⚠️ O `margin-bottom` não é enfeite: o wordmark é o ÚLTIMO elemento do
   documento e o pé dele era o pé da página, então ele encostava na borda. */
.rodape__marca{
  margin-top:clamp(24px,4vh,56px);
  margin-bottom:clamp(26px,4.5vh,64px);
}
.rodape__marca svg{ display:block; width:100%; height:auto; color:var(--paper); opacity:.26; }

@media (max-width:760px){
  /* estreito demais para duas colunas: volta a empilhar */
  .doc__corpo{ grid-template-columns:1fr; }
  .doc__corpo h2,.doc__corpo > :not(h2){ grid-column:1; }
  .doc__corpo h2 + p{ margin-top:.7em; }
}

@media (max-width:900px){
  .rodape__grade{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "contato contato"
      "local   relogio"
      "nav     news";
  }
}
@media (max-width:600px){
  .rodape__grade{
    grid-template-columns:1fr;
    grid-template-areas:"contato" "local" "relogio" "nav" "news";
  }
  .rodape__base{ flex-direction:column; align-items:flex-start; gap:14px; }
}

@media (max-width:760px){
  .proj__ficha{ grid-template-columns:1fr; }
  .proj__campo--largo{ grid-column:auto; }
  .proj__figura--par{ grid-template-columns:1fr; }
  .rodape__redes{ text-align:left; }
  .rodape__nav{ flex-wrap:wrap; gap:12px 24px; }
}

/* entradas genéricas */
[data-rise]{ opacity:0; transform:translateY(26px);
  transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:var(--rd,0s); }
[data-rise].is-in{ opacity:1; transform:none; }

/* ═══════════════════ RESPONSIVO ═══════════════════ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; }
}

/* ═══════════════════ NUCLEOS · A PÁGINA DO MÉTODO ═══════════════════ */
/* Desenho tirado da home, a pedido dele. A regra que manda aqui é a mesma
   do resto do site: **nada de max-width na seção**. Tudo vai de ponta a
   ponta com só o --pad, alinhado com a barra do topo. Quem controla medida
   de leitura é o corpo do texto, no parágrafo. Ver "Largura" no README.

   A página é longa (doze dobras), e o ritmo alterna dobra-de-texto com
   dobra-de-lista de propósito: seis blocos de texto seguidos viram paredão.

   O token --mtd-dec é o corpo de display das declarações. É o mesmo papel
   que o --disp faz na home, mas menor: aqui as declarações são frases
   inteiras, não três palavras, e no --disp elas quebravam em cinco linhas. */
.mtd{
  /* Corpo de display das declarações.
     PISO 21px, MEDIDO: a maior linha da capa é "A plataforma que a VOKA
     construiu", razão 15.44 (largura ÷ font-size). A 375 a coluna tem 339px,
     e a 22px essa linha dava 340px: passava por UM pixel e jogava
     "construiu" sozinho na linha de baixo. A 21px dá 324px. É o mesmo piso
     do --disp da home, e não por acaso: mesma largura, mesma família.
     Em inglês a maior razão é 10.51, então quem manda aqui é o português. */
  --mtd-dec: clamp(21px, 3.05vw, 52px);
  --mtd-gap: clamp(44px, 8vh, 104px);
  /* Teto de medida da prosa desta página. 47ch, MEDIDO, não deduzido: dá 62
     caracteres por linha, a mesma medida da .estudio__corpo e das páginas
     legais. Não é o mesmo 54ch usado lá porque `ch` é a largura do "0" e a
     razão entre ela e a largura média das letras muda com o corpo do tipo
     (a DM Sans é variável em `opsz`). A 15px, 54ch dava 71 caracteres. */
  --medida: 47ch;
  padding-top:calc(var(--pad) + clamp(90px,12vh,160px));
}
/* ⚠️ MARGEM, não padding. As dobras têm `border-top`, e com padding o fio
   corria de ponta a ponta da JANELA, 46px além da barra do topo de cada
   lado. Na home o fio fica dentro do padding (é a `.estudio__grade`, filha
   da `.estudio` que carrega o --pad) e bate exatamente com a barra. Com
   margem, a caixa da dobra JÁ é a coluna de conteúdo, e o fio alinha. */
.mtd > *{ margin-inline:var(--pad); }

/* ── capa ── */
.mtd__cabeca{ margin-bottom:clamp(50px,9vh,120px); }
.mtd__rot{
  margin:0 0 clamp(14px,2vh,26px);
  font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
/* O nome é a maior peça de tipo da página e o laranja vive aqui.
   Teto medido na coluna cheia a 1920: "Nucleos®" dá razão 4.42, ou seja
   cabe muito antes do teto; o limite real é estético, não de largura. */
.mtd__nome{
  margin:0 0 clamp(18px,3vh,40px);
  font-family:var(--display); font-weight:300;
  font-size:clamp(46px,12vw,220px); line-height:.92; letter-spacing:-.035em;
}
/* O ® não acompanha o corpo do nome: em 220px ele viraria um balão. */
.mtd__nome sup{ font-size:.24em; vertical-align:super; letter-spacing:0; }
.mtd__dec{
  margin:0 0 clamp(16px,2.4vh,30px);
  font-family:var(--display); font-weight:300;
  font-size:var(--mtd-dec); line-height:1.12; letter-spacing:-.02em;
}
.mtd__lead{
  margin:0; max-width:var(--medida);
  font-size:clamp(14px,1.2vw,21px); line-height:1.6; color:var(--pap-70);
}

/* ── a grade padrão, a mesma da .estudio e da .faz ──
   rótulo e declaração dividem a coluna 1; o corpo ocupa a coluna 2 inteira,
   começando na linha 1. É esse alinhamento que amarra a página à home. */
.mtd__dobra{
  padding-block:var(--mtd-gap);
  display:grid;
  grid-template-columns:var(--dobra-cols);
  gap:0 var(--dobra-gap);
  border-top:1px solid rgba(242,242,242,.14);
}
/* Quando a dobra só apresenta a lista que vem embaixo, ela não tem coluna 2.
   Sem isso o título fica solto num vão de 40% da página. */
.mtd__dobra--solta{ padding-bottom:clamp(26px,4vh,54px); }
.mtd__dobra--solta .mtd__ddec{ max-width:22ch; }

.mtd__drot{
  grid-column:1; grid-row:1;
  margin:0 0 var(--dobra-rot);
  font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
.mtd__ddec{
  grid-column:1; grid-row:2; align-self:start;
  margin:0;
  font-family:var(--display); font-weight:300;
  font-size:var(--mtd-dec); line-height:1.12; letter-spacing:-.02em;
}
.mtd__corpo{ grid-column:2; grid-row:1 / span 2; }
.mtd__corpo p{
  /* Sem max-width: a direita bate com a direita da barra do topo. Quem
     segura a medida é o corpo do texto, igual à .estudio__corpo. */
  margin:0 0 clamp(16px,2.2vh,26px);
  font-size:clamp(14px,1.2vw,21px); line-height:1.6; color:var(--pap-70);
}
.mtd__corpo p:last-child{ margin-bottom:0; }
/* A linha que carrega o argumento sobe para papel cheio. Especificidade
   (0,2,0) para ganhar de `.mtd__corpo p` (0,1,1). */
.mtd__corpo .mtd__forte{ color:var(--paper); }
/* O eco é a frase em itálico que fecha a dobra: conclusão, não corpo. */
.mtd__corpo .mtd__eco,
.mtd__eco{
  margin-top:clamp(22px,3.4vh,40px);
  font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(16px,1.55vw,27px); line-height:1.35; letter-spacing:-.01em;
  color:var(--paper);
}
.mtd__eco--largo{ max-width:46ch; }

/* ── os cinco números ──
   auto-fit para não precisar de media query: a 375 caem em duas colunas,
   a 1440 ficam nos cinco. */
.mtd__numeros{
  padding-block:clamp(30px,5vh,60px) var(--mtd-gap);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(24px,3.4vh,44px) var(--dobra-gap);
  border-top:1px solid rgba(242,242,242,.14);
}
.mtd__num{ display:flex; flex-direction:column; gap:.45em; }
.mtd__num span:last-child{
  font-size:clamp(12px,.92vw,15px); line-height:1.4; color:var(--pap-45);
  max-width:16ch;
}
.mtd__cifra{
  font-family:var(--display); font-weight:300;
  font-size:clamp(44px,5.2vw,96px); line-height:.9; letter-spacing:-.04em;
}

/* ── os seis passos ── */
.mtd__passos{
  /* margin-BLOCK, não `margin:0`: o atalho zerava o margin-inline que a
     regra `.mtd > *` usa para alinhar, e a lista sangrava para fora da
     barra. E `padding-inline:0` mata os 40px que o navegador dá a toda
     <ol>, que empurravam a primeira coluna para dentro. */
  margin-block:0; padding-inline:0;
  padding-block:0 var(--mtd-gap); list-style:none;
  /* TRÊS colunas, não auto-fit: são seis passos, e em 3 eles fecham duas
     fileiras cheias. Com auto-fit o navegador escolhia 4 e sobrava uma
     fileira de 2, que faz a grade parecer quebrada. */
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(30px,4.6vh,56px) var(--dobra-gap);
}
@media (max-width:1080px){ .mtd__passos{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){  .mtd__passos{ grid-template-columns:1fr; } }
.passo{ border-top:1px solid rgba(242,242,242,.14); padding-top:clamp(16px,2.4vh,26px); }
.passo__n{
  margin:0 0 clamp(12px,1.8vh,20px);
  font-size:clamp(11px,.85vw,13px); font-weight:500; color:var(--pap-45);
}
.passo__nome{
  margin:0 0 clamp(10px,1.6vh,18px);
  font-family:var(--display); font-weight:300;
  font-size:clamp(19px,1.75vw,30px); line-height:1.12; letter-spacing:-.015em;
}
.passo__txt{
  margin:0; font-size:clamp(14px,1.05vw,17px); line-height:1.55; color:var(--pap-70);
}

/* ── as três fases da imersão ── */
.mtd__fases{
  padding-block:0 var(--mtd-gap);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(34px,5vh,60px) var(--dobra-gap);
}
.fase{ border-top:1px solid rgba(242,242,242,.14); padding-top:clamp(18px,2.6vh,30px); }
.fase__nome{
  margin:0 0 .55em;
  font-family:var(--display); font-weight:300;
  font-size:clamp(21px,2vw,34px); line-height:1.1; letter-spacing:-.02em;
}
.fase__mod{
  margin:0 0 clamp(16px,2.4vh,26px);
  font-size:clamp(11px,.85vw,13px); font-weight:500;
  letter-spacing:.02em; color:var(--pap-45);
}
/* A lista de módulos é um bloco de nomes separados por ·. Fica em papel
   cheio e com entrelinha larga porque é para ser VARRIDA, não lida. */
.fase__lista{
  margin:0 0 clamp(16px,2.4vh,26px);
  padding-bottom:clamp(16px,2.4vh,26px);
  border-bottom:1px solid rgba(242,242,242,.14);
  font-size:clamp(13px,1vw,16px); line-height:1.75; color:var(--paper);
}
.fase__txt{
  margin:0; font-size:clamp(14px,1.05vw,17px); line-height:1.55; color:var(--pap-70);
}

/* ── mecanismos: 2 por fileira, o par mais respirado da página ── */
.mtd__mecs{
  padding-block:0 var(--mtd-gap);
  /* DUAS colunas: quatro mecanismos fecham duas fileiras. São os textos mais
     longos da página e pedem coluna larga. */
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(34px,5vh,60px) var(--dobra-gap);
}
@media (max-width:760px){ .mtd__mecs{ grid-template-columns:1fr; } }
.mec{ border-top:1px solid rgba(242,242,242,.14); padding-top:clamp(18px,2.6vh,30px); }
.mec__nome{
  margin:0 0 clamp(12px,1.8vh,20px);
  font-family:var(--display); font-weight:300;
  font-size:clamp(20px,1.9vw,32px); line-height:1.12; letter-spacing:-.02em;
}
.mec__txt{
  /* 54ch ≈ 62 caracteres, a mesma medida da .estudio__corpo e das páginas
     legais. Sem o teto a coluna dupla dava 82 caracteres por linha, medido
     a 1440. O teto vai no PARÁGRAFO: em contêiner, `ch` resolve contra o
     font-size do próprio elemento e não vale nada. Ver "Largura".
     ⚠️ 47ch, não os 54ch usados no resto do site. `ch` é a largura do "0",
     e a razão entre ela e a largura média das letras MUDA com o corpo,
     porque a DM Sans é variável em `opsz`: aqui, a 15px, 54ch deu 71
     caracteres em vez dos 62 que dá a 21px. Medido, não deduzido. */
  margin:0; max-width:var(--medida);
  font-size:clamp(14px,1.05vw,17px); line-height:1.55; color:var(--pap-70);
}

/* ── a cadeia dos 28 documentos ──
   Grade de duas colunas: o grupo à esquerda, os documentos à direita. É a
   mesma proporção das dobras, para a página não mudar de eixo no meio. */
.mtd__cadeia{ margin-block:0; padding-inline:0; padding-block:0 clamp(26px,4vh,54px); }
.cad{
  display:grid; grid-template-columns:var(--dobra-cols);
  gap:0 var(--dobra-gap);
  border-top:1px solid rgba(242,242,242,.14);
  padding-block:clamp(14px,2.2vh,24px);
}
.cad dt{
  font-size:clamp(11px,.85vw,13px); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--pap-45);
}
.cad dd{
  /* SEM teto de medida, de propósito. 71 caracteres por linha seria demais
     para prosa, mas isto não é prosa: é uma fila de nomes próprios separados
     por `·`, feita para ser varrida com o olho. Estreitar quebraria nomes de
     documento no meio e daria mais trabalho de ler, não menos. */
  margin:0; font-size:clamp(13px,1.05vw,18px); line-height:1.55;
}
.mtd__remate{ padding-block:0 var(--mtd-gap); }
.mtd__cadeiaP{
  margin:0 0 clamp(20px,3vh,34px); max-width:var(--medida);
  font-size:clamp(14px,1.1vw,19px); line-height:1.6; color:var(--pap-45);
}
.mtd__cadeiaQ{
  margin:0; max-width:var(--medida);
  font-size:clamp(15px,1.3vw,23px); line-height:1.55; color:var(--paper);
}

/* ── a dobra da IA ──
   Ganha moldura porque é o argumento mais delicado da página: é a parte que
   o cliente vai procurar, e enquadrá-la é dizer que ela não está escondida.
   O fundo é o mesmo breu; o que separa é só o fio. */
.mtd__ia{ margin-block:0 var(--mtd-gap); }
.mtd__ia .mtd__dobra{
  /* dentro da .mtd__ia a dobra já está na coluna certa: zera a margem que
     ela herdaria da regra `.mtd > *`, senão recuaria 46px duas vezes. */
  margin-inline:0;
  border-top:1px solid rgba(242,242,242,.14);
}
.mtd__iaGrade{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(30px,4.6vh,56px) var(--dobra-gap);
  padding-block:0 clamp(30px,4.6vh,56px);
}
.iac{ border-top:1px solid rgba(242,242,242,.14); padding-top:clamp(18px,2.6vh,30px); }
.iac__nome{
  margin:0 0 clamp(12px,1.8vh,20px);
  font-family:var(--display); font-weight:300;
  font-size:clamp(19px,1.75vw,30px); line-height:1.12; letter-spacing:-.015em;
}
.iac__txt{
  margin:0; font-size:clamp(14px,1.05vw,17px); line-height:1.55; color:var(--pap-70);
}

/* ── cartões de resumo ──
   ⚠️ Duas dobras que eram PROSA viraram cartão em 28/08/2026, a pedido dele:
   a 07 (consolidação, dois cartões) e a 10 (o portal, quatro). O critério foi
   um só, e vale para a próxima: **só vira cartão a dobra cujo texto já é uma
   lista disfarçada de parágrafo.** Nas duas, o texto do cartão é o do Arthur
   sem uma palavra trocada, e só o título é meu. Dobra de argumento encadeado
   (a 01, a 06 e a 11) NÃO entra aqui: quebrar em cartão mata a costura, que
   é onde mora o argumento.

   ⚠️ Contagem de colunas FIXA, como no resto da página: quatro cartões em
   quatro colunas fecham uma fileira cheia, dois em duas. Com `auto-fit` o
   navegador escolhia três para os quatro e sobrava uma órfã. */
.mtd__cartoes{
  padding-block:0 var(--mtd-gap);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(30px,4.6vh,56px) var(--dobra-gap);
}
.mtd__cartoes--par{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:1080px){ .mtd__cartoes{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){
  .mtd__cartoes,
  .mtd__cartoes--par{ grid-template-columns:1fr; }
}
.cart{ border-top:1px solid rgba(242,242,242,.14); padding-top:clamp(18px,2.6vh,30px); }
/* Mesmo desenho de ícone das quatro etapas da home: viewBox 24, traço de
   1.4 em currentColor, ponta redonda. Não inventei uma família nova. */
.cart__icone{
  display:block; width:clamp(19px,1.5vw,24px); height:auto;
  margin:0 0 clamp(14px,2vh,22px);
  color:var(--pap-45); overflow:visible;
}
.cart__nome{
  margin:0 0 clamp(10px,1.6vh,18px);
  font-family:var(--display); font-weight:300;
  font-size:clamp(19px,1.75vw,30px); line-height:1.12; letter-spacing:-.015em;
}
.cart__txt{
  margin:0; max-width:var(--medida);
  font-size:clamp(14px,1.05vw,17px); line-height:1.55; color:var(--pap-70);
}
/* O segundo cartão da consolidação é a resposta, e era o parágrafo que a
   dobra marcava com `.mtd__forte`. O papel cheio veio junto com o texto. */
.cart--forte .cart__txt{ color:var(--paper); }
.cart--forte .cart__icone{ color:var(--pap-70); }

/* ── o que esperamos ── */
.mtd__esperas{
  padding-block:0 var(--mtd-gap);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(30px,4.6vh,56px) var(--dobra-gap);
}
.espera{ border-top:1px solid rgba(242,242,242,.14); padding-top:clamp(18px,2.6vh,30px); }
.espera__nome{
  margin:0 0 clamp(10px,1.6vh,18px);
  font-family:var(--display); font-weight:300;
  font-size:clamp(20px,1.9vw,32px); line-height:1.12; letter-spacing:-.02em;
}
.espera__txt{
  margin:0; font-size:clamp(14px,1.05vw,17px); line-height:1.55; color:var(--pap-70);
}

/* ── fecho ── */
.mtd__fim{
  padding-block:var(--mtd-gap) clamp(70px,12vh,150px);
  border-top:1px solid rgba(242,242,242,.14);
}
.mtd__fimDec{
  margin:0 0 clamp(16px,2.4vh,30px);
  font-family:var(--display); font-weight:300;
  font-size:clamp(28px,5.2vw,96px); line-height:1.04; letter-spacing:-.03em;
}
.mtd__fimTxt{
  margin:0 0 clamp(26px,4vh,46px); max-width:var(--medida);
  font-size:clamp(14px,1.2vw,21px); line-height:1.6; color:var(--pap-70);
}
/* Mesmo botão da .capa__acao e da .estudio__acao: fio embaixo que corre no
   hover. Não inventei um botão novo para esta página. */
.mtd__fimCta{
  display:inline-block; position:relative; padding:2px 0;
  font-size:clamp(13px,1.05vw,17px);
}
.mtd__fimCta::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform-origin:right;
  transition:transform .4s var(--ease);
}
.mtd__fimCta:hover::after{ transform:scaleX(0); transform-origin:left; }

/* ── telefone ──
   Abaixo de 860 a grade de duas colunas não tem o que dividir: a coluna 2
   ficaria com 38 caracteres por linha. Vira uma coluna só, e o corpo passa
   a vir DEPOIS da declaração, que é a ordem de leitura. */
@media (max-width:860px){
  .mtd__dobra, .cad{ grid-template-columns:1fr; }
  .mtd__ddec{ grid-column:1; grid-row:2; margin-bottom:clamp(20px,3vh,32px); }
  .mtd__corpo{ grid-column:1; grid-row:3; }
  .cad dt{ margin-bottom:.6em; }
  .mtd__dobra--solta .mtd__ddec{ max-width:none; margin-bottom:0; }
}

/* ═══════════════════ SOBRE · A PÁGINA DO ESTÚDIO ═══════════════════ */
/* `estudio.html`. Referência: kanso.framer.media/about, MEDIDA a 1440 antes
   de construir (ver o comentário de abertura do HTML). A regra de largura é
   a mesma do resto do site: nada de max-width na seção, tudo de ponta a
   ponta com só o --pad. Quem controla medida de leitura é o corpo do texto.

   A grade das dobras é a mesma da home e do metodo.html, com UMA adição
   vinda da referência: o índice `(0N)` alinhado à direita, na mesma linha
   do rótulo. Por causa dele o corpo começa na linha 2 e não na 1: ele
   alinha com a declaração, não com o rótulo. É a única diferença de grade
   entre esta página e a do método, e é de propósito. */
.sob{
  /* Mesmo corpo de display das declarações do metodo.html, pelo mesmo
     motivo: aqui elas também são frases inteiras, não três palavras. */
  --sob-dec: clamp(21px, 3.05vw, 52px);
  --sob-gap: clamp(44px, 8vh, 104px);
  /* 47ch, o mesmo teto de prosa do metodo.html: dá 62 caracteres por linha
     no corpo desta página. Ver "Medidas" no README, e não troque por 54ch
     sem medir: `ch` é a largura do "0" e a razão muda com o `opsz`. */
  --medida: 47ch;
  padding-top:calc(var(--pad) + clamp(90px,12vh,160px));
}
/* MARGEM, não padding: as dobras têm border-top, e com padding o fio correria
   de ponta a ponta da JANELA em vez de bater com a barra do topo. */
.sob > *{ margin-inline:var(--pad); }

/* ── capa ──
   Na referência o display fica à esquerda e uma linha curta à direita, na
   mesma altura, alinhada à direita. Aqui é a mesma composição: o nome
   encolhe se precisar (min-width:0) e a declaração tem medida fixa. */
.sob__cabeca{ margin-bottom:clamp(40px,7vh,90px); }
.sob__rot{
  margin:0 0 clamp(14px,2vh,26px);
  font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
.sob__capa{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--dobra-gap);
}
/* ⚠️ O corpo do nome NÃO é um clamp de `vw` puro, e os dois âncoras são
   MEDIDOS. "Sobre nós." na DM Sans 300 com -.035em de tracking tem razão
   3.945 (largura ÷ corpo), e o que se quer é que ele ENCHA a coluna, como
   na referência (lá "About us." ocupa 921 de 1345, ou 68%, e a linha da
   direita fecha o resto).
     · a 1440 a coluna tem 1333: 215px dão 848, e sobram o gap e os 341 da
       declaração. Com o `clamp(40px,10.4vw,190px)` que estava aqui davam
       150px e 591, e ficava um vão morto de 357 no meio da capa.
     · a 375 a coluna tem 339 e a capa já empilhou: 77px dão 303, 89% dela.
   Um `vw` puro não serve os dois: 15vw acerta o 1440 e devolve 56px no
   telefone (65% da coluna). O termo fixo é o que segura o piso. */
.sob__nome{
  margin:0; min-width:0;
  font-family:var(--display); font-weight:300;
  font-size:clamp(64px, 13vw + 28px, 300px); line-height:.92; letter-spacing:-.035em;
}
/* A declaração mais forte da página. Na referência esta linha é cinza e
   secundária; aqui ela sobe para papel cheio, porque é o argumento que abre
   o site inteiro e não uma legenda. Medida travada em ch para ela quebrar
   sempre no mesmo lugar que a referência quebra: cinco linhas. */
/* A declaração mais forte da página fecha a capa pela direita.
   ⚠️ A medida (36ch) foi escolhida CONTRA o vão, não pelo conforto de
   leitura. A capa é um flex `space-between`: estreitar esta caixa não
   aproxima nada, ABRE o buraco entre ela e o nome. A 1440 o nome dá 849 e a
   coluna 1333; com 30ch sobravam 143px de vão no meio, com 36ch sobram 75,
   que é a ordem de grandeza da referência (24px em 1345). */
.sob__dec{
  flex:0 0 auto; margin:0 0 .5em; max-width:36ch; text-align:right;
  font-size:clamp(14px,1.15vw,20px); line-height:1.5; color:var(--paper);
}

/* ── o letreiro ──
   Duas cópias do mesmo grupo, lado a lado, andando 50% da faixa. Fica DENTRO
   do --pad e recorta ali, como na referência: full bleed quebraria o
   alinhamento com a barra do topo, que é o que segura a página.

   ⚠️ Com prefers-reduced-motion o reset global (`animation-duration:.01ms`,
   `iteration-count:1`) leva a faixa direto para -50% e a deixa parada. Como
   as duas cópias são idênticas, o estado final é uma faixa estática e legível
   — que é exatamente o que se quer ali. Não precisa de regra própria. */
.sob__letreiro{ margin-bottom:clamp(26px,4vh,48px); }
.sob__assina{
  display:flex; align-items:baseline; justify-content:flex-end; gap:.9em;
  flex-wrap:wrap;
  margin:0 0 clamp(12px,1.8vh,20px);
  font-size:clamp(10px,.78vw,12.5px); color:var(--pap-45);
}
.sob__assina b{ font-weight:500; color:var(--paper); }
.tic{
  overflow:hidden;
  border-block:1px solid rgba(242,242,242,.14);
  padding-block:clamp(12px,1.6vh,18px);
  /* o letreiro é decoração de leitura contínua: não recebe foco nem seleção */
  user-select:none;
}
/* ⚠️ O translate é 100 ÷ (número de cópias) por cento, e hoje são OITO
   cópias no HTML: 12,5%. Mexeu no número de cópias, mexa aqui junto, senão
   o laço salta. E a duração é o tempo de andar UM grupo: 19s sobre os 549px
   do grupo em PT dá ~29px/s, que é o ritmo calmo que o site pede. */
.tic__faixa{
  display:flex; width:max-content;
  animation:tic-corre 19s linear infinite;
}
.tic__grupo{
  display:flex; align-items:center; gap:clamp(14px,1.7vw,30px);
  padding-right:clamp(14px,1.7vw,30px);
  font-size:clamp(11.5px,.95vw,15px); line-height:1;
  white-space:nowrap; color:var(--pap-45);
}
.tic__grupo b{ font-weight:500; color:var(--paper); }
.tic__grupo i{ font-style:normal; color:rgba(242,242,242,.22); }
@keyframes tic-corre{ to{ transform:translateX(-12.5%); } }

/* ── a foto ──
   ⚠️ 3:2 no quadro porque o arquivo é 3:2 (1600×1066). Sem corte, sem
   object-position para acertar. Se trocar por foto de outra proporção,
   meça o enquadramento no navegador antes: ver img/LEIA-ME.txt. */
.sob__figura{ margin-block:0 var(--sob-gap); }
/* ⚠️ Quem segura a PROPORÇÃO é o quadro, não a imagem. Assim a caixa já
   existe com a altura certa antes de a foto chegar: nada salta no layout
   quando ela entra, e o `data-rise` da figura sobe uma caixa de tamanho
   final, não uma linha fina que engorda no meio do movimento. */
.sob__quadro{
  aspect-ratio:3/2; overflow:hidden;
  background:rgba(242,242,242,.06);
  /* ⚠️ Só as DUAS de baixo, a pedido dele em 28/08/2026. A figura tem legenda
     por baixo: arredondar em cima e deixar reto embaixo brigaria com ela.
     O raio é o mesmo token visual do resto do site (cartões do "diferencia",
     ladrilhos da colmeia, cartões do blog): clamp(8px,.85vw,16px). Para virar
     as quatro, troque as duas linhas por `border-radius`. */
  border-end-start-radius:clamp(8px,.85vw,16px);
  border-end-end-radius:clamp(8px,.85vw,16px);
}
/* ⚠️ `height:auto` é OBRIGATÓRIO onde a imagem não preenche o quadro, e não é
   zelo. O reset do site é só `img{ max-width:100% }`, sem `height:auto`, e os
   atributos `width`/`height` do HTML entram como dica de apresentação: com
   `width:100%` do autor vencendo a largura e a ALTURA ficando na dica, a
   figura vinha 1333×1066 em vez de 1333×888. Aqui a altura é 100% do quadro,
   que já resolve, mas a regra fica explícita para não voltar a morder.

   A ENTRADA: a foto nasce a 6% maior e transparente, e assenta quando o
   arquivo chega. É o mesmo par do carrossel (`.obra__img` + `.pronta`), com
   a escala somada porque aqui a imagem é grande e o corte do quadro tem o
   que mostrar. Quem põe a classe é o bloco 5b do main.js, no evento `load`.
   ⚠️ NÃO use `animation` com `both` para isto: em aba de segundo plano o
   navegador estrangula a animação e a foto ficaria parada no primeiro quadro,
   ou seja invisível. Transição + classe não tem esse problema. */
.sob__quadro img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity 1.1s var(--ease), transform 1.5s var(--ease);
}
.sob__quadro img.pronta{ opacity:1; transform:none; }
.sob__figura figcaption{
  margin-top:clamp(10px,1.5vh,16px);
  font-size:clamp(11px,.85vw,13px); color:var(--pap-45);
}

/* ── a grade das dobras ── */
.sob__dobra{
  padding-block:var(--sob-gap);
  display:grid;
  grid-template-columns:var(--dobra-cols);
  gap:0 var(--dobra-gap);
  border-top:1px solid rgba(242,242,242,.14);
}
.sob__dobra--solta{ padding-bottom:clamp(26px,4vh,54px); }
.sob__dobra--solta .sob__ddec{ max-width:26ch; }

.sob__drot{
  grid-column:1; grid-row:1;
  margin:0 0 var(--dobra-rot);
  font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
/* a barra do `/ Nome` da referência, mais apagada que o nome */
.sob__drot span[aria-hidden]{ color:rgba(242,242,242,.22); }
/* O índice não é uppercase nem bold: na referência ele é o item mais
   discreto da linha, e é o que o faz ler como numeração e não como rótulo. */
.sob__idx{
  grid-column:2; grid-row:1; justify-self:end;
  margin:0; font-size:clamp(10px,.8vw,13px); color:var(--pap-45);
  font-variant-numeric:tabular-nums;
}
.sob__ddec{
  grid-column:1; grid-row:2; align-self:start;
  margin:0;
  font-family:var(--display); font-weight:300;
  font-size:var(--sob-dec); line-height:1.12; letter-spacing:-.02em;
}
.sob__corpo{ grid-column:2; grid-row:2; }
.sob__corpo p{
  margin:0 0 clamp(16px,2.2vh,26px);
  font-size:clamp(14px,1.2vw,21px); line-height:1.6; color:var(--pap-70);
}
.sob__corpo p:last-child{ margin-bottom:0; }
/* especificidade (0,2,0) para ganhar de `.sob__corpo p` (0,1,1) */
.sob__corpo .sob__forte{ color:var(--paper); }
.sob__corpo .sob__eco,
.sob__eco{
  margin-top:clamp(22px,3.4vh,40px);
  font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(16px,1.55vw,27px); line-height:1.35; letter-spacing:-.01em;
  color:var(--paper);
}
.sob__eco--largo{ max-width:46ch; }

/* ── as cinco convicções ──
   Fileiras e não cartões: cinco não fecham grade nenhuma sem fileira órfã
   (3+2 ou 2+2+1), e a órfã denuncia a grade. Ver README, "Contagem de
   colunas fixa". Em fileira, cada convicção usa a grade padrão da página:
   a frase na coluna do título, a explicação na coluna do corpo. */
.sob__crencas{ margin-block:0; padding-inline:0; padding-block:0 var(--sob-gap); }
.cren{
  display:grid; grid-template-columns:var(--dobra-cols);
  gap:0 var(--dobra-gap);
  border-top:1px solid rgba(242,242,242,.14);
  padding-block:clamp(20px,3vh,34px);
}
.cren dt{
  font-family:var(--display); font-weight:300;
  font-size:clamp(19px,1.75vw,30px); line-height:1.15; letter-spacing:-.015em;
  color:var(--paper);
}
.cren dd{
  margin:0; max-width:var(--medida);
  font-size:clamp(14px,1.05vw,17px); line-height:1.55; color:var(--pap-70);
}

/* ── quem conduz ──
   ⚠️ UMA pessoa, com foto e nome reais. Não é a dobra da equipe da home.
   O retrato é 1:1.15 (um pouco mais alto que quadrado), a mesma proporção
   usada lá: o arquivo é quadrado e o corte tira ~13% da largura. */
.sob__conduz{
  padding-block:0 var(--sob-gap);
  display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
  gap:0 var(--dobra-gap);
}
.sob__retrato{ margin:0; }
/* `height:auto` pelo mesmo motivo da figura acima: sem ele o retrato vinha
   439×1000 (razão 2.28) em vez de 439×505. */
.sob__retrato img{
  width:100%; height:auto; aspect-ratio:1/1.15; object-fit:cover;
  background:rgba(242,242,242,.06);
}
.sob__conduzTxt{ align-self:start; }
.sob__cargo{
  margin:0 0 clamp(18px,2.6vh,30px);
  padding-bottom:clamp(14px,2vh,22px);
  border-bottom:1px solid rgba(242,242,242,.14);
  font-size:clamp(11px,.85vw,13px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
.sob__conduzTxt p{
  margin:0 0 clamp(16px,2.2vh,26px); max-width:var(--medida);
  font-size:clamp(14px,1.1vw,19px); line-height:1.6; color:var(--pap-70);
}
.sob__conduzTxt p:last-child{ margin-bottom:0; }
/* A voz em primeira pessoa, quando ele mandar. É o único trecho da página
   em que a voz deixa de ser institucional, e por isso ele fica em papel
   cheio e em itálico de display, como os ecos. */
.sob__voz{
  margin:clamp(24px,3.6vh,42px) 0 0; max-width:44ch;
  padding-left:clamp(16px,2vw,28px);
  border-left:1px solid rgba(242,242,242,.22);
  font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(16px,1.4vw,25px); line-height:1.4; color:var(--paper);
}

/* ── "não é o momento certo se" ──
   As fileiras numeradas da referência. O número fica na coluna estreita da
   esquerda, alinhado com o rótulo das dobras; a frase começa um gap depois.
   Não uso --dobra-cols aqui: são frases de uma linha, e a coluna de 57%
   deixaria um vão morto entre o número e o texto. */
.sob__naoe{ padding-block:0 var(--sob-gap); }
.sob__lrot{
  margin:0 0 clamp(16px,2.4vh,26px);
  font-size:clamp(11px,.85vw,13px); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pap-45);
}
/* margin-BLOCK e padding-inline:0: o atalho `margin:0` zeraria o
   margin-inline da regra `.sob > *` e a lista sangraria para fora da barra,
   e o padding de 40px que o navegador dá a toda <ol> empurraria a primeira
   coluna para dentro. */
.sob__motivos{ margin-block:0; padding-inline:0; list-style:none; }
.mot{
  display:grid; grid-template-columns:4.5ch minmax(0,1fr);
  gap:0 var(--dobra-gap);
  border-top:1px solid rgba(242,242,242,.14);
  padding-block:clamp(14px,2.1vh,22px);
}
.mot__n{
  font-size:clamp(11px,.85vw,13px); color:var(--pap-45);
  font-variant-numeric:tabular-nums;
}
.mot span:last-child{
  max-width:var(--medida);
  font-size:clamp(14px,1.1vw,19px); line-height:1.5; color:var(--paper);
}

/* ── fecho ── */
.sob__fim{
  padding-block:var(--sob-gap) clamp(70px,12vh,150px);
  border-top:1px solid rgba(242,242,242,.14);
}
.sob__fimDec{
  margin:0 0 clamp(16px,2.4vh,30px);
  font-family:var(--display); font-weight:300;
  font-size:clamp(28px,5.2vw,96px); line-height:1.04; letter-spacing:-.03em;
}
.sob__fimTxt{
  margin:0 0 clamp(26px,4vh,46px); max-width:var(--medida);
  font-size:clamp(14px,1.2vw,21px); line-height:1.6; color:var(--pap-70);
}
/* Mesmo botão de fio da .capa__acao, da .estudio__acao e do .mtd__fimCta. */
.sob__fimCta{
  display:inline-block; position:relative; padding:2px 0;
  font-size:clamp(13px,1.05vw,17px);
}
.sob__fimCta::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform-origin:right;
  transition:transform .4s var(--ease);
}
.sob__fimCta:hover::after{ transform:scaleX(0); transform-origin:left; }

/* ── telefone ──
   Abaixo de 860 a grade de duas colunas não tem o que dividir. Vira uma
   coluna só, na ordem de leitura: rótulo, declaração, corpo. O índice sobe
   para a linha do rótulo, à direita dele, que é onde ele já estava. */
@media (max-width:860px){
  .sob__dobra, .cren{ grid-template-columns:1fr; }
  .sob__idx{ grid-column:1; grid-row:1; align-self:start; }
  .sob__drot{ grid-column:1; grid-row:1; padding-right:5ch; }
  .sob__ddec{ grid-column:1; grid-row:2; margin-bottom:clamp(20px,3vh,32px); }
  .sob__corpo{ grid-column:1; grid-row:3; }
  .sob__dobra--solta .sob__ddec{ max-width:none; margin-bottom:0; }
  .cren dt{ margin-bottom:.55em; }
  .sob__conduz{ grid-template-columns:1fr; gap:clamp(24px,4vh,40px) 0; }
  .sob__retrato img{ max-width:340px; }
}
/* A capa empilha ANTES das dobras, e o ponto é 1220. A referência faz o
   mesmo (a 1440 é display à esquerda e linha à direita, a 1024 já está
   empilhada), mas 1220 aqui não é imitação: é medida.

   ⚠️ Entre 901 e ~1220 o nome QUEBRAVA em duas linhas. Varrido em 900, 960,
   1024, 1100, 1180, 1260, 1360 e 1440: de 960 a 1180 "Sobre nós." saía em
   duas linhas, e voltava a caber numa só a partir de 1260. A causa é que as
   duas caixas encolhem em ritmos diferentes: o nome cresce com `vw`, e a
   declaração PARA de encolher quando o corpo dela bate no piso de 14px do
   clamp (a 1024 ela trava em 345px e não devolve mais largura).

   ⚠️ E `36ch` não vale 36 × (corpo ÷ 20): a DM Sans é variável em `opsz` e
   o "0" fica proporcionalmente mais largo em corpo pequeno. A 20px o bloco
   dá 409px; a 14px daria 286 se a razão fosse fixa, e dá 345. É a mesma
   armadilha do `--medida` da página do método. Meça, não deduza. */
@media (max-width:1220px){
  .sob__capa{ flex-direction:column; align-items:stretch; gap:clamp(18px,3vh,28px); }
  .sob__dec{ max-width:52ch; text-align:left; margin-bottom:0; }
}
/* No telefone o número da fileira cede largura para a frase. */
@media (max-width:620px){
  .mot{ grid-template-columns:3.5ch minmax(0,1fr); gap:0 14px; }
}

/* ═══════════════════ PÁGINA DE REGISTRO ═══════════════════ */
/* `registro/VKA-XXXX-NNN/index.html`. Uma pasta por certificado, para a URL
   ficar sem `.html`: ela vai IMPRESSA no papel.

   ⚠️ Esta página quebra a regra de largura total do site, de propósito.
   O site inteiro alinha de ponta a ponta com o --pad, porque é peça de
   comunicação. Isto aqui é DOCUMENTO: coluna estreita e centrada é o que
   diferencia um registro de uma dobra de marketing. É a mesma razão pela
   qual certidão não tem diagramação de revista.

   ⚠️ E esta página NÃO VENDE NADA. Sem menu, sem CTA, sem o chat. É por ser
   limpa que ela tem autoridade e que o cliente a mostra para os outros. */
.reg,
.reg__topo,
.reg__pe{
  --col: min(52ch, 100% - var(--pad) * 2);
}

.reg__topo{
  display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2.4vh,24px);
  padding:calc(var(--pad) + clamp(40px,7vh,90px)) var(--pad) 0;
  text-align:center;
}
.reg__marca{ display:block; width:clamp(78px,7vw,104px); color:var(--paper); }
.reg__marca .wm{ width:100%; height:auto; display:block; }
.reg__selo{
  margin:0; font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--pap-45);
}

.reg{
  width:var(--col); margin-inline:auto;
  padding:clamp(46px,9vh,110px) 0 clamp(60px,11vh,140px);
  text-align:center;
}

.reg__rot{
  margin:0 0 clamp(18px,3vh,34px);
  font-size:clamp(12px,1vw,15px); color:var(--pap-45);
}

/* O nome da MARCA é a maior coisa da página. A página é dele, não da VOKA. */
.reg__marcaNome{
  margin:0 0 clamp(22px,3.6vh,44px);
  font-family:var(--display); font-weight:300;
  font-size:clamp(40px,7.4vw,104px); line-height:1; letter-spacing:.02em;
  text-transform:uppercase;
}

.reg__dec{
  margin:0 0 clamp(40px,7vh,86px);
  font-size:clamp(15px,1.3vw,21px); line-height:1.6; color:var(--pap-70);
}
.reg__dec b{ font-weight:500; color:var(--paper); }

/* ── a ficha ── */
.reg__ficha{
  margin:0 0 clamp(34px,6vh,72px);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3.4vh,34px) clamp(20px,3vw,44px);
  border-top:1px solid rgba(242,242,242,.14);
  border-bottom:1px solid rgba(242,242,242,.14);
  padding-block:clamp(24px,4vh,42px);
  text-align:left;
}
.reg__ficha dt{
  margin:0 0 .5em; font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--pap-45);
}
.reg__ficha dd{ margin:0; font-size:clamp(14px,1.15vw,18px); }
/* o número é o assunto: fica em tabular para alinhar entre registros */
.reg__num{
  font-variant-numeric:tabular-nums; letter-spacing:.06em;
  font-size:clamp(15px,1.3vw,21px) !important;
}

.reg__metodo{
  margin:0 0 clamp(34px,6vh,72px);
  font-size:clamp(13px,1.05vw,17px); line-height:1.6; color:var(--pap-70);
}

/* ── impressão digital ── */
.reg__hash{
  margin:0 0 clamp(40px,7vh,86px);
  border:1px solid rgba(242,242,242,.14); border-radius:clamp(6px,.6vw,10px);
  padding:clamp(18px,3vh,28px) clamp(16px,2.4vw,28px);
}
.reg__hashRot{
  margin:0 0 .7em; font-size:clamp(9.5px,.72vw,11.5px); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--pap-45);
}
.reg__hashVal{
  margin:0 0 .8em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(13px,1.1vw,17px); letter-spacing:.08em; word-break:break-all;
}
.reg__hashNota{
  margin:0; font-size:clamp(11.5px,.9vw,13.5px); line-height:1.5; color:var(--pap-45);
}

.reg__foto{ margin:0 0 clamp(34px,6vh,72px); }
.reg__foto img{
  width:100%; height:auto; display:block;
  border-radius:clamp(6px,.6vw,10px);
}
.reg__foto figcaption{
  margin-top:clamp(10px,1.6vh,16px);
  font-size:clamp(11px,.85vw,13px); color:var(--pap-45);
}

.reg__deposito{
  margin:0 0 clamp(14px,2.4vh,22px);
  font-size:clamp(13px,1.05vw,17px); line-height:1.6; color:var(--pap-70);
}
/* A promessa de permanência é o que separa registro de encenação.
   Fica em papel cheio, sozinha, como última linha do documento. */
.reg__permanencia{
  margin:0; font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(15px,1.4vw,24px); line-height:1.4; color:var(--paper);
}

.reg__pe{
  width:var(--col); margin-inline:auto;
  padding:0 0 clamp(40px,7vh,90px); text-align:center;
  border-top:1px solid rgba(242,242,242,.14);
}
.reg__pe p{
  margin:clamp(20px,3.4vh,34px) 0 0;
  font-size:clamp(11px,.85vw,13px); letter-spacing:.06em; color:var(--pap-45);
}

@media (max-width:560px){
  .reg__ficha{ grid-template-columns:1fr; }
}