/* =========================================================
   PALMEIRAS · LANDING PAGE
   Consome tokens de tokens.css
   ========================================================= */

/* =========================================================
   Persistent UI · Wordmark, Store, Next Match, Menu
   ========================================================= */
.persistent-bar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-4) var(--s-5);
  z-index: 110;  /* > .menu-overlay (100) — botão fechar sempre visível */
  pointer-events: none;
  /* SEM mix-blend-mode aqui — afetaria a cor do botão LOJA */
}
.persistent-bar > * { pointer-events: auto; }

.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 900; font-style: italic;
  font-size: var(--t-md); line-height: .85;
  letter-spacing: -.01em; text-transform: uppercase;
  color: var(--paper);
  /* difference só aqui: wordmark fica escuro em fundo claro,
     claro em fundo escuro, automaticamente */
  mix-blend-mode: difference;
}
.brand-wordmark span { display: block; }
.brand-wordmark .second { color: var(--paper); }

.persistent-actions { display: flex; gap: var(--s-3); align-items: center; }

/* Logo do time no canto superior direito */
.brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 56px;
  line-height: 0;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.45));
  transition: transform var(--dur-2) var(--ease-out);
}
.brand-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.brand-logo:hover { transform: scale(1.06) rotate(-2deg); }

.store-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 12px 22px;
  background: var(--verde-neon); color: var(--verde-pitch);
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: var(--t-base); letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--r-full);
  mix-blend-mode: normal;
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2);
}
.store-btn:hover { background: var(--paper); transform: scale(1.04); }
.store-btn svg { width: 16px; height: 16px; }

.menu-btn {
  width: 48px; height: 48px;
  background: rgba(10,10,10,.78);
  backdrop-filter: blur(8px);
  border: 1px solid var(--steel);
  border-radius: var(--r-3);
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  color: var(--paper);
  cursor: pointer;
  z-index: 101;
  position: relative;
  transition: border-color var(--dur-2), background var(--dur-2);
}
.menu-btn:hover { border-color: var(--verde-neon); }
.menu-btn .bar {
  display: block; width: 20px; height: 1.6px;
  background: currentColor;
  transition: transform .35s var(--ease-out), width .35s var(--ease-out), opacity .2s;
  transform-origin: center;
}
.menu-btn .bar:last-child { width: 14px; }
.menu-btn:hover .bar:last-child { width: 20px; }
/* Quando menu aberto: mantém estilo escuro, só rotaciona barras formando X */
.menu-btn.is-open { border-color: var(--verde-neon); }
.menu-btn.is-open .bar { width: 22px; background: var(--paper); }
.menu-btn.is-open .bar:first-child { transform: translateY(3.3px) rotate(45deg); }
.menu-btn.is-open .bar:last-child  { transform: translateY(-3.3px) rotate(-45deg); }
.menu-btn.is-open:hover { border-color: var(--paper); }

/* =========================================================
   Menu Overlay (full-screen, estilo Lando Norris adaptado)
   ========================================================= */
.menu-overlay {
  position: fixed; inset: 0;
  z-index: 100;
  background: var(--verde-pitch);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease-out);
  overflow-y: auto;
  overflow-x: hidden;
  /* permite scroll dentro do overlay quando conteúdo passa de 100vh */
  scrollbar-color: var(--verde) transparent;
  scrollbar-width: thin;
}
.menu-overlay::-webkit-scrollbar { width: 6px; }
.menu-overlay::-webkit-scrollbar-thumb { background: var(--verde); border-radius: 3px; }
.menu-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.menu-overlay__bg {
  position: absolute; inset: 0;
  pointer-events: none;
}
.menu-overlay__bg svg { width: 100%; height: 100%; }
.menu-overlay::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 20% 100%, rgba(0,224,122,.15), transparent 60%),
    radial-gradient(40% 60% at 100% 0%, rgba(0,100,55,.4), transparent 60%);
  pointer-events: none;
}

.menu-overlay__inner {
  position: relative; z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  /* paddings escalam com altura da viewport p/ caber sem scroll */
  padding: clamp(72px, 10vh, 96px) var(--s-7) clamp(16px, 3vh, 32px);
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(var(--s-4), 3vh, var(--s-6));
}

/* Não há botão Fechar separado — o próprio .menu-btn (hamburger) vira X
   quando o menu abre, mantendo o mesmo estilo (quadrado escuro). */

/* ----- Grid principal: visual à esquerda, lista à direita ----- */
.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(var(--s-6), 6vw, var(--s-9));
  align-items: start;
}

/* ----- Coluna esquerda · brand visual ----- */
.menu-visual {
  position: sticky; top: 96px;
  display: flex; flex-direction: column;
  gap: var(--s-4);
  color: var(--paper);
}
.menu-visual .kicker {
  color: var(--verde-neon);
  display: inline-block;
}
.menu-title {
  font-family: var(--font-display);
  font-weight: 900; font-style: italic;
  font-size: clamp(1.6rem, 4.6vh, 3rem);
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0;
}
.menu-title .neon  { color: var(--verde-neon); }
.menu-title .period { color: var(--verde-neon); }

.menu-crest {
  width: clamp(72px, 13vh, 110px);
  height: clamp(84px, 15vh, 128px);
  margin: clamp(var(--s-2), 2vh, var(--s-3)) 0;
  filter: drop-shadow(0 8px 24px rgba(0,224,122,.18));
  transition: transform var(--dur-3) var(--ease-out);
}
.menu-crest:hover { transform: scale(1.04) rotate(-1deg); }
.menu-crest svg,
.menu-crest img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.menu-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-2), 1.5vh, var(--s-4)) var(--s-5);
  margin: 0;
  border-top: 1px solid rgba(0,224,122,.18);
  padding-top: clamp(var(--s-3), 2vh, var(--s-5));
}
.menu-stats > div { display: flex; flex-direction: column; gap: 4px; }
.menu-stats dt {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--fog);
  margin: 0;
}
.menu-stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900; font-style: italic;
  font-size: clamp(1.3rem, 3vh, 2.2rem);
  color: var(--verde-neon);
  line-height: 1;
}
.menu-stats dd sup { font-size: .42em; color: var(--mist); margin-left: 2px; }

.menu-tagline {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; color: var(--mist);
  margin: var(--s-3) 0 0;
  max-width: 32ch;
  line-height: 1.7;
}

/* ----- Coluna direita · lista numerada ----- */
.menu-nav {
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(0,224,122,.18);
}

.menu-item {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;
  gap: var(--s-3);
  /* padding vertical adaptativo p/ altura da viewport */
  padding: clamp(5px, 1vh, 11px) var(--s-3) clamp(5px, 1vh, 11px) var(--s-2);
  border-bottom: 1px solid rgba(0,224,122,.18);
  color: var(--paper);
  position: relative;
  text-decoration: none;
  transition:
    background var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    padding var(--dur-2) var(--ease-out);

  /* slide-in stagger */
  opacity: 0;
  transform: translateY(18px);
}
.menu-overlay.is-open .menu-item {
  opacity: 1; transform: translateY(0);
  transition:
    opacity .55s var(--ease-out),
    transform .55s var(--ease-out),
    background .25s var(--ease-out),
    color .25s var(--ease-out),
    padding .25s var(--ease-out);
}
.menu-overlay.is-open .menu-item:nth-child(1)  { transition-delay: .14s; }
.menu-overlay.is-open .menu-item:nth-child(2)  { transition-delay: .18s; }
.menu-overlay.is-open .menu-item:nth-child(3)  { transition-delay: .22s; }
.menu-overlay.is-open .menu-item:nth-child(4)  { transition-delay: .26s; }
.menu-overlay.is-open .menu-item:nth-child(5)  { transition-delay: .30s; }
.menu-overlay.is-open .menu-item:nth-child(6)  { transition-delay: .34s; }
.menu-overlay.is-open .menu-item:nth-child(7)  { transition-delay: .38s; }
.menu-overlay.is-open .menu-item:nth-child(8)  { transition-delay: .42s; }
.menu-overlay.is-open .menu-item:nth-child(9)  { transition-delay: .46s; }
.menu-overlay.is-open .menu-item:nth-child(10) { transition-delay: .50s; }
.menu-overlay.is-open .menu-item:nth-child(11) { transition-delay: .54s; }

.menu-item .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--fog);
  transition: color var(--dur-2);
}
.menu-item .name {
  font-family: var(--font-display);
  font-weight: 900; font-style: italic;
  font-size: clamp(1.15rem, 2.6vh, 2rem);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -.01em;
}
.menu-item .arr {
  justify-self: end;
  width: 22px; height: 1.5px;
  background: currentColor;
  position: relative;
  transition: width var(--dur-2) var(--ease-out);
}
.menu-item .arr::after {
  content: ""; position: absolute; right: 0; top: -3.5px;
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.menu-item:hover {
  background: var(--verde-neon);
  color: var(--verde-pitch);
  padding-left: var(--s-5);
  padding-right: var(--s-5);
}
.menu-item:hover .num { color: var(--verde-deep); }
.menu-item:hover .arr { width: 38px; }

.menu-item:focus-visible {
  outline: 2px solid var(--verde-neon);
  outline-offset: -2px;
}

/* Foot — badge + redes sociais */
.menu-foot {
  display: grid; grid-template-columns: auto 1fr; align-items: end;
  gap: var(--s-7);
  padding-top: clamp(var(--s-3), 2.5vh, var(--s-6));
  border-top: 1px solid rgba(0,224,122,.15);
  opacity: 0;
  transition: opacity .6s var(--ease-out) .55s;
}
.menu-overlay.is-open .menu-foot { opacity: 1; }

.menu-badge {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
  color: var(--mist);
}
.menu-badge svg { width: 64px; height: 48px; }
.menu-badge span {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
}

.menu-social { text-align: right; }
.menu-social .kicker {
  display: block; margin-bottom: var(--s-3); color: var(--verde-neon);
}
.menu-social .links {
  display: flex; gap: var(--s-5); flex-wrap: wrap; justify-content: flex-end;
}
.menu-social .links a {
  font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: var(--t-base); text-transform: uppercase; letter-spacing: .04em;
  color: var(--paper);
  transition: color var(--dur-2);
}
.menu-social .links a:hover { color: var(--verde-neon); }

/* Quando overlay aberto, esconde card próximo jogo pra não poluir */
body.menu-open .next-match-card { opacity: 0; pointer-events: none; }
body.menu-open { overflow: hidden; }

@media (max-width: 880px) {
  .menu-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .menu-visual { position: static; }
  .menu-visual .menu-crest { display: none; }
  .menu-visual .menu-tagline { display: none; }
  .menu-title { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .menu-stats { grid-template-columns: repeat(4, 1fr); gap: var(--s-3); padding-top: var(--s-4); }
  .menu-stats dd { font-size: clamp(1.2rem, 4vw, 1.8rem); }
}

/* Telas baixas — esconde elementos decorativos progressivamente p/ caber sem scroll */
@media (max-height: 800px) {
  .menu-visual .menu-tagline { display: none; }
}
@media (max-height: 720px) {
  .menu-visual .menu-crest { display: none; }
  .menu-stats { padding-top: var(--s-3); }
}
@media (max-height: 640px) {
  .menu-overlay__inner { padding-top: 64px; }
  .menu-visual .menu-stats { display: none; }
  .menu-title { font-size: clamp(1.4rem, 3vh, 2rem); }
}
/* Landscape mobile / viewport curto — força layout de uma coluna e esconde
   visual decorativo independente da largura */
@media (max-height: 560px) {
  .menu-grid { grid-template-columns: 1fr !important; }
  .menu-visual { display: none !important; }
  .menu-overlay__inner { padding-top: 56px; gap: var(--s-3); }
  .menu-item { padding: 12px var(--s-2); min-height: 44px; }
  .menu-item .name { font-size: clamp(1.1rem, 2.6vh, 1.6rem); }
}
/* ----- Menu mobile (≤ 720px) — foco em nav + redes ----- */
@media (max-width: 720px) {
  /* Esconde TUDO o lado decorativo — só nav importa */
  .menu-visual { display: none !important; }
  .menu-grid { display: block; }

  /* Inner: top padding pra clear a persistent bar, bottom safe area iOS */
  .menu-overlay__inner {
    padding: calc(72px + env(safe-area-inset-top)) var(--s-5)
             calc(var(--s-5) + env(safe-area-inset-bottom));
    gap: var(--s-5);
    grid-template-rows: 1fr auto;
  }

  /* Nav items: touch targets generosos + tipografia legível */
  .menu-nav {
    border-top: 1px solid rgba(0,224,122,.2);
    margin-top: var(--s-3);
  }
  .menu-item {
    grid-template-columns: 36px 1fr 28px;
    padding: 18px var(--s-3) 18px var(--s-2);
    gap: var(--s-3);
    min-height: 52px;          /* touch target ≥ 44px (Apple/Google) */
    align-items: center;
  }
  .menu-item .num {
    font-size: 10px;
    letter-spacing: .18em;
  }
  .menu-item .name {
    font-size: clamp(1.4rem, 6.5vw, 2rem);
  }
  .menu-item .arr { width: 18px; }
  .menu-item .arr::after { width: 7px; height: 7px; }

  /* Foot — só redes, sem badge SEP redundante */
  .menu-foot {
    grid-template-columns: 1fr;
    padding-top: var(--s-5);
    margin-top: var(--s-3);
    border-top: 1px solid rgba(0,224,122,.15);
    text-align: left;
    gap: var(--s-3);
  }
  .menu-badge { display: none; }
  .menu-social { text-align: left; }
  .menu-social .kicker {
    margin-bottom: var(--s-3); font-size: 10px;
  }
  .menu-social .links {
    justify-content: flex-start;
    gap: var(--s-4);
    flex-wrap: wrap;
  }
  .menu-social .links a {
    font-size: var(--t-md);
    padding: 8px 0;            /* touch area extra */
  }

  /* Botão menu (X) — touch target adequado */
  .menu-btn {
    width: 44px; height: 44px;
  }
  .menu-btn .bar { width: 18px; }
  .menu-btn .bar:last-child { width: 12px; }
  .menu-btn.is-open .bar { width: 20px; }

  /* Tap feedback (sem hover travar) */
  .menu-item:active {
    background: rgba(0,224,122,.18);
    color: var(--paper);
    padding-left: var(--s-3);
    padding-right: var(--s-3);
  }
}

/* Mobile pequeno (≤ 380px) — items ainda mais compactos */
@media (max-width: 380px) {
  .menu-item {
    padding: 14px var(--s-2);
    min-height: 48px;
  }
  .menu-item .name { font-size: clamp(1.2rem, 6vw, 1.6rem); }
  .menu-social .links { gap: var(--s-3); }
  .menu-social .links a { font-size: var(--t-base); }
}

/* Card Próximo Jogo (bottom-left) — compacto, sem ilustração, clicável */
.next-match-card {
  position: fixed; left: var(--s-5); bottom: var(--s-5);
  width: 172px;
  background: var(--paper); color: var(--verde-pitch);
  border-radius: var(--r-3);
  padding: var(--s-3) var(--s-4);
  z-index: 80;
  box-shadow: var(--sh-2);
  font-family: var(--font-mono);
  text-decoration: none;
  display: block;
  cursor: pointer;
  transition:
    transform var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out),
    opacity var(--dur-3);
}
.next-match-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.next-match-card:hover .next-match-card__arr {
  width: 22px;
}
.next-match-card:focus-visible {
  outline: 2px solid var(--verde-neon);
  outline-offset: 3px;
}

/* Seta indicadora de clicabilidade no canto superior direito do card */
.next-match-card__arr {
  position: absolute; top: var(--s-3); right: var(--s-4);
  width: 14px; height: 1.5px;
  background: var(--verde);
  transition: width var(--dur-2) var(--ease-out);
}
.next-match-card__arr::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--verde);
  border-top: 1.5px solid var(--verde);
  transform: rotate(45deg);
}
.next-match-card .label {
  font-size: 9px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ash); margin-bottom: var(--s-2);
}
.next-match-card .competition {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: var(--t-md); text-transform: uppercase; color: var(--verde-pitch);
  line-height: 1;
}
.next-match-card .vs {
  font-size: 10.5px; letter-spacing: .08em; color: var(--ash);
  margin-top: 4px;
}
.next-match-card .badge {
  margin-top: var(--s-3); padding-top: var(--s-2);
  border-top: 1px solid rgba(10,10,10,.1);
  font-size: 8.5px; letter-spacing: .22em; color: var(--ash);
  text-transform: uppercase;
}
@media (max-width: 720px) { .next-match-card { display: none; } }

/* =========================================================
   Capítulo 0 · HERO
   Full-bleed cinematográfico: imagem cobre toda viewport,
   gradient escuro pra legibilidade, faixas glitch cruzam por cima.
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--pitch);          /* fundo escuro p/ harmonizar com a foto */
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* Linhas orgânicas decorativas — só aparecem quando NÃO tem foto (fallback) */
.hero .bg-lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .06; z-index: 1; pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-out);
}
.hero .bg-lines path {
  fill: none; stroke: var(--verde-neon); stroke-width: 1.2;
}
.hero:has(.stage.has-image) .bg-lines { opacity: 0; }

/* Stage SEMPRE full-bleed — evita CLS quando image-swap injeta imagem.
   Sem imagem, a SVG-fallback fica centralizada como quadrado. */
.hero .stage {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.hero .stage > svg.crest-photo {
  width: min(720px, 80%);
  aspect-ratio: 1;
  max-height: 80%;
}
.hero .stage.has-image { display: block; }
.hero .stage.has-image > .img-swap {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;       /* prioriza torcida na parte de baixo */
  z-index: 0;
  border: 0;
}

/* Gradient escuro sobre a foto pra dar contraste ao texto/UI */
.hero .stage.has-image::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(10,10,10,.55) 0%,
      rgba(10,10,10,.18) 22%,
      rgba(10,10,10,.18) 60%,
      rgba(10,10,10,.92) 100%),
    radial-gradient(50% 70% at 50% 50%, transparent 50%, rgba(10,10,10,.35) 100%);
  pointer-events: none;
}

/* ---------- Glitch bands (faixas finas cruzando o hero) ---------- */
.hero .glitch-bands {
  position: absolute; inset: 0;
  z-index: 3; pointer-events: none;
}
.hero .glitch-bands .band {
  position: absolute; left: -3%; width: 106%; height: 6%;
  background: var(--pitch);
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--s-5);
  color: var(--verde-neon);
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(.85rem, 1.3vw, 1.1rem);
  text-transform: uppercase; letter-spacing: .04em;
  overflow: hidden; white-space: nowrap;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.hero .glitch-bands .band span { opacity: .92; }
.hero .glitch-bands .band--1 { top: 38%; transform: rotate(-.6deg); }
.hero .glitch-bands .band--2 { top: 50%; background: var(--verde); color: var(--paper); transform: rotate(.2deg); }
.hero .glitch-bands .band--3 { top: 62%; transform: rotate(.5deg); }

/* ---------- Labels — repos. p/ NÃO conflitar com next-match-card ---------- */
.hero .hero-label {
  position: absolute; left: var(--s-7); top: 96px;
  z-index: 5;
}
.hero .hero-label .eyebrow { color: rgba(244,244,238,.75); }
.hero .hero-label .year {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(3.5rem, 9vw, 7rem); line-height: .85;
  color: var(--paper);
  margin-top: var(--s-2);
  -webkit-text-stroke: 0;
  text-shadow: 0 4px 24px rgba(0,0,0,.5);
}

.hero .hero-meta {
  position: absolute; right: var(--s-7); bottom: var(--s-7);
  text-align: right; z-index: 5;
  max-width: 50%;
}
.hero .hero-meta .small {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(244,244,238,.7);
  margin-bottom: var(--s-2);
}
.hero .hero-meta .big {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1;
  color: var(--paper); text-transform: uppercase;
  text-shadow: 0 4px 24px rgba(0,0,0,.5);
}

/* ---------- Scroll cue ---------- */
.scroll-cue {
  position: absolute; left: 50%; bottom: var(--s-5);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .25em; text-transform: uppercase;
  color: rgba(244,244,238,.65);
  z-index: 5;
}
.scroll-cue .line {
  width: 1px; height: 36px; background: rgba(244,244,238,.5);
  animation: cue 1.8s var(--ease-out) infinite;
  transform-origin: top;
}
@keyframes cue {
  0%, 100% { transform: scaleY(.3); opacity: .35; }
  50%      { transform: scaleY(1); opacity: 1; }
}

/* Mobile: labels mais compactos */
@media (max-width: 720px) {
  .hero .hero-label { left: var(--s-4); top: 84px; }
  .hero .hero-meta { right: var(--s-4); bottom: 64px; max-width: 70%; }
  .hero .glitch-bands .band { height: 8%; padding: 0 var(--s-4); }
}

/* =========================================================
   Capítulo 1 · MANIFESTO
   ========================================================= */
.manifesto {
  background: var(--pitch);
  padding: var(--s-10) 0;
  min-height: 90vh;
  display: flex; align-items: center;
}
.manifesto .wrap { text-align: left; }
.manifesto .kicker { margin-bottom: var(--s-5); display: block; }
.manifesto .pull {
  font-family: var(--font-display);
  font-weight: 900; font-style: italic;
  font-size: clamp(2.5rem, 6.5vw, 6rem);
  line-height: .95;
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: -.02em;
  max-width: 18ch;
}
.manifesto .pull .neon { color: var(--verde-neon); }
.manifesto .pull .outline { -webkit-text-stroke: 2px var(--paper); color: transparent; }
.manifesto .signature {
  margin-top: var(--s-7); width: 220px;
}
.manifesto .signature path {
  fill: none; stroke: var(--verde-neon); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.manifesto .source {
  margin-top: var(--s-4);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--fog);
}

/* word reveal helper */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.split-word > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}

/* =========================================================
   Capítulo 2 · TIMELINE EM COLAGEM
   ========================================================= */
.timeline {
  position: relative;
  padding: var(--s-10) 0;
  background: var(--carbon);
  overflow: hidden;
}
.timeline .marquee-bg {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(8rem, 18vw, 18rem);
  line-height: 1; white-space: nowrap;
  color: rgba(255,255,255,.025);
  pointer-events: none; user-select: none;
}
.timeline .head {
  position: relative; z-index: 2;
  margin-bottom: var(--s-9); max-width: 600px;
}
.timeline .head h2 { margin-bottom: var(--s-4); }
.timeline .grid {
  position: relative; z-index: 2;
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(12, 1fr);
}
.timeline .item {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.timeline .item .caption {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--mist);
}
.timeline .item .pic {
  background: var(--verde-deep);
  border: 1px solid var(--steel);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/5;
}
.timeline .item .pic svg { width: 100%; height: 100%; }
.timeline .item--1 { grid-column: 1 / span 5; margin-top: var(--s-7); }
.timeline .item--2 { grid-column: 7 / span 4; }
.timeline .item--3 { grid-column: 11 / span 2; margin-top: var(--s-9); }
.timeline .item--4 { grid-column: 2 / span 4; margin-top: var(--s-10); }
.timeline .item--5 { grid-column: 7 / span 6; margin-top: var(--s-7); }
.timeline .item--6 { grid-column: 1 / span 3; margin-top: var(--s-6); }
.timeline .item--7 { grid-column: 5 / span 7; }
@media (max-width: 720px) {
  .timeline .grid { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .timeline .item { grid-column: span 1 !important; margin-top: 0 !important; }
  .timeline .item--5, .timeline .item--7 { grid-column: span 2 !important; }
}

/* =========================================================
   Capítulo 3 · MUNDIAL 1951 (pinned + scrub)
   ========================================================= */
.chapter-mundial {
  position: relative;
  background: var(--verde-pitch);
  min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.chapter-mundial::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 80% 30%, rgba(201,162,74,.18), transparent 60%),
    radial-gradient(40% 60% at 0% 100%, rgba(0,224,122,.08), transparent 60%);
  pointer-events: none;
}
.chapter-mundial .grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7);
  align-items: center;
}
@media (max-width: 880px) { .chapter-mundial .grid { grid-template-columns: 1fr; } }
.chapter-mundial .copy .chapter {
  display: inline-block; padding: 6px 12px;
  border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  margin-bottom: var(--s-5);
}
.chapter-mundial .copy h2 {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  margin-bottom: var(--s-5);
}
.chapter-mundial .copy h2 .gold { color: var(--gold); }
.chapter-mundial .facts {
  list-style: none; padding: 0; margin: var(--s-6) 0 0;
  display: grid; gap: var(--s-3);
  border-top: 1px solid var(--verde);
  padding-top: var(--s-5);
}
.chapter-mundial .facts li {
  display: grid; grid-template-columns: 130px 1fr; gap: var(--s-4);
  font-family: var(--font-mono); font-size: var(--t-sm); color: var(--paper);
}
.chapter-mundial .facts li b {
  color: var(--gold); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
}
.chapter-mundial .visual {
  position: relative;
  aspect-ratio: 4/5;
  display: flex; align-items: center; justify-content: center;
}
.chapter-mundial .visual .photo {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, var(--graphite), var(--verde-pitch));
  border: 1px solid var(--gold);
  position: relative; overflow: hidden;
}
.chapter-mundial .visual .photo svg { width: 100%; height: 100%; }
.chapter-mundial .visual .star {
  position: absolute; top: -32px; right: -32px;
  width: 120px; height: 120px;
  transform: scale(0) rotate(-30deg);
}
.chapter-mundial .visual .star path { fill: var(--gold); }

/* Scrub-revealed words */
.scrub-word {
  display: inline-block;
  opacity: .15;
  transition: color .1s, opacity .1s;
}
.scrub-word.is-active { opacity: 1; }

/* =========================================================
   Capítulo 4 · TRÍPLICE LIBERTA (horizontal in vertical)
   ========================================================= */
.chapter-tripla {
  background: var(--pitch);
  position: relative;
}
.chapter-tripla .head {
  padding: var(--s-9) var(--gutter) var(--s-7);
  max-width: var(--max); margin: 0 auto;
}
.chapter-tripla .panels-wrap {
  overflow: hidden;
}
.chapter-tripla .panels {
  display: flex; width: 300vw;
  will-change: transform;
}
.chapter-tripla .panel {
  width: 100vw; min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7);
  align-items: center;
  padding: 0 var(--s-9);
  position: relative;
}
@media (max-width: 880px) {
  .chapter-tripla .panel { grid-template-columns: 1fr; padding: var(--s-7); }
}
.chapter-tripla .panel .info { color: var(--paper); }
.chapter-tripla .panel .info .year {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(6rem, 18vw, 16rem);
  line-height: .8; color: var(--verde-neon);
  letter-spacing: -.04em;
}
.chapter-tripla .panel .info .count {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .22em; color: var(--mist); margin-bottom: var(--s-3);
}
.chapter-tripla .panel .info h3 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  margin: var(--s-3) 0;
}
.chapter-tripla .panel .info p {
  color: var(--mist); max-width: 40ch;
  font-size: var(--t-md);
}
.chapter-tripla .panel .photo {
  aspect-ratio: 3/4;
  background: var(--verde-deep);
  border: 1px solid var(--verde);
  overflow: hidden;
}
.chapter-tripla .panel .photo svg { width: 100%; height: 100%; }
.chapter-tripla .progress {
  position: sticky; bottom: var(--s-5); left: 0; right: 0;
  display: flex; gap: var(--s-2); justify-content: center;
  pointer-events: none;
}
.chapter-tripla .progress span {
  width: 28px; height: 2px; background: var(--steel);
  transition: background var(--dur-2);
}
.chapter-tripla .progress span.is-active { background: var(--verde-neon); }

/* =========================================================
   Capítulo 5 · SALA DOS TROFÉUS
   ========================================================= */
.trophies {
  background: var(--verde-deep);
  padding: var(--s-10) 0;
  position: relative;
  overflow: hidden;
}
.trophies::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(50% 70% at 50% 50%, rgba(201,162,74,.12), transparent 70%);
}
.trophies .head { position: relative; z-index: 2; margin-bottom: var(--s-8); }
.trophies .grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5);
}
@media (max-width: 880px) { .trophies .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .trophies .grid { grid-template-columns: 1fr; } }
.trophy-block {
  padding: var(--s-6) var(--s-5);
  border-top: 2px solid var(--gold);
  position: relative;
  overflow: hidden;
}
.trophy-block .num {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(5rem, 10vw, 10rem);
  line-height: .85; color: var(--paper);
  letter-spacing: -.04em;
  position: relative;
  display: inline-block;
}
.trophy-block .num::after {
  content: ""; position: absolute; left: 0; bottom: 8%; height: 6px; width: 0;
  background: var(--verde-neon);
  transition: width var(--dur-4) var(--ease-out);
}
.trophy-block.is-revealed .num::after { width: 100%; }
.trophy-block .title {
  font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: var(--t-md); color: var(--paper);
  text-transform: uppercase; margin-top: var(--s-3);
}
.trophy-block .years {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; color: var(--mist); margin-top: var(--s-2);
}

/* =========================================================
   Capítulo 6 · ÍDOLOS (carrossel)
   ========================================================= */
.idols {
  background: var(--pitch);
  padding: var(--s-9) 0 var(--s-10);
  position: relative;
}
.idols .head { margin-bottom: var(--s-7); }
.idols .head h2 { margin-bottom: var(--s-3); }
.idols .controls {
  display: flex; gap: var(--s-3); margin-top: var(--s-5);
}
.idols .controls button {
  width: 48px; height: 48px;
  border: 1px solid var(--steel);
  color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-2);
}
.idols .controls button:hover {
  background: var(--verde-neon); color: var(--verde-pitch);
  border-color: transparent;
}
.idols .track-wrap {
  overflow: hidden;
  /* fade nas bordas pra polir o loop */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.idols .track {
  display: flex;
  width: max-content;
  will-change: transform;
  /* SEM animation CSS — GSAP toma conta após duplicação assíncrona */
}
.idols .idol-card { margin-right: var(--s-4); flex-shrink: 0; }

/* Esconde controles do carrossel manual — agora é auto-scroll GSAP */
.idols .controls { display: none; }
.idol-card {
  flex: 0 0 280px;
  aspect-ratio: 3/4;
  position: relative; overflow: hidden;
  background: radial-gradient(70% 70% at 50% 30%, var(--verde) 0%, var(--verde-pitch) 60%, var(--pitch) 100%);
  border: 1px solid var(--steel);
}
.idol-card .silhouette {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
}
.idol-card .silhouette svg {
  width: 75%; height: 85%; opacity: .85;
}
.idol-card .num {
  position: absolute; top: var(--s-4); right: var(--s-4);
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 86px; line-height: 1; color: var(--verde-neon);
  text-shadow: 0 0 30px rgba(0,224,122,.4);
}
.idol-card .info {
  position: absolute; left: var(--s-4); right: var(--s-4); bottom: var(--s-4);
}
.idol-card .info h3 {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: var(--t-lg); text-transform: uppercase;
  margin: 0; color: var(--paper);
  line-height: 1;
}
.idol-card .info .pos {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--verde-neon);
  margin-top: 4px;
}
.idol-card .info .stat {
  font-family: var(--font-mono); font-size: 11px; color: var(--mist);
  margin-top: var(--s-2); border-top: 1px solid var(--steel);
  padding-top: var(--s-2);
}

/* =========================================================
   Capítulo 7 · ALLIANZ PARQUE (zoom-out pin)
   ========================================================= */
.chapter-allianz {
  position: relative;
  height: 250vh; /* room for scrub */
  background: var(--pitch);
}
.chapter-allianz .sticky {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.chapter-allianz .scene {
  width: 100%; height: 100%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  transform-origin: 50% 50%;
}
.chapter-allianz .scene svg {
  width: 100%; height: 100%;
}
.chapter-allianz .overlay {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: var(--s-9) var(--s-7);
  pointer-events: none;
}
.chapter-allianz .overlay .head h2 {
  font-size: clamp(3rem, 8vw, 7rem);
  color: var(--paper);
}
.chapter-allianz .overlay .head .kicker { margin-bottom: var(--s-3); display: block; }
.chapter-allianz .overlay .stats {
  display: flex; gap: var(--s-7); flex-wrap: wrap;
  align-self: flex-end;
}
.chapter-allianz .overlay .stats div {
  font-family: var(--font-mono);
  color: var(--paper);
}
.chapter-allianz .overlay .stats b {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: var(--t-2xl); color: var(--verde-neon);
  display: block; line-height: 1;
}
.chapter-allianz .overlay .stats span {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mist);
}

/* =========================================================
   Capítulo 8 · SÓCIO AVANTI
   ========================================================= */
.avanti {
  background: var(--verde);
  color: var(--paper);
  padding: var(--s-10) 0;
  position: relative;
  overflow: hidden;
}
.avanti::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 50% at 80% 0%, rgba(0,224,122,.25), transparent 70%);
}
.avanti .wrap { position: relative; z-index: 2; text-align: center; }
.avanti .kicker { display: block; margin-bottom: var(--s-5); }
.avanti .counter {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(6rem, 22vw, 22rem);
  line-height: .8; letter-spacing: -.04em;
  color: var(--paper);
}
.avanti .counter .neon { color: var(--verde-neon); }
.avanti .label {
  font-family: var(--font-mono); font-size: var(--t-sm);
  letter-spacing: .22em; text-transform: uppercase;
  margin-top: var(--s-4); color: var(--bone);
}
.avanti .lead {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  text-transform: uppercase; line-height: 1;
  color: var(--paper);
  margin: var(--s-7) auto var(--s-7);
  max-width: 22ch;
}
.avanti .cta-row {
  display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap;
}

/* =========================================================
   Capítulo 9 · LOJA PUMA
   ========================================================= */
.shop {
  background: var(--paper);
  color: var(--verde-pitch);
  padding: var(--s-10) 0;
}
.shop .head { margin-bottom: var(--s-7); }
.shop .head h2 { color: var(--verde-pitch); }
.shop .head .kicker { color: var(--verde); }
/* Override .lead (mist cinza claro) p/ contraste suficiente sobre fundo cream */
.shop .head .deck,
.shop .head .lead { color: var(--ash); }
.shop .grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4);
}
@media (max-width: 880px) { .shop .grid { grid-template-columns: 1fr 1fr; } }
.product {
  background: var(--white);
  border: 1px solid rgba(10,10,10,.06);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: transform var(--dur-3) var(--ease-out);
}
.product:hover { transform: translateY(-6px); }
.product .img {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--bone), var(--paper));
  display: flex; align-items: center; justify-content: center;
}
.product .img svg {
  width: 70%; height: 70%;
  transition: transform var(--dur-4) var(--ease-out);
}
.product:hover .img svg { transform: rotate(-6deg) scale(1.05); }
.product .meta {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ash);
}
.product .name {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: var(--t-md); text-transform: uppercase;
  color: var(--verde-pitch); line-height: 1;
}
.product .price {
  font-family: var(--font-mono); font-size: var(--t-base);
  color: var(--verde);
  margin-top: auto;
}

/* =========================================================
   Capítulo 10 · PRÓXIMO JOGO (big card)
   ========================================================= */
.next-match {
  background: var(--carbon);
  padding: var(--s-10) 0;
}
.next-match .frame {
  background: var(--graphite);
  border: 1px solid var(--steel);
  padding: var(--s-9) var(--s-7);
  position: relative; overflow: hidden;
}
.next-match .frame::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--verde-neon);
}
.next-match .frame .row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--s-5);
  margin-bottom: var(--s-7);
}
.next-match .vs {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: var(--s-7); align-items: center; text-align: center;
  margin-bottom: var(--s-7);
}
.next-match .vs .team {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.next-match .vs .shield {
  width: 110px; height: 110px;
  background: var(--verde); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: var(--t-xl);
  overflow: hidden;
  transition: background var(--dur-2), transform var(--dur-3) var(--ease-out);
}
.next-match .vs .team.away .shield { background: var(--steel); color: var(--mist); }

/* Shield com logo real da ESPN — fundo claro + imagem centralizada */
.next-match .vs .shield.has-logo {
  background: var(--paper);
  padding: 12px;
  border: 1px solid var(--steel);
}
.next-match .vs .shield.has-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.next-match .vs .shield:hover { transform: scale(1.04); }
.next-match .vs .team .name {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: var(--t-lg); text-transform: uppercase; color: var(--paper);
}
.next-match .vs .x {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: var(--t-3xl); color: var(--verde-neon);
}
.next-match .countdown {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4); text-align: center;
  border-top: 1px solid var(--steel); padding-top: var(--s-6);
}
.next-match .countdown .unit b {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(2.5rem, 7vw, 5rem);
  color: var(--paper); display: block; line-height: 1;
}
.next-match .countdown .unit span {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--fog);
  margin-top: var(--s-2); display: block;
}

/* =========================================================
   Estado AO VIVO (jogo em andamento) · cards persistente + grande
   ========================================================= */

/* ---------- Persistent card live ---------- */
.next-match-card.is-live {
  border-left: 3px solid var(--danger);
  padding-left: calc(var(--s-4) - 3px);
}
.next-match-card.is-live .label {
  color: var(--danger);
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.next-match-card.is-live .label::before {
  content: ""; width: 7px; height: 7px;
  background: var(--danger); border-radius: 50%;
  box-shadow: 0 0 8px var(--danger);
  animation: live-pulse 1.4s var(--ease-out) infinite;
}
.next-match-card.is-live .vs {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 14px; color: var(--verde-pitch);
  letter-spacing: 0;
}
.next-match-card.is-live .badge {
  color: var(--danger); font-weight: 600;
}

/* ---------- Big card live ---------- */
.next-match .frame.is-live::before {
  background: linear-gradient(90deg, var(--danger), #FF6B6B, var(--danger));
  background-size: 200% 100%;
  animation: live-shimmer 3s linear infinite;
  height: 4px;
}
.next-match .frame.is-live {
  border-color: rgba(224,65,59,.45);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(224,65,59,.05), transparent 70%),
    var(--graphite);
}

/* VS area mais respiro + shields levemente maiores */
.next-match .frame.is-live .vs {
  margin: var(--s-7) 0 var(--s-5);
}
.next-match .frame.is-live .vs .shield {
  width: 124px; height: 124px;
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
}

/* Score gigante — protagonista visual */
.next-match .frame.is-live .vs .x {
  font-size: clamp(4rem, 9vw, 7.5rem);
  color: var(--paper);
  letter-spacing: -.04em;
  line-height: 1;
  text-shadow: 0 6px 30px rgba(0,0,0,.45);
  position: relative;
  padding: 0 var(--s-3);
}
/* O "×" do meio em verde-neon pra destacar entre os números */
.next-match .frame.is-live .vs .x::after {
  /* Nota: usamos texto inline (ex. "2 × 1") então o "×" está embutido.
     Estilo via gradient pra dar contraste sutil. */
}

/* Live banner — agora horizontal, compacto, integrado */
.next-match .live-banner {
  display: none;
  align-items: center; justify-content: center;
  gap: var(--s-5);
  margin: 0 auto var(--s-5);
  padding: 10px var(--s-5);
  background: rgba(224,65,59,.1);
  border: 1px solid rgba(224,65,59,.35);
  border-radius: var(--r-full);
  width: fit-content;
  position: relative;
  overflow: hidden;
}
.next-match .live-banner::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(50% 100% at 50% 50%, rgba(224,65,59,.18), transparent 70%);
  pointer-events: none;
}
.next-match .frame.is-live .live-banner {
  display: flex;
  margin-left: auto; margin-right: auto;
}
.next-match .frame.is-live .countdown { display: none; }

.next-match .live-banner .badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--danger); font-weight: 700;
}
.next-match .live-banner .badge::before {
  content: ""; width: 8px; height: 8px;
  background: var(--danger); border-radius: 50%;
  box-shadow: 0 0 12px var(--danger);
  animation: live-pulse 1.3s var(--ease-out) infinite;
}
.next-match .live-banner .minute {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1;
  color: var(--paper);
  border-left: 1px solid rgba(224,65,59,.3);
  padding-left: var(--s-4);
}
.next-match .live-banner .status {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--bone);
}

/* Chip "AO VIVO · AGORA" no topo do card — vermelho pulsante */
.chip.chip--live {
  background: var(--danger) !important;
  color: var(--paper) !important;
  border-color: transparent !important;
  padding: 8px 14px;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip.chip--live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 8px var(--paper);
  animation: live-pulse 1.3s var(--ease-out) infinite;
}

/* CTA quando live: vermelho */
.next-match .frame.is-live .btn--primary {
  background: var(--danger); color: var(--paper);
}
.next-match .frame.is-live .btn--primary:hover { background: var(--paper); color: var(--danger); }
.next-match .frame.is-live .btn--primary .arr { background: var(--paper); }
.next-match .frame.is-live .btn--primary:hover .arr { background: var(--danger); }

@keyframes live-shimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

@keyframes live-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(.6); opacity: .55; }
}


/* =========================================================
   Últimos Resultados (dentro de Cap 10 · next-match)
   ========================================================= */
.last-matches { margin-top: var(--s-9); }
.last-matches__head { margin-bottom: var(--s-5); }
.last-matches__head .kicker { display: block; margin-bottom: var(--s-3); }
.last-matches__head h3 { margin: 0 0 var(--s-3); }
.last-matches__head .lead { max-width: 56ch; }

.last-matches__list {
  display: flex; gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--s-2) 0 var(--s-5);
  margin: 0 calc(var(--gutter) * -1);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  scrollbar-color: var(--steel) transparent;
  scrollbar-width: thin;
}
.last-matches__list::-webkit-scrollbar { height: 6px; }
.last-matches__list::-webkit-scrollbar-thumb { background: var(--steel); border-radius: 3px; }

.result-card {
  flex: 0 0 240px;
  background: var(--carbon);
  border: 1px solid var(--steel);
  padding: var(--s-4) var(--s-4) 0;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--s-3);
  position: relative;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2);
}
.result-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  transition: width var(--dur-2);
}
.result-card.win::before  { background: var(--verde-neon); }
.result-card.draw::before { background: var(--warning); }
.result-card.loss::before { background: var(--danger); }
.result-card:hover { transform: translateY(-3px); }
.result-card.win:hover::before  { width: 5px; }
.result-card.draw:hover::before { width: 5px; }
.result-card.loss:hover::before { width: 5px; }

.result-card .result-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fog);
}
.result-card .result-meta .comp { color: var(--mist); }

.result-card .result-matchup {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0;
}
.result-card .team {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.result-card .team img {
  width: 38px; height: 38px; object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.3));
}
.result-card .team .abbr {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; color: var(--mist);
}
.result-card .team.is-pal .abbr { color: var(--verde-neon); }

.result-card .score {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: var(--t-xl); color: var(--paper);
  text-align: center; line-height: 1;
  display: flex; align-items: center; gap: 4px;
}
.result-card .score .x {
  color: var(--ash); font-size: var(--t-md);
  font-style: normal; font-weight: 400;
}

.result-card .result-tag {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  text-align: center;
  padding: var(--s-2) 0;
  border-top: 1px solid var(--steel);
  margin: 0 calc(var(--s-4) * -1);
  padding-left: var(--s-4); padding-right: var(--s-4);
}
.result-card.win  .result-tag { color: var(--verde-neon); }
.result-card.draw .result-tag { color: var(--warning); }
.result-card.loss .result-tag { color: var(--danger); }


/* =========================================================
   Footer
   ========================================================= */
.lp-footer {
  background: var(--verde-pitch);
  padding-top: 0;
}
.lp-footer .marquee {
  background: var(--verde-neon); color: var(--verde-pitch);
  padding: var(--s-3) 0;
  overflow: hidden;
  border-bottom: 1px solid var(--verde);
  /* fade nas bordas pra dar polimento */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.lp-footer .marquee .track {
  display: inline-flex;
  white-space: nowrap;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: var(--t-md); letter-spacing: .04em; text-transform: uppercase;
  animation: scroll 30s linear infinite;
  will-change: transform;
}
/* Cada item tem padding-right uniforme (em vez de flex gap),
   garantindo que o duplicado tenha exatamente 2× a largura e
   o translateX(-50%) caia perfeitamente no início da cópia 2. */
.lp-footer .marquee .track span {
  display: inline-block;
  padding-right: var(--s-7);
  flex-shrink: 0;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.lp-footer .content {
  padding: var(--s-9) 0 var(--s-7);
  display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s-7);
}
@media (max-width: 720px) { .lp-footer .content { grid-template-columns: 1fr; } }
.lp-footer h2 {
  font-size: clamp(3rem, 9vw, 7rem); color: var(--paper);
}
.lp-footer h2 .out { -webkit-text-stroke: 2px var(--paper); color: transparent; }
.lp-footer .meta {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4);
  align-content: end;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mist);
}
.lp-footer .meta dt {
  color: var(--verde-neon); display: block; margin-bottom: 4px;
  font-weight: 700;
}
.lp-footer .meta dd { margin: 0; }
.lp-footer .colophon {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--verde);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--mist);
  letter-spacing: .14em; flex-wrap: wrap; gap: var(--s-4);
}

/* Crédito do criador — pílula inline na mesma linha do colophon */
.lp-footer .creator-credit {
  display: inline-flex; align-items: center; gap: var(--s-2);
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid rgba(0,224,122,.25);
  border-radius: var(--r-full);
  transition: background var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
  white-space: nowrap;
  flex-shrink: 0;
}
.lp-footer .creator-credit:hover {
  background: rgba(0,224,122,.1);
  border-color: var(--verde-neon);
}
.lp-footer .creator-credit .label {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--fog);
  transition: color var(--dur-2);
}
.lp-footer .creator-credit .name {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper);
  transition: color var(--dur-2);
}
.lp-footer .creator-credit:hover .name { color: var(--verde-neon); }
.lp-footer .creator-credit .arr {
  width: 11px; height: 1px;
  background: var(--mist);
  position: relative;
  transition: width var(--dur-2) var(--ease-out), background var(--dur-2);
}
.lp-footer .creator-credit .arr::after {
  content: ""; position: absolute; right: 0; top: -2.5px;
  width: 6px; height: 6px;
  border-right: 1px solid var(--mist);
  border-top: 1px solid var(--mist);
  transform: rotate(45deg);
  transition: border-color var(--dur-2);
}
.lp-footer .creator-credit:hover .arr {
  width: 18px; background: var(--verde-neon);
}
.lp-footer .creator-credit:hover .arr::after {
  border-color: var(--verde-neon);
}

/* =========================================================
   Imagens swapped (substituem SVG placeholders)
   ========================================================= */
.img-swap {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Container com imagem injetada — força preencher 100% */
[data-replace].has-image > .img-swap { position: absolute; inset: 0; }
.timeline .item .pic.has-image,
.chapter-mundial .visual .photo.has-image,
.chapter-tripla .panel .photo.has-image,
.idols .idol-card.has-image,
.chapter-allianz .scene.has-image,
.shop .product .img.has-image {
  position: relative;
}
/* NOTA: .hero .stage.has-image usa position: absolute (definido na seção HERO acima)
   .next-match-card também NÃO entra acima — precisa manter position: fixed do original */

/* Ídolos: imagem substitui a silhueta + gradient.
   IMPORTANTE: NÃO sobrescrever position do .num/.info (eles são absolute
   no estilo base — apenas elevar z-index). */
.idol-card.has-image .silhouette { display: none; }
.idol-card.has-image > .img-swap {
  position: absolute !important; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
.idol-card .num  { z-index: 3; }
.idol-card .info { z-index: 3; }
.idol-card.has-image::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(10,10,10,0)   0%,
    rgba(10,10,10,0)   30%,
    rgba(10,10,10,.6)  60%,
    rgba(10,10,10,.95) 100%);
  pointer-events: none;
}

/* Allianz scene com imagem real: garante cobertura no zoom-out */
.chapter-allianz .scene.has-image > .img-swap {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* Card persistente: imagem dentro da .stadium-illu */
.next-match-card .stadium-illu .img-swap {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* Produto loja: imagem dentro do quadrado .img */
.product .img.has-image { padding: var(--s-3); }
.product .img.has-image > .img-swap {
  position: relative; inset: auto;
  width: 100%; height: 100%; object-fit: contain;
}

/* =========================================================
   Tratamento duotone (filter SVG) sobre imagens swapped
   ========================================================= */
.img-swap.duotone {
  filter:
    grayscale(1)
    contrast(1.15)
    brightness(.78)
    sepia(.18)
    hue-rotate(85deg)
    saturate(2.6);
}

/* Variação mais sutil no hero (não queremos perder a foto) */
.hero .stage.has-image > .img-swap.duotone {
  filter:
    contrast(1.08) saturate(1.1) brightness(.92)
    hue-rotate(-4deg);
}

/* Em fundo claro (timeline-1914, mundial sépia) — preserva contraste */
.timeline .item--1 .pic > .img-swap.duotone {
  filter:
    grayscale(1)
    contrast(1.2)
    brightness(.92)
    sepia(.4)
    hue-rotate(50deg)
    saturate(1.6);
}

/* =========================================================
   Trophies section · background com imagem
   ========================================================= */
body.has-trophies-bg .trophies::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--trophies-bg-url);
  background-size: cover; background-position: center;
  opacity: .12;
  mix-blend-mode: lighten;
  pointer-events: none;
  filter: hue-rotate(85deg) saturate(2) brightness(.6);
}
.trophies { position: relative; }
.trophies > * { position: relative; z-index: 2; }

/* =========================================================
   Utilitários reveal
   ========================================================= */
.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* container helper */
.section-pad { padding: var(--s-10) 0; }
.section-head { margin-bottom: var(--s-7); }
.section-head .kicker { display: block; margin-bottom: var(--s-3); }
.section-head h2 { margin-bottom: var(--s-3); }
.section-head .deck { color: var(--mist); max-width: 60ch; }


/* =========================================================
   ===========================================================
   MOBILE FIXES (≤ 880px)
   ===========================================================
   Estratégia: empilhar tudo verticalmente, desligar layouts que
   dependem de animações pesadas do GSAP, escalar tipografia.
   ========================================================= */
@media (max-width: 880px) {

  /* ---------- HERO ---------- */
  .hero { min-height: 80vh; }
  .hero .stage.has-image > .img-swap {
    object-fit: cover;
    object-position: center 60%;
  }
  .hero .hero-label {
    top: 80px; left: var(--s-4);
  }
  .hero .hero-label .year {
    font-size: clamp(2.8rem, 14vw, 5rem);
  }
  .hero .hero-meta {
    right: var(--s-4); bottom: var(--s-5);
    max-width: 70%;
  }
  .hero .hero-meta .small { font-size: 9px; letter-spacing: .18em; }
  .hero .hero-meta .big {
    font-size: clamp(1.1rem, 4.5vw, 1.8rem);
  }
  .scroll-cue { font-size: 9px; bottom: var(--s-3); }

  /* ---------- MANIFESTO ---------- */
  .manifesto { min-height: auto; padding: var(--s-9) 0; }
  .manifesto .pull { font-size: clamp(2rem, 8vw, 3.5rem); }
  .manifesto .signature { width: 160px; }

  /* ---------- TIMELINE ---------- */
  .timeline { padding: var(--s-9) 0; }
  .timeline .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--s-3) !important;
  }
  .timeline .item {
    grid-column: span 1 !important;
    margin-top: 0 !important;
  }
  .timeline .item--5,
  .timeline .item--7 { grid-column: span 2 !important; }
  .timeline .marquee-bg { font-size: clamp(4rem, 18vw, 9rem); }

  /* ---------- MUNDIAL 1951 (sem pin/scrub) ---------- */
  .chapter-mundial {
    min-height: auto;
    padding: var(--s-9) 0;
    display: block;
  }
  .chapter-mundial .grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .chapter-mundial .copy h2 {
    font-size: clamp(2rem, 9vw, 3.5rem);
  }
  .chapter-mundial .visual {
    aspect-ratio: 4/3;
    max-width: 360px;
    margin: 0 auto;
  }
  /* Sem scroll-trigger no mobile, palavras precisam estar visíveis */
  .scrub-word { opacity: 1 !important; color: var(--paper) !important; }
  .scrub-word.gold { color: var(--gold) !important; }

  /* ---------- TRÍPLICE AMÉRICA (CRÍTICO) ---------- */
  .chapter-tripla .panels-wrap { overflow: visible; }
  .chapter-tripla .panels {
    flex-direction: column;
    width: 100% !important;
    transform: none !important;  /* mata GSAP inline */
  }
  .chapter-tripla .panel {
    width: 100% !important;
    min-height: auto;
    padding: var(--s-7) var(--s-5);
    grid-template-columns: 1fr;
    gap: var(--s-5);
    border-bottom: 1px solid var(--steel);
  }
  .chapter-tripla .panel:last-child { border-bottom: 0; }
  .chapter-tripla .panel .info .year {
    font-size: clamp(4rem, 18vw, 8rem);
  }
  .chapter-tripla .panel .photo { aspect-ratio: 4/3; max-width: 100%; }
  .chapter-tripla .progress { display: none; }

  /* ---------- TROFÉUS ---------- */
  .trophies { padding: var(--s-9) 0; }
  .trophy-block .num { font-size: clamp(3.5rem, 16vw, 6rem); }

  /* ---------- ÍDOLOS (carrossel — fica) ---------- */
  .idols { padding: var(--s-7) 0 var(--s-9); }
  .idol-card { flex: 0 0 240px; }
  .idol-card .num { font-size: 64px; top: var(--s-3); right: var(--s-3); }

  /* ---------- ALLIANZ (CRÍTICO — sem pin/zoom) ---------- */
  .chapter-allianz {
    height: auto;
    min-height: 70vh;
  }
  .chapter-allianz .sticky {
    position: relative;
    height: 70vh;
    min-height: 480px;
  }
  .chapter-allianz .scene {
    transform: none !important;  /* mata zoom-out do GSAP */
  }
  .chapter-allianz .overlay {
    padding: var(--s-7) var(--s-5);
    opacity: 1 !important;
  }
  .chapter-allianz .overlay .head h2 { font-size: clamp(2.5rem, 10vw, 4rem); }
  .chapter-allianz .overlay .stats {
    gap: var(--s-4);
  }
  .chapter-allianz .overlay .stats b { font-size: clamp(1.5rem, 7vw, 2.4rem); }

  /* ---------- AVANTI ---------- */
  .avanti { padding: var(--s-9) 0; }
  .avanti .counter { font-size: clamp(4rem, 22vw, 10rem); }
  .avanti .lead {
    font-size: clamp(1.2rem, 5vw, 2rem);
    margin: var(--s-6) auto;
  }
  .avanti .cta-row { gap: var(--s-3); }
  .avanti .btn { padding: 16px 22px; font-size: var(--t-base); }

  /* ---------- LOJA ---------- */
  .shop { padding: var(--s-9) 0; }
  .shop .grid { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .product { padding: var(--s-3); }
  .product .name { font-size: var(--t-base); }

  /* ---------- PRÓXIMO JOGO (card grande) ---------- */
  .next-match { padding: var(--s-9) 0; }
  .next-match .frame {
    padding: var(--s-6) var(--s-4);
  }
  .next-match .frame .row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
  }
  .next-match .vs { gap: var(--s-3); margin-bottom: var(--s-5); }
  .next-match .vs .shield {
    width: 72px; height: 72px;
    font-size: var(--t-md);
  }
  .next-match .vs .x {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
  }
  .next-match .vs .team .name {
    font-size: var(--t-base);
  }
  .next-match .countdown {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-2);
    padding-top: var(--s-4);
  }
  .next-match .countdown .unit b {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
  }
  .next-match .countdown .unit span { font-size: 9px; letter-spacing: .14em; }

  /* Live banner mais compacto */
  .next-match .frame.is-live .vs .shield { width: 80px; height: 80px; }
  .next-match .frame.is-live .vs .x {
    font-size: clamp(2.5rem, 14vw, 5rem);
  }
  .next-match .live-banner {
    flex-direction: column; gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
  }
  .next-match .live-banner .minute {
    border-left: 0; padding-left: 0;
  }

  /* ---------- ÚLTIMOS RESULTADOS ---------- */
  .last-matches { margin-top: var(--s-7); }
  .result-card { flex: 0 0 200px; padding: var(--s-3) var(--s-3) 0; }
  .result-card .team img { width: 30px; height: 30px; }
  .result-card .score { font-size: var(--t-lg); }

  /* ---------- FOOTER ---------- */
  .lp-footer .content { padding: var(--s-7) 0 var(--s-5); }
  .lp-footer h2 { font-size: clamp(2.5rem, 12vw, 4rem); }
  .lp-footer .meta { grid-template-columns: 1fr 1fr; gap: var(--s-3); font-size: 10px; }
  .lp-footer .colophon { font-size: 9px; flex-direction: column; align-items: flex-start; }

  /* ---------- PERSISTENT BAR ---------- */
  .brand-wordmark { font-size: 14px; }
  .brand-logo { width: 38px; height: 44px; }
  .menu-btn { width: 42px; height: 42px; }
  .menu-btn .bar { width: 18px; }
  .menu-btn .bar:last-child { width: 12px; }

  /* ---------- TYPOGRAPHY GERAL ---------- */
  .h1 { font-size: clamp(2.5rem, 14vw, 4.5rem); }
  .h2 { font-size: clamp(1.8rem, 8vw, 3rem); }
  .h3 { font-size: clamp(1.4rem, 6vw, 2.2rem); }
  .lead { font-size: var(--t-base); }
  .section { padding: var(--s-8) 0; }
  .section-pad { padding: var(--s-8) 0; }
  .section-head { margin-bottom: var(--s-5); }
  .wrap { padding: 0 var(--s-4); }
}


/* =========================================================
   MOBILE PEQUENO (≤ 480px)
   ========================================================= */
@media (max-width: 480px) {
  /* Timeline 1-col puro */
  .timeline .grid { grid-template-columns: 1fr !important; }
  .timeline .item, .timeline .item--5, .timeline .item--7 {
    grid-column: 1 / -1 !important;
  }

  /* Loja 1-col */
  .shop .grid { grid-template-columns: 1fr; }

  /* Troféus 1-col */
  .trophies .grid { grid-template-columns: 1fr; gap: var(--s-3); }

  /* Hero ainda mais compacto */
  .hero .hero-label { top: 72px; }
  .hero .hero-label .year { font-size: clamp(2.2rem, 16vw, 3.5rem); }
  .hero .hero-meta { max-width: 60%; }
  .hero .hero-meta .big { font-size: clamp(.95rem, 4.5vw, 1.4rem); }

  /* Próximo jogo: shields ainda menores */
  .next-match .vs .shield { width: 56px; height: 56px; font-size: var(--t-sm); }
  .next-match .vs .x { font-size: clamp(1.5rem, 8vw, 2rem); }
  .next-match .countdown { grid-template-columns: repeat(2, 1fr); }

  /* Idol card menor */
  .idol-card { flex: 0 0 200px; }
  .idol-card .num { font-size: 48px; }
  .idol-card .info h3 { font-size: var(--t-md); }

  /* Result card menor */
  .result-card { flex: 0 0 180px; }
}


/* =========================================================
   TOUCH DEVICES — desabilita hover effects que travam touch
   ========================================================= */
@media (hover: none) {
  .next-match-card:hover { transform: none; }
  .idol-card:hover { transform: none; }
  .menu-item:hover {
    background: transparent;
    color: var(--paper);
    padding-left: var(--s-2);
    padding-right: var(--s-3);
  }
  .menu-item:hover .num { color: var(--fog); }
  .menu-item:active {
    background: var(--verde-neon);
    color: var(--verde-pitch);
  }
}