/* ===========================================================================
   EGGENDA — landing page: O CHÃO COMUM
   ---------------------------------------------------------------------------
   Este arquivo tem duas metades e elas têm donos diferentes:

     1. DE CIMA ATÉ A LINHA "FIM DO CHÃO COMUM": reset, tokens, tipografia,
        esqueleto e peças compartilhadas (card, botão, chip, bicho, revelar).
        NÃO MEXA AQUI. Se a sua seção precisa de uma variação, escreva a
        variação DENTRO DA SUA ZONA, com o seu prefixo.

     2. DEPOIS DAQUELA LINHA: uma zona vazia por peça — HERO, ELENCO,
        RECURSOS, MOVIMENTO, FECHO. Escreva só dentro da sua. Assim quatro
        pessoas mexem no mesmo arquivo ao mesmo tempo sem se pisar.

   CONVENÇÃO DE NOME (é o que evita colisão de classe):
     hero-*   elenco-*   rec-*   mov-*   fecho-*
   Classe sem prefixo é compartilhada e é de todo mundo — ou seja, de ninguém:
   mudar uma quebra as outras quatro seções.

   AS QUATRO REGRAS DA IDENTIDADE (vêm de src/renderer/settings.css):
     1. traço ameixa de 3px + sombra DURA (5px 5px 0, sem blur nenhum) em tudo
        que é card e em tudo que é clicável;
     2. rosa chiclete domina; amarelo e azul entram como apoio, e os três
        NUNCA aparecem juntos no mesmo elemento — só o logo pode;
     3. cantos de 20 a 24px em card, pílula (999px) em botão e chip;
     4. o fundo das faixas usa as cores; branco-casca só DENTRO de card.

   NADA VEM DA REDE. Nem fonte, nem imagem, nem script. A página abre com
   duplo clique, offline, no meio do mato. Se você escreveu um http:// em
   algum lugar deste diretório, você quebrou isso.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   As cores são as do app, copiadas de settings.css sem inventar tom novo.
   Se você precisar de uma cor que não está aqui, você não precisa dela.
   --------------------------------------------------------------------------- */
:root {
  /* núcleo */
  --rosa: #ff4fa3;        /* primária: domina a página */
  --amarelo: #ffc93c;     /* destaque */
  --azul: #4fc3f7;        /* apoio */
  --ameixa: #35213d;      /* texto e traço, sempre */

  /* versões claras — fundo de faixa */
  --rosa-claro: #ffe9f4;
  --gema-clara: #fff3d1;
  --azul-claro: #e3f4fe;
  --casca: #fffdfb;       /* dentro de card; também serve de faixa clara */

  /* traço e sombra: a sombra é sólida DE PROPÓSITO. É o que dá o ar de
     adesivo do sistema, e é o primeiro detalhe que se perde se alguém
     trocar por um blur qualquer. */
  --traco: 3px;
  --sombra: 5px 5px 0 var(--ameixa);
  --sombra-btn: 4px 4px 0 var(--ameixa);
  --sombra-alta: 8px 8px 0 var(--ameixa);   /* peça grande, tipo mockup */
  --raio-card: 22px;
  --raio-peq: 14px;
  --pilula: 999px;

  /* medidas de página. A coluna de 1100px é a medida da barra (arc.net,
     capturado e medido em barra/tokens.json), não um chute. */
  --coluna: 1100px;
  --coluna-texto: 720px;   /* largura de conforto para parágrafo corrido */
  --respiro: clamp(20px, 4vw, 48px);          /* margem lateral */
  --ritmo: clamp(64px, 8vw, 112px);           /* ar em cima e embaixo da faixa */

  /* tipografia */
  --f-marca: 'Bungee', 'Segoe UI', system-ui, sans-serif;
  --f-titulo: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  --f-corpo: 'Quicksand', 'Segoe UI', system-ui, sans-serif;
  --corpo: 17px;

  /* cada faixa redefine estes três (ver "cores de faixa" mais abaixo).
     Use-os em vez de escolher a cor na mão: assim o botão da sua seção já
     nasce com a cor certa para o fundo em que ele caiu. */
  --realce: var(--rosa);
  --btn-bg: var(--rosa);
  --btn-cor: var(--casca);
}

/* ---------------------------------------------------------------------------
   2. RESET
   O mínimo. Reset grande é reset que alguém vai ter que desfazer depois.
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  /* horizontal travado: a peça do movimento manda bichinho passear pela tela
     inteira, e um passo a mais não pode virar barra de rolagem lateral. */
  overflow-x: hidden;
  background: var(--casca);
  color: var(--ameixa);
  font-family: var(--f-corpo);
  font-size: var(--corpo);
  font-weight: 500;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--amarelo);
  color: var(--ameixa);
}

/* Foco visível de verdade. Traço duplo porque a página tem fundo rosa e fundo
   claro, e um anel só some em um dos dois. */
:focus-visible {
  outline: 3px solid var(--ameixa);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Quem pediu menos movimento recebe menos movimento — inclusive nos sprites
   (o app.js lê a mesma preferência e congela os bichinhos no quadro 0). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------------
   3. TIPOGRAFIA
   Três fontes, três funções, e nenhuma delas invade a função da outra:
     Bungee     → só a marca "eggenda". Em mais nada.
     Baloo 2    → títulos.
     Quicksand  → corpo, botão, chip, rótulo.
   Os tamanhos são fluidos (clamp) para o telefone não precisar de uma
   segunda tabela de tamanhos.
   --------------------------------------------------------------------------- */
.marca-nome {
  font-family: var(--f-marca);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: lowercase;
  line-height: 1;
}

.titulao,   /* o título do hero — existe um por página */
h1 {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(40px, 6.2vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.5px;
}

.titulo,    /* título de seção */
h2 {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.subtitulo, /* título de card */
h3 {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.2;
}

/* Chapéu: a linha curtinha em caixa alta que anuncia a seção. */
.olho {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Linha fina: o parágrafo que vem debaixo do título e explica. */
.linha-fina {
  max-width: var(--coluna-texto);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  line-height: 1.6;
}

strong, b {
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   4. ESQUELETO — faixas, coluna e ritmo
   A página é uma pilha de FAIXAS (.secao), cada uma com sua cor de fundo, e
   dentro de cada faixa uma COLUNA centrada (.miolo). Escreva o seu conteúdo
   dentro de um .miolo; a faixa é do esqueleto.
   --------------------------------------------------------------------------- */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--amarelo);
  color: var(--ameixa);
  border: var(--traco) solid var(--ameixa);
  border-radius: var(--pilula);
  padding: 10px 20px;
  font-weight: 700;
}

.pular:focus {
  left: 16px;
  top: 16px;
}

.miolo {
  width: 100%;
  max-width: var(--coluna);
  margin: 0 auto;
  padding: 0 var(--respiro);
}

.secao {
  position: relative;
  padding: var(--ritmo) 0;
  scroll-margin-top: 24px;
}

/* CORES DE FAIXA.
   Cada faixa também declara o realce e a cor do botão principal, porque a
   resposta certa muda com o fundo: sobre faixa clara o botão é rosa; sobre
   faixa rosa o botão vira amarelo (botão rosa sobre rosa some).
   Texto: ameixa em qualquer faixa (sobre o rosa dá 4,83 — passa no AA).
   Casca sobre rosa dá 3,04, então casca SÓ em texto grande (título de 24px
   pra cima) e no logo. Parágrafo em casca sobre rosa é ilegível: não faça. */
.secao--casca  { background: var(--casca); }
.secao--gema   { background: var(--gema-clara); }
.secao--azul   { background: var(--azul-claro); }
.secao--rosa   { background: var(--rosa); }

.secao--casca,
.secao--gema,
.secao--azul {
  --realce: var(--rosa);
  --btn-bg: var(--rosa);
  --btn-cor: var(--casca);
}

.secao--rosa,
.topo,
.rodape {
  --realce: var(--amarelo);
  --btn-bg: var(--amarelo);
  --btn-cor: var(--ameixa);
}

/* RITMO DAS SEÇÕES.
   Estes pisos saem da medição da barra (barra/tokens.json: seções de 617,
   855, 1069 e 1030px numa página de 6034). São PISO, não teto: se a sua peça
   ficou mais alta, ótimo, o min-height não atrapalha. Se ficou muito mais
   baixa que o piso, a página perde o ritmo — encare isso como sinal de que
   falta conteúdo, não como sinal de que o piso está errado. */
#hero      { min-height: 620px; }
#elenco    { min-height: 860px; }
#recursos  { min-height: 1040px; }
#movimento { min-height: 1030px; }
#fecho     { min-height: 620px; }

/* Marca-d'água de seção ainda vazia.
   Some sozinha: o seletor só casa enquanto a <section> não tem NENHUM filho
   elemento. Assim que a peça põe a primeira <div> lá dentro, isto evapora —
   ninguém precisa lembrar de apagar. */
.secao:not(:has(*)) {
  display: grid;
  place-items: center;
}

.secao:not(:has(*))::after {
  content: 'peça “' attr(data-peca) '” — o conteúdo entra aqui';
  border: var(--traco) dashed var(--ameixa);
  border-radius: var(--raio-card);
  padding: 22px 30px;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 19px;
  opacity: 0.55;
}

/* ---------------------------------------------------------------------------
   5. PEÇAS COMPARTILHADAS
   Use estas. Elas já obedecem às quatro regras, e usar todas as cinco seções
   as mesmas peças é o que faz a página parecer UMA página.
   --------------------------------------------------------------------------- */

/* CARD — traço 3px, canto 22px, sombra dura, fundo casca. */
.card {
  background: var(--casca);
  border: var(--traco) solid var(--ameixa);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra);
  padding: 24px 24px 22px;
}

/* Variação de fundo do card (o traço e a sombra continuam iguais). */
.card--gema { background: var(--gema-clara); }
.card--azul { background: var(--azul-claro); }
.card--rosa { background: var(--rosa-claro); }

/* BOTÃO — pílula, traço, sombra dura. Apertar afunda a peça contra a própria
   sombra: é o gesto do sistema, a peça tem espessura e você empurra ela. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: var(--traco) solid var(--ameixa);
  border-radius: var(--pilula);
  padding: 13px 28px;
  background: var(--casca);
  color: var(--ameixa);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: var(--sombra-btn);
  /* (peça VIDA) o botão agora também LEVANTA quando o mouse chega — os estados
     estão na zona VIDA, no fim do arquivo. Aqui fica só o tempo, porque tempo
     de botão é um número só para a página inteira. 0,14s com saída suave: o
     levantar precisa ser visto, e a 0,08s ele acontecia antes de existir. O
     apertar continua seco — a zona VIDA devolve os 0,06s no `:active`. */
  transition:
    transform 0.14s cubic-bezier(0.2, 0.85, 0.3, 1),
    box-shadow 0.14s cubic-bezier(0.2, 0.85, 0.3, 1),
    filter 0.14s ease;
}

.btn--principal {
  background: var(--btn-bg);
  color: var(--btn-cor);
}

.btn--grande {
  padding: 17px 36px;
  font-size: 19px;
  box-shadow: var(--sombra);
}

.btn:hover {
  filter: brightness(1.06);
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ameixa);
}

.btn--grande:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--ameixa);
}

/* CHIP — a pílula pequena, para rótulo e etiqueta. Traço mais fino (2,5px)
   porque em peça pequena o traço de 3px come o texto. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 2.5px solid var(--ameixa);
  border-radius: var(--pilula);
  padding: 6px 15px;
  background: var(--casca);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.chip--gema { background: var(--gema-clara); }
.chip--azul { background: var(--azul-claro); }
.chip--rosa { background: var(--rosa); color: var(--casca); }

/* SPRITES — os bichinhos.
   A arte é a MESMA do app (site/sprites/ sai de scripts/exporta-sprites.js).
   Cada tira é horizontal: 15 quadros de 40x36 na ordem
     idle(2) walk(2) train(2) pc(2) sleep(1) alert(2) drink(2) special(2)
   O quadro em cena é o --quadro; quem troca o --quadro é o app.js. Sem JS,
   fica parado no quadro 0, que é uma pose boa — nada some.
   Amplie pelo --esc (escala inteira: 3, 4, 5... nunca 3,5, senão o pixel
   racha). */
.bicho {
  --esc: 4;
  --quadro: 0;
  /* Quantos quadros tem a TIRA deste elemento. 15 e a tira cheia; as tiras de
     skin trazem so os 2 do `idle` e declaram `--quadros: 2` no proprio estilo.
     Sem esta variavel o background-size mentia o tamanho da folha e a skin
     aparecia esticada e cortada. */
  --quadros: 15;
  width: calc(40px * var(--esc));
  height: calc(36px * var(--esc));
  background-image: var(--tira);
  background-repeat: no-repeat;
  background-size: calc(40px * var(--quadros) * var(--esc)) calc(36px * var(--esc));
  background-position: calc(var(--quadro) * -40px * var(--esc)) 0;
  image-rendering: pixelated;
  flex: none;
}

.bicho[data-bicho='pintinho']    { --tira: url('sprites/pintinho.png'); }
.bicho[data-bicho='ornitorrinco']{ --tira: url('sprites/ornitorrinco.png'); }
.bicho[data-bicho='pinguim']     { --tira: url('sprites/pinguim.png'); }
.bicho[data-bicho='equidna']     { --tira: url('sprites/equidna.png'); }
.bicho[data-bicho='cobra']       { --tira: url('sprites/cobra.png'); }
.bicho[data-bicho='baiacu']      { --tira: url('sprites/baiacu.png'); }
.bicho[data-bicho='capivara']    { --tira: url('sprites/capivara.png'); }
.bicho[data-bicho='coruja']      { --tira: url('sprites/coruja.png'); }
.bicho[data-bicho='corvo']       { --tira: url('sprites/corvo.png'); }
.bicho[data-bicho='caranguejo']  { --tira: url('sprites/caranguejo.png'); }
.bicho[data-bicho='polvo']       { --tira: url('sprites/polvo.png'); }
.bicho[data-bicho='macaco']      { --tira: url('sprites/macaco.png'); }

/* Andando para a esquerda: espelha. Só o bicho, nunca o texto ao lado. */
.bicho--espelhado {
  transform: scaleX(-1);
}

/* O OVO — tira de 2 quadros, 20x18 cada. */
.ovo {
  --esc: 3;
  --quadro: 0;
  width: calc(20px * var(--esc));
  height: calc(18px * var(--esc));
  background-image: url('sprites/ovo.png');
  background-repeat: no-repeat;
  background-size: calc(20px * 2 * var(--esc)) calc(18px * var(--esc));
  background-position: calc(var(--quadro) * -20px * var(--esc)) 0;
  image-rendering: pixelated;
  flex: none;
}

/* REVELAR — entrada suave quando o elemento aparece na tela.
   Ponha class="revelar" em qualquer coisa; o app.js liga o .revelado sozinho.
   O estado escondido só existe com JS ligado (.com-js), senão um JS quebrado
   deixaria a página inteira invisível — que é o pior jeito de falhar. */
/* (peça VIDA) 12px em 0,42s, e não os 16px em 0,5s de antes: 16px numa tela de
   900 é um salto que o olho persegue, e meio segundo é tempo de sobra para um
   texto que já devia estar lido. O ajuste fica AQUI, no lugar de origem, e não
   numa regra nova lá no fim do arquivo — uma segunda `.com-js .revelar` no fim
   passaria por cima da transição que cada peça escreveu para o próprio
   elemento na zona dela, e transição de peça é o que faz a rolagem daquela
   seção. Mesma especificidade, mesmo lugar, só os números mudam. */
.com-js .revelar {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 0.86, 0.3, 1);
}

.com-js .revelar.revelado {
  opacity: 1;
  transform: none;
}

/* Janela que não pinta (é assim que a ferramenta de captura roda: escondida,
   e aí não existe quadro nem transição). O app.js detecta e põe esta classe;
   aqui a página desiste de qualquer entrada suave e mostra tudo. Sem isto, a
   seção sairia EM BRANCO na captura que o crítico vai julgar. */
.sem-quadros .revelar {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Escada: filhos entram um atrás do outro, não todos de uma vez. */
.com-js .revelar[data-atraso='1'] { transition-delay: 0.08s; }
.com-js .revelar[data-atraso='2'] { transition-delay: 0.16s; }
.com-js .revelar[data-atraso='3'] { transition-delay: 0.24s; }
.com-js .revelar[data-atraso='4'] { transition-delay: 0.32s; }

/* Só para leitor de tela. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   6. TOPO E RODAPÉ — chão comum, dono é o esqueleto
   O logo é a ÚNICA peça da página autorizada a usar rosa, amarelo e azul ao
   mesmo tempo. Em qualquer outro elemento, os três juntos são proibidos.
   --------------------------------------------------------------------------- */
.topo {
  background: var(--rosa);
  border-bottom: var(--traco) solid var(--ameixa);
}

.topo-miolo {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}

.marca .marca-nome {
  font-size: 30px;
  color: var(--amarelo);
  -webkit-text-stroke: 2px var(--azul);
  text-shadow: 3px 3px 0 var(--azul);
}

.topo-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.topo-nav a {
  font-weight: 700;
  padding: 4px 0;
  border-bottom: 2.5px solid transparent;
  /* (peça VIDA) o sublinhado deixa de ser interruptor. 0,15s é curto o
     bastante para não atrapalhar quem só passa o mouse a caminho do próximo
     item, e longo o bastante para o traço PARECER desenhado. */
  transition: border-bottom-color 0.15s ease;
}

.topo-nav a:hover {
  border-bottom-color: var(--ameixa);
}

.rodape {
  background: var(--rosa);
  border-top: var(--traco) solid var(--ameixa);
  padding: 30px 0;
  text-align: center;
}

.rodape p {
  font-weight: 700;
  font-size: 15px;
}

.rodape .rodape-fina {
  font-weight: 600;
  opacity: 0.8;
  margin-top: 4px;
}

/* PALCO DO MOVIMENTO — camada transversal.
   Cobre a janela inteira, por cima do conteúdo e por baixo do topo, e não
   pega clique nenhum (pointer-events: none). É aqui que a peça do movimento
   solta bichinho para passear pela página. Quem escreve dentro dela é a peça
   MOVIMENTO; o esqueleto só garante que ela existe e não atrapalha. */
.palco {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
}

.topo {
  position: relative;
  z-index: 50;
}

/* ---------------------------------------------------------------------------
   7. TELA ESTREITA — só o chão comum
   Cada peça cuida do seu próprio empilhamento dentro da sua zona.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  :root {
    --corpo: 16px;
  }

  .topo-miolo {
    flex-wrap: wrap;
    gap: 12px 18px;
  }

  .topo-nav {
    order: 3;
    width: 100%;
    gap: 18px;
    font-size: 15px;
  }
}

@media (max-width: 560px) {
  /* Marca e botão têm que caber na MESMA linha; a navegação é que desce.
     Com a marca em tamanho de tela grande, o botão era empurrado para uma
     linha só dele e o topo virava três andares. */
  .marca .ovo {
    --esc: 2;
  }

  .marca {
    gap: 9px;
  }

  .marca .marca-nome {
    font-size: 21px;
    -webkit-text-stroke-width: 1.5px;
    text-shadow: 2px 2px 0 var(--azul);
  }

  .topo-miolo {
    gap: 10px;
  }

  .topo .btn {
    padding: 9px 16px;
    font-size: 14px;
  }

  .topo-nav {
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
  }

  .btn--grande {
    padding: 15px 26px;
    font-size: 17px;
  }
}

/* ===========================================================================
   FIM DO CHÃO COMUM — daqui para baixo cada peça tem a sua zona
   ---------------------------------------------------------------------------
   Regras da casa, de novo, porque é aqui que elas valem:
     • escreva SÓ dentro da sua zona;
     • prefixe TODA classe nova com o prefixo da sua peça;
     • precisa variar uma peça compartilhada? faça na sua zona, descendo do
       seu id — `#recursos .card { ... }` — e não editando `.card` lá em cima;
     • token novo? não. Use os que existem.
   =========================================================================== */

/* ###########################################################################
   ZONA: HERO            id="hero"     prefixo: hero-*     faixa: rosa
   ---------------------------------------------------------------------------
   A primeira tela: o que é o Eggenda, para quem, e o botão de baixar.
   Escreva daqui...
   ########################################################################### */

/* --- planta ---------------------------------------------------------------
   Duas colunas: à esquerda a promessa e o botão, à direita a CHOCADEIRA (a
   piada). O palco é dimensionado pelo REPOUSO, não pelo soco: quem manda no
   tamanho do quadro é o ovo parado, porque é ele o primeiro quadro pintado, o
   print que a pessoa compartilha e o único quadro que existe para quem pediu
   menos movimento. O macaco vem depois e não cabe — e não caber é o efeito,
   não o acidente. */
#hero {
  padding-top: clamp(40px, 5.4vw, 72px);
  padding-bottom: clamp(48px, 5vw, 68px);
  /* CLIP na horizontal, VISÍVEL na vertical, e os dois eixos precisam ser
     diferentes: o macaco tem de estourar para CIMA do cartão (é o efeito),
     mas as duas metades da casca se afastam para os LADOS quando ele nasce e,
     num telefone de 390px, a metade de baixo chegava a x=460 — 103px de
     barra de rolagem lateral na página inteira. Medido: com a cena parada no
     ovo, scrollWidth 357; parada no macaco, 460.
     Vinha de antes, só que intermítente: durante a animação a página ganhava
     e perdia a rolagem a cada volta, nos 2,3s da fase do macaco. Congelar no
     desfecho tornou permanente o que era piscante, e foi assim que apareceu.
     `clip` e não `hidden` porque `hidden` num eixo transforma o outro em
     `auto` — e aí o estouro de cima do macaco viraria rolagem vertical
     dentro da seção em vez de sangrar por cima dela. */
  overflow-x: clip;
  overflow-y: visible;
}

.hero-miolo {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: center;
}

/* --- casca rachada: a borda de baixo da faixa -----------------------------
   O Arc assina a faixa dele com uma borda ondulada. A nossa assinatura é
   outra: a faixa rosa termina numa CASCA QUEBRADA, com o mesmo traço ameixa
   que envolve o resto do sistema. Os dentes são de tamanhos diferentes de
   propósito: zigue-zague regular vira renda de toalha; rachadura de ovo é
   irregular. O ladrilho é um SVG local em data: — nada vem da rede. */
#hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 2;
  height: 30px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='30'%3E%3Cpath d='M0 0L0 4L16 27L30 5L42 20L52 6L64 4L64 0Z' fill='%23ff4fa3'/%3E%3Cpath d='M0 4L16 27L30 5L42 20L52 6L64 4' fill='none' stroke='%2335213d' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 64px 30px;
}

/* --- coluna de texto ------------------------------------------------------ */
.hero-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.hero-titulo {
  /* menor que o .titulao do chão comum: aqui ele divide a tela com o palco,
     e um título de 68px em coluna de 500px vira sete linhas. */
  font-size: clamp(34px, 4.4vw, 53px);
  max-width: 14ch;
  max-width: 560px;
}

.hero-fina {
  margin-top: 22px;
  max-width: 520px;
}

/* a extensão .ics vira uma pastilha: some do meio da frase sem virar código */
.hero-cod {
  display: inline-block;
  border: 2px solid var(--ameixa);
  border-radius: var(--pilula);
  background: var(--casca);
  padding: 0 9px;
  font-size: 0.86em;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: 1px;
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

/* O botão principal: pílula com um ladrilho de ícone encaixado à esquerda e a
   seta à direita — a geometria que o Arc usa, com o traço e a sombra dura
   que são nossos. */
.hero-baixar {
  gap: 14px;
  padding: 8px 24px 8px 8px;
  font-size: 18px;
  box-shadow: var(--sombra);
}

.hero-baixar:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--ameixa);
}

.hero-ladrilho {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2.5px solid var(--ameixa);
  border-radius: 14px;
  background: var(--casca);
  overflow: hidden;
}

/* a arte do ovo não tem contorno próprio (é creme sobre creme). Quatro
   sombras duras sem borrão devolvem a ele o mesmo traço ameixa do sistema. */
.hero-ladrilho-ovo {
  --esc: 3;
  filter:
    drop-shadow(2px 0 0 var(--ameixa))
    drop-shadow(-2px 0 0 var(--ameixa))
    drop-shadow(0 2px 0 var(--ameixa))
    drop-shadow(0 -2px 0 var(--ameixa));
}

.hero-seta {
  flex: none;
}

.hero-conhecer {
  padding: 15px 24px;
}

/* A isca do segredo: 12 bichinhos, 11 na lista. Quem contar, entende o palco
   ao lado. Fica em voz baixa — mas não tão baixa que não dê para ler. */
.hero-nota {
  margin-top: 18px;
  font-size: 15px;
  font-weight: 700;
  opacity: 0.9;
}

/* ===========================================================================
   A CHOCADEIRA — a piada
   ---------------------------------------------------------------------------
   Oito tempos, nesta ordem e com esta duração — e a duração É a piada:

     1. ovo INTEIRO, parado, centrado ........ 3,0s   ← o estado de partida
     2. chacoalhada, DUAS investidas ......... 1,2s
     3. PAUSA MORTA, ovo reto e imóvel ....... 0,9s   ← é ela que vende
     4. racha ................................ 0,7s
     5. a fenda aberta, ovo imóvel ........... 0,45s
     6. o macaco salta em UM quadro seco ..... 0,6s
                                               ~6,3s até a risada
     7. o macaco em cena ..................... 1,8s
     8. ele pula e sai por cima do cartão .... 0,5s
     9. espera, ovo inteiro e quieto ......... 3,2s   ← o 1 da volta seguinte

   A CONTA É O ARGUMENTO: dois terços do laço são ovo. A armação (espera +
   chacoalhada + pausa + fenda) leva 6,0s dos 9,35s de ciclo; o macaco, que é
   o desfecho, leva 2,4s. Numa versão anterior a proporção era o contrário —
   o macaco ocupava quase metade do tempo e a armação um quinto — e a piada
   não existia: sem espera bastante, aquilo era só um cartão com um macaco.

   Quem conta o tempo é o roteiro no app.js; aqui estão os estados, e o
   data-fase na caixa manda em tudo que está dentro.

   Não existe balão de fala nesta cena, e a ausência é peça de projeto: se o
   tempo funciona, ninguém precisa ler "…um macaco?" para achar graça; se
   precisa, o tempo não funcionou e o texto só está pedindo desculpa por ele.

   O estado de repouso (fase 'parado') é o ovo inteiro, e ele é também o que
   aparece congelado — em movimento reduzido e em janela que não pinta. Uma
   foto desta cena tem que mostrar um OVO: é o ovo que arma a expectativa, e
   sem expectativa armada o macaco não é piada, é só um macaco.
   =========================================================================== */
.hero-palco {
  justify-self: stretch;
}

.hero-chocadeira {
  position: relative;
  background: var(--casca);
  border: var(--traco) solid var(--ameixa);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-alta);
  /* VISÍVEL, e isto é peça de projeto: o macaco não cabe no quadro e sai por
     cima dele. Quem recorta as laterais é o clip-path da cena, logo abaixo —
     `overflow: hidden` aqui cortaria também a sombra dura de 8px, que é
     assinatura do sistema. */
  overflow: visible;
}

/* o tranco do estouro: a caixa inteira leva um solavanco quando ele nasce.
   Curto, sem escala, só deslocamento — é impacto, não elástico. */
.hero-chocadeira[data-fase='choca'] {
  animation: hero-tranco 300ms ease-out;
}

@keyframes hero-tranco {
  0%   { transform: none; }
  20%  { transform: translateY(7px); }
  52%  { transform: translateY(-4px); }
  78%  { transform: translateY(2px); }
  100% { transform: none; }
}

.hero-cena {
  /* TRÊS escalas, e a separação é o miolo da piada. O ovo é medido para
     ENCHER o quadro parado — que é o primeiro quadro pintado, o print que a
     pessoa compartilha e o único quadro de quem pediu menos movimento. O
     macaco é medido para NÃO CABER nele. Um número só para os dois obrigava a
     escolher entre um ovo perdido no branco e um macaco domesticado; dois
     números deixam o repouso dizer OVO e a chegada dizer GRANDE DEMAIS. */
  --esc-o: 14;     /* o ovo: 8x12 de arte  ->  112 x 168 na tela */
  --esc-m: 11;     /* o macaco: 37x35 de arte -> 407 x 385: 139% do palco  */
  --esc-p: 9;      /* o cenário (a lâmpada), que não disputa com nenhum dos dois */
  --piso: 124px;   /* altura do chão, medida a partir de baixo */
  --fuga: 1;       /* o quanto as metades da casca escapam para os lados */
  --lamp: 12;      /* largura da lâmpada, em pixels da arte. Tudo nela sai
                      daqui — inclusive de onde o cone de luz começa — para
                      que a tela estreita mude UM número e não seis. */
  position: relative;
  height: 400px;
  /* A cena é decoração de ponta a ponta (aria-hidden), e no pulo de saída o
     macaco sai do cartão e passa por cima do que estiver logo acima — no
     telefone, o botão "Conhecer os bichinhos". Meio segundo de bicho voando na
     frente de um botão é meio segundo de botão que não responde ao toque. Aqui
     ele atravessa: o clique vai para quem está embaixo, sempre. */
  pointer-events: none;
  /* raio de dentro = raio do cartão menos o traço. Com a caixa em overflow
     visível, é este arredondamento que impede o fundo da cena de aparecer
     em quina quadrada por cima do canto redondo do cartão. */
  border-radius: calc(var(--raio-card) - var(--traco));
  /* O RECORTE ASSIMÉTRICO, e ele é a piada em uma linha: fechado nas laterais
     e no rodapé, ABERTO para cima. O ovo cabe; o macaco sai pelo teto e é
     cortado pela borda de cima do cartão. */
  clip-path: inset(-460px 0 0 0 round calc(var(--raio-card) - var(--traco)));
  /* um respiro de sombra nos cantos. Sem ele o que está fora do cone é branco
     de papel, e aí o cone não é luz: é uma mancha amarela num retângulo. */
  /* a parede do fundo em penumbra. Papel branco atrás de uma casca creme é
     creme sobre creme outra vez, só que em pé: o ovo perdia a silhueta na
     metade de cima exatamente como perdia no chão. Ameixa muito diluída, mais
     forte nas beiradas, e o cone abre um claro no meio — que é onde o ovo
     está. */
  background:
    radial-gradient(118% 76% at 50% 14%,
      rgba(53, 33, 61, 0) 26%, rgba(53, 33, 61, 0.16) 100%),
    linear-gradient(180deg, #f3edf3 0%, #fffdfb 58%);
  /* O chão come mais de um terço da altura de propósito: é ele que sobe a
     linha do horizonte e traz o ovo do rodapé para o centro óptico do
     quadro. Ovo encostado na borda de baixo é ovo esquecido lá; ovo em cima
     de um chão alto é ovo POSTO ali. */
}

/* A LUZ DA CHOCADEIRA. Um cone morno caindo do alto, e é ele que segura o
   palco enquanto o ovo — que tem 8 por 12 pixels de arte, e é pequeno mesmo —
   é a única coisa em cena. Sem a luz, os segundos de ovo parado são uma folha
   branca com um ovinho perdido no canto de baixo. */
.hero-brilho {
  position: absolute;
  left: 0;
  right: 0;
  /* o cone começa NA lâmpada, com a largura da lâmpada. É o que separa "um
     gradiente amarelo no cartão" de "aquilo ali está aceso". */
  top: calc(0.32px * var(--lamp) * var(--esc-p));         /* a boca da lâmpada */
  z-index: 0;
  height: calc(100% - var(--piso) - 0.32px * var(--lamp) * var(--esc-p));
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  /* amarelo-ovo diluído, não a gema clara: gema clara sobre casca é diferença
     de dez pontos num canal só, e o cone sumia. Diluído, o amarelo continua
     sendo o mesmo token e vira LUZ em vez de mancha. */
  background: linear-gradient(180deg,
    rgba(255, 201, 60, 0.40) 0%,
    rgba(255, 201, 60, 0.13) 62%,
    rgba(255, 201, 60, 0) 100%);
}

/* A LÂMPADA. Desenhada em degraus, e não em diagonal, porque tudo nesta cena é
   pixel: uma cúpula com rampa lisa ao lado de um ovo serrilhado denuncia que
   uma das duas coisas foi desenhada por engano. */
.hero-lampada {
  position: absolute;
  z-index: 0;              /* atrás do macaco: ele nasce DEBAIXO dela */
  /* pequena de propósito: o macaco é alto, e a medida da lâmpada é o espaço
     que sobra ACIMA da cabeça dele. Uma lâmpada maior vira chapéu na hora em
     que ele nasce, e chapéu é justamente o que esta cena não quer. */
  top: calc(-0.133px * var(--lamp) * var(--esc-p));   /* o fio sai pelo alto do
                                    quadro: ela pendura do teto, não flutua */
  left: 50%;
  width: calc(1px * var(--lamp) * var(--esc-p));
  height: calc(0.531px * var(--lamp) * var(--esc-p));   /* 34/64 do viewBox */
  margin-left: calc(-0.5px * var(--lamp) * var(--esc-p));
  /* o fio é cortado RENTE ao teto do cartão. A cena agora deixa passar o que
     sobe (é por ali que o macaco sai), então quem segura a lâmpada dentro do
     quadro é este recorte — sem ele, o fio ficaria pendurado no rosa. */
  clip-path: inset(calc(0.133px * var(--lamp) * var(--esc-p)) 0 0 0);
}

.hero-lampada-fio,
.hero-lampada-cupula,
.hero-lampada-luz {
  stroke: var(--ameixa);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.hero-lampada-fio    { fill: none; }
.hero-lampada-cupula { fill: var(--casca); }
.hero-lampada-luz    { fill: var(--amarelo); }

/* O CHÃO. Era gema clara — o mesmo creme da casca, a três por cento de
   distância dela. Um ovo creme em cima de um chão creme não lê como ovo: lê
   como borrão. Agora o piso é AMEIXA DILUÍDA sobre a gema (nenhum tom novo
   entra na página: é a mesma tinta do traço, rebaixada), e a diferença de
   valor recorta a silhueta antes mesmo do contorno. O degradê escurece para a
   frente, então o chão tem profundidade e não é uma faixa chapada. */
.hero-chao {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: var(--piso);
  background:
    /* a poça de luz da lâmpada batendo no chão, bem debaixo do ovo. É ela que
       faz esta faixa ler como CHÃO e não como parede: sem a poça, o degradê
       sozinho é um retângulo em pé. */
    radial-gradient(40% 74% at 50% 4%,
      rgba(255, 201, 60, 0.46) 0%, rgba(255, 201, 60, 0) 74%),
    /* ameixa a 18% e a 33% sobre a casca: cinza-lavanda, frio. Rebaixar a
       gema dava um bege de barro que sujava a página inteira; rebaixar a
       casca dá SOMBRA, que é o que um chão sob uma lâmpada é. */
    linear-gradient(180deg, #ded3e2 0%, #bfb0c9 100%);
  border-top: var(--traco) solid var(--ameixa);
}

/* A sombra de contato. Existe por causa do tempo 1: um ovo parado 1,4 segundo
   sem sombra não está POUSADO no chão, está colado na frente dele. Ela alarga
   quando o macaco chega — mesmo chão, bicho maior. */
.hero-sombra {
  /* dois números e a sombra serve aos dois bichos: --som-e é a escala de quem
     está em cena, --som-l a largura dele em pixels de arte. Trocar de morador
     é trocar as duas variáveis, não reescrever quatro medidas. */
  --som-e: var(--esc-o);
  --som-l: 11;
  position: absolute;
  z-index: 1;           /* depois do chão no HTML: pinta por cima dele */
  left: 50%;
  bottom: calc(var(--piso) - 2.6px * var(--som-e));
  width: calc(1px * var(--som-l) * var(--som-e));
  height: calc(2.2px * var(--som-e));
  margin-left: calc(-0.5px * var(--som-l) * var(--som-e));
  border-radius: 50%;
  background: rgba(53, 33, 61, 0.21);
  transition: width 0.3s ease, margin-left 0.3s ease, bottom 0.3s ease;
}

[data-fase='choca'] .hero-sombra,
[data-fase='macaco'] .hero-sombra {
  --som-e: var(--esc-m);
  --som-l: 26;
}

/* A etiqueta fica em CIMA, e não embaixo. Embaixo ela disputa o chão com a
   casca que cai e com o pé do macaco; em cima ela ocupa justamente o canto que
   o ovo sozinho deixa vazio, e sai da frente quando o macaco enche o quadro. */
.hero-etiqueta {
  position: absolute;
  left: 16px;
  top: 14px;
  z-index: 5;
  font-size: 13px;
  transition: opacity 0.25s ease;
}

/* e sai de cena quando o macaco chega. Ele passa por cima daquele canto, e
   uma etiqueta flutuando na cara dele seria a única coisa da página que
   disputa atenção com a piada — justo no segundo em que ela acontece. */
[data-fase='choca'] .hero-etiqueta,
[data-fase='macaco'] .hero-etiqueta,
[data-fase='sai'] .hero-etiqueta {
  opacity: 0;
}

/* Os dois eixos ficam centrados por margem negativa, e não por transform: o
   transform está reservado para chacoalhar, rachar e nascer. */
.hero-eixo {
  position: absolute;
  left: 50%;
}

.hero-eixo--ovo {
  z-index: 3;
  width: calc(20px * var(--esc-o));
  height: calc(18px * var(--esc-o));
  margin-left: calc(-10px * var(--esc-o) * var(--fuga));
  /* a arte do ovo tem folga embaixo da célula: descontada, ele ENCOSTA no
     chão em vez de pairar dois dedos acima dele. Medido na captura, não
     chutado — o ovo pairando estraga o único quadro que a página tem parada. */
  bottom: calc(var(--piso) - 3.4px * var(--esc-o));
  transform-origin: 50% 84%;
}

.hero-eixo--macaco {
  z-index: 2;   /* atrás da casca: ele SAI de dentro do ovo */
  width: calc(40px * var(--esc-m));
  height: calc(36px * var(--esc-m));
  margin-left: calc(-20px * var(--esc-m));
  bottom: calc(var(--piso) - 2px * var(--esc-m));
  transform-origin: 50% 100%;
  /* fora de cena, e sem transição nenhuma: quando ele aparece, aparece de uma
     vez. A entrada seca é o tempo 5. */
  opacity: 0;
  transform: scale(0.16) translateY(24px);
}

.hero-macaco {
  --esc: var(--esc-m);
  display: block;   /* .bicho é span: sem isto ele fica inline e some */
}

/* O ovo é UMA imagem cortada em duas metades por um mesmo zigue-zague. O
   contorno mora no pai: assim a emenda do meio não aparece com o ovo fechado,
   e cada metade ganha o traço sozinha depois que ele abre. */
.hero-ovo {
  position: absolute;
  inset: 0;
  /* O apagar mora AQUI, no pai, e não nas metades: opacidade entra depois do
     filtro, então casca e contorno somem juntos. Apagando as metades por
     dentro, o contorno ameixa some mais devagar que o creme e o ovo vira uma
     pedra cinza no meio do laço.
     Repare no valor de partida: opacidade 1, sem animação de entrada. O ovo
     está inteiro no primeiro quadro pintado da página. */
  opacity: 1;
  transition: opacity 0.3s ease;
  /* o contorno acompanha a escala: com o ovo grande, 3px viravam um fio de
     cabelo em volta de 112px de casca. Um quarto do pixel de arte mantém a
     mesma proporção de traço que o resto do sistema mostra. */
  filter:
    drop-shadow(calc(0.25px * var(--esc-o)) 0 0 var(--ameixa))
    drop-shadow(calc(-0.25px * var(--esc-o)) 0 0 var(--ameixa))
    drop-shadow(0 calc(0.25px * var(--esc-o)) 0 var(--ameixa))
    drop-shadow(0 calc(-0.25px * var(--esc-o)) 0 var(--ameixa));
}

.hero-casca {
  --esc: var(--esc-o);
  position: absolute;
  left: 0;
  top: 0;
  /* fechado, cada metade volta para o lugar SEM deslizar (0s): quem vê o laço
     reiniciar vê um ovo inteiro, não duas cascas se reencontrando. */
  transition: transform 0s;
}

.hero-casca--cima {
  clip-path: polygon(0% 0%, 100% 0%, 100% 55.6%, 70% 55.6%, 60% 50%, 50% 55.6%, 40% 50%, 30% 55.6%, 0% 55.6%);
  /* o giro tem que acontecer perto da casca, não no meio da célula vazia */
  transform-origin: 50% 36%;
}

.hero-casca--baixo {
  /* 1% de invasão para cima: cobre a emenda antisserrilhada das duas metades */
  clip-path: polygon(0% 54.6%, 30% 54.6%, 40% 49%, 50% 54.6%, 60% 49%, 70% 54.6%, 100% 54.6%, 100% 100%, 0% 100%);
  transform-origin: 50% 78%;
}

.hero-rachadura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--ameixa);
  opacity: 0;
}

.hero-rachadura path {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
}

/* farelo de casca: quatro lasquinhas no estouro. Os cacos de verdade são as
   duas metades, logo abaixo. */
.hero-caco {
  position: absolute;
  left: 50%;
  top: 53%;
  width: calc(0.95px * var(--esc-o));
  height: calc(0.95px * var(--esc-o));
  margin: calc(-0.475px * var(--esc-o)) 0 0 calc(-0.475px * var(--esc-o));
  background: var(--gema-clara);
  border: 3px solid var(--ameixa);
  opacity: 0;
}

/* --- tempo 1: parado, 3s (e tempo 9: espera, 3,2s) ------------------------ */
/* Nada escrito aqui, e é literal: o ovo fica INTEIRO, RETO e QUIETO. Todo o
   resto desta cena existe para que estes dois trechos de silêncio tenham do
   que ser a quebra — e eles são, juntos, o maior pedaço do laço. Três segundos
   de ovo parado não é tempo perdido: é o tempo de a pessoa DECIDIR que dali
   vai sair um pintinho. Sem essa decisão o macaco não contradiz nada. */

/* --- tempo 2: chacoalha, 1,2s -------------------------------------------- */
/* DUAS INVESTIDAS, e o respiro entre elas é a peça inteira: a primeira pode
   ser o vento; depois do silêncio, a segunda só pode ser alguém lá dentro.
   Um único tranco de 0,6s lia como falha de animação — bicho tentando sair
   lê como bicho tentando sair só na segunda vez.

   AQUI NÃO HÁ @keyframes, e a ausência é decisão dupla.
   A primeira razão é de desenho: nesta cena tudo anda em degraus. O sprite
   troca de quadro, a cúpula da lâmpada é escadinha em vez de diagonal — um
   único elemento deslizando suave no meio disso denuncia que foi desenhado
   por engano. O ovo chacoalha em poses, a ~14 por segundo, no mesmo compasso
   das tiras do aplicativo.
   A segunda é de prova: transform animado por CSS é entregue ao compositor, e
   compositor não roda em janela escondida — medido aqui, o tranco ficava
   congelado no quadro 0% e NENHUMA captura conseguia mostrar a chacoalhada.
   Pose escrita no style do elemento pinta em qualquer janela. Um efeito que
   não aparece em foto nenhuma é um efeito que ninguém pode julgar.
   Quem escreve as poses é o roteiro no app.js. */

/* (a pose única do quadro congelado — ?cena=chacoalha e movimento reduzido —
   está lá embaixo, junto com os outros quadros escritos à mão.) */

/* --- tempo 3: pausa, 0,9s ------------------------------------------------- */
/* de propósito não tem nada aqui: parado é parado. É este silêncio que faz a
   piada existir — sem ele ninguém entende que veio surpresa. Quase um segundo
   inteiro, e é o trecho mais barato e mais caro da página ao mesmo tempo. */

/* --- tempo 4: racha, 0,7s ------------------------------------------------- */
/* O solavanco também é em poses, no app.js, e pelas duas razões da chacoalhada
   — mais uma terceira, que é de leitura: com o tombo escrito por CSS, 'racha' e
   'fenda' saíam pixel por pixel IDÊNTICAS em toda captura (medido: os dois
   arquivos com o mesmo tamanho em bytes). Duas fases indistinguíveis são uma
   fase. Aqui o ovo pula para trás enquanto a fenda abre; na fase seguinte ele
   está imóvel com a fenda inteira. São dois quadros diferentes, e é isso que
   um quadro tem de ser.
   A fenda em si é stroke-dashoffset, que roda na linha principal: essa, sim,
   anima em qualquer janela. */
[data-fase='racha'] .hero-rachadura {
  opacity: 1;
}

[data-fase='racha'] .hero-rachadura path {
  animation: hero-rachar 340ms ease-out forwards;
}

@keyframes hero-rachar {
  to { stroke-dashoffset: 0; }
}

/* --- tempo 5: a fenda aberta, 0,45s --------------------------------------- */
/* O último silêncio, e o mais curto: a rachadura já está inteira e o ovo
   voltou a ficar imóvel. É o quadro do "vai abrir" — e é ele que dá à
   rachadura vida suficiente para ser VISTA. Sem esta pausa a fenda aparecia e
   estourava no mesmo fôlego, e quem pisca perde o meio da piada.
   Como não há animação aqui, o traço precisa ser mantido à mão: senão o path
   volta ao dashoffset de partida e a fenda se fecha sozinha. */
[data-fase='fenda'] .hero-rachadura {
  opacity: 1;
}

[data-fase='fenda'] .hero-rachadura path {
  stroke-dashoffset: 0;
}

/* --- tempo 6: o macaco, em UM quadro seco --------------------------------- */
/* Sem escala, sem mola, sem transição: no quadro anterior tem um ovo rachado,
   no quadro seguinte tem um macaco. Qualquer suavização aqui transforma a
   piada em transição, e transição ninguém acha graça. */
[data-fase='choca'] .hero-eixo--macaco,
[data-fase='macaco'] .hero-eixo--macaco {
  opacity: 1;
  transform: none;
}

[data-fase='choca'] .hero-caco {
  animation: hero-caco 500ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes hero-caco {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0); }
  65%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
}

/* A CASCA PARTE EM DOIS CACOS QUE CAEM. Cada metade sai para um lado, gira no
   ar e pousa no chão ao lado do pé dele. Nada de casca na cabeça: um chapéu
   fica, e o que a piada pede é que a casca vá para o chão e o macaco fique
   sozinho em cena, inteiro, sem adereço explicando de onde veio. */
[data-fase='choca'] .hero-casca--cima {
  animation: hero-cair-cima 560ms cubic-bezier(0.3, 0.5, 0.4, 1) forwards;
}

@keyframes hero-cair-cima {
  0%   { transform: none; }
  38%  { transform: translate(calc(-5.5px * var(--esc-o) * var(--fuga)), calc(-3.5px * var(--esc-o))) rotate(-58deg); }
  100% { transform: translate(calc(-10px * var(--esc-o) * var(--fuga)), calc(8.5px * var(--esc-o))) rotate(-124deg); }
}

[data-fase='choca'] .hero-casca--baixo {
  animation: hero-cair-baixo 480ms cubic-bezier(0.3, 0.5, 0.4, 1) forwards;
}

@keyframes hero-cair-baixo {
  0%   { transform: none; }
  42%  { transform: translate(calc(5.5px * var(--esc-o) * var(--fuga)), calc(-2px * var(--esc-o))) rotate(16deg); }
  100% { transform: translate(calc(9.5px * var(--esc-o) * var(--fuga)), calc(4.5px * var(--esc-o))) rotate(32deg); }
}

/* --- tempo 7: o macaco em cena, 1,8s -------------------------------------- */
/* Curto de propósito. O desfecho não precisa de tempo — a graça já aconteceu
   no quadro em que ele apareceu, e cada segundo a mais é o palco pedindo uma
   segunda risada que não existe. O orçamento fica com a armação.

   Abaixo, o fim exato das duas quedas da casca, escrito à mão: é para cá que a
   animação entrega as metades, e daqui elas não se mexem mais. */
[data-fase='macaco'] .hero-casca--cima {
  transform: translate(calc(-10px * var(--esc-o) * var(--fuga)), calc(8.5px * var(--esc-o))) rotate(-124deg);
}

[data-fase='macaco'] .hero-casca--baixo {
  transform: translate(calc(9.5px * var(--esc-o) * var(--fuga)), calc(4.5px * var(--esc-o))) rotate(32deg);
}

/* A CASCA CAÍDA SOME NO MEIO DO TEMPO DELE, e isso é maquinaria: com as duas
   metades já apagadas, o transform que as recoloca de pé (0s, sem deslizar)
   acontece sem ninguém ver. O ovo então só precisa REACENDER — e por isso o
   reinício do laço não tem costura visível. Quem liga e desliga a classe é o
   roteiro no app.js. */
.hero-chocadeira.hero-sem-casca .hero-ovo {
  opacity: 0;
}

/* --- tempo 8: a saída, 0,5s ----------------------------------------------- */
/* Ele não se apaga no lugar: PULA e sai POR CIMA DA BORDA DO CARTÃO — o gesto
   que esta caixa já preparou lá em cima com overflow visível. A fase 'volta'
   que existia aqui antes durava 0,7s e mostrava, com todas as letras, um palco
   VAZIO: o macaco sumindo ao mesmo tempo que a casca. Palco vazio no meio de
   uma piada é a plateia percebendo que aquilo é um laço.
   Agora o ovo inteiro reacende no MESMO tique em que ele começa a subir: os
   dois se cruzam em cena e nunca existe um quadro sem nenhum dos dois.

   O pulo em si — agachada, subida acelerada, apagar no fim — está escrito em
   POSES no app.js, e não com `transition` aqui. Duas medidas explicam a
   escolha: a máquina que fotografa esta página responde `prefers-reduced-motion:
   reduce`, e o reset comum lá em cima zera toda transição com !important, então
   uma saída por transição TELEPORTA o macaco em vez de tirá-lo de cena; e o
   resto da chocadeira já anda em degraus, que é o vocabulário de movimento
   desta arte. Sobra para o CSS a única coisa que é de camada: */
/* QUEM SOBE NO EMPILHAMENTO É A CENA, E NÃO O MACACO — e a diferença não é
   preguiça de seletor, é a única coisa que funciona. Aqui havia
   `.hero-eixo--macaco { z-index: 4 }` com o comentário "na saída ele passa por
   cima de tudo": era literalmente falso, e a falsidade era o defeito.
   `.hero-cena` tem `clip-path`, e clip-path CRIA CONTEXTO DE EMPILHAMENTO —
   ou seja, o 4 do macaco só valia lá dentro. Fora dela, quem mandava era
   `.topo` (position: relative, z-index: 50, fundo rosa opaco com a régua
   ameixa), irmã do #hero no contexto raiz. Resultado medido a 1440: o topo do
   macaco cruza a base do cabeçalho (89px) a partir do passo de 140ms e some
   atrás dele por 360 dos 500ms do pulo — o desfecho que a página inteira arma
   saía serrado por uma linha reta.
   Subir a CENA resolve porque ela é quem disputa no contexto raiz. E só muda
   os pixels que se sobrepõem ao cabeçalho, que são exatamente os do macaco: o
   resto da cena mora dentro da caixa dela, bem abaixo. */
[data-fase='sai'] .hero-cena {
  z-index: 60;
}

/* dentro da cena ele continua passando na frente do ovo que reacende */
[data-fase='sai'] .hero-eixo--macaco {
  z-index: 4;
}

/* --- o quadro parado ------------------------------------------------------
   Nada de laço em dois casos, e eles NÃO param no mesmo quadro:

     janela que não pinta (a captura) .... congela no OVO INTEIRO
     movimento reduzido (uma pessoa) ..... congela no MACACO

   A diferença é a única coisa que importa aqui. Para uma foto o ovo é certo:
   quem fotografa vê o resto depois, e o ovo é o quadro que arma a piada sem
   estragar a surpresa. Para alguém que pediu menos movimento aquele ovo seria
   TUDO o que ele veria — a piada ficaria armada para sempre e nunca contada.
   Então o quadro dele é o desfecho, que se lê inteiro de uma vez, e o tempo
   fica num botão logo abaixo para quem quiser. Quem escolhe qual dos dois é o
   app.js; aqui ficam os quadros escritos à mão.

   As fases abaixo existem também para depuração (?cena=… no endereço): sem
   animação e sem transição não sobra nada que leve a cena até elas., então cada quadro
   precisa estar escrito à mão. */
.hero-chocadeira--congelada,
.hero-chocadeira--congelada .hero-eixo--ovo,
.hero-chocadeira--congelada .hero-casca,
.hero-chocadeira--congelada .hero-caco,
.hero-chocadeira--congelada .hero-rachadura path {
  animation: none !important;
}

.hero-chocadeira--congelada .hero-ovo,
.hero-chocadeira--congelada .hero-etiqueta,
.hero-chocadeira--congelada .hero-eixo--macaco,
.hero-chocadeira--congelada .hero-sombra {
  transition: none !important;
}

.hero-chocadeira--congelada[data-fase='chacoalha'] .hero-eixo--ovo {
  transform: rotate(-10deg) translateX(-4px);
}

.hero-chocadeira--congelada[data-fase='racha'] .hero-rachadura path {
  stroke-dashoffset: 0;
}

.hero-chocadeira--congelada[data-fase='choca'] .hero-caco {
  opacity: 1;
}

/* O BOTÃO DE CHOCAR. Só existe para quem pediu menos movimento — é o app.js
   que o cria, e ele não aparece para mais ninguém. Fica CENTRADO sob o cartão
   porque a chocadeira é o assunto dele e não do resto do hero, e discreto de
   propósito: é uma oferta, não uma chamada. A largura mínima segura o cartão
   quieto quando o texto vira "chocar de novo" no fim da volta. */
.hero-chocar {
  display: flex;
  margin: 18px auto 0;
  justify-content: center;
  min-width: 190px;
  padding: 10px 22px;
  font-size: 15px;
}

.hero-chocar[disabled] {
  cursor: default;
  opacity: 0.6;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ameixa);
}

/* --- tela estreita -------------------------------------------------------- */
/* A coluna aperta antes do empilhamento: um pixel a menos na arte devolve o ar
   em volta do macaco sem trocar o grid dele pelo de outro tamanho.

   O TETO DESTA FAIXA É 1279 E NÃO 1000, e é conserto de cabeça decepada, não
   de gosto. O macaco em --esc-m: 11 sobe 95px acima do cartão; o que sobra
   acima do cartão é o padding do #hero MAIS a metade que a coluna de texto
   passa da altura do palco (468px) — e essa metade só existe quando o texto
   quebra em linhas suficientes. Medido, o topo do cartão fica a 103px do topo
   da seção em 1440 (folga de 8px, que é a rasante de projeto), mas despenca
   para 56px em 1040: o macaco entrava 39px DENTRO da .topo, que tem
   z-index 50 e fundo rosa opaco e o pintava por cima — cabeça cortada rente
   por uma linha reta, justo no quadro parado, que é o que todo print mostra.
   Cortava de 1001 a 1262 de innerWidth, com o pico em 1040.
   Baixar o macaco um pixel de arte devolve a rasante sem empurrar a seção
   inteira para baixo com 48px de rosa vazio acima da dobra — é o mesmo
   remédio que a faixa já tomava abaixo de 1000, aplicado onde ele também
   fazia falta. */
@media (max-width: 1279px) and (min-width: 861px) {
  /* a coluna aperta: o macaco desce um pixel de arte para os ombros dele não
     encostarem nas laterais. O OVO não desce junto — ele é quem tem de
     encher o quadro parado, e é a diferença entre os dois que é a piada. */
  .hero-cena {
    --esc-o: 13;
    --esc-m: 9;
    --esc-p: 8;
    --piso: 136px;
    height: 386px;
  }
}

@media (max-width: 860px) {
  .hero-miolo {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero-titulo,
  .hero-fina {
    max-width: 620px;
  }

  /* EMPILHADO. O macaco continua estourando o quadro, mas agora o que está
     acima do cartão não é rosa vazio: é o botão. Então o estouro passa a ser
     medido pelo VÃO — 28px de macaco para fora dentro de um vão de 36 — e o
     cartão encolhe de 520 para 460 para ele voltar a encher a moldura de
     lado a lado. Cabeça de macaco em cima de botão não lê como piada. */
  .hero-palco {
    max-width: 460px;
  }

  .hero-cena {
    --esc-o: 12;
    --esc-m: 8;
    --piso: 112px;
    height: 356px;
  }
}

@media (max-width: 560px) {
  /* No telefone a piada precisa estar quase na dobra: se ela ficar a uma tela
     inteira de distância, o argumento da página é uma lista de recursos e mais
     nada. Cada linha economizada aqui é a chocadeira subindo. */
  #hero {
    padding-top: 30px;
  }

  .hero-miolo {
    gap: 26px;
  }

  /* o tamanho da letra do chip é piso de acessibilidade da peça de celular:
     aqui só encolhe a margem, nunca a fonte. */
  .hero-selos {
    gap: 8px;
    margin-bottom: 16px;
  }

  .hero-fina {
    margin-top: 16px;
  }

  .hero-acoes {
    gap: 11px;
    margin-top: 22px;
  }

  .hero-nota {
    margin-top: 14px;
  }

  /* No telefone o quadro é BAIXO, e a conta é da dobra: a chocadeira começa
     lá pelos 580px de uma tela de 844, então sobram ~260px de cartão à vista.
     Com um palco alto, o que aparece na primeira tela é o cone de luz e mais
     nada — o ovo fica abaixo da dobra e a piada nunca começa. Palco baixo põe
     o ovo dentro dos 844, que é o único lugar onde ele conta para alguma
     coisa. O macaco encolhe junto, e continua enchendo o quadro. */
  /* Os mesmos números que a ZONA CELULAR repete com mais peso lá embaixo —
     ela é quem manda no enquadramento do telefone. Ficam aqui para a cena
     continuar de pé se aquele bloco sumir, e batem com ele de propósito:
     dois valores diferentes para a mesma medida é uma armadilha. */
  .hero-cena {
    --esc-o: 11;    /* o ovo enche o quadro parado, que é o quadro do telefone */
    --esc-m: 6;     /* o macaco vai do chão ao teto da moldura */
    --esc-p: 4;
    --piso: 52px;   /* altura e piso descem juntos: o horizonte não se mexe */
    --fuga: 0.72;   /* cartão estreito: a casca voava para fora da quina */
    --lamp: 9;      /* lâmpada menor: o quadro é baixo e a cabeça dele sobe */
    height: 262px;
  }

  .hero-baixar,
  .hero-conhecer {
    width: 100%;
    justify-content: center;
  }

  .hero-baixar {
    padding: 7px 18px 7px 7px;
    font-size: 17px;
  }

  .hero-ladrilho {
    width: 42px;
    height: 42px;
  }

  #hero::after {
    height: 18px;
    background-size: 22px 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18'%3E%3Cpath d='M0 0H22L11 15Z' fill='%23ff4fa3'/%3E%3Cpath d='M-2 -3L11 15L24 -3' fill='none' stroke='%2335213d' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* ...até aqui. FIM DA ZONA HERO. */

/* ###########################################################################
   ZONA: ELENCO          id="elenco"   prefixo: elenco-*
   ---------------------------------------------------------------------------
   Os 12 bichinhos. Não é uma grade de cartões: é uma PILHA DE CINCO FAIXAS de
   largura inteira, uma ideia em cada uma, e o fundo da faixa é o único
   recipiente — sem cartão, sem borda, sem caixa dentro de caixa. O que dá o
   ritmo na rolagem é a cor TROCAR a cada faixa:

     1. capivara   gema clara   ela e uma frase, mais nada
     2. coruja + corvo  casca   os dois JUNTOS, porque a piada é a resposta
     3. baiacu     azul claro   ele atravessa a faixa nadando e infla no fim
     4. macaco     ameixa       a luz apaga; o segredo é a única coisa acesa
     5. os sete    rosa         uma fila só, o bicho e o nome

   A gag de cada um dispara sozinha quando a faixa entra na tela. Não há botão
   "ver agora": bichinho que só se mexe depois de um clique dentro de uma caixa
   não é bichinho vivo, é vídeo com play.

   Os `--quadro` escritos à mão no HTML são a rede de segurança: sem JS (ou na
   janela travada da ferramenta de captura, que não pinta quadro) cada bicho
   já nasce no quadro que vale a foto — a laranja na cabeça da capivara, o
   livro aberto das duas aves, o baiacu inflado.
   ########################################################################### */

/* Quem dá o ar agora é cada faixa, não a seção. */
#elenco {
  padding: 0;
}

/* ---- 0. A FAIXA PEDE O PALCO SÓ PARA ELA -------------------------------
   O bichinho que passeia pela página mora em .palco, que é `position: fixed`
   e cobre a janela inteira: ele acompanha a rolagem e estaciona por cima dos
   bichos desta seção — um pintinho em cima da capivara — e, como .palco-pata é
   a única parte do palco que pega clique, ele ainda intercepta o toque.

   Aqui o assunto já é bichinho vivo, doze deles em close. Então o que passeia
   sai de cena enquanto o elenco está na tela, e volta depois. A classe é posta
   no <html> pela peça do elenco (app.js): o palco é irmão do <main>, não filho
   da seção, e só a raiz enxerga os dois.

   `visibility: hidden` é o que importa: opacity zero sozinho continua pegando
   clique, e `pointer-events: none` no pai não desfaz o `pointer-events: auto`
   que .palco-pata declara.
   ------------------------------------------------------------------------ */
.palco {
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

html.elenco-em-cena .palco {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* ---- 1. A FAIXA, o recipiente único ------------------------------------- */

/* `overflow: hidden` não é higiene: é o que autoriza o bicho a sangrar para
   fora da margem de baixo e ser CORTADO pela linha da faixa seguinte. Um
   bicho inteirinho boiando no meio do vão é ilustração; um bicho cortado pela
   borda está dentro de um lugar. */
.elenco-faixa {
  position: relative;
  overflow: hidden;
  border-top: var(--traco) solid var(--ameixa);
  padding: clamp(48px, 5.6vw, 82px) 0;
}

.elenco-faixa--um     { background: var(--gema-clara); padding-bottom: 0; }
.elenco-faixa--dois   { background: var(--casca); }
.elenco-faixa--tres   { background: var(--azul-claro); padding-bottom: 0; }

/* A faixa escura. Não é enfeite: é a única da seção em que a luz apaga, e é
   nela que mora o bicho que ninguém devia ver. */
.elenco-faixa--quatro {
  background: var(--ameixa);
  color: var(--casca);
  --realce: var(--amarelo);
}

.elenco-faixa--cinco {
  background: var(--rosa);
  --realce: var(--amarelo);
  border-bottom: var(--traco) solid var(--ameixa);
}

/* ---- 2. TIPOGRAFIA DA SEÇÃO -------------------------------------------- */

/* A abertura: chapéu, título e nada mais. Ela divide o campo de gema com a
   capivara de propósito — o título é a primeira linha da tela dela, não uma
   faixa própria. */
.elenco-abre {
  max-width: 820px;
  margin-bottom: clamp(30px, 3.4vw, 50px);
}

/* Rosa puro sobre gema clara dá 2,6 de contraste e não passa em texto de
   13px — então o rosa entra como MARCA (o quadradinho) e a palavra continua
   ameixa. O mesmo quadradinho abre todas as faixas: é o que costura cinco
   fundos diferentes numa seção só. */
.elenco-olho,
.elenco-quem {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
}

.elenco-olho::before,
.elenco-quem::before {
  content: '';
  width: 13px;
  height: 13px;
  border: 2.5px solid currentColor;
  border-radius: 4px;
  background: var(--realce, var(--rosa));
}

.elenco-olho {
  margin-bottom: 16px;
}

.elenco-quem {
  margin-bottom: 14px;
  opacity: 0.78;
}

.elenco-quem--centro {
  display: flex;
  justify-content: center;
}

.elenco-quem--claro {
  opacity: 0.85;
}

/* Grifo de marca-texto: o rosa preenche só o terço de baixo da linha. Bloco
   cheio de rosa atrás de duas linhas de título vira placa de trânsito.
   box-decoration-break: clone é o que dá arredondamento a cada linha — sem
   ele, a segunda sai com um canto reto e parece defeito. */
.elenco-grifo {
  background-image: linear-gradient(to top, transparent 0 15%, var(--rosa) 15% 44%, transparent 44%);
  padding: 0 6px;
  margin-left: -6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* A FRASE. É o objeto principal de três das cinco faixas — 34 a 40px, e nada
   competindo com ela na tela. */
.elenco-frase {
  max-width: 15ch;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.4px;
}

.elenco-titulo-a {
  display: block;
}

.elenco-frase--centro {
  max-width: 24ch;
  margin: 0 auto;
  text-align: center;
}

.elenco-frase--claro {
  color: var(--casca);
}

.elenco-linha {
  max-width: 34ch;
  margin-top: 16px;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.55;
}

.elenco-linha--claro {
  color: var(--casca);
  opacity: 0.84;
}

/* Nome do bicho debaixo do sprite: 13px e ponto final. */
.elenco-nome {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
}

/* ---- 3. FAIXA 1 — A CAPIVARA -------------------------------------------- */

.elenco-um {
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

/* A vaga tem altura fixa e o bicho pendura nela pelo pé: é o que faz a
   capivara ser cortada pela linha da faixa em vez de flutuar. */
.elenco-vaga {
  position: relative;
  height: 374px;
}

.elenco-astro--capivara {
  --esc: 12;
  position: absolute;
  left: 0;
  bottom: -58px;
  display: block;
}

.elenco-um .elenco-frase {
  max-width: 13ch;
}

/* ---- 4. FAIXA 2 — A CORUJA E O CORVO ------------------------------------ */

/* Os dois na mesma tela. Isto não é preferência de composição: a coruja cita
   e o corvo devolve, e uma resposta sem a pergunta do lado não é piada
   nenhuma. Por isso as duas colunas sobrevivem até no telefone. */
.elenco-dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2.6vw, 44px);
  align-items: end;
  margin-top: clamp(26px, 3.2vw, 44px);
}

.elenco-leitor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* O BALÃO. Ele tem traço e sombra dura porque é peça de superfície, como
   card e botão — a regra da casa vale para ele. Fundo de cor porque a faixa
   é casca: balão casca sobre casca é um retângulo invisível. */
.elenco-balao {
  position: relative;
  max-width: 330px;
  margin-bottom: 8px;
  padding: 14px 18px 13px;
  background: var(--gema-clara);
  border: 2.5px solid var(--ameixa);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--ameixa);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

/* O corvo pegou o lado frio da estante, e o balão dele diz isso antes da
   frase dizer. */
.elenco-balao--acido {
  background: var(--azul-claro);
}

.elenco-balao::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  margin-left: -8px;
  width: 15px;
  height: 15px;
  background: inherit;
  border-right: 2.5px solid var(--ameixa);
  border-bottom: 2.5px solid var(--ameixa);
  transform: rotate(45deg);
}

.elenco-balao cite {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0.62;
}

.elenco-astro--ave {
  --esc: 9;
  display: block;
}

.elenco-rodape {
  max-width: 62ch;
  margin: clamp(24px, 2.8vw, 38px) auto 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
  opacity: 0.86;
}

/* ---- 5. FAIXA 3 — O BAIACU ---------------------------------------------- */

/* A pista é do tamanho da JANELA, não da coluna de texto: é o mesmo trajeto
   que ele faz na área de trabalho, de ponta a ponta. */
.elenco-aquario {
  position: relative;
  height: 310px;
  margin-top: clamp(16px, 2vw, 30px);
}

/* O rastro fica ATRÁS do peixe e não pega clique: é cenário, não peça. */
.elenco-rastro {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  width: 100%;
  height: 130px;
  margin-top: -65px;
  opacity: 0.5;
  pointer-events: none;
}

.elenco-peixe {
  --ex: 0px;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50%;
  margin-top: -126px;      /* metade do sprite em escala 7 (252px) */
  transform: translateX(var(--ex));
  transition: transform 0s linear;
  will-change: transform;
}

/* O sobe-e-desce é do CSS e o vai-e-vem é do JS, em camadas separadas: se os
   dois disputassem o mesmo transform, um apagaria o outro. */
.elenco-astro--peixe {
  --esc: 7;
  display: block;
  animation: elenco-boia 3.8s ease-in-out infinite;
}

@keyframes elenco-boia {
  0%, 100% { transform: translateY(-24px) scaleX(var(--dir, 1)); }
  50%      { transform: translateY(24px)  scaleX(var(--dir, 1)); }
}

/* Sem quadro nenhum (captura) ou com movimento reduzido, o peixe fica parado
   onde o JS o deixou, inflado, e a animação de boia não roda. */
.sem-quadros .elenco-astro--peixe {
  animation: none;
  transform: scaleX(var(--dir, 1));
}

/* ---- 6. FAIXA 4 — O MACACO ---------------------------------------------- */

.elenco-quatro {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 76px);
  align-items: center;
}

.elenco-vulto {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 330px;
}

/* O foco de luz. É ele que faz a silhueta preta ter contra o que se recortar:
   preto sobre ameixa, sem esta mancha mais clara atrás, é preto sobre preto. */
.elenco-vulto::before {
  content: '';
  position: absolute;
  width: 460px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, #5c3a69 0%, #4a2f56 34%, rgba(74, 47, 86, 0) 72%);
}

.elenco-astro--vulto {
  --esc: 9;
  position: relative;
  display: block;
  filter: brightness(0);
  opacity: 0.62;
  transition: filter 0.45s ease, opacity 0.45s ease;
}

/* O lampejo: ele aparece por um segundo e some de novo. Não conta o segredo
   — a palavra que desbloqueia o macaco continua não estando nesta página. */
.elenco-faixa--quatro.esta-aceso .elenco-astro--vulto {
  filter: none;
  opacity: 1;
}

/* ---- 7. FAIXA 5 — AS SETE MANIAS ----------------------------------------
   A versão anterior desta faixa era sete sprites do MESMO tamanho, na MESMA
   pose (idle), com o MESMO espaçamento, e um parágrafo embaixo contando por
   escrito o que três deles faziam. Isso é inventário, não elenco — e legenda
   que descreve desenho é confissão de que o desenho não está dizendo nada.

   O que existe aqui agora:

     1. cada bicho no quadro de `special`, a MANIA dele, não o idle;
     2. um adereço desenhado que completa a ação — a nuvem de tinta já solta,
        o milho no chão embaixo do bico, o rastro pontilhado da bola de
        espinhos. É a mesma ideia do rastro tracejado do baiacu: o desenho
        parado tem que provar o movimento sozinho;
     3. escala 3, 4, 5 e 6 (sempre inteira: meio pixel racha a arte) e alturas
        de base diferentes, em duas linhas defasadas — nenhum eixo se repete,
        então o olho lê sete bichos e não sete casas de uma tabela;
     4. nenhum parágrafo. O título diz "cada um tem uma mania só dele" e as
        sete manias estão acontecendo logo abaixo.
   ------------------------------------------------------------------------ */
.elenco-sete {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(22px, 2.6vw, 40px) clamp(14px, 2.2vw, 34px);
  max-width: 1160px;
  margin: clamp(52px, 6vw, 92px) auto 0;
  padding: 0 var(--respiro);
}

/* O degrau de altura é `bottom`, e as duas alternativas foram testadas e
   descartadas: MARGEM empurra o vão entre as duas linhas para baixo junto com
   o item e abre um buraco de 110px no meio da faixa; TRANSFORM é apagado pelo
   `transform: none` do .revelar (e pelo !important do .sem-quadros, que é o
   estado em que a página é fotografada) — o degrau simplesmente não aparecia.
   `bottom` num item relativo desloca sem mexer no layout e não disputa
   propriedade com ninguém.

   O `--ar` reserva, na largura do item, o espaço que o adereço vai ocupar
   fora da caixa do sprite — sem isso a nuvem de tinta do polvo cai em cima do
   pinguim do lado. */
.elenco-mania {
  position: relative;
  bottom: var(--sobe, 0px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 var(--ar-d, 0px) 0 var(--ar-e, 0px);
}

/* A CENA é do tamanho exato do sprite; o adereço sai dela por fora, e é essa
   sobra que faz a gag invadir o rosa em vez de ficar presa numa caixa.

   A escala do item chama-se `--em` e não `--esc` por um motivo que custou uma
   rodada: .bicho DECLARA `--esc: 4` em si mesmo, e propriedade declarada no
   próprio elemento ganha da herdada — um `--esc` posto no <li> nunca chegava
   ao sprite. Então o <li> guarda `--em` e quem repassa para o sprite é a
   regra abaixo. */
.elenco-cena {
  position: relative;
  display: block;
  width: calc(40px * var(--em));
  height: calc(36px * var(--em));
}

.elenco-mania .bicho {
  --esc: var(--em);
  position: relative;
  z-index: 1;
  display: block;
}

/* `max-width: none` não é zelo: o reset da casa põe `svg { max-width: 100% }`,
   e o adereço EXISTE para ser maior que a caixa do sprite. Sem esta linha os
   arcos das asas do pinguim (156% de largura) nasciam com 100% e apareciam
   POR CIMA do bicho em vez de ao lado dele — o que lia como sujeira, não como
   movimento. Foi medido: caixa pedida 187px, caixa entregue 120px. */
.elenco-prop {
  position: absolute;
  z-index: 2;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}

/* O PÉ FALSO. A célula do sprite tem 36px de altura, mas o desenho não a
   preenche igual em todo bicho: o polvo do quadro 14 está em pleno jato e
   deixa 5px de vazio embaixo, o pinguim não deixa nenhum. Sem correção, a
   distância entre o bicho e o nome dele variava de 1px a 31px na mesma linha
   — o olho não mede isso, mas sente como desalinho. O `--pe` sobe o nome pelo
   tanto que o desenho não desceu, e é `top` (não margem) para não encolher o
   item e desmontar o escalonamento de alturas. */
.elenco-mania .elenco-nome {
  position: relative;
  top: calc(-1 * var(--pe, 0px));
}

/* Só estes dois ficam ATRÁS do bicho: tinta e rastro são coisas que ele
   deixou para trás, e passar por cima do corpo dele seria mancha. */
.elenco-prop--tinta,
.elenco-prop--rolo {
  z-index: 0;
}

/* A quebra da linha: um item de largura cheia e altura zero. No telefone ela
   some e os sete voltam a ser uma fila só. */
.elenco-quebra {
  flex-basis: 100%;
  height: 0;
  margin: 0;
}

/* --- os sete, um por um: escala, altura de base, pose de descanso e onde
       fica o adereço. O --quadro daqui é a POSE DE DESCANSO, e é ela que o
       app.js devolve quando a mania termina. --------------------------------- */

/* O aviso de arraste é só do telefone: no desktop a fila é grade e não rola,
   e "arraste" ali seria instrução para um gesto que não existe. Escondido por
   PADRÃO e mostrado na media query — na ordem inversa, quem abrisse a página
   larga veria o aviso piscar antes de o CSS estreito o tirar. */
.elenco-arrasta {
  display: none;
}

.elenco-mania--pintinho { --em: 3; --sobe: 46px; --ar-d: calc(var(--em) * 17px); }
.elenco-mania--pintinho .bicho { --quadro: 13; }         /* bico no chão */
.elenco-prop--milho { left: 30%; bottom: -8%; width: 104%; height: 46%; }

.elenco-mania--polvo { --em: 6; --sobe: 0px; --ar-d: calc(var(--em) * 21px); --pe: calc(var(--em) * 5px); }
.elenco-mania--polvo .bicho { --quadro: 14; }            /* jato, tinta solta */
.elenco-prop--tinta { right: -50%; top: -26%; width: 92%; height: 88%; }

.elenco-mania--pinguim { --em: 3; --sobe: 62px; --ar-e: calc(var(--em) * 10px); --ar-d: calc(var(--em) * 10px); }
.elenco-mania--pinguim .bicho { --quadro: 13; }          /* nadadeira no alto */
.elenco-prop--asas { left: -28%; top: -16%; width: 156%; height: 66%; }

.elenco-mania--caranguejo { --em: 5; --sobe: 18px; --ar-e: calc(var(--em) * 4.4px); --ar-d: calc(var(--em) * 4.4px); --pe: calc(var(--em) * 2px); }
.elenco-mania--caranguejo .bicho { --quadro: 13; }       /* as duas garras abertas */
.elenco-prop--tesoura { left: -8%; top: 4%; width: 116%; height: 32%; }

.elenco-mania--ornitorrinco { --em: 4; --sobe: 34px; --ar-e: calc(var(--em) * 15px); margin-left: clamp(0px, 6.5vw, 94px); }
.elenco-mania--ornitorrinco .bicho { --quadro: 13; }     /* rabo lá em cima */
.elenco-prop--rabada { left: -32%; top: -8%; width: 60%; height: 116%; }

.elenco-mania--equidna { --em: 5; --sobe: 0px; --ar-e: calc(var(--em) * 25px); --pe: calc(var(--em) * 3.5px); }
.elenco-mania--equidna .bicho { --quadro: 14; }          /* bola de espinhos */
.elenco-prop--rolo { left: -62%; bottom: 4%; width: 88%; height: 38%; }

.elenco-mania--cobra { --em: 4; --sobe: 52px; --ar-e: calc(var(--em) * 7px); }
.elenco-mania--cobra .bicho { --quadro: 14; }            /* bote dado, língua fora */
.elenco-prop--bote { left: -16%; top: 4%; width: 60%; height: 34%; }

/* ---- 8. TELAS ESTREITAS ------------------------------------------------- */

@media (max-width: 1040px) {
  .elenco-um {
    grid-template-columns: 340px minmax(0, 1fr);
  }

  .elenco-astro--capivara {
    --esc: 8;
    bottom: -40px;
  }

  .elenco-vaga {
    height: 250px;
  }

  .elenco-astro--ave {
    --esc: 7;
  }

  .elenco-balao {
    font-size: 15px;
  }

  .elenco-astro--peixe {
    --esc: 6;
  }

  .elenco-peixe {
    margin-top: -108px;
  }

  .elenco-aquario {
    height: 260px;
  }

  .elenco-astro--vulto {
    --esc: 7;
  }

  .elenco-vulto {
    min-height: 260px;
  }

  .elenco-vulto::before {
    width: 260px;
    height: 230px;
  }

  /* As manias descem um degrau de escala cada, mas a DIFERENÇA entre elas
     sobrevive: se todas caírem para o mesmo número, a fila reta volta.
     Os números foram medidos, não escolhidos: a primeira linha tem quatro
     itens e precisa caber inteira até 760px, que é onde a fila vira rolagem.
     Um item a mais do que cabe não encolhe — cai sozinho numa terceira
     linha, e caranguejo órfão no meio da faixa lê como defeito. */
  .elenco-mania--polvo,
  .elenco-mania--equidna { --em: 4; }
  .elenco-mania--caranguejo,
  .elenco-mania--cobra,
  .elenco-mania--ornitorrinco { --em: 3; }
  .elenco-mania--pintinho,
  .elenco-mania--pinguim { --em: 2; }
  .elenco-mania--ornitorrinco { margin-left: clamp(0px, 5vw, 70px); }
}

@media (max-width: 760px) {
  .elenco-faixa {
    padding: clamp(40px, 9vw, 60px) 0;
  }

  /* A FILA é a faixa mais apertada das cinco no telefone, e por isso é a única
     que abre mão do respiro comum: ela não tem parágrafo nem cena grande, tem
     um aviso de arraste e uma pista de 171px que precisa começar perto da
     frase que a explica. Medido a 390: com o clamp de cima a faixa dava 516px
     de altura; com este, 24px a menos. */
  .elenco-faixa--cinco {
    padding: clamp(28px, 7vw, 44px) 0;
  }

  .elenco-faixa--um,
  .elenco-faixa--tres {
    padding-bottom: 0;
  }

  /* A capivara passa a abrir a tela por cima da frase: em coluna estreita,
     bicho ao lado de texto deixa os dois pequenos e nenhum dos dois vence. */
  .elenco-um {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .elenco-vaga {
    order: 2;
    height: 214px;
  }

  .elenco-astro--capivara {
    --esc: 7;
    bottom: -38px;
  }

  .elenco-um .elenco-frase,
  .elenco-frase {
    max-width: 18ch;
  }

  .elenco-quatro {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .elenco-vulto {
    order: 2;
    min-height: 210px;
  }

  .elenco-astro--vulto {
    --esc: 6;
  }

  .elenco-vulto::before {
    width: 220px;
    height: 200px;
  }

  /* Os dois leitores CONTINUAM lado a lado. É a única coisa desta seção que
     não pode empilhar: empilhado, o corvo responde a uma frase que já saiu
     da tela, e aí ele não está respondendo nada. */
  .elenco-dupla {
    gap: 10px;
    align-items: end;
  }

  .elenco-astro--ave {
    --esc: 5;
  }

  .elenco-balao {
    padding: 10px 12px 10px;
    border-radius: 14px;
    font-size: 12.5px;
    line-height: 1.35;
  }

  .elenco-balao cite {
    font-size: 11px;
  }

  .elenco-astro--peixe {
    --esc: 5;
  }

  .elenco-peixe {
    margin-top: -90px;
  }

  .elenco-aquario {
    height: 220px;
  }

  @keyframes elenco-boia {
    0%, 100% { transform: translateY(-16px) scaleX(var(--dir, 1)); }
    50%      { transform: translateY(16px)  scaleX(var(--dir, 1)); }
  }

  /* Sete manias não cabem em 390px de largura: em vez de quebrar em 3+3+1,
     as duas linhas voltam a ser UMA e ela rola de lado. */
  .elenco-sete {
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: none;
    /* A FILA COLA NA FRASE QUE A ENSINA. O margin de cima é clamp(52px…) e
       valia para a GRADE, que é uma composição centrada num campo largo;
       aqui é uma pista que rola, e quem manda nela é o aviso "arraste para
       ver os sete" logo acima. Medido a 390: 52px de margem + 34px de respiro
       interno + os 51px que a pista sobra por cima dos dois bichos menores
       (o polvo é quem dá os 171px de altura) punham o primeiro bicho a 137px
       do aviso — 27% da faixa em rosa liso entre a instrução e o que ela
       instrui. Com 10 + 16 são 77px. */
    margin-top: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* 14 e não 20: cada 6px de vão economizado vira 6px a mais do terceiro
       bicho dentro da tela, e o terceiro bicho cortado é o sinal de "a fila
       anda". Com 20 sobravam 64px de polvo; com 14, 74px. */
    gap: 14px;
    /* O respiro de cima e o de baixo não são estética: overflow-x liga o
       corte no eixo Y também, e sem eles o milho do pintinho e os riscos das
       garras do caranguejo — que saem da caixa do sprite — seriam decepados.
       16 em cima e não 34: medido item a item, quem mais sobe acima da própria
       caixa é o pinguim, com 11px; os 34 estavam dimensionados pela nuvem do
       polvo, que subia 37 — e ela é justamente a que fica fora da tela.
       Endireitada a nuvem (logo abaixo), 16 cobrem os 11 com folga de 5 e
       devolvem 18px de rosa vazio à distância entre o aviso e a fila. */
    padding: 16px var(--respiro) 20px;
    -webkit-overflow-scrolling: touch;
    /* A barra de rolagem some (barra cinza atravessada numa faixa rosa é
       sujeira) e o fim da fila ESMAECE em vez de ser cortado a prumo pela
       borda da tela. Bicho serrado ao meio na margem lê como defeito de
       layout; bicho que se dissolve lê como "tem mais, arrasta". */
    scrollbar-width: none;
    /* A RAMPA COMEÇA DEPOIS DE O TERCEIRO BICHO JÁ TER APARECIDO.
       Medido a 390px (faixa de 357): o terceiro item entra em 79% da faixa e
       mostra 74px de polvo — 46% do corpo dele. A rampa antiga abria em 80%
       e, antes dela, em 74%: nos dois casos ela caia em cima do bicho desde a
       primeira coluna de pixel, e o que sobrava na borda era um borrão
       magenta que lê como sujeira, não como bicho cortado. Agora são 45px em
       opacidade cheia — polvo reconhecível — e só os últimos 29px se
       dissolvem. A dissolução continua sendo o ponto: bicho serrado a prumo na
       margem lê como defeito de layout. */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 92%, rgba(0, 0, 0, 0.45) 98%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 92%, rgba(0, 0, 0, 0.45) 98%, transparent 100%);
  }

  /* DEPOIS DO PRIMEIRO ARRASTO A ESQUERDA TAMBÉM ESMAECE. Parado no início ela
     não pode: o pintinho é o primeiro da fila e apagar a cara dele seria
     estragar a abertura por causa de um problema que ainda não existe. Quem
     põe a classe é o mesmo ouvinte de rolagem que acende os pontinhos.
     Existe porque a máscara de um lado só tinha um efeito colateral medido: na
     parada de encaixe do caranguejo (scrollLeft 434), a NUVEM DE TINTA do
     polvo ocupa 88px dos 357 da pista — a mancha mais escura e de maior
     contraste da faixa — e ficava serrada a prumo na margem esquerda, com 8px
     de polvo atrás dela. Ou seja: exatamente o defeito que o comentário aqui
     em cima diz evitar, só que do outro lado. */
  .elenco-sete.rolou {
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.45) 2%, #000 8%, #000 92%, rgba(0, 0, 0, 0.45) 98%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.45) 2%, #000 8%, #000 92%, rgba(0, 0, 0, 0.45) 98%, transparent 100%);
  }

  /* A ORDEM MUDA NO TELEFONE, e é a única saída que não custa arte. Medido a
     390px: pintinho (114px) + polvo (244px) já estouram os 357px de faixa, e o
     terceiro bicho começa fora da tela — nada aparece cortado, e sem corte
     ninguém descobre que a fila anda. Encolher o polvo até caberem três
     custaria 40% do maior bicho da faixa, que é grande justamente porque a gag
     dele é a maior. Trocar a ordem custa zero: pintinho e pinguim (os dois
     estreitos) entram inteiros, e o polvo passa a ser o terceiro — cortado a
     91px dos 244, começando pelo corpo, com a nuvem dele para fora da tela.
     No desktop nada disto vale: lá é grade, e a composição original fica. */
  .elenco-mania--pintinho { order: 1; }
  .elenco-mania--pinguim  { order: 2; }
  .elenco-mania--polvo    { order: 3; }
  .elenco-mania--caranguejo { order: 4; }
  .elenco-mania--ornitorrinco { order: 5; }
  .elenco-mania--equidna  { order: 6; }
  .elenco-mania--cobra    { order: 7; }

  /* A NUVEM DO POLVO DESCE. Ela é o único adereço que sobe acima da caixa do
     bicho — 37px, contra 11 do pinguim — e era ela, sozinha, que obrigava a
     pista a ter 34px de respiro no topo. No telefone ela nem aparece: o polvo
     é o terceiro item, entra em 79% da pista e a nuvem fica à direita dele,
     fora da tela. Baixar o topo dela de -26% para -4% não muda um pixel do
     que se vê e tira 3px de estouro vertical que a pista já tinha (com
     overflow-x: auto, estouro em Y vira rolagem vertical dentro da pista). */
  .elenco-prop--tinta { top: -4%; }

  /* --- o indicador de arraste --- */
  /* SEM VÉU NO TEXTO. Esta é a única frase da página que ensina um gesto: se
     ela não for lida, ninguém descobre que existem sete. A 0,72 de opacidade
     a ameixa sobre o rosa dava 3,1:1 — abaixo do piso de 4,5 — e sumia
     primeiro numa tela ao sol. Cheia dá 4,81:1. O tom de "isto é indicação,
     não título" continua sendo dado pelos PONTOS, que têm a opacidade deles
     logo abaixo, e pelo corpo de 12,5px. */
  .elenco-arrasta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px 0 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ameixa);
  }

  .elenco-pontos {
    display: inline-flex;
    gap: 5px;
  }

  .elenco-pontos i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ameixa);
    opacity: 0.28;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .elenco-pontos i.aceso {
    opacity: 1;
    transform: scale(1.45);
  }

  .elenco-conta {
    font-variant-numeric: tabular-nums;
  }

  .elenco-sete::-webkit-scrollbar {
    display: none;
  }

  /* A quebra da grade não existe aqui: é uma fila só. */
  .elenco-quebra {
    display: none;
  }

  .elenco-mania {
    flex: none;
    scroll-snap-align: center;
    gap: 9px;
    /* O escalonamento das alturas continua, com metade da amplitude: a fila
       do telefone é mais curta e o degrau inteiro jogaria o pinguim para
       fora da pista. */
    bottom: calc(var(--sobe, 0px) * 0.45);
  }

  .elenco-mania--ornitorrinco {
    margin-left: 0;
  }

  /* As escalas já vêm do bloco de 1040px — aqui muda o LAYOUT, não o tamanho.
     Só o equidna desce mais um: a bola de espinhos vem com um rastro largo do
     lado, e numa pista de 390px ela sozinha ocupava meia tela. */
  .elenco-mania--equidna { --em: 3; }
}

/* ...até aqui. FIM DA ZONA ELENCO. */

/* ###########################################################################
   ZONA: RECURSOS        id="recursos" prefixo: rec-*      faixa: casca
   ---------------------------------------------------------------------------
   O que ele faz de verdade: agenda (Google / Outlook / .ics), passeio entre
   monitores sem atrapalhar ícone, água, foco, expediente, XP e skins, as 638
   citações da coruja e do corvo, a animação-assinatura de cada bicho.
   Escreva daqui...
   ########################################################################### */

/* A seção inteira é uma PILHA DE QUATRO FAIXAS, uma ideia em cada uma, e elas
   alternam campo claro e campo de cor cheia — é o ritmo que a barra (arc.net)
   usa e é o que impede a página de virar parede de texto. Por isso a seção
   larga o próprio respiro: quem dá o ar agora é cada faixa. */
#recursos {
  padding: 0;
}

.rec-tela {
  padding: clamp(54px, 6vw, 88px) 0;
  border-top: var(--traco) solid var(--ameixa);
}

.rec-tela--casca { background: var(--casca); }
.rec-tela--gema  { background: var(--gema-clara); }

/* Faixa de cor cheia. Ela reescreve o realce porque rosa sobre rosa some. */
.rec-tela--rosa {
  background: var(--rosa);
  --realce: var(--amarelo);
  --btn-bg: var(--amarelo);
  --btn-cor: var(--ameixa);
  border-bottom: var(--traco) solid var(--ameixa);
}

#recursos .olho {
  color: var(--rosa);
  margin-bottom: 12px;
}

/* Amarelo sobre rosa dá 1,9 de contraste: em rótulo de 13px, isso é uma
   mancha, não um texto. Sobre a faixa de cor o chapéu volta a ser ameixa.
   O #recursos no seletor não é enfeite: sem ele esta regra tem duas classes
   contra o id da regra de cima, perde, e o chapéu sai rosa sobre rosa — some
   por completo. Era o que acontecia nas duas faixas de cor cheia. */
#recursos .rec-tela--rosa .olho {
  color: var(--ameixa);
  opacity: 0.75;
}

/* CABEÇALHO EM BARRA — para as faixas cuja demonstração é larga demais para
   dividir a tela com o texto (o passeio e o XP).
   Não é centrado, e isso é decisão, não descuido: um bloco centrado de título
   + parágrafo come 280px de altura antes da primeira imagem, e três faixas
   seguidas com esse mesmo bloco viram gabarito. Em barra, título de um lado e
   a ÚNICA linha de apoio do outro, o cabeçalho inteiro cabe na altura do
   título — e a demonstração, que é o argumento, sobe para dentro da tela. */
.rec-cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  align-items: end;
  column-gap: clamp(24px, 4vw, 56px);
  margin-bottom: clamp(26px, 3vw, 40px);
}

/* O bloco chapéu + título. Vive sozinho porque no telefone ele sobe para
   antes da demonstração e a linha de apoio desce para depois. */
.rec-cabeca-t {
  min-width: 0;
}

/* A LINHA DE APOIO. Uma só, no máximo doze palavras, alinhada com o título.
   Tudo o que era parágrafo e não coube aqui virou chip ou virou rótulo colado
   na demonstração — onde a frase legenda uma prova em vez de atrasá-la. */
.rec-frase {
  max-width: 46ch;
  margin-top: 16px;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 600;
  line-height: 1.5;
}

.rec-cabeca .rec-frase {
  margin-top: 0;
  padding-bottom: 6px;
}

/* Coluna de texto das faixas de duas colunas. */
.rec-texto {
  min-width: 0;
  align-self: center;
}

/* Quebra de linha escolhida a dedo: sem ela o título de duas linhas termina
   com uma palavra órfã, e órfã em título de 46px é buraco, não respiro.
   Em tela estreita ela sai do caminho e a linha volta a quebrar sozinha. */
.rec-quebra { display: inline; }

@media (max-width: 860px) {
  .rec-quebra { display: none; }
}

/* Duas colunas: texto de um lado, demonstração do outro. A demonstração leva
   a fatia maior — é ela que tem de ser lida de longe. */
.rec-duas {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(26px, 3.4vw, 46px);
  align-items: center;
}

/* NÃO EXISTE LISTA DE PÍLULAS NESTA SEÇÃO, e a ausência é a regra.
   Cada tela tem cinco objetos e só: chapéu, título, uma frase, uma
   demonstração e uma legenda encostada nela. O que era chip de recurso
   ("lembra da água", "conta os pomodoros", "307 de literatura") entrou no
   mock como estado de verdade — linha do dia, contador na aba do arquivo.
   Recurso em pílula é promessa; recurso dentro da demonstração é prova, e
   ainda por cima não deixa um chão de dezenove bolinhas de texto solto.

   RÓTULO — a única pílula que sobra por tela: a legenda que TOCA a coisa que
   explica, encostada nela ou ligada por uma linha de chamada curta. Legenda a
   150px do objeto com uma seta apontando para o vazio é enfeite, não legenda. */
.rec-rotulo {
  margin: 0;
  background: var(--casca);
  border: 2.5px solid var(--ameixa);
  border-radius: var(--pilula);
  box-shadow: 3px 3px 0 var(--ameixa);
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

/* BALÃO DE FALA — o mesmo do app (src/renderer/pet.css): casca, traço de 3px,
   canto de 20px, sombra dura e um rabinho de DUAS camadas (a de baixo é o
   traço, a de cima é o preenchimento, 5px acima). Sem as duas camadas o
   triângulo nasce sem contorno e destoa de toda peça do sistema. */
.rec-balao {
  position: relative;
  max-width: 320px;
  background: var(--casca);
  border: var(--traco) solid var(--ameixa);
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: var(--sombra);
}

.rec-balao::before,
.rec-balao::after {
  content: '';
  position: absolute;
  left: var(--rabo, 50%);
  border: 9px solid transparent;
  transform: translateX(-50%);
}

.rec-balao::before {
  bottom: -18px;
  border-top-color: var(--ameixa);
}

.rec-balao::after {
  bottom: -13px;
  border-top-color: var(--casca);
}

/* Rabinho DE LADO, para quando o bichinho fica à esquerda do balão em vez de
   embaixo. Deitado assim o par ocupa 120px de altura em vez de 230 — foi o que
   permitiu o aviso descer para o pé da coluna de texto sem empurrar a faixa. */
.rec-balao--lado::before,
.rec-balao--lado::after {
  top: 24px;
  bottom: auto;
  left: auto;
  transform: none;
}

.rec-balao--lado::before {
  right: 100%;
  margin-right: -2px;
  border-right-color: var(--ameixa);
}

.rec-balao--lado::after {
  right: 100%;
  margin-right: -7px;
  border-right-color: var(--casca);
}

/* ---------- FAIXA 1: a agenda ---------- */

.rec-cena--agenda {
  display: flex;
  flex-direction: column;
}

/* O cartão do dia e o rótulo que sai por baixo dele. */
.rec-quadro {
  position: relative;
}

.rec-rotulo--dia {
  position: absolute;
  left: 24px;
  bottom: -15px;
  z-index: 2;
  background: var(--amarelo);
}

/* O AVISO ACONTECENDO, no pé da coluna de texto. Antes ele pendurava embaixo
   do cartão e o canto de baixo à esquerda da tela ficava vazio; aqui ele fecha
   o quadrante e ainda encosta a fala do bichinho no parágrafo que a promete. */
.rec-aviso {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: clamp(26px, 3vw, 38px);
}

.rec-avisador {
  --esc: 4;
  flex: none;
  margin-top: 6px;
}

/* A margem negativa come o vazio transparente da moldura do sprite (o pinguim
   pinta ~112px dos 160 do quadro). Sem ela o balão perde 24px de largura para
   um nada, e "Reunião com o cliente" — que no app é uma linha só — quebra em
   duas dentro da demonstração. */
.rec-aviso .rec-balao {
  margin-left: -22px;
  padding: 13px 15px;
  max-width: 330px;
}

.rec-dia {
  padding: 22px 22px 20px;
}

.rec-dia-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 2px dashed var(--ameixa);
}

.rec-dia-nome {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 21px;
}

.rec-eventos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.rec-ev {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--raio-peq);
}

/* já passou: continua na lista, mas sai da frente */
.rec-ev--feito {
  opacity: 0.5;
}

/* AS LINHAS QUE SÃO IDEIA DELE — água, foco, fim de expediente. Eram três
   chips de recurso empilhados debaixo do parágrafo; aqui são compromissos de
   verdade no dia de verdade, e a hora vem em gema clara em vez de azul para
   separar o que veio do calendário do que veio do bichinho. */
.rec-ev--dele .rec-hora {
  background: var(--gema-clara);
}

.rec-ev--dele .rec-ev-corpo small {
  color: var(--rosa);
  opacity: 1;
}

.rec-ev--proximo {
  background: var(--rosa-claro);
  border: 2.5px solid var(--ameixa);
  box-shadow: 3px 3px 0 var(--ameixa);
}

/* A duração, encostada na direita. Existe por dois motivos: é o que o .ics
   traz de verdade (todo evento tem começo e fim), e sem ela a linha do
   compromisso morre no meio de um cartão de 600px e o cartão parece um
   rascunho em vez de uma agenda. */
.rec-dur {
  margin-left: auto;
  flex: none;
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

.rec-hora {
  flex: none;
  background: var(--azul);
  border: 2px solid var(--ameixa);
  border-radius: var(--pilula);
  padding: 1px 10px;
  font-size: 13px;
  font-weight: 700;
}

.rec-ev-corpo b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.rec-ev-corpo small {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0.7;
}

/* A linha do "agora": é ela que faz a lista virar um relógio. */
.rec-agora {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--rosa);
}

.rec-agora::before {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rosa);
  border: 2px solid var(--ameixa);
}

.rec-agora::after {
  content: '';
  flex: 1;
  border-top: 2px dashed var(--rosa);
}

.rec-balao-titulo {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 15px;
  color: var(--rosa);
  margin-bottom: 8px;
}

.rec-balao-ev {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.rec-pilula-hora {
  flex: none;
  background: var(--azul);
  border: 2px solid var(--ameixa);
  border-radius: var(--pilula);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
}

.rec-balao-nota {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
}

/* ---------- FAIXA 2: o passeio ---------- */

.rec-monitores {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(16px, 3vw, 38px);
  padding: 34px 0 46px;
}

.rec-monitor {
  position: relative;   /* âncora da legenda do clique */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Cresceram 12% quando o chão de pílulas saiu debaixo deles. A altura que
   sobrou virou desenho, e não vão. */
.rec-monitor--a { width: 60%; }
.rec-monitor--b { width: 29%; }

.rec-vidro {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 14px;
  background: var(--casca);
  border: var(--traco) solid var(--ameixa);
  border-radius: 16px;
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}

.rec-pescoco {
  width: 15%;
  height: 18px;
  background: var(--casca);
  border-left: var(--traco) solid var(--ameixa);
  border-right: var(--traco) solid var(--ameixa);
}

.rec-base {
  width: 42%;
  height: 13px;
  background: var(--casca);
  border: var(--traco) solid var(--ameixa);
  border-radius: var(--pilula);
}

.rec-icones {
  display: grid;
  grid-template-columns: repeat(2, 92px);
  gap: 10px;
}

/* Os dois ícones da tela pequena ficam LADO A LADO, e não empilhados: em
   coluna eles ocupavam o vidro inteiro de cima a baixo, e o caminho da
   capivara tinha de entrar riscando o nome de um deles ao meio. Numa fileira
   só, a metade de baixo da área de trabalho fica livre — que é por onde um
   bicho que anda no chão entra. */
.rec-icones--b {
  grid-template-columns: repeat(2, 80px);
}

.rec-icone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 7px 4px 5px;
  border: 2.5px solid transparent;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

/* A prova de que o clique atravessa está AQUI: o bichinho tem
   pointer-events: none, então passar o mouse em cima dele acende o ícone que
   está embaixo. A página faz o que a frase promete. */
.rec-icone:hover,
.rec-icone--sob {
  border-color: var(--ameixa);
  background: var(--gema-clara);
}

.rec-icone--sob {
  box-shadow: 3px 3px 0 var(--ameixa);
}

.rec-pasta {
  position: relative;
  width: 32px;
  height: 25px;
  background: var(--amarelo);
  border: 2.5px solid var(--ameixa);
  border-radius: 5px;
}

.rec-pasta::before {
  content: '';
  position: absolute;
  top: -9px;
  left: -2.5px;
  width: 15px;
  height: 9px;
  background: var(--amarelo);
  border: 2.5px solid var(--ameixa);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

.rec-doc {
  position: relative;
  width: 24px;
  height: 30px;
  background: var(--casca);
  border: 2.5px solid var(--ameixa);
  border-radius: 4px;
}

.rec-doc::before,
.rec-doc::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  background: var(--ameixa);
  opacity: 0.55;
}

.rec-doc::before { top: 7px; }
.rec-doc::after  { top: 14px; }

/* O CAMINHO. Duas linhas em cima do mesmo traçado:
     --fantasma  tracejada e apagada, o passeio inteiro, para onde ela vai;
     --feita     cheia, só o pedaço já andado, e termina SEMPRE nos pés dela.
   A segunda é o que salva a figura parada: numa fotografia, uma linha que
   morre exatamente no pé do bicho diz "ela veio de lá" — coisa que tracejado
   nenhum, sozinho, consegue dizer. Quem move o corte é o app.js, pelo
   stroke-dasharray. */
.rec-trilha {
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  bottom: 46px;
  z-index: 5;
  color: var(--ameixa);
  pointer-events: none;
}

/* non-scaling-stroke mantém o traço em 3px mesmo com a caixa esticada. */
.rec-rota--fantasma { opacity: 0.26; }

/* as pegadas são cheias, e por isso o caminho pode ser fraco: quem tem de
   saltar aos olhos é a marca do pé, não o mapa */
.rec-pegadas { fill: currentColor; }

/* A CAMADA — a janela do bichinho na sua mesa. Cobre os dois monitores E o vão
   entre eles: é o que permite a capivara sair de uma tela e entrar na outra
   passando por cima da moldura, como ela faz de verdade. */
.rec-camada {
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  bottom: 46px;
  z-index: 6;
  pointer-events: none;   /* é o recurso, não é enfeite */
}

/* A capivara é posicionada em PIXELS pelo app.js (--px/--py medidos sobre os
   monitores de verdade, não em porcentagem chutada), com os pés no ponto.
   --vira troca o lado para onde ela olha; entra no mesmo transform porque um
   elemento só tem um, e a espelhada precisa andar. Os valores abaixo são a
   pose de partida: em pé na pasta "Projetos", que é onde ela fica sem JS. */
.rec-passeia {
  --esc: 3;
  --vira: -1;
  position: absolute;
  /* pose sem JS: em pé na pasta "Projetos". Em porcentagem do left/top, que é
     medida sobre a CENA; a porcentagem dentro de um translate() seria medida
     sobre o próprio bicho, que é outra coisa e daria noutro lugar. Quando o
     app.js mede a cena ele zera estes dois e passa a mandar em --px/--py, em
     pixel — transform sozinho não força recálculo de layout a cada quadro. */
  left: 18%;
  top: 72%;
  transform: translate(var(--px, 0px), var(--py, 0px)) translate(-50%, -100%) scaleX(var(--vira));
}

/* O cursor fica POR CIMA da capivara e parado em cima da pasta: ele é o SEU
   mouse, não o dela. É a figura inteira do argumento num ponto só — a seta na
   barriga do bicho, e quem acende é o ícone de trás. */
.rec-cursor {
  position: absolute;
  left: 14%;
  top: 76%;
  width: 30px;
  height: 30px;
  z-index: 8;
  color: var(--ameixa);
}

/* A ONDA DO CLIQUE — some sozinha. Só aparece no instante em que a capivara
   pisa na pasta: o clique sai do cursor, atravessa o bicho e acerta o ícone. */
/* O anel nasce na PONTA da seta, não no canto da caixa dela — daí a margem
   negativa. As mesmas coordenadas do cursor, com o desconto do raio. */
.rec-onda {
  position: absolute;
  left: 14%;
  top: 76%;
  width: 22px;
  height: 22px;
  margin: -9px 0 0 -6px;
  border: 3px solid var(--ameixa);
  border-radius: 999px;
  opacity: 0;
  z-index: 7;
}

.rec-onda--bate { animation: rec-bate 620ms ease-out; }

@keyframes rec-bate {
  0%   { opacity: 0.95; transform: scale(0.3); }
  100% { opacity: 0;    transform: scale(2.7); }
}

/* e a pasta responde ao clique que passou por dentro dela */
.rec-icone--clicado { animation: rec-acende 520ms ease-out; }

@keyframes rec-acende {
  0%, 100% { background: var(--gema-clara); }
  22%      { background: var(--amarelo); }
}

/* ---------- FAIXA 3: as 638 frases ---------- */

/* ESPELHO da faixa 1: a demonstração à ESQUERDA, o texto à direita.
   As colunas são quase iguais agora, e é por causa do TÍTULO: numa coluna de
   0,88fr ele caía em três linhas e a segunda terminava num travessão órfão.
   Com 1fr ele fecha em duas linhas cheias. */
.rec-leitura {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 48px);
  align-items: center;
}

.rec-fonte {
  position: relative;
  min-width: 0;
}

/* Encostada na borda de baixo do cartão, montada em cima dela. Não tem seta:
   seta só se presta quando há para onde apontar, e o que esta legenda explica
   está exatamente atrás dela. */
.rec-rotulo--arquivo {
  position: absolute;
  left: 26px;
  bottom: -15px;
  z-index: 2;
  background: var(--amarelo);
}

.rec-poleiro {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(22px, 3vw, 32px);
}

.rec-poleiro .rec-balao {
  max-width: 340px;
}

.rec-citacao {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
}

.rec-balao--citacao {
  transition: opacity 0.18s ease;
}

.rec-balao--citacao.rec-trocando {
  opacity: 0.35;
}

.rec-citacao::before { content: '“'; }
.rec-citacao::after  { content: '”'; }

.rec-autor {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.7;
}

/* 30% maior do que era: a coruja é o objeto-herói desta faixa e estava do
   tamanho de um ícone. */
.rec-leitor {
  --esc: 5;
  margin-top: 18px;
}

.rec-arquivo {
  padding: 0;
  overflow: hidden;
}

.rec-abas {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--rosa-claro);
  border-bottom: var(--traco) solid var(--ameixa);
}

/* flex: none + nowrap — sem os dois o contador desce para uma segunda linha
   dentro da aba e o cabeçalho do arquivo dobra de altura. */
.rec-aba {
  flex: none;
  white-space: nowrap;
  border: 2.5px solid var(--ameixa);
  border-radius: var(--pilula);
  background: transparent;
  padding: 4px 13px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.rec-aba--ativa {
  background: var(--casca);
  box-shadow: 3px 3px 0 var(--ameixa);
}

/* O tamanho do arquivo, na aba — que é onde um editor de texto o poria.
   Eram dois chips soltos no fim do parágrafo ("307 de literatura", "331 de
   filosofia"); aqui a mesma contagem é estado do mock. */
.rec-aba-n {
  display: inline-block;
  margin-left: 3px;
  padding: 0 7px;
  border-radius: var(--pilula);
  background: var(--gema-clara);
  border: 2px solid var(--ameixa);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.rec-aba--ativa .rec-aba-n {
  background: var(--amarelo);
}

.rec-caminho {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  opacity: 0.6;
}

.rec-linhas {
  counter-reset: linha;
  padding: 14px 16px 6px;
}

.rec-linha {
  counter-increment: linha;
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 6px 9px;
  border: 2.5px solid transparent;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.rec-linha::before {
  content: counter(linha);
  flex: none;
  width: 18px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0.45;
}

/* A linha que está na boca da ave. Ela e o balão andam juntos: é isso que
   prova que a fala sai DO ARQUIVO. */
.rec-linha--acesa {
  background: var(--amarelo);
  border-color: var(--ameixa);
  box-shadow: 3px 3px 0 var(--ameixa);
  font-weight: 700;
}

.rec-linha--acesa::before {
  opacity: 0.75;
}

.rec-arquivo-pe {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 14px;
  border-top: 2.5px dashed var(--ameixa);
  margin: 8px 14px 0;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
}

.rec-conta {
  flex: none;
  white-space: nowrap;
  border: 2px solid var(--ameixa);
  border-radius: var(--pilula);
  padding: 1px 10px;
  font-size: 12px;
  font-weight: 700;
}

.rec-cursor-texto {
  display: inline-block;
  width: 9px;
  height: 15px;
  margin-left: 3px;
  vertical-align: -3px;
  background: var(--ameixa);
  animation: rec-pisca 1.15s steps(1, end) infinite;
}

/* 70% aceso: a captura é de uma janela travada e uma piscada meio a meio
   sairia apagada na foto tanto quanto acesa. */
@keyframes rec-pisca {
  0%, 70% { opacity: 1; }
  71%, 100% { opacity: 0; }
}

/* ---------- FAIXA 4: XP e as 24 skins ---------- */

.rec-regua {
  padding: 30px 26px 26px;
}

.rec-trilho {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-bottom: 44px;
}

.rec-trilho::before {
  content: '';
  position: absolute;
  left: 16.66%;
  right: 16.66%;
  bottom: 14px;
  height: 14px;
  background: var(--gema-clara);
  border: 2.5px solid var(--ameixa);
  border-radius: var(--pilula);
}

.rec-enchido {
  position: absolute;
  left: 16.66%;
  bottom: 14px;
  width: 33.34%;
  height: 14px;
  background: var(--rosa);
  border: 2.5px solid var(--ameixa);
  border-radius: var(--pilula);
  z-index: 1;
}

.rec-fase {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.rec-fase::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--casca);
  border: 3px solid var(--ameixa);
  z-index: 3;
}

/* degrau já vencido: o pino pinta de rosa junto com a barra */
.rec-fase--1::after,
.rec-fase--2::after {
  background: var(--rosa);
}

.rec-fase b {
  font-family: var(--f-titulo);
  font-size: 18px;
  font-weight: 800;
  margin-top: 6px;
}

.rec-fase small {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.65;
}

/* A escala mora aqui, não no atributo style do HTML: --esc inline vence
   media query, e aí o adulto fura o cartão na tela do telefone. */
.rec-fase--1 .ovo    { --esc: 5; }
.rec-fase--2 .bicho  { --esc: 2; }
.rec-fase--3 .bicho  { --esc: 4; }

/* O OVO GANHA O CONTORNO QUE A ARTE NÃO TEM. Medida a tira (sprites/ovo.png):
   ela é dois tons de creme e NADA mais — #fff3bf no corpo, #f2d16b nos dois
   pixels de sombra — sem o traço ameixa que todos os bichos têm baked in.
   Sobre a casca do cartão isso dá 1,06:1: o primeiro degrau da régua, que é
   justamente o "0 XP" de onde a história parte, desaparecia no aperto de
   olhos enquanto o filhote e o adulto (que têm traço na arte) ficavam. Não é
   cor nova nem arte nova: são quatro sombras de um pixel de ARTE — daí o
   --esc no cálculo, para o contorno engrossar junto com o desenho e continuar
   sendo um pixel, e não meio. Só aqui: nas outras faixas o ovo está sobre
   rosa ou amarelo e se separa sozinho. */
#recursos .rec-fase--1 .ovo {
  filter:
    drop-shadow(calc(var(--esc) * 1px) 0 0 var(--ameixa))
    drop-shadow(calc(var(--esc) * -1px) 0 0 var(--ameixa))
    drop-shadow(0 calc(var(--esc) * 1px) 0 var(--ameixa))
    drop-shadow(0 calc(var(--esc) * -1px) 0 var(--ameixa));
}

.rec-pontos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 2.5px dashed var(--ameixa);
  font-size: 14px;
  font-weight: 600;
}

.rec-pontos li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.rec-pontos b {
  font-family: var(--f-titulo);
  font-size: 15px;
  font-weight: 800;
  background: var(--gema-clara);
  border: 2px solid var(--ameixa);
  border-radius: var(--pilula);
  padding: 0 9px;
}

/* Encostada na parede de cores, sem folga: a sombra dura cai dentro da grade e
   os dois viram uma peça só. Legenda que paira a 14px do que explica ainda é
   uma pílula solta. */
.rec-rotulo--skins {
  display: inline-block;
  position: relative;
  z-index: 2;
  margin-top: 22px;
  margin-left: 8px;
  background: var(--amarelo);
}

/* A MESMA CAPIVARA TRÊS VEZES. Isto substituiu uma grade de 24 fichas com um
   quadradinho de cor em cada: aquilo era um catálogo, e catálogo não
   demonstra. Ninguém olha um retângulo #d8a367 e enxerga uma capivara cor de
   areia; olhando as três capivaras lado a lado, o "é o mesmo bicho de roupa
   nova" se lê em um segundo e sem legenda.
   Fileira e não grade: três coisas em linha comparam-se; 24 em grade
   inventariam-se. */
.rec-peles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* 12 e não 28 no vão de lado, e é o que faz a PRIMEIRA comparação existir.
     Medidos os corpos: padrão #b8714b (L 0,246), areia #d8a367 (L 0,414),
     cacau #6d4028 (L 0,092) — o degrau padrão→areia é de 1,57:1 e o
     areia→cacau, de 3,14:1. Um degrau de 1,57 lê-se de sobra quando os dois
     corpos se encostam e não se lê quando há 28px de casca (L 0,98) entre
     eles: fundo mais claro que os dois some com a diferença dos dois. Cartela
     de tinta, não três exemplares expostos. */
  gap: 8px 12px;
  margin: 6px 0 0;
  padding: 18px 12px 14px;
  background: var(--casca);
  border: 2.5px solid var(--ameixa);
  border-radius: 16px;
}

/* A escala mora AQUI e não no atributo style de cada uma das três: inline
   vence folha de estilo por origem, e com ela no HTML o telefone não tinha
   como encolher a fileira sem !important. */
#rec-xp .rec-pele .bicho {
  --esc: 5;
}

.rec-pele {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.rec-pele b {
  font-family: var(--f-titulo);
  font-size: 14px;
  font-weight: 800;
  margin-top: 4px;
}

.rec-pele small {
  font-size: 11px;
  font-weight: 700;
  border: 2px solid var(--ameixa);
  border-radius: var(--pilula);
  padding: 0 8px;
  background: var(--gema-clara);
}

/* o último custa mais e o selo diz isso sem precisar de palavra */
.rec-pele:last-child small {
  background: var(--rosa-claro);
}

/* A VARIEDADE. Oito bichinhos pequenos vestidos, sem nome debaixo: nome em
   oito miniaturas vira legenda, e legenda vira o catálogo de novo. O bloco
   existe para dizer "isto vale para todos", não para ser lido item a item. */
.rec-mostruario {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  /* vão apertado e escala 2 nos bichinhos: os oito mais o contador precisam
     caber numa FILEIRA Única. A 3× eles davam 1058px dentro de um cartão de
     950 e quebravam sete em cima e dois embaixo — e dois bichinhos órfãos
     numa segunda linha leem como sobra, não como coleção. */
  gap: 10px;
  margin: 12px 0 0;
  /* A PRATELEIRA PRECISA DE PRATELEIRA. `align-items: flex-end` alinha as
     caixas, não os pés: com oito silhuetas de larguras e alturas muito
     diferentes (o baiacu deitado, o polvo em bolo) e nada por baixo, o
     conjunto lia como mancha e não como coleção arrumada. O fio é o mesmo
     rgba(53,33,61,0.22) do risco que separa o contador aqui do lado — não é
     cor nova, é a régua desta fileira — e os 9px de respiro dão o degrau que
     transforma "oito coisas alinhadas por baixo" em "oito coisas EM CIMA de
     alguma coisa". */
  padding: 0 0 9px;
  border-bottom: 2.5px solid rgba(53, 33, 61, 0.22);
  list-style: none;
}

/* `:not(.rec-tantas)` é obrigatório, e custou uma rodada: com `display: flex`
   no <li> do contador, os nós de texto viram itens de flex anônimos e o <br>
   entre eles deixa de quebrar — saía "24 coresduas para cada bichinho" numa
   linha só, colado. O contador continua sendo bloco de texto comum. */
.rec-mostruario li:not(.rec-tantas) {
  display: flex;
  align-items: flex-end;
}

/* A TRAVADA é o macaco, e ele continua sendo segredo: dá para ver que existe
   um décimo segundo, não quem ele é. `brightness(0)` zera a cor e deixa o
   canal alfa em paz — sai a silhueta exata do sprite, sem contorno inventado.

   O SEGREDO PRECISA DE UM SINAL, senão é defeito. Silhueta preta a 34% no fim
   de uma fileira de bichos coloridos não lê como "este ainda não": lê como
   imagem que não carregou — e imagem quebrada numa página de download é a
   pior coisa que se pode mostrar. Então a vaga é DESENHADA: moldura
   tracejada (a mesma linguagem do rodapé do .md ali em cima, que também usa
   traço interrompido para dizer "isto não é conteúdo, é marcação") e uma
   interrogação por cima. Tracejado e não cheio porque a vaga está vazia; e
   nada aqui é cor nova. */
.rec-travada {
  position: relative;
  padding: 2px 7px 0;
  border: 2px dashed rgba(53, 33, 61, 0.45);
  border-radius: 10px;
}

.rec-travada::after {
  content: '?';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-titulo);
  font-size: 21px;
  font-weight: 800;
  color: var(--ameixa);
  /* a silhueta continua legível por baixo: a interrogação diz o que a vaga é,
     não tapa o que ela guarda. */
  opacity: 0.7;
}

.rec-travada .bicho {
  filter: brightness(0);
  opacity: 0.34;
}

/* O número fecha a fileira em vez de flutuar como pílula solta: quem está ao
   lado de oito bichinhos vestidos lê "24" como promessa, e não como dado.
   Chama-se `tantas` e não `conta` porque `.rec-conta` já existe nesta seção
   — é o "+300 linhas" da maquete de frases, lá em cima — e as duas regras
   se atropelaram: o mostruário herdou o estilo do outro número. */
.rec-tantas {
  align-self: center;
  border-left: 2.5px solid rgba(53, 33, 61, 0.22);
  padding-left: 14px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  opacity: 0.8;
}

.rec-tantas b {
  display: block;
  font-family: var(--f-titulo);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  opacity: 1;
}

/* ---------- TELA ESTREITA ---------- */

@media (max-width: 980px) {
  .rec-mostruario {
    gap: 8px 10px;
  }
}

@media (max-width: 860px) {
  /* A ORDEM NO TELEFONE: título → demonstração → a linha de apoio → chips.
     A demonstração é o argumento inteiro; deixá-la depois da prosa a empurra
     para fora da primeira tela, e aí a pessoa rola para conhecer o produto em
     vez de rolar porque já se convenceu.
     display: contents dissolve as colunas de desktop (.rec-texto, .rec-cabeca)
     e devolve os pedaços à pilha, que então os reordena um a um. */
  #recursos .rec-pilha {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .rec-cabeca,
  .rec-texto {
    display: contents;
  }

  .rec-cabeca-t     { order: 1; }
  .rec-demo         { order: 2; margin-top: 24px; }
  .rec-poleiro      { order: 3; }
  .rec-aviso        { order: 3; }
  .rec-frase        { order: 4; margin-top: 26px; padding-bottom: 0; }

  /* A pilha cabe numa coluna de leitura; só os dois desenhos largos (os
     monitores e a parede de skins) usam a faixa inteira.
     Os pedaços vêm listados um a um de propósito: display: contents apaga a
     CAIXA de .rec-texto, não o seu lugar na árvore, então um seletor de filho
     direto da pilha não alcança o que estava dentro dela — e o título ficaria
     largo enquanto o cartão ficava estreito, desalinhados. */
  #recursos .rec-cabeca-t,
  #recursos .rec-frase,
  #recursos .rec-aviso,
  #recursos .rec-demo,
  #recursos .rec-poleiro {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }

  /* Os dois desenhos largos usam a faixa inteira: os monitores porque são
     dois, e a régua porque a parede de skins mora dentro dela. */
  #recursos .rec-monitores,
  #recursos .rec-regua {
    max-width: none;
  }

  .rec-cabeca { margin-bottom: 0; }

  .rec-poleiro .rec-balao {
    max-width: 100%;
  }

  /* Os dois monitores continuam lado a lado mesmo no telefone: são DOIS, e
     empilhar destrói justamente a frase que a figura sustenta. */
  .rec-monitor--a { width: 64%; }
  .rec-monitor--b { width: 30%; }

  .rec-vidro { padding: 10px; border-radius: 12px; }

  .rec-icones { grid-template-columns: repeat(2, 68px); gap: 7px; }
  .rec-icone { font-size: 9.5px; padding: 5px 2px 4px; }
  /* três ícones no telefone, e um deles é o que está DEBAIXO do bichinho —
     esconder o aceso seria esconder a demonstração inteira */
  .rec-icone:nth-child(3),
  .rec-icone:nth-child(4) { display: none; }
  .rec-icones--b .rec-icone:nth-child(n + 2) { display: none; }
  .rec-icones--b { grid-template-columns: 68px; }

  /* No telefone a capivara encolhe para caber na área de trabalho — o passeio
     continua igual: quem mede o caminho é o app.js, sobre os monitores de
     verdade, então ele acompanha sozinho a tela menor. */
  .rec-passeia { --esc: 2; }
  .rec-cursor { width: 22px; height: 22px; }

  /* A fileira nunca vira grade: a escala desce um degrau de cada vez para as
     três continuarem na MESMA linha. Medido, a caixa das peles tem
     largura ≈ janela − 123: a escala 5 (600px de corpo + vãos) precisa de 636
     e só cabe acima de ~780; a 4 pede 512; a 3, 392. */
  #rec-xp .rec-peles { flex-wrap: nowrap; gap: 8px 16px; }
  #rec-xp .rec-pele .bicho { --esc: 4; }
}

@media (max-width: 660px) {
  #rec-xp .rec-peles { gap: 6px 16px; }
  #rec-xp .rec-pele .bicho { --esc: 3; }
}

@media (max-width: 560px) {
  /* tela mais quadrada: o bichinho de 80px não cabe numa faixa de 16/9 com
     200px de largura */
  .rec-vidro { aspect-ratio: 4 / 3; }
  .rec-monitor--a { width: 66%; }
  .rec-monitor--b { width: 29%; }

  .rec-dia-nome { font-size: 17px; }
  .rec-dia-topo .chip { font-size: 12px; padding: 4px 11px; }
  .rec-ev { padding: 6px 8px; }

  /* O aviso continua deitado no telefone — o balão de lado é o que garante que
     ele caiba na largura sem virar três linhas de fala. Só o bichinho encolhe. */
  .rec-avisador { --esc: 3; }
  .rec-aviso .rec-balao { max-width: none; }
  .rec-leitor { margin-right: 0; --esc: 4; }
  .rec-poleiro .rec-balao { --rabo: 50%; }

  .rec-rotulo { font-size: 11.5px; padding: 4px 12px; }
  .rec-rotulo--dia { left: 14px; bottom: -14px; }

  /* O arquivo encolhe para caber inteiro na primeira tela junto com o título:
     é ele a prova desta faixa, e prova cortada ao meio não prova nada. */
  .rec-abas { padding: 9px 11px; gap: 6px 8px; flex-wrap: wrap; }
  .rec-aba { padding: 3px 11px; font-size: 12px; }
  /* O caminho não cabe na mesma linha das duas abas; em vez de espremer, ele
     desce inteiro — quebra escolhida em vez de quebra sofrida. */
  .rec-caminho { width: 100%; margin-left: 0; font-size: 10.5px; }
  .rec-linhas { padding: 10px 11px 4px; }
  .rec-linha { font-size: 12.5px; padding: 4px 7px; gap: 8px; line-height: 1.35; }
  .rec-arquivo-pe { padding: 9px 12px 11px; margin: 6px 11px 0; font-size: 12px; }

  .rec-regua { padding: 22px 16px 18px; }
  .rec-fase b { font-size: 15px; }
  .rec-fase--1 .ovo   { --esc: 3; }
  .rec-fase--2 .bicho { --esc: 2; }
  .rec-fase--3 .bicho { --esc: 3; }

  /* AS TRÊS CAPIVARAS FICAM NA MESMA LINHA, e é a única forma de o bloco
     cumprir o que promete: "três coisas em linha comparam-se" está escrito na
     regra da fileira lá em cima, e no telefone o layout contradizia a própria
     regra. Medido a 390 (miolo de 357): a escala 5 dá 200px por capivara, as
     três não cabem, o flex-wrap quebrava UMA POR LINHA e o cartão ia a 1600px
     de altura — uma capivara por rolagem, nunca duas ao mesmo tempo, e sem
     duas ao mesmo tempo não existe comparação nenhuma.
     A escala 2 dá 80px de corpo; medida a ficha inteira a 390, quem manda na
     largura não é a capivara e sim a pílula de XP embaixo dela (88px) —
     3 × 88 + 2 × 8 de vão + 10 de respiro = 290px dentro dos 295 da caixa. */
  #rec-xp .rec-peles { flex-wrap: nowrap; gap: 6px 8px; padding: 14px 5px 12px; }
  #rec-xp .rec-pele .bicho { --esc: 2; }
  #rec-xp .rec-pele b { font-size: 12.5px; }
  #rec-xp .rec-pele small { font-size: 10px; padding: 0 5px; }

  .rec-tantas { border-left: 0; padding-left: 0; text-align: center; }
}

/* Telefone pequeno (o de 320): três corpos de 80px somam 240 e a caixa das
   peles tem 225 de miolo — não cabe por 18px, e escala 1 devolveria uma
   capivara de 40px que ninguém identifica. Então o cartão cede metade do
   respiro lateral (16 -> 8, que também para de deixar o pintinho adulto
   estourar 16px por cima da borda) e a fileira SANGRA os 8 que sobraram, com
   os vãos zerados: as três encostam, que é como cartela de tinta se lê mesmo.
   Medido a 320: 252 de miolo para 240 de capivara. */
@media (max-width: 380px) {
  #recursos .rec-regua {
    padding-left: 8px;
    padding-right: 8px;
  }

  #rec-xp .rec-peles {
    margin-left: -8px;
    margin-right: -8px;
    gap: 6px 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ...até aqui. FIM DA ZONA RECURSOS. */

/* ###########################################################################
   ZONA: MOVIMENTO       id="movimento" prefixo: mov-*     faixa: azul claro
   ---------------------------------------------------------------------------
   Esta peça tem DOIS lugares: a seção #movimento e a camada transversal
   .palco (que já existe no HTML, cobrindo a página inteira e sem pegar
   clique). O que for passear pela página inteira mora no palco; o que for
   demonstração mora na seção.
   Escreva daqui...
   ########################################################################### */

/* Os sprites desta seção são blocos: `.bicho` é um <span> e, solto, seria
   inline — width/height não pegariam e o pixel art racharia. */
#movimento .bicho,
.mov-costura .bicho {
  display: block;
}

/* A escala mora AQUI, não num style="--esc:3" no HTML: estilo em linha ganha
   de media query, e o bichinho ficaria do tamanho de tela grande no telefone. */
.mov-andarilho .bicho,
.mov-truque-palco .bicho,
.mov-costura .bicho {
  --esc: 3;
}

/* --- cabeça da seção ---
   Uma coluna só. A segunda existia para a pílula "Role a página devagar", que
   saiu com a duplicação: agora que a caminhada acontece uma vez só, a seção não
   tem mais de avisar que ela é a de verdade. O que sobrou é a medida de leitura
   — 30ch no título, 58ch no parágrafo — e o vazio à direita, que agora é ar e
   não um buraco esperando enfeite. */
.mov-cabeca {
  display: grid;
  justify-items: start;
}

.mov-cabeca .olho       { color: var(--realce); }
.mov-cabeca h2          { margin: 10px 0 18px; max-width: 30ch; }

/* `pretty` só para não deixar a última linha virar uma palavra sozinha — foi o
   que aconteceu com "nada." pendurada na terceira linha. É a única propriedade
   desta zona que mexe em layout, e ela roda uma vez, no layout, nunca por
   quadro de rolagem. */
.mov-cabeca .linha-fina {
  max-width: 54ch;
  text-wrap: pretty;
}

/* --- A MESA: duas telas e um bichinho por cima das duas --- */
.mov-figura {
  margin-top: 42px;
}

.mov-mesa {
  background: var(--casca);
  border: var(--traco) solid var(--ameixa);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-alta);
  padding: 20px;
}

.mov-telas {
  position: relative;
  display: grid;
  grid-template-columns: 1.42fr 1fr;
  gap: 22px;
  height: 344px;
}

.mov-tela {
  position: relative;
  overflow: hidden;
  background: var(--azul-claro);
  border: var(--traco) solid var(--ameixa);
  border-radius: 16px;
}

.mov-tela-nome {
  position: absolute;
  top: 9px;
  left: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.42;
}

/* Duas colunas de ícones em cada monitor, encostadas à esquerda: o resto da
   tela fica vazio de propósito, que é onde o bichinho anda e onde o aviso
   abre sem tapar arquivo de ninguém. */
.mov-icones {
  display: grid;
  grid-template-columns: repeat(2, 88px);
  align-items: start;
  gap: 16px 18px;
  padding: 34px 0 0 20px;
}

/* Hover que responde — e que prova o argumento: o ícone reage mesmo com o
   bichinho por cima, porque a camada dele não pega o ponteiro. */
.mov-icone {
  display: grid;
  justify-items: center;
  gap: 7px;
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.mov-icone:hover {
  transform: translateY(-4px);
}

.mov-icone-caixa {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: var(--casca);
  border: 2.5px solid var(--ameixa);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ameixa);
  transition: box-shadow 0.15s ease;
}

.mov-icone:hover .mov-icone-caixa {
  box-shadow: 5px 5px 0 var(--ameixa);
}

.mov-icone-nome {
  max-width: 88px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   O CLIQUE QUE ATRAVESSA — a pasta, o anel e a seta
   ---------------------------------------------------------------------------
   Três peças para uma frase só: "ele nunca fica na frente". A frase estava
   escrita no parágrafo, e frase é o que qualquer folheto tem. Aqui ela
   acontece: a seta afunda DENTRO da capivara e quem acende é a pasta atrás
   dela.

   A pasta fica no chão do desktop e no caminho do bichinho — não na fileira de
   ícones lá em cima, que ele nunca cruza. `left: 41%` e não um número em pixel
   porque o monitor 1 é uma fração de grid e muda de largura com a janela; a
   posição do clique quem mede é o JS, lendo esta caixa.
   --------------------------------------------------------------------------- */
/* A ALTURA É O TRUQUE, e ela custou uma captura para ser achada. Com a pasta
   no chão do desktop, o bichinho — 120px de largura contra 54px de caixa — a
   engolia inteira: sobrava um fio amarelo em cima do lombo e a cena não
   provava nada, porque não dava para ver O QUE tinha acendido. Empurrada para
   cima, a caixa fica com metade acima do lombo (legível, e acesa) e metade
   atrás dele (que é o que faz o desenho dizer "ela está EMBAIXO do bicho").
   A seta então cai na metade escondida: ponta na pasta, corpo deitado em cima
   da capivara. É o quadro inteiro num gesto só. */
.mov-alvo {
  position: absolute;
  left: 55%;
  bottom: 59px;
  width: 88px;
}

/* O nome fica onde nome de ícone fica: EMBAIXO da caixa. Ele passa metade do
   tempo escondido atrás do bichinho, e isso não é defeito — é a cena. Nos
   outros nove décimos da travessia, quando ele já passou, a pasta volta a ser
   um ícone comum de desktop com o nome dela. Subir o nome para cima da caixa
   deixava tudo legível o tempo todo e destruía justamente a coisa que a figura
   existe para dizer. */

/* O ANEL. Nasce do tamanho da caixa e cresce para fora, uma vez por clique.
   Sem blur e sem preenchimento — é o traço da identidade se abrindo, o mesmo
   gesto de uma sombra dura que ganhou vida. */
.mov-alvo-anel {
  position: absolute;
  top: 0;
  left: 50%;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  border: 2.5px solid var(--rosa);
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
}

/* A PASTA ACESA. Amarelo ovo sobre o azul claro do desktop: o único elemento
   da cena que muda de cor, e por isso o olho vai nele sem que nada pisque.
   Traço e glifo continuam ameixa — dois tons no elemento, nunca os três. */
.mov-clique .mov-alvo .mov-icone-caixa {
  background: var(--amarelo);
  box-shadow: 5px 5px 0 var(--ameixa);
  transform: translate(-1px, -1px);
}

.mov-clique .mov-alvo-anel {
  animation: mov-anel 620ms cubic-bezier(0.2, 0.75, 0.35, 1);
}

@keyframes mov-anel {
  0%   { opacity: 0.95; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.85); }
}

/* A SETA. Mora na camada do bichinho e DEPOIS dele, porque na sua mesa o
   ponteiro do mouse é desenhado acima de qualquer janela — inclusive da dele.
   O JS a põe sobre a pasta; o `left`/`bottom` daqui é só o lugar decente de
   quem chegou sem JS. */
.mov-cursor {
  position: absolute;
  left: 28%;
  bottom: 88px;
  z-index: 2;
  width: 32px;
  height: 32px;
  pointer-events: none;
}

/* A transição mora no <svg> de dentro, nunca no <span> de fora: o `transform`
   de fora é a POSIÇÃO que o JS escreve, e uma transição ali faria a seta
   deslizar do canto da mesa até a pasta no primeiro quadro, sozinha. */
.mov-cursor svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 18% 10%;   /* a ponta da seta: é ela que fica parada */
  transition: transform 0.11s cubic-bezier(0.3, 0.9, 0.4, 1);
  filter: drop-shadow(2px 2px 0 rgba(53, 33, 61, 0.28));
}

/* apertar é seco e curto — o mesmo gesto do :active dos botões da página. */
.mov-clique .mov-cursor svg {
  transform: scale(0.84);
}

/* O SELO. Nomeia o que aconteceu, no instante em que acontece, e some depois.
   O JS o pendura em cima da pasta — bem acima do lombo do bichinho, para nunca
   ficar atrás dele, e longe o bastante dos ícones da fileira para não ser lido
   como legenda da Lixeira, que foi o que aconteceu na primeira tentativa. */
.mov-selo {
  position: absolute;
  left: 55%;
  bottom: 196px;
  z-index: 2;
  padding: 4px 13px 5px;
  background: var(--ameixa);
  border-radius: var(--pilula);
  color: var(--casca);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-46%, 6px);
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.2, 1.3, 0.4, 1);
}

.mov-clique .mov-selo {
  opacity: 1;
  transform: translate(-46%, 0);
}

/* glifos: desenhados com traço, sem imagem e sem fonte de ícone.
   As três linhas do documento saem de uma sombra sólida repetida — sem blur,
   como manda a identidade. */
.mov-glifo--doc {
  position: relative;
  width: 21px;
  height: 26px;
  border: 2.5px solid var(--ameixa);
  border-radius: 3px;
}

.mov-glifo--doc::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 3px;
  right: 3px;
  height: 2px;
  background: var(--ameixa);
  box-shadow: 0 5px 0 var(--ameixa), 0 10px 0 var(--ameixa);
}

.mov-glifo--pasta {
  position: relative;
  width: 27px;
  height: 20px;
  border: 2.5px solid var(--ameixa);
  border-radius: 3px;
}

.mov-glifo--pasta::before {
  content: '';
  position: absolute;
  top: -9px;
  left: -2.5px;
  width: 13px;
  height: 7px;
  border: 2.5px solid var(--ameixa);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

.mov-glifo--lixo {
  position: relative;
  width: 20px;
  height: 22px;
  border: 2.5px solid var(--ameixa);
  border-radius: 2px 2px 6px 6px;
}

.mov-glifo--lixo::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -5px;
  width: 26px;
  height: 0;
  border-top: 2.5px solid var(--ameixa);
}

.mov-barra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  background: var(--casca);
  border-top: 2.5px solid var(--ameixa);
  font-size: 11px;
  font-weight: 700;
}

.mov-quadrado {
  width: 14px;
  height: 14px;
  border: 2px solid var(--ameixa);
  border-radius: 4px;
}

.mov-relogio {
  margin-left: auto;
  letter-spacing: 0.04em;
}

/* A CAMADA — cobre as duas telas e o vão entre elas, e não pega clique.
   É o app inteiro num parágrafo de CSS. */
.mov-camada {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mov-andarilho {
  position: absolute;
  left: 0;
  bottom: 27px;      /* medido: a barra de tarefas começa a 33px do fundo e a tira
                        tem 2 linhas vazias sob os pés (6px na escala 3). */
  will-change: transform;
}

/* sem JS ele não anda; então nasce já no meio da travessia, atravessando o vão
   entre os dois monitores, que é a cena que a seção promete. */
html:not(.com-js) .mov-andarilho {
  left: 52%;
}

.mov-pata {
  display: block;
  position: relative;   /* âncora fixa do balãozinho "carinho?" */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.mov-pata:hover,
.mov-pata:focus-visible {
  transform: translateY(-7px);
}

.mov-dica-pata {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 12px;
  background: var(--casca);
  border: 2.5px solid var(--ameixa);
  border-radius: var(--pilula);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.mov-pata:hover .mov-dica-pata,
.mov-pata:focus-visible .mov-dica-pata {
  opacity: 1;
}

.mov-coracao {
  position: absolute;
  left: 50%;
  top: 4px;
  font-size: 22px;
  line-height: 1;
  color: var(--rosa);
  opacity: 0;
  pointer-events: none;
}

.mov-andarilho--carinho .mov-coracao,
.mov-costura-pet--carinho .mov-coracao {
  animation: mov-sobe 950ms ease-out;
}

@keyframes mov-sobe {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -42px) scale(1.2); }
}

/* O AVISO. Aparece quando o bichinho chega perto do fim da travessia — a
   página não conta que ele avisa: ela deixa ele avisar. */
/* O aviso ACOMPANHA o bichinho: o rabinho cai sempre em cima dele, como no
   app. O eixo faz a viagem lateral, o balão faz o pop — cada caixa com uma
   transformação só. */
.mov-balao-eixo {
  position: absolute;
  left: 0;
  bottom: 168px;
  width: 246px;
  will-change: transform;
}

html:not(.com-js) .mov-balao-eixo {
  left: 24%;
}

.mov-balao {
  position: relative;
  padding: 14px 17px 15px;
  background: var(--casca);
  border: var(--traco) solid var(--ameixa);
  border-radius: 20px;
  box-shadow: var(--sombra);
  pointer-events: none;
}

.mov-balao::after {
  content: '';
  position: absolute;
  right: 26px;
  bottom: -12px;
  width: 16px;
  height: 16px;
  background: var(--casca);
  border-right: var(--traco) solid var(--ameixa);
  border-bottom: var(--traco) solid var(--ameixa);
  border-radius: 0 0 5px 0;
  transform: rotate(45deg);
}

.com-js .mov-balao {
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  transform-origin: 82% 112%;
  transition: opacity 0.26s ease, transform 0.36s cubic-bezier(0.2, 1.35, 0.4, 1);
}

.com-js .mov-balao--visivel {
  opacity: 1;
  transform: none;
}

/* traço ameixa sobre rosa dá 4,83 — passa no AA; casca sobre rosa não passaria
   num chip deste tamanho. */
#movimento .mov-balao-chip {
  color: var(--ameixa);
}

.mov-balao-titulo {
  display: block;
  margin-top: 9px;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.15;
}

.mov-balao-txt {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.mov-legenda {
  max-width: var(--coluna-texto);
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

.mov-legenda em {
  font-style: normal;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--rosa);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* --- OS TRUQUES --- */
.mov-truques {
  margin-top: 62px;
}

.mov-truques-titulo {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(24px, 2.9vw, 33px);
  line-height: 1.15;
}

.mov-truques-sub {
  max-width: var(--coluna-texto);
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
}

.mov-truques-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 26px;
}

.mov-truque {
  display: block;
  width: 100%;
  height: 100%;
  padding: 18px 22px 22px;
  text-align: left;
  background: var(--casca);
  border: var(--traco) solid var(--ameixa);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.16s ease;
}

.mov-truque:hover,
.mov-truque:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: var(--sombra-alta);
}

.mov-truque:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ameixa);
}

/* palco de altura fixa: o sprite troca de pose sem empurrar o texto de baixo */
.mov-truque-palco {
  display: grid;
  place-items: center;
  height: 108px;
  margin-bottom: 10px;
}

.mov-truque-nome {
  display: block;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
}

.mov-truque-txt {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   A COSTURA — a emenda entre duas seções vira o corredor do bichinho.

   ANTES ele morava na camada fixa .palco, ancorado no rodapé da JANELA. Isso
   parece bom por um segundo e é ruim o resto do tempo: a faixa de baixo da
   janela é conteúdo em quase toda a rolagem, e o bichinho passava por cima de
   parágrafo, entrava na borda de card e sentava no diagrama do XP. Medido em
   três posições: em y=3400 ele tapava duas linhas de corpo de texto; em 4300
   plantava um pintinho ao lado do estágio "Ovo"; em 6300 comia a arte do
   Corvo. Nenhum enfeite vale duas linhas de texto ilegíveis.

   AGORA ele está ancorado ao DOCUMENTO, numa pista que existe só para ele: a
   emenda entre duas seções. A pista tem a cor da faixa de cima e a linha
   ameixa que já separava as duas faixas passa a ser o CHÃO dele. Ou seja, ela
   não inventa uma faixa nova — ela dá ar ao fim da faixa que já estava lá e
   põe um bicho andando na costura. Não existe pixel de conteúdo por baixo: a
   colisão deixou de ser um risco a administrar e virou impossível.
   --------------------------------------------------------------------------- */
.mov-costura {
  position: relative;
  /* Só o que o bichinho precisa para caber em pé, e nem um pixel a mais: a
     faixa de cima já termina com o respiro dela, e somar dois respiros faz a
     página parecer que esqueceu de pôr alguma coisa ali. */
  height: clamp(104px, 8.8vw, 126px);
  background: var(--mov-costura-fundo, var(--rosa));
  border-bottom: var(--traco) solid var(--ameixa);
}

/* A caixa que faz a viagem lateral. Só transform se mexe aqui. */
.mov-costura-pet {
  position: absolute;
  left: 0;
  bottom: -6px;   /* a tira tem 2 linhas vazias sob os pés: 6px na escala 3 */
  will-change: transform;
}

.mov-costura-pata {
  display: block;
  position: relative;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.mov-costura-pata:hover {
  transform: translateY(-7px);
}

.mov-costura-dica {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 12px;
  background: var(--casca);
  border: 2.5px solid var(--ameixa);
  border-radius: var(--pilula);
  font-size: 12px;
  font-weight: 700;
  color: var(--ameixa);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.mov-costura-pata:hover .mov-costura-dica {
  opacity: 1;
}

/* O coração do carinho é rosa no chão comum; sobre uma pista rosa ele
   sumiria. A pista herda o --realce da faixa de cima, que é exatamente a cor
   que aquela faixa já usa para destacar. */
.mov-costura .mov-coracao {
  color: var(--realce, var(--rosa));
}

/* DENTRO da caixa do bichinho, e não 4px para fora dela. Fora, o "zzz" era o
   pixel mais à direita do documento inteiro quando o bicho chegava ao fim da
   pista: `scrollWidth` 1411 contra `clientWidth` 1407, medido — ou seja, uma
   barra de rolagem HORIZONTAL na página toda por causa de três letrinhas de
   sono. Colado por dentro, a cena é a mesma e o documento para de escorrer. */
.mov-costura-zzz {
  position: absolute;
  right: 3px;
  top: -4px;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--ameixa);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.mov-costura-pet--dorme .mov-costura-zzz {
  opacity: 0.5;
  animation: mov-bocejo 3s ease-in-out infinite;
}

/* O RASTRO — pegadas atrás dele, no chão da pista.
   O desenho fica parado; o que anda é o CORTE (clip-path), então o quadradinho
   nunca estica. É o que transforma a pista de faixa vazia em caminho andado:
   a pessoa vê de onde ele veio, e a distância percorrida é a própria medida da
   rolagem que ela fez. */
.mov-costura-rastro {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 5px;
  background-image: repeating-linear-gradient(
    90deg, var(--ameixa) 0 5px, transparent 5px 21px);
  opacity: 0.28;
  clip-path: inset(0 100% 0 0);
}

@keyframes mov-bocejo {
  0%, 100% { transform: translateY(0);    opacity: 0.3; }
  50%      { transform: translateY(-8px); opacity: 0.8; }
}

/* --- tela estreita --- */
@media (max-width: 860px) {
  .mov-cabeca h2,
  .mov-cabeca .linha-fina {
    max-width: none;
  }

  /* A mesa encolhe, e com ela some a segunda fileira de ícones: numa tela
     desta largura o aviso é quase tão alto quanto o monitor, e duas fileiras
     só existiriam para ficar escondidas atrás dele. */
  .mov-telas {
    gap: 14px;
    height: 300px;
  }

  .mov-icones {
    grid-template-columns: repeat(2, 66px);
    gap: 12px 14px;
    padding: 26px 0 0 14px;
  }

  /* some a segunda fileira — mas nunca a pasta do chão, que não é fileira: é
     o alvo do clique, e sem ela a cena perde o argumento inteiro. */
  .mov-icone:nth-child(n + 3):not(.mov-alvo) {
    display: none;
  }

  /* A mesma conta da tela grande, refeita nos números daqui: o bichinho cai
     para --esc 2 (72px de altura) e a caixa para 46px, então a altura da pasta
     tem de descer junto ou ela sai inteira por cima do lombo dele. */
  .mov-alvo {
    left: 46%;
    bottom: 52px;
    width: 66px;
  }

  .mov-alvo-anel {
    width: 46px;
    height: 46px;
    margin-left: -23px;
  }

  .mov-selo {
    bottom: 120px;
    padding: 3px 10px 4px;
    font-size: 11px;
  }

  .mov-icone-caixa {
    width: 46px;
    height: 46px;
  }

  .mov-icone-nome {
    max-width: 66px;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mov-andarilho {
    bottom: 29px;
  }

  .mov-andarilho .bicho,
  .mov-truque-palco .bicho {
    --esc: 2;
  }

  .mov-balao-eixo {
    bottom: 108px;
    width: 210px;
  }

  .mov-balao {
    padding: 11px 14px 12px;
  }

  .mov-balao-titulo {
    font-size: 16px;
  }

  .mov-balao-txt {
    display: none;
  }

  .mov-balao::after {
    right: 24px;
  }

  .mov-truques-lista {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mov-truque {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 16px;
    align-items: center;
    padding: 16px 20px;
  }

  .mov-truque-palco {
    grid-row: span 2;
    height: 84px;
    margin: 0;
  }

  .mov-truque-nome {
    align-self: end;
  }

  .mov-truque-txt {
    align-self: start;
  }
}

@media (max-width: 560px) {
  .mov-mesa {
    padding: 12px;
  }

  /* No telefone os dois monitores viram do mesmo tamanho: com a proporção de
     tela grande o segundo ficava estreito demais e comia o nome do arquivo. */
  .mov-telas {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    height: 314px;   /* medido: 14px a mais é o que separa o aviso do rótulo */
  }

  .mov-icones {
    grid-template-columns: repeat(2, 56px);
    gap: 10px 8px;
    padding: 26px 0 0 10px;
  }

  .mov-icone-caixa {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  /* uma linha só, cortada com reticências — é o que o Windows faz, e é o que
     impede o rótulo de crescer para baixo e bater no aviso. */
  .mov-icone-nome {
    max-width: 56px;
    font-size: 9px;
  }

  .mov-glifo--doc  { width: 16px; height: 20px; }
  .mov-glifo--doc::before { top: 3px; box-shadow: 0 4px 0 var(--ameixa); }
  .mov-glifo--pasta { width: 21px; height: 16px; }
  .mov-glifo--lixo  { width: 16px; height: 17px; }

  .mov-balao-eixo {
    width: 172px;
  }

  .mov-balao::after {
    right: 20px;
  }

}

/* A pista encolhe junto com o bichinho. A escala do sprite é INTEIRA (3 → 2):
   pixel art em escala quebrada racha, e um bichinho rachado estraga mais a
   página do que um bichinho pequeno. */
@media (max-width: 720px) {
  .mov-costura {
    height: clamp(86px, 13vw, 108px);
  }

  .mov-costura .bicho {
    --esc: 2;
  }

  .mov-costura-pet {
    bottom: -4px;   /* 2 linhas vazias sob os pés, agora na escala 2 */
  }

  .mov-costura-rastro {
    bottom: 7px;
    background-image: repeating-linear-gradient(
      90deg, var(--ameixa) 0 4px, transparent 4px 16px);
  }
}

/* ...até aqui. FIM DA ZONA MOVIMENTO. */

/* ###########################################################################
   ZONA: FECHO           id="fecho"    prefixo: fecho-*    faixa: rosa
   ---------------------------------------------------------------------------
   O último empurrão e o download: Windows, grátis, sem senha de
   administrador. Esta peça também é dona do .rodape.
   Escreva daqui...
   ########################################################################### */

/* Dois blocos e nada mais: a CHAMADA (foco único, o botão) e o AVISO (a
   verdade sobre o SmartScreen). Um fecho com três coisas para clicar não é um
   fecho. Empilhados em tela estreita; lado a lado de 1100px para cima, para
   que a verdade não fique a uma rolagem de distância do botão. */
/* a última faixa respira menos embaixo que as outras de propósito: nada vem
   depois dela a não ser o rodapé, e um vão grande ali faz o rodapé parecer
   solto em vez de fechar a página. */
#fecho {
  padding-bottom: clamp(52px, 6vw, 84px);
}

.fecho-miolo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(38px, 4.4vw, 58px);
}

.fecho-chamada {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* O NINHO — a moldura do bichinho da despedida. Altura fixa: o pulinho não
   pode empurrar o título para baixo. */
.fecho-ninho {
  display: grid;
  place-items: center;
  min-height: 152px;
}

.fecho-bicho {
  --esc: 4;
  transform-origin: 50% 100%;
}

/* dois pulinhos: quando a seção aparece, e de novo toda vez que o mouse
   encosta no botão de baixar. É a única coisa da seção que responde a gesto,
   e ela aponta para o botão. */
.fecho-bicho--pula {
  animation: fecho-pula 0.42s ease-in-out 2;
}

@keyframes fecho-pula {
  0%, 100% { transform: translateY(0) scaleY(1); }
  22%      { transform: translateY(0) scaleY(0.88); }
  55%      { transform: translateY(-16px) scaleY(1.06); }
}

.fecho-olho {
  opacity: 0.78;
  letter-spacing: 0.15em;
}

/* sem max-width: quem decide a quebra é o balance, que reparte as linhas em
   vez de largar "um?" órfão na segunda — uma pergunta com a última palavra
   sozinha perde a piada. */
/* Entre o título de seção e a manchete, e NESSA ORDEM: é a última pergunta da
   página e divide a tela com um painel, então empatar com os títulos do meio
   (46px) tirava dela o ar de fecho. Só que estava em 56 contra os 53 da
   manchete do herói — o maior tipo da página era a despedida, e a página
   gritava mais alto no fim do que na entrada. 50px põe cada um no seu lugar:
   46 seção < 50 fecho < 53 manchete. */
.fecho-titulo {
  margin-top: 6px;
  font-size: clamp(32px, 4.3vw, 50px);
  text-wrap: balance;
}

.fecho-linha {
  margin: 14px auto 0;
}

/* O MAIOR OBJETO DA TELA, e não por acaso: numa faixa rosa inteira, o olho vai
   primeiro no que tem mais área e mais claro. Se isso for o card do aviso, a
   pessoa lê o susto e não vê o botão. Então o botão é grande de verdade
   (~88px de altura na tela larga) e é o único bloco amarelo cheio da seção.

   E ESTA REGRA JÁ REPROVOU O BOTÃO UMA VEZ: quando o retrato do SmartScreen
   virou papel branco, medido na captura embaçada ele dava L=1,000 e 3,04:1
   contra o campo rosa em ~112k px², contra L=0,634 e 1,98:1 em ~32k px² do
   botão — 3,6x de massa luminosa na coluna errada. Amarelo não ganha de
   branco puro: o conserto foi APAGAR O RETRATO (fundo #cbc3c8, coluna mais
   estreita), não acender o botão. Se algum dia o desenho da janela voltar a
   ser branco, é este botão que perde de novo. */
.fecho-btn {
  margin-top: 28px;
  padding: 20px 34px;
  font-size: 21px;
}

/* O quadradinho de quatro painéis: é o Windows, desenhado em CSS. Imagem
   viria da rede ou de arquivo novo; quatro gradientes não vêm de lugar
   nenhum. */
.fecho-btn-icone {
  --ic: 19px;   /* lado do quadradinho inteiro */
  --iq: 8px;    /* lado de cada painel */
  width: var(--ic);
  height: var(--ic);
  flex: none;
  background:
    linear-gradient(var(--ameixa), var(--ameixa)) 0 0 / var(--iq) var(--iq) no-repeat,
    linear-gradient(var(--ameixa), var(--ameixa)) 100% 0 / var(--iq) var(--iq) no-repeat,
    linear-gradient(var(--ameixa), var(--ameixa)) 0 100% / var(--iq) var(--iq) no-repeat,
    linear-gradient(var(--ameixa), var(--ameixa)) 100% 100% / var(--iq) var(--iq) no-repeat;
}

.fecho-abaixo {
  margin-top: 11px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.85;
}

/* Rodapé do botão: três fatos curtos, UMA linha. Cada pílula é indivisível
   (nowrap) — meia frase pendurada na linha de baixo faz o grupo parecer texto
   que transbordou, e não um trio. */
.fecho-fatos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.fecho-fatos .chip {
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   O AVISO — uma coluna: a frase, o desenho da tela, a legenda. Desenho, não
   captura: a página não busca imagem de lugar nenhum, e o desenho ainda por
   cima circula o único lugar onde clicar.

   POR QUE NÃO É UM CARD CREME. Era, e estava errado: creme sobre rosa é o
   maior contraste possível nesta faixa, e o bloco tinha vinte vezes a área do
   botão. Quem chega no fecho via o AVISO primeiro — ou seja, via o susto
   antes da oferta. Agora ele é um painel rosa fundo (a mesma rosa da faixa
   escurecida com a própria ameixa — não é cor nova, é sombra da que já
   existe), traço fino de 2px e sem sombra dura. Ele conta a verdade e cede o
   brilho para o botão.
   --------------------------------------------------------------------------- */
.fecho-aviso {
  /* rosa da faixa + 38% de ameixa. Casca sobre este tom dá 5,35:1 — passa no
     AA para texto de corpo, que é o mínimo para um aviso: aviso que não se lê
     não avisa nada. */
  --painel: #b23d7c;
  width: 100%;
  /* 380 e não 460: a área do retrato é o que ele tem de brilho no teste de
     vista embaçada, e 80px de largura a menos derrubam a mancha clara da
     coluna direita de ~112k para ~62k px² sem tocar em uma letra do texto do
     Defender. O aviso continua com linha de leitura confortável — 380 dá
     ~46 caracteres no corpo de 16px. */
  max-width: 380px;
  padding: 20px 22px 18px;
  background: var(--painel);
  border: 2px solid var(--ameixa);
  border-radius: var(--raio-card);
  color: var(--casca);
  text-align: left;
}

/* o chapéu do painel aponta para o botão em vez de anunciar a si mesmo:
   "antes de clicar" só faz sentido se existe um clique por perto. */
.fecho-aviso-olho {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;   /* menos que isso e 12,5px em caixa alta cai abaixo do AA */
}

.fecho-aviso-p {
  margin-top: 8px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.55;
}

/* O DESENHO DA TELA */
/* A CORUJA SAIU DAQUI, e com ela os 58px de poleiro. Ela estava empoleirada na
   borda de cima da moldura e, no teste de vista embaçada, era a mancha mais
   escura e mais saturada da seção inteira encostada no quadro — o olho ia
   nela, e ela não ensina nada: quem tem de ser reconhecido é a caixa do
   Windows, e quem tem de ser clicado é o botão. Bichinho nesta faixa já
   existe, no canto de baixo da coluna da esquerda (.fecho-ninho), onde ele
   anuncia a pergunta em vez de disputar com o retrato. */
.fecho-tela {
  position: relative;
  margin: 16px 0 0;
}

/* ===== O RETRATO DA CAIXA DO SMARTSCREEN =================================
   Isto era um cartão do site com o texto do Windows dentro: painel translucido
   sobre a faixa rosa, cantos de pílula, letra do Eggenda, tudo em casca. Medido,
   dava 1,11 de contraste contra o painel que o cerca — só a borda separava os
   dois — e, pior que isso, não parecia a caixa do Windows. O trabalho desta
   figura é um só: quem a vê aqui tem de RECONHECER a caixa quando ela pular na
   tela dele daqui a dois minutos. Cartão bonito não faz esse trabalho; retrato
   faz.

   Então aqui dentro nada usa a paleta da casa. Cinza, azul de link, letra de
   sistema e cantos QUADRADOS são do Windows; o rosa da moldura em volta
   continua sendo nosso. As cores são aproximações da caixa real, não amostras
   dela.

   E NÃO É PAPEL BRANCO, e isto é o conserto de uma reprovação: com #ffffff o
   retrato media L=1,000 em ~112k px² contra L=0,634 em ~32k px² do botão
   amarelo — a coluna do aviso tinha 3,6x a massa luminosa da coluna da
   oferta, e no embaçado o objeto que saltava era o retângulo branco, não o
   botão. Quem carrega o reconhecimento da caixa não é o branco: é o título
   azul, a faixa cinza do rodapé, o canto quadrado e o Segoe. Então o papel
   desceu para L=0,559 — abaixo dos 0,634 do amarelo — e os cinzas de dentro
   desceram junto, para a janela continuar sendo uma janela e não um cinza
   chapado: rodapé 0,479 < botão de sistema 0,506 < papel 0,559 < botão de
   baixar 0,634.

   Contrastes medidos sobre o papel novo: corpo #1a1a1a 10,1:1; título azul
   5,46:1; link 4,64:1 (por isso ele escureceu de #0066cc, que dava 3,36, para
   #0b4f9e). Contra o campo rosa da faixa: retrato 1,77:1, botão 1,98:1 — a
   ordem que a regra do .fecho-btn lá em cima manda. */
.fecho-janela {
  position: relative;
  background: #cbc3c8;
  border: 1px solid #978f95;
  /* 2px e não o raio da casa: caixa de diálogo do Windows tem canto quadrado,
     e canto redondo é a primeira coisa que denuncia uma maquete. */
  border-radius: 2px;
  box-shadow: 5px 5px 0 rgba(53, 33, 61, 0.45);
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, sans-serif;
  text-align: left;
}

.fecho-janela-corpo {
  padding: 16px 18px 15px;
}

/* O título da caixa é grande e azul-escuro, e não preto: é essa cor que a
   pessoa vai reconhecer de longe antes de ler qualquer palavra. */
.fecho-janela-titulo {
  margin: 0;
  color: #14477e;
  font-family: inherit;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
}

.fecho-janela-texto {
  margin: 10px 0 0;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

/* O BLOCO "Aplicativo:/Editor:" SAIU, e é fidelidade, não corte de gordura: na
   caixa de verdade ele NÃO existe na primeira tela — só aparece depois de a
   pessoa clicar em "Mais informações", que é exatamente o clique que esta
   figura está ensinando. O retrato misturava os dois estados, e retrato que
   mistura estados deixa de ser retrato. De quebra, saíram 40px de altura do
   objeto mais claro da coluna. */

.fecho-janela-alvo {
  display: flex;
  align-items: center;
  margin: 16px 0 4px;
}

/* O LINK, COMO ELE É DE VERDADE: azul, sublinhado, discreto. Já foi pílula
   amarela aqui (segundo botão amarelo da tela, brigando com "Baixar o
   Eggenda") e depois texto branco sublinhado, que na caixa real não existe.
   É azul de link porque é isso que a pessoa vai procurar.
   nowrap porque, em coluna estreita, "Mais informações" partido no meio deixa
   de parecer um link. */
.fecho-janela-link {
  position: relative;
  white-space: nowrap;
  /* #0b4f9e e não o #0066cc do Windows: sobre o papel escurecido o azul de
     fábrica dava 3,36:1 e "Mais informações" é justamente a palavra que a
     pessoa precisa achar. Este dá 4,83:1 e continua sendo azul de link. */
  color: #0b4f9e;
  font-size: 13px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* O ANEL É A ÚNICA COISA NOSSA DENTRO DO QUADRO: anotação por cima do retrato,
   como quem circula a caneta numa captura de tela. Tracejado e sem
   preenchimento para ninguém confundir com um controle do Windows.
   ROSA, e não o amarelo do sistema: medido, amarelo sobre o papel dá 1,54 e
   sumiria dentro do retrato; rosa é cor que ninguém confunde com Windows.
   Amarelo cheio nesta tela pertence a um objeto só: o botão de baixar.
   MAS É O ROSA ESCURECIDO DO PAINEL, e não o --rosa cheio: com o papel branco
   o --rosa dava 3,04 contra o fundo, o mínimo para grafismo não textual; com
   o papel em L=0,559 ele cairia para 1,77 e a marcação sumiria justo na
   palavra que a pessoa precisa achar. O --painel (rosa + 38% de ameixa, o
   mesmo tom do aviso em volta) dá 3,16 e continua magenta a olho nu.
   Respira devagar em vez de piscar, e o 0% já é o estado legível: quem pediu
   menos movimento não perde a marcação. */
.fecho-janela-link::after {
  content: "";
  position: absolute;
  inset: -7px -12px;
  border: 2px dashed var(--painel);
  border-radius: var(--pilula);
  opacity: 1;
  animation: fecho-anel 2.2s ease-in-out infinite;
}

@keyframes fecho-anel {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.06); opacity: 0.55; }
}

/* A FAIXA DE BOTÕES do rodapé da caixa: cinza um tom abaixo do corpo, com
   fio em cima. É esse degrau que faz a figura ler como janela em vez de
   retângulo de texto. */
.fecho-janela-botoes {
  display: flex;
  justify-content: flex-end;
  padding: 11px 18px;
  /* desceu junto com o papel, na mesma proporção: o degrau entre corpo e
     rodapé é o que faz a figura ler como janela, e ele tinha de sobreviver ao
     escurecimento. L=0,479 contra os 0,559 do papel. */
  background: #bdb6bb;
  border-top: 1px solid #aca5aa;
}

/* O ÚNICO BOTÃO QUE A CAIXA OFERECE — e não é nele que se clica.
   Aqui ele já foi uma pílula clara de traço grosso: o objeto mais pesado do
   cartão, o primeiro que o olho achava, e apontando para a saída errada.
   Agora é o botãozinho cinza de sistema que ele é na tela de verdade — e
   deixar de destacá-lo é o conserto, não apagá-lo: apagado, ele deixaria de
   parecer o Windows. */
.fecho-janela-botao {
  display: inline-block;
  min-width: 88px;
  padding: 5px 14px;
  /* também desceu: em #e1e1e1 ele ficava a L=0,754, mais claro que o botão de
     baixar, e um chip claro dentro do retrato voltaria a puxar o olho para
     dentro do quadro. L=0,506, entre o rodapé e o papel. */
  background: #c1bbbf;
  border: 1px solid #8a8388;
  border-radius: 2px;
  color: #1a1a1a;
  font-size: 12.5px;
  font-weight: 400;
  text-align: center;
  opacity: 1;
}

.fecho-tela figcaption {
  margin-top: 12px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  opacity: 0.9;
  text-wrap: balance;
}

/* Só peso e brilho: sublinhar aqui também seria mentira, porque "Executar
   assim mesmo" é botão na tela dela, não link. */
.fecho-tela figcaption strong {
  font-weight: 800;
  color: #fff;
}

/* ---------------------------------------------------------------------------
   TELA LARGA — o botão e o aviso na MESMA olhada.
   Empilhado, o fecho passava de 1200px de altura: quem chegava no aviso do
   SmartScreen já tinha perdido o botão de vista, e quem clica sem ter lido
   leva o susto do "aplicativo não reconhecido" achando que baixou vírus.
   Lado a lado, a pergunta, o botão, a verdade e o desenho da tela cabem numa
   tela de 900px — e o rosa que sobrava nas beiradas passa a carregar coisa.
   --------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  /* a única faixa da página que estica além da coluna de 1100. São duas
     colunas de conteúdo de verdade; espremê-las em 1004px encolheria o
     desenho da janela do Windows até ele virar ilustração ilegível — e ele é
     a prova de que o susto é conhecido, não uma desculpa.
     A REPARTIÇÃO É DESIGUAL DE PROPÓSITO: a oferta fica com mais de dois
     terços e o aviso com menos de um terço. Meio a meio dá empate, e num
     fecho o empate é o botão perdendo — e aqui não era empate, era derrota:
     medida a mancha luminosa das duas colunas no embaçado, a direita dava
     116.770 contra 32.683 da esquerda. 32% e 260 de piso (era 40% e 300)
     tiram a coluna do aviso da disputa por área sem cortar o texto do
     Defender, que continua inteiro. */
  .fecho-miolo {
    /* 1100 e não 1240, e o motivo está no comentário do `.rodape-miolo` logo
       abaixo — ele nomeia o defeito certo e conserta metade dele. O fecho e o
       rodapé estavam alinhados UM COM O OUTRO a 1240, e desalinhados dos OUTROS
       ONZE `.miolo` da página, que são 1100. Medido a 1424 de tela: a marca do
       topo começa em x=202 e a do rodapé em x=132 — 70px de entorta na
       despedida, cinco vezes o desalinho de 30px que o comentário se propunha a
       resolver. Um eixo só para a página inteira. A repartição 32%/260px é
       proporcional, então a briga de área entre oferta e aviso fica igual. */
    max-width: 1100px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 32%);
    gap: clamp(40px, 4vw, 64px);
    align-items: center;
  }

  .fecho-chamada {
    align-items: flex-start;
    text-align: left;
  }

  /* o bichinho desce para o canto de baixo à esquerda: numa coluna, ele
     anuncia a pergunta em vez de flutuar sozinho no meio. */
  .fecho-ninho {
    place-items: end start;
    min-height: 146px;
  }

  .fecho-linha {
    margin-left: 0;
    margin-right: 0;
  }

  /* o parágrafo não usa os 640px inteiros: linha de leitura longa demais e a
     coluna vira um bloco de texto em vez de uma chamada. 46ch dá três linhas
     cheias — 34ch dava quatro, com "Windows." sozinha na última, e uma
     palavra órfã bem em cima do botão suja a entrada dele. */
  .fecho-linha {
    max-width: 46ch;
    text-wrap: pretty;
  }

  /* ~88px de altura. É o maior objeto da seção e o único cheio de amarelo —
     é ele que tem que ser visto primeiro, antes do aviso. A sombra sobe para
     a alta (8px) porque peça deste tamanho com sombra de botãozinho parece
     desenho impresso, e não peça que dá para apertar. */
  .fecho-btn {
    margin-top: 32px;
    padding: 26px 46px;
    gap: 14px;
    font-size: 25px;
    box-shadow: var(--sombra-alta);
  }

  .fecho-btn:active {
    transform: translate(4px, 4px);
    box-shadow: 3px 3px 0 var(--ameixa);
  }

  .fecho-btn-icone {
    --ic: 23px;
    --iq: 10px;
  }

  /* as três cabem em fila de 1100px para cima (folga medida: 33px no pior
     caso). Deixo o wrap ligado de propósito: se um dia a fonte render mais
     larga, quebrar em duas linhas é feio, mas texto cortado pelo overflow
     escondido do body seria pior. */
  .fecho-fatos {
    justify-content: flex-start;
  }

  /* o rodapé acompanha a largura do fecho — os dois são a mesma despedida — e
     agora os dois acompanham o resto da página. Duas beiradas esquerdas
     diferentes leem torto sem que ninguém saiba nomear o quê; três, pior. */
  .rodape-miolo {
    max-width: 1100px;
  }
}

/* ---------------------------------------------------------------------------
   RODAPÉ — a peça FECHO é dona dele. Três andares: marca, links, e a linha
   fina com a verdade curta.
   --------------------------------------------------------------------------- */
.rodape {
  padding: 34px 0 28px;
}

.rodape-miolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  text-align: left;
}

.rodape .rodape-marca {
  margin-right: 0;
}

/* o lema empurra a navegação para a direita e, de quebra, tira o vazio que
   sobrava entre a marca e os links. */
.rodape-lema {
  margin-right: auto;
  padding-left: 26px;
  border-left: 2.5px solid rgba(53, 33, 61, 0.38);
  font-size: 15px;
  font-weight: 600;
  opacity: 0.88;
}

.rodape .marca .marca-nome {
  font-size: 22px;
  -webkit-text-stroke-width: 1.5px;
  text-shadow: 2px 2px 0 var(--azul);
}

.rodape .rodape-marca .ovo {
  --esc: 2;
}

.rodape-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}

.rodape-nav a {
  padding: 3px 0;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 2.5px solid transparent;
}

.rodape-nav a:hover {
  border-bottom-color: var(--ameixa);
}

.rodape-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 20px;
  width: 100%;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 2.5px solid rgba(53, 33, 61, 0.38);
}

.rodape .rodape-fina {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   TELA ESTREITA
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .fecho-titulo {
    max-width: 16ch;
  }
}

@media (max-width: 560px) {
  .fecho-ninho {
    min-height: 118px;
  }

  .fecho-bicho { --esc: 3; }

  .fecho-btn {
    width: 100%;
    justify-content: center;
    padding: 22px 24px;
    font-size: 20px;
  }

  /* no telefone as três não cabem em fila. Então quebram no lugar ESCOLHIDO:
     as duas curtas em cima, a longa sozinha embaixo, tudo centrado. Duas
     linhas em pirâmide leem como arranjo; 2+1 torto lê como sobra. */
  .fecho-fatos {
    gap: 8px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .rodape-miolo {
    gap: 12px;
  }

  .rodape .rodape-marca {
    width: 100%;
  }

  .rodape-lema {
    margin-right: 0;
    padding-left: 0;
    border-left: 0;
  }

  .rodape-base {
    justify-content: flex-start;
  }
}

/* ...até aqui. FIM DA ZONA FECHO. */

/* ###########################################################################
   ZONA: CELULAR         prefixo: cel-*      vale de 560px para baixo
   ---------------------------------------------------------------------------
   Esta peça é transversal: ela não tem uma <section> própria, ela é a PÁGINA
   INTEIRA a 390x844. Por isso é a única zona que pode mexer em peça
   compartilhada — e mexe SÓ dentro de @media (max-width: 560px), nunca fora.
   Se você é dono de outra peça e quer trocar algo aqui, fale com o celular
   antes: o que parece um detalhe de largura estreita costuma ser o piso de
   toque de 44px ou o mínimo de 15px de letra.

   Três coisas que esta zona garante e não abre mão:
     1. nada de rolagem horizontal — nem por um pixel;
     2. nenhum texto abaixo de 15px;
     3. nenhum alvo de toque abaixo de 44px.

   E uma quarta, que é o motivo de a peça existir: o Eggenda é um app de
   WINDOWS. Quem chega pelo celular não vai instalar nada agora — vai
   descobrir, achar graça e mandar o endereço para si mesmo. A barra de baixo
   e o bilhete dizem isso na cara, sem fingir que existe um botão que
   funcionaria aqui.
   ########################################################################### */

/* Enquanto o JS não montou o menu, o topo continua sendo o do esqueleto (três
   andares, tudo à mostra). Só depois de `.cel-pronto` é que a navegação vira
   hambúrguer — assim, JS quebrado devolve uma página navegável em vez de um
   topo sem saída. */
.cel-menu-botao,
.cel-menu,
.cel-barra,
.cel-bilhete {
  display: none;
}

/* DUAS PALAVRAS DE SERVIÇO, para texto que muda de tamanho de tela.
   Não é responsividade de layout, é edição: uma frase que cabe em três linhas
   numa coluna de 560px vira cinco linhas de rolagem num telefone, e cinco
   linhas antes do botão empurram a piada da página para fora da primeira tela.
   Em vez de esconder o parágrafo inteiro e escrever outro (dois textos para
   manter, e um deles sempre desatualiza), marco a ORAÇÃO que sobra:
     .cel-nao — existe em tela larga, some no telefone;
     .cel-so  — o contrário.
   Quem escreve a seção continua dono da frase; eu só corto o supérfluo. */
.cel-so {
  display: none;
}

@media (max-width: 560px) {

  .cel-so  { display: inline; }
  .cel-nao { display: none; }

  /* ------------------------------------------------------------------
     1. PISOS: letra de 15px e alvo de 44px
     Os tamanhos de baixo não são gosto, são o piso do dedo e do olho.
     ------------------------------------------------------------------ */
  .olho {
    font-size: 15px;
    letter-spacing: 0.08em;
  }

  .chip {
    font-size: 15px;
    padding: 7px 15px;
  }

  .btn {
    min-height: 46px;
    font-size: 16px;
    padding: 12px 24px;
  }

  .btn--grande {
    min-height: 54px;
    font-size: 17px;
    padding: 15px 28px;
  }

  .topo .btn {
    min-height: 44px;
    font-size: 15px;
    padding: 10px 18px;
  }

  /* sem JS o menu não existe, então estes links continuam sendo a navegação
     de verdade — e alvo de navegação também tem que ter 44px. */
  .topo-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
  }

  .rodape .rodape-fina {
    opacity: 0.92;   /* ameixa sobre rosa já é justo; 0,8 derrubava o contraste */
  }

  /* O PISO VALE PARA A PÁGINA INTEIRA, inclusive para o que as outras peças
     escreveram. Não é gosto: 13px no braço esticado, num ônibus, não é texto,
     é textura. E link de 33px de altura é link que o polegar erra.
     Mexo SÓ no tamanho e na altura do alvo — cor, peso, ordem e desenho
     continuam sendo de quem escreveu a seção. Se você é dono do fecho e quer
     outro arranjo aqui, o piso é inegociável mas o caminho até ele não é. */
  /* 9px de lado e não 13, e a conta é a pirâmide lá de cima: com 13 as duas
     pílulas curtas deixavam de caber na mesma linha e o arranjo "duas em cima,
     a longa embaixo" virava três linhas tortas — que é justo o que o
     comentário de `.fecho-fatos` diz evitar. Esta regra vinha DEPOIS daquela e
     a desmanchava sem saber. Medido a 360 (miolo de 287px): com 13, 157 + 8 de
     vão + 134 = 299 e faltavam 12; com 9, dá 283 e sobra. O tamanho da letra
     — que é o que o piso existe para proteger — não se mexe.
     Abaixo de ~330px a pirâmide cai mesmo, e está certo: ali "Sem senha de
     administrador" sozinha ocupa 239px de um miolo de 247. */
  #fecho .fecho-fatos .chip {
    font-size: 15px;
    padding: 7px 9px;
  }

  #fecho .fecho-abaixo,
  #fecho .fecho-aviso-olho,
  #fecho .fecho-janela-texto,
  #fecho .fecho-janela-link,
  #fecho .fecho-janela-botao,
  #fecho .fecho-tela figcaption {
    font-size: 15px;
  }

  #elenco .elenco-nome,
  #elenco .elenco-quem,
  #elenco .elenco-balao,
  #elenco .elenco-balao cite,
  #recursos small,
  #recursos .rec-hora,
  #recursos .rec-agora,
  #recursos .rec-pilula-hora,
  #recursos .rec-balao-ev b,
  #recursos .rec-balao-nota,
  #recursos .rec-autor,
  #recursos .rec-aba,
  #recursos .rec-caminho,
  #recursos .rec-linha,
  #recursos .rec-pontos li,
  #recursos .rec-arquivo-pe,
  #recursos .rec-conta,
  #recursos .rec-pele b,
  #movimento .mov-balao-txt,
  #movimento .mov-dica-pata {
    font-size: 15px;
  }

  /* O RÓTULO AMARELO ESTAVA APAGANDO UMA PALAVRA DO CARTÃO QUE ELE EXPLICA.
     Ele é absoluto em `bottom: -15px`, medida escolhida para um rótulo de UMA
     linha (31px, como no desktop). A 390 ele quebra em duas, vira 53px e
     invade 38px para dentro do cartão — medido, cobria inteira a terceira
     linha do rodapé ("sua"), e o que sobrava na tela era "abra no Bloco de /
     Notas e escreva a", com o cursor piscando no lugar errado.
     No telefone ele sai do absoluto e entra no fluxo, logo abaixo do cartão.
     Perde o encosto na borda — que era o charme — e ganha não comer texto,
     que é o que importa. E o encosto só existia porque cabia numa linha.

     REGRA SOZINHA, E ISTO É A LIÇÃO CARA: ela nasceu ENFIADA NO MEIO da lista
     de seletores aqui de cima, logo depois de uma vírgula. Quinze seletores
     — `#elenco .elenco-nome`, `.elenco-quem`, `.elenco-balao` e companhia —
     passaram a receber ESTE bloco em vez do `font-size: 15px`, e o piso de
     letra do telefone deixou de valer para eles sem que nada parecesse
     quebrado. O sintoma visível era o rabicho do balão do corvo: sem
     `position: relative` no balão, o `::after` ancorava na FAIXA, e sobrava um
     triângulo azul de 9 linhas de pixel boiando na emenda entre duas faixas, a
     350px de qualquer balão. Nunca ponha uma chave dentro de uma lista de
     seletores; e desconfie de comentário longo colado numa vírgula. */
  #recursos .rec-rotulo--arquivo {
    position: static;
    margin: 12px 0 0 4px;
  }

  /* A DICA DA PATA ("carinho?") também chegou depois, a 12px. Ela é balão de
     :hover, e telefone não tem hover — mas tem navegador que dispara :hover no
     toque, e aí ela aparece de verdade, a 12px, dentro de uma pílula. Sobe
     para o piso como qualquer outro texto. O preenchimento acompanha; ela é
     absoluta e centrada na pata, então crescer não empurra layout nenhum
     (conferido: scrollWidth continua igual ao clientWidth).
     O seletor é #conteudo e não #movimento de propósito: a costura é filha
     direta do <main>, não da seção. */
  #conteudo .mov-costura-dica {
    font-size: 15px;
    padding: 4px 12px;
  }

  /* O RÓTULO das demonstrações chegou depois desta lista, a 11,5px — e ele é
     justamente a frase que explica o que a maquete está provando, ou seja, o
     texto MENOS descartável da seção. Sobe para 15px e o preenchimento
     acompanha, senão a pílula fica apertada na letra maior. */
  #recursos .rec-rotulo {
    font-size: 15px;
    padding: 5px 13px;
  }

  /* Os selos de XP das três capivaras e a conta "24 cores" nasceram a 11px,
     depois desta lista. Não são desenho: "30 XP" e "150 XP" são o preço da
     roupa, e a conta é a única coisa na tela que diz quantas existem. Sobem
     para o piso, e o preenchimento acompanha para a pílula não apertar. */
  #recursos .rec-pele small {
    font-size: 15px;
    padding: 1px 11px;
  }

  #recursos .rec-tantas {
    font-size: 15px;
  }

  #recursos .rec-tantas b {
    font-size: 24px;
  }

  /* O PAR DE LEITORES SAÍA DA TELA. A coruja e o corvo ficam lado a lado de
     propósito — o elenco explica por quê, e a razão é boa: empilhados, o corvo
     responde a uma frase que já rolou para fora. Só que a --esc:5 cada ave tem
     40x5 = 200px de largura, e duas colunas de 200 mais o vão não cabem nos
     350px de miolo de um telefone: a coluna da direita — balão, ave e nome do
     corvo — estava sendo cortada pela borda da seção. Metade da piada saía da
     tela para caber a outra metade.
     A --esc:4 são 160px por ave, os dois cabem, e aí o balão volta a ser tão
     largo quanto a coluna dele — o que é justamente o que permite a citação
     subir dos 12,5px para os 15px do piso, ali em cima. Continuam lado a lado;
     agora os dois inteiros. */
  #elenco .elenco-astro--ave {
    --esc: 4;
  }

  #elenco .elenco-balao {
    max-width: 100%;
  }

  /* O CONTADOR DENTRO DA ABA (307 / 331) veio a 11px. Ele não passa pela
     porta das exceções de baixo: aquelas são letra desenhada dentro de uma
     MAQUETE, vista de longe; esta está dentro de um botão de verdade, que o
     dedo aperta, ao lado de um rótulo de 15px. Onze contra quinze no mesmo
     controle não lê como escolha, lê como defeito. O preenchimento encolhe
     junto para a pastilha não engordar a aba além dos 44px. */
  #recursos .rec-aba-n {
    font-size: 15px;
    padding: 0 6px;
  }

  /* O caminho do arquivo de frases não cabe na mesma linha das abas num
     aparelho estreito — estava saindo cortado no meio de "%APPDATA%". Desce
     para uma linha só dele em vez de encolher até sumir. */
  #recursos .rec-abas {
    flex-wrap: wrap;
  }

  #recursos .rec-caminho {
    width: 100%;
    margin-left: 0;
    opacity: 0.75;
  }

  #recursos .rec-autor {
    opacity: 0.82;
  }

  /* AS EXCEÇÕES, e são todas do mesmo tipo: letra que não é texto para ler, é
     DESENHO de uma tela vista de longe. Numa maquete, subir a letra não deixa
     nada mais legível — só quebra a escala e, no caso dos nomes de arquivo,
     mata a piada.
       .mov-tela-nome / .mov-icone-nome / .mov-relogio — a maquete de área de
         trabalho ("Monitor 1", "tcc-final.docx", 14:52);
       .rec-icone — os ícones da mesa por onde o bichinho passa;
       .rec-dur — a duração no fim da linha do compromisso ("15 min", "1 h");
       .rec-dia-topo .chip — o contador "3 agendas ligadas" no alto da maquete
         da agenda.
     Repare que as duas últimas só passam porque a informação delas está
     escrita a 15px ali do lado: a régua de fases diz 0 XP / 30 XP / 150 XP, e
     a maquete da agenda lista os compromissos um a um. O texto CORRIDO das
     maquetes — legenda, balão, dica, a tela do SmartScreen inteira — esse
     obedece ao piso como todo o resto.

     .marca e .rodape-nav são links de verdade e passam a ter dedo inteiro. */
  .marca {
    min-height: 44px;
  }

  .rodape-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  #recursos .rec-aba {
    min-height: 44px;
  }

  /* o link de escape do bilhete: quem quiser abrir a página de versões aqui
     mesmo, abre. O bilhete explica, não tranca. */
  .cel-bilhete-abrir {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ------------------------------------------------------------------
     2. TOPO — vira marca + hambúrguer, em UM andar só
     Três andares de topo comiam 120px dos 844 antes de a página começar.
     ------------------------------------------------------------------ */
  .cel-pronto .topo-nav,
  .cel-pronto .topo-miolo > .btn {
    display: none;
  }

  .cel-pronto .topo-miolo {
    flex-wrap: nowrap;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* A MARCA CONTA A PIADA SOZINHA.
     "eggenda" é egg + agenda, e sete letras da mesma cor guardam esse segredo
     bem demais: em tela larga a pessoa tem a chocadeira inteira do lado para
     entender: no telefone o logo aparece antes de tudo e sai de cena rolagem
     abaixo. Então aqui o trocadilho fica VISÍVEL — "egg" na cor da gema, com
     traço e sombra dura de sempre, e "enda" na tinta do texto. Dois tons, não
     três: o azul saiu para o amarelo poder ser o acento.
     Vale para o rodapé também — a mesma marca não pode ter duas leituras na
     mesma tela. */
  .marca .marca-nome {
    font-size: 23px;
    -webkit-text-stroke-width: 0;
    text-shadow: none;
  }

  /* O RODAPÉ ganhou depois uma regra própria (`.rodape .marca .marca-nome`,
     três classes) que devolvia o contorno e a sombra azul — e aí a mesma
     palavra tinha duas leituras na mesma página: em cima "egg" amarelo
     contra "enda" ameixa, embaixo tudo azul e o trocadilho de volta ao
     esconderijo. Quem chega pelo telefone vê a marca duas vezes, no topo e no
     fim, e se as duas não contarem a mesma piada nenhuma das duas conta. O
     tamanho do rodapé continua sendo dele; o que igualo é a COR. */
  .rodape .marca .marca-nome {
    -webkit-text-stroke-width: 0;
    text-shadow: none;
  }

  .marca-egg {
    color: var(--amarelo);
    -webkit-text-stroke: 1.5px var(--ameixa);
    text-shadow: 2px 2px 0 var(--ameixa);
  }

  .marca-enda {
    color: var(--ameixa);
  }

  /* e o ovo do logo ganha o mesmo contorno de quatro sombras duras que o do
     botão: a arte é creme e o fundo é rosa, então sem traço ele fica um
     borrão claro ao lado de duas palavras contornadas. Com traço, ele é o
     ovo de que a marca está falando. */
  .marca .ovo {
    filter:
      drop-shadow(2px 0 0 var(--ameixa))
      drop-shadow(-2px 0 0 var(--ameixa))
      drop-shadow(0 2px 0 var(--ameixa))
      drop-shadow(0 -2px 0 var(--ameixa));
  }

  /* ------------------------------------------------------------------
     3. A PRIMEIRA TELA — 844px, e é o único quadro que a maioria vê
     A dobra é do hero, o conteúdo dela também. O que é meu é o ORÇAMENTO
     dela: 844px menos 73 de topo dão 771 para gastar, e a página vinha
     gastando 509 em texto antes de chegar na chocadeira. Sobrava tela
     para o cone de luz e para 2px da cabeça do bichinho.

     O corte é o mesmo argumento três vezes: a piada do ovo tem que
     ACONTECER aqui, não ser anunciada.
       a) as duas pílulas de selo (~100px) saem de cima do título e viram
          UMA linha de microcópia colada no botão — a ressalva "é para PC"
          vale ao lado do botão, não antes de a pessoa saber o que é;
       b) o parágrafo perde a oração do ovo e a do passeio: uma é o que o
          desenho logo abaixo faz melhor, a outra tem seção própria. Sobra
          a agenda, que é a única promessa que pixel nenhum conta;
       c) os ~127px devolvidos vão INTEIROS para o palco, que cresce de
          240 para 286px e sobe a arte de --esc-p 5 para 6.
     Resultado medido a 390x844: ovo, bicho, chão e a borda de baixo do
     cartão dentro da tela, e ainda sobra a casca rachada da faixa com um
     fio da seção seguinte aparecendo — que é o convite para rolar.
     ------------------------------------------------------------------ */

  /* (a) OS DOIS SELOS SAEM. Eles são bons em tela larga, onde ficam do
     lado do palco e não custam nada. Aqui custavam 99px — mais que o
     título inteiro — para dizer, ANTES do título, uma ressalva de
     instalação que só interessa a quem já quis instalar. A informação
     não se perde: ela desce inteira para .cel-hero-fino, ali embaixo. */
  #hero .hero-selos {
    display: none;
  }

  /* A LINHA QUE OS SUBSTITUI. Ameixa cheia, sem opacidade: sobre o rosa
     chiclete, ameixa a 100% dá 4,8:1 e ameixa a 90% cai para 4,2 — abaixo
     do piso de texto normal. A hierarquia aqui vem do TAMANHO (15 contra
     os 17 do parágrafo e os 34 do título), não de apagar a cor. */
  .cel-hero-fino {
    display: block;
    width: 100%;
    margin: 6px 0 0;   /* colada no amarelo: é o rodapé DELE (ver a régua abaixo) */
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ameixa);
  }

  /* (b) O .ics DEIXA DE SER PÍLULA. Numa coluna de 390px a pastilha caía
     no fim da última linha e levava o ponto final junto: a frase acabava
     com uma bolinha branca e um ponto órfão pendurado depois dela. Em
     texto corrido negrito ele continua sendo visivelmente uma extensão de
     arquivo, e a frase acaba onde a frase acaba. */
  #hero .hero-cod {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1em;
    font-weight: 800;
    line-height: inherit;
    vertical-align: 0;
  }

  /* (c) O AR REDISTRIBUÍDO — e este é o ponto em que a primeira tela passou
     a ser um bloco só, comprido, em vez de quatro coisas.
     A escada antiga media 14 / 20 / 10 / 10 / 22 px: cinco vãos quase do
     mesmo tamanho entre seis objetos. Espaço constante não agrupa nada — o
     olho lê seis itens soltos e escolhe pelo tamanho, e o maior objeto da
     lista era o botão branco de largura cheia, que não é a ação principal.
     A régua nova tem só dois valores, e a distância entre eles é que faz a
     leitura:
       DENTRO do grupo   6 e 12px
       ENTRE os grupos  26, 34 e 28px
     Quatro grupos, nesta ordem: título+frase / botão+garantia / botão
     secundário / chocadeira. A garantia "Grátis · sem senha de
     administrador" fica a 6px do amarelo e a 34 do branco — ela é o rodapé
     do botão de baixar, não a legenda do de conhecer. Era o contrário: 10
     em cima e 10 embaixo deixavam a frase pertencendo aos dois. */

  /* Duas linhas cheias, e é por isso que o `balance` saiu. Ele reparte a
     frase em três linhas de larguras parecidas — e três linhas curtas dentro
     de uma caixa de 317px desenham uma borda direita serrilhada a meio
     caminho do botão, que é a segunda margem que o bloco não podia ter. Sem
     ele, e com o "e" no lugar do "ou" (a troca está no HTML, com comentário),
     a frase fecha em 286 e 312px: a linha 2 encosta na borda do botão e a
     única borda direita do bloco volta a ser uma só.
     O espaço antes do .ics continua duro (&#160;) no HTML, então a extensão
     nunca começa uma linha. */
  #hero .hero-fina {
    margin-top: 12px;
    text-wrap: wrap;
  }

  /* Coluna explícita, com gap ZERO: o gap do flex é um número só para todos
     os vãos, e aqui os vãos precisam ser diferentes uns dos outros — é
     justamente a diferença que agrupa. Quem manda são as margens de cada
     peça, logo abaixo. `align-items: flex-start` é o que permite o botão
     secundário ter a largura do texto dele. */
  #hero .hero-acoes {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    margin-top: 26px;
  }

  #hero .hero-miolo {
    gap: 28px;
  }

  /* O PALCO, refeito para caber inteiro. O ENQUADRAMENTO é desta peça e
     continua sendo: 290px de cartão, escolhidos para a chocadeira caber
     dentro dos 844 do telefone junto com o botão.
     O que mudou foi de quem é a ESCALA. Havia um número só (--esc-p) para
     o ovo e para o macaco, e um número só obriga a escolher: ou o ovo
     enche o quadro parado, ou o macaco cabe nele. A tela larga separou os
     dois, e aqui a separação vale igual — o ovo é medido pelo repouso (é
     ele o quadro que o telefone mostra parado, e o único que existe para
     quem pediu menos movimento) e o macaco é medido para encher a moldura
     de cima a baixo. Não estoura o cartão como na tela larga: 22px acima
     dele está o botão "Conhecer os bichinhos", e cabeça de macaco por
     cima de botão não lê como piada, lê como defeito.
     O piso subiu junto porque é ele que levanta a linha do horizonte: com
     50px de chão, um ovo grande fica encostado na borda de baixo.

     A ALTURA baixou de 290 para 276, e o chão de 80 para 66 — os dois pelo
     mesmo número, de propósito. Tudo em cena (ovo, macaco, sombra, cone) é
     posicionado a partir do RODAPÉ da cena e descontado do piso, então subir
     o rodapé 14px e baixar o piso 14px deixa a linha do horizonte, o ovo e o
     macaco exatamente onde estavam em relação ao topo do cartão: o que sai
     são 14px de chão cinza vazio embaixo da sombra, que não desenham nada.
     Eles pagam o ar novo acima do h1 sem tirar um pixel da piada. */
  #hero .hero-cena {
    --esc-o: 11;    /* ovo 88x132: 63% da altura útil do quadro */
    --esc-m: 6;     /* macaco 222x210: exatamente a moldura, do chão ao teto */
    --esc-p: 6;
    --piso: 52px;
    height: 262px;
  }

  /* O SECUNDÁRIO PARA DE DISPUTAR. Em tela de telefone os dois botões vinham
     de largura cheia: 317px de amarelo e 317px de branco, um debaixo do
     outro, iguais em tudo menos na cor. Dois retângulos do mesmo tamanho
     empatam — e o branco ainda ganhava, porque contrasta mais com o rosa.
     Aqui ele passa a ter a largura do texto dele (~215px). Continua pílula
     com traço e sombra dura, como manda a identidade, e continua com 46px de
     altura, que é dedo inteiro; o que ele perde é o direito de parecer tão
     importante quanto o de baixar.
     34px acima dele: é o que solta a garantia do amarelo e faz dele um grupo
     sozinho, entre a ação principal e o cartão. */
  #hero .hero-conhecer {
    width: auto;
    min-height: 46px;
    margin-top: 34px;
    padding: 12px 22px;
  }

  /* e a faixa rosa fecha mais cedo: a casca rachada é a assinatura da
     página, e assinatura cortada ao meio pela dobra não assina nada.
     O AR DE CIMA quase dobrou (30 -> 56px). O h1 é o primeiro objeto depois
     de uma barra de topo com traço de 3px, e 30px de rosa entre os dois
     faziam o título parecer preso na barra — o começo da página era uma
     parede em vez de uma entrada. Os 26px vêm da frase, que agora ocupa duas
     linhas em vez de três, e os outros 14 do chão vazio da cena. O rodapé de
     34 fica: medido na captura de 374x805, a dobra cai nesses 34px de rosa
     liso, com o cartão inteiro acima dela — e num aparelho de 844 de verdade
     a casca rachada aparece inteira, com um fio da seção seguinte. */
  #hero {
    padding-top: 56px;
    padding-bottom: 18px;
  }

  /* A nota "12 bichinhos. A lista oficial tem 11." é uma isca boa em tela
     larga, onde ela fica ao lado do palco que explica a conta. Solta a
     15px embaixo de dois botões, sem o palco por perto, ela não lê como
     piada: lê como erro de contagem — e ainda entra em rota de colisão
     com o "Onze bichinhos" da seção seguinte, que está a uma rolagem de
     distância. O macaco continua contado: ele sai do ovo logo abaixo. */
  #hero .hero-nota {
    display: none;
  }

  /* O LADRILHO DO BOTÃO.
     O ovo tem 60x54 a --esc:3 e o ladrilho do telefone tem 42: com
     overflow:hidden o resultado era um ovo sem topo nem base, um
     retângulo claro de contorno escuro que podia ser qualquer ícone de
     arquivo. A --esc:2 ele cabe inteiro (16x24 de arte visível), com o
     bico em cima e a barriga embaixo — e aí é inequivocamente um ovo,
     o mesmo que aparece em "Sai do ovo". */
  #hero .hero-ladrilho-ovo {
    --esc: 2;
  }

  .cel-pronto .cel-menu-botao {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    flex: none;
    /* casca, não amarelo. Na primeira tela o amarelo é do botão de baixar, e
       dois objetos amarelos brigando pelo olho fazem o menu parecer a ação
       principal — que ele não é. */
    background: var(--casca);
    border: var(--traco) solid var(--ameixa);
    border-radius: var(--raio-peq);
    box-shadow: var(--sombra-btn);
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
  }

  .cel-menu-botao:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--ameixa);
  }

  /* o hambúrguer: três traços que viram X quando abre. O do meio é o próprio
     span; os de cima e de baixo são absolutos, senão eles empilhariam dentro
     da caixa de 3px e o desenho sairia torto. */
  .cel-tracos {
    position: relative;
    display: block;
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: var(--ameixa);
    transition: background-color 0.12s ease;
  }

  .cel-tracos::before,
  .cel-tracos::after {
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: var(--ameixa);
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
  }

  .cel-tracos::before { top: -7px; }
  .cel-tracos::after  { top: 7px; }

  .cel-menu-botao[aria-expanded='true'] .cel-tracos {
    background: transparent;
  }

  .cel-menu-botao[aria-expanded='true'] .cel-tracos::before {
    transform: translateY(7px) rotate(45deg);
  }

  .cel-menu-botao[aria-expanded='true'] .cel-tracos::after {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* O PAINEL — um cartão colado embaixo do topo, com o mesmo adesivo de
     sempre: traço de 3px e sombra dura. */
  .cel-pronto .cel-menu {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    left: var(--respiro);
    right: var(--respiro);
    z-index: 60;
    padding: 8px;
    background: var(--casca);
    border: var(--traco) solid var(--ameixa);
    border-radius: var(--raio-card);
    box-shadow: var(--sombra);
    transform-origin: 92% 0;
    transform: translateY(-8px) scale(0.96);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1),
                opacity 0.14s ease, visibility 0s linear 0.18s;
  }

  .cel-pronto .cel-menu.cel-menu--aberto {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .cel-menu a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 14px;
    border-radius: var(--raio-peq);
    font-size: 17px;
    font-weight: 700;
  }

  .cel-menu a + a {
    box-shadow: 0 -1px 0 rgba(53, 33, 61, 0.14);
  }

  .cel-menu a:active {
    background: var(--gema-clara);
  }

  .cel-menu-baixar {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }

  .cel-menu-nota {
    padding: 8px 4px 2px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
  }

  /* ------------------------------------------------------------------
     4. A BARRA DE BAIXO — o recado que o celular precisa ouvir
     Aparece depois da primeira tela (a dobra é do hero, não minha) e some
     sobre o fecho, que já tem o botão grande dele. Fica acima do palco dos
     bichinhos (z 40) e abaixo do topo (z 50).
     ------------------------------------------------------------------ */
  .cel-pronto .cel-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    padding: 11px var(--respiro);
    padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
    background: var(--casca);
    border-top: var(--traco) solid var(--ameixa);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1),
                visibility 0s linear 0.3s;
  }

  .cel-pronto .cel-barra.cel-barra--dentro {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }

  .cel-barra-texto {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
  }

  .cel-barra-texto strong {
    font-weight: 800;
  }

  .cel-barra .btn {
    flex: none;
    min-height: 46px;
    padding: 11px 18px;
    font-size: 15px;
  }

  /* ------------------------------------------------------------------
     5. O BILHETE — a folha que sobe e explica que é app de PC
     ------------------------------------------------------------------ */
  .cel-pronto .cel-bilhete {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    visibility: hidden;
  }

  .cel-pronto .cel-bilhete.cel-bilhete--aberto {
    visibility: visible;
  }

  .cel-bilhete-fundo {
    position: absolute;
    inset: 0;
    background: rgba(53, 33, 61, 0.5);
    opacity: 0;
    transition: opacity 0.24s ease;
  }

  .cel-bilhete--aberto .cel-bilhete-fundo {
    opacity: 1;
  }

  .cel-bilhete-folha {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 92vh;
    overflow-y: auto;
    padding: 22px var(--respiro) calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--casca);
    border-top: var(--traco) solid var(--ameixa);
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
  }

  .cel-bilhete--aberto .cel-bilhete-folha {
    transform: none;
  }

  .cel-bilhete-fechar {
    position: absolute;
    top: 16px;
    right: var(--respiro);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--casca);
    border: 2.5px solid var(--ameixa);
    border-radius: var(--pilula);
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
  }

  /* .bicho é um <span>: sem display de bloco a largura e a altura não valem
     nada e o bichinho some. Na barra ele é filho de um flex e já vira bloco;
     aqui, não. */
  .cel-bilhete-bicho {
    display: block;
    margin-bottom: 8px;
  }

  .cel-bilhete-titulo {
    font-family: var(--f-titulo);
    font-weight: 800;
    font-size: 27px;
    line-height: 1.15;
    letter-spacing: -0.3px;
  }

  .cel-bilhete-texto {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.55;
  }

  .cel-bilhete-endereco {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--gema-clara);
    border: 2.5px solid var(--ameixa);
    border-radius: var(--raio-peq);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-align: center;
    overflow-wrap: anywhere;
    user-select: all;
  }

  .cel-bilhete-copiar {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
  }

  .cel-bilhete-fina {
    margin-top: 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    opacity: 0.9;
  }

  /* Folha aberta: o fundo para de rolar por trás dela. */
  .cel-travado {
    overflow: hidden;
  }
}

/* Movimento reduzido: a barra e a folha aparecem e somem sem deslizar. Elas
   continuam existindo — quem pediu menos movimento não pediu menos página. */
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
  .cel-pronto .cel-barra,
  .cel-bilhete-folha,
  .cel-pronto .cel-menu {
    transform: none;
  }

  .cel-pronto .cel-barra:not(.cel-barra--dentro) {
    display: none;
  }
}

/* ...até aqui. FIM DA ZONA CELULAR. */

/* ===========================================================================
   ZONA: VIDA            transversal        prefixo: vida-*
   ---------------------------------------------------------------------------
   Esta zona não tem seção. O que ela cuida é do que atravessa as cinco: a
   ENTRADA das coisas, a resposta ao mouse e ao teclado, e a regra de que nada
   disso pode custar leitura.

   A LEI DESTA ZONA, e ela vale mais que qualquer efeito daqui:

       ESTADO DE REPOUSO = VISÍVEL.

   Ou seja: se a animação não rodar — porque a janela não pinta, porque o JS
   quebrou, porque a pessoa pediu menos movimento — o elemento aparece INTEIRO
   e legível. A animação é o enfeite; o texto é o produto. Foi exatamente o
   contrário disso que custou a rodada anterior: o `.revelar` do chão comum
   esconde com `opacity: 0` e só desliga o esconderijo por JS + observador +
   `transition-delay`, e no hero — que está ACIMA DA DOBRA — isso significava
   título, parágrafo e os dois botões AUSENTES da tela por mais de um segundo
   depois do load. Medido, não deduzido: capturas em 250, 400, 600, 800 e
   1000ms com a coluna esquerda vazia. Uma promessa que chega em segundo lugar
   não é promessa, é surpresa.

   Por isso, aqui, entrada de conteúdo é `animation` e nunca `transition`:
   `animation` sem `fill-mode` deixa o ESTADO NORMAL do elemento ser o visível
   e usa a animação só como um empurrãozinho por cima. Se ela não tocar, nada
   se perde. `transition` faz o oposto — precisa de um estado escondido morando
   no CSS, e estado escondido é conteúdo refém.
   =========================================================================== */

/* O EMPURRÃO. Quem carrega o movimento é o deslocamento de 10px; a opacidade
   entra só como maciez e por isso começa alta, em 0,8. O número foi escolhido
   por CONTRASTE, não por gosto: ameixa cheia sobre o rosa chiclete dá 4,8:1, e
   a 0,8 ela ainda dá ~3,7:1 — ou seja, o pior quadro desta animação continua
   sendo texto que se lê. A 0,55, que era o primeiro palpite, caía para 2,3:1 e
   o quadro zero virava um borrão bonito. Enfeite não pode custar leitura. */
@keyframes vida-assenta {
  from { opacity: 0.8; transform: translateY(10px); }
  to   { opacity: 1;   transform: none; }
}

/* O cartão vem de um pouco mais longe e mais devagar, porque ele é o último
   da fila e porque peça grande que anda pouco parece travada. */
@keyframes vida-assenta-cartao {
  from { opacity: 0.8; transform: translateY(15px) scale(0.985); }
  to   { opacity: 1;   transform: none; }
}

/* ---------------------------------------------------------------------------
   1. O HERO ENTRA SEM PEDIR LICENÇA A NINGUÉM
   Sem observador (ele está na primeira tela: observar se a primeira tela está
   na tela é gastar um quadro para descobrir o óbvio), sem contagem de quadro,
   sem esperar sprite. O `transition: none` desarma o `.revelar` do chão comum
   e o `opacity: 1` devolve o texto ao primeiro quadro pintado.

   O ESCALONAMENTO É POR DURAÇÃO, NÃO POR ATRASO — e essa é a decisão técnica
   da zona. Todos partem juntos e chegam em ordem. Atraso obriga o elemento a
   ficar num estado anterior enquanto espera, e foi um `transition-delay` de
   0,08 a 0,32s que segurou o hero da rodada passada. Duração diferente dá a
   mesma cascata para o olho e não deve nada a relógio nenhum.

   E a ORDEM é a certa: título, frase e botão chegam ANTES do cartão. O que
   convence está no texto; o ovo é quem confirma.
   --------------------------------------------------------------------------- */
.com-js #hero .revelar {
  opacity: 1;
  transform: none;
  transition: none;
  animation: vida-assenta var(--vida-dur, 230ms) cubic-bezier(0.22, 0.86, 0.3, 1);
}

.com-js #hero .hero-selos  { --vida-dur: 190ms; }
.com-js #hero .hero-titulo { --vida-dur: 220ms; }
.com-js #hero .hero-fina   { --vida-dur: 260ms; }
.com-js #hero .hero-acoes  { --vida-dur: 300ms; }
.com-js #hero .hero-nota   { --vida-dur: 330ms; }

/* o cartão da chocadeira fecha a cascata. Ele já era visível no primeiro
   quadro e continua sendo — só ganhou o lugar dele na ordem. */
.com-js #hero .hero-palco {
  animation: vida-assenta-cartao 420ms cubic-bezier(0.22, 0.86, 0.3, 1);
}

/* ---------------------------------------------------------------------------
   2. QUALQUER OUTRA COISA QUE JÁ NASÇA NA TELA
   O JS (peça VIDA, no app.js) mede quem está dentro da primeira tela no
   carregamento e marca com `.vida-ja`: entra revelado e com o mesmo empurrão
   do hero, em vez de esperar o observador. Vale principalmente no telefone,
   onde a primeira tela mostra pedaços de mais de uma peça.
   --------------------------------------------------------------------------- */
.com-js .revelar.vida-ja {
  opacity: 1;
  transform: none;
  transition: none;
  animation: vida-assenta var(--vida-dur, 240ms) cubic-bezier(0.22, 0.86, 0.3, 1);
}

/* ---------------------------------------------------------------------------
   3. AS DUAS SAÍDAS DE EMERGÊNCIA
   Janela que não pinta e movimento reduzido levam a página PARADA e INTEIRA —
   nunca parada e vazia.

   E "janela que não pinta" aqui quer dizer uma coisa mais estreita do que
   parece, medida nesta página: a janela escondida da ferramenta de captura
   RODA requestAnimationFrame (126 quadros em 350ms, medido) e mesmo assim o
   RELÓGIO DAS ANIMAÇÕES fica em zero — animação de CSS é do compositor, e
   janela escondida não compõe. Capturas em 40ms e em 130ms saíram idênticas,
   as duas no primeiro quadro da animação. Ou seja: contar quadros, como faz o
   `conferirQuadros` do chão comum, NÃO detecta este caso. Quem detecta é o
   app.js da peça VIDA, perguntando ao próprio relógio de animação se ele
   andou — e é ele quem liga o `.sem-quadros` que estas linhas escutam.
   --------------------------------------------------------------------------- */
.sem-quadros #hero .revelar,
.sem-quadros #hero .hero-palco,
.sem-quadros .revelar.vida-ja,
/* E a trava de tempo. A mais longa destas entradas dura 420ms; aos 700ms o
   app.js liga o `.vida-pronta` e a animação sai do caminho, seja lá o que
   tenha acontecido. Para quem tem um navegador de verdade isto não muda um
   pixel — a animação já acabou faz tempo. Para qualquer ambiente esquisito que
   ainda não imaginamos, é a garantia escrita de que o hero está em opacidade
   cheia antes de um segundo. Ela existe porque o custo de estar errado sobre
   isso já é conhecido: uma rodada inteira perdida. */
.vida-pronta #hero .revelar,
.vida-pronta #hero .hero-palco,
.vida-pronta .revelar.vida-ja {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .com-js #hero .revelar,
  .com-js #hero .hero-palco,
  .com-js .revelar.vida-ja {
    animation: none !important;
  }

  /* O ESCALONAMENTO DO CHÃO COMUM MORRE AQUI, e não é preciosismo: o reset lá
     de cima zera a DURAÇÃO da transição (0,001ms) mas não o ATRASO. Um
     `transition-delay` de 0,32s sobrevivendo ao `reduce` é exatamente isso:
     um terço de segundo de conteúdo escondido para quem pediu menos
     movimento. Atraso zero — quem pediu menos movimento não pediu menos
     página, e muito menos página mais tarde. */
  .com-js .revelar {
    transition-delay: 0s !important;
  }
}

/* ---------------------------------------------------------------------------
   4. A ENTRADA DE QUEM VEM ROLANDO
   Ela existe, mas NÃO MORA AQUI: 12px em 0,42s, escritos lá no `.com-js
   .revelar` do chão comum, no lugar de origem. Repetir a regra no fim do
   arquivo custaria caro e em silêncio — uma segunda `.com-js .revelar` daqui
   passaria por cima da transição que cada peça escreveu para o próprio
   elemento na zona dela (mesma especificidade, e vence quem vem depois), e é
   dessas transições que vive a rolagem de RECURSOS e de MOVIMENTO. Uma
   entrada bonita não vale uma seção com rastro.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   5. HOVER QUE RESPONDE
   A identidade já diz que toda peça clicável tem 3px de traço e uma sombra
   DURA — ou seja, ela tem espessura e flutua sobre o papel. O `:active` do
   chão comum usa isso: apertar afunda a peça contra a própria sombra. Faltava
   a outra metade do gesto. Passar o mouse LEVANTA: a peça sobe 2px na
   diagonal e a sombra cresce na mesma medida, que é o que uma coisa levantada
   faz com a sombra dela. Não é um brilho a mais — é a peça reagindo à mão.

   `:not(:active)` para o apertar continuar ganhando do passar (senão a peça
   levantaria no exato instante em que devia afundar), e `(hover: hover)` para
   o telefone não herdar um estado que ele não sabe desfazer.

   Sobe também no foco de teclado, e isso é de propósito: quem navega por Tab
   merece a mesma peça viva que quem navega com o mouse.

   O `transition` que dá o tempo a este gesto está no `.btn` do chão comum,
   pela mesma razão da entrada acima: regra repetida no fim do arquivo vence em
   silêncio a regra que outra peça escrever amanhã na zona dela. Aqui ficam só
   os estados — que são meus e de mais ninguém.
   --------------------------------------------------------------------------- */

/* apertar é seco; levantar é macio. */
.btn:active {
  transition-duration: 0.06s;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:active) {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ameixa);
  }

  .btn--grande:hover:not(:active),
  .hero-baixar:hover:not(:active) {
    box-shadow: 7px 7px 0 var(--ameixa);
  }
}

.btn:focus-visible:not(:active) {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ameixa);
}

.btn--grande:focus-visible:not(:active),
.hero-baixar:focus-visible:not(:active) {
  box-shadow: 7px 7px 0 var(--ameixa);
}

/* O sublinhado do topo também deixou de ser interruptor, e a regra está no
   `.topo-nav a` do esqueleto pelo mesmo motivo das outras duas. O rodapé é da
   zona FECHO e fica com quem é dono dele — a mesma linha lá teria vindo daqui
   por cima do que aquela peça escreveu, e ninguém precisa descobrir isso numa
   segunda-feira. */

/* ...até aqui. FIM DA ZONA VIDA. */