/* ════════════════════════════════════════════════════════════════
   SEÇÕES
   Nenhuma foto usa object-fit: cover. Nenhuma tem máscara, filtro
   ou proporção forçada. Onde a borda da foto é uma cor chapada
   (hero, processo) o fundo da seção é aquele hex exato e a imagem
   dissolve. Onde a borda tem gradiente (sobre, contato) a foto
   assume um retângulo deliberado sobre o campo claro — melhor uma
   aresta intencional que uma fusão malfeita.
   ════════════════════════════════════════════════════════════════ */

/* ═══════════════════════ HERO ═══════════════════════
   A primeira dobra não segue a paleta do resto da página: campo
   marfim vindo da própria fotografia e tipografia à esquerda. Só a
   faixa da marca volta ao azul do site. É a única seção clara antes do
   manifesto, e é ela que apresenta a marca — por isso carrega o
   logo grande em vez de depender da navbar, que só desce no hover.
   ════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--marfim);
  color: var(--tinta-escura);
}

/* ── Faixa da marca ───────────────────────────────────────── */
/* Três colunas com o logo na do meio, não flex centrado: assim a
   linha da direita entra sem empurrar a marca para fora do eixo. */
.hero__marca {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s3);
  /* Faixa baixa: 1,1rem de respiro e logo de 5vw. Ela é assinatura,
     não cabeçalho — quanto menos altura roubar da fotografia, melhor. */
  padding: clamp(0.6rem, 1vw, 1.05rem) var(--gutter);
  background: var(--ardosia);
}
.hero__marca-link { grid-column: 2; display: block; line-height: 0; }

.hero__marca-nota {
  grid-column: 3;
  justify-self: end;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, white 76%, var(--ardosia));
  border-bottom: 1px solid color-mix(in oklab, var(--ouro-marca) 55%, transparent);
  padding-bottom: 3px;
  transition: color 0.35s var(--expo), border-color 0.35s var(--expo);
}
.hero__marca-nota:hover,
.hero__marca-nota:focus-visible { color: var(--ouro-marca); border-color: var(--ouro-marca); }

@media (max-width: 48rem) {
  .hero__marca { grid-template-columns: 1fr; justify-items: center; gap: var(--s2); }
  .hero__marca-link, .hero__marca-nota { grid-column: 1; justify-self: center; }
}
/* 7vw ≈ 100px em 1440, que é a proporção do logo na referência
   (100 de 1513). Em 12vw a faixa passava de 199px de altura e
   empurrava a figura para fora da primeira dobra. */
.hero__logo {
  width: clamp(5rem, 5vw, 6.75rem);
  height: auto;
  transition: transform 0.6s var(--expo);
}
.hero__marca-link:hover .hero__logo { transform: translateY(-3px); }

/* ── Campo claro ──────────────────────────────────────────── */
/* flex: 1 + align-items: flex-end faz o conteúdo encostar na base
   da dobra, que é o que deixa a figura sangrar no rodapé da seção
   como na referência, em vez de flutuar no meio do campo. */
.hero__campo {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

/* A foto ocupa a seção inteira e o texto pousa nela. É a única
   imagem da página em cover — sem ele, uma foto 16:9 numa dobra de
   100svh deixaria barras. object-position 100%: quando a janela é
   mais alta que a proporção do arquivo, o corte come o campo vazio
   da esquerda e nunca a figura da direita. */
.hero__foto { position: absolute; inset: 0; z-index: var(--z-deco); }
.hero__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 100% center;
}

.hero__wrap {
  position: relative;
  z-index: var(--z-conteudo);
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}
/* 34rem: a metade clara do arquivo vai até 67% da largura e o texto
   fecha em 45% em 1440 — sobra folga antes da transição. */
.hero__texto { max-width: min(100%, 34rem); }

.hero__kicker {
  font-size: clamp(0.75rem, 0.68rem + 0.3vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* bronze, não o ouro da referência: #C8A068 sobre o marfim dá
     2,1:1 e some numa versalete de 13px. O bronze dá 5,4:1 e é o
     mesmo tom que a página já usa para ouro sobre campo claro. */
  color: var(--ouro-fundo);
  margin-bottom: var(--s4);
}

/* Peso 400: na referência o título é um didone leve, não um titular
   pesado. Aqui o contraste do Bodoni já dá a presença; engrossar
   transformaria a frase em bloco e brigaria com a figura ao lado. */
.hero__titulo {
  font-family: var(--display);
  /* teto de 4,25rem, não 5: em 80px a frase ocupava 346px de altura
     e a soma faixa + texto estourava a dobra de 900px. */
  font-size: clamp(2.25rem, 1rem + 3.7vw, 4.25rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--azul-neblina);
  margin-bottom: var(--s4);
  text-wrap: balance;
}

.hero__lead {
  max-width: 46ch;
  font-size: var(--t-0);
  line-height: 1.75;
  color: var(--tinta-suave);
  margin-bottom: var(--s5);
  text-wrap: pretty;
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--s3); }



.hero__sentinel { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; }

/* ═══════════ FICHA — credencial e escopo ═══════════
   Saiu do hero para cá: na primeira dobra competia com a
   fotografia; aqui abre o manifesto como ficha técnica. */
.ficha {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4) var(--s5);
  margin-bottom: var(--s6);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--linha-clara);
}
@media (min-width: 48rem) {
  .ficha { grid-template-columns: minmax(0, 0.75fr) minmax(0, 0.6fr) minmax(0, 1.5fr); }
}
.ficha dt {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ouro-claro);
  margin-bottom: 0.6rem;
}
.ficha dd {
  font-size: var(--t-0);
  line-height: 1.65;
  color: var(--tinta-media);
}
.ficha__item:not(.ficha__item--largo) dd {
  font-family: var(--display);
  font-size: var(--t-1); font-weight: 700;
  line-height: 1.3;
  color: var(--tinta-clara);
}

/* ═══════════════════════ MANIFESTO ═══════════════════════ */
.manifesto {
  position: relative;
  background: var(--ardosia);
  padding-block: var(--sec);
  overflow: hidden;
}
.manifesto .rule { margin-bottom: var(--s6); }

.manifesto__h {
  font-family: var(--display);
  font-size: var(--t-4);
  font-weight: 700; line-height: 1.13;
  letter-spacing: -0.03em;
  margin-bottom: var(--s6);
}

/* Alinhado à esquerda, na mesma margem do título — antes ficava
   empurrado para a direita e as duas colunas não batiam com nada. */
.manifesto__body {
  display: grid;
  gap: var(--s4) var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  align-items: start;
  max-width: 56rem;
  margin-right: auto;
  color: var(--tinta-media);
  font-size: var(--t-0);
  line-height: 1.75;
  text-align: left;
  text-wrap: pretty;
}

.deco--arc {
  position: absolute; z-index: var(--z-deco);
  right: -14vw; top: 18%;
  width: 34vw; aspect-ratio: 1;
  border: 1px solid color-mix(in oklab, var(--ouro) 16%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

/* ═══════════════════════ EMBLEMA ═══════════════════════
   A marca em seção inteira, com texto nas TRÊS janelas escuras do
   arquivo — nenhuma delas encosta no traço dourado. Varri o PNG em
   células de 38×43px: as colunas 0-29% e 73-100% estão livres em
   toda a altura, e a tira y 86-100% cruza a imagem inteira por
   baixo do círculo. É onde os três blocos moram. */
.cena--emblema { background: var(--ardosia); }

.emblema__h {
  font-family: var(--display);
  font-size: var(--t-3);
  font-weight: 700; line-height: 1.14;
  letter-spacing: -0.026em;
}
/* Um degrau acima do corpo padrão: o texto vive dentro da foto, e
   14px sobre fotografia lê como legenda, não como argumento. */
.emblema__p,
.emblema__gloss {
  font-size: var(--t-0);
  line-height: 1.75;
  color: var(--tinta-media);
}
.emblema__gloss { text-wrap: pretty; }
.emblema__gloss + .emblema__gloss,
.emblema__p + .emblema__p { margin-top: var(--s3); }
.cena--emblema .rule { margin-block: var(--s3); }

/* Assinatura em Josefin Sans Light. O geométrico tem altura-x baixa:
   no mesmo corpo do Bodoni ele lê menor, e o peso 300 tira ainda mais
   presença. A entrelinha aberta devolve o porte sem sair da escala —
   é o tratamento de logotipo, não de parágrafo. */
.emblema__assinatura { line-height: 1.6; }
.emblema__assinatura b {
  display: block;
  font-family: var(--assinatura);
  font-size: var(--t-1); font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--tinta-clara);
}
.emblema__assinatura span {
  display: block;
  font-family: var(--assinatura);
  font-size: 0.75rem; font-weight: 300;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ouro-claro);
  margin-top: 0.5rem;
}

/* Empilhado (abaixo de 75rem): os três blocos viram uma coluna só,
   na ordem em que se leem — declaração, glosa, assinatura. */
.cena--emblema .cena__texto { display: grid; gap: var(--s6); }
.emb__bloco { max-width: 44rem; margin-inline: auto; width: 100%; }
.emb__bloco--meio { text-align: center; }

/* ═══════════════════════ ÁREAS ═══════════════════════ */
.areas {
  background: var(--ardosia);
  padding-block: var(--sec);
  border-top: 1px solid var(--linha-clara);
}
.areas__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s4);
  margin-bottom: var(--s7);
}
.areas__hint {
  font-size: var(--t--1);
  color: var(--tinta-fraca);
  letter-spacing: 0.02em;
}

.areas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: var(--s3);
}
/* Fixo em 3 no desktop: com auto-fit, telas largas abriam 4 colunas
   e as seis áreas viravam 4+2, com duas células vazias. São seis
   itens — o ritmo é 3+3. */
@media (min-width: 64rem) {
  .areas__grid { grid-template-columns: repeat(3, 1fr); }
}

.area {
  position: relative;
  background: var(--ardosia-alto);
  border: 1px solid var(--linha-clara);
  border-radius: var(--raio);
  padding: var(--s5) var(--s4) var(--s6);
  cursor: default;
  transition: background-color 0.45s var(--expo), border-color 0.45s var(--expo),
              transform 0.45s var(--expo), box-shadow 0.45s var(--expo);
}
.area:hover, .area:focus-visible {
  background: var(--ardosia-topo);
  border-color: var(--linha-forte);
  transform: translateY(-4px);
  box-shadow: 0 20px 42px -28px rgb(0 0 0 / 0.9);
}
.area:focus-visible { outline-offset: 3px; }

.area__n {
  display: block;
  font-family: var(--texto);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ouro-claro);
  margin-bottom: var(--s5);
  transition: color 0.4s var(--expo);
}
.area__t {
  font-family: var(--display);
  font-size: var(--t-1);
  font-weight: 700; line-height: 1.18;
  letter-spacing: -0.015em;
  margin-bottom: 0.55rem;
  transition: transform 0.45s var(--expo);
}
.area__l {
  font-size: var(--t--1);
  line-height: 1.65;
  color: var(--tinta-fraca);
  transition: color 0.4s var(--expo);
}
.area:hover .area__t, .area:focus-visible .area__t { transform: translateX(4px); }
.area:hover .area__l, .area:focus-visible .area__l { color: var(--tinta-media); }

/* Sinal fino que se estende na borda inferior */
.area::after {
  content: ""; position: absolute;
  left: var(--s4); bottom: var(--s5);
  width: 0; height: 1px;
  background: var(--ouro);
  transition: width 0.5s var(--expo);
}
.area:hover::after, .area:focus-visible::after { width: 2.6rem; }

/* O painel de explicação (no lugar do preview de imagem)

   TODO o comportamento flutuante vive dentro de @media (hover: hover).
   Não é preferência de organização — é correção de um vazamento real.

   Antes, estas regras valiam em qualquer ponteiro e o bloco de toque
   lá embaixo tentava desfazê-las com `.area__pop { transform: none }`.
   Nunca venceu: as regras de hover têm especificidade (0,2,1) e
   (0,3,1) contra (0,1,0) do reset. Em tela de toque o :hover gruda no
   card tocado, então o painel — que ali é um bloco ESTÁTICO de largura
   inteira — recebia translate3d(-50%) e saltava metade da própria
   largura para a esquerda. Num card de 350px são 175px para fora, o
   texto atravessando a borda esquerda da tela.

   Fechar por media query em vez de aumentar especificidade: no toque
   estas regras simplesmente não existem, e não há disputa para perder.
   O JS acompanha — areas.js já sai cedo quando não há hover fino. */
@media (hover: hover) {
  .area__pop {
    position: absolute; z-index: var(--z-pop);
    bottom: calc(100% - var(--s3));
    left: 50%;
    width: min(21rem, 78vw);
    padding: var(--s4);
    background: var(--ardosia-topo);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-sm);
    box-shadow: 0 22px 48px -26px rgb(0 0 0 / 0.9);
    opacity: 0; visibility: hidden;
    transform: translate3d(calc(-50% + var(--pop-x, 0px)), 14px, 0) scale(0.94);
    transition: opacity 0.24s var(--expo), transform 0.42s var(--mola),
                visibility 0s linear 0.3s;
  }
  .area:hover .area__pop, .area:focus-within .area__pop {
    opacity: 1; visibility: visible;
    transform: translate3d(calc(-50% + var(--pop-x, 0px)), 0, 0) scale(1);
    transition: opacity 0.24s var(--expo), transform 0.42s var(--mola),
                visibility 0s linear 0s;
  }
  .area__pop::after {
    content: ""; position: absolute;
    top: 100%; left: 50%; translate: -50% -1px;
    border: 7px solid transparent;
    border-top-color: var(--ardosia-topo);
  }

  /* Sem espaço acima (primeira fileira colada na navbar), o painel
     abre para baixo e a seta vira junto. */
  .area__pop.is-below {
    bottom: auto;
    top: calc(100% - var(--s3));
    transform: translate3d(calc(-50% + var(--pop-x, 0px)), -14px, 0) scale(0.94);
  }
  .area:hover .area__pop.is-below,
  .area:focus-within .area__pop.is-below {
    transform: translate3d(calc(-50% + var(--pop-x, 0px)), 0, 0) scale(1);
  }
  .area__pop.is-below::after {
    top: auto; bottom: 100%; translate: -50% 1px;
    border-top-color: transparent;
    border-bottom-color: var(--ardosia-topo);
  }
}
.area__pop p {
  font-size: 0.875rem; line-height: 1.68;
  color: var(--tinta-media);
}
.area__pop strong { color: var(--ouro-claro); font-weight: 600; }

/* ═══════════════════════ BANDA EDITORIAL ═══════════════════════
   Sem fotografia desde a troca por marquee: fundo --ardosia, o campo
   padrão da página. Saíram junto a placa flutuante (sombra em quatro
   camadas, margem negativa, parallax) e as quatro setas — tudo isso
   só existia para a placa pairar sobre a foto. Sem a foto, virava
   ruído sobre um fundo liso.

   Texto à esquerda, as seis áreas rolando na vertical à direita. */
.banda {
  position: relative;
  background: var(--ardosia);
  padding-block: var(--sec);
  overflow: hidden;
}
.banda__grade {
  display: grid;
  gap: var(--s6);
  align-items: center;
}
@media (min-width: 64rem) {
  .banda__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s8);
  }
}
.banda__texto { max-width: 34rem; }
.banda__h {
  font-family: var(--display);
  font-size: var(--t-4);
  font-weight: 800; line-height: 1.08;
  letter-spacing: -0.032em;
  margin-bottom: var(--s4);
}
.banda__p {
  max-width: 42ch;
  color: var(--tinta-media);
  line-height: 1.75;
  margin-bottom: var(--s5);
}

/* ── Marquee vertical ───────────────────────────────────────
   Exceção registrada no PRODUCT.md (a regra geral continua: nada
   correndo na horizontal, nenhum carrossel).

   Duas cópias da lista empilhadas; cada trilho sobe 100% da própria
   altura em loop linear. Como são idênticos, quando o primeiro sai o
   segundo está exatamente onde ele começou e a emenda não aparece.
   Só transform — roda no compositor, sem layout por quadro.

   As bordas somem por máscara, não por camada de cor por cima: vale
   sobre qualquer fundo e não depende de acertar o tom do gradiente.
   O esmaecimento item a item (1 no centro, 0,25 nas bordas) vem do
   marquee.js. */
.marquee {
  --dur: 26s;
  position: relative;
  height: 36rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
}
.marquee__trilho {
  display: flex;
  flex-direction: column;
  animation: marquee-sobe var(--dur) linear infinite;
}
.marquee__item {
  display: block;
  padding-block: 0.42em;
  font-family: var(--display);
  font-size: clamp(2rem, 1.1rem + 2.6vw, 3.6rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--tinta-clara);
  text-wrap: balance;
}
@keyframes marquee-sobe {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -100%, 0); }
}

/* Empilhado, a faixa encolhe: aqui ela acompanha o texto, não o
   disputa. */
@media (max-width: 63.99rem) {
  .marquee { height: 22rem; }
}

/* Movimento reduzido: a lista para e a segunda cópia sai — parada,
   ela só repetiria as mesmas áreas logo abaixo. */
@media (prefers-reduced-motion: reduce) {
  .marquee__trilho { animation: none; }
  .marquee__trilho + .marquee__trilho { display: none; }
}

/* ═══════════════ CENA — foto em sangria total ═══════════════
   A fotografia ocupa a largura inteira da seção, em proporção
   natural e sem um pixel de corte. O texto é composto DENTRO da
   própria foto, numa zona de silêncio medida pixel a pixel — por
   isso os percentuais são diferentes em cada cena:

     escritório  x 50-100%, y 20-90%  tinta escura  pior  5,9:1
     azul        x  0-50%,  y  0-60%  tinta clara   pior  6,5:1
     retrato     x  0-30%,  altura toda, tinta escura pior 13,0:1

   Abaixo de 75rem a sobreposição não cabe sem apertar o texto
   contra a Karin: a foto continua sangrando de ponta a ponta e o
   texto desce para logo abaixo dela.                          */

.cena { position: relative; }
.cena__foto { margin: 0; }
.cena__foto img { width: 100%; }

.cena__texto { padding: var(--sec) var(--gutter); }
.cena__caixa {
  max-width: 44rem;
  margin-inline: auto;
  display: grid;
  gap: var(--s3);
}
.cena__lead { font-size: var(--t-1); line-height: 1.55; }
.cena .sec-h { margin-bottom: var(--s2); }

.cena--sobre, .cena--cta { background: var(--luz); color: var(--tinta-escura); }
.cena--proc { background: var(--azul); }

.cena--sobre p { color: var(--tinta-suave); line-height: 1.78; }
.cena--sobre strong { color: var(--tinta-escura); font-weight: 600; }
.cena--sobre .cena__lead { color: var(--tinta-escura); }
/* tinta clara, não média: medido sobre os pixels reais, o texto cai
   sobre a silhueta clara da Justiça, onde --tinta-media daria 3,4:1.
   Vale para o lead e para os parágrafos que vieram depois dele. */
.cena--proc .cena__lead { color: var(--tinta-clara); max-width: 34ch; }
.cena--proc .cena__p {
  color: var(--tinta-clara);
  font-size: var(--t--1);
  line-height: 1.75;
  max-width: 42ch;
  opacity: 0.92;
}

@media (min-width: 75rem) {
  .cena__texto { position: absolute; inset: 0; padding: 0; }
  .cena__caixa {
    position: absolute;
    max-width: none; margin: 0;
    align-content: center;
  }

  .cena--sobre .cena__caixa {
    left: 50%; right: 0; top: 20%; bottom: 10%;
    padding-right: var(--gutter);
  }
  .cena--proc .cena__caixa {
    left: 0; right: 50%; top: 0; bottom: 40%;
    padding-left: var(--gutter);
  }
  /* Véu sob a coluna de texto. O emblema cinza da arte cai justamente
     na faixa dos parágrafos: sem véu o corrido fica em 3,55:1, abaixo
     dos 4,5:1 que texto corrido exige. O véu é o próprio --azul, então
     some no campo chapado e só recolhe o emblema; com ele o pior caso
     sobe para 7,93:1. A esmaecida vai até 78% da largura, bem depois
     da borda do emblema (55%), para não deixar uma emenda vertical
     atravessando o desenho.
     Mexeu nas paradas? Reproduza-as em tools/medir-proc-veu.mjs e
     rode: ele mede os retângulos de linha reais e reprova sozinho. */
  .cena--proc .cena__texto::before {
    content: "";
    position: absolute;
    inset: 0 22% 0 0;
    background: linear-gradient(to right,
      color-mix(in oklab, var(--azul) 62%, transparent) 0%,
      color-mix(in oklab, var(--azul) 62%, transparent) 38%,
      color-mix(in oklab, var(--azul) 52%, transparent) 58%,
      transparent 100%);
    pointer-events: none;
  }
  /* As três janelas medidas no arquivo. A da direita começa em 73%
     porque é onde o arco de ouro termina; a de baixo fica sob o
     círculo, dentro da tira que a varredura mostrou vazia. */
  .cena--emblema .cena__texto { display: block; }
  .emb__bloco {
    position: absolute;
    max-width: none; margin: 0;
    display: grid; align-content: center;
    gap: var(--s2);
  }
  /* As colunas laterais são livres em toda a altura do arquivo (a
     varredura não achou um pixel de ouro fora de 29-73%), então os
     blocos podem crescer no eixo vertical à vontade — o limite é a
     tira de baixo, onde mora a assinatura. */
  .emb__bloco--esq {
    left: 0; width: 29%; top: 5%; bottom: 16%;
    padding-left: var(--gutter);
  }
  .emb__bloco--dir {
    right: 0; width: 27%; top: 5%; bottom: 16%;
    padding-right: var(--gutter);
  }
  .emb__bloco--meio {
    left: 50%; translate: -50% 0;
    bottom: 5%; width: min(48%, 32rem);
    align-content: end;
  }
  .cena--emblema .emblema__h { font-size: clamp(2rem, 2.9vw, 2.75rem); }

}

/* No limite de 1200px a coluna lateral fica com 290px: o texto de
   apoio some antes de virar uma torre de duas palavras por linha. */
@media (min-width: 75rem) and (max-width: 82rem) {
  .emblema__p { display: none; }
}

/* ═══════════ CTA — chamada e botão ao lado dela ═══════════
   A arte é fotografia limpa, sem texto gravado. "Vamos conversar?" e
   o botão ficam JUNTOS, num bloco só, ao lado da Karin — e não
   centrados por cima dela.

   Onde há espaço, medido em tools/medir-escuro.mjs (a massa escura
   da foto é o que derruba texto escuro; o fundo de estúdio, não):

     horizontal 1672x941 — massa escura de 27,0% a 78,3%
                           sobram 451px à esquerda, 362px à direita
     vertical    853x1280 — massa escura de 11,4% a 81,7%
                           sobram  97px à esquerda, 156px à direita

   Por isso o bloco muda de lugar entre os dois: no desktop cabe na
   coluna da esquerda, que é o lado de onde se lê; no celular 97px não
   comportam nem uma palavra, então ele sobe para a faixa livre acima
   da cabeça dela (34,7% da altura, medida em medir-sujeito.mjs) —
   alinhado à esquerda, que é o "ao lado" possível ali.

   A seção ganhou padding-bottom porque o bloco de texto que existia
   abaixo da foto saiu: sem ele a ponte do mobile (--ponte, colada em
   top:100% da figura) não teria campo claro onde pousar. */
.cena--cta { padding-bottom: var(--s7); }

.cta__quadro { position: relative; }

.cta__bloco {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  /* meio da faixa livre acima da cabeça, de medir-sujeito.mjs; o
     translate evita que o número dependa da altura do bloco */
  top: 17.38%;
  transform: translateY(-50%);
  display: grid;
  justify-items: start;
  gap: var(--s4);
}

.cta__h {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-4);
  font-weight: 400; line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--tinta-escura);
}
/* Bronze, não o ouro da página: sobre campo claro o --ouro dá 1,9:1.
   --ouro-fundo foi criado exatamente para isto e mede 5,4:1. */
.cta__q { color: var(--ouro-fundo); }

/* Acima de 60rem entra a arte horizontal e o bloco desce para a
   coluna da esquerda, centrado na altura. A largura para antes dos
   27% onde a massa escura começa: o gutter já come a borda, então
   sobra 25% menos ele. */
@media (min-width: 60.01rem) {
  .cta__bloco {
    right: auto;
    width: calc(25% - var(--gutter));
    top: 50%;
  }
  .cta__h { font-size: clamp(1.75rem, 3.4vw, 3.25rem); line-height: 1.04; }
}

/* ═══════════════════════ DIFERENCIAIS ═══════════════════════ */
.dif {
  background: var(--luz);
  color: var(--tinta-escura);
  padding-block: var(--sec);
}
.dif .sec-h { margin-bottom: var(--s6); max-width: 18ch; }

.dif__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.dif__card {
  position: relative;
  padding: var(--s5) var(--s4);
  background: var(--luz-alto);
  border: 1px solid var(--linha-escura);
  border-radius: var(--raio);
  transition: border-color 0.45s var(--expo), transform 0.45s var(--expo),
              box-shadow 0.45s var(--expo);
}
.dif__card:hover {
  border-color: color-mix(in oklab, var(--ouro-fundo) 34%, transparent);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -30px rgb(26 18 12 / 0.55);
}
.dif__card h3 {
  position: relative;
  font-family: var(--display);
  font-size: var(--t-1); font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
}
/* o traço vive sob o título: na borda superior arredondada ele
   escaparia pelos cantos */
.dif__card h3::after {
  content: ""; position: absolute;
  left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--ouro-fundo); border-radius: 2px;
  transition: width 0.55s var(--expo);
}
.dif__card:hover h3::after { width: 2.6rem; }
.dif__card p { color: var(--tinta-suave); line-height: 1.72; }

/* ═══════════════════════ PROCESSO ═══════════════════════ */
/* --azul nasceu da borda de karin-azul.png; com a arte nova
   (karin-processo) a base fica a 1,06x dele, perto o bastante para
   a foto seguir dissolvendo e as etapas parecerem continuação dela */
.proc { background: var(--azul); }

.proc__passos {
  position: relative;
  padding: var(--sec) var(--gutter);
  overflow: hidden;
}

/* ── Elementos gráficos do fundo ─────────────────────── */
.proc__grade {
  position: absolute; inset: 0;
  z-index: var(--z-deco);
  background-image: radial-gradient(
    color-mix(in oklab, var(--ouro) 30%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.28;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 72%);
  pointer-events: none;
}
.proc__arco {
  position: absolute; z-index: var(--z-deco);
  right: -12vw; top: -6vw;
  width: 38vw; aspect-ratio: 1;
  border: 1px solid color-mix(in oklab, var(--ouro) 22%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.proc__arco::after {
  content: ""; position: absolute; inset: 14%;
  border: 1px solid color-mix(in oklab, var(--ouro) 12%, transparent);
  border-radius: 50%;
}

/* A seção era quatro títulos e quatro linhas soltas num campo azul
   grande demais. A intro abre o método antes dos cards, e cada card
   ganhou uma nota — o detalhe prático que o título não cabe. */
/* Empilhado (abaixo de 75rem) a abertura inteira — título, lead e
   parágrafo — vem logo depois da foto, e as etapas começam na intro.
   Sem isto o recuo inferior da cena e o superior das etapas se somavam
   e abriam duas seções de vazio entre a abertura e a primeira etapa. */
@media (max-width: 74.99rem) {
  .proc__passos { padding-top: 0; }
}

.proc__intro {
  position: relative; z-index: var(--z-conteudo);
  max-width: 60rem; margin: 0 auto var(--s6);
  font-family: var(--display);
  font-size: var(--t-2);
  font-weight: 400; line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--tinta-clara);
  text-wrap: pretty;
}

/* 2×2 fixo: com auto-fit as quatro etapas abriam 3+1 e sobrava
   um card órfão na segunda fileira. */
.proc__steps {
  position: relative; z-index: var(--z-conteudo);
  display: grid; gap: var(--s3);
  grid-template-columns: 1fr;
  max-width: 60rem; margin-inline: auto;
}
@media (min-width: 48rem) {
  .proc__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.step {
  position: relative;
  overflow: hidden;
  padding: var(--s5) var(--s4);
  background: color-mix(in oklab, var(--azul-alto) 62%, transparent);
  border: 1px solid color-mix(in oklab, var(--ouro) 16%, transparent);
  border-radius: var(--raio);
  transition: border-color 0.45s var(--expo), transform 0.45s var(--expo),
              background-color 0.45s var(--expo), box-shadow 0.45s var(--expo);
}
.step:hover {
  border-color: var(--linha-forte);
  background: var(--azul-alto);
  transform: translateY(-4px);
  box-shadow: 0 22px 46px -30px rgb(0 0 0 / 0.9);
}

.step__corpo { position: relative; z-index: 2; }
.step h3 {
  font-family: var(--display);
  font-size: var(--t-1); font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}
.step p { color: var(--tinta-media); font-size: var(--t--1); line-height: 1.7; }

/* A nota é o detalhe prático: fica um degrau abaixo na hierarquia,
   atrás de um filete dourado, para não competir com o corpo. */
.step__nota {
  margin-top: var(--s3);
  padding-left: var(--s3);
  border-left: 2px solid color-mix(in oklab, var(--ouro) 40%, transparent);
  color: var(--tinta-fraca) !important;
  font-size: 0.8125rem !important;
  line-height: 1.6 !important;
}

/* número fantasma: massa tipográfica no canto, puro grafismo */
.step__eco {
  position: absolute; z-index: 1;
  right: -0.5rem; bottom: -2.2rem;
  font-family: var(--display);
  font-size: 7rem; font-weight: 900;
  line-height: 1; letter-spacing: -0.04em;
  color: color-mix(in oklab, var(--ouro) 9%, transparent);
  pointer-events: none;
  transition: color 0.5s var(--expo), transform 0.6s var(--expo);
}
.step:hover .step__eco {
  color: color-mix(in oklab, var(--ouro) 16%, transparent);
  transform: translate3d(-4px, -4px, 0);
}

.proc__fecho {
  position: relative; z-index: var(--z-conteudo);
  max-width: 60rem; margin: var(--s6) auto 0;
  font-family: var(--display);
  font-size: var(--t-2);
  font-weight: 700; line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--tinta-clara);
}

/* ═══════════════════════ CTA ═══════════════════════ */
/* justify-self: start, nao center: o botao divide a margem esquerda
   com a chamada, e os dois descem em linha reta ate a acao. */
.cena--cta .btn {
  justify-self: start;
  font-size: 0.9375rem;
  padding: 1.15rem 2rem;
}

/* ═══════════════════ ONDE NOS ACHAR ═══════════════════
   Versão enxuta: nenhuma caixa, nenhuma sombra, nenhum ícone. Três
   linhas de uma pauta, separadas por filete — o canal à esquerda, o
   dado à direita, a seta no fim. O que era três cartões virou uma
   lista que se lê de cima a baixo em dois segundos. */
.onde {
  background: var(--ardosia);
  padding-block: var(--sec);
  border-top: 1px solid var(--linha-clara);
}
.onde__h {
  font-family: var(--display);
  font-size: var(--t-2);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--tinta-media);
  margin-bottom: var(--s4);
}

.onde__lista { border-top: 1px solid var(--linha-clara); }
.onde__lista li { border-bottom: 1px solid var(--linha-clara); }

.canal {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.35rem var(--s5);
  padding: var(--s5) 2.5rem var(--s5) 0;
  transition: padding-left 0.45s var(--expo);
}
.canal:hover, .canal:focus-visible { padding-left: 0.75rem; }

.canal__rotulo {
  font-family: var(--display);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  transition: color 0.4s var(--expo);
}
.canal:hover .canal__rotulo, .canal:focus-visible .canal__rotulo { color: var(--ouro-claro); }

.canal__valor {
  font-size: var(--t-0);
  line-height: 1.5;
  color: var(--tinta-fraca);
  transition: color 0.4s var(--expo);
}
.canal:hover .canal__valor, .canal:focus-visible .canal__valor { color: var(--tinta-media); }

.canal__seta {
  position: absolute; right: 0; top: 50%;
  translate: 0 -50%;
  width: 1.25rem; height: 1.25rem;
  fill: none; stroke: var(--ouro); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.55;
  transition: transform 0.45s var(--expo), opacity 0.4s var(--expo);
}
.canal:hover .canal__seta, .canal:focus-visible .canal__seta { transform: translateX(5px); opacity: 1; }

/* Abaixo de 40rem o endereço não cabe na mesma linha do rótulo:
   as duas colunas viram duas linhas, ainda sem caixa nenhuma. */
@media (max-width: 40rem) {
  .canal {
    grid-template-columns: 1fr;
    padding-right: 2rem;
  }
  .canal__valor { grid-column: 1; }
}

/* ── Prévia do destino ─────────────────────────────────────
   Um painel só, reaproveitado pelas três linhas, que persegue o
   ponteiro por interpolação (ver canais.js). O JS escreve APENAS
   o transform do container externo; a caixa interna guarda a
   entrada em escala e opacidade. Separar as duas camadas é o que
   evita a transição de CSS brigando com o quadro do rAF — se as
   duas mexessem no mesmo transform, o painel andaria aos trancos. */
.canal-pop {
  position: fixed; top: 0; left: 0;
  z-index: var(--z-pop);
  pointer-events: none;
  will-change: transform;
}
.canal-pop__caixa {
  width: 20.5rem;
  padding: 0.55rem 0.55rem 0.15rem;
  background: var(--ardosia-topo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-sm);
  box-shadow: 0 26px 60px -30px rgb(0 0 0 / 0.95),
              0 0 70px -40px color-mix(in oklab, var(--ouro) 60%, transparent);
  opacity: 0;
  transform: scale(0.94) translateY(10px);
  transition: opacity 0.26s var(--expo), transform 0.42s var(--mola);
}
.canal-pop.is-on .canal-pop__caixa { opacity: 1; transform: none; }

.canal-pop__quadro { display: none; margin: 0; }
.canal-pop[data-pv="whatsapp"]  .canal-pop__quadro[data-pv="whatsapp"],
.canal-pop[data-pv="instagram"] .canal-pop__quadro[data-pv="instagram"],
.canal-pop[data-pv="mapa"]      .canal-pop__quadro[data-pv="mapa"] { display: block; }

.canal-pop__quadro svg {
  width: 100%; height: auto;
  border-radius: 8px;
  display: block;
}
.canal-pop__quadro figcaption {
  padding: 0.6rem 0.35rem 0.55rem;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tinta-media);
}

/* Peças dos esquemas. Tudo em token: a prévia envelhece junto com
   o resto da paleta em vez de virar uma imagem congelada. */
.pv-tela        { fill: color-mix(in oklab, var(--ardosia) 80%, black); }
.pv-tela-cheia  { fill: color-mix(in oklab, var(--ardosia) 80%, black); }
.pv-linha       { stroke: color-mix(in oklab, var(--tinta-clara) 14%, transparent); stroke-width: 1; }
.pv-tinta       { fill: color-mix(in oklab, var(--tinta-clara) 55%, transparent); }
.pv-fraca       { fill: color-mix(in oklab, var(--tinta-clara) 24%, transparent); }
.pv-bolha       { fill: color-mix(in oklab, var(--tinta-clara) 9%, transparent); }
.pv-bolha-ouro  { fill: color-mix(in oklab, var(--ouro) 30%, transparent); }
.pv-ouro-tinta  { fill: color-mix(in oklab, var(--ouro-claro) 62%, transparent); }
.pv-ouro-fraco  { fill: color-mix(in oklab, var(--ouro) 34%, transparent); }
.pv-ouro-cheio  { fill: var(--ouro); }
.pv-anel        { fill: none; stroke: var(--ouro); stroke-width: 2; opacity: 0.55; }
.pv-quadro-img  { fill: color-mix(in oklab, var(--tinta-clara) 11%, transparent); }
.pv-quadro-ouro { fill: color-mix(in oklab, var(--ouro) 22%, transparent); }
.pv-mapa        { fill: color-mix(in oklab, var(--azul) 82%, black); }
.pv-rua         { fill: none; stroke: color-mix(in oklab, var(--tinta-clara) 13%, transparent); stroke-width: 8; }
.pv-rua-fina    { fill: none; stroke: color-mix(in oklab, var(--tinta-clara) 8%, transparent); stroke-width: 4; }
.pv-avenida     { fill: none; stroke: color-mix(in oklab, var(--ouro) 20%, transparent); stroke-width: 9; }
.pv-quadra      { fill: color-mix(in oklab, var(--tinta-clara) 7%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .canal-pop__caixa { transition: opacity 0.01ms; transform: none; }
}

/* ═══════════════════════ RODAPÉ ═══════════════════════ */
.foot {
  background: var(--ardosia);
  padding-block: var(--s8) var(--s5);
  border-top: 1px solid var(--linha-clara);
}
/* Colunas explícitas: a da marca é naturalmente mais larga que as
   outras e, no auto-fit, empurrava o total além da linha, jogando
   "Navegação" para uma segunda fileira órfã. */
.foot__grid {
  display: grid;
  grid-template-columns: 1.5fr 1.1fr 1.1fr 0.9fr;
  gap: var(--s6) var(--s5);
  padding-bottom: var(--s7);
}
@media (max-width: 60rem) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 30rem) {
  .foot__grid { grid-template-columns: 1fr; }
}
.foot__brand { display: flex; align-items: center; gap: 0.85rem; }
.foot__logo { width: auto; height: 3.4rem; }
/* Gêmea de .emblema__assinatura: mesma marca, mesmo par de linhas, e
   por isso a mesma Josefin Sans Light. Ver a nota lá sobre o tracking. */
.foot__name {
  font-family: var(--assinatura);
  font-size: 1.25rem; font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.foot__name span {
  display: block;
  font-family: var(--assinatura);
  font-size: 0.5625rem; font-weight: 300;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ouro-claro);
  margin-top: 0.25rem;
}
.foot__col h2 {
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ouro-claro);
  margin-bottom: var(--s3);
}
.foot__col address,
.foot__col p { color: var(--tinta-media); font-size: var(--t--1); line-height: 1.85; }
.foot__col a {
  display: block;
  color: var(--tinta-media);
  font-size: var(--t--1); line-height: 1.95;
  transition: color 0.3s var(--expo);
}
.foot__col a:hover { color: var(--ouro-claro); }
.foot__col address a { line-height: 1.85; }
.foot__oab { margin-top: var(--s2); color: var(--tinta-fraca) !important; }

.foot__base {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--linha-clara);
  font-size: 0.6875rem; line-height: 1.7;
  color: var(--tinta-fraca);
}
.foot__legal { max-width: 46ch; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVO
   O mobile não é o desktop encolhido: o hero vira composição
   empilhada, as fotos ganham largura total em proporção natural
   e os painéis de hover viram texto sempre visível.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 60rem) {
  .nav { --nav-h: 4.25rem; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav__logo { height: 2.1rem; }

  /* O hero desta versão não tem arte de fundo para empilhar: é
     texto sobre campo marfim e o recorte logo abaixo. O que sobra
     de mobile aqui é só reduzir a faixa da marca e centrar a
     tipografia — a grade de uma coluna já vem do padrão. */
  /* Empilhado: a foto vira faixa 4:3 no topo, recortada em 78% para
     manter a figura no quadro, e o texto desce para o campo — que é
     o hex exato da metade clara do arquivo, então do lado esquerdo a
     emenda some. */
  /* MESMA COMPOSIÇÃO DO DESKTOP, e não uma versão empilhada: a arte
     ocupa a seção inteira e a tipografia pousa nela, à esquerda.

     Só é possível porque a coluna clara da arte vertical é chapada
     — medida em 20 pontos, fica entre #EFE9E5 e #F1EBE6 — e vai de
     0 a 41-46% da largura, de cima a baixo. O campo da seção repete
     esse hex, e um degradê da MESMA cor estende a coluna por cima da
     faixa de sombra (42-64%). Onde ele é opaco a foto já era aquela
     cor: não é véu sobre fotografia, é a continuação do campo dela.

     O preço é a caixa de texto: 375px de tela dão 200px de coluna,
     então a tipografia inteira desce um degrau. Não é possível ter
     ao mesmo tempo a figura em tamanho digno e um titular de 32px
     ao lado dela nessa largura. */
  .hero { --campo-hero: #F0EAE5; background: var(--campo-hero); }
  .hero__marca { padding-block: 0.85rem; gap: var(--s1); }

  .hero__campo {
    position: relative;
    display: flex;
    align-items: center;
  }
  .hero__foto { position: absolute; inset: 0; }
  .hero__foto img {
    width: 100%; height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 100% center;
  }
  /* Opaco até 46% e some em 62%: medido no perfil de luminância da
     arte, a coluna clara aguenta texto até 39% sozinha, a sombra da
     parede vai de 40% a 50% e o livro começa em ~50%. O degradê
     cobre a sombra — nunca o livro nem o rosto. */
  .hero__foto::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
      var(--campo-hero) 0 46%,
      color-mix(in srgb, var(--campo-hero) 45%, transparent) 56%,
      transparent 62%);
    pointer-events: none;
  }

  .hero__wrap { padding-block: var(--s5); }
  /* A caixa termina em 44vw, dentro da parte opaca do degradê. É o
     limite físico: com a figura em tamanho digno, 375px de tela
     deixam ~145px de coluna para o texto. */
  .hero__texto { max-width: calc(44vw - var(--gutter)); }

  .hero__kicker {
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    margin-bottom: var(--s2);
  }
  .hero__titulo {
    font-size: 1.3125rem;
    line-height: 1.16;
    letter-spacing: -0.01em;
    margin-bottom: var(--s3);
  }
  .hero__lead {
    font-size: 0.8125rem;
    line-height: 1.6;
    margin-bottom: var(--s3);
  }
  /* As pílulas são opacas: carregam o próprio contraste e não
     dependem do campo claro atrás. Por isso elas — e só elas —
     passam dos 44vw do texto e vão até 62vw, onde o rótulo cabe em
     uma linha. Pelo mesmo motivo a secundária vira sólida aqui: um
     contorno precisaria de fundo claro atrás, e ali já é sombra. */
  .hero__acoes { gap: var(--s2); width: min(62vw, 18rem); max-width: none; }
  .hero__acoes .btn { justify-content: center; }
  .hero__acoes .btn--linha {
    background: var(--tinta-escura);
    color: var(--marfim);
    border-color: var(--tinta-escura);
  }
  .hero__acoes .btn { padding: 0.75rem 0.7rem; font-size: 0.625rem; letter-spacing: 0.03em; gap: 0.4rem; }

  .deco--arc { display: none; }
}

@media (max-width: 48rem) {
  .areas__grid { grid-template-columns: 1fr; }
  .foot__base { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE — ponte de dissolução sob a arte vertical

   As cores de fundo das seções foram derivadas das fotos HORIZONTAIS.
   A arte vertical 9:16 termina em outra cor, então aparece uma emenda
   onde antes a foto dissolvia. Medido em tela, no rodapé de cada foto:

     hero      #010C1D contra #151D28  = 1,16x
     emblema   #09111C contra #151D28  = 1,12x
     sobre     #DBCEC7 contra #F2EFED  = 1,34x
     processo  #0B131B contra #19212C  = 1,16x   (karin-processo)
     contato   #D1B4A3 contra #F2EFED  = 1,70x   ← a mais visível

   (A banda saiu da tabela quando trocou a foto pelo marquee.)

   Três saídas possíveis, e por que esta:

   1. Mexer na foto (máscara, fade por cima) — proibido pela regra nº 1.
   2. Trocar a cor da seção — as seções hero/manifesto/emblema/áreas/
      banda são TODAS #151D28 e formam um campo escuro contínuo. Mudar
      uma criaria um degrau entre irmãs de mesmo tom: troca de emenda,
      não conserto. (Foi o que a tabela do briefing sugeria, com um
      agravante: a média da borda de karin-azul dá #292625, um cinza
      quente que não existe na imagem — a média mistura o navy com o
      bloco pêssego. A mediana da cor de campo é #0A121B.)
   3. Fazer a transição NO ESPAÇO DA SEÇÃO, logo abaixo da foto. ✅

   A foto fica intocada; o degradê ocupa a faixa da seção que vem
   depois dela. Em toda seção mobile a foto está no topo e o campo
   continua abaixo, então basta a borda inferior.

   Valores de tools/medir-bordas.mjs (mediana, não média).
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 60rem) {
  .cena--emblema { --borda-base: #09111C; --campo: var(--ardosia); }
  .cena--sobre   { --borda-base: #DBCEC7; --campo: var(--luz); --ponte: 6rem; }
  .cena--proc    { --borda-base: #0B131B; --campo: var(--azul); }   /* base de karin-processo-m */
  /* Estúdio claro: a base da arte mede #E8E4E1 (mediana, desvio 1,0x
     — a borda é chapada), a um passo do --luz (#F2EFED) que é o campo
     da seção. A ponte de 8rem existia para dissolver o pêssego
     #D1B4A3 de uma arte antiga; com esta diferença, 3rem bastam. */
  .cena--cta     { --borda-base: #E8E4E1; --campo: var(--luz); --ponte: 3rem; }

  .cena__foto { position: relative; }

  .cena__foto::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0; right: 0; top: 100%;
    height: var(--ponte, 5rem);
    background: linear-gradient(to bottom, var(--borda-base), var(--campo));
    pointer-events: none;
  }

  /* A ponte é posicionada e o texto da cena não era: sem isto, um
     parágrafo que caísse nos primeiros centímetros da seção ficaria
     por baixo do degradê. Vale para qualquer texto futuro, não só
     para os de hoje. */
  .cena__texto { position: relative; z-index: 1; }

  /* ── O título do emblema sobe para dentro da fotografia ──────
     No desktop os três blocos ficam nas faixas escuras medidas no
     PNG horizontal (ver @media min-width 75rem, intocado). No mobile
     eles caíam todos abaixo da foto e a imagem ficava muda.

     Mapeada célula a célula, a vertical do emblema tem duas faixas
     largas para texto claro — topo 0-30% (pior 9,2:1) e base 70-100%
     (pior 12,6:1). O miolo é o traço dourado, onde cai para 0,9:1.
     O título vai para o topo: assim as duas fotos de sangria seguidas
     não repetem a mesma composição, já que no hero ele está embaixo.

     O deslocamento é negativo a partir de .cena__texto, que começa
     exatamente na base da foto. Nada aqui muda o posicionamento dos
     ancestrais: tentei antes tornar .emb__bloco relativo e foi pior —
     ele virou o bloco de contenção e o título passou a se ancorar no
     bloco de texto abaixo da foto, não na seção.

     Contas em vw porque a altura da foto é função da largura:
       altura da foto      = 177,7vw   (941:1672)
       alvo: topo em 9%    =  16vw
       recuo a partir dela = 177,7 − 16 ≈ 162vw acima */
  .cena--emblema .emblema__h {
    position: absolute;
    z-index: var(--z-conteudo);
    top: -162vw;
    left: var(--gutter);
    right: var(--gutter);
    margin: 0;
    text-align: center;
  }
}

/* ════════════════════════════════════════════════════════════════
   TOQUE — nenhum estado de hover pode DESLOCAR nada

   Em tela de toque o :hover não é um estado momentâneo: ele gruda no
   elemento tocado e só solta quando o dedo encosta em outro. Rolando
   a página, o navegador aplica e retira esse estado sozinho — e cada
   uma dessas regras tem transição, então o elemento desliza.

   Era isso que fazia "as escritas dos cards irem para a esquerda":
   .area:hover .area__t empurra o título 4px em X, e ao soltar ele
   volta deslizando por 0,45s. A linha de contato era pior: 12px de
   padding-left entrando e saindo.

   Só os deslocamentos são anulados. Cor e sombra podem continuar —
   não movem nada e o rastro do toque até ajuda a mostrar o que foi
   tocado. :focus-visible fica de fora de propósito: quem navega por
   teclado precisa enxergar onde está.
   ════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .area:hover                { transform: none; }
  .area:hover .area__t       { transform: none; }
  .area:hover::after         { width: 0; }
  .dif__card:hover           { transform: none; }
  .dif__card:hover h3::after { width: 0; }
  .step:hover                { transform: none; }
  .step:hover .step__eco     { transform: none; }
  .canal:hover               { padding-left: 0; }
  .canal:hover .canal__seta  { transform: none; }
}

/* Sem hover (toque): a explicação vira texto corrido, sempre
   visível. Ninguém deve caçar informação com o dedo. */
@media (hover: none) {
  .areas__hint { display: none; }
  .area { padding-bottom: var(--s4); }
  /* Só a aparência. Nada de desfazer posicionamento: o painel
     flutuante inteiro mora em @media (hover: hover) e aqui nem chega
     a existir, então não há position, transform nem visibility para
     reverter. Era justamente essa reversão que não vencia a
     especificidade e deixava o texto saltar para fora do card. */
  .area__pop {
    margin-top: var(--s3);
    padding: var(--s3) 0 0;
    border-top: 1px solid var(--linha-clara);
  }
  .area::after { display: none; }
}

/* ═══════════════════════ GALERIA 3D ═══════════════════════
   Seção inteira para o efeito de profundidade. O canvas ocupa a
   dobra toda, como no demo do componente; a tipografia pousa por
   cima em mix-blend-mode, também como lá.

   O palco tem altura própria (não depende do canvas, que o three
   dimensiona por JS) para a seção não colapsar antes do primeiro
   quadro nem provocar layout shift quando ele chega. */
.g3d {
  position: relative;
  background: var(--ardosia);
  border-top: 1px solid var(--linha-clara);
  overflow: hidden;
}
.g3d__palco {
  position: relative;
  height: 100svh;
  min-height: 34rem;
}
.g3d__palco canvas { display: block; width: 100%; height: 100%; }

/* A frente não intercepta ponteiro: o hover do shader e a roda
   precisam chegar ao canvas por baixo. */
.g3d__frente {
  position: absolute; inset: 0;
  z-index: var(--z-conteudo);
  display: grid;
  align-content: center; justify-items: center;
  gap: var(--s4);
  padding: var(--gutter);
  pointer-events: none;
  text-align: center;
}
/* exclusion como no demo: a tipografia inverte sobre a fotografia
   que estiver passando, em vez de sumir sobre as claras. */
.g3d__h {
  font-family: var(--display);
  font-size: var(--t-5);
  font-weight: 400; line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  mix-blend-mode: exclusion;
}
/* Fallback sem WebGL: a grade de miniaturas do componente original. */
.g3d__fallback {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s3);
  padding: var(--sec) var(--gutter);
}
.g3d__fallback img {
  width: 100%; height: auto;
  border-radius: var(--raio-sm);
}
/* Sem WebGL o palco não precisa de uma dobra inteira, e a chamada
   sobreposta não teria fotografia por baixo para inverter. A classe
   vem do JS só nesse caso — NÃO pode ser :not(.g3d--pronta), senão o
   palco colapsa nos milissegundos entre o HTML e o primeiro quadro. */
.g3d__palco.g3d--sem-webgl { height: auto; min-height: 0; }
.g3d__palco.g3d--sem-webgl + .g3d__frente { position: static; padding-top: var(--sec); }
.g3d__palco.g3d--sem-webgl + .g3d__frente .g3d__h { mix-blend-mode: normal; }