/* =====================================================================
   PORTFÓLIO ZEZÉ VITOR — folha de estilo única do site

   COMO TROCAR A CARA DO SITE:
   tudo o que define cor, fonte e tamanho de letra mora no bloco
   ":root" logo abaixo. Mudando ali, muda no site inteiro.
   O bloco [data-tema="noite"] repete só as cores que mudam à noite.
   ===================================================================== */

/* Um único arquivo de fonte, um único peso: carrega rápido.
   "swap" mostra o texto na hora com a fonte reserva e troca quando a
   pixelada chega, então a página nunca fica em branco esperando. */
@font-face {
  font-family: "PixelSerif";
  src: url("../assets/fonte/PixelSerif_16px_v02.otf") format("opentype");
  font-display: swap;
}

:root {
  /* ---------- Cores do modo DIA ---------- */
  /* O fundo do site é o azul-marinho do mato escuro da cena.
     A cena termina exatamente nessa cor, por isso não há "emenda". */
  --cor-fundo: #0e2237;
  --cor-fundo-escuro: #0a1628;   /* rodapé e áreas afundadas */
  --cor-ceu: #4b89d8;            /* topo do céu: preenche o que o cenário não cobre */
  --cor-painel: #16304d;
  --cor-painel-luz: #24466b;
  --cor-painel-sombra: #0b1a2c;
  --cor-texto: #f1e6c8;          /* creme de pergaminho */
  --cor-texto-suave: #a4b4cb;
  --cor-destaque: #4ba5a8;       /* turquesa do boné */
  --cor-destaque-luz: #8fd6d4;
  --cor-destaque-sombra: #24676c;
  --cor-ouro: #f2b544;           /* luz das lamparinas */
  --cor-ouro-sombra: #a8701f;
  --cor-vermelho: #c0392f;       /* botão principal e dado, do kit de interface */
  --cor-vermelho-luz: #e5604f;
  --cor-vermelho-sombra: #6e1a1a;
  --cor-texto-sobre-destaque: #0a1628;

  /* ---------- Fontes ---------- */
  --fonte: "PixelSerif", Georgia, serif;

  /* ---------- Tamanhos de letra ----------
     A fonte foi desenhada em 16 pixels; ela só fica nítida em
     múltiplos de 16. Por isso a escala pula de 16 em 16. */
  --t-corpo: 16px;
  --t-medio: 32px;
  --t-titulo: 64px;
  --t-gigante: 112px;

  /* ---------- Medidas ---------- */
  --px: 4px;                      /* o "pixel grande" das peças desenhadas em CSS */
  --ui: 3px;                      /* tamanho de 1 pixel das peças do kit de interface */
  --margem: clamp(16px, 4vw, 56px);
  --altura-topo: 46px;              /* chave dia/noite e botões do topo: mesma altura */
  --largura-texto: 40rem;

  /* ---------- Efeito de tela antiga ----------
     Para desligar o efeito, troque os dois por 0. */
  --crt-linhas: 0.16;
  --crt-cantos: 0.30;
  --crt-brilho: 0.16;   /* força do brilho de fósforo na abertura */
}

/* ---------- Cores do modo NOITE ---------- */
[data-tema="noite"] {
  --cor-fundo: #051028;
  --cor-fundo-escuro: #030918;
  --cor-ceu: #142f72;
  --cor-painel: #13263f;
  --cor-painel-luz: #203a5c;
  --cor-painel-sombra: #081322;
}

/* ---------------------------------------------------------------------
   Regras de segurança — vêm antes de tudo de propósito
   --------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* Quem pediu menos movimento no próprio aparelho recebe o site parado. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

html { scroll-behavior: smooth; background: var(--cor-fundo); }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.5;
  -webkit-font-smoothing: none;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

/* Só desenho de pixel ganha "pixelated". Os anúncios dos projetos
   NUNCA usam esta classe: aparecem com a qualidade original. */
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }

a { color: var(--cor-destaque-luz); text-underline-offset: 4px; }

:focus-visible { outline: var(--px) solid var(--cor-ouro); outline-offset: 4px; }

h1, h2, h3, p { margin: 0; }

/* "Pular para o conteúdo": só aparece quando alguém navega pelo teclado
   (tecla Tab), para não precisar passar por todo o cabeçalho. */
.pular {
  position: absolute; left: 16px; top: -100px; z-index: 70;
  padding: 10px 16px; background: var(--cor-ouro); color: var(--cor-texto-sobre-destaque);
  text-decoration: none;
}
.pular:focus { top: 16px; }

/* Texto só para leitores de tela: existe, mas não aparece. */
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
h1, h2, h3 { font-weight: normal; line-height: 1.1; text-wrap: balance; }

/* ---------------------------------------------------------------------
   Efeito de tela de tubo (CRT) — tudo bem sutil.
   1) linhas de varredura e cantos escurecidos (camada fixa, leve);
   2) "vidro curvo": cantos arredondados escuros, como a borda de uma TV;
   3) na abertura, um brilho de fósforo (cópia borrada do cenário em
      modo "tela") e um tremidinho de imagem a cada tanto.
   Para desligar tudo, troque --crt-linhas, --crt-cantos e --crt-brilho por 0.
   --------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 50;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, var(--crt-linhas)) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 120% 110% at center, transparent 62%, rgba(0, 0, 0, var(--crt-cantos)) 100%);
  /* cantos do vidro: uma moldura escura arredondada, quase invisível no meio */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 0 80px rgba(0, 0, 0, 0.18);
  border-radius: 18px;
}

/* Contorno escuro em volta das letras: lê bem em qualquer fundo. */
.contorno {
  text-shadow:
    -2px -2px 0 var(--cor-fundo-escuro), 2px -2px 0 var(--cor-fundo-escuro),
    -2px  2px 0 var(--cor-fundo-escuro), 2px  2px 0 var(--cor-fundo-escuro),
     0   -2px 0 var(--cor-fundo-escuro), 0    2px 0 var(--cor-fundo-escuro),
    -2px  0   0 var(--cor-fundo-escuro), 2px  0   0 var(--cor-fundo-escuro);
}

/* ---------------------------------------------------------------------
   Peças do kit de interface
   As molduras são imagens pequenas "esticadas pelo meio" (os cantos
   ficam intactos e só o miolo estica). Assim uma moldura de 27 pixels
   serve para caixas de qualquer tamanho.
   --------------------------------------------------------------------- */

/* Moldura do layout (a mesma dos botões PROJETO e SOBRE do seu mock):
   contorno escuro, linha turquesa dupla, filete escuro e miolo
   azul-marinho, com cantos chanfrados em degrau. Uma imagem de 20x20
   pixels esticada só no meio serve para botão, título e carta.
   --ui é o tamanho de cada pixel dessa moldura na tela. */
.painel, .selo, .botao {
  border: solid transparent;
  border-width: calc(7 * var(--ui));
  border-image: url("../assets/ui/botao.png") 7 fill / calc(7 * var(--ui)) stretch;
  image-rendering: pixelated;
  color: var(--cor-texto);
}
.painel { --ui: 3px; }
.selo { --ui: 2px; }

/* Botões: texto em caixa alta, como no layout. Mouse por cima: a linha
   acende. Apertar: afunda 3px. */
.botao {
  --ui: 2px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px;
  padding: 0 18px 2px;
  background: none;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.08s steps(2);
}
.botao:hover, .botao:focus-visible {
  border-image-source: url("../assets/ui/botao-luz.png");
  color: #fff4d6;
}
.botao:active { transform: translateY(3px); }
/* Cor de fundo igual ao miolo da moldura: se a imagem da moldura demorar
   ou falhar, o texto continua legível (e os testes de contraste enxergam
   o fundo de verdade). Só pinta por dentro da borda. */
.painel, .selo, .botao { background-color: #0e2239; background-clip: padding-box; }
.botao:hover, .botao:focus-visible { background-color: #16304e; }
/* Versão quadrada (setas). */
.botao--quadrado { padding: 0; width: 64px; min-height: 64px; }

/* Setas desenhadas em CSS (a fonte não tem esses símbolos). */
.seta { width: 12px; height: 16px; background: currentColor; }
.seta--esq { clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.seta--dir { clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* ---------------------------------------------------------------------
   Cabeçalho — igual em todas as páginas
   --------------------------------------------------------------------- */
.cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 24px var(--margem);
}
.cabecalho--sobre-cena { position: absolute; inset: 0 0 auto 0; z-index: 4; }
/* Páginas internas: chave + botão Início juntos à esquerda. */
.cabecalho__esq { display: flex; align-items: center; gap: 12px; }
.botao--inicio { height: var(--altura-topo); min-height: 0; padding: 0 16px; line-height: 1; gap: 10px; }

.menu-topo { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.menu-topo .botao { min-width: 140px; height: var(--altura-topo); min-height: 0; padding: 0 16px; line-height: 1; }

/* Chave de dia e noite: a chave de madeira do seu layout, desenhada em
   pixel 2x, com exatamente a mesma altura dos botões PROJETO e SOBRE
   (--altura-topo). Mostra o sol de dia e a lua de noite. */
.chave {
  position: relative;
  /* 10% maior que os botões, como você pediu */
  height: calc(var(--altura-topo) * 1.1); width: calc(var(--altura-topo) * 1.1 * 48 / 23);
  padding: 0; border: 0; background: none; cursor: pointer;
}
.chave img { position: absolute; inset: 0; width: 100%; height: 100%; }
.chave__noite { opacity: 0; }
[data-tema="noite"] .chave__dia { opacity: 0; }
[data-tema="noite"] .chave__noite { opacity: 1; }
.chave--virando { animation: chave-aperta 0.24s steps(3); }
@keyframes chave-aperta {
  0%   { transform: scale(1, 1); }
  40%  { transform: scale(1.08, 0.86); }
  100% { transform: scale(1, 1); }
}

/* ---------------------------------------------------------------------
   Cena de abertura (Home)

   O "palco" é uma tela de jogo de 480x270 pixels. A medida --u é o
   tamanho de UM pixel do desenho na tela. Arredondamos para número
   inteiro (3px, 4px...) para a imagem ficar nítida, e tudo o que mora
   no palco é medido em --u.
   --------------------------------------------------------------------- */
.cena {
  --foco: 0.7;   /* quando o cenário é mais largo que a tela, qual parte aparece (0 = esquerda, 1 = direita) */
  --u: calc(max(100vw, 100svh * 16 / 9) / 480);
  position: relative;
  height: max(600px, 100svh);
  overflow: hidden;
  isolation: isolate;
  background: var(--cor-ceu);
}
@supports (width: round(nearest, 10px, 1px)) {
  .cena { --u: max(round(nearest, calc(max(100vw, 100svh * 16 / 9) / 480), 1px), calc(100vw / 480)); }
}
/* Acima do palco (telas altas) o céu continua com EXATAMENTE a cor da
   primeira linha do cenário e, à noite, com as mesmas estrelas.
   Assim não aparece "emenda" entre o topo e o resto. */
[data-tema="noite"] .cena::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  background: url("../assets/cena/estrelas-B.png") 0 0 / calc(480 * var(--u)) calc(270 * var(--u)) repeat;
  image-rendering: pixelated;
}

.palco {
  position: absolute; bottom: 0;
  left: calc((100% - 480 * var(--u)) * var(--foco));
  width: calc(480 * var(--u)); height: calc(270 * var(--u));
  z-index: -1;
}
.palco--frente { z-index: 1; pointer-events: none; }
.palco--frente > * { pointer-events: auto; }

.cam { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

.tema-noite { display: none; }
[data-tema="noite"] .tema-dia { display: none; }
[data-tema="noite"] .tema-noite { display: block; }

/* ---------- Animações do cenário ----------
   Só "transform" e "opacity" se mexem. Os "steps()" fazem o movimento
   andar aos pulinhos, como animação desenhada quadro a quadro. */
/* Nuvens: andam 1 pixel por vez, as de perto mais rápido que as de longe. */
.cam--longe { animation: nuvem-longe 128s steps(32) infinite alternate; }
.cam--perto { animation: nuvem-perto 70s steps(14) infinite alternate; }
@keyframes nuvem-longe { from { transform: translateX(calc(var(--u) * -16)); } to { transform: translateX(calc(var(--u) * 16)); } }
@keyframes nuvem-perto { from { transform: translateX(calc(var(--u) * -8)); } to { transform: translateX(calc(var(--u) * 6)); } }

.cam--fumaca { animation: fumaca 5s steps(7) infinite; }
@keyframes fumaca {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(calc(var(--u) * -7)); opacity: 0; }
}

.cam--mato-a { animation: mato 2.8s steps(1) infinite; }
.cam--mato-b { animation: mato 3.6s steps(1) infinite reverse; }
.cam--mato-c { animation: mato 4.4s steps(1) infinite; }
@keyframes mato {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(var(--u)); }
}

.cam--neon-apagado { opacity: 0; animation: neon-dia 7s steps(1) infinite; }
@keyframes neon-dia {
  0%, 86%, 89%, 93%, 100% { opacity: 0; }
  87%, 91% { opacity: 1; }
}

.cam--estrelas-a { animation: estrela 3.2s steps(1) infinite; }
.cam--estrelas-b { animation: estrela 3.2s steps(1) infinite 1.6s; }
@keyframes estrela { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.cam--lua { inset: auto; left: calc(66 * var(--u)); top: calc(26 * var(--u)); width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

.cam--brilho { animation: luz 2.6s steps(3) infinite alternate; }
@keyframes luz { from { opacity: 0.7; } to { opacity: 1; } }
.cam--neon-brilho { animation: neon-noite 6s steps(1) infinite; }
@keyframes neon-noite {
  0%, 84%, 88%, 100% { opacity: 1; }
  85%, 87% { opacity: 0.35; }
}

/* Ilhas flutuantes (fazem parte do céu): sobem e descem 1 pixel bem
   devagar; as pedrinhas soltas, um pouco mais e em outro ritmo. */
.cam--ilhas  { animation: flutua 5s steps(1) infinite; }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--u)); } }
@keyframes flutua-pedra {
  0%, 100% { transform: translateY(0); }
  33% { transform: translateY(var(--u)); }
  66% { transform: translateY(calc(var(--u) * 2)); }
}
/* Cachoeira: 3 quadros com a água "descendo", e balança junto com a ilha. */
.cam--cachoeira { overflow: hidden; animation: flutua 5s steps(1) infinite; }
.cachoeira {
  position: absolute; left: 0; top: 0; width: 300%; height: 100%;
  background-size: 100% 100%; background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: agua 0.45s steps(3) infinite;
}
.cachoeira { background-image: url("../assets/cena/cachoeira-dia.png"); }
.cachoeira--noite { background-image: url("../assets/cena/cachoeira-noite.png"); }
@keyframes agua { to { transform: translateX(-100%); } }

/* Brilho de fósforo: o cenário borrado por cima, em modo "tela".
   As partes claras (céu, luzes, letreiro) ganham um halo bem leve. */
.cam--brilho-tubo {
  filter: blur(calc(var(--u) * 2.5)) saturate(1.3);
  mix-blend-mode: screen;
  opacity: var(--crt-brilho);
}
/* Tremidinho de imagem: 1 pixel para o lado por 2 quadros, de vez em quando. */
.palco { animation: tremidinho 11s steps(1) 4s infinite; }
@keyframes tremidinho {
  0%, 96%, 98%, 100% { transform: none; }
  97%  { transform: translateX(1px); }
  97.5% { transform: translateX(-1px); }
}

/* Faixa clara que desce devagar, como a atualização de uma TV antiga. */
.cena::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 22%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.045) 70%, transparent);
  animation: varredura 9s linear infinite;
}
@keyframes varredura { from { transform: translateY(-100%); } to { transform: translateY(560%); } }

/* ---------- O personagem ----------
   Cada animação é uma "tira" de 12 quadros lado a lado (120x112 pixels
   cada). Uma janela do tamanho de 1 quadro mostra um de cada vez.
   O tempo de cada quadro é escolhido um a um (lista no fim deste
   bloco): pose de descanso segura mais, movimentos rápidos passam
   rápido. É isso que deixa o movimento orgânico e não "acelerado". */
.ze {
  position: absolute;
  /* centro da tela convertido para dentro do palco (que pode estar deslocado) */
  left: calc(50vw - (100vw - 480 * var(--u)) * var(--foco) - 60 * var(--u));
  top: calc(97 * var(--u));
  width: calc(120 * var(--u)); height: calc(112 * var(--u));
  padding: 0; border: 0; background: none; cursor: pointer;
}
.ze__corpo { position: absolute; inset: 0; display: block; overflow: hidden; }
.ze--troca .ze__corpo { animation: troca 0.3s steps(3); }
@keyframes troca { 0% { transform: scale(1.06, 0.92); } 60% { transform: scale(0.97, 1.03); } 100% { transform: scale(1); } }
[data-tema="noite"] .ze__corpo { filter: brightness(0.82) saturate(0.85); }

.ze__tira {
  position: absolute; left: 0; top: 0;
  width: calc(1440 * var(--u)); height: 100%;
  background-size: 100% 100%; background-repeat: no-repeat;
  image-rendering: pixelated;
}
/* 1. Parado coçando a barriga: descansa e coça, para sempre. */
.ze__tira--parado {
  background-image: url("../assets/ze/parado.png");
  animation: q-parado 3.78s step-end infinite;
}
/* 2. Animações do clique. */
.ze__tira--violao   { background-image: url("../assets/ze/violao.png");   animation: q-violao 2.04s step-end infinite; }
.ze__tira--torcida  { background-image: url("../assets/ze/torcida.png");  animation: q-torcida 2.23s step-end infinite; }
.ze__tira--colegial { background-image: url("../assets/ze/colegial.png"); animation: q-colegial 8.4s step-end infinite; }
.ze__tira--violao, .ze__tira--torcida, .ze__tira--colegial { display: none; }
.ze[data-pose] .ze__tira--parado { display: none; }
.ze[data-pose="violao"] .ze__tira--violao,
.ze[data-pose="torcida"] .ze__tira--torcida,
.ze[data-pose="colegial"] .ze__tira--colegial { display: block; }

/* Tempo de cada quadro (gerado a partir da lista de quadros e milésimos). */
/* parado: 12 passos, 3780 ms */
@keyframes q-parado {
  0.000% { transform: translateX(calc(var(--u) * 0)); }
  42.328% { transform: translateX(calc(var(--u) * -120)); }
  47.090% { transform: translateX(calc(var(--u) * -240)); }
  51.852% { transform: translateX(calc(var(--u) * -360)); }
  57.143% { transform: translateX(calc(var(--u) * -480)); }
  61.905% { transform: translateX(calc(var(--u) * -600)); }
  66.667% { transform: translateX(calc(var(--u) * -720)); }
  73.545% { transform: translateX(calc(var(--u) * -840)); }
  78.307% { transform: translateX(calc(var(--u) * -960)); }
  83.069% { transform: translateX(calc(var(--u) * -1080)); }
  88.360% { transform: translateX(calc(var(--u) * -1200)); }
  93.122% { transform: translateX(calc(var(--u) * -1320)); }
  100% { transform: translateX(calc(var(--u) * -1320)); }
}
/* violao: 12 passos, 2040 ms */
@keyframes q-violao {
  0.000% { transform: translateX(calc(var(--u) * 0)); }
  8.333% { transform: translateX(calc(var(--u) * -120)); }
  16.667% { transform: translateX(calc(var(--u) * -240)); }
  25.000% { transform: translateX(calc(var(--u) * -360)); }
  33.333% { transform: translateX(calc(var(--u) * -480)); }
  41.667% { transform: translateX(calc(var(--u) * -600)); }
  50.000% { transform: translateX(calc(var(--u) * -720)); }
  58.333% { transform: translateX(calc(var(--u) * -840)); }
  66.667% { transform: translateX(calc(var(--u) * -960)); }
  75.000% { transform: translateX(calc(var(--u) * -1080)); }
  83.333% { transform: translateX(calc(var(--u) * -1200)); }
  91.667% { transform: translateX(calc(var(--u) * -1320)); }
  100% { transform: translateX(calc(var(--u) * -1320)); }
}
/* torcida: 12 passos, 2230 ms */
@keyframes q-torcida {
  0.000% { transform: translateX(calc(var(--u) * 0)); }
  11.659% { transform: translateX(calc(var(--u) * -120)); }
  18.386% { transform: translateX(calc(var(--u) * -240)); }
  25.112% { transform: translateX(calc(var(--u) * -360)); }
  38.565% { transform: translateX(calc(var(--u) * -480)); }
  46.637% { transform: translateX(calc(var(--u) * -600)); }
  53.363% { transform: translateX(calc(var(--u) * -720)); }
  60.090% { transform: translateX(calc(var(--u) * -840)); }
  66.816% { transform: translateX(calc(var(--u) * -960)); }
  73.543% { transform: translateX(calc(var(--u) * -1080)); }
  80.269% { transform: translateX(calc(var(--u) * -1200)); }
  88.341% { transform: translateX(calc(var(--u) * -1320)); }
  100% { transform: translateX(calc(var(--u) * -1320)); }
}
/* colegial: 12 passos, 8400 ms */
@keyframes q-colegial {
  0.000% { transform: translateX(calc(var(--u) * 0)); }
  8.333% { transform: translateX(calc(var(--u) * -120)); }
  16.667% { transform: translateX(calc(var(--u) * -240)); }
  25.000% { transform: translateX(calc(var(--u) * -360)); }
  33.333% { transform: translateX(calc(var(--u) * -480)); }
  41.667% { transform: translateX(calc(var(--u) * -600)); }
  50.000% { transform: translateX(calc(var(--u) * -720)); }
  58.333% { transform: translateX(calc(var(--u) * -840)); }
  66.667% { transform: translateX(calc(var(--u) * -960)); }
  75.000% { transform: translateX(calc(var(--u) * -1080)); }
  83.333% { transform: translateX(calc(var(--u) * -1200)); }
  91.667% { transform: translateX(calc(var(--u) * -1320)); }
  100% { transform: translateX(calc(var(--u) * -1320)); }
}

/* ---------- Nome ----------
   O nome desenhado do seu Head-Final-03: letras vermelhas com contorno
   escuro e sombra. Fica ENTRE o cenário e o Zezé, que aparece na frente
   da segunda linha.
   --tu = tamanho de cada pixel do desenho na tela. No computador vale
   meio pixel do cenário (igual ao seu mock); em telas estreitas encolhe
   para o nome caber inteiro com 16px de folga de cada lado.
   A posição segue o Zezé: a cabeça dele encosta embaixo da 1ª linha. */
.cena__conteudo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.titulo {
  /* ...e em telas baixas (janela pequena) encolhe para não ficar atrás
     da cabeça do Zezé, até um limite mínimo.
     --linha: em que altura do nome (contada em pixels do desenho, de cima)
     fica o topo da cabeça do Zezé. 108 = logo abaixo da 1ª linha (como no
     seu mock). Em tela em pé o nome sobe para o céu (veja mais abaixo).
     --escala: tamanho máximo do nome em relação ao cenário. */
  --linha: 108;
  --escala: 0.5;
  --tu: max(min(var(--u) * var(--escala), (100vw - 32px) / 554, (max(600px, 100svh) - 171 * var(--u) - 84px) / var(--linha)), var(--u) * 0.3);
  position: absolute;
  left: calc(50% - 277 * var(--tu));
  top: max(84px, calc(100% - 171 * var(--u) - var(--linha) * var(--tu)));
  width: calc(554 * var(--tu)); height: calc(220 * var(--tu));
  margin: 0;
}
.titulo__linha {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  /* a imagem tem o dobro do tamanho e o navegador reduz com suavidade:
     fica nítida em qualquer tela, sem pixels de tamanhos diferentes */
  image-rendering: auto;
  animation: nome-cai 0.42s steps(5) 0.25s both;
}
.titulo__linha--2 { animation-delay: 0.5s; }
/* Tela em pé (celular e tablet): o nome sobe para o céu e fica quase
   todo acima da cabeça do Zezé; só a base da 2ª linha encosta no boné. */
@media (orientation: portrait) { .titulo { --linha: 205; } }
/* Monitor bem largo (ex.: 2560x1080): o nome cresce ~30% para ocupar a tela. */
@media (min-aspect-ratio: 2/1) { .titulo { --escala: 0.65; } }
/* À noite o nome acompanha o cenário e escurece um pouco. */
[data-tema="noite"] .titulo__linha { filter: brightness(0.85); }

/* Cada linha "cai" no lugar e quica, como letreiro de tela de título. */
@keyframes nome-cai {
  0%   { opacity: 0; transform: translateY(-14%) scale(1.15); }
  20%  { opacity: 1; }
  70%  { transform: translateY(2%) scale(0.98); }
  100% { opacity: 1; transform: none; }
}

.cena__seta {
  position: absolute; z-index: 2;
  left: 50%; bottom: 24px;
  width: 20px; height: 12px; margin-left: -10px;
  background: var(--cor-texto);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  animation: piscar 1.2s steps(2) infinite;
}
@keyframes piscar { 50% { opacity: 0; } }

/* ---------- Telas mais largas que 16:9 (ex.: 2560x1080) ----------
   O cenário passa a caber pela ALTURA (tudo aparece, do céu ao chão),
   encosta na direita e a sobra da esquerda é preenchida pela "asa":
   o mesmo cenário espelhado, como um reflexo, com as mesmas animações. */
.asa {
  display: none;
  position: absolute; left: 0; bottom: 0; z-index: -1;
  width: max(0px, calc((100% - 480 * var(--u)) * var(--foco)));
  height: calc(270 * var(--u));
  overflow: hidden;
  transform: scaleX(-1);
}
.asa__cena { position: absolute; left: 0; bottom: 0; width: calc(480 * var(--u)); height: 100%; }
@media (min-aspect-ratio: 16/9) {
  .cena { --u: calc(max(600px, 100svh) / 270); --foco: 1; }
  .cena .asa { display: block; }
}

/* ---------- Modo leve ----------
   O leve.js põe a classe "leve" quando o aparelho não dá conta:
   desliga as animações de fundo; conteúdo e personagem continuam. */
.leve .cena::after, .leve .cam--brilho-tubo { display: none; }
/* Telas mais largas que 16:9: o brilho borrado deixava uma linha clara
   onde o cenário espelhado encontra o original. Ali ele fica desligado. */
@media (min-aspect-ratio: 9/5) { .cena .cam--brilho-tubo { display: none; } }
.leve .palco { animation: none; }
.leve .cam--mato-a, .leve .cam--mato-b, .leve .cam--mato-c, .leve .cachoeira { animation: none !important; }

/* ---------------------------------------------------------------------
   Títulos de seção: selo azul
   --------------------------------------------------------------------- */
.secao-titulo { display: flex; justify-content: center; padding: 0 var(--margem); }
.secao-titulo h2 {
  font-size: var(--t-medio);
  padding: 6px 36px 10px;
}

/* ---------------------------------------------------------------------
   Projetos — o carrossel
   --------------------------------------------------------------------- */
.projetos { padding: 72px 0 56px; }
.projetos__dica { margin-top: 16px; color: var(--cor-texto-suave); text-align: center; padding: 0 var(--margem); }

/* A fileira de cartas. SEM JavaScript ela já funciona: é uma faixa que
   rola de lado e "encaixa" cada carta no centro. */
.carrossel {
  --carta: min(560px, 80vw);
  position: relative;
  display: flex; gap: 32px;
  margin: 32px 0 0;
  padding: 32px calc(50% - var(--carta) / 2) 40px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel__item { flex: 0 0 var(--carta); scroll-snap-align: center; }

.carta {
  position: relative;
  display: block;
  padding: 8px 10px 4px;
  color: var(--cor-texto);
  text-decoration: none;
  transition: transform 0.24s steps(4), opacity 0.24s steps(4);
}
.carta__topo {
  display: flex; justify-content: space-between;
  padding: 0 4px 8px;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}
.carta__numero { color: var(--cor-ouro); }
.carta__tela { position: relative; display: block; background: var(--cor-fundo-escuro); }
.carta__imagem { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.carta__tela::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(5, 12, 24, 0.45) 0 2px, transparent 2px 4px);
  opacity: 0;
  transition: opacity 0.24s steps(3);
}
.carta__placa {
  display: block;
  margin-top: 10px;
  padding: 0 2px 4px;
}
.carta__titulo { display: block; font-size: 20px; line-height: 1.2; }
.carta__cliente { display: block; color: var(--cor-destaque-luz); }

.carrossel--pronto .carrossel__item:not(.ativo) .carta { transform: scale(0.86); opacity: 0.75; }
.carrossel--pronto .carrossel__item:not(.ativo) .carta__tela::after { opacity: 1; }
.carrossel--pronto .carrossel__item.ativo .carta { transform: none; }

/* Vitrine: as setas ficam encostadas dos dois lados da carta do meio. */
.vitrine { position: relative; }
.vitrine__seta {
  position: absolute; top: 50%; z-index: 2;
}
.vitrine__seta--esq { left: var(--margem); }
.vitrine__seta--dir { right: var(--margem); }
.vitrine__seta { margin-top: -32px; }

/* Dado centralizado embaixo. Escondido até o JavaScript ligar. */
.controles {
  display: flex; justify-content: center;
  margin-top: 16px;
  padding: 0 var(--margem);
}
/* O dado: botão com o dado vermelho em 3D. Ao clicar, o dado (12
   quadros girando) pula para fora do botão, rodopia no ar, cai de volta
   e o carrossel vai para o projeto sorteado. */
.dado { position: relative; display: inline-block; }
.dado__botao { padding-left: 10px; min-height: 60px; text-transform: none; }
.dado__cubo { width: 40px; height: 40px; }
.dado__voo {
  position: absolute; left: 6px; top: -10px;
  width: 80px; height: 80px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.dado__tira {
  position: absolute; left: 0; top: 0;
  width: 960px; height: 80px;
  background: url("../assets/ui/dado.png") 0 0 / 100% 100% no-repeat;
}
.dado--rolando .dado__cubo { opacity: 0; }
.dado--rolando .dado__voo { animation: dado-salta 0.9s both; }
.dado--rolando .dado__tira { animation: dado-gira 0.48s steps(12) infinite; }
@keyframes dado-salta {
  0%   { opacity: 1; transform: translateY(16px) scale(0.5); animation-timing-function: steps(4); }
  20%  { transform: translateY(-40px) scale(1); }
  45%  { opacity: 1; transform: translateY(-150px) scale(1); animation-timing-function: steps(5); }
  80%  { opacity: 1; transform: translateY(0) scale(1); }
  85%  { opacity: 1; transform: translateY(8px) scale(0.5); }
  92%  { opacity: 1; transform: translateY(-6px) scale(0.5); }
  100% { opacity: 0; transform: translateY(16px) scale(0.5); }
}
@keyframes dado-gira { to { transform: translateX(-100%); } }
.dado--caiu .dado__cubo { animation: dado-pousa 0.3s steps(3); }
@keyframes dado-pousa { 0% { transform: scale(1.3, 0.7); } 60% { transform: scale(0.9, 1.1); } 100% { transform: scale(1); } }

/* ---------------------------------------------------------------------
   Contato — a caixa de diálogo final, desenhada no kit
   A imagem tem altura fixa e estica só no miolo: o retrato e a aba do
   nome ficam sempre do mesmo tamanho; a parte do texto cresce para o lado.
   --------------------------------------------------------------------- */
.contato { --d: 4px; padding: 96px var(--margem) 112px; display: grid; justify-items: center; }
.dialogo {
  position: relative;
  width: 100%; max-width: 820px;
  height: calc(43 * var(--d));
  display: flex; align-items: center;
  /* espaço do retrato à esquerda, da moldura em cima e nos lados */
  border: solid transparent;
  border-width: calc(13 * var(--d)) calc(4 * var(--d)) calc(3 * var(--d)) calc(42 * var(--d));
  border-image: url("../assets/ui/dialogo.png") 13 3 3 72 fill / calc(13 * var(--d)) calc(3 * var(--d)) calc(3 * var(--d)) calc(72 * var(--d)) stretch;
  image-rendering: pixelated;
  text-align: left;
}
.dialogo__fala { font-size: var(--t-medio); line-height: 1.15; padding: 0 calc(4 * var(--d)) 0 calc(3 * var(--d)); text-wrap: balance; }
.dialogo__proximo {
  position: absolute; right: calc(1 * var(--d)); bottom: calc(1 * var(--d));
  width: 16px; height: 10px;
  background: var(--cor-texto);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  animation: piscar 0.8s steps(2) infinite;
}

/* ---------------------------------------------------------------------
   Rodapé — igual em todas as páginas
   --------------------------------------------------------------------- */
.rodape {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px;
  padding: 20px var(--margem) 28px;
  background: var(--cor-fundo-escuro);
  box-shadow: inset 0 2px 0 var(--cor-painel-luz);
}
.rodape__links { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.rodape__credito { color: var(--cor-texto-suave); }

/* ---------------------------------------------------------------------
   Celular
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --t-titulo: 48px; --ui: 2px; }
  .cena { --u: 2px; --foco: 0.84; }
  .menu-topo .botao { min-width: 0; }
  .contato { --d: 3px; }
  .dialogo__fala { font-size: var(--t-corpo); line-height: 1.4; }
  .vitrine__seta--esq { left: 4px; }
  .vitrine__seta--dir { right: 4px; }
  .menu-topo { gap: 16px; }
  .carrossel { gap: 16px; }
  .rodape { flex-direction: column; align-items: flex-start; }
}
/* Telas muito grandes (acima de Full HD): a imagem é ampliada, então
   volta para pixels "duros", sem borrar. */
@media (min-width: 2200px) { .titulo__linha { image-rendering: pixelated; } }
@media (max-width: 720px) {
  .botao--inicio { width: var(--altura-topo); padding: 0; }
  .botao--inicio .botao__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cabecalho__esq { gap: 8px; }
}
/* Nas páginas internas o Início já leva à Home (onde estão os projetos). */
@media (max-width: 480px) {
  .cabecalho__esq ~ nav .menu-topo__projeto { display: none; }
}
@media (max-width: 400px) {
  .menu-topo { gap: 6px; }
  .menu-topo .botao { padding: 0 10px 2px; }
}

/* ---------------------------------------------------------------------
   Mouse
   Cursor desenhado em pixel (seta e mãozinha). Só em aparelhos com
   mouse; no celular não existe cursor.
   O rastro de brilhos e o estouro do clique são criados pelo
   js/cursor.js; aqui fica só o desenho e o movimento deles.
   --------------------------------------------------------------------- */
@media (pointer: fine) {
  html { cursor: url("../assets/ui/cursor-seta.png") 1 1, auto; }
  a, button, [data-ze], label, summary { cursor: url("../assets/ui/cursor-mao.png") 10 1, pointer; }
}
.rastro, .estouro {
  position: fixed; left: 0; top: 0; z-index: 60;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.rastro  { width: 14px; height: 14px; }
.estouro { width: 34px; height: 34px; }
.rastro i, .estouro i {
  position: absolute; left: 0; top: 0; height: 100%;
  background: url("../assets/ui/rastro-dia.png") 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.rastro i  { width: 400%; }
.estouro i { width: 500%; background-image: url("../assets/ui/estouro-dia.png"); }
[data-tema="noite"] .rastro i  { background-image: url("../assets/ui/rastro-noite.png"); }
[data-tema="noite"] .estouro i { background-image: url("../assets/ui/estouro-noite.png"); }
/* "vivo": aparece, passa pelos quadros do desenho e some. */
.rastro.vivo  { animation: some 0.52s steps(1) forwards; }
.rastro.vivo i { animation: quadros-4 0.52s steps(4) forwards; }
.estouro.vivo { animation: some 0.4s steps(1) forwards; }
.estouro.vivo i { animation: quadros-5 0.4s steps(5) forwards; }
@keyframes some { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes quadros-4 { to { transform: translateX(-100%); } }
@keyframes quadros-5 { to { transform: translateX(-100%); } }
.leve .rastro, .leve .estouro { display: none; }

/* =====================================================================
   PÁGINAS INTERNAS (projeto e Sobre)
   ===================================================================== */

/* ---------- Faixa do topo ----------
   Uma fatia da paisagem da home, com os mesmos desenhos e animações.
   Mostra a parte de baixo do cenário (chão escuro), onde o título
   fica legível. */
.faixa {
  /* O pixel da faixa vem da largura da tela. A altura nunca passa de 45%
     da tela (em monitor largo ficaria enorme): aí aparece só a parte de
     baixo da paisagem. Se sobrar um pedacinho na esquerda, a asa
     espelhada completa. */
  --foco: 1;
  --u: max(calc(100vw / 480), 2px);
  position: relative;
  height: max(320px, min(calc(150 * var(--u)), 45svh));
  overflow: hidden;
  isolation: isolate;
  background: var(--cor-ceu);
}
.faixa__conteudo {
  position: absolute; left: var(--margem); right: var(--margem); bottom: 28px;
  display: grid; justify-items: start; gap: 18px;
}
.faixa .asa { display: block; }
/* No computador, corta um pouco do chão escuro de baixo da paisagem:
   o título fica mais perto do gramado e sobra menos vazio. */
@media (min-width: 721px) { .faixa .palco, .faixa .asa { bottom: calc(-24 * var(--u)); } }
.faixa__etiqueta { font-size: var(--t-corpo); padding: 0 14px 2px; text-transform: uppercase; letter-spacing: 1px; color: var(--cor-ouro); }
/* Título da campanha: vermelho com contorno e sombra, como o nome da home.
   64px = 4 vezes o tamanho original da fonte (fica nítida). */
.faixa__titulo {
  max-width: 22ch;
  font-size: 64px; line-height: 1.05;
  color: #ff001d;
  text-transform: uppercase;
  text-shadow:
    -4px -4px 0 #04101d, 4px -4px 0 #04101d, -4px 4px 0 #04101d, 4px 4px 0 #04101d,
     0 -4px 0 #04101d, 0 4px 0 #04101d, -4px 0 0 #04101d, 4px 0 0 #04101d,
     0 8px 0 #000;
  animation: nome-cai 0.42s steps(5) 0.15s both;
}

/* ---------- Projeto: só imagens (e vídeos), sem texto ---------- */
.projeto { max-width: 1100px; margin: 0 auto; padding: 56px var(--margem) 24px; }
.midias { display: grid; gap: 40px; }
.midia { width: 100%; height: auto; background: var(--cor-fundo-escuro); box-shadow: 0 0 0 4px var(--cor-fundo-escuro); }
.midia--capa { aspect-ratio: 16 / 9; object-fit: cover; }
.midias__par { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

/* ---------- Caixa de diálogo do case ----------
   Sem JavaScript: os blocos de texto aparecem inteiros num painel.
   Com JavaScript (classe narra--jogo): vira a caixa do RPG presa
   embaixo da tela enquanto as imagens passam. Ela "solta" sozinha ao
   chegar em Outros projetos, porque só fica presa dentro do projeto. */
.narra { margin-top: 48px; }
.narra__blocos { max-width: 960px; margin: 0 auto; padding: 24px 28px; display: grid; gap: 14px; font-size: 24px; line-height: 1.35; }

.narra--jogo {
  position: sticky; bottom: 12px; z-index: 6;
  display: flex; justify-content: center;
  pointer-events: none;           /* só a caixa recebe clique, não a faixa toda */
}
.narra__caixa {
  --d: 5px;
  pointer-events: auto;
  position: relative;
  width: 100%; max-width: 960px;
  height: calc(43 * var(--d));
  display: flex; flex-direction: column; justify-content: space-between;
  /* mesma moldura com retrato do contato da home */
  border: solid transparent;
  border-width: calc(13 * var(--d)) calc(4 * var(--d)) calc(3 * var(--d)) calc(42 * var(--d));
  border-image: url("../assets/ui/dialogo.png") 13 3 3 72 fill / calc(13 * var(--d)) calc(3 * var(--d)) calc(3 * var(--d)) calc(72 * var(--d)) stretch;
  image-rendering: pixelated;
  cursor: pointer;
}
.narra__retrato { display: none; }            /* no computador o retrato já está na moldura */
.narra__texto { position: relative; }
.narra__tela {
  height: 96px;                  /* 3 linhas de 32px */
  padding: 0 calc(3 * var(--d));
  overflow: hidden;
  font-size: 24px; line-height: 32px;
  white-space: pre-line;
}
/* Cópia invisível usada só para medir quanto texto cabe. */
.narra__tela--regua { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; pointer-events: none; }
.narra__barra {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  height: 32px;
  padding: 0 0 2px calc(3 * var(--d));
}
.narra__conta { min-width: 4ch; text-align: center; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.narra__botao {
  display: grid; place-items: center;
  /* 44x44 é o mínimo confortável para o dedo; a margem negativa faz o
     botão "transbordar" sem empurrar a barra. */
  width: 44px; height: 44px; margin: -6px -4px; padding: 0;
  border: 0; background: none; color: var(--cor-texto);
}
.narra__botao:hover { color: var(--cor-ouro); }
.narra--pronto .narra__botao--seguir { animation: piscar 0.8s steps(2) infinite; }

/* ---------- Outros projetos ---------- */
.outros { padding: 80px 0 72px; }
/* Carrossel menor que o da home: cartas de 400px em vez de 560px. */
.carrossel--pequeno { --carta: min(400px, 72vw); gap: 24px; }
.carrossel--pequeno .carta__titulo { font-size: var(--t-corpo); }

/* ---------- Sobre ---------- */
.sobre {
  max-width: 1100px; margin: 0 auto; padding: 64px var(--margem) 24px;
  display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center;
}
/* Sua foto, em retrato 4x5, dentro da mesma moldura dos painéis.
   É foto de verdade: nada de "pixelated". */
.sobre__foto { --ui: 3px; width: 340px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.sobre__texto { max-width: 40rem; padding: 28px 32px; display: grid; gap: 16px; }
.sobre__abre { font-size: var(--t-medio); line-height: 1.1; color: var(--cor-ouro); }
.sobre-lista { padding: 48px var(--margem) 0; }
/* Experiência: período, lugar e cargo, um por linha. */
.experiencia { list-style: none; max-width: 760px; margin: 28px auto 0; padding: 20px 28px; display: grid; gap: 16px; }
.experiencia li { display: grid; grid-template-columns: 9.5rem 1fr; column-gap: 16px; }
.experiencia__periodo { grid-row: 1 / 3; color: var(--cor-texto-suave); }
.experiencia__lugar { font-size: 20px; color: var(--cor-ouro); }
.experiencia__cargo { color: var(--cor-destaque-luz); }
.premios { list-style: none; max-width: 760px; margin: 28px auto 0; padding: 20px 28px; display: grid; gap: 14px; }
.premios__metal {
  display: inline-block; min-width: 92px; margin-right: 12px; padding: 2px 8px;
  text-align: center; text-transform: uppercase;
  color: var(--cor-texto-sobre-destaque);
}
.premios__metal--ouro { background: var(--cor-ouro); }
.premios__metal--prata { background: #c9d3df; }
.premios__metal--bronze { background: #c98a4b; }
.premios__metal--outro { background: var(--cor-destaque-luz); }
/* Página não encontrada: botão de voltar embaixo da caixa de diálogo. */
.contato__voltar { margin-top: 40px; }

@media (max-width: 720px) {
  .faixa { --u: 2px; --foco: 0.84; }
  .faixa__titulo { font-size: 48px; text-shadow:
    -3px -3px 0 #04101d, 3px -3px 0 #04101d, -3px 3px 0 #04101d, 3px 3px 0 #04101d,
     0 -3px 0 #04101d, 0 3px 0 #04101d, -3px 0 0 #04101d, 3px 0 0 #04101d, 0 6px 0 #000; }
  .midias { gap: 28px; }
  .midias__par { gap: 12px; }
  /* No celular a moldura com retrato grande não cabe: vira um painel
     comum com o rostinho do Zezé "saindo" por cima. */
  .narra--jogo { bottom: 8px; }
  .narra__caixa {
    height: auto;
    display: grid; grid-template-columns: 70px 1fr; column-gap: 10px;
    border-width: 14px;
    border-image: url("../assets/ui/botao.png") 7 fill / 14px stretch;
  }
  .narra__retrato { display: block; grid-row: 1 / 3; width: 70px; height: auto; margin-top: -26px; align-self: start; }
  .narra__tela { height: 104px; padding: 0; font-size: 20px; line-height: 26px; }   /* 4 linhas */
  .narra__blocos { font-size: 20px; }
  .narra__barra { padding: 0; height: 30px; }
  .sobre { grid-template-columns: 1fr; justify-items: center; gap: 24px; padding-top: 40px; }
  .sobre__foto { width: min(280px, 100%); }
  .experiencia li { grid-template-columns: 1fr; }
  .experiencia__periodo { grid-row: auto; }
  .sobre__texto { padding: 20px 22px; }
}

/* Palco, Zezé e nome sempre em pixel inteiro da tela: em meio pixel o
   desenho "treme" (as colunas mudam de largura a cada quadro).
   Fica no fim do arquivo para valer por cima das regras de posição. */
@supports (width: round(nearest, 10px, 1px)) {
  /* Palco e Zezé sempre em pixel inteiro da tela: em meio pixel o desenho
     "treme" (as colunas mudam de largura a cada quadro). */
  .palco { left: round(nearest, calc((100% - 480 * var(--u)) * var(--foco)), 1px); }
  .ze { left: round(nearest, calc(50vw - round(nearest, calc((100vw - 480 * var(--u)) * var(--foco)), 1px) - 60 * var(--u)), 1px); }
  .titulo { left: round(nearest, calc(50% - 277 * var(--tu)), 1px); }
  .faixa { --u: max(round(nearest, calc(100vw / 480), 1px), 2px); }
  .asa { width: max(0px, round(nearest, calc((100% - 480 * var(--u)) * var(--foco)), 1px)); }
  @media (min-aspect-ratio: 16/9) {
    /* arredonda para CIMA: assim o cenário sempre cobre a altura toda */
    .cena { --u: max(round(up, calc(max(600px, 100svh) / 270), 1px), 1px); }
  }
}

/* ---------------------------------------------------------------------
   Telas grandes (a partir de 1920px de largura)
   Mais espaço para o trabalho e títulos internos maiores (96px = 6x a
   fonte, continua nítida).
   --------------------------------------------------------------------- */
@media (min-width: 1900px) {
  .projeto, .sobre { max-width: 1400px; }
  .experiencia, .premios { max-width: 900px; }
  .faixa__titulo {
    font-size: 96px;
    text-shadow:
      -6px -6px 0 #04101d, 6px -6px 0 #04101d, -6px 6px 0 #04101d, 6px 6px 0 #04101d,
       0 -6px 0 #04101d, 0 6px 0 #04101d, -6px 0 0 #04101d, 6px 0 0 #04101d,
       0 12px 0 #000;
  }
  .faixa__conteudo { bottom: 40px; }
}

/* Celular deitado (tela baixa e larga): o cenário usa pixel de 2px, como
   no celular em pé. Antes o Zezé ficava enorme e cobria o nome. Fica no
   fim para valer por cima das outras regras de tamanho. */
@media (orientation: landscape) and (max-height: 500px) {
  .cena { --u: 2px !important; --foco: 0.7; }
  .titulo { --escala: 0.5; }   /* nome no tamanho normal, cabendo acima do Zezé */
}