/* FUENTES: generado por tools/descargar-fuentes.js */
@font-face {
  font-family: "Fjalla One";
  font-style: normal;
  font-weight: 400;
  /* swap: se ve el texto con la fuente del sistema mientras carga, en vez de
     dejar la página en blanco. Importa en la portada, que es la que reciben
     los anuncios. */
  font-display: swap;
  src: url("../fonts/fjalla-one-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fjalla One";
  font-style: normal;
  font-weight: 400;
  /* swap: se ve el texto con la fuente del sistema mientras carga, en vez de
     dejar la página en blanco. Importa en la portada, que es la que reciben
     los anuncios. */
  font-display: swap;
  src: url("../fonts/fjalla-one-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  /* swap: se ve el texto con la fuente del sistema mientras carga, en vez de
     dejar la página en blanco. Importa en la portada, que es la que reciben
     los anuncios. */
  font-display: swap;
  src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  /* swap: se ve el texto con la fuente del sistema mientras carga, en vez de
     dejar la página en blanco. Importa en la portada, que es la que reciben
     los anuncios. */
  font-display: swap;
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* /FUENTES */



/* ---------------------------------------------------------------- TIPOGRAFÍA
   Fjalla One para títulos: condensada y de trazo firme, un 29 % más estrecha que
   Titan One. Prioriza que los titulares ocupen poco. Nunito como alternativa legible para textos largos.
   Los archivos están alojados en public/fonts (ver tools/descargar-fuentes.js):
   la CSP del sitio es font-src 'self' y no admite hojas de Google.
   -------------------------------------------------------------------------- */
:root {
  --fuente-titulos: "Fjalla One", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-texto: "Nunito", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Se pidió la fuente de títulos en TODO, párrafos incluidos.
     PARA VOLVER A LA COMBINACIÓN RECOMENDADA (títulos con carácter y textos
     cómodos de leer) basta con cambiar esta línea por:
       --fuente-cuerpo: var(--fuente-texto);
     Los dos archivos ya están publicados, así que el cambio es inmediato: una
     fuente declarada y no usada no la descarga el navegador. */
  --fuente-cuerpo: var(--fuente-titulos);
}

body {
  font-family: var(--fuente-cuerpo);
  /* Fjalla One solo tiene un grosor. Sin esto, el navegador falsea las negritas
     engordando los trazos y el resultado queda emborronado. */
  font-synthesis-weight: none;
}

h1, h2, h3, h4, h5, h6,
.nav-brand, .btn, .btn-hero, .btn-nav, .stat-value, .lateral-marca-texto {
  font-family: var(--fuente-titulos);
}

/* Los campos no heredan la fuente por su cuenta. */
input, select, textarea, button { font-family: inherit; }

/* Los identificadores de juego y los resúmenes para copiar siguen en monoespacio:
   ahí lo que importa es distinguir un 0 de una O. */
code, #copiar-texto, .inbox-gameid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }



/* Las transiciones entre documentos exigen que ambas páginas se apunten, así que
   la portada pública declara lo mismo que el resto del sitio (ver styles.css). */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: 190ms cubic-bezier(.4, 0, 1, 1) both paginaSale;
}
::view-transition-new(root) {
  animation: 340ms cubic-bezier(.2, .8, .3, 1) 40ms both paginaEntra;
}
@keyframes paginaSale { to { opacity: 0; transform: translateY(-10px) scale(.99); } }
@keyframes paginaEntra { from { opacity: 0; transform: translateY(16px) scale(.995); } }

html.saliendo body {
  opacity: 0; transform: translateY(-8px);
  transition: opacity 180ms ease-in, transform 180ms ease-in;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html.saliendo body { transition: none; opacity: 1; transform: none; }
}

:root {
  --bg-0: #0b0e17;
  --bg-1: #131829;
  --bg-2: #1b2136;
  --card: #171d30;
  --text: #eef1fb;
  --text-dim: #9aa3c0;
  --accent: #7c5cff;
  --accent-2: #2ee6d6;
  --rare: #5B9BD5;
  --epic: #A64AC9;
  --legendary: #E8912D;
  --mythic: #F2C94C;
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  background: var(--bg-0);
  color: var(--text);
  overflow-x: hidden;
}

a { color: inherit; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; background: rgba(11,14,23,0.75); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; text-decoration: none; }
.nav-brand .spark { font-size: 20px; animation: pulse 2.4s infinite ease-in-out; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a:not(.btn-nav) { color: var(--text-dim); text-decoration: none; font-size: 13.5px; transition: color .15s ease; }
.nav-links a:not(.btn-nav):hover { color: var(--text); }
.btn-nav {
  display: inline-block; padding: 9px 18px; text-decoration: none;
  color: #fff; font-size: 13.5px; font-weight: 700;
}

@keyframes pulse { 0%,100% { opacity: .7; transform: scale(1);} 50% { opacity: 1; transform: scale(1.15);} }

/* ---------- HERO ---------- */
/* Fondo: la ciudad nocturna, recortada con "cover". Las azoteas por las que caminan
   los espíritus están definidas en coordenadas de la imagen (ver CITY_PLATFORMS en
   landing.js) y se convierten a píxeles según cómo quede recortada la imagen. */
.hero {
  position: relative; padding: 110px 24px 120px; text-align: center; overflow: hidden;
  min-height: 620px;
  display: flex; flex-direction: column; justify-content: center;
  background: #0b0e17 url("../images/fondo.webp") center / cover no-repeat;
}
/* Velo oscuro para que el texto se lea sobre la ciudad sin apagarla del todo. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(180deg, rgba(8,10,18,0.72) 0%, rgba(8,10,18,0.35) 45%, rgba(8,10,18,0.55) 100%);
}
/* El texto y los botones van por encima del velo y de los espíritus. */
.hero > *:not(.hero-playground) { position: relative; z-index: 2; }

.hero-badge {
  display: inline-block; padding: 6px 16px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(46,230,214,0.12); color: var(--accent-2); border: 1px solid rgba(46,230,214,0.3);
  margin-bottom: 22px; letter-spacing: .03em; align-self: center;
  backdrop-filter: blur(6px);
}
.hero h1 {
  font-size: clamp(32px, 6vw, 60px); font-weight: 900; margin: 0 0 18px; line-height: 1.08;
  /* El halo oscuro (para que el título siga legible sobre la foto de la ciudad)
     convive con el mismo corte glitch rojo/cian de "POWER HOURS", pero con los
     colores del propio hero: violeta (--accent) y cian (--accent-2) en vez del
     rojo/verde-lima de aquella sección. */
  text-shadow:
    0 2px 24px rgba(11,14,23,0.9), 0 0 8px rgba(11,14,23,0.7),
    2px 0 var(--accent), -2px 0 var(--accent-2), 0 0 22px rgba(46,230,214,0.4);
}
.hero h1 .accent { color: var(--accent-2); }

@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: hero-titulo-parpadeo 7s ease-in-out infinite; }
}
/* El mismo parpadeo ocasional de "POWER HOURS", solo que aquí más espaciado —
   es el titular permanente de la portada, no el cartel de un evento, así que
   el efecto tiene que poder ignorarse fácil. */
@keyframes hero-titulo-parpadeo {
  0%, 94%, 100% {
    text-shadow:
      0 2px 24px rgba(11,14,23,0.9), 0 0 8px rgba(11,14,23,0.7),
      2px 0 var(--accent), -2px 0 var(--accent-2), 0 0 22px rgba(46,230,214,0.4);
  }
  95% {
    text-shadow:
      0 2px 24px rgba(11,14,23,0.9), 0 0 8px rgba(11,14,23,0.7),
      3px 0 var(--accent), -3px 0 var(--accent-2), 0 0 10px rgba(46,230,214,0.25);
  }
  96% {
    text-shadow:
      0 2px 24px rgba(11,14,23,0.9), 0 0 8px rgba(11,14,23,0.7),
      -2px 0 var(--accent), 2px 0 var(--accent-2), 0 0 28px rgba(46,230,214,0.55);
  }
}
.hero p.lead {
  max-width: 640px; margin: 0 auto 34px; color: var(--text-dim); font-size: 17px; line-height: 1.6;
  text-shadow: 0 2px 16px rgba(11,14,23,0.95), 0 0 6px rgba(11,14,23,0.8);
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-hero {
  padding: 15px 30px; font-size: 15px; font-weight: 700; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-hero:hover { transform: translateY(-3px); }
.btn-hero.primary {
  /* El color y el escalón los pone el bloque de BOTONES, al final del archivo. */
  color: #fff;
}
.btn-hero.ghost {
  background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid rgba(255,255,255,0.14);
}

/* ---------- ESPÍRITUS QUE PASEAN POR LA CIUDAD ---------- */
/* Capa que cubre TODO el hero. Los espíritus caminan sobre las azoteas del fondo,
   dan media vuelta al llegar al borde y saltan de un edificio a otro. Van por
   detrás del texto (z-index 1: sobre el velo, bajo el texto). */
.hero-playground {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.floating-spirit {
  position: absolute; left: 0; top: 0; will-change: transform;
  /* Aísla la mezcla del tinte: solo afecta a la estampa, nunca a la ciudad. */
  isolation: isolate;
}
.floating-spirit img {
  width: 100%; height: 100%; object-fit: contain;
  /* Gradación nocturna: las estampas vienen iluminadas de día y desentonaban sobre
     la ciudad de noche. Se bajan brillo y saturación y se sube algo el contraste
     para que compartan la penumbra del fondo.
     La sombra pegada a los pies ayuda a que se vean apoyadas en la azotea. */
  filter:
    brightness(0.80) saturate(0.88) contrast(1.06)
    drop-shadow(0 6px 5px rgba(0,0,0,0.75));
}
/* Baño de luz de luna: tiñe de azul solo la silueta (usa la propia estampa como
   máscara), con "color" para virar el tono sin aplastar el volumen del dibujo.
   La intensidad está medida: más arriba las estampas quedan casi monocromas y ya no
   se distingue una variante Gold de una Gummy, que es justo lo que queremos lucir. */
.floating-spirit::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #6f8bd6 0%, #33406e 100%);
  opacity: 0.26;
  mix-blend-mode: color;
  -webkit-mask: var(--sprite) center / contain no-repeat;
  mask: var(--sprite) center / contain no-repeat;
}
/* El tinte tiene que moverse EXACTAMENTE igual que la estampa (volteo y animación
   de choque incluidos); si no, se despegaría de la silueta al voltearse o al chocar. */

/* Se voltea según hacia dónde camine. */
.floating-spirit.mirror img,
.floating-spirit.mirror::after { transform: scaleX(-1); }

/* Al chocar, el espíritu se transforma en otro: giro + rebote que acompaña el cambio. */
.floating-spirit.morphing img,
.floating-spirit.morphing::after { animation: spiritMorph .46s cubic-bezier(.34,1.4,.64,1); }
.floating-spirit.morphing.mirror img,
.floating-spirit.morphing.mirror::after { animation-name: spiritMorphMirror; }
@keyframes spiritMorph {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.32) rotate(-16deg); }
  60%  { transform: scale(1.12) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes spiritMorphMirror {
  0%   { transform: scaleX(-1) scale(1) rotate(0deg); }
  30%  { transform: scaleX(-1) scale(1.32) rotate(-16deg); }
  60%  { transform: scaleX(-1) scale(1.12) rotate(10deg); }
  100% { transform: scaleX(-1) scale(1) rotate(0deg); }
}

/* Destello de colisión: un anillo que se expande y chispas que salen disparadas. */
.burst { position: absolute; left: 0; top: 0; pointer-events: none; }
.burst-ring {
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid var(--burst-color, #2ee6d6);
  animation: burstRing .6s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes burstRing {
  0%   { transform: scale(.3); opacity: .95; }
  100% { transform: scale(4.2); opacity: 0; }
}
.burst-spark {
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--burst-color, #2ee6d6);
  box-shadow: 0 0 10px var(--burst-color, #2ee6d6);
  animation: burstSpark .62s ease-out forwards;
}
@keyframes burstSpark {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .floating-spirit img { transition: none; }
}

/* ---------- REVEAL ---------- */
/* El contenido se ve SIEMPRE por defecto. Solo se esconde para animarlo cuando
   landing.js ha arrancado de verdad (marca .con-js en el <html>). Antes bastaba
   con que fallara el IntersectionObserver, o con tener JS desactivado, para que
   media portada quedara en blanco: aquí hay información, no adorno. */
.reveal { opacity: 1; transform: none; }
html.con-js .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
html.con-js .reveal.visible { opacity: 1; transform: translateY(0); }
html.con-js .reveal-stagger.visible { transition-delay: var(--stagger-delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
  html.con-js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- SECTION HEADERS ---------- */
.section { padding: 90px 24px; }
.section-alt { background: linear-gradient(180deg, transparent, rgba(124,92,255,0.04), transparent); }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 56px; }
.section-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 10px;
}
.section-head h2 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 14px; font-weight: 800; }
.section-head p { color: var(--text-dim); font-size: 15.5px; line-height: 1.6; margin: 0; }

/* ---------- STATS STRIP ---------- */

/* ---------- SPIRITS GRID ---------- */
.spirits-showcase {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px;
  max-width: 1140px; margin: 0 auto;
}
.spirit-tile {
  background: linear-gradient(165deg, var(--bg-2), var(--card)); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px; padding: 16px 14px; text-align: center; position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.spirit-tile:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(0,0,0,0.4); border-color: var(--tile-color, var(--accent)); }
.spirit-tile-rarity {
  position: absolute; top: 10px; right: 10px; width: 9px; height: 9px; border-radius: 50%;
}
.spirit-tile img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); margin-bottom: 10px; }
.spirit-tile h4 { font-size: 13.5px; margin: 0 0 4px; font-weight: 700; }
.spirit-tile .eng { font-size: 10.5px; color: var(--text-dim); margin: 0 0 8px; }
.spirit-tile .ability { font-size: 11px; color: var(--text-dim); line-height: 1.4; margin: 0; }

/* ---------- FINAL CTA ---------- */
.final-cta {
  text-align: center; padding: 100px 24px; position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 0%, rgba(124,92,255,0.22), transparent 60%);
}
.final-cta h2 { font-size: clamp(26px, 4.5vw, 42px); font-weight: 900; margin: 0 0 16px; }
.final-cta p { color: var(--text-dim); font-size: 15.5px; margin: 0 0 32px; }

/* ---------- FOOTER ---------- */
.landing-footer {
  padding: 40px 24px 60px; text-align: center; border-top: 1px solid rgba(255,255,255,0.06);
}
.landing-footer p { color: var(--text-dim); font-size: 11.5px; line-height: 1.6; max-width: 720px; margin: 0 auto 8px; opacity: .75; }
.landing-footer .credit { font-size: 12px; color: var(--text-dim); margin-top: 14px; }

@media (max-width: 720px) {
  .nav-links a:not(.btn-nav) { display: none; }
  .section { padding: 64px 20px; }
  .hero { padding: 84px 20px 84px; min-height: 560px; }
}

/* ===================== FICHAS DE ESPÍRITU (páginas públicas) ===================== */

.ficha-hero {
  padding: 56px 24px 40px;
  background:
    radial-gradient(700px 320px at 20% 0%, color-mix(in srgb, var(--color, #7c5cff) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #151b2e, var(--bg-0));
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ficha-hero-inner {
  max-width: 980px; margin: 0 auto;
  display: flex; align-items: center; gap: 34px; flex-wrap: wrap;
}
.ficha-hero-inner.solo-texto { display: block; }
.ficha-img {
  width: 180px; height: 180px; object-fit: contain; flex: 0 0 auto;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.55));
}
.ficha-migas { font-size: 13px; color: var(--text-dim); margin: 0 0 10px; }
.ficha-migas a { color: var(--text-dim); text-decoration: none; }
.ficha-migas a:hover { color: var(--accent-2); }
.ficha-hero h1 { font-size: 40px; line-height: 1.12; margin: 0 0 6px; letter-spacing: -0.02em; }
.ficha-ingles { font-size: 15px; color: var(--text-dim); margin: 0 0 12px; }
.ficha-rareza { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; margin: 0 0 16px; }
.ficha-rareza span { width: 10px; height: 10px; border-radius: 50%; }
.ficha-habilidad { font-size: 16px; line-height: 1.6; color: var(--text); margin: 0; max-width: 60ch; }

.ficha-bloque { max-width: 980px; margin: 0 auto; padding: 44px 24px 0; }
.ficha-bloque h2 { font-size: 24px; margin: 0 0 12px; }
.ficha-intro { font-size: 15px; line-height: 1.65; color: var(--text-dim); margin: 0 0 20px; max-width: 68ch; }
.ficha-nota { font-size: 13px; color: var(--text-dim); margin: 14px 0 0; }
.v-proxima { font-size: 12px; color: var(--text-dim); font-style: italic; }

.ficha-datos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.ficha-datos > div {
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 20px 16px; text-align: center;
}
.dato-valor { display: block; font-size: 28px; font-weight: 700; }
.dato-etiqueta { display: block; font-size: 12px; color: var(--text-dim); margin-top: 4px; }

.tabla-scroll { overflow-x: auto; }
.tabla-variantes { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-variantes th, .tabla-variantes td { padding: 12px 14px; text-align: left; }
.tabla-variantes thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,0.10); font-weight: 600;
}
.tabla-variantes tbody tr { border-bottom: 1px solid rgba(255,255,255,0.06); }
.tabla-variantes tbody tr:last-child { border-bottom: none; }
.tabla-variantes tbody th { font-weight: 600; white-space: nowrap; }
.v-img { width: 62px; }
.v-img img { width: 48px; height: 48px; object-fit: contain; display: block; }
.v-coste { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.lista-espiritus {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px;
}
.lista-item {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; text-decoration: none; color: inherit;
  transition: transform .16s ease, border-color .16s ease;
}
.lista-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tile-color, #7c5cff) 60%, transparent);
}
.lista-item img { width: 72px; height: 72px; object-fit: contain; flex: 0 0 auto; }
.lista-item h3 { font-size: 16px; margin: 0 0 5px; }
.lista-rareza { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); margin: 0 0 3px; }
.lista-rareza span { width: 8px; height: 8px; border-radius: 50%; }
.lista-variantes { font-size: 12px; color: var(--text-dim); margin: 0; }

.ficha-cta {
  max-width: 980px; margin: 56px auto 0; padding: 44px 24px; text-align: center;
  background: linear-gradient(160deg, rgba(124,92,255,0.16), rgba(46,230,214,0.06));
  border: 1px solid rgba(124,92,255,0.30); border-radius: 20px;
}
.ficha-cta h2 { font-size: 26px; margin: 0 0 10px; }
.ficha-cta p { color: var(--text-dim); margin: 0 auto 22px; max-width: 52ch; line-height: 1.6; }

.ficha-nav {
  max-width: 980px; margin: 44px auto 0; padding: 0 24px 24px;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch;
}
.ficha-nav-item {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 14px 18px; border-radius: 12px; text-decoration: none; color: inherit;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08);
  transition: border-color .16s ease;
}
.ficha-nav-item:hover { border-color: var(--accent); }
.ficha-nav-item span { font-size: 11.5px; color: var(--text-dim); }
.ficha-nav-item strong { font-size: 14px; }
.ficha-nav-item.centro { justify-content: center; text-align: center; }
.ficha-nav-item.derecha { text-align: right; }

/* La ficha de la portada ahora es un enlace a su página */
a.spirit-tile { text-decoration: none; color: inherit; display: block; }

@media (max-width: 720px) {
  .ficha-hero { padding: 36px 18px 30px; }
  .ficha-hero-inner { gap: 20px; }
  .ficha-img { width: 120px; height: 120px; }
  .ficha-hero h1 { font-size: 28px; }
  .ficha-bloque, .ficha-nav { padding-left: 18px; padding-right: 18px; }
  .ficha-datos { grid-template-columns: repeat(2, 1fr); }
  .ficha-cta { margin-left: 18px; margin-right: 18px; padding: 32px 20px; }
  .ficha-nav { grid-template-columns: 1fr; }
  .ficha-nav-item.derecha { text-align: left; }
}

/* ---------- QUÉ VAS A ENCONTRAR ---------- */
/* Mismo lenguaje que el calendario de eventos: banda de título en cursiva
   mayúscula, la estampa sobre un halo y el cuerpo violeta con borde de neón. */

/* Pista del carrusel: la desplaza el navegador, con anclaje por tarjeta. */
.features {
  display: flex; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 26px 0 30px;
  /* Se sale del contenedor para ocupar toda la ventana. */
  width: 100vw; margin-left: calc(50% - 50vw);
  scroll-padding-inline: 0;
  cursor: grab;
}
.features.agarrado { cursor: grabbing; user-select: none; }
/* Al arrastrar, el navegador intentaría llevarse la estampa como imagen. */
.features img { -webkit-user-drag: none; user-drag: none; }
.features::-webkit-scrollbar { display: none; }
.feature {
  flex: 0 0 clamp(260px, 24vw, 330px);
  /* --cerca lo pone landing.js: 1 en el centro de la pista, 0 en los extremos. */
  transform: scale(calc(0.88 + 0.12 * var(--cerca, 1)));
  opacity: calc(0.55 + 0.45 * var(--cerca, 1));
  transform-origin: center;
  will-change: transform, opacity;
}
.feature.centrada { border-color: rgba(46,230,214,0.55); }

.feature {
  display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, #211a44 0%, #14102b 100%);
  border: 1px solid rgba(180,120,255,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .2s ease;
}
.feature:hover, .feature:focus-visible {
  transform: translateY(-3px); border-color: var(--accent-2);
  box-shadow: 0 16px 34px rgba(0,0,0,0.45);
}
.feature:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.feature-banda {
  padding: 12px 14px 10px; text-align: center;
  background: linear-gradient(180deg, rgba(150,80,230,0.42), rgba(90,50,160,0.18));
  border-bottom: 1px solid rgba(180,120,255,0.28);
}
.feature-banda h3 {
  margin: 0; font-size: 13.5px; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.25;
}
.feature-sub {
  margin: 4px 0 0; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,0.62);
}

.feature-arte {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 22px 14px 14px; min-height: 150px;
}
.feature-arte::before {
  content: ""; position: absolute; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(199,120,255,0.34), transparent 68%);
  transition: background .2s ease;
}
.feature:hover .feature-arte::before {
  background: radial-gradient(circle, rgba(46,230,214,0.34), transparent 68%);
}
.feature-arte img {
  position: relative; width: 110px; height: 110px; object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.6));
  transition: transform .18s ease;
}
.feature:hover .feature-arte img { transform: scale(1.06); }

.feature-desc {
  margin: 0; padding: 0 16px; font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
}
.feature-desc strong { color: var(--text); font-weight: 600; }

.feature-link {
  margin: 14px 16px 16px; font-size: 12px; font-weight: 700; color: var(--accent-2);
}

@media (max-width: 940px) { .feature { flex-basis: clamp(240px, 62vw, 300px); } }
@media (max-width: 560px) {
  .features { gap: 12px; }
  .feature { flex-basis: 78vw; }
}

/* ---------- CALENDARIO DE EVENTOS ---------- */
/* Sigue el lenguaje del cartel oficial: fondo violeta/magenta, bandas de título en
   cursiva mayúscula y la estampa del espíritu en grande sobre un halo de color. */

#eventos {
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(199,60,255,0.16), transparent 65%),
    radial-gradient(700px 380px at 85% 100%, rgba(46,230,214,0.10), transparent 65%),
    linear-gradient(180deg, transparent, rgba(124,92,255,0.05), transparent);
}

.eventos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.evento {
  display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #211a44 0%, #14102b 100%);
  border: 1px solid rgba(180,120,255,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: opacity .2s ease, transform .18s ease, box-shadow .2s ease;
}
.evento:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,0.45); }

/* Banda superior con el nombre de la jornada */
.evento-banda {
  padding: 12px 14px 10px; text-align: center;
  background: linear-gradient(180deg, rgba(150,80,230,0.42), rgba(90,50,160,0.18));
  border-bottom: 1px solid rgba(180,120,255,0.28);
}
.evento-banda h3 {
  margin: 0; font-size: 13.5px; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.25;
}
.evento-banda h3 b { color: var(--accent-2); font-weight: 900; }
.evento-cuando {
  margin: 4px 0 0; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,0.62);
}

/* La estampa, centrada sobre un halo como en el cartel */
.evento-arte {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 22px 14px 16px; min-height: 150px;
}
.evento-arte::before {
  content: ""; position: absolute; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(199,120,255,0.34), transparent 68%);
}
.evento-arte img {
  position: relative; width: 110px; height: 110px; object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.6));
}
/* Varias recompensas el mismo día: fila de estampas pequeñas en vez de una
   grande, con el mismo halo de fondo que el resto de tarjetas. */
.evento-arte.multi { flex-wrap: wrap; gap: 6px; padding: 18px 10px 14px; }
.evento-arte.multi img {
  position: relative; width: 64px; height: 64px; object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.55));
}

.evento-sello {
  position: relative; font-size: 30px; font-weight: 900; font-style: italic;
  letter-spacing: .06em; color: var(--accent-2);
  text-shadow: 2px 0 0 rgba(255,60,160,0.8), -2px 0 0 rgba(60,220,255,0.7);
}

.evento-estado {
  position: absolute; top: 8px; right: 10px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  background: var(--accent-2); color: #04201d; border-radius: 999px; padding: 3px 9px;
}

/* Pie con el día, como el cartel */
.evento-pie {
  padding: 10px 14px 12px; text-align: center;
  border-top: 1px solid rgba(180,120,255,0.22);
  background: rgba(0,0,0,0.22);
}
.evento-dia {
  margin: 0; font-size: 12px; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: .06em; color: var(--accent-2);
}
.evento-fecha { margin: 2px 0 0; font-size: 12px; font-weight: 700; }

.evento-detalle {
  margin: 0; padding: 12px 14px 0; font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
}
.evento-enlace {
  display: inline-block; margin: 10px 14px 14px; font-size: 12px; font-weight: 700;
  color: var(--accent-2); text-decoration: none;
}
.evento-enlace:hover { text-decoration: underline; }
.evento-detalle:last-child { padding-bottom: 14px; }

/* Los dos hitos del cartel ocupan la fila entera, como allí */
.evento.historia, .evento.lanzamiento { grid-column: span 2; }
.evento.historia { border-color: rgba(242,201,76,0.45); }
.evento.historia .evento-banda {
  background: linear-gradient(180deg, rgba(242,201,76,0.30), rgba(160,120,30,0.12));
  border-bottom-color: rgba(242,201,76,0.35);
}
.evento.historia .evento-banda h3 b { color: #f2c94c; }
.evento.lanzamiento {
  border-color: rgba(255,60,160,0.45);
  background: linear-gradient(120deg, #2a1150 0%, #401a5e 50%, #10243f 100%);
}
.evento.lanzamiento .evento-banda {
  background: linear-gradient(180deg, rgba(255,60,160,0.30), rgba(120,30,90,0.12));
  border-bottom-color: rgba(255,60,160,0.35);
}

/* Hoy destaca; lo pasado se apaga sin desaparecer */
.evento.hoy {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px rgba(46,230,214,0.35), 0 14px 34px rgba(0,0,0,0.45);
}
.evento.pasado { opacity: .40; }
.evento.pasado .evento-estado { display: none; }

.eventos-nota { text-align: center; margin: 26px 0 0; font-size: 13px; color: var(--text-dim); }
.eventos-nota a { color: var(--accent-2); }

@media (max-width: 940px) {
  .eventos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .eventos { grid-template-columns: 1fr; gap: 12px; }
  .evento.historia, .evento.lanzamiento { grid-column: span 1; }
}

/* ------------------------------------------------------- POWER HOURS -----
   Banner propio, con la pinta del cartel oficial del evento: fondo oscuro con
   textura de escaneado, "POWER HOURS" en grande con un ligero efecto glitch
   (los mismos condensados de --fuente-titulos), y la fila de espíritus en
   Gold debajo. Los bloques de horario van aparte, con las mismas cajas de
   banderas que ya usaba la antigua cuenta atrás de temporada.
   -------------------------------------------------------------------------- */

.power-hours { padding: 56px 0; background: var(--bg-1); overflow: hidden; }

.power-hours-banner {
  position: relative;
  text-align: center;
  padding: 40px 20px 24px;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(165deg, rgba(124,92,255,0.28), rgba(46,230,214,0.12) 55%, rgba(11,14,23,0.4)),
    radial-gradient(circle at 50% -10%, #3a2d6b 0%, #171331 55%, #0b0e17 100%);
  border: 1px solid rgba(232,255,77,0.25);
}
/* Líneas de escaneado, muy sutiles: dan la textura "pantalla vieja" del cartel
   sin oscurecer el contenido de encima. */
.power-hours-banner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px,
              transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}

.power-hours-marca {
  margin: 0; font-size: 13px; letter-spacing: .5em; color: var(--text-dim);
  text-transform: uppercase; position: relative;
}
.power-hours-titulo {
  margin: 6px 0 0; font-size: clamp(38px, 8vw, 64px); line-height: 1;
  letter-spacing: .02em; text-transform: uppercase;
  color: #eaffb0;
  /* El "corte" rojo/cian a los lados es el efecto glitch: dos copias del mismo
     texto, desplazadas un pixel y coloreadas, asomando detrás del original. */
  text-shadow: 2px 0 #ff3b6b, -2px 0 #2ee6d6, 0 0 26px rgba(232,255,77,0.55);
  position: relative;
}
.power-hours-sub {
  margin: 8px 0 0; font-size: clamp(15px, 2vw, 19px); color: var(--text);
  font-family: var(--fuente-titulos); letter-spacing: .01em; position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .power-hours-titulo { animation: ph-parpadeo 5s ease-in-out infinite; }
}
@keyframes ph-parpadeo {
  0%, 92%, 100% { text-shadow: 2px 0 #ff3b6b, -2px 0 #2ee6d6, 0 0 26px rgba(232,255,77,0.55); }
  93% { text-shadow: 3px 0 #ff3b6b, -3px 0 #2ee6d6, 0 0 10px rgba(232,255,77,0.3); }
  94% { text-shadow: -2px 0 #ff3b6b, 2px 0 #2ee6d6, 0 0 30px rgba(232,255,77,0.7); }
}

/* Cuenta atrás: apunta al próximo bloque o al final del que esté en curso,
   según decida el JS en cada momento (ver cuentaAtrasPowerHours en landing.js). */
.ph-cuenta { margin-top: 20px; position: relative; }
.ph-cuenta-etiqueta {
  margin: 0 0 10px; font-size: 13px; letter-spacing: .04em;
  color: var(--text-dim); text-transform: uppercase;
}
.ph-cuenta-reloj { display: flex; justify-content: center; gap: 10px; }
.ph-cuenta-caja {
  display: flex; flex-direction: column; align-items: center;
  min-width: 54px; padding: 8px 6px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(232,255,77,0.3);
  border-radius: 8px;
}
.ph-cuenta-num {
  font-family: var(--fuente-titulos); font-size: 24px; line-height: 1;
  color: #e8ff4d; font-variant-numeric: tabular-nums;
}
.ph-cuenta-uni {
  margin-top: 3px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim);
}
/* Con un bloque en curso, el reloj cambia a verde: ya no se espera, se
   aprovecha. La misma paleta que usa el resto del sitio para "listo/activo". */
.ph-cuenta-en-vivo .ph-cuenta-etiqueta { color: var(--success); }
.ph-cuenta-en-vivo .ph-cuenta-caja { border-color: rgba(53,208,127,0.45); }
.ph-cuenta-en-vivo .ph-cuenta-num { color: var(--success); }

@media (max-width: 420px) {
  .ph-cuenta-reloj { gap: 6px; }
  .ph-cuenta-caja { min-width: 46px; padding: 6px 4px; }
  .ph-cuenta-num { font-size: 19px; }
}

.power-hours-fila {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
  margin-top: 22px; position: relative;
}
.power-hours-arte {
  width: 88px; height: 88px; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5));
}

.power-hours-entradilla {
  max-width: 640px; margin: 22px auto 0; text-align: center;
  color: var(--text-dim); font-size: 14.5px; line-height: 1.6;
}

.ph-bloques {
  display: grid; gap: 18px; margin: 28px auto 0; max-width: 900px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ph-bloque {
  background: var(--card); border: 1px solid rgba(255,255,255,0.07);
  border-top: 3px solid #e8ff4d;
  border-radius: var(--radius); padding: 18px 20px;
}
.ph-bloque-titulo {
  margin: 0 0 14px; font-family: var(--fuente-titulos); font-size: 15px;
  letter-spacing: .05em; text-transform: uppercase; color: #e8ff4d;
}

.ph-husos { display: flex; flex-direction: column; gap: 8px; }
.ph-huso {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
}
.ph-banderas { display: flex; flex-wrap: wrap; gap: 4px; max-width: 108px; }
.ph-bandera { border-radius: 3px; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,0.12); }
.ph-cuando { text-align: left; line-height: 1.2; }
.ph-hora { display: block; font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ph-dia { display: block; font-size: 11px; color: var(--text-dim); opacity: .8; }

@media (max-width: 560px) {
  .power-hours { padding: 40px 0; }
  .power-hours-banner { padding: 30px 16px 20px; }
  .power-hours-arte { width: 64px; height: 64px; }
  .ph-bloques { grid-template-columns: 1fr; }
}

/* ---------- ICONOS DE INTERFAZ ---------- */
/* Sprite SVG en línea: los <symbol> viven aquí y se usan con <use>.
   OJO: no se puede ocultar con display:none. El navegador entonces no toma los
   degradados de dentro como fuente de pintura y todo lo que use url(#...) sale
   invisible; el logotipo aparecía sin los espíritus. Se oculta por tamaño. */
.sprite-iconos {
  position: absolute; width: 0; height: 0; overflow: hidden;
}

.ico {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.18em;
}
/* fill y stroke SÍ se heredan dentro de <use>; una clase de fuera no entraría. */

.ico-chispa { color: #f2c94c; }
.ico-chispa.pequena { width: 22px; height: 22px; }
.ico-chispa.grande { width: 40px; height: 40px; }
.ico-chispa.spark { width: 20px; height: 20px; }
.brand .ico-chispa.grande { display: block; margin: 0 auto; }

.lateral-icono { width: 19px; height: 19px; }
.home-icon { width: 27px; height: 27px; stroke-width: 1.5; color: var(--accent-2); margin-bottom: 14px; }
.zona-icono { width: 34px; height: 34px; stroke-width: 1.4; color: var(--text-dim); }
.primeros-pasos .ico { color: var(--accent-2); }
.hero-badge .ico { width: 15px; height: 15px; }
.btn .ico { margin-right: -2px; }

@keyframes chispaLatido { 0%,100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
.ico-chispa.grande, .ico-chispa.spark { animation: chispaLatido 2.4s infinite ease-in-out; }

@media (prefers-reduced-motion: reduce) { .ico-chispa { animation: none; } }

/* ---------- LOGOTIPO ---------- */
.marca { display: block; flex: 0 0 auto; }
.marca-pequena { width: 30px; height: 30px; }
.marca-nav { width: 28px; height: 28px; }
.marca-grande { width: 54px; height: 54px; margin: 0 auto 4px; }
.lateral-marca { gap: 12px; }

/* ---------- CARRUSEL ---------- */
.carrusel { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }

.carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text); background: rgba(23,29,51,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  transition: opacity .18s ease, border-color .18s ease, transform .15s ease;
}
.carrusel-flecha:hover:not(:disabled) { border-color: var(--accent-2); transform: translateY(-50%) scale(1.06); }
.carrusel-flecha:disabled { opacity: 0; pointer-events: none; }
.carrusel-flecha.izq { left: 18px; }
.carrusel-flecha.der { right: 18px; }
.carrusel-flecha .ico { width: 20px; height: 20px; stroke-width: 2; }

.carrusel-puntos {
  display: flex; justify-content: center; gap: 8px; margin-top: 20px;
}
.carrusel-punto {
  width: 8px; height: 8px; padding: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.20); border: none;
  transition: width .2s ease, background .2s ease;
}
.carrusel-punto:hover { background: rgba(255,255,255,0.38); }
.carrusel-punto.actual { width: 22px; background: var(--accent-2); }

/* Sin JavaScript no hay flechas ni puntos, pero la pista se sigue arrastrando. */
html:not(.con-js) .carrusel-flecha,
html:not(.con-js) .carrusel-puntos { display: none; }


@media (max-width: 560px) {
  .carrusel-flecha { display: none; }
}

/* Sello junto a la estampa, del mismo peso visual: dice qué hace la sección. */
.feature-arte { gap: 16px; }
.feature-sello {
  width: 62px; height: 62px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #5ee0c8, #7c5cff);
  color: #0b1424;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform .18s ease;
}
.feature-sello .ico { width: 30px; height: 30px; stroke-width: 2.4; }
.feature:hover .feature-sello { transform: scale(1.07) rotate(-4deg); }

@media (max-width: 560px) {
  .feature-sello { width: 54px; height: 54px; }
  .feature-sello .ico { width: 26px; height: 26px; }
}

/* =========================================================================
   CONTENIDO EDITORIAL: página de temporada y guías
   Se apoya en las mismas fichas y secciones del resto de la portada; aquí solo
   va lo que esas no cubrían: prosa larga, cajas de aviso, tier list y FAQ.
   ========================================================================= */

/* Prosa. Ancho de lectura limitado, que es lo que las secciones de la portada
   no necesitaban porque su contenido es todo tarjetas. */
.guia-parrafo,
.guia-lista,
.guia-consejo,
.guia-columnas,
.tabla-scroll,
.faq,
.guia-otras,
.guias-lista,
.tier { max-width: 780px; margin-left: auto; margin-right: auto; }

.guia-parrafo { color: var(--text-dim); font-size: 16px; line-height: 1.75; margin: 0 0 18px; }
.guia-parrafo strong { color: var(--text); }
.guia-parrafo a, .guia-consejo a, .ficha-nota a, .faq-item a { color: var(--accent-2); }

.guia-parrafo.destacado {
  color: var(--text); font-size: 18px;
  border-left: 3px solid var(--accent); padding: 4px 0 4px 18px;
}

.guia-lista { color: var(--text-dim); font-size: 16px; line-height: 1.75; padding-left: 22px; }
.guia-lista li { margin-bottom: 10px; }
.guia-lista strong { color: var(--text); }

.guia-consejo {
  background: rgba(46,230,214,0.07);
  border: 1px solid rgba(46,230,214,0.22);
  border-radius: var(--radius);
  padding: 16px 18px; margin: 22px auto 0;
  color: var(--text-dim); font-size: 15px; line-height: 1.65;
}
.guia-consejo strong { color: var(--accent-2); }

.guia-columnas { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .guia-columnas { grid-template-columns: 1fr; } }

.guia-caja {
  background: var(--card); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius); padding: 20px;
}
.guia-caja h3 { margin: 0 0 10px; font-size: 17px; }
.guia-caja p, .guia-caja li { color: var(--text-dim); font-size: 15px; line-height: 1.65; }
.guia-caja ul { margin: 0; padding-left: 20px; }
.guia-caja li { margin-bottom: 8px; }
.guia-caja strong { color: var(--text); }
.guia-caja.bien { border-color: rgba(46,230,214,0.3); }
.guia-caja.bien h3 { color: var(--accent-2); }
.guia-caja.aviso { border-color: rgba(232,145,45,0.35); }
.guia-caja.aviso h3 { color: var(--legendary); }
.guia-caja .guia-consejo { margin-top: 14px; padding: 12px 14px; font-size: 14px; }

.aviso-fuerte { background: linear-gradient(180deg, transparent, rgba(232,145,45,0.07), transparent); }
.aviso-fuerte .guia-parrafo.destacado { border-left-color: var(--legendary); }

.guia-cta { text-align: center; }
.guia-cta h2 { font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 12px; }
.guia-cta p { color: var(--text-dim); max-width: 560px; margin: 0 auto 12px; line-height: 1.65; }
.guia-cta .hero-actions { justify-content: center; margin-top: 22px; }

/* Índice de guías y enlaces al pie de cada una */
.guias-lista { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.guia-tarjeta {
  display: block; text-decoration: none; padding: 22px;
  background: var(--card); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius); transition: transform 160ms ease, border-color 160ms ease;
}
.guia-tarjeta:hover { transform: translateY(-3px); border-color: rgba(124,92,255,0.5); }
.guia-tarjeta h2 { margin: 0 0 8px; font-size: 18px; color: var(--text); }
.guia-tarjeta p { margin: 0; color: var(--text-dim); font-size: 14.5px; line-height: 1.6; }
.guia-tarjeta.destacada { border-color: rgba(46,230,214,0.4); background: rgba(46,230,214,0.05); }

.guia-otras { padding: 0 24px 80px; }
.guia-otras h2 { font-size: 18px; margin: 0 0 14px; }
.guia-otras ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.guia-otras a { color: var(--text-dim); text-decoration: none; font-size: 15px; }
.guia-otras a:hover { color: var(--accent-2); }

/* -------------------------------------------------- Temporada 4: Override */

.cuenta-atras {
  display: inline-block; opacity: 0;
  margin: 18px 0 0; padding: 8px 18px;
  border-radius: 999px; font-weight: 700; font-size: 15px;
  background: rgba(124,92,255,0.15); border: 1px solid rgba(124,92,255,0.45);
  color: var(--text);
}
.cuenta-atras.visible { opacity: 1; }

.proximos {
  display: grid; gap: 16px; max-width: 1040px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.proximo {
  background: var(--card); border: 1px solid rgba(255,255,255,0.07);
  border-top: 3px solid var(--c, var(--accent));
  border-radius: var(--radius); padding: 20px; text-align: center;
}
.proximo-icono { display: inline-flex; width: 52px; height: 52px; color: var(--c, var(--accent)); }
.proximo-icono svg { width: 100%; height: 100%; }
.proximo h3 { margin: 12px 0 2px; font-size: 17px; }
.proximo .eng { margin: 0 0 10px; font-size: 12px; color: var(--text-dim); letter-spacing: .04em; }
.proximo-poder { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.55; }
.proximo-poder.sin { font-style: italic; opacity: .8; }
.proximo-estado {
  margin: 12px 0 0; font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-dim); opacity: .75;
}

/* ---------------------------------------------------------------- tier list */

.tier { margin-bottom: 26px; }
.tier-cabecera { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tier-letra {
  flex: 0 0 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 900; font-size: 20px; color: #0b0e17;
}
.tier-s .tier-letra { background: var(--mythic); }
.tier-a .tier-letra { background: var(--legendary); }
.tier-b .tier-letra { background: var(--epic); color: #fff; }
.tier-c .tier-letra { background: var(--rare); }
.tier-cabecera h3 { margin: 0; font-size: 17px; }
.tier-cabecera p { margin: 2px 0 0; font-size: 14px; color: var(--text-dim); }

.tier-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tier-item {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px;
  background: var(--card); border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid var(--c, var(--accent)); border-radius: 12px;
}
.tier-item img { flex: 0 0 48px; border-radius: 8px; }
.tier-item a { text-decoration: none; color: var(--text); }
.tier-item a:hover strong { color: var(--accent-2); }
.tier-item p { margin: 6px 0 0; font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.tier-coste { margin-left: 8px; font-size: 12px; color: var(--text-dim); }

/* --------------------------------------------------------------------- FAQ */

.faq { display: grid; gap: 10px; }
.faq-item {
  background: var(--card); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; padding: 0 18px;
}
.faq-item summary {
  cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 16px;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--text-dim); font-weight: 400; }
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { color: var(--accent-2); }
.faq-item p { margin: 0 0 18px; color: var(--text-dim); font-size: 15px; line-height: 1.7; }

.v-punto {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 8px; vertical-align: middle;
}

/* =========================================================================
   GUÍAS EN REJILLA
   El ritmo de la portada (90px de aire por sección, cabeceras centradas de 620px)
   funciona con secciones grandes y llenas de tarjetas. Con prosa corta deja la
   página medio vacía y multiplica el scroll, así que aquí cada sección pasa a ser
   una tarjeta y se empaquetan de dos en dos.
   ========================================================================= */

.ficha-hero.compacto { padding-bottom: 8px; }
.ficha-hero.compacto .ficha-intro { margin-bottom: 0; }

.guia-cuerpo {
  display: grid; align-items: start; gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* "dense" deja que una tarjeta estrecha suba a un hueco anterior. Sin esto,
     una tarjeta ancha entre dos estrechas obliga a cada estrecha a ocupar su
     propia fila y media página se queda vacía. Cada sección se lee por separado,
     así que el salto de orden no rompe nada. */
  grid-auto-flow: dense;
  max-width: 1080px; margin: 0 auto; padding: 20px 20px 8px;
}

.guia-cuerpo > .section {
  padding: 22px 24px; margin: 0;
  background: var(--card); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
}
/* Dentro de una tarjeta el fondo alterno de la portada sobra. */
.guia-cuerpo > .section-alt { background: var(--card); }

.guia-cuerpo .section-head {
  text-align: left; max-width: none; margin: 0 0 14px;
}
.guia-cuerpo .section-head h2 { font-size: 20px; margin: 0 0 8px; }
.guia-cuerpo .section-head p { font-size: 14.5px; }

/* La tarjeta ya limita el ancho de lectura; el tope de 780px sobra y descentra. */
.guia-cuerpo .guia-parrafo,
.guia-cuerpo .guia-lista,
.guia-cuerpo .guia-consejo,
.guia-cuerpo .guia-columnas,
.guia-cuerpo .tabla-scroll,
.guia-cuerpo .faq,
.guia-cuerpo .tier { max-width: none; }

.guia-cuerpo .guia-parrafo { font-size: 15px; line-height: 1.65; margin-bottom: 12px; }
.guia-cuerpo .guia-parrafo:last-child { margin-bottom: 0; }
.guia-cuerpo .guia-parrafo.destacado { font-size: 16px; padding-left: 14px; }
.guia-cuerpo .guia-lista { font-size: 15px; line-height: 1.6; }
.guia-cuerpo .guia-lista li { margin-bottom: 6px; }
.guia-cuerpo .guia-consejo { margin-top: 14px; padding: 12px 14px; font-size: 14px; }
.guia-cuerpo .guia-caja { padding: 16px; }
.guia-cuerpo .tabla-variantes { font-size: 13.5px; }
.guia-cuerpo .tabla-variantes th,
.guia-cuerpo .tabla-variantes td { padding: 9px 10px; }

/* Lo que necesita ancho ocupa las dos columnas: tablas, comparativas, tier list,
   FAQ y la llamada final. Con :has() no hace falta marcar nada en el HTML. */
.guia-cuerpo > .section:has(.proximos),
.guia-cuerpo > .section:has(.tabla-scroll),
.guia-cuerpo > .section:has(.guia-columnas),
.guia-cuerpo > .section:has(.tier),
.guia-cuerpo > .section:has(.faq),
.guia-cuerpo > .section.ancha,
.guia-cuerpo > .guia-cta { grid-column: 1 / -1; }

.guia-cuerpo > .guia-cta {
  text-align: center; padding: 26px 24px;
  background: rgba(124,92,255,0.07); border-color: rgba(124,92,255,0.28);
}
.guia-cuerpo > .guia-cta h2 { font-size: 21px; margin-bottom: 8px; }
.guia-cuerpo > .guia-cta p { font-size: 14.5px; margin-bottom: 8px; }
.guia-cuerpo > .guia-cta .hero-actions { margin-top: 16px; }

/* La tier list, en dos columnas dentro de su tarjeta. */
.guia-cuerpo .tier { margin-bottom: 18px; }
.guia-cuerpo .tier:last-of-type { margin-bottom: 0; }
/* 25 espíritus con una frase cada uno dan para mucho scroll; a tres columnas
   entra el doble por pantalla y la frase sigue leyéndose entera. */
.guia-cuerpo .tier-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.guia-cuerpo .tier-item { padding: 10px; gap: 10px; }
.guia-cuerpo .tier-item img { flex-basis: 38px; width: 38px; height: 38px; }
.guia-cuerpo .tier-item p { font-size: 12.5px; line-height: 1.45; margin-top: 3px; }
.guia-cuerpo .tier-coste { display: block; margin: 2px 0 0; font-size: 11px; }
.guia-cuerpo .tier-cabecera { margin-bottom: 10px; }
.guia-cuerpo .tier-letra { flex-basis: 38px; height: 38px; font-size: 17px; }

/* La FAQ tampoco necesita una columna por pregunta. */
.guia-cuerpo .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.guia-cuerpo .faq-item summary { padding: 13px 0; font-size: 15px; }
.guia-cuerpo .faq-item p { font-size: 14px; margin-bottom: 14px; }

/* Fila de otras guías: enlaces en línea, no una lista apilada. */
.guia-otras { max-width: 1080px; padding: 8px 20px 56px; }
.guia-otras h2 { font-size: 14px; color: var(--text-dim); font-weight: 600; }
.guia-otras ul { display: flex; flex-wrap: wrap; gap: 8px; }
.guia-otras li a {
  display: inline-block; padding: 7px 14px; font-size: 14px;
  background: var(--card); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 999px;
}
.guia-otras li a:hover { border-color: rgba(124,92,255,0.5); color: var(--text); }

@media (max-width: 860px) {
  .guia-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 16px 4px; }
  .guia-cuerpo .tier-lista,
  .guia-cuerpo .faq { grid-template-columns: 1fr; }
}
@media (min-width: 861px) and (max-width: 1080px) {
  .guia-cuerpo .tier-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Fichas compactas de la tier list (niveles A y siguientes). */
.tier-fichas {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.tier-ficha a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid var(--c, var(--accent)); border-radius: 10px;
  transition: border-color 140ms ease;
}
.tier-ficha a:hover { border-color: rgba(46,230,214,0.55); }
.tier-ficha img { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 7px; }
.tier-ficha strong { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.tier-ficha .tier-coste { margin-left: auto; font-size: 11px; color: var(--text-dim); }

/* Enlaces que cambian según haya sesión o no. Los dos textos están en el HTML y
   se elige con una clase que un script del <head> pone antes de pintar: así no
   se ve un parpadeo de "Iniciar sesión" en cada carga de quien ya entró.
   Sin JS gana el texto de invitado, que es lo correcto para un buscador. */
.si-sesion { display: none; }
html.con-sesion .si-sesion { display: inline; }
html.con-sesion .no-sesion { display: none; }

/* Bloque de guías en la portada. Es la página que Google rastrea primero, así que
   lo que se enlaza desde aquí es lo que antes se descubre. */
.guia-enlaces {
  display: grid; gap: 12px; max-width: 1040px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.guia-enlace {
  display: block; padding: 18px 20px; text-decoration: none;
  background: var(--card); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  transition: transform 160ms ease, border-color 160ms ease;
}
.guia-enlace:hover { transform: translateY(-3px); border-color: rgba(124,92,255,0.5); }
.guia-enlace strong { display: block; color: var(--text); font-size: 16px; margin-bottom: 5px; }
.guia-enlace span { color: var(--text-dim); font-size: 13.5px; line-height: 1.55; }
.guia-enlace.destacado { border-color: rgba(46,230,214,0.4); background: rgba(46,230,214,0.05); }

/* =========================================================================
   CARRUSEL EN ESCRITORIO: TARJETAS GRANDES
   Al doblar el ancho, el reparto vertical de siempre —banda, arte centrado y
   texto debajo— deja la tarjeta medio vacía y el arte perdido en medio. Así que
   a partir de tablet la tarjeta se reorganiza en rejilla: la banda arriba a todo
   lo ancho, y debajo el arte a la izquierda con el texto al lado.
   Se hace solo con CSS, sin tocar el HTML de las 21 tarjetas.
   ========================================================================= */

@media (min-width: 941px) {
  .feature {
    /* Exactamente el doble que antes, en cualquier ancho: la regla anterior era
       clamp(260px, 24vw, 330px) y esta duplica los tres valores. Así se cumple
       tanto en un portátil de 1280 como en un monitor grande. */
    flex-basis: clamp(520px, 48vw, 660px);

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "banda banda"
      "arte  desc"
      "arte  link";
    align-items: start;
  }

  .feature-banda { grid-area: banda; }
  .feature-arte { grid-area: arte; }
  .feature-desc { grid-area: desc; }
  .feature-link { grid-area: link; }

  /* La banda deja de estar centrada: con el doble de ancho, un título corto
     centrado en 660px queda flotando en medio de la nada. */
  .feature-banda { text-align: left; padding: 16px 22px 14px; }
  .feature-banda h3 { font-size: 17px; }
  .feature-sub { font-size: 11.5px; margin-top: 5px; }

  /* El arte crece con la tarjeta: es lo que justifica el tamaño nuevo. */
  .feature-arte { padding: 20px 6px 20px 22px; min-height: 0; align-self: center; }
  .feature-arte img { width: 148px; height: 148px; }
  .feature-arte::before { width: 172px; height: 172px; }

  .feature-desc {
    padding: 22px 24px 0 22px; font-size: 14.5px; line-height: 1.65;
    align-self: center;
  }
  .feature-link { margin: 10px 24px 20px 22px; font-size: 13px; }

}

/* La cabecera del carrusel se comía 274 px antes de la primera tarjeta: 90 px de
   relleno de sección, un título de 38 px partido en dos líneas porque la cabecera
   estaba limitada a 620 px, y 56 px de separación. Se aprieta todo y se ensancha
   para que el titular quepa en una línea. Solo afecta a la sección del carrusel
   —se localiza por :has()—, el resto de la portada mantiene su ritmo. */
.section:has(.carrusel) { padding-top: 52px; padding-bottom: 56px; }
.section:has(.carrusel) .section-head { max-width: 840px; margin-bottom: 26px; }
.section:has(.carrusel) .section-head h2 { font-size: clamp(22px, 2.5vw, 31px); margin-bottom: 8px; }
.section:has(.carrusel) .section-eyebrow { margin-bottom: 6px; }

@media (max-width: 700px) {
  .section:has(.carrusel) { padding-top: 40px; padding-bottom: 40px; }
  .section:has(.carrusel) .section-head { margin-bottom: 20px; }
}

/* ------------------------------------------------------------------ BOTONES
   Botón de videojuego: cara de color con un escalón más oscuro debajo, que se
   hunde al pulsar como una tecla física, y un destello que lo cruza al pasar por
   encima. Es el lenguaje de los menús de Fortnite y de casi cualquier juego, y
   acompaña a la Lilita One mejor que la píldora con degradado de antes.

   Cada variante solo define su color de cara y su --btn-escalon (el mismo color
   oscurecido). Todo lo demás se hereda, así que un botón nuevo hereda el gesto
   completo con dos líneas.
   -------------------------------------------------------------------------- */

.btn, .btn-hero, .btn-nav, .quick-filter-btn {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 12px;
  font-family: var(--fuente-titulos);
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: pointer;
  /* El escalón y la sombra proyectada van en la misma propiedad para poder
     animarlas juntas: al pulsar, el escalón desaparece y el botón baja
     exactamente esa misma distancia. */
  box-shadow:
    0 5px 0 var(--btn-escalon, rgba(0,0,0,0.35)),
    0 8px 16px rgba(0,0,0,0.35);
  transition: transform .09s ease, box-shadow .09s ease, filter .16s ease;
}

.btn:hover, .btn-hero:hover, .btn-nav:hover, .quick-filter-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    0 6px 0 var(--btn-escalon, rgba(0,0,0,0.35)),
    0 12px 22px rgba(0,0,0,0.42);
}

.btn:active, .btn-hero:active, .btn-nav:active, .quick-filter-btn:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--btn-escalon, rgba(0,0,0,0.35)), 0 2px 5px rgba(0,0,0,0.3);
}

.btn:focus-visible, .btn-hero:focus-visible,
.btn-nav:focus-visible, .quick-filter-btn:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 3px;
}

/* Brillo superior: una franja clara en el borde de arriba que da el volumen. */
.btn::before, .btn-hero::before, .btn-nav::before, .quick-filter-btn::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent);
  pointer-events: none;
}

/* Destello que cruza el botón al pasar por encima. */
.btn::after, .btn-hero::after, .btn-nav::after, .quick-filter-btn::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .5s ease;
}
.btn:hover::after, .btn-hero:hover::after,
.btn-nav:hover::after, .quick-filter-btn:hover::after { left: 130%; }

/* Un botón deshabilitado no debe invitar a pulsarlo. */
.btn:disabled, .btn-hero:disabled, .quick-filter-btn:disabled {
  filter: grayscale(0.5) brightness(0.75);
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 3px 0 rgba(0,0,0,0.3);
}
.btn:disabled::after, .btn-hero:disabled::after { display: none; }

/* ---- colores por variante: solo cara y escalón ---- */
.btn-primary, .btn-hero.primary, .btn-nav {
  background: linear-gradient(180deg, #8b6bff, #6a45f0);
  color: #fff;
  --btn-escalon: #4324b8;
}
.btn-ghost, .btn-hero.ghost, .quick-filter-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.05));
  color: var(--text);
  --btn-escalon: rgba(0,0,0,0.45);
}
.btn-google {
  background: linear-gradient(180deg, #ffffff, #e9ecf3);
  color: #2a2f3d;
  --btn-escalon: #a9b0c2;
}
.btn-google::before { background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent); }

/* El filtro rápido activo se enciende en turquesa, como el resto de estados
   activos del sitio. */
.quick-filter-btn.active, .quick-filter-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, #4ff0e0, #23c3b4);
  color: #06231f;
  --btn-escalon: #127a70;
}

/* Los pequeños llevan un escalón proporcional: 5px en un botón de 26px de alto
   parecería un error de maquetación. */
.btn-mini {
  border-radius: 9px;
  box-shadow: 0 3px 0 var(--btn-escalon, rgba(0,0,0,0.35)), 0 5px 10px rgba(0,0,0,0.3);
}
.btn-mini:hover { box-shadow: 0 4px 0 var(--btn-escalon, rgba(0,0,0,0.35)), 0 7px 14px rgba(0,0,0,0.36); }
.btn-mini:active { transform: translateY(3px); box-shadow: 0 0 0 var(--btn-escalon, rgba(0,0,0,0.35)); }

/* .link-btn sigue siendo un enlace de texto: convertirlo en tecla sería ruido. */
.link-btn { text-transform: none; letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-hero, .btn-nav, .quick-filter-btn { transition: filter .16s ease; }
  .btn:hover, .btn-hero:hover, .btn-nav:hover, .quick-filter-btn:hover { transform: none; }
  .btn:active, .btn-hero:active, .btn-nav:active, .quick-filter-btn:active { transform: none; }
  .btn::after, .btn-hero::after, .btn-nav::after, .quick-filter-btn::after { display: none; }
}

/* ---------------------------------------------- FRANJA: LA TEMPORADA ACTIVA
   Banda estrecha justo bajo el hero, partida en dos mitades: a la izquierda la
   noticia de Override, a la derecha una invitación a los códigos con la pinta
   del propio panel del juego (fondo azul, borde cian, tipografía monoespacio),
   para que se reconozca de un vistazo qué es antes de leer una sola palabra.
   -------------------------------------------------------------------------- */

.franja-temporada {
  background: linear-gradient(90deg, rgba(124,92,255,0.20), rgba(46,230,214,0.14));
  border-top: 1px solid rgba(124,92,255,0.35);
  border-bottom: 1px solid rgba(124,92,255,0.35);
  padding: 20px;
}

.franja-dividida {
  max-width: 1180px; margin: 0 auto;
  display: grid; align-items: center; gap: 28px;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
}

.franja-separador {
  align-self: stretch;
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.14), rgba(255,255,255,0));
}

.franja-mitad { min-width: 0; }
.franja-noticia { text-align: left; }

.franja-eyebrow {
  margin: 0 0 2px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-2);
}
.franja-temporada h2 { margin: 0; font-size: clamp(17px, 2vw, 22px); }
.franja-hora { margin: 6px 0 0; font-size: 13px; color: var(--text-dim); line-height: 1.55; max-width: 42ch; }

.franja-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.franja-boton { padding: 10px 20px; font-size: 13px; }

/* Tira decorativa con el arte de los espíritus nuevos. Se solapan un poco para
   que ocupe menos y se lea como un grupo y no como una fila de iconos sueltos. */
.franja-tira { display: flex; align-items: center; margin-top: 14px; }
.franja-tira:empty { display: none; }
.franja-arte {
  width: 42px; height: 42px; object-fit: contain;
  margin-left: -10px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
  transition: transform .15s ease;
}
.franja-arte:first-child { margin-left: 0; }
.franja-arte:hover { transform: translateY(-4px) scale(1.08); }

/* --- La mitad de los códigos: imita la pantalla de canjeo del propio juego --- */

.panel-admin {
  background: linear-gradient(160deg, #2a2f6b 0%, #1c2050 100%);
  border: 1px solid rgba(94,225,230,0.5);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(94,225,230,0.12), 0 10px 26px rgba(0,0,0,0.35);
  overflow: hidden;
}

.panel-admin-barra {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(94,225,230,0.25);
}
.panel-admin-luz {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px var(--accent-2);
}
.panel-admin-titulo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .08em; color: #cfe4ff;
}

.panel-admin-cuerpo { padding: 16px; }
.panel-admin-prompt {
  margin: 0 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.6; color: #8fa8e0;
}
.panel-admin-fila { display: flex; align-items: stretch; gap: 8px; margin: 0 0 14px; }

.panel-admin-input {
  flex: 1; min-width: 0; margin: 0; padding: 9px 12px;
  background: rgba(210,210,240,0.85);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: #1c2050;
  display: flex; align-items: center;
  overflow: hidden; white-space: nowrap;
}
/* El cursor parpadea con el mismo timer discreto que ya usa el resto del sitio
   (ver hero-titulo): sugiere "esto se escribe" sin ser una animación invasiva. */
.panel-admin-input::after {
  content: "_"; margin-left: 2px;
  animation: parpadeo-cursor 1s step-end infinite;
}
@keyframes parpadeo-cursor { 50% { opacity: 0; } }

/* Botón de copiar: mismo alto que el campo, para que la fila quede pareja. */
.panel-admin-copiar {
  flex: 0 0 auto; width: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(94,225,230,0.35);
  border-radius: 6px;
  color: #cfe4ff; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.panel-admin-copiar svg { width: 17px; height: 17px; }
.panel-admin-copiar:hover { background: rgba(94,225,230,0.14); border-color: rgba(94,225,230,0.7); }
.panel-admin-copiar:active { transform: scale(0.92); }
/* Confirmación breve al copiar: el propio botón se pone en verde un instante,
   en vez de un aviso aparte que compita por la atención con el resto de la franja. */
.panel-admin-copiar.copiado {
  background: rgba(53,208,127,0.18); border-color: var(--success); color: var(--success);
}

.panel-admin-boton { width: 100%; justify-content: center; padding: 11px 20px; font-size: 13px; }

@media (max-width: 900px) {
  .franja-dividida { grid-template-columns: minmax(0, 1fr); }
  .franja-separador { display: none; }
  .franja-noticia { text-align: center; }
  .franja-hora { margin-left: auto; margin-right: auto; }
  .franja-acciones { justify-content: center; }
  .franja-tira { justify-content: center; }
}

@media (max-width: 519px) {
  /* En estrecho la tira se envuelve y el solape descuadraría las filas. */
  .franja-tira { flex-wrap: wrap; gap: 4px; }
  .franja-arte { width: 40px; height: 40px; margin-left: 0; }
}

/* Arte real de los espíritus próximos, en lugar del icono de respaldo. */
.proximo-arte {
  width: 96px; height: 96px; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));
}


/* Hueco para el arte que todavia no tenemos. Mismo sitio y mismo tamano que la
   imagen real, para que al llegar el .webp no se mueva nada de la pagina. */
.sin-arte {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 18%; box-sizing: border-box;
  background: color-mix(in srgb, var(--sin-arte-color) 22%, transparent);
  border: 1px dashed color-mix(in srgb, var(--sin-arte-color) 55%, transparent);
  color: var(--sin-arte-color);
  font-weight: 700; font-size: clamp(13px, 40%, 64px); line-height: 1;
  text-transform: uppercase; letter-spacing: .02em;
}


/* --- Override: tarjetas agrupadas por rareza ------------------------------- */

/* Encabezado de cada grupo. Va con el color de la rareza para que se distingan
   los cuatro bloques de un vistazo, sin tener que leer el rotulo. */
.proximos-rareza {
  max-width: 1040px; margin: 34px auto 14px; padding-left: 12px;
  border-left: 3px solid var(--r, var(--accent));
  font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--r, var(--accent));
}
.proximos-rareza:first-of-type { margin-top: 6px; }
.proximos-rareza span {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--r) 18%, transparent);
  font-size: 12px; vertical-align: middle;
}

/* La tarjeta necesita posicion propia para colgar de ella la etiqueta. */
.proximo { position: relative; }

.proximo-rareza {
  position: absolute; top: 10px; right: 10px;
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--r) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--r) 45%, transparent);
  color: var(--r); font-size: 11px; font-weight: 700; letter-spacing: .03em;
}

/* Las dos variantes, en pequeno bajo el poder: son las piezas que faltan por
   conseguir y verlas ahorra explicarlas. */
.proximo-variantes {
  display: flex; justify-content: center; gap: 10px;
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.proximo-variante {
  width: 44px; height: 44px; object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
}