/* ============================================================
   Protótipo "Descida" — hub Enaldinho na Pixel
   Mecânica de referência: activetheory.net (carrossel descendente,
   logo-veículo fixo, mundo passando). Identidade: vermelho/preto/branco.
   Tokens de forma da referência: pill 500px, cards 12px, ghost 5px.
   ============================================================ */

:root {
  --void: #000000;
  --ink: #ffffff;
  --silver: #c6c6c6;
  --ash: #4d4d4d;
  --red: #ff0000;
  --red-glow: rgba(255, 42, 30, 0.55);
  --red-soft: rgba(255, 42, 30, 0.18);
  --gold: #ffb347;
  --accent: var(--red);

  --font-display: "Chakra Petch", "Arial Black", sans-serif;
  --font-terminal: "Share Tech Mono", "Courier New", monospace;

  --vh-total: 2300; /* altura virtual da descida, em vh (ver prototype.ts) */

  --wy: 0px;        /* translateY do mundo (JS) */
  --e-x: 0px;
  --e-y: 0px;
  --e-scale: 1;
  --e-rx: 0deg;
  --e-ry: 0deg;
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-color: var(--red-soft) #050505;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-terminal);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::-webkit-scrollbar {
  width: 6px;
}
body::-webkit-scrollbar-thumb {
  background: var(--red-soft);
  border-radius: 500px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: -48px;
  left: 16px;
  z-index: 60;
  padding: 8px 18px;
  background: var(--ink);
  color: var(--void);
  border-radius: 500px;
  font-family: var(--font-terminal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus-visible {
  top: 14px;
}

/* Espaçador que cria a rolagem nativa do documento */
.scroll-spacer {
  height: calc(var(--vh-total) * 1vh);
  height: calc(var(--vh-total) * 1svh);
  pointer-events: none;
}

/* ------------------------------------------------------------
   Ambiente: gradientes por zona (transição suave via data-zone)
   ------------------------------------------------------------ */

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -20%, var(--zone-top, rgba(60, 8, 6, 0.55)) 0%, transparent 60%),
    radial-gradient(130% 100% at 50% 120%, var(--zone-bottom, rgba(28, 4, 3, 0.5)) 0%, transparent 62%),
    var(--void);
  transition: opacity 0.8s ease;
}
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 60% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.66) 100%);
}

body[data-zone="hero"] {
  --zone-top: rgba(64, 8, 6, 0.6);
  --zone-bottom: rgba(20, 3, 2, 0.55);
}
body[data-zone="dive"] {
  --zone-top: rgba(30, 4, 3, 0.45);
  --zone-bottom: rgba(84, 12, 8, 0.5);
}
body[data-zone="statement"] {
  --zone-top: rgba(36, 5, 4, 0.5);
  --zone-bottom: rgba(48, 7, 5, 0.42);
}
body[data-zone="universes"] {
  --zone-top: rgba(16, 2, 2, 0.6);
  --zone-bottom: rgba(52, 8, 5, 0.45);
}
body[data-zone="base"] {
  --zone-top: rgba(22, 3, 2, 0.5);
  --zone-bottom: rgba(126, 52, 10, 0.34);
}
body[data-zone="footer"] {
  --zone-top: rgba(48, 7, 5, 0.45);
  --zone-bottom: rgba(30, 4, 3, 0.5);
}

.dust {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.track {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.8s ease;
}
body[data-zone="statement"] .track,
body[data-zone="universes"] .track {
  opacity: 0.28;
}

/* ------------------------------------------------------------
   Mundo: estações que passam pelo E
   ------------------------------------------------------------ */

.world {
  position: fixed;
  inset: 0;
  z-index: 3;
  transform: translate3d(0, var(--wy), 0);
  will-change: transform;
  pointer-events: none;
}

.station {
  position: absolute;
  left: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 clamp(20px, 6vw, 96px);
  text-align: center;
}
.station a,
.station button {
  pointer-events: auto;
}

.terminal-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 12px;
}
.terminal-eyebrow img {
  width: 72px;
  height: auto;
  opacity: 0.9;
}
.terminal-eyebrow span::before {
  content: "· ";
  color: var(--red);
}

.terminal-line {
  margin: 0;
  color: var(--silver);
  font-size: 14px;
  max-width: 46ch;
}

.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 7.4vw, 112px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 34px rgba(255, 42, 30, 0.28);
}

.display-sm {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 26px rgba(255, 42, 30, 0.3);
}

/* Hero: wordmark no alto, E-veículo domina o centro, copy abaixo */
.station-hero {
  top: 0;
  justify-content: flex-start;
  padding-top: 13vh;
  padding-top: 13svh;
  gap: 20px;
}
.hero-wordmark {
  width: min(400px, 58vw);
  height: auto;
  filter: drop-shadow(0 0 32px rgba(255, 42, 30, 0.42));
}
.hero-gap {
  height: 34vh;
  height: 34svh;
}
.hero-sub {
  margin: 0;
  max-width: 56ch;
  padding-bottom: 56px; /* folga pro caret fixo do rodapé */
  color: var(--silver);
}

/* Statement */
.station-statement {
  top: 480vh;
  top: 480svh;
  min-height: 140vh;
  min-height: 140svh;
}
.statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  width: min(1160px, 100%);
  text-align: left;
}
.statement-side {
  display: flex;
  flex-direction: column;
  gap: 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  padding-left: clamp(18px, 2.4vw, 34px);
}
.stats {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}
.stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stats dt {
  order: 2;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--silver);
}
.stats dd {
  order: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 38px);
  color: var(--ink);
  text-shadow: 0 0 18px rgba(255, 42, 30, 0.35);
}
.stats dd::after {
  content: " ";
}

/* Base / Loja (poço com 7 universos termina ~1610vh) */
.station-base {
  top: 1760vh;
  top: 1760svh;
  min-height: 120vh;
  min-height: 120svh;
}
.base-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: clamp(30px, 4vw, 54px) clamp(26px, 5vw, 72px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  background: rgba(8, 1, 1, 0.55);
  box-shadow:
    0 0 60px rgba(255, 42, 30, 0.16),
    inset 0 0 42px rgba(255, 42, 30, 0.07);
  backdrop-filter: blur(6px);
}

/* Footer (último viewport alcançável: 2200–2300vh do spacer) */
.station-footer {
  top: 2160vh;
  top: 2160svh;
  min-height: 140vh;
  min-height: 140svh;
  gap: 22px;
}
.station-footer img {
  width: min(420px, 64vw);
  height: auto;
  filter: drop-shadow(0 0 30px rgba(255, 42, 30, 0.35));
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
}
.footer-links a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
}
.footer-links a:hover {
  color: var(--red);
}
.footer-note {
  margin: 0;
  color: var(--ash);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Botões (formas da referência: pill 500px / ghost 5px)
   ------------------------------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 26px;
  border-radius: 500px;
  border: 1px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-terminal);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.pill-primary {
  background: rgba(255, 42, 30, 0.32);
  color: var(--ink);
  box-shadow: 0 0 24px rgba(255, 42, 30, 0.22);
}
.pill-primary:hover,
.pill-primary:focus-visible {
  background: rgba(255, 42, 30, 0.5);
  box-shadow: 0 0 38px rgba(255, 42, 30, 0.42);
}
.pill-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  border-top-color: rgba(255, 255, 255, 0.4);
}
.pill-ghost:hover,
.pill-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   O E — veículo da descida
   ------------------------------------------------------------ */

.e-vehicle {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: clamp(150px, 19vw, 250px);
  aspect-ratio: 1;
  pointer-events: none;
  transform-style: preserve-3d;
  perspective: 900px;
  transform: translate(-50%, -50%) translate3d(var(--e-x), var(--e-y), 0)
    scale(var(--e-scale));
  will-change: transform;
  transition: opacity 0.5s ease;
}

.e-ring {
  position: absolute;
  inset: -9%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.34);
  box-shadow:
    0 0 26px rgba(255, 42, 30, 0.3),
    inset 0 0 22px rgba(255, 42, 30, 0.14);
}
.e-ring::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    transparent 0deg,
    rgba(255, 42, 30, 0.85) 34deg,
    rgba(255, 179, 71, 0.6) 60deg,
    transparent 96deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: ring-sheen 7s linear infinite;
}
@keyframes ring-sheen {
  to {
    transform: rotate(360deg);
  }
}

.e-solid {
  position: absolute;
  inset: 13.75%; /* 21% antes do padding das camadas pré-pintadas (240 → 300 px) */
  transform-style: preserve-3d;
  transform: rotateX(var(--e-rx)) rotateY(var(--e-ry));
  will-change: transform;
}
.e-solid i {
  position: absolute;
  inset: 0;
  /* camadas pré-pintadas (docs/scripts/build-lite-assets.sh): filter CSS numa
     camada que gira a cada frame era re-rasterizado a cada frame no celular */
  background-image: url("assets/e-dark.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(calc(var(--i) * -2.2px));
}
.e-solid i.e-front {
  background-image: url("assets/e-white.png");
}
.e-solid i.e-back {
  background-image: url("assets/e-back.png");
}

/* ------------------------------------------------------------
   Poço dos universos — hélice descendente
   ------------------------------------------------------------ */

.helix {
  position: fixed;
  inset: 0;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0.45s;
}
.helix.is-active {
  opacity: 1;
  visibility: visible;
}

.helix-column {
  position: absolute;
  top: -12vh;
  top: -12svh;
  bottom: -12vh;
  bottom: -12svh;
  left: 50%;
  width: 58px;
  transform: translateX(-50%);
  background-image: url("assets/e-red.png"); /* tom pré-pintado; era filter */
  background-size: 44px auto;
  background-position: center var(--column-y, 0px);
  background-repeat: repeat-y;
  opacity: 0.34;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.helix-column::after {
  content: "";
  position: absolute;
  inset: 0 45%;
  background: linear-gradient(180deg, transparent, rgba(255, 42, 30, 0.6), transparent);
}

.helix-cards {
  position: absolute;
  inset: 0;
  perspective: 1300px;
  perspective-origin: 50% 46%;
}

.universe-card {
  position: absolute;
  top: 57%;
  left: 50%;
  width: clamp(280px, 27vw, 400px);
  aspect-ratio: 10 / 10.6;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  background: rgba(10, 2, 2, 0.72);
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: box-shadow 0.3s ease;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}
.universe-card.is-front {
  pointer-events: auto;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.7),
    0 0 46px var(--card-glow, rgba(255, 42, 30, 0.3));
}
.universe-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.universe-card .card-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(90% 80% at 50% 30%, var(--card-surface, #1a0606) 0%, rgba(4, 0, 0, 0.94) 100%);
}
.card-halo {
  position: absolute;
  inset: -18%;
  background: radial-gradient(58% 46% at 50% 58%, var(--card-glow, rgba(255, 42, 30, 0.3)) 0%, transparent 72%);
  opacity: 0.5;
  transition: opacity 0.4s ease;
}
.universe-card.is-front .card-halo {
  opacity: 1;
}
.card-layer {
  position: absolute;
  filter: brightness(var(--dim, 1)) drop-shadow(0 16px 26px rgba(0, 0, 0, 0.55));
  will-change: transform;
}
/* sombreado dos cards de trás (--shade via layoutHelix); só opacity no compositor */
.universe-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  opacity: var(--shade, 0);
  pointer-events: none;
}
.card-layer-cover {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(var(--dim, 1));
}
/* brilho que desliza com o parallax no card frontal */
.universe-card .card-art::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255, 255, 255, 0.07) 50%,
    transparent 58%
  );
  transform: translateX(calc(var(--px, 0px) * -3));
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.universe-card.is-front .card-art::after {
  opacity: 1;
}
.universe-card .card-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px 14px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.88) 42%);
  text-align: left;
}
.universe-card .card-number {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--silver);
}
.universe-card .card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
}

/* ------------------------------------------------------------
   Portão de entrada (gesto que destrava o áudio)
   ------------------------------------------------------------ */

body.gate-open {
  overflow: hidden;
}
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(255, 42, 30, 0.16) 0%, transparent 70%),
    var(--void);
  transition: opacity 0.7s ease;
}
.gate.is-leaving {
  opacity: 0;
  pointer-events: none;
}
.gate-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.gate-wordmark {
  width: min(420px, 70vw);
  height: auto;
  filter: drop-shadow(0 0 32px rgba(255, 42, 30, 0.42));
}
.gate-text {
  margin: 0;
  color: var(--silver);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.gate-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.gate-error {
  margin: 0;
  max-width: 44ch;
  color: #ffb3ad;
  font-size: 12px;
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .gate {
    transition: none;
  }
}

/* ------------------------------------------------------------
   HUD (elementos fixos de leitura)
   ------------------------------------------------------------ */

.hud {
  position: fixed;
  z-index: 10;
  font-family: var(--font-terminal);
}

.hud-top {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(16px, 3vw, 40px);
}
.hud-brand img {
  width: clamp(96px, 10vw, 140px);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 14px rgba(255, 42, 30, 0.35));
}

.hud-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 24px;
  border-radius: 500px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.5);
  background: rgba(6, 1, 1, 0.55);
  box-shadow: 0 0 30px rgba(255, 42, 30, 0.14);
  backdrop-filter: blur(8px);
}
.hud-nav a {
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
.hud-nav a:hover {
  color: var(--red);
}

/* Identidade sonora: toggle estilo "Toggle Audio" da referência */
.hud-audio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--silver);
  font-family: var(--font-terminal);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease;
}
.hud-audio:hover {
  color: var(--ink);
}
body.audio-on .hud-audio {
  color: var(--ink);
}
.eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.eq i {
  width: 2px;
  height: 3px;
  background: currentColor;
  transition: height 0.3s ease;
}
body.audio-on .eq i {
  background: var(--red);
  animation: eq-bounce 0.9s ease-in-out infinite;
}
body.audio-on .eq i:nth-child(2) {
  animation-delay: 0.22s;
}
body.audio-on .eq i:nth-child(3) {
  animation-delay: 0.48s;
}
@keyframes eq-bounce {
  0%,
  100% {
    height: 4px;
  }
  50% {
    height: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.audio-on .eq i {
    animation: none;
    height: 9px;
  }
}
.hud-nav-line {
  width: 44px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

.hud-level {
  left: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vh, 34px);
  bottom: clamp(16px, 3svh, 34px);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--silver);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.hud-level #level-label {
  color: var(--ink);
}
.hud-sep {
  width: 30px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}
.hud-depth {
  color: var(--ash);
}

.hud-route {
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vh, 34px);
  bottom: clamp(16px, 3svh, 34px);
  color: var(--silver);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hud-route code {
  color: var(--ink);
  font-family: inherit;
}

.scroll-hint {
  left: 50%;
  bottom: clamp(18px, 4vh, 40px);
  bottom: clamp(18px, 4svh, 40px);
  transform: translateX(-50%);
  margin: 0;
  color: var(--silver);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  transition: opacity 0.5s ease;
}
.scroll-hint .caret {
  color: var(--red);
  animation: caret-blink 1.2s steps(2) infinite;
}
@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}
body:not([data-zone="hero"]) .scroll-hint {
  opacity: 0;
}

/* ------------------------------------------------------------
   Painel do universo em foco + menu + dots
   ------------------------------------------------------------ */

.universe-panel {
  position: fixed;
  z-index: 8;
  top: 50%;
  right: clamp(18px, 4vw, 64px);
  transform: translateY(-50%) translateX(24px);
  width: min(330px, 30vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
  text-align: left;
}
.universe-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
.panel-topline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--silver);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.status {
  display: inline-flex;
  padding: 3px 12px;
  border-radius: 500px;
  border: 1px solid var(--accent, var(--red));
  color: var(--accent, var(--red));
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.universe-panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.02;
  text-transform: uppercase;
  text-shadow: 0 0 22px rgba(255, 42, 30, 0.3);
}
.panel-tagline {
  margin: 0;
  color: var(--accent, var(--red));
  font-size: 13px;
  letter-spacing: 0.06em;
}
.panel-description {
  margin: 0;
  color: var(--silver);
  font-size: 13px;
}
.panel-actions {
  margin-top: 8px;
}
.panel-route {
  margin: 4px 0 0;
  color: var(--ash);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.panel-route code {
  color: var(--silver);
  font-family: inherit;
}
.panel-keys {
  margin: 0;
  color: var(--ash);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.universe-menu {
  position: fixed;
  z-index: 8;
  left: clamp(18px, 4vw, 64px);
  bottom: clamp(64px, 12vh, 120px);
  bottom: clamp(64px, 12svh, 120px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s;
  text-align: left;
}
.universe-menu.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.menu-title {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.universe-menu ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.universe-menu button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--silver);
  font-family: var(--font-terminal);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease;
}
.universe-menu button::before {
  content: "-> ";
  color: var(--red);
}
.universe-menu button:hover,
.universe-menu button[aria-current="true"] {
  color: var(--ink);
}

.universe-dots {
  position: fixed;
  z-index: 8;
  right: clamp(8px, 1.4vw, 18px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}
.universe-dots.is-active {
  opacity: 1;
  visibility: visible;
}
.universe-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.universe-dots button[aria-current="true"] {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 10px rgba(255, 42, 30, 0.8);
}

/* ------------------------------------------------------------
   Hotsite (camada demonstrativa de rota)
   ------------------------------------------------------------ */

/* [hidden] precisa vencer o display:flex — sem isso a camada fechada
   fica invisível por cima do site inteiro bloqueando cliques */
.hotsite[hidden] {
  display: none;
}
.hotsite {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(110% 80% at 50% -10%, rgba(60, 8, 6, 0.7) 0%, transparent 55%),
    radial-gradient(120% 90% at 50% 115%, var(--accent-soft, rgba(255, 42, 30, 0.2)) 0%, transparent 60%),
    #030000;
  opacity: 0;
  transform: translateY(4vh);
  transform: translateY(4svh);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.hotsite.is-open {
  opacity: 1;
  transform: translateY(0);
}

.hotsite-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px clamp(16px, 3vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.hotsite-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.5);
  border-radius: 500px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-family: var(--font-terminal);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.hotsite-home:hover {
  background: rgba(255, 255, 255, 0.16);
}
.hotsite-route {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--silver);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hotsite-route code {
  color: var(--ink);
  font-family: inherit;
}
.hotsite-nav {
  display: flex;
  gap: 8px;
}
.hotsite-nav {
  align-items: center;
}
.hotsite-nav button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.hotsite-nav button:hover {
  background: rgba(255, 42, 30, 0.35);
}
/* toggle de som dentro das páginas: mesma pílula do HUD */
.hotsite-audio.hud-audio {
  width: auto;
  height: auto;
  padding: 8px 16px;
  margin-right: 6px;
  border-radius: 500px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
  font-size: 11px;
}
.hotsite-audio.hud-audio:hover {
  background: rgba(255, 255, 255, 0.14);
}

.hotsite-body[hidden] {
  display: none;
}
.hotsite-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 60px);
  padding: 20px clamp(20px, 5vw, 80px);
  min-height: 0;
}
.hotsite-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
}
.hotsite-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(255, 42, 30, 0.3);
}
.hotsite-tagline {
  margin: 0;
  color: var(--accent, var(--red));
  font-size: 15px;
}
.hotsite-copy > p:not(.hotsite-tagline) {
  margin: 0;
  color: var(--silver);
  max-width: 48ch;
}
.hotsite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}
.hotsite-art {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.hotsite-art img {
  max-width: min(420px, 90%);
  max-height: 62vh;
  max-height: 62svh;
  object-fit: contain;
  filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 40px var(--accent-soft, rgba(255, 42, 30, 0.25)));
}
.hotsite-note {
  margin: 0;
  padding: 14px clamp(16px, 3vw, 40px) 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ash);
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------
   Páginas internas reais (Evolution, Copa) dentro da camada
   ------------------------------------------------------------ */

.hotsite-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--red-soft) #050505;
}
/* imagens carregando mudam o layout; sem isso o scroll anchoring do Chrome
   "acompanha" o conteúdo e a página abre já scrollada (a propriedade precisa
   estar nos descendentes — candidatos a âncora —, não no scroller) */
.hotsite-page * {
  overflow-anchor: none;
}
.hotsite-page::-webkit-scrollbar {
  width: 6px;
}
.hotsite-page::-webkit-scrollbar-thumb {
  background: var(--red-soft);
  border-radius: 500px;
}

.page-hero {
  display: flex;
  justify-content: center;
  padding: clamp(20px, 4vh, 44px) clamp(16px, 4vw, 48px);
  padding: clamp(20px, 4svh, 44px) clamp(16px, 4vw, 48px);
}
.page-hero-cosmic {
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(126, 32, 8, 0.55) 0%, transparent 60%),
    url("assets/ev-cosmic-bg.webp") center/cover;
}

/* ---- Hero composto da Evolution (mesma lógica do hero da Copa) ---- */
.evo-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 7vh, 78px) clamp(20px, 5vw, 60px) 0;
  padding: clamp(40px, 7svh, 78px) clamp(20px, 5vw, 60px) 0;
  background:
    /* escurece o topo pro título dourado ter contraste sobre o cósmico */
    linear-gradient(180deg, rgba(8, 2, 1, 0.86) 0%, rgba(8, 2, 1, 0.55) 38%, rgba(8, 2, 1, 0.12) 62%, transparent 78%),
    radial-gradient(120% 100% at 50% 100%, rgba(120, 20, 6, 0.5) 0%, transparent 70%),
    url("assets/ev-cosmic-bg.webp") center / cover,
    #160402;
}
.evo-hero-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
/* raios saindo do centro do palco */
.evo-rays {
  position: absolute;
  top: 58%;
  left: 50%;
  width: 200%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    rgba(255, 200, 120, 0.1) 0deg,
    transparent 5deg,
    transparent 22deg,
    rgba(255, 200, 120, 0.09) 27deg
  );
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 78%);
  mask: radial-gradient(closest-side, #000 20%, transparent 78%);
  animation: evo-rays-spin 150s linear infinite;
}
@keyframes evo-rays-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* brasas subindo */
.evo-embers {
  position: absolute;
  inset: -10% 0;
  background-image:
    radial-gradient(3px 3px at 9% 82%, rgba(255, 190, 110, 0.9), transparent 60%),
    radial-gradient(2px 2px at 23% 46%, rgba(255, 120, 50, 0.8), transparent 60%),
    radial-gradient(2.5px 2.5px at 38% 68%, rgba(255, 215, 150, 0.85), transparent 60%),
    radial-gradient(2px 2px at 54% 28%, rgba(255, 100, 40, 0.75), transparent 60%),
    radial-gradient(3px 3px at 71% 74%, rgba(255, 170, 80, 0.85), transparent 60%),
    radial-gradient(2px 2px at 84% 40%, rgba(255, 130, 55, 0.8), transparent 60%),
    radial-gradient(2.5px 2.5px at 94% 86%, rgba(255, 200, 120, 0.85), transparent 60%);
  animation: evo-embers-up 14s linear infinite;
}
@keyframes evo-embers-up {
  from {
    transform: translateY(10%);
  }
  to {
    transform: translateY(-10%);
  }
}

.evo-hero-copy {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.evo-hero-copy h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 68px);
  line-height: 0.95;
  text-transform: uppercase;
  color: #ffcb5c;
  text-shadow:
    0 2px 0 rgba(120, 40, 0, 0.6),
    0 0 34px rgba(255, 140, 40, 0.5);
}
.evo-hero-tagline {
  color: #ffd27a !important;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.evo-hero-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(14px, 1.3vw, 16px);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}

/* pódio das evoluções: as centrais maiores e à frente */
.evo-hero-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(4px, 1.4vw, 20px);
  margin-top: clamp(18px, 3vh, 34px);
  margin-top: clamp(18px, 3svh, 34px);
}
.evo-char {
  width: clamp(88px, 13vw, 190px);
  height: auto;
  /* --d = distância do centro: quanto maior, menor e mais ao fundo */
  transform: scale(calc(1 - var(--d) * 0.13)) translateY(calc(var(--d) * 8px));
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 26px rgba(255, 130, 40, calc(0.4 - var(--d) * 0.08)));
  animation: evo-float 5s ease-in-out infinite;
  animation-delay: calc(var(--d) * -0.7s);
  transition: transform 0.3s ease;
}
.evo-char-hero {
  z-index: 2;
  width: clamp(120px, 17vw, 250px);
}
@keyframes evo-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -9px;
  }
}
.evo-char:hover {
  transform: scale(calc(1.06 - var(--d) * 0.13)) translateY(calc(var(--d) * 8px - 6px));
}

/* "Muito mais do que um álbum": composição oficial + copy revisada */
.evo-album {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
}
.evo-album > img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.evo-album-copy p {
  margin: 0 0 10px;
  color: var(--silver);
}
.evo-album-copy b {
  color: var(--ink);
}
@media (max-width: 700px) {
  .evo-album {
    grid-template-columns: 1fr;
  }
}

/* barra de destaque abaixo do hero (mesmo padrão da Copa) */
.evo-highlight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
  padding: 12px 20px;
  background: rgba(60, 12, 4, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}
.evo-highlight p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}
.evo-highlight b {
  color: #ffb347;
}
.evo-highlight a {
  color: #ffb347;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.evo-highlight a:hover {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .evo-rays,
  .evo-embers,
  .evo-char {
    animation: none;
  }
}
@media (max-width: 700px) {
  .evo-hero {
    padding: 30px 18px 0;
  }
  .evo-hero-stage {
    gap: 2px;
    margin-top: 20px;
  }
  /* no celular só as três centrais cabem bem */
  .evo-char[style*="--d: 3"],
  .evo-char[style*="--d: 4"] {
    display: none;
  }
  .evo-char {
    width: 26vw;
  }
  .evo-char-hero {
    width: 36vw;
  }
}
/* ---- Copa: efeitos portados do site 08 (tudo CSS) ---- */

.copa-hero-zone {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #8b0000;
}
.copa-hero-desktop {
  position: relative;
  overflow: hidden;
}
.copa-hero-zone .page-hero-art {
  display: block;
  width: 100%;
  border-radius: 0;
}

/* overlay animado por cima do banner (hero-overlay do site 08):
   máscara esconde o centro onde o Enaldinho está */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 40% 55% at 42% 50%, transparent 0%, #000 100%);
  mask-image: radial-gradient(ellipse 40% 55% at 42% 50%, transparent 0%, #000 100%);
}
/* raios girando */
.copa-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    rgba(255, 255, 255, 0.14) 0deg,
    transparent 4deg,
    transparent 26deg,
    rgba(255, 255, 255, 0.12) 30deg
  );
  animation: copa-rays-spin 180s linear infinite;
}
@keyframes copa-rays-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* partículas douradas subindo */
.hero-particle {
  position: absolute;
  left: var(--x);
  bottom: -20px;
  width: var(--size);
  height: var(--size);
  background: rgba(255, 215, 0, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 12px 4px rgba(255, 215, 0, 0.5);
  animation: hero-float-up var(--dur) ease-in-out var(--delay) infinite;
}
@keyframes hero-float-up {
  0% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }
  15% {
    transform: translateY(-8vh) scale(1);
    transform: translateY(-8svh) scale(1);
    opacity: 0.4;
  }
  50% {
    opacity: 0.25;
  }
  85% {
    transform: translateY(-80vh) scale(0.7);
    transform: translateY(-80svh) scale(0.7);
    opacity: 0.2;
  }
  100% {
    transform: translateY(-100vh) scale(0);
    transform: translateY(-100svh) scale(0);
    opacity: 0;
  }
}
/* shimmer cruzando */
.hero-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 35%,
    rgba(255, 255, 255, 0.04) 44%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 56%,
    transparent 65%
  );
  background-size: 300% 100%;
  animation: hero-shimmer 16s ease-in-out infinite;
}
@keyframes hero-shimmer {
  0%,
  100% {
    background-position: 200% 0;
  }
  50% {
    background-position: -100% 0;
  }
}

/* ---- composição mobile do hero (site 08) ---- */
.hero-mobile-comp {
  position: relative;
  overflow: hidden;
}
/* brilho radial em blend sobre a foto */
.hero-mobile-comp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 90% 20% at 50% 0%, rgba(255, 200, 0, 0.2) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 15% 80%, rgba(139, 0, 0, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 85% 80%, rgba(139, 0, 0, 0.5) 0%, transparent 50%);
}
/* raios saindo de trás da foto */
.hero-mobile-comp::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 50%;
  width: 250%;
  height: 250%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translateX(-50%);
  transform-origin: center top;
  background: repeating-conic-gradient(
    rgba(255, 255, 255, 0.06) 0deg,
    transparent 4deg,
    transparent 16deg,
    rgba(255, 255, 255, 0.06) 20deg
  );
  animation: hero-mobile-rays 30s linear infinite;
}
@keyframes hero-mobile-rays {
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}
.hero-mobile-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
}
.hero-mobile-balls,
.hero-mobile-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-mobile-balls {
  z-index: 2;
}
.hero-mobile-particles {
  z-index: 3;
}
.hero-ball {
  position: absolute;
  top: var(--top);
  left: var(--left, auto);
  right: var(--right, auto);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 215, 0, 0.6), rgba(255, 180, 0, 0.3) 60%, transparent 80%);
  opacity: var(--o);
  box-shadow: 0 0 12px 2px rgba(255, 215, 0, 0.2);
}
/* barra inferior: chamada + Cabeçudinhos + bandeiras */
.hero-mobile-bottom {
  position: absolute;
  z-index: 4;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 16px;
  background: linear-gradient(
    to top,
    #8b0000 0%,
    rgba(139, 0, 0, 0.85) 35%,
    rgba(139, 0, 0, 0.5) 60%,
    transparent 85%
  );
}
.hero-mobile-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.hero-cab-strip {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.hero-cab-strip img {
  width: 52px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  animation: cab-bounce 2.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.15s);
}
.hero-flag-strip {
  /* 19 bandeiras precisam caber numa linha só até 375px */
  font-size: clamp(11px, 3.4vw, 14px);
  letter-spacing: 1px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  opacity: 0.85;
}

/* barra de destaque abaixo do hero (site 08) */
.copa-highlight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
  padding: 12px 20px;
  background: rgba(139, 0, 0, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}
.copa-highlight p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}
.copa-highlight b {
  color: #ffd700;
}
.copa-highlight a {
  color: #ffd700;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}
.copa-highlight a:hover {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .hero-overlay {
    display: none;
  }
  .hero-mobile-comp::after,
  .hero-cab-strip img,
  .hero-mobile-particles .hero-particle {
    animation: none;
  }
}

/* zonas temáticas */
.copa-zone {
  padding: clamp(28px, 5vh, 60px) clamp(16px, 4vw, 48px);
  padding: clamp(28px, 5svh, 60px) clamp(16px, 4vw, 48px);
}
.copa-inner {
  max-width: 1120px;
  margin: 0 auto;
}
/* campo de futebol do site 08 (bg-field) com linha central */
.copa-zone-field {
  background:
    linear-gradient(180deg, #000 0%, transparent 12%, transparent 88%, #000 100%),
    linear-gradient(90deg, transparent 49.7%, rgba(255, 255, 255, 0.14) 49.7%, rgba(255, 255, 255, 0.14) 50.3%, transparent 50.3%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #06481f 0%, #033414 100%);
}
.copa-zone-field .livro-card {
  background: rgba(2, 24, 10, 0.68);
  border-color: rgba(255, 255, 255, 0.18);
}
/* arena vermelha dos Cabeçudinhos */
.copa-zone-arena {
  background:
    linear-gradient(180deg, #000 0%, transparent 12%, transparent 88%, #000 100%),
    radial-gradient(90% 70% at 50% 30%, rgba(139, 0, 0, 0.55) 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 100%, rgba(60, 6, 4, 0.7) 0%, #000 100%);
}
.copa-zone-arena .page-band {
  padding-top: 0;
}
/* bounce dos cabeçudinhos (hero do site 08) no hover */
.cab-card:hover img {
  animation: cab-bounce 0.6s ease-in-out;
}
@keyframes cab-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
/* bordas de troféu por raridade (site 08) */
.cab-card[data-rarity="gold"] {
  border: 2px solid #ffd700;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.4), inset 0 0 8px rgba(255, 215, 0, 0.12);
}
.cab-card[data-rarity="silver"] {
  border: 2px solid #c0c0c0;
  box-shadow: 0 0 16px rgba(192, 192, 192, 0.35), inset 0 0 8px rgba(192, 192, 192, 0.12);
}
.cab-card[data-rarity="silver"] em {
  color: #c0c0c0;
}
.cab-card[data-rarity="bronze"] {
  border: 2px solid #cd7f32;
  box-shadow: 0 0 16px rgba(205, 127, 50, 0.4), inset 0 0 8px rgba(205, 127, 50, 0.12);
}
.cab-card[data-rarity="bronze"] em {
  color: #cd7f32;
}
/* mascote (Golito) faz parte da coleção — sem destaque (revisão Pixel 01/09) */
@media (prefers-reduced-motion: reduce) {
  .copa-rays {
    animation: none;
  }
  .cab-card:hover img {
    animation: none;
  }
}
.page-hero-art {
  width: min(970px, 100%);
  height: auto;
  border-radius: 12px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
}
.page-hero-wide {
  width: min(1200px, 100%);
}

.page-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 5vw, 70px);
  padding: 22px clamp(16px, 4vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.page-stats div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.page-stats strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--ink);
  text-shadow: 0 0 18px rgba(255, 42, 30, 0.35);
}
.page-stats span {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--silver);
}

.page-band {
  display: flex;
  justify-content: center;
  padding: clamp(14px, 3vh, 30px) clamp(16px, 4vw, 48px);
  padding: clamp(14px, 3svh, 30px) clamp(16px, 4vw, 48px);
}
.page-band img {
  width: min(970px, 100%);
  height: auto;
  border-radius: 12px;
}

.page-section {
  padding: clamp(22px, 4vh, 44px) clamp(16px, 4vw, 48px);
  padding: clamp(22px, 4svh, 44px) clamp(16px, 4vw, 48px);
  max-width: 1120px;
  margin: 0 auto;
}
.page-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(255, 42, 30, 0.3);
}
.page-lead {
  margin: 0;
  max-width: 62ch;
  color: var(--silver);
  font-size: 15px;
  text-align: center;
  margin-inline: auto;
}

/* Zona das famílias: atmosfera de fogo 100% CSS (gradientes em camadas +
   brasas), sem imagem — mais leve e portável direto pro Astro */
.familia-zone {
  position: relative;
  padding: clamp(28px, 5vh, 60px) clamp(16px, 4vw, 48px);
  padding: clamp(28px, 5svh, 60px) clamp(16px, 4vw, 48px);
  background:
    linear-gradient(180deg, #000 0%, transparent 16%, transparent 84%, #000 100%),
    radial-gradient(52% 42% at 16% 28%, rgba(255, 106, 42, 0.34) 0%, transparent 70%),
    radial-gradient(46% 38% at 84% 20%, rgba(255, 42, 30, 0.28) 0%, transparent 70%),
    radial-gradient(64% 48% at 70% 80%, rgba(255, 153, 61, 0.24) 0%, transparent 72%),
    radial-gradient(42% 36% at 28% 88%, rgba(190, 28, 14, 0.38) 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 50%, #200502 0%, #000 100%);
  overflow: hidden;
}
/* brasas flutuando devagar */
.familia-zone::before {
  content: "";
  position: absolute;
  inset: -12% 0;
  pointer-events: none;
  background-image:
    radial-gradient(3px 3px at 12% 78%, rgba(255, 170, 80, 0.9), transparent 60%),
    radial-gradient(2px 2px at 26% 34%, rgba(255, 106, 42, 0.8), transparent 60%),
    radial-gradient(2.5px 2.5px at 41% 62%, rgba(255, 210, 130, 0.85), transparent 60%),
    radial-gradient(2px 2px at 57% 21%, rgba(255, 90, 40, 0.75), transparent 60%),
    radial-gradient(3px 3px at 68% 71%, rgba(255, 160, 70, 0.85), transparent 60%),
    radial-gradient(2px 2px at 79% 44%, rgba(255, 120, 50, 0.8), transparent 60%),
    radial-gradient(2.5px 2.5px at 90% 82%, rgba(255, 190, 110, 0.85), transparent 60%),
    radial-gradient(2px 2px at 8% 12%, rgba(255, 140, 60, 0.7), transparent 60%);
  animation: brasas-sobem 16s linear infinite;
}
@keyframes brasas-sobem {
  from {
    transform: translateY(12%);
  }
  to {
    transform: translateY(-12%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .familia-zone::before {
    animation: none;
  }
}
.familia-inner {
  position: relative;
}
.familia-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.familia-hint {
  font-family: var(--font-terminal);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.75);
}
.familia-lead {
  margin: 0 0 20px;
  text-align: left;
  margin-inline: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}
.familia-zone .status {
  border-color: #ffb347;
  color: #ffb347;
}

.familia-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
  gap: 14px;
  align-items: start;
}
.familia-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  background: rgba(5, 0, 0, 0.74);
  backdrop-filter: blur(5px);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.familia-card[open],
.familia-card:hover {
  box-shadow: 0 0 34px color-mix(in srgb, var(--fam, #ff6a2a) 30%, transparent);
}
.familia-card summary {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 12px;
  cursor: pointer;
  list-style: none;
}
.familia-card summary::-webkit-details-marker {
  display: none;
}
.familia-card summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
.familia-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.familia-head i {
  font-style: normal;
  color: var(--ash);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.familia-head b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  color: var(--fam, var(--red));
}
/* símbolo oficial da família (glifo branco tingido pela cor da família via mask) */
.familia-simbolo {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  vertical-align: -6px;
  border-radius: 50%;
  border: 2px solid var(--fam, var(--red));
  background-color: var(--fam, var(--red));
  -webkit-mask: var(--simbolo) center / 62% no-repeat, linear-gradient(#000 0 0);
  mask: var(--simbolo) center / 62% no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--fam, #ff6a2a) 50%, transparent));
}
/* tira com as 5 evoluções da família (arte oficial dos adesivos) */
.familia-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  align-items: end;
}
.familia-strip img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6));
  transition: transform 0.25s ease;
}
.familia-card:hover .familia-strip img {
  transform: translateY(-3px);
}
.familia-card[open] .familia-strip img:hover {
  transform: translateY(-6px) scale(1.06);
}
/* família sem expansão: capa do livro + intro oficial (revisão Pixel 01/09) */
.familia-static {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding: 16px 18px;
  align-items: start;
}
.familia-static > img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6));
}
.familia-static .familia-intro {
  margin-top: 10px;
  margin-bottom: 0;
}
.familia-chevron {
  position: absolute;
  top: 16px;
  right: 16px;
  color: var(--fam, var(--red));
  font-size: 14px;
  transition: transform 0.3s ease;
}
.familia-card[open] .familia-chevron {
  transform: rotate(180deg);
}
.familia-body {
  padding: 4px 18px 18px;
  animation: familia-reveal 0.35s ease;
}
@keyframes familia-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.familia-intro {
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 2px solid var(--fam, var(--red));
  color: var(--silver);
  font-size: 13px;
}
.familia-chars {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* cada evolução: arte + nome original → evoluído + descrição oficial */
.familia-char {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.familia-char > img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
}
.familia-char h5 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 400;
  color: var(--silver);
}
.familia-char h5 i {
  font-style: normal;
  opacity: 0.7;
}
.familia-char h5 em {
  font-style: normal;
  color: var(--fam, var(--red));
  padding: 0 2px;
}
.familia-char h5 span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--ink);
}
.familia-char p {
  margin: 0;
  color: var(--silver);
  font-size: 12px;
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  .familia-body {
    animation: none;
  }
  .familia-chevron {
    transition: none;
  }
}

.sku-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.sku-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  background: rgba(10, 2, 2, 0.6);
}
.sku-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
}
.sku-media img {
  max-width: 88%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
}
.sku-media .status {
  position: absolute;
  top: 4px;
  right: 4px;
}
.sku-noimage {
  color: var(--ash);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 30px 16px;
}
.sku-card h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  text-transform: uppercase;
}
.sku-card p {
  margin: 0;
  flex: 1;
  color: var(--silver);
  font-size: 12px;
}
.sku-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sku-meta strong {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--accent, var(--red));
}
.sku-isbn {
  color: var(--ash);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.sku-card .pill {
  align-self: flex-start;
  padding: 7px 20px;
  font-size: 11px;
}

.livro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 26px);
  max-width: 860px;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .livro-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
}
.copa-lead {
  margin: 0 0 24px;
  text-align: left;
  margin-inline: 0;
}
/* próximos lançamentos: linha compacta de pills (padrão do site 08) */
.livro-soon {
  margin-top: 30px;
  text-align: center;
}
.livro-soon p {
  margin: 0 0 12px;
  color: var(--silver);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.livro-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.livro-pills span {
  padding: 6px 16px;
  border-radius: 500px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.livro-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 14px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(10, 2, 2, 0.6);
  text-align: center;
}
.livro-card img {
  width: 82%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}
.livro-card p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--ink);
}
.livro-card p span {
  color: var(--ash);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.cab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.cab-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(10, 2, 2, 0.55);
  text-align: center;
}
.cab-card img {
  width: 72%;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}
.cab-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--silver);
}
.cab-card em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent, #ffd700);
}
.cab-card-raro {
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.12);
}

.page-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: clamp(26px, 5vh, 54px) 16px clamp(40px, 7vh, 70px);
  padding: clamp(26px, 5svh, 54px) 16px clamp(40px, 7svh, 70px);
}

/* ------------------------------------------------------------
   Páginas de linha (Cards, Atividades, Happy, Lenda, Milkshake)
   ------------------------------------------------------------ */

.line-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(34px, 6vh, 68px) clamp(20px, 5vw, 60px);
  padding: clamp(34px, 6svh, 68px) clamp(20px, 5vw, 60px);
  overflow: hidden;
  background: var(--surface, #150404);
}
.line-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  filter: saturate(0.9);
}
.line-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%),
    radial-gradient(120% 100% at 50% 120%, rgba(0, 0, 0, 0.7) 0%, transparent 65%);
  pointer-events: none;
}
.line-hero-copy,
.line-hero-art {
  position: relative;
  z-index: 1;
}
.line-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 52ch;
}
.line-hero-copy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
}
.line-tagline {
  margin: 0;
  color: var(--accent, var(--red));
  font-size: clamp(15px, 1.6vw, 19px);
}
.line-hero-copy > p:not(.line-tagline) {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}
.line-hero-art {
  justify-self: center;
  width: min(360px, 100%);
  height: auto;
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 40px color-mix(in srgb, var(--accent, #ff2a1e) 35%, transparent));
}

/* grade de faces de card (raridades) */
.face-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.face-grid figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.face-grid img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6));
  transition: transform 0.25s ease;
}
.face-grid figure:hover img {
  transform: translateY(-5px) rotate(-2deg);
}
.face-grid figcaption,
.showcase-grid figcaption {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silver);
}

/* vitrine de componentes / miolos */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.showcase-grid figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  background: rgba(10, 2, 2, 0.55);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.showcase-grid figure:hover {
  border-color: color-mix(in srgb, var(--accent, #ff2a1e) 60%, transparent);
  transform: translateY(-3px);
}
/* a imagem preenche o card, sem sobra de caixa vazia */
.showcase-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 14px 14px 0;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.55));
}
.showcase-grid figcaption {
  padding: 0 14px 14px;
  text-align: center;
}

/* narrativa: o que é / como funciona */
.narrative {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(22px, 4vw, 56px);
  align-items: start;
}
.narrative-copy p {
  margin: 0 0 12px;
  color: var(--silver);
  font-size: 15px;
  max-width: 56ch;
}
.narrative-copy p:last-child {
  margin-bottom: 0;
}
.narrative-list h4 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, var(--red));
}
.narrative-list dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* rótulo e texto no mesmo fluxo: leitura corrida, sem coluna solta */
.narrative-list div {
  padding-bottom: 12px;
  padding-left: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 2px solid color-mix(in srgb, var(--accent, #ff2a1e) 55%, transparent);
}
.narrative-list div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.narrative-list dt {
  display: inline;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--ink);
}
.narrative-list dt::after {
  content: " — ";
  color: var(--accent, var(--red));
}
.narrative-list .label-only dt::after {
  content: none;
}
.narrative-list dd {
  display: inline;
  margin: 0;
  color: var(--silver);
  font-size: 13px;
}

/* poucos produtos: cards não ficam órfãos numa grade larga */
.sku-grid-few {
  grid-template-columns: repeat(auto-fit, minmax(230px, 300px));
  justify-content: start;
}

@media (max-width: 700px) {
  .line-hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 28px 20px 34px;
  }
  .line-hero::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.82) 60%);
  }
  .line-hero-copy {
    align-items: center;
    order: 2;
  }
  .line-hero-art {
    order: 1;
    width: min(230px, 62vw);
  }
  .line-hero-copy h3 {
    font-size: 30px;
  }
  .face-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .showcase-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .showcase-grid img {
    padding: 10px 10px 0;
  }
  .showcase-grid figcaption {
    padding: 0 10px 10px;
  }
  .narrative {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .narrative-copy p {
    font-size: 15px;
  }
  .narrative-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .narrative-list dt {
    white-space: normal;
  }
}

/* alternância desktop/mobile das páginas internas */
.only-mobile {
  display: none;
}
.page-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-list li {
  position: relative;
  padding-left: 20px;
  color: var(--silver);
  font-size: 15px;
}
.page-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--accent, var(--red));
}
.hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
/* precisa da mesma especificidade de .hero-stack pra vencer o display:flex
   (a media query mobile reativa com .hero-stack.only-mobile) */
.hero-stack.only-mobile {
  display: none;
}
.hero-stack img {
  width: min(240px, 62vw);
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6));
}
.hero-stack h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 9vw, 42px);
  line-height: 0.98;
  text-transform: uppercase;
  color: #ffb347;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}
.hero-stack p {
  margin: 0;
  max-width: 34ch;
  color: var(--ink);
  font-size: 15px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

/* ---- Páginas internas no mobile: tudo maior e legível ---- */
@media (max-width: 700px) {
  .only-desktop {
    display: none;
  }
  .only-mobile {
    display: block;
  }
  .hero-stack.only-mobile {
    display: flex;
  }

  .page-hero {
    padding: 0;
  }
  .page-hero-copa picture img,
  .page-hero .page-hero-art {
    width: 100%;
    border-radius: 0;
  }
  .copa-hero-zone {
    padding: 0;
  }
  .copa-hero-zone .page-hero-art {
    border-radius: 0;
  }
  .page-hero-cosmic {
    position: relative;
    padding: 34px 20px 40px;
  }
  /* scrim: garante contraste do texto sobre o fundo cósmico */
  .page-hero-cosmic::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 0.8) 100%);
    pointer-events: none;
  }
  .page-hero-cosmic .hero-stack {
    position: relative;
    z-index: 1;
  }

  /* tipografia: escala do site 08 (títulos 30px, corpo 16px) */
  .page-title {
    font-size: 26px;
    margin-bottom: 14px;
  }
  .page-lead,
  .copa-lead {
    font-size: 16px;
    text-align: left;
    margin-inline: 0;
  }
  .page-section,
  .copa-zone,
  .familia-zone {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* stats: 2 colunas, números grandes */
  .page-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 12px;
    padding: 26px 20px;
  }
  .page-stats strong {
    font-size: 32px;
  }
  .page-stats span {
    font-size: 10px;
  }

  /* produtos: 2 colunas com imagem maior */
  .sku-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .sku-card {
    padding: 12px;
  }
  .sku-media {
    height: 130px;
  }
  .sku-card h4 {
    font-size: 14px;
  }
  .sku-card p {
    font-size: 12px;
  }
  .sku-meta strong {
    font-size: 16px;
  }
  .sku-isbn {
    display: none;
  }
  .sku-card .pill {
    width: 100%;
    justify-content: center;
  }

  /* cabeçudinhos: 3 colunas (padrão do site 08) com nome legível */
  .cab-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .cab-card figcaption {
    font-size: 12px;
  }

  /* famílias: tira maior e texto legível */
  .familia-head b {
    font-size: 22px;
  }
  .familia-intro {
    font-size: 14px;
  }
  .familia-char h5 {
    font-size: 14px;
  }
  .familia-char h5 span {
    font-size: 15px;
  }
  .familia-char p {
    font-size: 13px;
  }
  .familia-hint {
    display: block;
    margin-top: 4px;
  }
  .page-title {
    flex-wrap: wrap;
  }
}

body.hotsite-open {
  overflow: hidden;
}

.noscript {
  position: fixed;
  inset: auto 16px 16px;
  z-index: 50;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--red);
  color: var(--ink);
  text-align: center;
}

/* ------------------------------------------------------------
   Mobile (mesma mecânica, tudo nativo)
   ------------------------------------------------------------ */

@media (max-width: 1020px) {
  .e-vehicle {
    width: clamp(110px, 32vw, 150px);
  }
  /* no statement o texto ocupa o centro: E vira marca d'água */
  body[data-zone="statement"] .e-vehicle {
    opacity: 0.16;
  }

  .statement-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .statement-side {
    border-left: 0;
    padding-left: 0;
    align-items: center;
  }
  .stats {
    align-items: center;
  }

  .universe-card {
    width: min(76vw, 340px);
  }

  .universe-panel {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    transform: translateY(14px);
    width: 100%;
    padding: 16px clamp(16px, 5vw, 28px) calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.92) 30%);
    gap: 6px;
  }
  .universe-panel.is-active {
    transform: translateY(0);
  }
  .panel-description,
  .panel-keys,
  .panel-route {
    display: none;
  }

  .universe-menu {
    display: none;
  }

  .hud-level,
  .hud-route {
    display: none;
  }

  .hud-top {
    padding: 12px 14px;
  }
  .hud-brand img {
    width: 68px;
  }
  .hud-nav {
    padding: 8px 14px;
    gap: 10px;
  }
  .hud-nav a {
    font-size: 10px;
    white-space: nowrap;
  }
  .hud-nav-line {
    width: 16px;
  }

  .helix-cards {
    perspective-origin: 50% 40%;
  }

  .hotsite-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
    align-content: start;
    padding-top: 26px;
  }
  .hotsite-art {
    order: -1;
  }
  .hotsite-art img {
    max-height: 34vh;
    max-height: 34svh;
  }
  .hotsite-route {
    display: none;
  }
  /* barra apertada: o toggle de som fica só com o equalizer */
  .hotsite-audio.hud-audio {
    padding: 8px 12px;
    margin-right: 2px;
  }
  .hotsite-audio.hud-audio > span:not(.eq) {
    display: none;
  }
  .hotsite-home {
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 11px;
  }
}

/* ------------------------------------------------------------
   Movimento reduzido
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .e-ring::before {
    animation: none;
  }
  .scroll-hint .caret {
    animation: none;
  }
  .helix,
  .universe-panel,
  .universe-menu,
  .universe-dots,
  .hotsite {
    transition: none;
  }
}

/* ------------------------------------------------------------------
   Fluxo mobile (body.is-mobile, 29/09; ver MOBILE no prototype.ts).
   Página com scroll NATIVO; toda profundidade é animação presa ao scroll
   (animation-timeline), que roda no compositor, sem JavaScript por frame.
   Só transform/opacity animam aqui.
   ------------------------------------------------------------------ */
body.is-mobile .scroll-spacer,
body.is-mobile .helix,
body.is-mobile .universe-panel,
body.is-mobile .universe-menu,
body.is-mobile .universe-dots,
body.is-mobile .dust,
body.is-mobile .scroll-hint {
  display: none;
}
body.is-mobile .world {
  position: relative;
  inset: auto;
  transform: none;
  will-change: auto;
  pointer-events: auto;
}
body.is-mobile .station {
  position: relative;
  top: auto;
  min-height: 0;
  padding-block: 7svh;
}
body.is-mobile .station-hero {
  min-height: 100svh;
  padding-top: 15svh;
  padding-bottom: 2svh;
  justify-content: flex-start;
}
body.is-mobile .hero-gap {
  height: auto;
  display: grid;
  place-items: center;
  padding: 3svh 0 1svh;
}
body.is-mobile .hero-sub {
  padding-bottom: 0;
}
body.is-mobile .station-footer {
  padding-bottom: calc(10svh + env(safe-area-inset-bottom));
}
body.is-mobile .hud-nav,
body.is-mobile .base-panel {
  backdrop-filter: none; /* desfoque sobre conteúdo rolando = repaint por frame */
}
body.is-mobile .hud-nav {
  background: rgba(6, 1, 1, 0.82);
}
body.is-mobile .base-panel {
  background: rgba(8, 1, 1, 0.8);
}

/* O E no hero: giro e flutuação em CSS (compositor), 10 camadas como no desktop */
body.is-mobile .e-vehicle {
  position: relative;
  top: auto;
  left: auto;
  width: clamp(132px, 40vw, 176px);
  transform: none;
  animation: m-e-bob 5.2s ease-in-out infinite alternate;
}
body.is-mobile .e-solid {
  animation: m-e-spin 7s ease-in-out infinite alternate;
}
@keyframes m-e-bob {
  from { translate: 0 -6px; }
  to { translate: 0 6px; }
}
@keyframes m-e-spin {
  from { transform: rotateX(6deg) rotateY(-24deg); }
  to { transform: rotateX(-4deg) rotateY(24deg); }
}

/* Estrelas: ladrilhos que derivam devagar; a camada de perto anda mais */
.m-stars {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100lvh + 512px);
  z-index: 1;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 512px 512px;
  will-change: transform;
}
.m-stars-far {
  background-image: url("assets/m-stars-far.webp");
  opacity: 0.55;
  animation: m-drift 90s linear infinite;
}
.m-stars-near {
  background-image: url("assets/m-stars-near.webp");
  opacity: 0.8;
  animation: m-drift 46s linear infinite;
}
@keyframes m-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -512px, 0); }
}

/* Carrossel dos universos: scroll horizontal nativo, 1 card por gesto */
.m-universes {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 6svh 0 8svh;
  text-align: center;
}
.m-rail {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  gap: 16px;
  padding: 58px 0 10px; /* folga pro produto que salta acima da carta */
}
.m-rail::-webkit-scrollbar {
  display: none;
}
.m-slide {
  flex: 0 0 min(66vw, 280px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  scroll-snap-align: center;
  scroll-snap-stop: always; /* um card por gesto, mesmo num swipe forte */
}
.m-slide:first-child {
  margin-left: calc((100vw - min(66vw, 280px)) / 2);
}
.m-slide:last-child {
  margin-right: calc((100vw - min(66vw, 280px)) / 2);
}
body.is-mobile .m-slide .universe-card {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  transform: none;
  pointer-events: auto;
  transition: none;
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.7),
    0 0 40px var(--card-glow, rgba(255, 42, 30, 0.28));
}
body.is-mobile .m-slide .card-art::after {
  opacity: 1;
}
body.is-mobile .m-slide.is-current .card-halo {
  opacity: 1;
}
.m-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 96px;
}
.m-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--silver);
  font-size: 11px;
  letter-spacing: 0.26em;
}
.m-tagline {
  margin: 0;
  color: var(--accent, var(--gold));
  font-size: 14px;
}
.m-dots {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}
.m-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: transparent;
}
.m-dots button[aria-current="true"] {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 10px rgba(255, 42, 30, 0.8);
}
.m-hint {
  margin: 4px 0 0;
  color: var(--silver);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Carta colecionável (29/09): moldura na cor da linha, janela de arte, placa de
   nome, número vazado e o produto saltando para fora da janela */
body.is-mobile .m-card {
  aspect-ratio: 5 / 7;
  overflow: visible;
  border-radius: 18px;
  border: 1.5px solid color-mix(in srgb, var(--accent, #ff2a1e) 75%, #fff);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent, #ff2a1e) 28%, #120303) 0%, #070101 55%, color-mix(in srgb, var(--accent, #ff2a1e) 18%, #070101) 100%);
}
body.is-mobile .m-card::after {
  border-radius: inherit;
}
body.is-mobile .m-card .card-art {
  inset: 10px 10px 27% 10px;
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
body.is-mobile .m-card .card-art::after {
  inset: -40%;
  background: linear-gradient(
    112deg,
    transparent 36%,
    rgba(255, 90, 60, 0.16) 44%,
    rgba(255, 225, 140, 0.24) 50%,
    rgba(130, 200, 255, 0.14) 56%,
    transparent 64%
  );
}
body.is-mobile .m-card .m-pop {
  z-index: 2;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.7));
}
.m-frame {
  position: absolute;
  inset: 5px;
  z-index: 3;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #ff2a1e) 45%, transparent);
  pointer-events: none;
}
.m-num {
  position: absolute;
  top: 14px;
  left: 18px;
  z-index: 3; /* vazado: fica por cima do produto sem escondê-lo */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent, #ff2a1e) 80%, #fff);
  opacity: 0.85;
}
body.is-mobile .m-card .card-label {
  inset: auto 10px 10px;
  height: calc(27% - 14px);
  z-index: 3;
  justify-content: center;
  gap: 4px;
  padding: 10px 14px 8px;
  border-radius: 0 0 11px 11px;
  border-top: 2px solid var(--accent, #ff2a1e);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.85));
  text-align: center;
  align-items: center;
}
body.is-mobile .m-card .card-number {
  font-size: 9px;
  color: var(--accent, var(--silver));
}
body.is-mobile .m-card .card-title {
  font-size: 17px;
  line-height: 1.05;
}
.m-slide {
  --card-glow: color-mix(in srgb, var(--accent, #ff2a1e) 40%, transparent);
}

/* Profundidade presa ao scroll (Chrome 115+, Safari 26+). Sem suporte, a
   página é a mesma, só sem o 3D */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* hélice deitada: o card gira pra frente ao chegar ao centro */
    .m-slide {
      view-timeline: --m-slide inline;
    }
    body.is-mobile .m-slide .universe-card {
      animation: m-card linear both;
      animation-timeline: --m-slide;
    }
    @keyframes m-card {
      0% { transform: perspective(1100px) translateX(-4%) rotateY(-26deg) scale(0.84); opacity: 0.6; }
      50% { transform: perspective(1100px) rotateY(0deg) scale(1); opacity: 1; }
      100% { transform: perspective(1100px) translateX(4%) rotateY(26deg) scale(0.84); opacity: 0.6; }
    }
    /* camadas do card: a de perto corre mais que a moldura, o fundo fica pra trás */
    body.is-mobile .m-slide .card-layer {
      animation: m-layer linear both;
      animation-timeline: --m-slide;
    }
    @keyframes m-layer {
      from { translate: calc(var(--depth, 0.5) * 56px) 0; }
      to { translate: calc(var(--depth, 0.5) * -56px) 0; }
    }
    /* reflexo atravessa o card quando ele passa pelo centro */
    body.is-mobile .m-slide .card-art::after {
      transform: none;
      animation: m-sheen linear both;
      animation-timeline: --m-slide;
    }
    @keyframes m-sheen {
      from { transform: translateX(55%); }
      to { transform: translateX(-55%); }
    }
    /* produto que salta: sobe um pouco quando a carta chega ao centro */
    body.is-mobile .m-card .m-pop {
      animation: m-pop linear both;
      animation-timeline: --m-slide;
    }
    @keyframes m-pop {
      0%, 100% { translate: 0 10%; }
      50% { translate: 0 0; }
    }
    /* sombra nos cards laterais */
    body.is-mobile .m-slide .universe-card::after {
      animation: m-shade linear both;
      animation-timeline: --m-slide;
    }
    @keyframes m-shade {
      0%, 100% { opacity: 0.55; }
      50% { opacity: 0; }
    }
    /* texto do card só no card do centro */
    .m-info {
      animation: m-info linear both;
      animation-timeline: --m-slide;
    }
    @keyframes m-info {
      0%, 30% { opacity: 0; transform: translateY(14px); }
      44%, 56% { opacity: 1; transform: none; }
      70%, 100% { opacity: 0; transform: translateY(14px); }
    }

    /* mergulho: o E afunda e gira quando o hero sai da tela */
    body.is-mobile .hero-gap {
      animation: m-dive linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes m-dive {
      to { transform: translateY(30svh) rotateX(38deg) scale(0.55); opacity: 0; }
    }
    body.is-mobile .station-hero > :not(.hero-gap) {
      animation: m-lift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 90%;
    }
    @keyframes m-lift {
      to { transform: translateY(-12svh); opacity: 0; }
    }

    /* entrada das seções */
    body.is-mobile .station:not(.station-hero) > *,
    .m-universes > :not(.m-rail) {
      animation: m-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @keyframes m-reveal {
      from { transform: translateY(42px); opacity: 0; }
    }

    /* estrelas: a de perto sobe mais com a rolagem (paralaxe) */
    .m-stars-near {
      animation:
        m-drift 46s linear infinite,
        m-parallax linear both;
      animation-timeline: auto, scroll(root);
    }
    @keyframes m-parallax {
      to { translate: 0 -40svh; }
    }
  }
}