@charset "utf-8";
/* Pokédex.cl — hoja de estilos única.
   1 tokens · 2 base · 3 cabecera · 4 componentes · 5 inicio · 6 ficha
   7 tipos · 8 juego · 9 equipo · 10 pie · 11 responsive */

/* ---------- 1. tokens ---------- */
:root {
  --brand: #dc0a2d;
  --brand-claro: #f23b57;
  --brand-oscuro: #a60720;
  --lente: #3fa9f5;
  --led-r: #ff5a5a;
  --led-a: #ffd93b;
  --led-v: #4cd964;

  --bg: #f2f3f7;
  --superficie: #ffffff;
  --superficie-2: #f7f8fb;
  --borde: #e3e6ee;
  --texto: #14171f;
  --suave: #5b6373;
  --sombra: 0 1px 2px rgba(15, 20, 35, .05), 0 6px 20px -8px rgba(15, 20, 35, .18);
  --sombra-alta: 0 10px 34px -12px rgba(15, 20, 35, .35);

  --lcd-bg: #9bbc0f;
  --lcd-txt: #16340c;
  --lcd-borde: #4f6012;

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --ancho: 1180px;
  --alto-barra: 60px;
  --silueta: #10131a;
  --punto: rgba(18, 22, 32, .055);

  --fuente: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --fuente-titulo: "Bricolage Grotesque", Inter, "Segoe UI", system-ui, sans-serif;
  --fuente-lcd: VT323, "Courier New", monospace;

  --t-normal: #9fa19f; --tf-normal: #2d2d2d;
  --t-fighting: #d3425f; --tf-fighting: #ffffff;
  --t-flying: #a1bbec; --tf-flying: #2d3442;
  --t-poison: #a94fc2; --tf-poison: #ffffff;
  --t-ground: #da7c4d; --tf-ground: #3d2316;
  --t-rock: #c9bb8a; --tf-rock: #383427;
  --t-bug: #92bc2c; --tf-bug: #29350c;
  --t-ghost: #5f6dbc; --tf-ghost: #ffffff;
  --t-steel: #5895a2; --tf-steel: #121e20;
  --t-fire: #ff9d55; --tf-fire: #472c18;
  --t-water: #4d90d5; --tf-water: #0f1d2b;
  --t-grass: #63bc5a; --tf-grass: #1c3519;
  --t-electric: #f2cb55; --tf-electric: #443918;
  --t-psychic: #fa7179; --tf-psychic: #462022;
  --t-ice: #75d0c1; --tf-ice: #213a36;
  --t-dragon: #0c69c8; --tf-dragon: #ffffff;
  --t-dark: #595761; --tf-dark: #ffffff;
  --t-fairy: #ec8fe6; --tf-fairy: #422840;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #0e1014;
    --superficie: #171a21;
    --superficie-2: #1e222b;
    --borde: #2a2f3a;
    --texto: #eceff4;
    --suave: #9ba3b2;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -10px rgba(0, 0, 0, .7);
    --sombra-alta: 0 12px 40px -14px rgba(0, 0, 0, .8);
    --lcd-bg: #8aa80d;
    --lcd-borde: #3c4a0e;
    --punto: rgba(255, 255, 255, .042);
  }
}
:root[data-tema="oscuro"] {
  --bg: #0e1014;
  --superficie: #171a21;
  --superficie-2: #1e222b;
  --borde: #2a2f3a;
  --texto: #eceff4;
  --suave: #9ba3b2;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -10px rgba(0, 0, 0, .7);
  --sombra-alta: 0 12px 40px -14px rgba(0, 0, 0, .8);
  --lcd-bg: #8aa80d;
  --lcd-borde: #3c4a0e;
  --punto: rgba(255, 255, 255, .042);
}

/* clases de tipo: color de fondo (--tc) y de texto (--tf) */
.tipo--normal { --tc: var(--t-normal); --tf: var(--tf-normal); }
.tipo--fighting { --tc: var(--t-fighting); --tf: var(--tf-fighting); }
.tipo--flying { --tc: var(--t-flying); --tf: var(--tf-flying); }
.tipo--poison { --tc: var(--t-poison); --tf: var(--tf-poison); }
.tipo--ground { --tc: var(--t-ground); --tf: var(--tf-ground); }
.tipo--rock { --tc: var(--t-rock); --tf: var(--tf-rock); }
.tipo--bug { --tc: var(--t-bug); --tf: var(--tf-bug); }
.tipo--ghost { --tc: var(--t-ghost); --tf: var(--tf-ghost); }
.tipo--steel { --tc: var(--t-steel); --tf: var(--tf-steel); }
.tipo--fire { --tc: var(--t-fire); --tf: var(--tf-fire); }
.tipo--water { --tc: var(--t-water); --tf: var(--tf-water); }
.tipo--grass { --tc: var(--t-grass); --tf: var(--tf-grass); }
.tipo--electric { --tc: var(--t-electric); --tf: var(--tf-electric); }
.tipo--psychic { --tc: var(--t-psychic); --tf: var(--tf-psychic); }
.tipo--ice { --tc: var(--t-ice); --tf: var(--tf-ice); }
.tipo--dragon { --tc: var(--t-dragon); --tf: var(--tf-dragon); }
.tipo--dark { --tc: var(--t-dark); --tf: var(--tf-dark); }
.tipo--fairy { --tc: var(--t-fairy); --tf: var(--tf-fairy); }

.t-normal { --t1: var(--t-normal); } .t2-normal { --t2: var(--t-normal); }
.t-fighting { --t1: var(--t-fighting); } .t2-fighting { --t2: var(--t-fighting); }
.t-flying { --t1: var(--t-flying); } .t2-flying { --t2: var(--t-flying); }
.t-poison { --t1: var(--t-poison); } .t2-poison { --t2: var(--t-poison); }
.t-ground { --t1: var(--t-ground); } .t2-ground { --t2: var(--t-ground); }
.t-rock { --t1: var(--t-rock); } .t2-rock { --t2: var(--t-rock); }
.t-bug { --t1: var(--t-bug); } .t2-bug { --t2: var(--t-bug); }
.t-ghost { --t1: var(--t-ghost); } .t2-ghost { --t2: var(--t-ghost); }
.t-steel { --t1: var(--t-steel); } .t2-steel { --t2: var(--t-steel); }
.t-fire { --t1: var(--t-fire); } .t2-fire { --t2: var(--t-fire); }
.t-water { --t1: var(--t-water); } .t2-water { --t2: var(--t-water); }
.t-grass { --t1: var(--t-grass); } .t2-grass { --t2: var(--t-grass); }
.t-electric { --t1: var(--t-electric); } .t2-electric { --t2: var(--t-electric); }
.t-psychic { --t1: var(--t-psychic); } .t2-psychic { --t2: var(--t-psychic); }
.t-ice { --t1: var(--t-ice); } .t2-ice { --t2: var(--t-ice); }
.t-dragon { --t1: var(--t-dragon); } .t2-dragon { --t2: var(--t-dragon); }
.t-dark { --t1: var(--t-dark); } .t2-dark { --t2: var(--t-dark); }
.t-fairy { --t1: var(--t-fairy); } .t2-fairy { --t2: var(--t-fairy); }

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* imprescindible: varios componentes usan display:flex/grid y taparían a [hidden] */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, var(--punto) 1px, transparent 0);
  background-size: 22px 22px;
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  line-height: 1.12; margin: 0 0 .4em; font-weight: 800; letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.55rem); }
h2 { font-size: clamp(1.18rem, 1.05rem + .7vw, 1.5rem); }
h3 { font-size: 1.02rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg .i-lleno { fill: currentColor; stroke: none; }
svg .i-hueco { fill: none; }

main {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 24px 16px 64px;
}

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--lente);
  outline-offset: 2px;
  border-radius: 6px;
}

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--superficie); padding: 10px 16px; border-radius: var(--r-sm);
}
.saltar:focus { left: 12px; }
.vacio, .nota { color: var(--suave); font-size: .9rem; }
.lead { font-size: 1.06rem; color: var(--suave); max-width: 62ch; }
.sub { font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); margin: 16px 0 8px; }
.cargando { color: var(--suave); }

/* ---------- 3. cabecera ---------- */
.barra {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, var(--brand-claro), var(--brand) 55%, var(--brand-oscuro));
  box-shadow: 0 2px 0 rgba(0, 0, 0, .22), var(--sombra);
  color: #fff;
}
.barra-in {
  max-width: var(--ancho); margin: 0 auto; min-height: var(--alto-barra);
  display: flex; align-items: center; gap: 14px; padding: 8px 16px;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; flex: 0 0 auto; }
.lente {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 32% 28%, #cdefff, var(--lente) 46%, #1668b0);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .18), inset 0 -3px 6px rgba(0, 0, 0, .25);
  position: relative;
}
.lente::after {
  content: ""; position: absolute; top: 3px; left: 5px; width: 9px; height: 6px;
  background: rgba(255, 255, 255, .85); border-radius: 50%; transform: rotate(-20deg);
}
.leds { display: flex; gap: 4px; align-items: center; }
.led { width: 8px; height: 8px; border-radius: 50%; display: block; box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .35), 0 0 4px currentColor; }
.led--r { background: var(--led-r); color: var(--led-r); animation: latido 3.4s ease-in-out infinite; }
@keyframes latido { 0%, 88%, 100% { opacity: 1; } 92% { opacity: .35; } }
.led--a { background: var(--led-a); color: var(--led-a); }
.led--v { background: var(--led-v); color: var(--led-v); animation: latido 5.1s ease-in-out .8s infinite; }
.marca-txt { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.25rem; letter-spacing: -.03em; }
.marca-cl { font-weight: 600; opacity: .8; }

.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a {
  padding: 7px 13px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: .94rem; color: rgba(255, 255, 255, .92);
}
.nav a:hover { background: rgba(255, 255, 255, .16); }
.nav a[aria-current="page"] { background: rgba(0, 0, 0, .22); color: #fff; }

.buscador { position: relative; margin-left: auto; flex: 1 1 200px; max-width: 300px; }
.buscador > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: rgba(255, 255, 255, .8); pointer-events: none; }
.buscador input {
  width: 100%; padding: 9px 12px 9px 34px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .16);
  color: #fff; font-size: .94rem;
}
.buscador input::placeholder { color: rgba(255, 255, 255, .75); }
.buscador input:focus { background: #fff; color: var(--texto); border-color: #fff; outline: none; }
.buscador input:focus + .q-lista, .buscador input:focus ~ svg { color: var(--suave); }
.buscador input::-webkit-search-cancel-button { filter: invert(1); }
.buscador input:focus::-webkit-search-cancel-button { filter: none; }

.q-lista {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  margin: 0; padding: 6px; list-style: none; max-height: 60vh; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: var(--sombra-alta); color: var(--texto);
}
.q-lista li { border-radius: var(--r-sm); }
.q-lista button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px;
  background: none; border: 0; cursor: pointer; text-align: left; border-radius: var(--r-sm);
}
.q-lista li[aria-selected="true"] button, .q-lista button:hover { background: var(--superficie-2); }
.q-lista img { width: 40px; height: 40px; image-rendering: pixelated; }
.q-num { margin-left: auto; color: var(--suave); font-size: .85rem; font-variant-numeric: tabular-nums; }
.q-nombre { font-weight: 600; }
.q-marca { width: 40px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-size: .72rem; }
.pie-teclas { font-size: .82rem; color: var(--suave); margin: 10px 0 0; }
.tecla {
  display: inline-block; min-width: 1.5em; padding: 1px 6px; border-radius: 6px; text-align: center;
  border: 1px solid var(--borde); border-bottom-width: 2px; background: var(--superficie-2);
  font-family: var(--fuente-lcd); font-size: 1rem; line-height: 1.35; color: var(--texto);
}

.icono-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 50%; border: 1px solid transparent; background: rgba(255, 255, 255, .16);
  color: #fff; cursor: pointer;
}
.icono-btn:hover { background: rgba(255, 255, 255, .28); }
.tema svg:last-child, :root[data-tema="oscuro"] .tema svg:first-child { display: none; }
:root[data-tema="oscuro"] .tema svg:last-child { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema svg:first-child { display: none; }
  :root:not([data-tema="claro"]) .tema svg:last-child { display: block; }
}

.nav-movil { display: none; }

/* ---------- 4. componentes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 17px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto); font-weight: 600; font-size: .95rem;
  cursor: pointer; text-decoration: none; transition: transform .12s ease, background .16s ease, border-color .16s ease;
}
.btn:hover { border-color: color-mix(in srgb, var(--texto) 25%, var(--borde)); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; }
.btn--primario { background: var(--brand); border-color: transparent; color: #fff; box-shadow: 0 6px 18px -8px var(--brand); }
.btn--primario:hover { background: var(--brand-claro); }
.btn--sutil { background: var(--superficie-2); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.tipo {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 11px; border-radius: 999px; background: var(--tc, var(--t-normal));
  color: var(--tf, #fff); font-size: .8rem; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; line-height: 1.5;
}
.tipo--mini { padding: 2px 8px; font-size: .7rem; }
.tipo--grande { padding: 6px 18px; font-size: 1rem; }
a.tipo:hover { filter: brightness(1.07); }
.tipos-lista { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  padding: 5px 12px; border-radius: 999px; cursor: pointer; font-size: .82rem; font-weight: 700;
  background: transparent; color: var(--tc); border: 1.5px solid color-mix(in srgb, var(--tc) 42%, transparent);
}
.chip:hover { background: color-mix(in srgb, var(--tc) 14%, transparent); }
.chip[aria-pressed="true"] { background: var(--tc); color: var(--tf); border-color: var(--tc); }

.panel {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: 20px; box-shadow: var(--sombra); margin: 0 0 20px;
}
.panel h2 { font-size: 1.15rem; margin-bottom: 14px; }
.paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 20px; }
.paneles .panel { margin: 0; }
.panel--ancho { grid-column: 1 / -1; }
.prosa { max-width: 72ch; }
.prosa h2 { margin-top: 28px; }
.prosa p { color: var(--suave); }
.prosa a { color: var(--brand); font-weight: 600; }
:root[data-tema="oscuro"] .prosa a { color: var(--brand-claro); }
.legal { font-size: .85rem; }

.cabecera-pagina { margin: 8px 0 24px; }
.cabecera-pagina--centro { text-align: center; }
.cabecera-pagina--centro .lead { margin-inline: auto; }
.migas { font-size: .85rem; color: var(--suave); margin-bottom: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }

.sello {
  display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .72rem;
  font-weight: 700; background: var(--superficie-2); border: 1px solid var(--borde);
}
.sello--leg { background: #fff4d1; color: #7a5600; border-color: #f2d98a; }
.sello--sing { background: #f0e4ff; color: #5c2d91; border-color: #d9c2f5; }
:root[data-tema="oscuro"] .sello--leg { background: #3a2e05; color: #ffd75e; border-color: #6b5410; }
:root[data-tema="oscuro"] .sello--sing { background: #2d1c47; color: #d6b4ff; border-color: #503177; }

.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo label { font-size: .78rem; font-weight: 600; color: var(--suave); }
.campo select, .campo input {
  padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto); min-width: 0;
}
.campo--busca { position: relative; flex: 1 1 220px; justify-content: center; }
.campo--busca > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--suave); pointer-events: none; }
.campo--busca input { padding-left: 34px; width: 100%; }

.segmentado { display: inline-flex; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 999px; padding: 3px; }
.segmentado button {
  border: 0; background: none; padding: 5px 13px; border-radius: 999px; cursor: pointer;
  font-size: .85rem; font-weight: 600; color: var(--suave);
}
.segmentado button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.segmentado--iconos button { padding: 5px 9px; display: grid; place-items: center; }
.segmentado--iconos svg { width: 17px; height: 17px; }

.aviso { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); padding: 16px; }

/* ---------- 5. inicio ---------- */
.masthead { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: flex-end; justify-content: space-between; margin: 2px 0 20px; }
.masthead h1 { margin: 0; }
.masthead-lema { margin: 8px 0 0; color: var(--suave); max-width: 54ch; }
.masthead-estado { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-family: var(--fuente-lcd); font-size: 1.08rem; color: var(--suave); }
.masthead-estado b { color: var(--texto); font-weight: 400; }
.masthead-fuente { opacity: .75; }

/* consola: el Pokémon del día como si fuera la pantalla del aparato */
.consola { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra); overflow: hidden; margin-bottom: 16px; }
.consola-barra {
  display: flex; align-items: center; gap: 12px; padding: 7px 16px; color: #fff;
  background: linear-gradient(180deg, var(--brand-claro), var(--brand) 70%, var(--brand-oscuro));
}
.consola-etiqueta { margin: 0; font-family: var(--fuente-lcd); font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase; }
.consola-num { margin: 0 0 0 auto; font-family: var(--fuente-lcd); font-size: 1.15rem; opacity: .85; }
.consola-cuerpo { display: grid; grid-template-columns: minmax(170px, 250px) 1fr; gap: 22px; padding: 18px; align-items: center; }
.consola-visor {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r); border: 1px solid var(--borde);
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--t1, var(--brand)) 28%, transparent), transparent 68%),
    var(--superficie-2);
}
.consola-visor img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .22)); }
.consola-nombre {
  font-family: var(--fuente-titulo); font-weight: 800; letter-spacing: -.025em; margin: 0 0 8px;
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.15rem); line-height: 1.05;
}
.consola-datos > .tipos-lista { margin-bottom: 12px; }
.lcd--consola { margin: 0 0 14px; min-height: 5.6em; }
.lcd--consola .lcd-txt { font-size: 1.28rem; }
.escribiendo::after { content: "▌"; animation: parpadeo .9s steps(2) infinite; }
.cursor { display: inline-block; width: .55ch; height: .95em; background: currentColor; vertical-align: -.08em; margin-left: 2px; animation: parpadeo .9s steps(2) infinite; }
@keyframes parpadeo { to { opacity: 0; } }
.consola-botones { display: flex; flex-wrap: wrap; gap: 8px; }

/* atajos: entradas rápidas de verdad, no decoración */
.atajos { display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 2px 2px 12px; margin: 0 0 6px; }
.atajos-titulo { flex: none; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--suave); font-weight: 700; }
.atajos a {
  flex: none; padding: 6px 13px; border-radius: 999px; background: var(--superficie);
  border: 1px solid var(--borde); text-decoration: none; font-size: .86rem; font-weight: 600; white-space: nowrap;
}
.atajos a:hover { border-color: var(--brand); color: var(--brand); }

.recientes { margin-bottom: 16px; }
.recientes-titulo { font-family: var(--fuente); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--suave); font-weight: 700; margin: 0 0 6px; }
.recientes-lista { display: flex; gap: 8px; overflow-x: auto; list-style: none; margin: 0; padding: 0 2px 8px; }
.recientes-lista a { display: grid; justify-items: center; gap: 2px; width: 82px; padding: 6px 4px; border-radius: var(--r-sm); text-decoration: none; font-size: .74rem; color: var(--suave); }
.recientes-lista a:hover { background: var(--superficie); color: var(--texto); }
.recientes-lista img { width: 54px; height: 54px; image-rendering: pixelated; }

/* se conservan para el 404 y las páginas de generación */
.hero-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.hero-datos { display: flex; gap: 22px; list-style: none; padding: 0; margin: 14px 0 0; flex-wrap: wrap; }
.hero-datos li { display: flex; flex-direction: column; }
.hero-datos b { font-size: 1.3rem; line-height: 1.15; font-family: var(--fuente-titulo); }
.hero-datos span { font-size: .8rem; color: var(--suave); }

.filtros { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: 16px; margin-bottom: 20px; box-shadow: var(--sombra); }
.filtros-fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.filtros-tipos { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.filtros-pie { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde); }
.filtros-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.conteo { margin: 0; font-size: .9rem; color: var(--suave); }
.conteo b { color: var(--texto); }

.rejilla {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px;
}
.carta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  content-visibility: auto; contain-intrinsic-size: auto 196px;
}
.carta:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: color-mix(in srgb, var(--t1) 55%, var(--borde)); }
.carta a { display: grid; justify-items: center; gap: 3px; padding: 10px 10px 13px; text-decoration: none; color: inherit; border-radius: var(--r); }
.carta-num { justify-self: start; font-family: var(--fuente-lcd); font-size: 1rem; color: var(--suave); line-height: 1; }
.carta-img {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1 / .88;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--t1) 22%, transparent), transparent 68%);
  border-radius: var(--r-sm);
}
.carta-img img { width: 108px; height: 108px; object-fit: contain; }
.carta[data-vista="sprite"] .carta-img img { image-rendering: pixelated; width: 96px; height: 96px; }
.carta-nombre { font-weight: 700; font-size: .98rem; text-align: center; line-height: 1.25; }
.carta-tipos { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.carta-dato { font-family: var(--fuente-lcd); font-size: 1rem; color: var(--suave); }
.sin-resultados { text-align: center; padding: 48px 16px; color: var(--suave); }

/* vista de lista: el mismo marcado, densidad de índice */
.rejilla--lista { display: flex; flex-direction: column; gap: 5px; }
.rejilla--lista .carta { contain-intrinsic-size: auto 60px; border-radius: var(--r-sm); }
.rejilla--lista .carta:hover { transform: none; box-shadow: var(--sombra); }
.rejilla--lista .carta a { grid-template-columns: 3.9rem 52px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 5px 14px; justify-items: start; }
.rejilla--lista .carta-img { width: 52px; aspect-ratio: 1; background: none; border-radius: 0; }
.rejilla--lista .carta-img img { width: 48px; height: 48px; }
.rejilla--lista .carta-nombre { font-size: 1rem; text-align: left; }
.rejilla--lista .carta-tipos { justify-content: flex-end; }
.rejilla--lista .carta-dato { justify-self: end; min-width: 5.5rem; text-align: right; }
@media (max-width: 620px) {
  .rejilla--lista .carta a { grid-template-columns: 3.4rem 44px minmax(0, 1fr) auto; gap: 8px; padding: 5px 10px; }
  .rejilla--lista .carta-img img { width: 42px; height: 42px; }
  .rejilla--lista .carta-tipos { display: none; }
}

/* ---------- 6. ficha ---------- */
.ficha-cab { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.ficha-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 2px; font-size: .88rem; color: var(--suave); }
.ficha-num { font-family: var(--fuente-lcd); font-size: 1.15rem; color: var(--brand); }
:root[data-tema="oscuro"] .ficha-num { color: var(--brand-claro); }
.ficha-cab h1 { margin: 0; }
.ficha-cat { margin: 0; color: var(--suave); }
.ficha-acciones { display: flex; gap: 8px; align-items: center; }
.ficha-acciones .icono-btn { background: var(--superficie); border-color: var(--borde); color: var(--suave); }
.ficha-acciones .icono-btn[aria-pressed="true"] { color: #e8a400; border-color: #e8a400; }
.ficha-acciones .icono-btn[aria-pressed="true"] svg { fill: #ffc934; }
.js-equipo.es-agregado { background: var(--superficie-2); }

.ficha-cuerpo { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 24px; margin-bottom: 22px; }
/* sin esto, el contenido ancho (tablas, listas) estira la columna y desborda */
.ficha-cuerpo > *, .paneles > *, .hero > *, .pie-in > * { min-width: 0; }

.visor { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--sombra); align-self: start; }
.visor-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.visor-num { font-family: var(--fuente-lcd); font-size: 1.15rem; color: var(--suave); }
.visor-pantalla {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--borde);
  background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--t1, var(--brand)) 30%, transparent), transparent 66%), var(--superficie-2);
}
.visor-pantalla .arte { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .22)); }
.visor-ctrl { display: flex; gap: 8px; margin-top: 12px; }
.visor-ctrl .btn { flex: 1; padding: 8px 10px; font-size: .88rem; }
.js-shiny[aria-pressed="true"] { background: #ffe9a8; border-color: #f0c860; color: #6a4a00; }
:root[data-tema="oscuro"] .js-shiny[aria-pressed="true"] { background: #4a3a08; border-color: #7a6414; color: #ffe08a; }
.formas-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde); }
.forma-tab {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie-2);
  font-size: .82rem; font-weight: 600; cursor: pointer; color: var(--suave);
}
.forma-tab[aria-selected="true"] { background: var(--brand); border-color: transparent; color: #fff; }

.ficha-info > .resumen { font-size: 1.02rem; }
.tipos-fila { margin-bottom: 12px; }
.tipos-fila .tipo { padding: 6px 16px; font-size: .92rem; }

.lcd {
  margin: 0 0 18px; padding: 14px 16px 12px; border-radius: var(--r);
  background: var(--lcd-bg); color: var(--lcd-txt); border: 3px solid var(--lcd-borde);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16), inset 0 2px 10px rgba(0, 0, 0, .12);
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 4px);
}
.lcd-txt { margin: 0; font-family: var(--fuente-lcd); font-size: 1.32rem; line-height: 1.3; }
.lcd-fuente { margin: 6px 0 0; font-family: var(--fuente-lcd); font-size: 1rem; opacity: .75; }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px 16px; margin: 0 0 18px; }
.datos > div { min-width: 0; }
.datos dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); font-weight: 600; }
.datos dd { margin: 2px 0 0; font-weight: 600; }
.datos dd small { font-weight: 400; color: var(--suave); }
.datos--ancho { grid-column: 1 / -1; }
.datos--especie { padding-top: 16px; border-top: 1px solid var(--borde); }
.habs { display: flex; flex-wrap: wrap; gap: 6px; }
.hab { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 999px; padding: 3px 11px; font-size: .86rem; display: inline-flex; gap: 6px; align-items: center; }
.hab small { color: var(--suave); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.hab--oculta { border-style: dashed; }

.stats { width: 100%; border-collapse: collapse; }
.stats th { text-align: left; font-weight: 600; font-size: .88rem; color: var(--suave); padding: 5px 0; width: 8.5em; }
.stat-num { font-variant-numeric: tabular-nums; font-weight: 700; width: 3em; padding-right: 12px; }
.stat-celda { width: 100%; }
.stat-barra {
  display: block; height: 9px; border-radius: 999px;
  width: calc(min(var(--v), 255) / 255 * 100%);
  background: hsl(calc(min(var(--v), 255) * .45) 68% 45%);
  min-width: 4px;
}
.stats-total th, .stats-total .stat-num { color: var(--texto); font-weight: 800; border-top: 1px solid var(--borde); padding-top: 9px; }
.stats-total .stat-celda { border-top: 1px solid var(--borde); }
.stat-barra--total { background: var(--texto); opacity: .75; }

.efect-grupo { margin-bottom: 14px; }
.efect-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: .86rem; font-weight: 600; color: var(--suave); }
.efect-mult { font-family: var(--fuente-lcd); font-size: 1.2rem; padding: 0 8px; border-radius: 6px; color: #fff; line-height: 1.4; }
.efect-grupo--m4 .efect-mult { background: #b3261e; }
.efect-grupo--m2 .efect-mult { background: #e06c00; }
.efect-grupo--m05 .efect-mult { background: #2e7d32; }
.efect-grupo--m025 .efect-mult { background: #145c38; }
.efect-grupo--m0 .efect-mult { background: #454b57; }

.evo { overflow-x: auto; padding: 4px; }
.evo-nodo { display: flex; align-items: center; gap: 14px; }
.evo-hijos { display: flex; flex-direction: column; gap: 10px; }
.evo-rama { display: flex; align-items: center; gap: 10px; }
.evo-carta {
  display: grid; justify-items: center; gap: 2px; padding: 10px 12px; min-width: 116px;
  text-decoration: none; border-radius: var(--r); border: 1px solid var(--borde); background: var(--superficie-2);
}
.evo-carta:hover { border-color: var(--brand); }
.evo-carta.es-actual { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--superficie-2)); }
.evo-carta img { width: 72px; height: 72px; image-rendering: pixelated; }
.evo-nombre { font-weight: 700; font-size: .92rem; }
.evo-forma { font-size: .72rem; color: var(--suave); text-align: center; }
.evo-tipos { display: flex; gap: 4px; margin-top: 2px; }
.evo-cond { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .78rem; color: var(--suave); max-width: 210px; }
.evo-flecha svg { width: 18px; height: 18px; color: var(--brand); flex: none; }

.formas-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.forma-carta {
  display: grid; justify-items: center; gap: 4px; width: 100%; padding: 12px;
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r); cursor: pointer;
}
.forma-carta:hover { border-color: var(--brand); }
.forma-carta img { width: 96px; height: 96px; object-fit: contain; }
.forma-nombre { font-weight: 700; font-size: .88rem; text-align: center; }
.forma-total { font-family: var(--fuente-lcd); font-size: .95rem; color: var(--suave); }

/* ---------- movimientos ---------- */
.panel-fuente { font-size: .78rem; font-weight: 500; color: var(--suave); letter-spacing: 0; }
.mov-titulo { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); margin: 4px 0 8px; }
.tabla-mov { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 460px; }
.tabla-mov thead th {
  position: sticky; top: 0; text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--suave); padding: 6px 8px; background: var(--superficie);
  border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.tabla-mov tbody th { text-align: left; font-weight: 600; }
.tabla-mov td, .tabla-mov tbody th { padding: 6px 8px; border-bottom: 1px solid var(--borde); }
.tabla-mov tbody tr:hover { background: var(--superficie-2); }
.tabla-mov tbody tr:last-child td, .tabla-mov tbody tr:last-child th { border-bottom: 0; }
.mov-clave { font-family: var(--fuente-lcd); font-size: 1.05rem; color: var(--suave); white-space: nowrap; }
.mov-num { font-variant-numeric: tabular-nums; color: var(--suave); white-space: nowrap; }
.mov-clase { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.mov-clase--fisico { background: #f2d3c8; color: #7a2e10; }
.mov-clase--especial { background: #cfd9f2; color: #1f3a7a; }
.mov-clase--estado { background: #dfe1e6; color: #3a3f4a; }
:root[data-tema="oscuro"] .mov-clase--fisico { background: #4a2617; color: #ffbb96; }
:root[data-tema="oscuro"] .mov-clase--especial { background: #1d2a4d; color: #a8c2ff; }
:root[data-tema="oscuro"] .mov-clase--estado { background: #2c313b; color: #c3c9d4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .mov-clase--fisico { background: #4a2617; color: #ffbb96; }
  :root:not([data-tema="claro"]) .mov-clase--especial { background: #1d2a4d; color: #a8c2ff; }
  :root:not([data-tema="claro"]) .mov-clase--estado { background: #2c313b; color: #c3c9d4; }
}
.mov-extra { margin-top: 14px; border-top: 1px solid var(--borde); padding-top: 12px; }
.mov-extra summary { cursor: pointer; font-weight: 600; color: var(--suave); }
.mov-extra summary:hover { color: var(--texto); }
.mov-extra .tabla-envoltorio { margin-top: 10px; max-height: 420px; overflow-y: auto; }

.entradas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.entradas li { padding: 12px 14px; background: var(--superficie-2); border-radius: var(--r); border: 1px solid var(--borde); }
.entradas p { margin: 0; }
.entrada-juegos { margin-top: 6px !important; font-size: .8rem; color: var(--suave); }
.mas-entradas { margin-top: 12px; }
.mas-entradas summary { cursor: pointer; font-weight: 600; color: var(--suave); }
.mas-entradas .entradas { margin-top: 12px; }

.prev-sig { display: flex; gap: 12px; justify-content: space-between; margin-top: 8px; }
.prev-sig-a {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; text-decoration: none;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); flex: 1 1 0; min-width: 0;
}
.prev-sig-a:hover { border-color: var(--brand); }
.prev-sig-a--der { justify-content: flex-end; text-align: right; }
.prev-sig-a img { width: 56px; height: 56px; image-rendering: pixelated; flex: none; }
.prev-sig-a span { display: flex; flex-direction: column; font-weight: 700; min-width: 0; }
.prev-sig-a small { font-weight: 500; color: var(--suave); font-size: .78rem; }

/* ---------- 7. tipos ---------- */
.cabecera-tipo {
  border-radius: var(--r-lg); padding: 26px; margin-bottom: 22px;
  border: 1px solid color-mix(in srgb, var(--tc) 30%, var(--borde));
  background: linear-gradient(140deg, color-mix(in srgb, var(--tc) 20%, var(--superficie)), var(--superficie) 65%);
}
.cabecera-tipo h1 { margin: 10px 0 6px; }
.tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-tipos { border-collapse: separate; border-spacing: 2px; font-size: .78rem; }
.tabla-tipos th { font-weight: 600; }
.tabla-tipos thead th { padding: 0; }
.tabla-tipo { display: block; padding: 4px 2px; border-radius: 6px; background: var(--tc); color: var(--tf); font-size: .68rem; min-width: 34px; }
.tabla-tipos tbody th { text-align: right; padding-right: 6px; }
.tabla-tipos td { width: 34px; height: 30px; text-align: center; border-radius: 6px; background: var(--superficie-2); color: var(--suave); }
.tabla-tipos td.c2 { background: #2e7d32; color: #fff; font-weight: 700; }
.tabla-tipos td.c05 { background: #c0392b; color: #fff; font-weight: 700; }
.tabla-tipos td.c0 { background: #2c3038; color: #fff; font-weight: 700; }
.leyenda { display: flex; gap: 16px; list-style: none; padding: 0; margin: 14px 0 0; flex-wrap: wrap; font-size: .85rem; color: var(--suave); }
.leyenda li { display: flex; align-items: center; gap: 6px; }
.leyenda span { width: 16px; height: 16px; border-radius: 4px; display: block; }
.leyenda .c2 { background: #2e7d32; } .leyenda .c05 { background: #c0392b; } .leyenda .c0 { background: #2c3038; }

.tipos-rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tipo-carta { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r); text-decoration: none; background: var(--tc); color: var(--tf); }
.tipo-carta:hover { filter: brightness(1.06); }
.tipo-carta-nombre { font-weight: 800; font-size: 1.05rem; }
.tipo-carta-num { font-size: .8rem; opacity: .85; }
.calc-ayuda { font-size: .9rem; color: var(--suave); margin-bottom: 10px; }
.calc-resultado { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borde); }

/* ---------- 8. juego ---------- */
.juego { max-width: 720px; margin: 0 auto; }
.juego-tabs { display: flex; gap: 6px; padding: 4px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 999px; margin-bottom: 20px; }
.juego-tabs button { flex: 1; padding: 9px 12px; border: 0; border-radius: 999px; background: none; font-weight: 700; color: var(--suave); cursor: pointer; }
.juego-tabs button[aria-selected="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.juego-panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sombra); }
.juego-cab { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.juego-num { margin: 0; font-size: .95rem; color: var(--suave); }
.juego-num b { font-family: var(--fuente-lcd); font-size: 1.4rem; color: var(--texto); }
.juego-fecha { margin: 0; font-size: .9rem; color: var(--suave); }

/* La caja de la silueta es una "pantalla" clara en ambos temas: así la
   silueta oscura siempre se ve, como en la serie. */
.silueta-caja {
  position: relative; width: min(380px, 78vw); aspect-ratio: 1; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, #f4f7fc, #dde4f0);
  border: 1px solid var(--borde);
  box-shadow: inset 0 2px 12px rgba(20, 30, 50, .12);
}
.silueta-caja canvas { position: relative; z-index: 1; width: 92%; height: 92%; object-fit: contain; }
.rayos {
  position: absolute; inset: -30%; opacity: 0; transition: opacity .5s ease;
  background: repeating-conic-gradient(from 0deg at 50% 50%, #ffd93b 0deg 7deg, transparent 7deg 16deg);
}
.silueta-caja.revelado { background: radial-gradient(circle at 50% 50%, #4aa3e8, #1d5fa8); }
.silueta-caja.revelado .rayos { opacity: .45; animation: girar 22s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.adivina { display: flex; gap: 10px; align-items: stretch; margin-bottom: 8px; }
.adivina .campo--busca { flex: 1; }
.adivina input { height: 100%; }
.adivina-ayuda { font-size: .88rem; color: var(--suave); text-align: center; }

.intentos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.intento { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 8px 10px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r); }
.intento img { width: 44px; height: 44px; image-rendering: pixelated; }
.intento-nombre { font-weight: 700; font-size: .92rem; margin: 0 0 4px; }
.intento-pistas { display: flex; flex-wrap: wrap; gap: 5px; }
.pista { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--superficie); border: 1px solid var(--borde); color: var(--suave); }
.pista--si { background: #1f7a34; border-color: transparent; color: #fff; }
.pista--casi { background: #d39400; border-color: transparent; color: #241a00; }
.pista--no { background: #b3261e; border-color: transparent; color: #fff; }

.resultado { margin-top: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.resultado-txt { font-size: 1.15rem; font-weight: 700; margin: 0; }
.resultado .btn { min-width: 180px; }
.proximo { font-size: .85rem; color: var(--suave); margin: 4px 0 0; }
.opciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.opciones button { padding: 14px 10px; font-size: 1rem; }
.opcion--ok { background: #1f7a34 !important; color: #fff !important; border-color: transparent !important; }
.opcion--mal { background: #b3261e !important; color: #fff !important; border-color: transparent !important; }
.libre-aviso { text-align: center; font-weight: 700; min-height: 1.6em; margin-bottom: 10px; }

.modal { border: 1px solid var(--borde); border-radius: var(--r-lg); background: var(--superficie); color: var(--texto); padding: 24px; max-width: 420px; width: calc(100% - 32px); box-shadow: var(--sombra-alta); }
.modal::backdrop { background: rgba(0, 0, 0, .55); }
.stats-juego { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; }
.stats-juego b { display: block; font-size: 1.5rem; }
.stats-juego span { font-size: .75rem; color: var(--suave); }

/* ---------- 9. equipo ---------- */
.equipo-buscador { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.equipo-buscador form { display: flex; gap: 10px; flex: 1 1 320px; }
.equipo-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.equipo-slots { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; }
.slot { position: relative; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); min-height: 186px; display: grid; place-items: center; }
.slot--vacio { border-style: dashed; color: var(--suave); font-size: .88rem; text-align: center; padding: 16px; }
.slot a { display: grid; justify-items: center; gap: 3px; padding: 12px 10px; text-decoration: none; color: inherit; width: 100%; }
.slot img { width: 100px; height: 100px; object-fit: contain; }
.slot-nombre { font-weight: 700; font-size: .95rem; }
.slot-quitar { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--borde); background: var(--superficie-2); cursor: pointer; color: var(--suave); font-size: 1rem; line-height: 1; }
.slot-quitar:hover { color: var(--brand); border-color: var(--brand); }

.tabla-equipo { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: .82rem; }
.tabla-equipo th { font-weight: 600; text-align: left; }
.tabla-equipo thead th { text-align: center; }
.tabla-equipo thead img { width: 36px; height: 36px; image-rendering: pixelated; }
.tabla-equipo td { text-align: center; border-radius: 6px; padding: 5px 4px; background: var(--superficie-2); color: var(--suave); min-width: 44px; }
.tabla-equipo td.x4 { background: #7f1d18; color: #fff; font-weight: 700; }
.tabla-equipo td.x2 { background: #c0392b; color: #fff; font-weight: 700; }
.tabla-equipo td.x05 { background: #2e7d32; color: #fff; }
.tabla-equipo td.x025 { background: #14532d; color: #fff; }
.tabla-equipo td.x0 { background: #2c3038; color: #fff; }
.tabla-equipo .col-resumen { font-weight: 800; }
.equipo-resumen { display: grid; gap: 10px; margin-top: 18px; }
.alerta { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); font-size: .92rem; }
.alerta--mal { background: color-mix(in srgb, #b3261e 12%, var(--superficie)); border: 1px solid color-mix(in srgb, #b3261e 35%, transparent); }
.alerta--bien { background: color-mix(in srgb, #1f7a34 12%, var(--superficie)); border: 1px solid color-mix(in srgb, #1f7a34 35%, transparent); }

/* ---------- 10. pie ---------- */
.pie { background: var(--superficie); border-top: 1px solid var(--borde); padding: 36px 16px 48px; }
.pie-in { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 28px; }
.pie-marca { font-weight: 800; font-size: 1.2rem; margin: 0 0 4px; }
.pie-marca span { color: var(--brand); }
.pie-lema, .pie-legal { font-size: .85rem; color: var(--suave); }
.pie-titulo { font-weight: 700; margin: 0 0 8px; }
.pie nav { display: grid; gap: 6px; align-content: start; }
.pie nav a { font-size: .9rem; color: var(--suave); text-decoration: none; }
.pie nav a:hover { color: var(--texto); text-decoration: underline; }
.pie-legal a { color: var(--suave); }
.pie-cl { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--suave); }
.bandera { width: 24px; height: 16px; border-radius: 3px; border: 1px solid var(--borde); stroke: none; }

/* ---------- avisos flotantes ---------- */
.avisos { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100% - 32px); }
.aviso-flotante {
  margin: 0; padding: 10px 18px; border-radius: 999px; background: var(--texto); color: var(--bg);
  font-size: .92rem; font-weight: 600; box-shadow: var(--sombra-alta); text-align: center;
  animation: entra-aviso .22s ease;
}
.aviso-flotante.se-va { opacity: 0; transition: opacity .35s ease; }
@keyframes entra-aviso { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 760px) { .avisos { bottom: 82px; } }

/* ---------- navegación entre generaciones ---------- */
.gen-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.gen-nav .es-actual { background: var(--brand); color: #fff; border-color: transparent; }

/* ---------- 404 ---------- */
.error404 { text-align: center; padding: 60px 16px; }
.glitch {
  font-family: var(--fuente-lcd); font-size: clamp(3rem, 12vw, 7rem); line-height: 1; margin: 0 0 10px;
  color: var(--brand); text-shadow: 3px 0 #3fa9f5, -3px 0 #ffd93b;
  animation: glitch 2.4s infinite steps(2);
}
@keyframes glitch { 0%, 92%, 100% { transform: none; } 94% { transform: translate(3px, -2px); } 96% { transform: translate(-3px, 1px); } }
.error404 .hero-btns { justify-content: center; }

/* ---------- 11. responsive ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .pie-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .ficha-cuerpo { grid-template-columns: 1fr; }
  .visor { max-width: 420px; margin-inline: auto; width: 100%; }
}
@media (max-width: 760px) {
  :root { --alto-barra: 54px; }
  .nav { display: none; }
  .nav-movil {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--superficie); border-top: 1px solid var(--borde);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px -10px rgba(0, 0, 0, .35);
  }
  .nav-movil a { display: grid; justify-items: center; gap: 2px; padding: 4px 2px; text-decoration: none; color: var(--suave); font-size: .68rem; font-weight: 600; }
  .nav-movil svg { width: 21px; height: 21px; }
  .nav-movil a[aria-current="page"] { color: var(--brand); }
  body { padding-bottom: 68px; }
  .buscador { max-width: none; }
  /* en móvil la cadena se lee de arriba abajo: tarjeta → condición → tarjeta */
  .evo { padding: 0; }
  .evo-nodo { flex-direction: column; align-items: center; gap: 10px; }
  .evo-hijos { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 14px; width: 100%; }
  .evo-rama { flex-direction: column; align-items: center; gap: 6px; }
  .evo-cond { max-width: 100%; text-align: center; justify-content: center; }
  .evo-flecha svg { transform: rotate(90deg); }
  .evo-carta { width: 100%; }
  .prev-sig { flex-direction: column; }
  .pie-in { grid-template-columns: 1fr; }
  .paneles { gap: 16px; }
  .panel { padding: 16px; }
  main { padding: 16px 14px 48px; }
}
@media (max-width: 560px) {
  .marca-txt { display: none; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }
  .carta-img img { width: 92px; height: 92px; }
  .ficha-cab { align-items: flex-start; }
  .filtros-fila > .campo { flex: 1 1 140px; }
  .opciones { grid-template-columns: 1fr; }
  .stats-juego { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 12. comparador ---------- */
.cmp-tablero { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; margin-bottom: 22px; }
.cmp-vs { align-self: center; font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.3rem; color: var(--suave); letter-spacing: .02em; }
.cmp-form { margin-bottom: 10px; }
.cmp-tarjeta {
  position: relative; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: 16px; text-align: center; min-height: 268px; display: grid; align-content: center; justify-items: center;
  gap: 2px; box-shadow: var(--sombra);
  background-image: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--t1, transparent) 20%, transparent), transparent 62%);
}
.cmp-tarjeta img { width: 168px; height: 168px; object-fit: contain; }
.cmp-vacio { color: var(--suave); margin: 0; display: grid; gap: 10px; justify-items: center; }
.cmp-num { font-family: var(--fuente-lcd); font-size: 1.05rem; color: var(--suave); margin: 0; }
.cmp-nombre { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.35rem; margin: 0 0 6px; letter-spacing: -.02em; }
.cmp-nombre a { text-decoration: none; }
.cmp-nombre a:hover { text-decoration: underline; }
.cmp-medidas { margin: 8px 0 0; font-size: .85rem; color: var(--suave); }
.cmp-quitar {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--borde); background: var(--superficie-2); color: var(--suave); cursor: pointer; line-height: 1;
}
.cmp-quitar:hover { color: var(--brand); border-color: var(--brand); }

.cmp-stats { display: grid; gap: 2px; }
.cmp-fila { display: grid; grid-template-columns: 3rem 1fr 7.4rem 1fr 3rem; align-items: center; gap: 8px; padding: 3px 0; }
.cmp-val { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--suave); text-align: center; font-size: .95rem; }
.cmp-val.es-ganador { color: var(--texto); font-weight: 700; }
.cmp-stat { text-align: center; font-size: .8rem; color: var(--suave); }
.cmp-lado { display: flex; }
.cmp-lado--a { justify-content: flex-end; }
.cmp-barra { display: flex; width: 100%; height: 10px; background: var(--superficie-2); border-radius: 999px; overflow: hidden; }
.cmp-lado--a .cmp-barra { justify-content: flex-end; }
.cmp-barra span { display: block; height: 100%; width: calc(var(--v) / var(--max) * 100%); border-radius: 999px; }
.cmp-lado--a .cmp-barra span { background: var(--brand); }
.cmp-lado--b .cmp-barra span { background: var(--lente); }
.cmp-fila--total { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--borde); }
.cmp-fila--total .cmp-val { font-size: 1.05rem; }
.cmp-veredicto { margin-top: 18px; }

.cmp-combate { display: grid; gap: 10px; margin-bottom: 12px; }
.cmp-golpe { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r); }
.cmp-golpe img { width: 56px; height: 56px; image-rendering: pixelated; flex: none; }
.cmp-golpe p { margin: 0; }
.cmp-mult { font-family: var(--fuente-lcd); font-size: 1.25rem; padding: 0 8px; border-radius: 6px; color: #fff; background: #454b57; margin-left: 4px; }
.cmp-mult--4, .cmp-mult--2 { background: #b3261e; }
.cmp-mult--1 { background: #6b7280; }
.cmp-mult--05, .cmp-mult--025 { background: #2e7d32; }
.cmp-mult--0 { background: #2c3038; }

@media (max-width: 760px) {
  .cmp-tablero { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cmp-vs { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .cmp-tarjeta { min-height: 210px; padding: 12px; }
  .cmp-tarjeta img { width: 120px; height: 120px; }
  .cmp-fila { grid-template-columns: 2.4rem 1fr 5.2rem 1fr 2.4rem; gap: 5px; }
  .cmp-stat { font-size: .72rem; }
  .cmp-val { font-size: .85rem; }
}

/* ---------- 13. detalles finales ---------- */
/* carriles horizontales: se desvanecen en el borde para avisar que siguen */
.atajos, .recientes-lista {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%);
  scrollbar-width: none;
}
.atajos::-webkit-scrollbar, .recientes-lista::-webkit-scrollbar { display: none; }

/* la tarjeta reacciona con el color de su tipo */
.carta a { transition: transform .16s ease; }
.carta:hover .carta-img img { transform: scale(1.06); }
.carta-img img { transition: transform .18s ease; }

@media (max-width: 620px) {
  .consola-cuerpo { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .consola-visor { max-width: 210px; margin-inline: auto; width: 100%; }
  .consola-nombre { text-align: center; }
  .consola-datos > .tipos-lista { justify-content: center; }
  .consola-botones { justify-content: center; }
  .lcd--consola .lcd-txt { font-size: 1.18rem; }
  .masthead-estado { font-size: .98rem; }
}
.sin-imagen { position: relative; }
.sin-imagen::after {
  content: "sin imagen"; display: grid; place-items: center; width: 100%; min-height: 70px;
  color: var(--suave); font-size: .72rem; border: 1px dashed var(--borde); border-radius: var(--r-sm);
}
.prosa ul { color: var(--suave); padding-left: 1.2em; }
.prosa li { margin-bottom: 6px; }

/* ---------- 14. sala de juegos ---------- */
.juego-barra {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px;
  padding: 8px 18px; margin: 0 auto 20px; width: fit-content; max-width: 100%; box-shadow: var(--sombra);
}
.marcador { display: flex; align-items: baseline; gap: 7px; }
.marcador span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); font-weight: 700; }
.marcador b { font-family: var(--fuente-lcd); font-size: 1.5rem; line-height: 1; }
.marcador--tiempo b { color: var(--brand); }
:root[data-tema="oscuro"] .marcador--tiempo b { color: var(--brand-claro); }
.campo--linea { flex-direction: row; align-items: center; gap: 8px; }
.campo--linea span { white-space: nowrap; }
.campo--linea select { padding: 5px 10px; }
.js-sonido { background: var(--superficie-2); border: 1px solid var(--borde); color: var(--suave); width: 34px; height: 34px; }
.js-sonido[aria-pressed="false"] { opacity: .45; }

/* hub */
.juego-destacado {
  display: flex; align-items: center; gap: 20px; text-decoration: none; margin-bottom: 20px;
  background: linear-gradient(120deg, var(--brand), var(--brand-oscuro)); color: #fff;
  border-radius: var(--r-lg); padding: 22px 26px; box-shadow: var(--sombra);
}
.juego-destacado:hover { filter: brightness(1.06); }
.juego-destacado h2 { margin: 2px 0 6px; color: #fff; }
.juego-destacado p { margin: 0; color: rgba(255, 255, 255, .88); max-width: 60ch; }
.juego-etiqueta { font-family: var(--fuente-lcd); font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.juego-estado { margin-top: 10px !important; font-family: var(--fuente-lcd); font-size: 1.15rem; }
.juego-destacado-icono { margin-left: auto; flex: none; opacity: .5; }
.juego-destacado-icono svg { width: 84px; height: 84px; stroke-width: 1.2; }

.juegos-rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.juego-carta {
  display: grid; gap: 6px; height: 100%; padding: 18px; text-decoration: none; align-content: start;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg);
  box-shadow: var(--sombra); transition: transform .15s ease, border-color .15s ease;
}
.juego-carta:hover { transform: translateY(-3px); border-color: var(--brand); }
.juego-carta-icono { color: var(--brand); }
:root[data-tema="oscuro"] .juego-carta-icono { color: var(--brand-claro); }
.juego-carta-icono svg { width: 30px; height: 30px; }
.juego-carta-nombre { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.juego-carta-bajada { color: var(--suave); font-size: .9rem; }
.juego-carta-marca { margin-top: 6px; font-family: var(--fuente-lcd); font-size: 1.05rem; color: var(--suave); }
.juego-carta-marca.tiene-marca { color: var(--brand); }
:root[data-tema="oscuro"] .juego-carta-marca.tiene-marca { color: var(--brand-claro); }

.juego-fin { text-align: center; margin-top: 20px; display: grid; gap: 12px; justify-items: center; }

/* tarjeta genérica dentro de los juegos */
.jt { display: grid; justify-items: center; gap: 2px; text-decoration: none; color: inherit; }
.jt img { object-fit: contain; }
.jt-num { font-family: var(--fuente-lcd); font-size: 1rem; color: var(--suave); }
.jt-nombre { font-weight: 700; }

/* más o menos */
.mom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.mom-lado { display: grid; }
.mom-carta {
  display: grid; justify-items: center; gap: 2px; padding: 16px 12px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra);
}
.mom-carta img { width: min(170px, 38vw); height: min(170px, 38vw); object-fit: contain; }
.mom-num { font-family: var(--fuente-lcd); font-size: 1.05rem; color: var(--suave); margin: 0; }
.mom-nombre { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.25rem; margin: 0 0 6px; letter-spacing: -.02em; text-align: center; }
.mom-valor { margin: 0; display: grid; justify-items: center; min-height: 3.2em; }
.mom-valor b { font-family: var(--fuente-lcd); font-size: 2rem; line-height: 1; }
.mom-medida { font-size: .78rem; color: var(--suave); }
.mom-interrogacion { font-family: var(--fuente-lcd); font-size: 2rem; color: var(--brand); }
.mom-centro { display: grid; gap: 10px; justify-items: center; }
.mom-vs { font-family: var(--fuente-titulo); font-weight: 800; color: var(--suave); margin: 0; }
.mom-botones { display: grid; gap: 8px; }
.mom-botones .btn { min-width: 128px; }
.mom-aviso { min-height: 3em; text-align: center; font-weight: 700; margin: 0; max-width: 16ch; }
.mom-aviso--bien { color: #1f7a34; }
.mom-aviso--mal { color: #b3261e; }
:root[data-tema="oscuro"] .mom-aviso--bien { color: #5ed17f; }
:root[data-tema="oscuro"] .mom-aviso--mal { color: #ff8a80; }

/* gritos */
.grito-caja { display: grid; justify-items: center; gap: 14px; margin-bottom: 22px; }
.grito-boton {
  display: inline-flex; align-items: center; gap: 12px; padding: 18px 34px; border-radius: 999px;
  border: 0; cursor: pointer; font-size: 1.1rem; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, var(--brand-claro), var(--brand)); box-shadow: 0 8px 24px -10px var(--brand);
}
.grito-boton:hover { filter: brightness(1.07); }
.grito-boton svg { width: 24px; height: 24px; }
.grito-onda { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.grito-onda i { display: block; width: 5px; height: 8px; border-radius: 3px; background: var(--borde); }
.grito-onda.sonando i { background: var(--brand); animation: onda .7s ease-in-out infinite; }
.grito-onda.sonando i:nth-child(2n) { animation-delay: .1s; }
.grito-onda.sonando i:nth-child(3n) { animation-delay: .2s; }
@keyframes onda { 0%, 100% { height: 8px; } 50% { height: 32px; } }
.grito-revelado { display: grid; justify-items: center; margin-top: 8px; }

/* duelo de tipos */
.duelo { max-width: 620px; margin: 0 auto; text-align: center; }
.duelo-pregunta { display: grid; justify-items: center; gap: 8px; font-size: 1.1rem; margin-bottom: 18px; min-height: 190px; align-content: center; }
.duelo-pregunta img { width: 120px; height: 120px; object-fit: contain; }
.duelo-txt { display: grid; gap: 6px; justify-items: center; }
.duelo-tipos-mini { display: flex; gap: 4px; }
.opciones--cuatro { grid-template-columns: repeat(4, 1fr); }
.duelo-opcion { font-family: var(--fuente-lcd); font-size: 1.6rem; padding: 10px 6px; }
.duelo-feedback { min-height: 2.6em; font-weight: 600; margin: 14px 0 0; }
.duelo-feedback--bien { color: #1f7a34; }
.duelo-feedback--mal { color: #b3261e; }
:root[data-tema="oscuro"] .duelo-feedback--bien { color: #5ed17f; }
:root[data-tema="oscuro"] .duelo-feedback--mal { color: #ff8a80; }

/* memoria */
.memoria { display: grid; gap: 8px; justify-content: center; margin-bottom: 14px; }
.memoria[data-nivel="facil"], .memoria[data-nivel="normal"] { grid-template-columns: repeat(4, minmax(58px, 96px)); }
.memoria[data-nivel="dificil"] { grid-template-columns: repeat(6, minmax(52px, 88px)); }
.mem-carta { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; perspective: 700px; }
.mem-cara {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--r-sm);
  border: 1px solid var(--borde); backface-visibility: hidden; transition: transform .35s ease;
}
.mem-cara--atras { background: radial-gradient(circle at 50% 42%, var(--brand-claro), var(--brand-oscuro)); }
.mem-cara--atras::after {
  content: ""; width: 42%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #cdefff, var(--lente) 46%, #1668b0); border: 2px solid #fff;
}
.mem-cara--frente { background: var(--superficie); transform: rotateY(180deg); }
.mem-cara--frente img { width: 82%; height: 82%; object-fit: contain; image-rendering: pixelated; }
.esta-vuelta .mem-cara--atras, .encontrada .mem-cara--atras { transform: rotateY(180deg); }
.esta-vuelta .mem-cara--frente, .encontrada .mem-cara--frente { transform: rotateY(360deg); }
.encontrada { opacity: .5; cursor: default; }
.encontrada .mem-cara--frente { border-color: #4cd964; }

@media (max-width: 680px) {
  .mom { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mom-centro { grid-column: 1 / -1; grid-row: 2; }
  .mom-botones { grid-auto-flow: column; }
  .mom-aviso { max-width: none; }
  .mom-carta { padding: 10px 8px; }
  .mom-valor b, .mom-interrogacion { font-size: 1.6rem; }
  .juego-destacado { flex-direction: column; text-align: center; gap: 10px; }
  .juego-destacado-icono { margin: 0; }
  .juego-destacado-icono svg { width: 56px; height: 56px; }
  .opciones--cuatro { grid-template-columns: repeat(2, 1fr); }
  .memoria[data-nivel="dificil"] { grid-template-columns: repeat(4, minmax(52px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .mem-cara { transition: none; }
  .grito-onda.sonando i { animation: none; height: 20px; }
}

/* opciones con ilustración en "¿Quién grita así?" */
#grito-opciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 560px; margin: 0 auto; }
.grito-opcion {
  display: grid; justify-items: center; gap: 4px; padding: 14px 10px; cursor: pointer;
  background: var(--superficie); border: 2px solid var(--borde); border-radius: var(--r-lg);
  color: inherit; box-shadow: var(--sombra); transition: transform .14s ease, border-color .14s ease;
}
.grito-opcion:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--brand); }
.grito-opcion:disabled { cursor: default; }
.grito-opcion img { width: min(150px, 32vw); height: min(150px, 32vw); object-fit: contain; }
.grito-opcion-nombre { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.08rem; letter-spacing: -.02em; }
.grito-opcion.es-correcta { border-color: #1f7a34; background: color-mix(in srgb, #1f7a34 14%, var(--superficie)); }
.grito-opcion.es-incorrecta { border-color: #b3261e; background: color-mix(in srgb, #b3261e 14%, var(--superficie)); opacity: .8; }
.grito-ficha { display: inline-block; margin-top: 6px; color: var(--suave); font-size: .92rem; }

/* fracciones legibles en el duelo de tipos */
.duelo-opcion { display: grid; gap: 1px; padding: 10px 6px; line-height: 1.15; }
.duelo-signo { font-family: var(--fuente-lcd); font-size: 1.75rem; line-height: 1; }
.duelo-glosa { font-size: .72rem; font-weight: 500; color: var(--suave); }
.duelo-opcion.opcion--ok .duelo-glosa, .duelo-opcion.opcion--mal .duelo-glosa { color: rgba(255, 255, 255, .85); }