/* =========================================================================
   Jangada Labs — Preço de Gôndola
   Um acento só, e ele carrega região inteira. Canto reto, filete duro, grade
   exposta. O escuro não é gosto: a página abre no celular, no balcão, no meio
   do expediente — o amarelo chapado só lê como faixa de gôndola sobre chão
   escuro; sobre claro ele lê como aviso.
   ========================================================================= */

/* --- Faces hospedadas. A instalada mais parecida seria falha, não fallback -- */
@font-face {
  font-family: "Anton";
  src: url("fontes/anton-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Anton";
  src: url("fontes/anton-latinext.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  src: url("fontes/archivo-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Archivo";
  src: url("fontes/archivo-latinext.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --chao: #101012;
  --chao-alto: #17171a;
  --papel: #f4f2ed;
  --amarelo: #ffd400;
  --cinza: #6b6b70;      /* filete e código de barras, nunca texto corrido */
  --cinza-tinta: #a5a5ac; /* 7,8:1 sobre o chão: leitura de sol, não só AA */
  --fraco: #a8a296;      /* 7,5:1: AAA, e a tela do balcão pega sol */
  --filete: #2a2a2e;
  --aco: #44444b;        /* o trilho de prateleira: metal, e não mais um filete */

  --display: "Anton", "Arial Narrow", sans-serif;
  --texto: "Archivo", system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  /* Altura fixa do timbre: a dobra desconta esse valor exato, e altura
     medida por acaso deixava uma tira da secao seguinte espiando. */
  --timbre: 60px;
  --medida: 62ch;

  /* Curvas do brief: nada de bounce, nada de elástico. */
  --saida: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

/* O [hidden] do navegador perde para qualquer classe que declare display, e a
   pagina tem varias. Sem isto os dois botoes da virada aparecem juntos. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--chao);
  color: var(--papel);
  font: 400 1.0625rem/1.62 var(--texto);
}

/* --- Superfícies do navegador: o que eu não desenhei também é a marca ----- */
::selection { background: var(--amarelo); color: var(--chao); }
:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
}
* { caret-color: var(--amarelo); }
html { scrollbar-color: var(--cinza) var(--chao); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--chao); }
::-webkit-scrollbar-thumb { background: var(--cinza); border: 3px solid var(--chao); }
::-webkit-scrollbar-thumb:hover { background: var(--fraco); }

/* Entrelinha minima do Anton em portugues: o til e o acento agudo sobem
   0,30em acima da altura de maiuscula, e abaixo de ~1,12 a linha de baixo
   encosta na de cima. Medido na tela, nao estimado. */
h1, h2, h3 {
  font-family: var(--display);
  line-height: 1.13;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

strong { font-weight: 700; color: var(--amarelo); }

a { color: inherit; }

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Fixed, e nao absolute: com overflow-x escondido no body, filho posicionado
   absoluto vira filho recortado e o atalho de pulo pode nunca aparecer. */
.pular {
  position: fixed;
  left: var(--gutter);
  top: -100px;
  z-index: 50;
  background: var(--amarelo);
  color: var(--chao);
  font: 600 0.8rem/1 var(--texto);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 20px;
  text-decoration: none;
  transition: top 0.2s var(--saida);
}
.pular:focus-visible { top: 14px; }

/* =========================================================================
   Timbre
   ========================================================================= */
.timbre {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  height: var(--timbre);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--filete);
  font: 700 0.72rem/1 var(--texto);
  font-stretch: 88%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.timbre__praca { color: var(--fraco); letter-spacing: 0.14em; }

/* O logotipo no cabecalho e o mesmo desenho do arquivo de marca: a marca vem
   inline (zero requisicao a mais) e o nome continua sendo texto de verdade,
   selecionavel e indexavel. */
.timbre__logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.timbre__marca {
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
}
.timbre__nome {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.18rem;
  line-height: 1;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}
.timbre__nome span { color: var(--amarelo); }

/* Atalho, não botão: o filete amarelo engorda no hover em vez de a caixa
   inteira mudar, para não competir com a ação do fecho. */
.timbre__acao {
  position: relative;
  font: 800 0.72rem/1 var(--texto);
  font-stretch: 86%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 8px;
  transition: color 0.35s var(--saida);
}

/* O filete engorda por escala, não por espessura de borda: animar largura de
   borda recalcula layout a cada quadro, e escala vai para o compositor. */
.timbre__acao::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--amarelo);
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 0.35s var(--saida);
}
.timbre__acao:hover { color: var(--amarelo); }
.timbre__acao:hover::after { transform: scaleY(2.5); }

/* =========================================================================
   Dobra — um ponto de entrada só
   ========================================================================= */
/* A dobra inteira é a etiqueta. O texto de leitura fica abaixo dela, fora do
   primeiro quadro: um ponto de entrada só quer dizer um, e o parágrafo
   disputando a dobra com o número era um segundo. */
.dobra {
  display: flex;
  flex-direction: column;
}

/* A faixa sangra a largura inteira: o acento carrega região, não respinga. */
.faixa {
  position: relative;
  flex: 1 1 auto;
  min-height: calc(100svh - var(--timbre));
  background: var(--amarelo);
  color: var(--chao);
  /* Grade em vez de flex: o número tem a sua própria linha e não disputa o
     espaço com o rodapé da etiqueta — era o que estava decepando o topo. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr);
  grid-template-rows: 1fr auto;
  padding: clamp(18px, 3vh, 40px) var(--gutter) 0;
  overflow: hidden;
}

/* Grão de tinta offset real, medido do papel. Sem ele o amarelo em escala de
   fachada lê como preenchimento de vetor, não como impressão. */
.faixa::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Duas camadas de material, e nao uma: o grao de tinta offset da o
     chapado impresso, e a fibra do papel da a mordida da superficie. Com so a
     tinta o amarelo continuava liso demais e cansava a vista num campo desse
     tamanho. */
  background:
    url("midia/tinta.webp") repeat,
    url("midia/papel-grao.webp") repeat;
  background-size: 320px 320px, 500px 500px;
  mix-blend-mode: multiply;
  opacity: 0.62;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   A cena, dentro do porta-preço

   O objeto: o suporte de plástico que segura a etiqueta no trilho da
   prateleira. Trilho de tinta em cima, quadro no meio, canaleta de papel
   embaixo com a tarja do nicho encaixada. Filme sem moldura é foto colada;
   com ela vira mercadoria exposta, que é o vocabulário desta página.

   A franja de registro fora que a moldura carrega mora no bloco do fim do
   arquivo, junto com a do tipo grande: ali ela é uma decisão só, aplicada nos
   três lugares onde lê.
   ------------------------------------------------------------------------- */
.cena {
  position: relative;
  min-height: 0;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  margin: clamp(14px, 3vh, 34px) 0 clamp(14px, 3vh, 34px) clamp(20px, 4vw, 56px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--chao);
  /* O trilho: filete grosso só no topo, como a calha de aço que segura o
     suporte. Nos outros lados o quadro fecha com a espessura do plástico. */
  border: 3px solid var(--chao);
  border-top-width: clamp(10px, 1.4vw, 16px);
}

.cena__quadro {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

/* Os três nichos ocupam o mesmo lugar e se revezam. Só o visível toca; os
   outros ficam parados e recortados, e nem chegam a ser baixados antes da vez
   deles.

   A troca é corte de material, não dissolução: a cena nova entra por baixo,
   como tarja empurrada para dentro da canaleta. Dissolver era o único jeito
   de trocar que não parecia impressão nenhuma. */
.cena__filme {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.62s var(--saida);
}
.cena__filme.cena-visivel { clip-path: inset(0 0 0 0); z-index: 1; }

/* Sem JS a primeira cena fica de pé sozinha, no quadro de pôster. */
.cena__filme:first-child { clip-path: inset(0 0 0 0); }

/* A canaleta: papel encaixado no plástico, com o filete duro separando. */
.cena__tarja {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px clamp(10px, 1.2vw, 14px);
  background: var(--papel);
  color: var(--chao);
  border-top: 3px solid var(--chao);
  font: 800 clamp(0.6rem, 1.1vw, 0.72rem)/1 var(--texto);
  font-stretch: 86%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cena__conta {
  color: #55524b;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
.cena__conta b { color: var(--chao); font-weight: 800; }

.faixa > h1,
.faixa > .faixa__base { position: relative; z-index: 3; }

/* A pergunta em escala de fachada. O corpo sobe até a largura disponível
   deixar de caber: é ela, e não um vh escolhido a dedo, que manda numa
   etiqueta. A medida em ch prende a quebra em três ou quatro linhas, que é
   o que dá bloco de texto e não parágrafo. */
.faixa__titulo {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin: 0;
  max-width: 13ch;
  font-family: var(--display);
  /* O corpo desce porque a coluna encolheu para dar lugar a fita: 10,5vw era
     a largura da tela inteira, nao a da coluna. */
  font-size: clamp(2.4rem, 8.4vw, 7.4rem);
  font-weight: 400;
  /* 1.13 e o piso do Anton em portugues: abaixo disso o acento de COMERCIO
     encosta na linha de cima. Medido, nao estimado. */
  line-height: 1.13;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-wrap: balance;
}

.faixa__base {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0 clamp(14px, 2.4vh, 26px);
  border-top: 3px solid var(--chao);
  font: 700 clamp(0.68rem, 1.5vw, 0.82rem)/1 var(--texto);
  font-stretch: 86%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.faixa__base-dir { color: #4a4108; letter-spacing: 0.16em; text-align: right; }

.dobra__leitura {
  max-width: 52ch;
  padding: clamp(40px, 8vh, 88px) var(--gutter) clamp(52px, 10vh, 112px);
  color: var(--fraco);
  font-size: clamp(1.05rem, 2.4vw, 1.32rem);
  line-height: 1.5;
}

/* =========================================================================
   Gramática comum das seções
   ========================================================================= */
.areas,
.plano,
.ferramenta,
.ausencias {
  padding: clamp(72px, 12vh, 152px) var(--gutter);
  border-top: 1px solid var(--filete);
}

/* Mais ar acima do título do que abaixo dele. */
.secao__cabeca { margin-bottom: clamp(40px, 6vh, 72px); }

.secao__cabeca h2 {
  font-size: clamp(2rem, 5.4vw, 4.4rem);
  line-height: 1.13;
  letter-spacing: -0.02em;
  max-width: 26ch;
}

.secao__linha {
  margin-top: clamp(20px, 3vh, 34px);
  max-width: var(--medida);
  color: var(--fraco);
}

/* =========================================================================
   As cinco etiquetas — o objeto do mundo, desenhado em código
   ========================================================================= */
.etiquetas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 2vw, 26px);
}

/* Mesma fibra das ausências: a página tem um papel só, e ele é o mesmo aqui e
   lá. Em escala menor, porque etiqueta é peça pequena e o grão acompanha. */
.etiqueta {
  background-color: var(--papel);
  background-image: url("midia/papel-grao.webp");
  background-repeat: repeat;
  background-size: 280px 280px;
  background-blend-mode: multiply;
  color: var(--chao);
  display: flex;
  flex-direction: column;
  /* Sombra com deslocamento e desfoque: relevo de papel sobre o chão, não halo. */
  box-shadow: 6px 10px 0 -2px rgba(0, 0, 0, 0.55), 0 18px 34px -12px rgba(0, 0, 0, 0.7);
}

/* Larguras deliberadamente desiguais: cinco etiquetas num trilho, não uma
   grade de cartões do mesmo tamanho. */
.etiqueta:nth-child(1) { grid-column: span 7; }
.etiqueta:nth-child(2) { grid-column: span 5; }
.etiqueta:nth-child(3) { grid-column: span 5; }
.etiqueta:nth-child(4) { grid-column: span 7; }
.etiqueta:nth-child(5) { grid-column: span 12; }

.etiqueta__grupo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.etiqueta__topo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: var(--amarelo);
  border-bottom: 3px solid var(--chao);
  padding: 10px clamp(14px, 2vw, 22px) 12px;
}

.etiqueta__ordem {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 0.8;
  font-variant-numeric: tabular-nums;
}

.etiqueta__area {
  font: 800 0.78rem/1 var(--texto);
  font-stretch: 86%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.etiqueta__peso {
  margin-left: auto;
  font: 700 0.7rem/1 var(--texto);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4a4108;
  font-variant-numeric: tabular-nums;
}

.etiqueta__pergunta {
  padding: clamp(18px, 2.6vw, 30px) clamp(14px, 2vw, 22px) clamp(24px, 3.2vw, 38px);
  font-size: clamp(1.02rem, 1.7vw, 1.34rem);
  /* Pergunta lida no celular, no balcao, com cliente esperando: entrelinha
     folgada e leitura, nao enfeite. */
  line-height: 1.45;
  max-width: 34ch;
  text-wrap: pretty;
}

/* =========================================================================
   A bobina — a respiração antes do pico
   ========================================================================= */
/* A fita presa entre dois filetes de tinta: é máquina, e material correndo
   dentro dela. Sem o trilho ela era um retângulo borrado no meio da página.
   O ::after devolve o amarelo 2px fora de registro na juntura de baixo — a
   chapa preta bateu torta, e é isso que a âncora chama de textura assinatura. */
.bobina {
  position: relative;
  height: clamp(150px, 30svh, 330px);
  overflow: hidden;
  border-top: clamp(9px, 1.2vw, 14px) solid var(--chao);
  border-bottom: clamp(9px, 1.2vw, 14px) solid var(--chao);
  background: var(--amarelo);
  /* Sombra em vez de ::after: `overflow: hidden` recorta o pseudo-elemento na
     caixa de preenchimento, e a sombra mora fora da caixa de borda. */
  box-shadow: 0 2px 0 0 var(--amarelo);
}

.bobina__filme {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Sem rotação: girar o elemento inteiro troca largura por altura e o vídeo
     encolhe para um retângulo no meio da faixa. A bobina corre no sentido
     dela mesma, de cima para baixo, que é o que uma bobina faz. */
  object-fit: cover;
}

/* =========================================================================
   A virada — o pico da visita
   ========================================================================= */
.virada {
  border-top: 1px solid var(--filete);
  padding: clamp(80px, 14vh, 180px) var(--gutter);
  background: var(--chao-alto);
}

.virada__palco {
  display: grid;
  gap: clamp(34px, 5vh, 60px);
}

/* O tamanho vive no h2 e nao nos filhos: assim o elemento de titulo carrega
   a escala de verdade, em vez de herdar 17px e achatar a hierarquia. */
.remarcacao {
  display: block;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(5rem, 19vw, 16rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

.remarcacao__linha {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.6vw, 24px);
}

.remarcacao__rotulo {
  font-size: 0.14em;
  letter-spacing: 0.02em;
}

.remarcacao__valor { font-size: 1em; }

/* O riscado da remarcação é traçado, não decoração: nasce em zero e é a régua
   de progresso da própria virada. */
.remarcacao__linha--de {
  position: relative;
  color: var(--cinza-tinta);
  width: max-content;
}
.remarcacao__linha--de::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  top: 52%;
  height: 6px;
  background: var(--papel);
  transform: scaleX(var(--risco, 1));
  transform-origin: left center;
  /* O traço risca depois do valor velho imprimir: 0,34s de atraso é a duração
     exata da impressão, então um gesto começa onde o outro termina. */
  transition: transform 0.3s var(--saida) 0.34s;
}

.remarcacao__linha--por { color: var(--amarelo); margin-top: 0.06em; }

.remarcacao__prazo {
  display: block;
  margin-top: clamp(14px, 2vh, 26px);
  font-family: var(--texto);
  font-weight: 800;
  font-stretch: 86%;
  font-size: clamp(0.78rem, 1.8vw, 1rem);
  letter-spacing: 0.24em;
  color: var(--papel);
}

.virada__conta {
  max-width: var(--medida);
  color: var(--fraco);
}

.virada__soma {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--cinza-tinta);
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  flex-wrap: wrap;
}
/* Só os sinais recuam. Os numerais são o argumento: pintá-los com a cor de
   filete dava 1,25:1 sobre o chão alto, invisível, uma linha abaixo de um
   texto que promete que a conta pode ser conferida. */
.virada__soma .virada__sinal { color: var(--cinza-tinta); }
.virada__soma .virada__parcela { color: var(--papel); }
.virada__soma em {
  font-style: normal;
  color: var(--amarelo);
  background: rgba(255, 212, 0, 0.1);
  padding: 0 0.14em;
}

/* =========================================================================
   O plano
   ========================================================================= */
/* O vale do meio. Plano e ferramenta corriam quase 1.700px de chão idêntico,
   filete de 1px e texto pequeno — exatamente a posição serial que o brief
   manda compensar, e a única passagem física da página estava gasta antes da
   virada. Aqui entra o trilho de prateleira: calha de tinta atravessada, com
   os três prazos pendurados nela como tarjas encaixadas. Material do mundo,
   já listado na âncora e nunca usado até agora. */
.trilha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
  gap: 0;
  /* A calha em aço, e o amarelo escapando 2px acima dela: chapa fora de
     registro. Em tinta preta ela era preto sobre preto e simplesmente não
     existia — as tarjas ficavam penduradas em coisa nenhuma. */
  border-top: clamp(11px, 1.4vw, 16px) solid var(--aco);
  box-shadow: 0 -2px 0 0 var(--amarelo);
  margin-top: clamp(28px, 4vh, 48px);
}

.trecho {
  padding: 0 clamp(20px, 2.4vw, 34px) clamp(34px, 5vh, 56px);
  border-right: 1px solid var(--filete);
}
.trecho:last-child { border-right: 0; }

/* A tarja pendurada: sobe até encostar no topo da calha e desce para dentro
   do trecho. Relevo curto e duro, como a âncora pede para papel. */
.trecho__prazo {
  display: inline-block;
  margin: calc(clamp(11px, 1.4vw, 16px) * -1) 0 clamp(22px, 3.2vh, 34px);
  padding: 9px 13px 10px;
  background: var(--amarelo);
  color: var(--chao);
  font: 800 0.72rem/1 var(--texto);
  font-stretch: 86%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.55);
}

.trecho h3 {
  margin: 0 0 14px;
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  line-height: 1.13;
  letter-spacing: -0.01em;
}

.trecho p { color: var(--fraco); max-width: 40ch; }

/* =========================================================================
   A ferramenta
   ========================================================================= */
.ferramenta__grade {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 1fr);
}

.ferramenta__grade h2 {
  font-size: clamp(1.8rem, 4.4vw, 3.5rem);
  line-height: 1.13;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.ferramenta__corpo { display: grid; gap: 22px; max-width: var(--medida); }
.ferramenta__corpo p { color: var(--fraco); }

.ferramenta__nota {
  border-left: 1px solid var(--cinza);
  padding-left: 18px;
  font-size: 0.94rem;
}

/* =========================================================================
   Ausências — papel no meio do preto, para o vale de memória não sumir
   ========================================================================= */
/* O grão modula o papel, não o substitui. `background: var(--papel) url(...)`
   parecia declarar as duas coisas, mas a textura é opaca e cobria o token
   inteiro: a seção inteira ficava na cor média do arquivo — #E3E0D4, dezenove
   níveis mais escura e mais quente que o papel do mundo, enquanto as etiquetas
   acertavam #F4F2ED. A textura foi normalizada para média branca em
   `papel-grao.webp` e entra por multiply, então quem manda na cor é o token e
   quem manda na fibra é o arquivo. */
.ausencias {
  background-color: var(--papel);
  background-image: url("midia/papel-grao.webp");
  background-repeat: repeat;
  background-size: 420px 420px;
  background-blend-mode: multiply;
  color: var(--chao);
  border-top: 2px solid var(--amarelo);
}
.ausencias .secao__cabeca h2 { max-width: 16ch; }
.ausencias .secao__linha { color: #55524b; }

.ausencias__lista {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 2px solid var(--chao);
}

.ausencia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: clamp(20px, 3vh, 30px) 0;
  border-bottom: 1px solid rgba(16, 16, 18, 0.22);
}

.ausencia dt {
  font: 800 0.78rem/1 var(--texto);
  font-stretch: 86%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ausencia dd {
  margin: 0;
  color: #45423c;
  max-width: 58ch;
}

/* =========================================================================
   Fecho — o mesmo peso da dobra, porque a lembrança é feita do pico e do fim
   ========================================================================= */
.fecho {
  position: relative;
  background: var(--amarelo);
  color: var(--chao);
  padding: clamp(80px, 15vh, 180px) var(--gutter);
  overflow: hidden;
}
.fecho::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Duas camadas de material, e nao uma: o grao de tinta offset da o
     chapado impresso, e a fibra do papel da a mordida da superficie. Com so a
     tinta o amarelo continuava liso demais e cansava a vista num campo desse
     tamanho. */
  background:
    url("midia/tinta.webp") repeat,
    url("midia/papel-grao.webp") repeat;
  background-size: 320px 320px, 500px 500px;
  mix-blend-mode: multiply;
  opacity: 0.62;
  pointer-events: none;
}
.fecho__grade { position: relative; display: grid; gap: clamp(26px, 4vh, 44px); }

.fecho__titulo {
  font-size: clamp(3.6rem, 15vw, 12rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 9ch;
}

.fecho__linha { max-width: 48ch; color: #4a4108; font-size: clamp(1rem, 2vw, 1.16rem); }

.acao {
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  background: var(--chao);
  color: var(--papel);
  text-decoration: none;
  padding: clamp(20px, 2.6vw, 28px) clamp(26px, 3.4vw, 44px);
  box-shadow: 8px 8px 0 -1px rgba(16, 16, 18, 0.28), 0 22px 40px -16px rgba(16, 16, 18, 0.55);
  transition: transform 0.42s var(--saida), box-shadow 0.42s var(--saida),
    background-color 0.42s var(--saida);
}
.acao__texto {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2.6vw, 1.9rem);
  letter-spacing: 0.005em;
}
.acao__canal {
  font: 700 0.74rem/1 var(--texto);
  font-stretch: 86%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amarelo);
}
.acao:hover {
  transform: translate(-3px, -3px);
  box-shadow: 12px 12px 0 -1px rgba(16, 16, 18, 0.3), 0 30px 52px -18px rgba(16, 16, 18, 0.6);
}
.acao:active { transform: translate(1px, 1px); }

/* No fecho o chão já é amarelo e o bloco preto é o acento. Na virada o chão é
   escuro: preto sobre preto dava 1,07:1 de contraste de superfície e a sombra
   era preta em cima de preta, no exato momento que o Peak-End diz ser o pico
   e numa página cujo único trabalho é o toque no WhatsApp. Lá o acento carrega
   a ação, que é o que "um acento só, e ele carrega região inteira" quer dizer. */
.acao--virada {
  background: var(--amarelo);
  color: var(--chao);
  box-shadow: 10px 10px 0 -1px rgba(255, 212, 0, 0.26), 0 24px 44px -18px rgba(0, 0, 0, 0.8);
}
.acao--virada .acao__canal { color: #4a4108; }
.acao--virada:hover {
  box-shadow: 14px 14px 0 -1px rgba(255, 212, 0, 0.3), 0 32px 56px -20px rgba(0, 0, 0, 0.85);
}

/* =========================================================================
   Rodapé
   ========================================================================= */
.rodape {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 26px var(--gutter) 40px;
  border-top: 1px solid var(--filete);
  font: 700 0.68rem/1.4 var(--texto);
  font-stretch: 88%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fraco);
}

/* =========================================================================
   Composição maior
   ========================================================================= */
@media (min-width: 900px) {
  .ferramenta__grade { grid-template-columns: 1.05fr 1fr; align-items: start; }
  .ausencia { grid-template-columns: 15rem minmax(0, 1fr); gap: 34px; align-items: baseline; }
  .virada__palco { grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: end; }
  .remarcacao { grid-row: span 2; }
}

@media (max-width: 640px) {
  /* No celular a grade de doze colunas vira pilha: etiqueta estreita quebra a
     pergunta em quatro linhas e a leitura morre. */
  .etiqueta { grid-column: 1 / -1 !important; }
  .trecho { border-right: 0; border-bottom: 1px solid var(--filete); }
  .trecho:last-child { border-bottom: 0; }
}

/* =========================================================================
   Movimento — estado de partida é o estado final; o script só faz opt-in.
   Com preferência por menos movimento, nada disso é ligado.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Só quando o script confirma que pode animar é que o estado inicial existe.
   Sem JS, ou com preferência por menos movimento, nada aqui chega a valer.

   Quatro gramáticas de entrada, e não uma só repetida em toda seção: o que
   denuncia página gerada é justamente a mesma subida de 20px acontecendo
   sete vezes no mesmo scroll. */
.js-anima .revela {
  transition-delay: var(--atraso, 0ms);
  transition-timing-function: var(--saida);
  will-change: opacity, transform;
}
.js-anima .revela--dentro { will-change: auto; }

/* 1. Sobe — títulos e texto corrido. */
.js-anima .revela--sobe {
  opacity: 0;
  transform: translateY(26px);
  transition-property: opacity, transform;
  transition-duration: 0.85s;
}
.js-anima .revela--sobe.revela--dentro { opacity: 1; transform: none; }

/* 2. Encaixa — a etiqueta entra pela lateral, como quem enfia o cartão no
   trilho da gôndola, e a sombra assenta junto. */
.js-anima .revela--encaixa {
  opacity: 0;
  transform: translateX(-26px);
  transition-property: opacity, transform;
  transition-duration: 1.05s;
}
/* O :not() e obrigatorio: sem ele esta regra tem especificidade maior que a
   do estado final e as etiquetas pares ficam deslocadas para sempre. */
.js-anima .etiqueta:nth-child(even).revela--encaixa:not(.revela--dentro) {
  transform: translateX(26px);
}
.js-anima .revela--encaixa.revela--dentro { opacity: 1; transform: none; }

/* 3. Abre — o trecho do plano é descoberto de cima para baixo, como uma
   folha saindo da impressora. */
.js-anima .revela--abre {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition-property: opacity, clip-path;
  transition-duration: 1.1s;
}
.js-anima .revela--abre.revela--dentro { opacity: 1; clip-path: inset(0 0 0 0); }

/* 4. Filete — a linha da ausência é traçada primeiro, o texto vem atrás. */
.js-anima .revela--filete {
  border-bottom-color: transparent;
  transition-property: border-bottom-color;
  transition-duration: 0.75s;
}
.js-anima .revela--filete > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.75s var(--saida), transform 0.75s var(--saida);
  transition-delay: calc(var(--atraso, 0ms) + 160ms);
}
.js-anima .revela--filete.revela--dentro { border-bottom-color: rgba(16, 16, 18, 0.22); }
.js-anima .revela--filete.revela--dentro > * { opacity: 1; transform: none; }

/* No celular a etiqueta ocupa a largura inteira, e a entrada lateral empurra
   a página para fora da tela. Lá o encaixe é vertical. Este bloco fica no fim
   do arquivo de propósito: mesma especificidade da regra base, então quem
   vence é quem vem depois. */
@media (max-width: 640px) {
  .js-anima .revela--encaixa,
  .js-anima .etiqueta:nth-child(even).revela--encaixa:not(.revela--dentro) {
    transform: translateY(24px);
  }
}

/* O número volta aqui, abaixo da dobra, onde ele tem contexto: a frase diz de
   quem ele é antes de mostrá-lo. */
.dobra__nota {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.9em;
  line-height: 0;
  letter-spacing: -0.02em;
  color: var(--amarelo);
  font-variant-numeric: tabular-nums;
}

/* No celular a coluna some e a dobra vira pilha. Quem cresce é a cena, não o
   vazio: com o título numa linha `1fr` sobravam quase 400px de amarelo em cima
   dele, e a cena, presa em 27svh, virava uma tira 16:9 que decepava as mãos do
   lojista no balcão. O clipe é retrato (640x878), quase a proporção do próprio
   aparelho — dando a ele a altura que sobra, o enquadramento volta inteiro e o
   campo vazio acaba. Medido na tela do Alan, não estimado. */
@media (max-width: 860px) {
  .faixa {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .faixa__titulo { grid-column: 1; grid-row: 1; align-self: start; }
  .cena {
    grid-column: 1;
    grid-row: 2;
    min-height: 190px;
    margin: clamp(18px, 3vh, 30px) 0 clamp(16px, 3vh, 28px);
  }
  /* O balcão e as mãos vivem no meio do quadro retrato: centralizado, o
     recorte guarda os dois. */
  .cena__filme { object-position: 50% 46%; }
}

/* O rastro fica acima de tudo e não intercepta nada. Sem filtro, sem sombra e
   sem mistura: é tinta chapada, e o script escolhe a cor pelo que está por
   baixo. */
.rastro {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

/* =========================================================================
   O diagnóstico: as respostas dentro de cada etiqueta

   Cada resposta é uma tarja de papel com filete duro. Marcada, ela vira tinta
   amarela com o texto em preto — a mesma lógica de duas tintas da página, e
   não um radio azul de sistema. O input continua sendo um radio de verdade:
   teclado, leitor de tela e agrupamento por nome seguem funcionando.
   ========================================================================= */
.etiqueta__opcoes {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: auto;
  border-top: 1px solid rgba(16, 16, 18, 0.18);
}

.opcao {
  position: relative;
  display: block;
  padding: 13px clamp(14px, 2vw, 22px) 13px calc(clamp(14px, 2vw, 22px) + 26px);
  border-bottom: 1px solid rgba(16, 16, 18, 0.14);
  font: 500 0.94rem/1.35 var(--texto);
  cursor: pointer;
}
.opcao:last-child { border-bottom: 0; }

/* A tarja de tinta entra varrendo da esquerda, como carimbo passando na
   etiqueta. É `transform`, que vai para o compositor: cor de fundo animada
   repinta a linha inteira a cada quadro, e isto dispara a cada toque. */
.opcao::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amarelo);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.17s var(--saida), opacity 0.17s var(--saida);
}

/* A marca desenhada. O estado não pode viver só na cor da tarja: aqui ele
   também é um quadrado que enche, e sobrevive a daltonismo e a tela ruim. */
.opcao::after {
  content: "";
  position: absolute;
  left: clamp(14px, 2vw, 22px);
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -7px;
  border: 2px solid var(--chao);
  transition: background-color 0.17s var(--saida);
}

/* O texto por cima das duas camadas. */
.opcao > span { position: relative; z-index: 1; }

/* O radio some da vista mas continua no fluxo de foco: ele é quem recebe o
   teclado, e o anel de foco vai para a tarja inteira. */
.opcao input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

/* Toque dispara :hover falso no celular: o realce fica só onde há ponteiro. */
@media (hover: hover) and (pointer: fine) {
  .opcao:hover::before { transform: scaleX(1); opacity: 0.3; }
}

.opcao:has(input:checked) { font-weight: 700; }
.opcao:has(input:checked)::before { transform: scaleX(1); opacity: 1; }
.opcao:has(input:checked)::after { background: var(--chao); }

.opcao:has(input:focus-visible) {
  outline: 3px solid var(--chao);
  outline-offset: -3px;
}

/* A pergunta encolhe um pouco: agora ela divide o cartão com as respostas. */
.etiqueta__pergunta {
  padding-bottom: clamp(16px, 2.2vw, 24px);
}

/* =========================================================================
   Os dois estados da virada
   ========================================================================= */
.virada__leitura {
  display: grid;
  gap: clamp(20px, 3vh, 34px);
  justify-items: start;
}

.virada[data-estado="vazio"] .remarcacao__valor { color: var(--cinza-tinta); }
.virada[data-estado="vazio"] .remarcacao__linha--por { color: var(--cinza-tinta); }
.virada[data-estado="vazio"] .remarcacao__linha--de::after { display: none; }

.virada__conta strong { color: var(--amarelo); font-weight: 700; }

.acao--virada { margin-top: clamp(4px, 1vh, 12px); }

/* =========================================================================
   O placar da área — a conta ficando conferível enquanto ela é feita
   ========================================================================= */
.etiqueta__placar {
  color: var(--chao);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   A remarcação de volta no fecho

   O DE/POR é o único gesto próprio desta página. Disparar uma vez na virada e
   nunca mais era gastar o dispositivo mais forte do mundo visual justo antes
   do momento que a lembrança guarda. Aqui ele volta pequeno, sobre o amarelo,
   com a nota que o visitante mesmo produziu.
   ========================================================================= */
.remarca {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 32px);
  color: var(--chao);
  font-variant-numeric: tabular-nums;
}

.remarca__par {
  display: inline-flex;
  align-items: baseline;
  gap: 0.42em;
}

.remarca__rotulo,
.remarca__prazo {
  font: 800 0.72rem/1 var(--texto);
  font-stretch: 86%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.remarca__prazo { color: #4a4108; align-self: center; }

.remarca__valor {
  position: relative;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7.4vw, 4.6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

/* O riscado, do mesmo jeito da virada: traço de tinta por cima do valor
   velho, não uma linha decorativa. */
/* A mesma tinta rebaixada que o resto da página usa sobre amarelo. #6D6008
   media 4,4:1 e passava só por ser texto grande; este passa em qualquer
   tamanho, e é um valor que a página já tem em vez de mais um. */
.remarca__par--de .remarca__valor { color: #4a4108; }
.remarca__par--de .remarca__valor::after {
  content: "";
  position: absolute;
  left: -0.07em;
  right: -0.07em;
  top: 52%;
  height: 5px;
  background: var(--chao);
}

/* =========================================================================
   Registro fora — a assinatura de impressão do mundo

   Duas tintas, e a chapa preta bate 2px torta em relação à amarela. Aparece
   nas junturas dos chapados, que é onde o erro de registro aparece de verdade
   num impresso: a faixa da dobra e a calha do plano já carregam a sua; aqui
   fica a do rodapé da faixa.
   ========================================================================= */
.faixa__base { box-shadow: 0 -2px 0 0 rgba(16, 16, 18, 0.16); }

/* =========================================================================
   O momento coreografado — a remarcação

   Um só, e ele nasce da ação do visitante, não da rolagem. Ao fechar a quinta
   resposta a etiqueta é remarcada na frente dele: o valor velho imprime, o
   traço risca por cima, o novo sobe, e a ação assenta. Nada disto é enfeite —
   cada passo é o retorno de uma coisa que ele acabou de fazer.
   ========================================================================= */
.js-anima .virada.remarcando .remarcacao__linha--de {
  animation: imprime 0.34s var(--saida) both;
}

.js-anima .virada.remarcando .remarcacao__linha--por {
  animation: imprime 0.34s var(--saida) 0.26s both;
}

.js-anima .virada.remarcando .acao--virada {
  animation: assenta 0.4s var(--saida) 0.62s both;
}

@keyframes imprime {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes assenta {
  from { opacity: 0; transform: translate(-8px, -8px); }
  to { opacity: 1; transform: none; }
}

/* Com preferência por menos movimento nada disto liga: `.js-anima` só existe
   quando o script confirmou que pode animar. O estado final é o do HTML. */

/* =========================================================================
   A dobra no celular — escala de fachada, e não margem de cartaz

   O display caía para ~30px de altura de caixa dentro de um campo amarelo
   vazio, no aparelho que o PRODUCT.md nomeia como a cena real. O corpo agora
   tem piso próprio no celular, e o título encosta na cena em vez de flutuar
   centralizado no meio do vão.
   ========================================================================= */
@media (max-width: 860px) {
  .faixa__titulo {
    font-size: clamp(3.3rem, 13.2vw, 5.4rem);
    align-self: end;
    max-width: 11ch;
  }
  .faixa { padding-top: clamp(22px, 4vh, 44px); }
}

/* =========================================================================
   Erro de registro — a franja de borda, na língua desta paleta

   A referência era a aberração cromática do Lusion: franja prismática na borda
   da vinheta, como se a objetiva dispersasse a luz. Aquilo é shader sobre cena
   3D e contradiz "sem vidro, brilho, degradê". Isto é a mesma franja pelo
   caminho do impresso: as duas chapas batem 3px fora de alinhamento, e nas
   bordas do chapado aparece um fio da tinta que ficou de fora — de um lado o
   papel que nenhuma chapa cobriu, do outro a que passou dos limites.

   Vai no tipo em escala grande e na moldura, porque é onde o erro de registro
   é reconhecível num impresso de verdade. Deslocamento duro e sem desfoque:
   sombra desfocada seria brilho, e brilho está banido.
   ========================================================================= */

/* Tinta preta sobre chapado amarelo: sobra o papel de um lado. */
.faixa__titulo,
.fecho__titulo {
  text-shadow: -3px 0 0 rgba(244, 242, 237, 0.62), 3px 0 0 rgba(255, 255, 255, 0.16);
}

/* Sobre o chão escuro a franja inverte: o amarelo escapa de um lado e a tinta
   engrossa do outro. */
.remarcacao__linha--de .remarcacao__valor {
  text-shadow: -4px 0 0 rgba(255, 212, 0, 0.5), 4px 0 0 rgba(244, 242, 237, 0.14);
}
.remarcacao__linha--por .remarcacao__valor {
  text-shadow: -4px 0 0 rgba(244, 242, 237, 0.34), 4px 0 0 rgba(16, 16, 18, 0.9);
}

/* A moldura do porta-preço: papel de um lado, tinta do outro. Substitui o
   deslocamento em `--chao-alto`, que sobre amarelo era invisível. */
.cena {
  box-shadow: -4px 0 0 0 rgba(244, 242, 237, 0.9), 4px 0 0 0 rgba(16, 16, 18, 0.5);
}

/* No celular a franja encolhe junto com o corpo: 3px numa caixa de 38px de
   altura é proporção de impresso; numa de 120px, no desktop, é a mesma coisa
   em 4px. Abaixo disso o efeito some, acima vira defeito. */
@media (max-width: 640px) {
  .faixa__titulo,
  .fecho__titulo {
    text-shadow: -2px 0 0 rgba(244, 242, 237, 0.62);
  }
  .remarcacao__linha--de .remarcacao__valor {
    text-shadow: -3px 0 0 rgba(255, 212, 0, 0.5);
  }
  .remarcacao__linha--por .remarcacao__valor {
    text-shadow: -3px 0 0 rgba(244, 242, 237, 0.34);
  }
}

/* =========================================================================
   A ação do estado vazio — quem rolou sem responder precisa de volta
   ========================================================================= */
.acao--voltar .acao__canal { color: #4a4108; }

/* Sem resposta não há remarcação, e sem remarcação não há registro fora: com a
   franja, os travessões de estado vazio ganhavam corpo de barra impressa e
   pareciam tarja de censura em vez de campo por preencher. */
.virada[data-estado="vazio"] .remarcacao__valor { text-shadow: none; }

/* =========================================================================
   A lente — a página sob a objetiva, por um instante

   A referência era o Lusion: franja prismática nas bordas do quadro, como se a
   objetiva dispersasse a luz. Aqui ela não é tratamento da mídia nem textura de
   impressão: é uma camada acima de tudo, que acende com a rolagem e apaga
   sozinha quando ela para. Por um momento a página parece estar sendo filmada.

   Enfeite declarado, e divergência assumida com "sem vidro, brilho, degradê".

   O custo é pago uma vez: os degradês são rasterizados na criação da camada, e
   o que a rolagem move depois é só `opacity` e `transform`, que vão para o
   compositor. Nada de `filter`, nada de `backdrop-filter` — esses obrigariam a
   re-rasterizar a página inteira a cada quadro, e isto abre no celular do
   balcão. O `will-change` só existe enquanto ela está viva.
   ========================================================================= */
.lente {
  position: fixed;
  /* Transbordo em pixels, não em porcentagem: o deslize máximo da camada é de
     14px e a escala de 1,2%, então 24px de folga bastam. */
  inset: -24px;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  /* A vinheta: o corpo da objetiva fechando o quadro. É ela que carrega a
     leitura de "está sendo filmado"; a dispersão é o detalhe por cima. */
  background:
    radial-gradient(96% 74% at 50% 50%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.24) 100%),
    radial-gradient(150% 108% at 50% 50%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0.18) 100%);
}

/* A dispersão, como anel e não como borda.

   Três versões erradas antes desta, e vale registrar as três porque cada uma
   errou uma coisa diferente:

   1. Quatro faixas retas coladas nas extremidades da janela. Na referência o
      brilho é um ARCO — a elipse da objetiva —, curvo, e mora para dentro do
      quadro. Borda reta na quina lê como moldura de página.
   2. Afinar essas faixas. Não resolveu porque o problema nunca foi a
      espessura: era a forma.
   3. Quatro anéis elípticos empilhados, um por matiz. Curvos e no lugar
      certo, mas liam como quatro listras separadas — dava para contar.

   A geometria: uma elipse alta e estreita, centrada. Como o raio vertical
   passa muito da altura da tela, o topo e a base ficam fora de quadro e só os
   dois arcos laterais aparecem, que é o que se vê na referência.

   A dispersão vive DENTRO de um gradiente só, nas paradas de cor: elas ficam
   próximas para o navegador interpolar de uma matiz na vizinha, em vez de
   desenhar faixas. É o que faz o efeito ser uma coisa só, mesclada, sem começo
   nem fim visíveis.

   `screen` porque franja de lente é luz: ela só soma. Em mistura normal, verde
   sobre amarelo suja; em `screen`, clareia. A mistura vive na classe do pulso,
   então com a página parada não existe grupo de composição nenhum para o
   navegador manter. */
.lente::before {
  content: "";
  position: absolute;
  inset: 0;
  /* UM gradiente, e não quatro empilhados. Empilhados eles liam como quatro
     listras separadas — dava para contar. Na referência a dispersão é uma
     coisa só: o espectro atravessa o arco interpolando de uma cor na vizinha,
     e não dá para dizer onde começa nem onde termina.

     E é um FIO. Este foi o erro que durou mais: por três versões o anel teve a
     forma certa, depois a cor certa, e a espessura errada o tempo todo —
     rampando de 58% a 100% do raio, ocupava 40% da tela e lia como faixa
     colorida. Medida a referência, o núcleo visível dela tem ~5% da largura.
     Por isso as paradas agora se apertam entre 87% e 100% do raio: 84px numa
     janela de 1536, ou 5,5%.

     Não mexa nestes números na mão. `node .planning/calibrar-lente.cjs`
     recalcula a cor e a espessura contra os alvos medidos e reescreve este
     bloco. */
  /* Calibrado contra a referência por medição, e não por tentativa.

     A captura do Lusion foi amostrada na linha do meio: o pico de saturação
     dela é de 18 em 255, num pixel rgb(20,23,33) — um quase-preto levemente
     azulado, sobre cantos em luminância 9. Não é arco-íris: é iridescência,
     escura e com croma moderada.

     Isso derruba as duas tentativas anteriores, e por motivos opostos. Cores
     saturadas com alfa alto davam luminância demais e liam como tinta. Cores
     quase brancas com alfa baixo davam a luminância certa mas saturação 5, e
     liam como névoa cinza. O que a referência tem é matiz forte com alfa
     baixo: pouca luz, mas colorida.

     Os valores abaixo saíram da conta do "screen" sobre o chão #101012, e não
     do olho — o script está em scratchpad/croma.cjs. Eles caem em saturação 9
     a 12 e luminância 28 a 32, um fio abaixo da referência, que é o lado certo
     para errar num efeito que precisa ser delicado. */
  background: radial-gradient(
    ellipse 42% 94% at 50% 50%,
    rgba(30, 255, 150, 0) 87.4%,
    rgba(30, 255, 150, 0.05) 89.5%,
    rgba(120, 255, 55, 0.058) 91%,
    rgba(255, 205, 30, 0.062) 92.5%,
    rgba(255, 140, 60, 0.062) 94%,
    rgba(255, 90, 150, 0.056) 95.5%,
    rgba(165, 70, 255, 0.05) 97%,
    rgba(40, 145, 255, 0.038) 98.5%,
    rgba(40, 145, 255, 0) 100%
  );



}
.lente--pulso::before { mix-blend-mode: screen; }

/* O foco de luz no centro do anel.

   Sem ele o anel não tem causa: dispersão é o que uma objetiva faz COM uma
   fonte de luz, e desenhar só a franja era desenhar o efeito sem o motivo.

   O ponto cai no centro da janela, e no instante do disparo é ali que está a
   linha divisória das seções — o gatilho é justamente ela cruzando o meio da
   tela. Então o foco não precisa ser posicionado: ele já nasce em cima da
   linha. As duas coisas coincidem por construção.

   A VERSÃO ANTERIOR NÃO PARECIA LUZ, e o motivo foi o mesmo erro que eu tinha
   acabado de cometer na franja, invertido: para deixar sutil eu apaguei tudo,
   e fonte de luz apagada não lê como luz — lê como mancha cinza. Numa foto o
   que faz um ponto parecer luminoso é o CONTRASTE entre um núcleo minúsculo e
   estourado e um halo largo e quase invisível. Sutileza aqui está no tamanho,
   não no brilho.

   Por isso a queda tem cinco paradas em vez de uma rampa reta: o núcleo estoura
   em branco nos primeiros pixels, cai a um quinto em 6px, some quase de todo em
   50px, e o resto é um sopro de 100px que mal se mede. É a curva de uma luz de
   verdade, e não um degradê linear.

   O rasgo horizontal é o que uma fonte pontual vira ao passar por uma lente, e
   aqui ele deita exatamente sobre a linha. Fino e claro: com o núcleo estourado
   do lado, ele finalmente tem de onde nascer. */
.lente::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle 300px at 50% 50%,
      rgba(255, 253, 248, 0.92) 0%,
      rgba(255, 250, 238, 0.5) 2%,
      rgba(255, 246, 225, 0.2) 6%,
      rgba(255, 242, 215, 0.075) 17%,
      rgba(255, 240, 210, 0.028) 38%,
      rgba(255, 240, 210, 0) 100%
    ),
    radial-gradient(
      ellipse 38% 0.32% at 50% 50%,
      rgba(255, 249, 233, 0.55),
      rgba(255, 249, 233, 0.14) 26%,
      rgba(255, 249, 233, 0) 100%
    );
}
.lente--pulso::after { mix-blend-mode: screen; }

/* O pulso. Ele nao acompanha a rolagem inteira: dispara so quando a pagina
   troca de secao, que e onde a leitura de corte de camera faz sentido. Fora
   das transicoes a lente nao existe.

   Animacao CSS, e nao um laco de rAF preso ao scroll: pulso discreto roda
   fora da thread principal e nao paga nada enquanto ninguem rola. O
    e a mistura aditiva so existem durante os 900ms da animacao,
   entao a pagina parada nao mantem camada de composicao nenhuma. */
.lente--pulso {
  animation: lentePulso 0.9s var(--saida) both;
  will-change: opacity, transform;
}

@keyframes lentePulso {
  from { opacity: 0; transform: translate3d(0, 0, 0) scale(1); }
  22% { opacity: 1; }
  to { opacity: 0; transform: translate3d(0, -10px, 0) scale(1.012); }
}

/* Menos movimento desliga a lente inteira: ela é enfeite, e enfeite é a
   primeira coisa que sai. Sem o `.js-anima` o script nem chega a acender. */
@media (prefers-reduced-motion: reduce) {
  .lente { display: none; }
}

/* =========================================================================
   A etiqueta sob o dedo — o papel levanta

   Nada de brilho de borda: neste mundo o retorno de toque é físico. O cartão
   sobe dois pixels e a sombra dura se abre junto, que é o que acontece com
   papel apoiado quando alguém o levanta da prateleira.

   O seletor precisa ganhar da entrada: `.js-anima .revela--encaixa` declara
   `transition-property: opacity, transform` em 1,05s, e sem isto o hover
   herdaria a duração da entrada e o cartão levaria um segundo para reagir.
   ========================================================================= */
@media (hover: hover) and (pointer: fine) {
  .js-anima .etiqueta.revela--dentro,
  .etiqueta {
    transition-property: transform, box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: var(--saida);
  }
  .js-anima .etiqueta.revela--dentro:hover,
  .etiqueta:hover {
    transform: translate(-2px, -3px);
    box-shadow: 8px 13px 0 -2px rgba(0, 0, 0, 0.6), 0 26px 44px -12px rgba(0, 0, 0, 0.78);
  }
}

/* =========================================================================
   O placar do diagnóstico — quantas já foram, e quantas faltam

   Laço aberto do Zeigarnik, mas com o número verdadeiro: o brief bane a barra
   de progresso **falsa**, não a conta real do que a pessoa acabou de fazer. A
   barra é o próprio trilho da gôndola enchendo de tinta.
   ========================================================================= */
.placar {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  margin-bottom: clamp(22px, 3vh, 34px);
  font: 800 clamp(0.66rem, 1.3vw, 0.76rem)/1 var(--texto);
  font-stretch: 86%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fraco);
}

.placar__conta {
  flex: none;
  font-variant-numeric: tabular-nums;
}
.placar__conta b {
  color: var(--amarelo);
  font-weight: 800;
}

/* A calha e a tinta correndo dentro dela. Escala em vez de largura: largura
   recalcula layout a cada resposta, escala vai para o compositor. */
.placar__trilho {
  flex: 1 1 auto;
  height: 8px;
  min-width: 0;
  background: var(--filete);
  overflow: hidden;
}
.placar__tinta {
  display: block;
  height: 100%;
  background: var(--amarelo);
  transform: scaleX(var(--placar, 0));
  transform-origin: left center;
  transition: transform 0.34s var(--saida);
}

/* =========================================================================
   O fecho em duas colunas — a etiqueta da nota ao lado da pergunta

   O lado direito era campo amarelo vazio no exato momento que o Peak-End diz
   ser metade da lembrança. Agora ele carrega o objeto do mundo: a etiqueta de
   gôndola, com a nota do visitante remarcada nela — e, sem resposta, a mesma
   etiqueta em branco, que é o laço aberto pedindo para ser preenchido.
   ========================================================================= */
@media (min-width: 900px) {
  .fecho__grade {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
    align-items: start;
    gap: clamp(40px, 5vw, 88px);
  }
  .fecho__coluna { display: grid; gap: clamp(26px, 4vh, 44px); }
  .fecho__etiqueta { margin-top: clamp(10px, 2vh, 26px); }
}

.fecho__coluna { display: grid; gap: clamp(26px, 4vh, 44px); }

/* A etiqueta de verdade: cabeça de tinta, corpo de papel, canto reto e o mesmo
   relevo curto e duro dos cartões das perguntas. */
.fecho__etiqueta {
  background-color: var(--papel);
  background-image: url("midia/papel-grao.webp");
  background-repeat: repeat;
  background-size: 280px 280px;
  background-blend-mode: multiply;
  color: var(--chao);
  box-shadow: 8px 12px 0 -2px rgba(16, 16, 18, 0.42), 0 26px 46px -14px rgba(16, 16, 18, 0.5);
}

.fecho__etiqueta-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px clamp(16px, 1.8vw, 22px) 12px;
  background: var(--amarelo);
  border-bottom: 3px solid var(--chao);
  font: 800 0.72rem/1 var(--texto);
  font-stretch: 86%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fecho__etiqueta-topo span:last-child { color: #4a4108; }

.fecho__etiqueta-corpo {
  padding: clamp(20px, 2.6vw, 30px) clamp(16px, 1.8vw, 22px) clamp(24px, 3vw, 34px);
}


/* =========================================================================
   A etiqueta do fecho — o que a nota mede

   Ela não repete a nota. Repetir o número no fim é dizer duas vezes a mesma
   coisa: quem respondeu já viu na virada, e quem não respondeu ganhava dois
   travessões. O que fica aqui é a outra metade do argumento — as cinco áreas,
   vinte pontos cada, somando cem. A prova de método, no lugar da lembrança.
   ========================================================================= */
.fecho__areas {
  list-style: none;
  margin: 0;
  padding: clamp(6px, 1vw, 10px) clamp(16px, 1.8vw, 22px) 0;
  display: grid;
}
.fecho__areas li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(16, 16, 18, 0.16);
  font: 600 1rem/1.2 var(--texto);
}
.fecho__areas b {
  font: 400 1.3rem/1 var(--display);
  font-variant-numeric: tabular-nums;
  color: #55524b;
}

/* A soma fechando a etiqueta, com o filete duro que separa total de parcela
   em qualquer talão de papel. */
.fecho__soma {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 clamp(16px, 1.8vw, 22px);
  padding: 15px 0 clamp(20px, 2.4vw, 28px);
  border-top: 3px solid var(--chao);
  font: 800 0.72rem/1 var(--texto);
  font-stretch: 86%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fecho__soma b {
  font: 400 clamp(2.2rem, 4vw, 3.2rem)/0.9 var(--display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   O painel na seção da ferramenta

   Mesmo porta-preço da dobra: a moldura é uma gramática só, e uma segunda
   forma de emoldurar mídia na mesma página seria duas personalidades.
   ========================================================================= */
.cena--ferramenta {
  grid-column: auto;
  grid-row: auto;
  align-self: auto;
  margin: clamp(26px, 4vh, 44px) 0 0;
  max-width: 520px;
}
/* A proporcao mora no quadro, e nao no figure: no figure ela dividia a altura
   com a canaleta de papel, e o recorte comia 13% do clipe por cima. */
.cena--ferramenta .cena__quadro { aspect-ratio: 960 / 662; }

/* =========================================================================
   A luz na linha divisória

   O filete que separa as seções passa a carregar um ponto de luz no meio dele.
   Duas razões, e a segunda é a que importa:

   1. Sozinho, o filete de 1px é só um traço no escuro.
   2. É essa luz que a lente encontra. Quando a linha cruza o meio da tela, o
      anel de dispersão abre em volta dela — e aí o efeito tem causa visível em
      vez de aparecer do nada. A luz fica fixa aqui; a lente é que passa.

   Só nas divisórias sobre chão escuro: sobre o papel das ausências e sobre o
   amarelo do fecho não haveria contraste para a luz existir.
   ========================================================================= */
.areas,
.plano,
.ferramenta,
.virada {
  position: relative;
}

.areas::after,
.plano::after,
.ferramenta::after,
.virada::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: min(520px, 54vw);
  height: 2px;
  background: radial-gradient(
    ellipse 50% 100% at 50% 50%,
    rgba(255, 246, 224, 0.16),
    rgba(255, 246, 224, 0) 100%
  );
  pointer-events: none;
}