/* ==========================================================================
   TOLISSANO — SISTEMA EDITORIAL DE EVIDÊNCIAS
   Spec: docs/superpowers/specs/2026-08-12-editorial-evidence-sections-design.md

   Uma gramática compartilhada por três seções (Trabalho, Atuação, Empresa):
   mensagem curta + prova visual dominante + dois ou três registros auxiliares
   + troca de estado simples.

   Regras estruturais da spec respeitadas aqui:
   - somente o estado ativo participa do fluxo e define a altura (os inativos
     usam [hidden], nunca position:absolute sobre um palco de altura fixa);
   - animação apenas em opacity/transform, entre 180ms e 220ms;
   - nenhuma animação decorativa infinita, nenhum efeito de cursor;
   - sem backdrop-filter, canvas, WebGL ou parallax;
   - prefers-reduced-motion remove deslocamento.
   ========================================================================== */

:root {
  --ev-swap: 200ms;
  --ev-ease: cubic-bezier(.22, .78, .28, 1);
  --ev-rule: var(--tl-color-rule, rgb(21 20 18 / .16));
  --ev-rule-strong: var(--tl-color-rule-strong, rgb(21 20 18 / .3));
  --ev-accent: var(--tl-color-accent, #d83b18);
  --ev-ink: var(--tl-color-ink, #151412);
  --ev-muted: var(--tl-color-muted, #756d62);
  --ev-paper: var(--tl-paper-0, #fffdf8);
}

/* Entrada do estado ativo: transição, não animação.

   `page.css` pausa toda animação dentro de `.topology` enquanto o container
   não tem `is-motion-visible` — classe que nenhum script das páginas internas
   aplica hoje. Uma animação de entrada com `fill-mode` ficava congelada no
   primeiro quadro (opacity 0) e produzia o painel branco descrito na spec.
   Transições não são afetadas por `animation-play-state`, e o estado natural
   do elemento é sempre visível: se o script falhar, o conteúdo aparece. */
.ev-enter {
  transition: opacity var(--ev-swap) var(--ev-ease), transform var(--ev-swap) var(--ev-ease);
}

.ev-entering {
  opacity: 0;
  transform: translateY(6px);
}

/* Registro auxiliar: seletor da evidência dominante. */
.ev-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 4px 12px;
  padding: 14px 15px;
  border: 1px solid var(--ev-rule);
  background: var(--ev-paper);
  color: var(--ev-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 200ms var(--ev-ease);
}

.ev-pick > b {
  color: var(--ev-accent);
  font: 500 9px/1 var(--tl-font-mono);
  letter-spacing: .12em;
}

.ev-pick > span {
  font: 500 10px/1.35 var(--tl-font-mono);
  letter-spacing: .1em;
}

.ev-pick > small {
  grid-column: 2;
  color: var(--ev-muted);
  font: 400 11.5px/1.45 var(--tl-font-sans);
  letter-spacing: 0;
}

.ev-pick:hover { border-color: var(--ev-rule-strong); }

.ev-pick:focus-visible {
  outline: 2px solid var(--ev-accent);
  outline-offset: 2px;
}

.ev-pick[aria-selected="true"] {
  border-color: var(--ev-accent);
  box-shadow: inset 3px 0 var(--ev-accent);
  transform: translateY(-2px);
}

/* Superfície editorial reutilizada pelas provas visuais. */
.ev-surface {
  position: relative;
  border: 1px solid var(--ev-rule-strong);
  background: var(--ev-paper);
}

.ev-surface__bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--ev-rule);
  color: var(--ev-muted);
  font: 500 7.5px/1 var(--tl-font-mono);
  letter-spacing: .14em;
}

.ev-figure { display: block; width: 100%; height: auto; }

/* ==========================================================================
   1. TRABALHO — pôster de identidade + evidências recortadas
   ========================================================================== */

.poster {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: start;
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--ev-rule);
  /* A identidade da operação entra pelo fundo: cor, grid e registro. */
  background:
    linear-gradient(var(--poster-grid, rgb(21 20 18 / .04)) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, var(--poster-grid, rgb(21 20 18 / .04)) 1px, transparent 1px) 0 0 / 34px 100%,
    linear-gradient(135deg, var(--poster-tint, rgb(21 20 18 / .05)), transparent 62%),
    var(--poster-paper, var(--ev-paper));
}

.poster--nexus {
  --poster-tint: rgb(31 103 165 / .12);
  --poster-grid: rgb(31 103 165 / .07);
  --poster-paper: #f7fafc;
  --poster-mark: #1f67a5;
}

.poster--henke {
  --poster-tint: rgb(95 118 85 / .14);
  --poster-grid: rgb(27 27 23 / .05);
  --poster-paper: #f8f5ec;
  --poster-mark: #5f7655;
}

.poster--seller {
  --poster-tint: rgb(47 124 88 / .13);
  --poster-grid: rgb(23 32 25 / .05);
  --poster-paper: #f5f9f3;
  --poster-mark: #2f7c58;
}

/* O pôster não depende de animação de entrada para existir: a legada
   `worldEnter` podia ficar presa no quadro inicial (opacity 0) quando o
   mundo era reexibido, produzindo o painel branco descrito na spec. A troca
   de mundo passa a usar a mesma entrada curta dos demais estados. */
.poster {
  animation: none;
  opacity: 1;
  transform: none;
}

.poster.ev-enter {
  transition: opacity var(--ev-swap) var(--ev-ease), transform var(--ev-swap) var(--ev-ease);
}

/* Coluna esquerda: a marca é percebida primeiro. */
.poster__identity { display: grid; align-content: start; gap: 14px; }

.poster__mark {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--poster-mark);
  color: var(--poster-mark);
  font: 500 11px/1 var(--tl-font-mono);
  letter-spacing: .18em;
  justify-self: start;
}

.poster__mark b {
  font: 600 22px/1 var(--tl-font-display);
  letter-spacing: -.02em;
}

.poster__lede {
  max-width: 34ch;
  margin: 0;
  color: var(--ev-ink);
  font: 400 clamp(19px, 1.9vw, 26px)/1.28 var(--tl-font-display);
  letter-spacing: -.015em;
}

.poster__note {
  max-width: 44ch;
  margin: 0;
  color: var(--ev-muted);
  font: 400 13.5px/1.55 var(--tl-font-sans);
}

.poster__picks {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

/* Coluna direita: prova visual dominante. Só o estado ativo existe no fluxo,
   então a altura da seção acompanha o conteúdo — sem palco vazio. */
.poster__stage { display: grid; gap: 12px; min-width: 0; }

.poster__shot[hidden] { display: none; }

.poster__shot {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.poster__shot-frame {
  position: relative;
  display: grid;
  min-width: 0;
  /* Proporção reservada: a troca de estado não move o layout. */
  aspect-ratio: 16 / 11;
}

/* Duas capturas sobrepostas, com inclinação pequena e intencional. */
.poster__plate {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--ev-rule-strong);
  background: var(--ev-paper);
  box-shadow: 0 14px 30px rgb(21 20 18 / .1);
}

.poster__plate--main {
  inset: 0 14% 12% 0;
  transform: rotate(-.6deg);
}

.poster__plate--aside {
  inset: 34% 0 0 30%;
  transform: rotate(1deg);
}

.poster__plate--aside .ev-surface__bar { font-size: 7px; }

.poster__shot-caption {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid var(--ev-rule);
}

.poster__shot-caption b {
  color: var(--ev-accent);
  font: 500 8.5px/1 var(--tl-font-mono);
  letter-spacing: .14em;
}

.poster__shot-caption span {
  color: var(--ev-muted);
  font: 400 13px/1.5 var(--tl-font-sans);
}

/* ==========================================================================
   2. ATUAÇÃO — composições editoriais originais (uma por sinal)
   ========================================================================== */

.act-evidence {
  display: grid;
  gap: 14px;
  /* <figure> traz margem lateral do user-agent: zerada para a composição
     ocupar a coluna inteira. */
  margin: clamp(22px, 3vw, 38px) 0 0;
  min-width: 0;
}

.act-evidence__frame {
  overflow: hidden;
  border: 1px solid var(--ev-rule-strong);
  background:
    linear-gradient(rgb(21 20 18 / .035) 1px, transparent 1px) 0 0 / 100% 30px,
    var(--ev-paper);
}

.act-evidence__caption {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
  color: var(--ev-muted);
  font: 500 8px/1.5 var(--tl-font-mono);
  letter-spacing: .14em;
}

.act-evidence__caption b { color: var(--ev-accent); font-weight: 500; }

/* ==========================================================================
   3. EMPRESA — ANTES → MOVIMENTO TOLISSANO → AGORA
   ========================================================================== */

/* O contêiner legado do resultado era um grid de duas colunas com altura
   mínima fixa (antes/depois). A transformação agora é o conteúdo: uma coluna,
   altura definida pelo mapa ativo — sem palco vazio. */
.company-v2 .learning-result {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  min-height: 0;
  padding: clamp(20px, 2.6vw, 40px);
}

.company-v2 .learning-result__stamp { margin-top: 18px; }

/* A transformação é lida primeiro pela cena; o mapa em texto confirma. */
.transform-scene {
  /* Primeira faixa do mapa: a cena atravessa todas as colunas. */
  grid-column: 1 / -1;
  margin: 0 0 clamp(6px, 1vw, 14px);
  min-width: 0;
}

.transform-scene__frame {
  overflow: hidden;
  border: 1px solid var(--ev-rule-strong);
  background:
    linear-gradient(rgb(21 20 18 / .03) 1px, transparent 1px) 0 0 / 100% 30px,
    var(--ev-paper);
}

/* `display` de classe sobrescreve o [hidden] do user-agent: sem esta regra
   os cinco mapas apareceriam empilhados ao mesmo tempo. */
.transform-map[hidden] { display: none; }

.transform-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, .92fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(10px, 1.4vw, 20px);
  min-width: 0;
}

.transform-map__step {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid var(--ev-rule);
  background: var(--ev-paper);
  min-width: 0;
}

.transform-map__step > h4 {
  margin: 0;
  color: var(--ev-muted);
  font: 500 8px/1 var(--tl-font-mono);
  letter-spacing: .18em;
}

/* O centro é o movimento Tolissano: investigação e síntese, não engrenagem. */
.transform-map__step--movement {
  border-color: var(--ev-accent);
  background:
    linear-gradient(180deg, rgb(216 59 24 / .07), transparent 58%),
    var(--ev-paper);
}

.transform-map__step--movement > h4 { color: var(--ev-accent); }

.transform-map__step--after { border-color: var(--ev-rule-strong); }

.transform-map__arrow {
  align-self: center;
  color: var(--ev-accent);
  font: 400 15px/1 var(--tl-font-mono);
}

.transform-map__result {
  margin: 0;
  color: var(--ev-ink);
  font: 500 clamp(15px, 1.5vw, 19px)/1.3 var(--tl-font-display);
  letter-spacing: -.01em;
}

.transform-map__detail {
  margin: 0;
  color: var(--ev-muted);
  font: 400 12.5px/1.5 var(--tl-font-sans);
}

.transform-map__items {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.transform-map__items li {
  padding: 7px 9px;
  border: 1px solid var(--ev-rule);
  color: var(--ev-muted);
  font: 500 8.5px/1.35 var(--tl-font-mono);
  letter-spacing: .08em;
}

/* Registros desalinhados de propósito: o "antes" é desorganizado. */
.transform-map__items li:nth-child(2) { transform: translateX(6px); }
.transform-map__items li:nth-child(3) { transform: translateX(-4px); }

.transform-map__step--movement .transform-map__items li {
  border-color: rgb(216 59 24 / .35);
  color: var(--ev-ink);
  transform: none;
}

/* ==========================================================================
   4. EMPRESA — fechamento: CTA proporcional (spec 3.4)
   ========================================================================== */

.company-v2 .company-signature__cta {
  gap: 16px;
  width: max-content;
  max-width: 100%;
  padding: 16px 22px;
}

.company-signature__channel {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin-top: 14px;
  color: var(--company-muted, var(--ev-muted));
  font: 500 9px/1.4 var(--tl-font-mono);
  letter-spacing: .12em;
}

.company-signature__channel b {
  color: var(--company-ink, var(--ev-ink));
  font-weight: 500;
  letter-spacing: .08em;
}

/* ==========================================================================
   5. RESPONSIVIDADE
   ========================================================================== */

@media (max-width: 980px) {
  /* Tablet: navegação vira faixa superior, composição segue abaixo. */
  .poster { grid-template-columns: 1fr; }
  .poster__stage { order: -1; }

  .transform-map {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .transform-map__arrow { justify-self: center; transform: rotate(90deg); }
}

@media (max-width: 700px) {
  .poster { padding: 18px 14px 20px; gap: 18px; }
  .poster__lede { font-size: 19px; }

  /* Sem inclinação no celular: nada de conteúdo importante cortado. */
  .poster__shot-frame { aspect-ratio: 4 / 3; }
  .poster__plate--main { inset: 0 10% 16% 0; transform: none; }
  .poster__plate--aside { inset: 40% 0 0 26%; transform: none; }

  .poster__picks { gap: 6px; }
  .ev-pick { padding: 11px 12px; }
  .ev-pick > small { font-size: 11px; }

  .act-evidence { margin-top: 20px; }

  .transform-map__step { padding: 13px 12px; }

  .company-v2 .company-signature__cta { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   6. MOVIMENTO REDUZIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ev-enter { transition: none; }
  .ev-entering { opacity: 1; transform: none; }

  .ev-pick,
  .ev-pick[aria-selected="true"] { transition: none; transform: none; }
}

/* ==========================================================================
   7. CUSTO POR FRAME NAS HEROS
   Elementos fixos ou grandes com backdrop-filter obrigam o compositor a
   reler o fundo a cada frame de scroll — o incômodo aparece justamente nos
   primeiros scrolls de cada hero. Fundo opaco entrega o mesmo caráter.
   ========================================================================== */

.whatsapp-float {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--tl-color-surface, #fffdf8);
}

.company-v2 .formation-console {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.henke-topology,
.topology-world--seller {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Revelações mais curtas: menos tempo com blocos inteiros em composição. */
.reveal {
  transform: translateY(16px);
  transition: opacity 380ms ease, transform 420ms var(--ev-ease);
}

/* ==========================================================================
   8. ATUAÇÃO — hero e diagnóstico
   ========================================================================== */

/* O botão flutuante ocupa o canto inferior direito da janela: a barra de
   seleção da hero reserva esse espaço para não ter a última ação coberta. */
@media (min-width: 981px) {
  .signal-wave-stage__selection { padding-right: 268px; }
}

/* O diagnóstico cabe em uma tela: a navegação centraliza e a coluna de
   conteúdo limita a altura, deixando espaço previsível para as imagens. */
@media (min-width: 981px) {
  .diagnostic {
    min-height: 0;
    max-height: calc(100svh - var(--tl-header-height, 96px) - 48px);
  }

  .diagnostic__nav {
    display: grid;
    align-content: center;
    gap: 2px;
  }

  .diagnostic__nav button { padding: 14px 0; }

  .diagnostic__body {
    padding: clamp(26px, 3vw, 46px);
    overflow: hidden;
  }

  .diagnostic__panel h3 {
    margin: 0 0 12px;
    font-size: clamp(34px, 3.4vw, 52px);
  }

  .diagnostic__panel > p { font-size: 15px; }

  .diagnostic__flow { margin-top: 20px; }
  .diagnostic__flow span,
  .diagnostic__flow button { min-height: 74px; }

  .act-evidence { margin-top: 18px; }

  /* A composição respeita a altura restante — pronta para receber imagem. */
  .act-evidence__frame {
    max-height: 34svh;
    display: grid;
    place-items: center;
  }

  .act-evidence__frame > svg { max-height: 34svh; }
}

/* ==========================================================================
   9. EMPRESA — respiro do registro e fim de página sem duplicar a ação
   ========================================================================== */

.company-v2 .company-v2-hero__index {
  left: max(var(--tl-page-gutter), 28px);
  bottom: 34px;
}

/* Perto do fechamento, a ação já está na página: o botão flutuante sai de
   cena para não repetir a mesma chamada duas vezes. */
.whatsapp-float {
  transition: opacity 220ms ease, transform 260ms var(--ev-ease), visibility 0s linear 0s;
}

.whatsapp-float.is-muted {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition-delay: 0s, 0s, 260ms;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { transition: none; }
}

/* ==========================================================================
   10. REFINOS EDITORIAIS — 2026-08-14
   Vácuos de composição, fusão das seis operações e entrada de imagem real.
   ========================================================================== */

/* --- 10.1 Cabeçalhos de seção: a frase da direita deixa de flutuar sozinha.
   O par título/parágrafo era `1.25fr / .55fr` com o parágrafo travado em 44ch,
   o que abria um corredor vazio entre os dois e sobrava margem à direita.
   A segunda coluna agora tem largura própria e o texto a preenche inteira. */
@media (min-width: 981px) {
  .section-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 368px);
    gap: clamp(30px, 3.4vw, 54px);
    align-items: end;
    margin-bottom: clamp(34px, 4.4vh, 60px);
  }

  .section-head h2 { max-width: 19ch; }
  .section-head p { max-width: none; padding-bottom: 3px; }
  .work-topology .section-head { margin-bottom: clamp(30px, 3.6vh, 48px); }

  /* O índice das operações passou de três para seis linhas. */
  .work-topology__index ol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 26px;
  }
}

/* --- 10.2 Diagnóstico: a coluna de sinais preenche a altura do painel.
   Centralizar cinco botões numa coluna alta deixava vazio em cima e embaixo;
   agora as cinco linhas dividem a altura disponível. */
@media (min-width: 981px) {
  .diagnostic__nav {
    display: grid;
    grid-auto-rows: 1fr;
    align-content: stretch;
    gap: 0;
    padding: 18px 24px;
  }

  .diagnostic__nav button {
    align-content: center;
    padding: 0;
  }

  .diagnostic__nav button:last-child { border-bottom: 0; }
}

/* --- 10.3 Hero de Trabalho: prova real logo abaixo da afirmação.
   Duas telas de um sistema em operação, não um fundo decorativo. */
.work-hero__proof {
  display: grid;
  gap: 14px;
  justify-items: start;
  margin: clamp(26px, 3vw, 46px) 0 0;
}

/* A composição das capturas está na seção 11.1: aqui fica só a legenda. */
.work-hero__proof figcaption {
  display: grid;
  gap: 5px;
  max-width: 42ch;
  padding-top: 12px;
  border-top: 1px solid var(--ev-rule);
}

.work-hero__proof figcaption b {
  color: var(--ev-accent);
  font: 500 8px/1 var(--tl-font-mono);
  letter-spacing: .14em;
}

.work-hero__proof figcaption span {
  color: var(--ev-muted);
  font: 400 12.5px/1.5 var(--tl-font-sans);
}

/* --- 10.4 Seis operações no mesmo palco: as abas ficam mais compactas. */
@media (min-width: 981px) {
  .topology__tabs--six { align-content: start; padding: 16px; }
  .topology__tabs--six button { padding: 13px 10px; }
  .topology__tabs--six button small { font-size: 7.5px; }
}

.poster--pratto {
  --poster-tint: rgb(76 122 47 / .12);
  --poster-grid: rgb(30 40 22 / .05);
  --poster-paper: #f6f9f2;
  --poster-mark: #4c7a2f;
}

.poster--carcara {
  --poster-tint: rgb(122 92 52 / .13);
  --poster-grid: rgb(40 32 22 / .05);
  --poster-paper: #faf6ef;
  --poster-mark: #7a5c34;
}

.poster--trip {
  --poster-tint: rgb(160 90 44 / .12);
  --poster-grid: rgb(44 30 20 / .05);
  --poster-paper: #fbf6f1;
  --poster-mark: #a05a2c;
}

/* Chapa que carrega captura real: a imagem ocupa a área abaixo da barra. */
.poster__plate--photo {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.poster__plate--photo img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: top center;
}

/* --- 10.5 Arquivo: o cabeçalho ocupa a largura e cada ficha ganha identidade. */
@media (min-width: 981px) {
  .archive__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    column-gap: clamp(30px, 3.4vw, 54px);
    row-gap: 14px;
    align-items: start;
    max-width: none;
  }

  .archive__head > .eyebrow,
  .archive__head > h2,
  .archive__head > p { grid-column: 1; }
  .archive__head > h2 { max-width: 22ch; }
  .archive__head > p:last-of-type { max-width: none; }

  .archive__counters {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: end;
    margin: 0;
  }
}

.ficha { grid-template-rows: auto auto auto auto 1fr auto; }

.ficha__badge {
  display: flex;
  align-items: center;
  min-height: 32px;
}

.ficha__logo {
  width: auto;
  height: auto;
  max-width: 104px;
  max-height: 28px;
  object-fit: contain;
  object-position: left center;
}

.ficha__monogram {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ev-rule-strong);
  color: var(--ev-ink);
  font: 500 11px/1 var(--tl-font-mono);
  letter-spacing: .04em;
}

@media (max-width: 980px) {
  .work-hero__proof-frames { width: min(92vw, 420px); }
  .work-topology__index ol { grid-template-columns: 1fr; }
}

/* --- 10.6 Correções da primeira volta de verificação. */

/* Quando a chapa principal é uma captura real, a chapa auxiliar recua: ela
   existe para comentar a prova, não para cobri-la. */
.poster__plate--main.poster__plate--photo { inset: 0 16% 18% 0; }
.poster__plate--photo ~ .poster__plate--aside { inset: 58% 0 0 56%; }

/* Seis abas preenchem a coluna inteira, como os sinais de Atuação. */
@media (min-width: 981px) {
  .topology__tabs--six {
    display: grid;
    grid-auto-rows: 1fr;
    align-content: stretch;
    gap: 0;
    padding: 14px 16px;
  }

  .topology__tabs--six button { align-content: center; padding: 10px; }
  .topology__tabs--six button:last-child { border-bottom: 0; }
}

/* Diagnóstico mais baixo: com o painel menor, as cinco linhas do índice
   preenchem a coluna sem esticar cada uma além da conta. */
@media (min-width: 981px) {
  .act-evidence { margin-top: clamp(16px, 2vw, 26px); }
  .act-evidence__frame { max-height: 26svh; }
  .act-evidence__frame > svg { max-height: 26svh; }
  .diagnostic__panel > p { margin-bottom: 0; }
  .diagnostic__nav button { padding: 0 0 0 2px; }
}

/* --- 10.7 Índice de sinais: cada linha carrega o sinal e o que ele significa.
   A coluna preenche a altura com leitura, não com espaço em branco. */
@media (min-width: 981px) {
  .diagnostic__nav button {
    align-content: center;
    row-gap: 7px;
    padding: 0 14px 0 2px;
  }

  .diagnostic__nav button small {
    grid-column: 2;
    max-width: 30ch;
    color: var(--ev-muted);
    font: 400 12px/1.5 var(--tl-font-sans);
    letter-spacing: 0;
    text-transform: none;
  }

  .diagnostic__nav button.is-active small { color: var(--ev-ink); }
}

@media (max-width: 980px) {
  .diagnostic__nav button small { display: none; }
}

/* ==========================================================================
   11. SEGUNDA VOLTA DE REFINO — 2026-08-14
   ========================================================================== */

/* --- 11.1 Hero de Trabalho: mesa de provas, não uma foto só.
   Duas telas de desktop e duas de celular, de operações diferentes,
   sobrepostas como capturas espalhadas sobre a mesa. */
/* As quatro capturas são absolutas, então o contêiner não tem largura
   intrínseca: dentro de um grid com `justify-items: start` ele colapsava para
   ~180px. A largura vem da viewport, não da coluna. */
.work-hero__proof-frames {
  position: relative;
  display: block;
  width: clamp(300px, 40vw, 548px);
  aspect-ratio: 16 / 10;
}

.work-hero__screen {
  position: absolute;
  height: auto;
  border: 1px solid var(--ev-rule-strong);
  background: var(--ev-paper);
  box-shadow: 0 16px 34px rgb(21 20 18 / .14);
}

.work-hero__screen--back {
  right: 0;
  top: 0;
  width: 62%;
  transform: rotate(1.4deg);
  opacity: .92;
}

.work-hero__screen--front {
  left: 0;
  top: 16%;
  width: 68%;
  transform: rotate(-1deg);
  z-index: 2;
}

.work-hero__screen--phone-a {
  right: 15%;
  bottom: 0;
  width: 15%;
  transform: rotate(-2.4deg);
  z-index: 3;
}

.work-hero__screen--phone-b {
  right: 1%;
  bottom: 5%;
  width: 15%;
  transform: rotate(2deg);
  z-index: 4;
}

@media (max-width: 980px) {
  .work-hero__proof-frames { max-width: 420px; }
  .work-hero__screen--phone-a { right: 17%; }
}

/* --- 11.2 Todos os pôsteres seguem a composição do Pratto: uma prova
   dominante e uma chapa auxiliar recolhida no canto, sem cobri-la. */
.poster__plate--main { inset: 0 16% 18% 0; }
.poster__plate--aside { inset: 58% 0 0 56%; }

/* --- 11.3 Mapa do arquivo: os 18 registros como uma leitura só, no espaço
   que sobrava à direita do cabeçalho. Cada célula abre o dossiê. */
.archive__map {
  display: grid;
  gap: 12px;
  margin: 0;
}

.archive__map figcaption {
  color: var(--ev-muted);
  font: 500 7.5px/1 var(--tl-font-mono);
  letter-spacing: .16em;
}

.archive__map-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.archive__map-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ev-rule);
  background: var(--ev-paper);
  color: var(--ev-muted);
  font: 500 8px/1 var(--tl-font-mono);
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform 180ms var(--ev-ease), border-color 180ms ease, opacity 180ms ease;
}

.archive__map-cell[data-frente="operacao"] { border-color: rgb(216 59 24 / .45); color: var(--ev-accent); }
.archive__map-cell[data-frente="produto"] { border-color: rgb(47 124 88 / .5); color: #2f7c58; }
.archive__map-cell[data-frente="presenca"] { border-color: rgb(31 103 165 / .45); color: #1f67a5; }
.archive__map-cell[data-frente="inteligencia"] { border-color: rgb(122 92 52 / .5); color: #7a5c34; }

/* Profundidade é a única distinção com peso: o registro ganha corpo sólido. */
.archive__map-cell[data-depth] { color: var(--ev-paper); }
.archive__map-cell[data-frente="operacao"][data-depth] { background: var(--ev-accent); border-color: var(--ev-accent); }
.archive__map-cell[data-frente="produto"][data-depth] { background: #2f7c58; border-color: #2f7c58; }
.archive__map-cell[data-frente="presenca"][data-depth] { background: #1f67a5; border-color: #1f67a5; }
.archive__map-cell[data-frente="inteligencia"][data-depth] { background: #7a5c34; border-color: #7a5c34; }

.archive__map-cell:hover,
.archive__map-cell:focus-visible {
  transform: translateY(-2px);
  outline: none;
  border-color: var(--ev-ink);
}

.archive__map-cell.is-out { opacity: .18; }

.archive__map-key {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
}

.archive__map-key span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ev-muted);
  font: 500 7.5px/1 var(--tl-font-mono);
  letter-spacing: .1em;
}

.archive__map-key i {
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
}

.archive__map-key span[data-frente="operacao"] i { background: var(--ev-accent); border-color: var(--ev-accent); }
.archive__map-key span[data-frente="produto"] i { background: #2f7c58; border-color: #2f7c58; }
.archive__map-key span[data-frente="presenca"] i { background: #1f67a5; border-color: #1f67a5; }
.archive__map-key span[data-frente="inteligencia"] i { background: #7a5c34; border-color: #7a5c34; }

.archive__map-key b { margin-left: auto; color: var(--ev-ink); font-weight: 500; }
.archive__map-key span.is-active { color: var(--ev-ink); }

@media (min-width: 981px) {
  .archive__head { row-gap: 18px; }
  .archive__map { grid-column: 2; grid-row: 1 / 3; align-self: start; }
  .archive__counters { grid-column: 2; grid-row: 3; align-self: end; }
}

@media (max-width: 980px) {
  .archive__map { margin-top: 22px; }
  .archive__map-grid { grid-template-columns: repeat(9, 1fr); }
}

/* --- 11.4 A chapa passou a ser mais baixa que o desenho que carrega, e o
   `overflow: hidden` cortava a base das figuras. A chapa vira grade e o SVG
   escala para caber inteiro (preserveAspectRatio padrão dá o encaixe). */
.poster__plate {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.poster__plate > .ev-figure {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* ==========================================================================
   12. O CORREDOR VAZIO DOS CABEÇALHOS — 2026-08-14
   Medido: 224px de vazio em 1440, 323px em 1680, 554px (31%) em 1920.
   Causa: o título travava em 846px e o parágrafo ficava preso na borda
   direita, então toda largura extra de monitor virava buraco no meio.
   O cabeçalho passa a ter três colunas — título, parágrafo e registro — e a
   coluna do título absorve a sobra em vez de deixá-la vazia.
   ========================================================================== */

@media (min-width: 981px) {
  .section-head--register {
    grid-template-columns: minmax(0, 1fr) minmax(268px, 356px) minmax(132px, 190px);
    column-gap: clamp(26px, 2.4vw, 48px);
    align-items: end;
  }

  /* Sem teto: o título ocupa a coluna inteira e a sobra deixa de existir. */
  .section-head--register h2,
  .section-head--register > p { max-width: none; }
}

.section-head__register {
  display: grid;
  gap: 14px;
  align-content: end;
  padding-left: clamp(16px, 1.6vw, 26px);
  border-left: 1px solid var(--ev-rule);
}

.section-head__register span {
  display: block;
  color: var(--ev-accent);
  font: 400 clamp(26px, 2.4vw, 38px)/1 var(--tl-font-display);
  letter-spacing: -.02em;
}

.section-head__register b {
  display: block;
  margin-top: 5px;
  color: var(--ev-muted);
  font: 500 7.5px/1.4 var(--tl-font-mono);
  letter-spacing: .16em;
}

@media (max-width: 980px) {
  .section-head__register {
    grid-template-columns: 1fr 1fr;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--ev-rule);
  }
}

/* --- 12.1 A quinta frase do índice de sinais.
   `max-height` em svh encolhia o painel conforme a janela, mas o conteúdo não
   encolhia junto e `overflow` é visível: a quinta linha vazava para fora da
   borda. O painel volta a ter a altura do próprio conteúdo — em qualquer
   janela ele cabe, e nada mais atravessa a moldura. */
@media (min-width: 981px) {
  .diagnostic { max-height: none; }
}

/* --- 12.2 Heros: a altura da viewport vira piso, nunca teto.
   `height` + `max-height: calc(100svh - header)` com `overflow: hidden`
   trava o bloco na altura da janela enquanto o conteúdo continua do mesmo
   tamanho. Com zoom de navegador a janela encolhe e o conteúdo não: o último
   elemento — justamente o botão do WhatsApp — era cortado fora.
   Medido em 1920 físico: corta 16px a 110%, 47px a 150%, 127px a 175%.
   `.signal-hero` já tinha recebido essa correção em page.css:3350; faltavam
   as outras duas. A hero continua ocupando a tela inteira quando cabe, e
   passa a crescer quando não cabe. */
@media (min-width: 981px) {
  .page-hero,
  .company-v2 .company-v2-hero {
    height: auto;
    min-height: calc(100svh - var(--tl-header-height, 96px));
    max-height: none;
  }
}

@media (max-width: 980px) {
  .company-v2 .company-v2-hero {
    height: auto;
    min-height: calc(100svh - var(--tl-header-height, 82px));
    max-height: none;
  }
}

/* ==========================================================================
   13. TRABALHO / ARQUIVO — fechar o vazio acima de "Dezoito registros"
   Medido em 1920: 129px de padding da seção, 106px entre o olho e o título e
   250px do título até os filtros. Nada disso era intencional — vinha de
   margens de UA somadas ao row-gap do cabeçalho. Só `#arquivo`, que existe
   apenas nesta página.
   ========================================================================== */

#arquivo { padding-top: clamp(46px, 4.6vw, 74px); }

#arquivo .archive__head > .eyebrow,
#arquivo .archive__head > h2 { margin: 0; }

#arquivo .archive__head > p { margin: 2px 0 0; }

@media (min-width: 981px) {
  #arquivo .archive__head { row-gap: 10px; }
  #arquivo .archive__filters { margin-top: clamp(20px, 2.2vw, 32px); }
}

@media (max-width: 980px) {
  #arquivo .archive__filters { margin-top: 22px; }
}

/* --- 13.1 O cabeçalho do arquivo passa a ter duas colunas de verdade.
   O mapa dos 18 registros ocupava duas linhas do mesmo grid do texto, e o
   grid estica as linhas que um item atravessa: era ele, e não margem, que
   abria o vazio entre o olho, o título e os filtros. Agora o texto tem a
   própria pilha e o mapa vive na coluna ao lado, com altura independente. */
#arquivo .archive__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
  max-width: none;
}

#arquivo .archive__head-copy {
  display: grid;
  align-content: start;
  gap: 12px;
}

#arquivo .archive__head-copy > .eyebrow,
#arquivo .archive__head-copy > h2 { margin: 0; }
#arquivo .archive__head-copy > p { margin: 0; max-width: 62ch; }
#arquivo .archive__counters { margin-top: 6px; }

@media (min-width: 981px) {
  #arquivo .archive__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    column-gap: clamp(30px, 3.4vw, 54px);
  }

  #arquivo .archive__head-copy > h2 { max-width: 22ch; }
  #arquivo .archive__map { grid-column: 2; grid-row: 1; align-self: start; }
}

/* A pilha de texto virou um elemento próprio, então as colocações explícitas
   da versão anterior (`grid-column: 2`, `grid-row: 2 / 4`) passaram a cair
   dentro dela e quebravam a ordem de leitura. Tudo volta ao fluxo natural. */
#arquivo .archive__head-copy > * {
  grid-column: 1;
  grid-row: auto;
  align-self: start;
}

/* ==========================================================================
   14. TRABALHO / PROVA REAL — 2026-08-15
   Capturas reais das seis operações. Os arquivos publicados são cópias
   rasterizadas e já sanitizadas (ver work/assets-originais para os originais,
   fora da publicação): nenhum dado pessoal chega ao navegador.
   ========================================================================== */

/* --- 14.1 Hero: duas evidências, não quatro.
   A montagem anterior empilhava quatro capturas pequenas e escuras — nenhuma
   legível. Agora a página do Pratto é a imagem principal, no tamanho em que
   dá para ler, e uma tela do Cerasi entra como segunda evidência. */
.work-hero__screen--main {
  left: 0;
  top: 4%;
  width: 88%;
  transform: rotate(-.7deg);
  z-index: 1;
}

.work-hero__screen--phone {
  right: 0;
  bottom: 0;
  width: 17%;
  transform: rotate(2deg);
  z-index: 2;
}

/* --- 14.2 Cada operação tem geometria própria: mesma gramática, composições
   distintas. Sem isso os seis cases ficam visualmente idênticos. */
.poster--nexus .poster__plate--main { inset: 0 15% 19% 0; transform: rotate(-.5deg); }
.poster--nexus .poster__plate--aside { inset: 57% 0 0 57%; transform: rotate(1deg); }

.poster--henke .poster__plate--main { inset: 0 20% 16% 0; transform: rotate(-1deg); }
.poster--henke .poster__plate--aside { inset: 60% 0 0 53%; transform: rotate(1.3deg); }

.poster--seller .poster__plate--main { inset: 2% 12% 20% 0; transform: rotate(-.3deg); }
.poster--seller .poster__plate--aside { inset: 55% 0 0 59%; transform: rotate(.8deg); }

.poster--pratto .poster__plate--main { inset: 0 18% 17% 0; transform: rotate(-.8deg); }
.poster--pratto .poster__plate--aside { inset: 58% 0 0 55%; transform: rotate(1.1deg); }

.poster--carcara .poster__plate--main { inset: 0 14% 21% 0; transform: rotate(-1.2deg); }
.poster--carcara .poster__plate--aside { inset: 61% 0 0 56%; transform: rotate(.7deg); }

.poster--trip .poster__plate--main { inset: 3% 17% 14% 0; transform: rotate(-.4deg); }
.poster--trip .poster__plate--aside { inset: 56% 0 0 58%; transform: rotate(1.4deg); }

/* A captura entra pelo topo: cabeçalho e números ficam visíveis mesmo quando
   a chapa é mais quadrada que o print. */
.poster__plate--photo img { object-position: top center; }

@media (prefers-reduced-motion: reduce) {
  .work-hero__screen,
  .poster__plate { transform: none; }
}

/* ==========================================================================
   15. ATUAÇÃO / PLACA DE CREDENCIAL — 2026-08-15
   Ocupa a coluna que sobrava à direita do painel com o que a Tolissano
   realmente opera em cada sinal. Dois pesos, e a diferença entre eles é
   factual: "PARCEIRO OFICIAL" só onde existe programa e credencial;
   "OPERAMOS EM" onde a marca é citada pelo nome, sem implicar endosso.
   ========================================================================== */

@media (min-width: 1281px) {
  .diagnostic__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(226px, 288px);
    column-gap: clamp(30px, 3vw, 52px);
    align-content: start;
  }

  /* A placa é mais baixa que o conteúdo, então atravessar as linhas não
     estica nenhuma delas — ao contrário do que acontecia no arquivo. */
  .diagnostic__panel > *:not(.cred) { grid-column: 1; }

  .cred {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    position: sticky;
    top: calc(var(--tl-header-height, 96px) + 24px);
  }
}

.cred {
  display: grid;
  align-content: start;
  gap: 16px;
  margin-top: clamp(24px, 3vw, 34px);
  padding: clamp(18px, 1.8vw, 24px);
  border: 1px solid var(--ev-rule);
  background: var(--ev-paper);
}

.cred__title {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ev-rule);
  color: var(--ev-ink);
  font: 500 8px/1.4 var(--tl-font-mono);
  letter-spacing: .17em;
}

.cred__tier { display: grid; gap: 8px; }

.cred__tier-label {
  margin: 0;
  color: var(--ev-muted);
  font: 500 7px/1 var(--tl-font-mono);
  letter-spacing: .18em;
}

.cred__tier--oficial .cred__tier-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ev-accent);
}

.cred__tier--oficial .cred__tier-label::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--ev-accent);
}

.cred__marks {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  list-style: none;
}

.cred__marks li {
  color: var(--ev-muted);
  font: 400 12.5px/1.35 var(--tl-font-sans);
  letter-spacing: 0;
}

/* O peso é o que separa parceiro de operação — não a cor de um logo. */
.cred__tier--oficial .cred__marks li {
  color: var(--ev-ink);
  font-weight: 500;
  font-size: 13.5px;
}

.cred__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 0 0;
  border: 0;
  border-top: 1px solid var(--ev-rule);
  background: transparent;
  color: var(--ev-ink);
  font: 500 8px/1 var(--tl-font-mono);
  letter-spacing: .15em;
  text-align: left;
  cursor: pointer;
}

.cred__toggle i {
  position: relative;
  width: 11px;
  height: 11px;
  flex: none;
}

.cred__toggle i::before,
.cred__toggle i::after {
  content: "";
  position: absolute;
  inset: 5px 0 auto;
  height: 1px;
  background: var(--ev-accent);
}

.cred__toggle i::after {
  inset: 0 5px auto;
  width: 1px;
  height: 11px;
  transition: transform 200ms var(--ev-ease);
}

.cred__toggle[aria-expanded="true"] i::after { transform: scaleY(0); }
.cred__toggle:focus-visible { outline: 2px solid var(--ev-accent); outline-offset: 3px; }

/* Abre em altura e opacidade, só. Nada de layout animado no scroll. */
.cred__detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 260ms var(--ev-ease), opacity 200ms ease;
}

.cred__detail > p {
  overflow: hidden;
  margin: 0;
  color: var(--ev-muted);
  font: 400 12.5px/1.6 var(--tl-font-sans);
}

.cred__toggle[aria-expanded="true"] + .cred__detail {
  grid-template-rows: 1fr;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cred__detail,
  .cred__toggle i::after { transition: none; }
}

/* --- 15.1 O painel vira duas colunas de verdade.
   A placa atravessando as linhas do grid esticava cada uma delas — o mesmo
   defeito que o cabeçalho do arquivo tinha. Agora o conteúdo tem a própria
   pilha e a placa vive na coluna ao lado, com altura independente. */
@media (min-width: 1281px) {
  .diagnostic__panel {
    grid-template-columns: minmax(0, 1fr) minmax(226px, 288px);
    align-items: start;
  }

  .diagnostic__panel > *:not(.cred) { grid-column: 1; }
  .diagnostic__panel-body { display: grid; align-content: start; grid-column: 1; }
  .cred { grid-column: 2; grid-row: 1; margin-top: 0; }
}

@media (max-width: 1280px) {
  .diagnostic__panel { display: block; }
}