/* ==========================================================================
   Titanes del Dinero · base.css
   Sistema común a todas las páginas: tokens, tipografía, retícula, cabecera y
   menú de series, botones, sellos, tarjetas de vídeo, filas de serie, cabecera
   de hub, migas, suscripción, «sigue viendo», pie y aviso de cookies.
   Encima: lectura.css (páginas de vídeo), portada.css (inicio) y una hoja
   serie-*.css por serie, solo en su hub y en sus fichas.
   Sin frameworks, sin dependencias, sin light-dark() (funciona en Safari < 17.5).
   ========================================================================== */

/* ---------- Tipografías alojadas (OFL) ---------- */
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin.woff2?ver=1") format("woff2"); /* ?ver= = TITANES_VER_FUENTES (inc/assets.php) */
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin.woff2?ver=1") format("woff2"); /* ?ver= = TITANES_VER_FUENTES (inc/assets.php) */
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* Respaldos métricos: el texto no salta cuando llega la fuente (CLS 0) */
@font-face {
  font-family: "Inter Tight Respaldo";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 94%; ascent-override: 98%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono Respaldo";
  src: local("Menlo"), local("Consolas"), local("Courier New");
  size-adjust: 97%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

/* ---------- Tokens de color (generados por _generador/tokens.py) ----------
   Claro por defecto; oscuro si el sistema lo pide y nadie ha elegido «claro»;
   el selector manual fija data-tema="claro|oscuro" en <html>.
   .tema-oscuro y .tema-claro fijan el modo de un bloque (pizarra, cine, historieta). */
:root,
.tema-claro {
  color-scheme: light;
  --fondo: #f8f6ec;
  --fondo-2: #f0ede0;
  --sup: #fffefa;
  --sup-2: #f3f0e3;
  --sup-3: #e8e4d3;
  --borde: #e2ddca;
  --borde-2: #cdc6ad;
  --borde-campo: #7f7b66;
  --texto: #0d1712;
  --texto-2: #3c4740;
  --texto-3: #555e58;
  --enlace: #1b5e45;
  --foco: #1b5e45;
  --oro-texto: #755800;
  --oro-fondo: #f6edc8;
  --rojo: #a3321c;
  --rojo-fondo: #f9e3da;
  --ok: #1f6e43;
  --ok-fondo: #e2efe2;
  --medio: #7d5800;
  --medio-fondo: #f6ecc9;
  --mal: #a3321c;
  --mal-fondo: #f9e3da;
  --boton: #07110d;
  --boton-texto: #fefeea;
  --velo: rgb(248 246 236 / .92);
  --nr-tinta: #1b5e45;
  --ti-tinta: #1c4332;
  --bi-tinta: #7a5200;
  --di-tinta: #5d4a8c;
  --fo-tinta: #9a4200;
  --hd-tinta: #7d5a14;
  --ac-tinta: #a3241a;
  --sombra-1: 0 1px 2px rgb(13 23 18 / .06), 0 10px 28px -18px rgb(13 23 18 / .28);
  --sombra-2: 0 2px 6px rgb(13 23 18 / .08), 0 28px 56px -28px rgb(13 23 18 / .4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fondo: #07110d;
    --fondo-2: #0b1813;
    --sup: #0f1d17;
    --sup-2: #13241c;
    --sup-3: #1b2f26;
    --borde: #1f3329;
    --borde-2: #2e4a3c;
    --borde-campo: #7b9587;
    --texto: #f3f1e1;
    --texto-2: #c5cdbf;
    --texto-3: #9eab9f;
    --enlace: #a9d89c;
    --foco: #e2c35a;
    --oro-texto: #e2c35a;
    --oro-fondo: #2a2510;
    --rojo: #f2a08a;
    --rojo-fondo: #3a1a12;
    --ok: #8fd48a;
    --ok-fondo: #11301c;
    --medio: #e6c35c;
    --medio-fondo: #2e2810;
    --mal: #f0a58a;
    --mal-fondo: #3a1a12;
    --boton: #fefeea;
    --boton-texto: #07110d;
    --velo: rgb(7 17 13 / .9);
    --nr-tinta: #a9d89c;
    --ti-tinta: #ecd98b;
    --bi-tinta: #f0c75e;
    --di-tinta: #c4b5f0;
    --fo-tinta: #ffb36b;
    --hd-tinta: #d8b26a;
    --ac-tinta: #ff9b85;
    --sombra-1: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -18px rgb(0 0 0 / .7);
    --sombra-2: 0 2px 6px rgb(0 0 0 / .45), 0 28px 56px -28px rgb(0 0 0 / .8);
  }
  :root:not([data-tema="claro"]) .tema-claro { color-scheme: light; }
}
:root[data-tema="oscuro"],
.tema-oscuro {
  color-scheme: dark;
  --fondo: #07110d;
  --fondo-2: #0b1813;
  --sup: #0f1d17;
  --sup-2: #13241c;
  --sup-3: #1b2f26;
  --borde: #1f3329;
  --borde-2: #2e4a3c;
  --borde-campo: #7b9587;
  --texto: #f3f1e1;
  --texto-2: #c5cdbf;
  --texto-3: #9eab9f;
  --enlace: #a9d89c;
  --foco: #e2c35a;
  --oro-texto: #e2c35a;
  --oro-fondo: #2a2510;
  --rojo: #f2a08a;
  --rojo-fondo: #3a1a12;
  --ok: #8fd48a;
  --ok-fondo: #11301c;
  --medio: #e6c35c;
  --medio-fondo: #2e2810;
  --mal: #f0a58a;
  --mal-fondo: #3a1a12;
  --boton: #fefeea;
  --boton-texto: #07110d;
  --velo: rgb(7 17 13 / .9);
  --nr-tinta: #a9d89c;
  --ti-tinta: #ecd98b;
  --bi-tinta: #f0c75e;
  --di-tinta: #c4b5f0;
  --fo-tinta: #ffb36b;
  --hd-tinta: #d8b26a;
  --ac-tinta: #ff9b85;
  --sombra-1: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -18px rgb(0 0 0 / .7);
  --sombra-2: 0 2px 6px rgb(0 0 0 / .45), 0 28px 56px -28px rgb(0 0 0 / .8);
}
.tema-claro { color-scheme: light; }


/* ---------- Marca, series, tipografía y espacio ---------- */
:root {
  /* Marca fija (no cambia con el modo) */
  --noche: #07110d;
  --crema: #fefeea;
  --oro: #c9a227;
  --oro-claro: #e2c35a;
  --verde-marca: #278664;
  --verde-claro: #a9d89c;
  --yt: #ff0033;              /* solo el logo de YouTube dentro de los botones */

  /* Acento de la página: lo cambia [data-serie] */
  --acento: var(--verde-marca);
  --acento-tinta: var(--nr-tinta);

  /* Tipos */
  --sans: "Inter Tight", "Inter Tight Respaldo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "Geist Mono Respaldo", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-mono: 0.8125rem;                                    /* 13 px: mínimo absoluto */
  --t-s: 0.9375rem;                                       /* 15 px */
  --t-base: 1.0625rem;                                    /* 17 px móvil · 18 px escritorio */
  --t-l: 1.25rem;                                         /* 20 px */
  --t-xl: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);      /* 22 a 28 px */
  --t-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);         /* 20 a 24 px */
  --t-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);        /* 28 a 44 px */
  --t-h1: clamp(2.125rem, 1.35rem + 3.4vw, 4.25rem);      /* 34 a 68 px */
  --t-mega: clamp(2.75rem, 1.4rem + 6vw, 6.5rem);         /* 44 a 104 px */
  --t-cifra: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);       /* 40 a 72 px, peso 300 */

  /* Espacio (base 4 px) */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;
  --seccion: clamp(3rem, 2.2rem + 3.2vw, 5.5rem);
  --hueco: clamp(0.875rem, 0.6rem + 1vw, 1.5rem);

  /* Retícula */
  --ancho: 78rem;            /* 1.248 px */
  --ancho-texto: 35rem;      /* 560 px: 65-75 caracteres a 18 px */
  --lado: 1rem;              /* 16 px de margen en móvil */
  --cab: 3.5rem;             /* alto de la cabecera fija */

  /* Radios y movimiento */
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-p: 999px;
  --rapido: 160ms; --suave: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 48rem) { :root { --lado: 2rem; } }
@media (min-width: 64rem) { :root { --t-base: 1.125rem; --cab: 4rem; } }

/* Series: acento decorativo fijo + texto de acento según el modo */
[data-serie="numeros"]     { --acento: #278664; --acento-tinta: var(--nr-tinta); }
[data-serie="titanes"]     { --acento: #1c4332; --acento-tinta: var(--ti-tinta); }
[data-serie="biblioteca"]  { --acento: #e6b33a; --acento-tinta: var(--bi-tinta); }
[data-serie="diccionario"] { --acento: #7e69ac; --acento-tinta: var(--di-tinta); }
[data-serie="fortunas"]    { --acento: #ffd23f; --acento-tinta: var(--fo-tinta); }
[data-serie="historias"]   { --acento: #d8b26a; --acento-tinta: var(--hd-tinta); }
[data-serie="actualidad"]  { --acento: #c8102e; --acento-tinta: var(--ac-tinta); }
[data-serie="shorts"]      { --acento: #c9a227; --acento-tinta: var(--oro-texto); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cab) + 1rem);
}
body {
  margin: 0; min-height: 100vh;
  background: var(--fondo); color: var(--texto);
  font: 400 var(--t-base)/1.6 var(--sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--enlace); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; font-weight: 760; letter-spacing: -0.024em; word-spacing: .03em; line-height: 1.08; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.25em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--oro) 45%, transparent); }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.envol { width: min(100% - 2 * var(--lado), var(--ancho)); margin-inline: auto; }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.saltar {
  position: absolute; left: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; border-radius: var(--r-2);
  background: var(--boton); color: var(--boton-texto); font-weight: 650; text-decoration: none;
}
.saltar:focus { top: .75rem; }

/* ---------- Iconos (sprite externo img/iconos.svg, Tabler MIT) ---------- */
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--s { width: 1em; height: 1em; }
.ico--l { width: 1.75rem; height: 1.75rem; }
.ico-relleno { fill: currentColor; stroke: none; }
.yt-logo { width: 1.5em; height: 1.07em; flex: none; }
.yt-logo rect { fill: var(--yt); }
.yt-logo path { fill: #fff; }

/* ---------- Piezas de texto ---------- */
.antetitulo {
  display: flex; align-items: center; gap: .6em; margin: 0 0 var(--e-3);
  font: 550 var(--t-mono)/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--texto-2);
}
.antetitulo::before { content: ""; width: .55em; height: .55em; flex: none; border-radius: 2px; background: var(--acento); }
.antetitulo--sin::before { display: none; }
.titular { font-size: var(--t-h1); font-weight: 780; letter-spacing: -0.032em; word-spacing: .04em; line-height: 1.02; }
.titular-2 { font-size: var(--t-h2); letter-spacing: -0.032em; line-height: 1.04; }
.entradilla { font-size: clamp(1.125rem, 1.02rem + .45vw, 1.3125rem); line-height: 1.5; color: var(--texto-2); max-width: 40rem; }
.subrayado { background: linear-gradient(transparent 82%, color-mix(in srgb, var(--oro) 70%, transparent) 82% 94%, transparent 94%); padding-inline: .02em; }
.resalte { color: var(--acento-tinta); }
.meta { font: 500 var(--t-mono)/1.45 var(--mono); letter-spacing: .02em; color: var(--texto-3); }
.cifra {
  display: block; font-weight: 300; font-size: var(--t-cifra); line-height: .95; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums; color: var(--acento-tinta);
}
.enlace-flecha { display: inline-flex; align-items: center; gap: .4em; font-weight: 650; color: var(--acento-tinta); text-decoration: none; }
.enlace-flecha:hover { text-decoration: underline; }
.enlace-flecha .ico { transition: transform var(--rapido) var(--suave); }
.enlace-flecha:hover .ico { transform: translateX(3px); }

/* Sello de serie: dos letras, el «logo» de cada serie en tarjetas, filas y agenda */
.sello {
  display: inline-grid; place-items: center; flex: none; width: 1.875rem; height: 1.875rem; border-radius: 7px;
  font: 700 .75rem/1 var(--mono); letter-spacing: 0;
  background: var(--sello-fondo, var(--noche)); color: var(--sello-tinta, var(--oro-claro));
  box-shadow: inset 0 0 0 1px var(--sello-borde, transparent);
}
.agenda__serie .sello, .etiqueta .sello, .horario .sello, .cita-serie .sello { font-size: .75rem; }
.fila[data-piel] .fila__marca .sello, .tema-oscuro .sello[data-serie="numeros"], .tema-oscuro .sello[data-serie="titanes"], .tema-oscuro .sello[data-serie="historias"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sello-tinta) 70%, transparent); }
.sello[data-serie="numeros"]     { --sello-fondo: #07110d; --sello-tinta: #e2c35a; }
.sello[data-serie="titanes"]     { --sello-fondo: #1c4332; --sello-tinta: #ecd98b; }
.sello[data-serie="biblioteca"]  { --sello-fondo: #e6b33a; --sello-tinta: #18261f; }
.sello[data-serie="diccionario"] { --sello-fondo: #7e69ac; --sello-tinta: #ffffff; }
.sello[data-serie="fortunas"]    { --sello-fondo: #ffd23f; --sello-tinta: #211b15; --sello-borde: #211b15; }
.sello[data-serie="historias"]   { --sello-fondo: #120e0a; --sello-tinta: #d8b26a; --sello-borde: #4a3b26; }
.sello[data-serie="actualidad"]  { --sello-fondo: #b42318; --sello-tinta: #ffffff; }
.sello[data-serie="shorts"]      { --sello-fondo: #c9a227; --sello-tinta: #07110d; }

/* ---------- Botones, chips y etiquetas ---------- */
.botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .75rem 1.3rem; border-radius: var(--r-p); border: 1.5px solid transparent;
  background: var(--boton); color: var(--boton-texto);
  font: 680 1rem/1.1 var(--sans); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  transition: transform var(--rapido) var(--suave), background-color var(--rapido), box-shadow var(--rapido);
}
.boton:hover { transform: translateY(-1px); box-shadow: var(--sombra-1); }
.boton--linea { background: transparent; color: var(--texto); border-color: var(--borde-campo); }
.boton--linea:hover { background: var(--sup); }
.boton--oro { background: var(--oro); color: var(--noche); }
.boton--s { min-height: 44px; padding: .6rem 1rem; font-size: .9375rem; }
.boton--bloque { width: 100%; }
.boton-icono {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
  border: 1px solid var(--borde-2); background: transparent; color: var(--texto); text-decoration: none;
}
.boton-icono:hover { background: var(--sup); }
.chip {
  display: inline-flex; align-items: center; gap: .45em; min-height: 40px; padding: .45rem .95rem; border-radius: var(--r-p);
  border: 1px solid var(--borde-2); background: var(--sup); color: var(--texto); text-decoration: none;
  font: 600 .9375rem/1.1 var(--sans); white-space: nowrap;
}
.chip:hover { border-color: var(--borde-campo); }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--boton); color: var(--boton-texto); border-color: var(--boton); }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--e-5); padding: 0; list-style: none; }
.chip__n { font: 600 var(--t-mono)/1 var(--mono); color: inherit; opacity: 1; }
.etiqueta {
  display: inline-flex; align-items: center; gap: .4em; width: fit-content; padding: .3em .65em; border-radius: var(--r-p);
  font: 650 .75rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  background: var(--sup-2); color: var(--texto-2);
}
.etiqueta--oro { background: var(--oro); color: var(--noche); }
.etiqueta--vivo::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--yt); }
.avisame {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .45rem .9rem; border-radius: var(--r-p);
  border: 1px solid var(--borde-campo); color: var(--texto); background: transparent; text-decoration: none;
  font: 650 .875rem/1 var(--sans); white-space: nowrap;
}
.avisame:hover { background: var(--sup); }

/* ---------- Cabecera ---------- */
.cab {
  position: sticky; top: 0; z-index: 60; height: var(--cab);
  background: var(--velo); border-bottom: 1px solid var(--borde);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
}
.cab__fila { display: flex; align-items: center; gap: var(--e-3); height: 100%; }
.marca { display: inline-flex; align-items: center; gap: .55rem; margin-right: auto; color: var(--texto); text-decoration: none; min-width: 0; }
.marca__logo { width: 2.75rem; height: 2.75rem; flex: none; } /* 44 px: a este tamaño se leen la T y la D */
.marca__nombre { display: grid; font-weight: 790; font-size: 1.0625rem; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.marca__nombre span { font-weight: 450; font-size: .8125rem; letter-spacing: -0.01em; margin-top: .1rem; }
@media (min-width: 30rem) { .marca__nombre { display: block; } .marca__nombre span { font-size: inherit; letter-spacing: inherit; margin: 0; } }
.nav { display: none; }
.nav__lista { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.nav__lista > li > a, .nav__lista summary {
  display: inline-flex; align-items: center; gap: .3em; padding: .55rem .8rem; border-radius: var(--r-p);
  color: var(--texto); text-decoration: none; font-weight: 580; font-size: .96875rem; cursor: pointer; list-style: none;
}
.nav__lista summary::-webkit-details-marker { display: none; }
.nav__lista > li > a:hover, .nav__lista summary:hover, .nav__lista details[open] > summary { background: var(--sup-2); }
.nav__lista a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--oro); border-radius: 0; }
.nav details { position: relative; }
.nav summary .ico { transition: transform var(--rapido); }
.nav details[open] summary .ico { transform: rotate(180deg); }
.megamenu {
  position: absolute; top: calc(100% + .6rem); left: -1rem; width: min(46rem, calc(100vw - 4rem));
  padding: var(--e-4); border-radius: var(--r-4); background: var(--sup); border: 1px solid var(--borde);
  box-shadow: var(--sombra-2); display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
}
.megamenu--estrecho { width: 22rem; grid-template-columns: 1fr; }
.megamenu a {
  display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; align-items: center; padding: .7rem .8rem;
  border-radius: var(--r-3); color: var(--texto); text-decoration: none;
}
.megamenu a:hover { background: var(--sup-2); }
.megamenu b { font-weight: 680; font-size: 1rem; line-height: 1.2; }
.megamenu small { grid-column: 2; color: var(--texto-3); font: 500 var(--t-mono)/1.35 var(--mono); }
.megamenu .sello { grid-row: span 2; }
.cab__acciones { display: flex; align-items: center; gap: var(--e-2); }
.buscador-cab { display: none; position: relative; }
.buscador-cab .ico { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.buscador-cab input {
  width: 13.5rem; height: 44px; padding: 0 1rem 0 2.6rem; border-radius: var(--r-p);
  border: 1.5px solid var(--borde-campo); background: var(--sup); font-size: .9375rem;
}
.buscador-cab input::placeholder { color: var(--texto-3); }
.boton--sub { min-height: 44px; padding: .55rem 1rem .55rem .8rem; font-size: .9375rem; }
.desplegable { position: static; }
.desplegable > summary { list-style: none; }
.desplegable > summary::-webkit-details-marker { display: none; }
/* Menú móvil. La hamburguesa se convierte en X y vuelve (las rayas giran y la del medio se recoge); el panel ocupa la
   pantalla bajo la cabecera, entra deslizando con un fundido y su contenido aparece escalonado; al cerrar sale
   animado antes de que el <details> se cierre (titanes.js: clases .esta-abierto y .cerrando). La página de detrás no
   se desplaza y el aviso de cookies queda debajo. Con «reducir movimiento», todo sin animación. */
:root { --curva-menu: cubic-bezier(.22, 1, .36, 1); --curva-menu-sale: cubic-bezier(.4, 0, .2, 1); }
.hamburguesa__rayas { position: relative; display: block; width: 20px; height: 14px; }
.hamburguesa__rayas i {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .42s var(--curva-menu), top .42s var(--curva-menu), opacity .2s ease, width .42s var(--curva-menu);
}
.hamburguesa__rayas i:nth-child(1) { top: 0; }
.hamburguesa__rayas i:nth-child(2) { top: 6px; width: 72%; }
.hamburguesa__rayas i:nth-child(3) { top: 12px; }
.hamburguesa:hover .hamburguesa__rayas i:nth-child(2) { width: 100%; }
.esta-abierto > .hamburguesa .hamburguesa__rayas i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.esta-abierto > .hamburguesa .hamburguesa__rayas i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.esta-abierto > .hamburguesa .hamburguesa__rayas i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.hamburguesa { transition: background-color .25s ease, border-color .25s ease, transform .2s ease; }
.hamburguesa:active { transform: scale(.94); }
.esta-abierto > .hamburguesa { background: var(--sup); border-color: var(--borde-campo); }
/* Solo en <html>: si el body también lleva overflow:hidden, se convierte en el contenedor de la cabecera sticky y,
   a media página, la cabecera y el menú se van al principio del documento (fuera de la pantalla). */
@media (max-width: 63.99rem) { html.con-panel { overflow: hidden; } }
html.con-panel .aviso { z-index: 50; }
.panel-movil {
  position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--cab)); height: calc(100dvh - var(--cab)); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--e-4) var(--lado) var(--e-6); background: var(--fondo); border-bottom: 1px solid var(--borde-2); box-shadow: var(--sombra-2);
  opacity: 0; transform: translateY(-12px); clip-path: inset(0 0 100% 0);
  /* Salida: el panel sube recogiéndose de abajo arriba con el contenido a la vista y se desvanece al final. */
  transition: clip-path .38s var(--curva-menu-sale), transform .38s var(--curva-menu-sale), opacity .16s linear .24s;
}
.esta-abierto > .panel-movil {
  opacity: 1; transform: none; clip-path: inset(0 0 0 0);
  transition: opacity .16s linear, transform .5s var(--curva-menu), clip-path .5s var(--curva-menu);
}
.panel-movil > *, .panel-movil li { opacity: 0; transform: translateY(10px); transition: opacity .15s ease, transform .15s ease; }
.esta-abierto > .panel-movil > *, .esta-abierto > .panel-movil li {
  opacity: 1; transform: none;
  transition: opacity .4s ease calc(70ms + var(--i, 0) * 28ms), transform .55s var(--curva-menu) calc(70ms + var(--i, 0) * 28ms);
}
.panel-movil ul { opacity: 1; transform: none; }
/* Al cerrar, el contenido no se apaga antes que el panel: sale con él. */
.cerrando > .panel-movil > *, .cerrando > .panel-movil li { opacity: 1; transform: none; transition: none; }
.panel-movil li a { transition: color .2s ease, padding-left .3s var(--curva-menu); }
.panel-movil li a:hover, .panel-movil li a:focus-visible { padding-left: .35rem; }
@media (prefers-reduced-motion: reduce) {
  .hamburguesa__rayas i, .panel-movil, .esta-abierto > .panel-movil, .panel-movil > *, .panel-movil li, .esta-abierto > .panel-movil > *, .esta-abierto > .panel-movil li, .panel-movil li a { transition: none; }
}
.panel-movil__titulo { margin: var(--e-5) 0 var(--e-2); font: 600 var(--t-mono)/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--texto-3); }
.panel-movil ul { list-style: none; margin: 0; padding: 0; display: grid; }
.panel-movil li a {
  display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .4rem 0;
  color: var(--texto); text-decoration: none; font-weight: 600; font-size: 1.0625rem; border-bottom: 1px solid var(--borde);
}
.panel-movil .temas-modo { margin-top: var(--e-5); }
.buscador { position: relative; display: flex; align-items: center; gap: .5rem; }
.buscador input {
  flex: 1; min-width: 0; height: 52px; padding: 0 1rem 0 2.9rem; border-radius: var(--r-p);
  border: 1.5px solid var(--borde-campo); background: var(--sup); font-size: 1.0625rem;
}
.buscador > .ico { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.sugerencias { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--e-3); }
.sugerencias a { font-size: .9375rem; }
/* Solo el de la cabecera (lleva aria-label) se queda en icono por debajo de 360 px; los demás conservan el texto. */
@media (max-width: 22.49rem) { .cab .boton--sub span:not(.vh) { display: none; } .cab .boton--sub { padding: .55rem .7rem; } }
@media (min-width: 64rem) {
  .nav { display: block; }
  .buscador-cab { display: block; }
  .solo-movil { display: none !important; }
  .marca__nombre { font-size: 1.125rem; }
}
@media (min-width: 80rem) { .buscador-cab input { width: 16rem; } }
@media (max-width: 63.99rem) { .solo-escritorio { display: none !important; } }

/* Raíl de series (debajo de la cabecera, no fijo) */
.rail { border-bottom: 1px solid var(--borde); }
.rail__pista {
  display: flex; gap: .5rem; overflow-x: auto; padding-block: .65rem; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 3rem), transparent);
}
.rail__pista::-webkit-scrollbar { display: none; }
.chip-serie {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .3rem .95rem .3rem .3rem; border-radius: var(--r-p);
  border: 1px solid var(--borde-2); background: var(--sup); color: var(--texto); text-decoration: none;
  font: 620 .9375rem/1 var(--sans); white-space: nowrap;
}
.chip-serie .sello { width: 1.75rem; height: 1.75rem; border-radius: 50%; }
.chip-serie:hover { border-color: var(--borde-campo); }
.chip-serie[aria-current="page"] { border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); }
@media (min-width: 80rem) { .rail__pista { -webkit-mask-image: none; mask-image: none; } }

/* ---------- Secciones ---------- */
.seccion { padding-block: var(--seccion); }
.seccion--2 { background: var(--fondo-2); }
.seccion--ajustada { padding-block: calc(var(--seccion) * .6); }
.cab-seccion { display: grid; gap: var(--e-3) var(--e-6); padding-top: var(--e-4); margin-bottom: var(--e-6); border-top: 2px solid var(--texto); }
.cab-seccion h2 { font-size: var(--t-h2); letter-spacing: -0.032em; }
.cab-seccion p { color: var(--texto-2); max-width: 40rem; margin: var(--e-3) 0 0; }
.cab-seccion .antetitulo { margin: .35rem 0 0; }
.cab-seccion__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
@media (min-width: 64rem) {
  .cab-seccion { grid-template-columns: 13rem minmax(0, 1fr) auto; align-items: start; }
  .cab-seccion__acciones { justify-content: flex-end; padding-top: .5rem; }
}

/* Pantalla: miniatura real + barra de reproductor. Nada se pinta encima de la miniatura. */
.pantalla { display: block; overflow: hidden; border-radius: var(--r-3); background: var(--noche); color: var(--crema); text-decoration: none; }
.pantalla img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s var(--suave); }
.pantalla:hover img { transform: scale(1.02); }
.barra-video {
  display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .5rem .75rem .5rem .5rem;
  background: var(--noche); color: var(--crema); font: 600 .875rem/1.2 var(--sans);
}
.barra-video__play {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%;
  background: var(--oro); color: var(--noche);
}
.barra-video__play svg { width: 1rem; height: 1rem; margin-left: 2px; fill: currentColor; }
.barra-video__linea { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgb(254 254 234 / .22); min-width: 2rem; }
.barra-video__linea i { position: absolute; top: -3px; width: 2px; height: 10px; border-radius: 1px; background: var(--oro-claro); }
.barra-video__dur { font: 600 var(--t-mono)/1 var(--mono); color: #e9e7cf; font-variant-numeric: tabular-nums; }
.pantalla:hover .barra-video__play, .pantalla:focus-visible .barra-video__play { background: var(--oro-claro); }
.barra-video__yt { display: inline-flex; align-items: center; gap: .4rem; font: 650 .875rem/1 var(--sans); color: var(--crema); }
.vivo { width: .55rem; height: .55rem; flex: none; border-radius: 50%; background: var(--yt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--yt) 25%, transparent); }
.etiqueta .sello { width: 1.375rem; height: 1.375rem; border-radius: 4px; }
.etiqueta:has(.sello) { padding: .2em .65em .2em .25em; text-transform: none; letter-spacing: .02em; font-size: .8125rem; color: var(--texto); }

/* ---------- Filas de serie (portada y hubs) ---------- */
.fila { padding-block: clamp(2.5rem, 1.8rem + 2.4vw, 4rem); }
/* Dos filas sin piel seguidas comparten el hueco; detrás de una fila con piel, la siguiente conserva su margen. */
.fila:not([data-piel]) + .fila:not([data-piel]) { padding-top: 0; }
.fila__cab { display: grid; gap: var(--e-4); margin-bottom: var(--e-5); }
.fila__marca { display: flex; align-items: center; gap: .6rem; margin: 0 0 var(--e-2); }
.fila__marca .antetitulo { margin: 0; }
.fila__marca .antetitulo::before { display: none; }
.fila__titulo { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); letter-spacing: -0.034em; }
.fila__titulo a { color: inherit; text-decoration: none; }
.fila__titulo a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.fila__desc { margin: var(--e-2) 0 0; color: var(--texto-2); max-width: 42rem; }
.fila__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.flechas { display: none; gap: .5rem; }
.flechas button {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--borde-2); background: var(--sup); color: var(--texto);
}
.flechas button:disabled { opacity: .45; cursor: default; }
/* Si la pista no desliza (las dos flechas desactivadas: una fila de uno o dos vídeos), las flechas no se ven; ocupan su
   sitio para que nada se mueva al cargar (CLS 0). */
.flechas:has(> [data-prev]:disabled):has(> [data-next]:disabled) { visibility: hidden; }
@media (min-width: 64rem) {
  .fila__cab { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .flechas { display: flex; }
}
.pista {
  --cols: 1.25;
  display: grid; grid-auto-flow: column; gap: var(--hueco);
  grid-auto-columns: calc((100% - (var(--cols) - .25) * var(--hueco)) / var(--cols));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: .25rem max(var(--lado), calc((100% - var(--ancho)) / 2)) var(--e-4);
  scroll-padding-inline: max(var(--lado), calc((100% - var(--ancho)) / 2));
  scrollbar-width: none; /* sin barra: las flechas, el dedo, la rueda y el teclado la mueven */
}
.pista::-webkit-scrollbar { display: none; }
.pista > * { scroll-snap-align: start; min-width: 0; }
.pista:focus-visible { outline-offset: -3px; }
.pista--vertical { --cols: 2.3; }
@media (min-width: 40rem) { .pista { --cols: 2.3; } .pista--vertical { --cols: 3.3; } }
@media (min-width: 64rem) { .pista { --cols: 4.25; } .pista--vertical { --cols: 6.25; } .pista--ancha { --cols: 2.6; } }

/* Tarjeta de vídeo: miniatura limpia + barra de reproductor debajo */
.tv { display: grid; align-content: start; gap: .55rem; }
.tv__enlace { display: grid; gap: .7rem; color: inherit; text-decoration: none; }
.tv__pantalla { overflow: hidden; border-radius: var(--r-3); background: var(--noche); box-shadow: var(--sombra-1); }
.tv__pantalla img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s var(--suave); }
.tv--vertical .tv__pantalla img { aspect-ratio: 9 / 16; }
/* Short sin miniatura vertical: la 16:9 entera sobre su copia difuminada (sin recortar el texto de la miniatura) */
.tv__apaisada { position: relative; display: grid; align-items: center; aspect-ratio: 9 / 16; overflow: hidden; background: var(--noche); }
.tv--vertical .tv__apaisada > img { position: relative; aspect-ratio: 16 / 9; object-fit: contain; box-shadow: 0 10px 24px -10px #000; }
.tv__difuso { position: absolute; inset: 0; }
.tv--vertical .tv__difuso img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; filter: blur(14px) brightness(.5) saturate(1.2); transform: scale(1.25); }
.tv__enlace:hover .tv__difuso img { transform: scale(1.25); }
.tv__barra {
  display: flex; align-items: center; gap: .5rem; height: 2.125rem; padding: 0 .7rem;
  background: var(--noche); color: #e9e7cf; font: 600 var(--t-mono)/1 var(--mono); font-variant-numeric: tabular-nums;
}
.tv__barra svg { width: .7rem; height: .7rem; fill: var(--oro-claro); flex: none; }
.tv__barra .tv__estado { margin-left: auto; color: var(--oro-claro); text-transform: uppercase; letter-spacing: .05em; }
.tv__titulo { font-size: 1.0625rem; font-weight: 680; line-height: 1.28; letter-spacing: -0.012em; }
/* La línea de serie o tema y fecha va entre la miniatura y el título: todo arranca a la misma altura en la fila.
   El título, como mucho 3 líneas. */
.tv__titulo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.tv__enlace > .tv__meta { display: block; margin: -.2rem 0 -.35rem; }

.tv__enlace:hover .tv__titulo { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .15em; }
.tv__enlace:hover img { transform: scale(1.035); }
.tv__meta { margin: 0; font: 500 var(--t-mono)/1.45 var(--mono); color: var(--texto-3); }

/* Barra de veredictos de un libro (Biblioteca): siempre con el recuento en texto */
.vbarra { display: grid; gap: .35rem; }
.vbarra__seg { display: flex; height: .5rem; border-radius: 3px; overflow: hidden; gap: 2px; }
.vbarra__seg i { display: block; height: 100%; }
.v-acierta { background: #2f8a57; }
.v-medias { background: #d7a21f; }
.v-falla { background: #c4452c; }
.vbarra__txt { margin: 0; font: 600 .8125rem/1.3 var(--mono); }
.fila[data-piel="mostaza"] .v-medias { background: #8a6200; }

/* ---------- Cabecera de serie (hubs). Cada serie la viste en su serie-*.css ---------- */
.cab-serie { padding-block: var(--e-5) clamp(2.5rem, 1.6rem + 3vw, 4.5rem); }
.cab-serie .migas { margin-bottom: var(--e-5); }
.cab-serie__rejilla { display: grid; gap: var(--e-6); align-items: end; }
.cab-serie h1 { font-size: var(--t-h1); font-weight: 790; letter-spacing: -0.034em; word-spacing: .05em; line-height: 1; margin-bottom: var(--e-4); }
.cab-serie .entradilla { color: inherit; opacity: 1; margin-bottom: var(--e-5); }
.cab-serie__datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); margin: 0; padding: 0; list-style: none; }
.cab-serie__datos li { padding-top: .6rem; border-top: 2px solid currentColor; }
.cab-serie__datos b { display: block; font: 300 clamp(2rem, 1.6rem + 1.6vw, 3rem)/1 var(--sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.cab-serie__datos span { display: block; margin-top: .4rem; font-size: .9375rem; line-height: 1.35; }
@media (min-width: 64rem) { .cab-serie__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 5rem); } }

/* Bloque de apartado con su cabecera (fichas) */
.apartado { scroll-margin-top: calc(var(--cab) + 1.25rem); }
.apartado + .apartado { margin-top: var(--e-7); }
.apartado > h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); letter-spacing: -0.028em; margin-bottom: var(--e-4); }

/* ---------- Migas ---------- */
.migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; font: 500 var(--t-mono)/1.4 var(--mono); color: var(--texto-3); }
.migas li + li::before { content: "/"; margin-right: .5rem; color: var(--borde-campo); }
.migas a { color: var(--texto-2); text-decoration: none; display: inline-block; padding-block: .3rem; }
.migas a:hover { color: var(--texto); text-decoration: underline; }
.migas [aria-current] { color: var(--texto-2); }

.rejilla-2 { display: grid; gap: var(--hueco); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.rejilla-3 { display: grid; gap: var(--hueco); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* ---------- Suscripción ---------- */
.sub-caja {
  display: grid; gap: var(--e-4); margin-block: 2.5em; padding: var(--e-5); border-radius: var(--r-3);
  background: var(--sup); border: 1px solid var(--borde-2); box-shadow: inset 4px 0 0 var(--oro);
}
.sub-caja__cab { display: flex; align-items: center; gap: .9rem; }
.sub-caja__cab .yt-logo { width: 2.5rem; height: 1.8rem; }
.sub-caja__cab p { margin: 0; font-weight: 720; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.015em; }
.sub-caja > p { margin: 0; color: var(--texto-2); font-size: 1rem; }
.sub-caja .botones { gap: .6rem; }
.banda-sub { background: var(--noche); color: var(--texto); padding-block: var(--seccion); }
.banda-sub__rejilla { display: grid; gap: var(--e-6); align-items: center; }
.banda-sub h2 { font-size: var(--t-h2); letter-spacing: -0.035em; }
.banda-sub h2 em { font-style: normal; color: var(--oro-claro); }
.banda-sub p { color: var(--texto-2); max-width: 36rem; margin: var(--e-4) 0 var(--e-5); }
.banda-sub small { display: block; margin-top: var(--e-4); font: 500 var(--t-mono)/1.4 var(--mono); color: var(--texto-3); }
.horario { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--borde-2); }
.horario li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--borde-2); }
.horario .sello { width: 1.75rem; height: 1.75rem; }
.horario b { font-weight: 650; }
.horario__cuando { font: 600 var(--t-mono)/1.3 var(--mono); color: var(--texto-2); text-align: right; }
@media (min-width: 64rem) { .banda-sub__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); } }

/* ---------- Sigue viendo (como la pantalla final del vídeo) ---------- */
.sigue { display: grid; gap: var(--hueco); align-items: start; }
@media (min-width: 64rem) {
  .sigue { grid-template-columns: minmax(0, 6fr) minmax(0, 2.2fr) minmax(0, 3.8fr); }
  .sigue--termino { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
}
.lista-yt__pila--cartel { display: grid; place-items: center; height: 4.6rem; border-radius: 6px; background: #fbfaff; box-shadow: inset 0 0 0 1px #e1dbef; }
.lista-yt__pila--cartel svg { width: 3rem; height: 3rem; }
.sigue__col { display: grid; gap: var(--hueco); align-content: start; }
.sigue__etiqueta { margin: 0 0 .6rem; font: 650 var(--t-mono)/1.2 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--texto-2); }
.proximo {
  display: grid; align-content: start; gap: var(--e-5); padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--r-3);
  background: var(--noche); color: var(--texto); aspect-ratio: auto;
}
.proximo__cuando { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin: 0; }
.proximo__cuando b { font: 300 clamp(2rem, 1.6rem + 1.6vw, 2.75rem)/1 var(--sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.proximo__cuando span { font: 600 var(--t-mono)/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--oro-claro); }
.proximo h3 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); letter-spacing: -0.03em; }
.proximo p { margin: 0; color: var(--texto-2); }
/* La entrada del próximo estreno, como un avance: cuatro líneas como mucho (algunas descripciones son de un párrafo) */
.proximo .proximo__texto { margin-top: .5rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.proximo .avisame { color: var(--texto); border-color: var(--borde-campo); }
.lista-yt { display: grid; grid-template-columns: 7.5rem 1fr; gap: .9rem; align-items: center; padding: var(--e-3); border-radius: var(--r-3); background: var(--sup); border: 1px solid var(--borde); color: var(--texto); text-decoration: none; }
.lista-yt:hover { border-color: var(--borde-campo); }
.lista-yt__pila { position: relative; height: 4.6rem; }
.lista-yt__pila img { position: absolute; width: 6.6rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 2px var(--sup), var(--sombra-1); }
.lista-yt__pila img:nth-child(1) { left: .9rem; top: 0; opacity: .55; }
.lista-yt__pila img:nth-child(2) { left: .45rem; top: .45rem; opacity: .8; }
.lista-yt__pila img:nth-child(3) { left: 0; top: .9rem; }
.lista-yt__txt b { display: block; font-size: 1.0625rem; line-height: 1.25; }
.lista-yt__txt small, .anterior__txt small { display: flex; align-items: center; gap: .35rem; margin-top: .2rem; font: 500 var(--t-mono)/1.4 var(--mono); color: var(--texto-3); }
.anterior__txt small { margin: 0 0 .2rem; }
.anterior { display: grid; grid-template-columns: 7.5rem 1fr; gap: .9rem; align-items: center; color: var(--texto); text-decoration: none; }
.anterior img { border-radius: var(--r-2); aspect-ratio: 16 / 9; object-fit: cover; }
.anterior b { display: block; font-size: 1rem; line-height: 1.3; }
.anterior:hover b { text-decoration: underline; }

/* ---------- Pie ---------- */
.pie { background: var(--noche); color: var(--texto); padding-block: var(--e-8) var(--e-6); border-top: 1px solid var(--borde); }
.pie__rejilla { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.pie__marca { grid-column: 1 / -1; max-width: 28rem; }
/* En el móvil, los cuatro grupos de enlaces en dos columnas (antes, uno debajo de otro: 1.400 px de pie) */
@media (max-width: 63.99rem) { .pie__rejilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); column-gap: var(--e-5); } }
@media (min-width: 64rem) { .pie__rejilla { grid-template-columns: 1.6fr repeat(4, 1fr); } .pie__marca { grid-column: auto; } }
.pie__marca p { color: var(--texto-2); font-size: .9375rem; margin: var(--e-4) 0; }
.pie__titulo { margin: 0 0 var(--e-3); font: 650 var(--t-mono)/1.2 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--texto-2); }
.pie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.pie ul a { display: inline-block; padding: .35rem 0; color: var(--texto); text-decoration: none; font-size: .96875rem; }
.pie ul a:hover { text-decoration: underline; }
.redes { display: flex; gap: .5rem; }
.redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--borde-2); color: var(--texto); }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-4); margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid var(--borde); font-size: .875rem; color: var(--texto-2); }
.pie__legal p { margin: 0; }
/* Con la barra fija de abajo (móvil), el hueco para que no tape el final lo pone el pie oscuro, no el body: así no
   queda una franja crema entre el pie y la barra, mida lo que mida la barra. */
@media (max-width: 63.99rem) {
  body.con-barra-movil { padding-bottom: 0; }
  body.con-barra-movil .pie { padding-bottom: calc(var(--e-6) + 4.25rem + env(safe-area-inset-bottom)); }
}
/* En el menú móvil con modo oscuro, los sellos con fondo casi negro (NR, LT, HD) se pierden contra el panel: borde. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .panel-movil .sello:is([data-serie="numeros"], [data-serie="titanes"], [data-serie="historias"], [data-serie="dinerolocos"], [data-serie="franquicias"]) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sello-tinta) 70%, transparent); }
}
:root[data-tema="oscuro"] .panel-movil .sello:is([data-serie="numeros"], [data-serie="titanes"], [data-serie="historias"], [data-serie="dinerolocos"], [data-serie="franquicias"]) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sello-tinta) 70%, transparent); }
.temas-modo { display: inline-flex; padding: 3px; border-radius: var(--r-p); border: 1px solid var(--borde-2); gap: 2px; }
.temas-modo button { min-height: 40px; padding: 0 .9rem; border: 0; border-radius: var(--r-p); background: transparent; font-weight: 620; font-size: .875rem; }
.temas-modo button[aria-pressed="true"] { background: var(--boton); color: var(--boton-texto); }

/* ---------- Aviso de cookies ---------- */
.aviso {
  position: fixed; z-index: 90; left: var(--lado); right: var(--lado); bottom: var(--lado); max-width: 27rem;
  padding: var(--e-5); border-radius: var(--r-4); background: var(--sup); border: 1px solid var(--borde-2); box-shadow: var(--sombra-2);
}
.aviso h2 { font-size: 1.125rem; letter-spacing: -0.015em; margin: 0 0 .5rem; }
.aviso p { font-size: .9375rem; color: var(--texto-2); margin: 0 0 var(--e-4); }
.aviso .botones > * { flex: 1; }
.con-barra-movil .aviso { bottom: calc(5rem + env(safe-area-inset-bottom)); }

/* ---------- Página no encontrada y buscador (plantillas sencillas) ---------- */
.vacio { padding-block: var(--e-9); text-align: left; }
.vacio .cifra { font-size: var(--t-mega); }

/* ---------- Movimiento e impresión ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print {
  .cab, .rail, .pie, .banda-sub, .barra-movil, .sub-caja, .reproductor, .capitulos, .sigue, .carril, .indice, .indice-movil, .aviso, .calc { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .cine { background: none; color: #000; padding: 0; }
  .tabla { overflow: visible; border-color: #999; background: none; }
  a { color: #000; }
}

/* ==========================================================================
   Añadidos del tema (piezas que las maquetas no necesitaban)
   ========================================================================== */
/* Dinerolocos: aún sin piel propia; sello en verde ácido sobre noche */
[data-serie="dinerolocos"] { --acento: #39d98a; --acento-tinta: var(--nr-tinta); }
.sello[data-serie="dinerolocos"] { --sello-fondo: #07110d; --sello-tinta: #7ef0b4; --sello-borde: #2e4a3c; }
/* Franquicias y Profesiones: acento y sello también fuera de su hoja (megamenú, chips y tarjetas de otras páginas).
   Los mismos valores que serie-franquicias.css y serie-profesiones.css, que se cargan solo en su hub y sus fichas. */
/* Tinta de cada una según el modo (como las --xx-tinta de los tokens) */
:root, .tema-claro { --fr-tinta: #5b3f8f; --cg-tinta: #3d6b35; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fr-tinta: #e2c35a; --cg-tinta: #9cc394; } }
:root[data-tema="oscuro"], .tema-oscuro { --fr-tinta: #e2c35a; --cg-tinta: #9cc394; }
[data-serie="franquicias"], [data-serie="franquicias"] :is(.tema-oscuro, .tema-claro) { --acento: #e2c35a; --acento-tinta: var(--fr-tinta); }
[data-serie="profesiones"], [data-serie="profesiones"] :is(.tema-oscuro, .tema-claro) { --acento: #79a471; --acento-tinta: var(--cg-tinta); }
.sello[data-serie="franquicias"] { --sello-fondo: #140c24; --sello-tinta: #e2c35a; --sello-borde: #5a4a80; }
.sello[data-serie="profesiones"] { --sello-fondo: #79a471; --sello-tinta: #0d1630; }
.cubierta[data-serie="franquicias"] { background: radial-gradient(ellipse at 50% 40%, #2a1c48 0, #140c24 70%), #140c24; color: #f3eee2; box-shadow: inset 0 0 0 1px #3d2f5e; }
.cubierta[data-serie="franquicias"] span { background: #e2c35a; color: #140c24; }
.cubierta[data-serie="profesiones"] { background: radial-gradient(ellipse at 65% 45%, #1a2a52 0, #0d1630 70%), #0d1630; color: #fefeea; box-shadow: inset 0 0 0 1px #24345a; }
.cubierta[data-serie="profesiones"] span { background: #79a471; color: #0d1630; }

/* Índice móvil: el resumen lleva un chevron que gira al abrir (antes no había nada que dijera que se despliega) */
.indice-movil > summary span { display: inline-flex; align-items: center; gap: .5rem; }
.indice-movil > summary .ico { width: 1.25rem; height: 1.25rem; color: var(--texto-2); transition: transform var(--rapido) var(--suave); }
.indice-movil[open] > summary .ico { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .indice-movil > summary .ico { transition: none; } }

/* Cubierta tipográfica de un vídeo sin miniatura pública (programado o sin fecha): nunca un play muerto */
.cubierta {
  display: grid; align-content: space-between; gap: .5rem; aspect-ratio: 16 / 9; padding: .9rem 1rem;
  background: repeating-linear-gradient(135deg, var(--sup-2) 0 10px, var(--sup-3) 10px 20px); color: var(--texto);
  box-shadow: inset 0 0 0 1px var(--borde-2);
}
.cubierta b { font: 800 clamp(1rem, .9rem + .5vw, 1.3125rem)/1.08 var(--sans); letter-spacing: -0.02em; max-width: 22ch; text-wrap: balance; }
.cubierta span { justify-self: start; padding: .3rem .55rem; border-radius: 4px; background: var(--noche); color: var(--oro-claro); font: 700 .75rem/1.2 var(--mono); letter-spacing: .04em; }
.cubierta[data-serie="biblioteca"] { background: repeating-linear-gradient(135deg, #e6b33a 0 10px, #dca630 10px 20px); color: #18261f; box-shadow: inset 0 0 0 2px rgb(24 38 31 / .5); }
.cubierta[data-serie="titanes"] { background: #1c4332 url("../img/pizarra-fondo.webp") center / cover; color: #f2f0e3; }
.cubierta[data-serie="diccionario"] { background: #fbfafe; color: #1b1530; box-shadow: inset 0 0 0 1px #e1dbef; }
.cubierta[data-serie="diccionario"] span { background: #7e69ac; color: #fff; }

/* Botón de texto (Configurar cookies en el pie) */
.boton-texto { min-height: 44px; padding: .35rem 0; border: 0; background: none; color: var(--texto); font: 500 .96875rem/1.2 var(--sans); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

/* Pieza del momento en la cabecera de un hub (la Biblioteca la pinta en mostaza en su hoja) */
.cab-serie__pieza { min-width: 0; }
.esta-noche { display: grid; gap: var(--e-3); padding: var(--e-4); border-radius: var(--r-3); background: var(--sup); border: 1px solid var(--borde-2); }
.esta-noche .meta { display: block; margin-bottom: .2rem; }
.esta-noche b { display: block; font-size: 1.0625rem; line-height: 1.25; margin-bottom: .5rem; }

/* «Sigue viendo» sin Short */
@media (min-width: 64rem) { .sigue--sin-short { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); } }
/* Vídeo ya cargado en la página: la barra deja de ofrecer el play («Viéndolo aquí», lo cambia titanes.js) */
.reproductor--activo .barra-video__play { display: none; }
/* En el móvil, el Short de la página en fila con su título (antes, 358 × 764 px: la pantalla entera) */
@media (max-width: 63.99rem) {
  .sigue__short .tv--vertical .tv__enlace { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); align-items: center; column-gap: var(--e-4); }
  .sigue__short .tv--vertical .tv__pantalla { box-shadow: inset 0 0 0 1px var(--borde-2), var(--sombra-1); }
}
/* El siguiente vídeo y, debajo, el próximo estreno en una línea */
.sigue__prox { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin: 0; padding-top: var(--e-3); border-top: 1px solid var(--borde); color: var(--texto-2); font-size: .9375rem; }
.sigue__prox span { font: 600 var(--t-mono)/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
.sigue__prox b { flex: 1 1 100%; color: var(--texto); font-weight: 650; line-height: 1.3; }

/* Páginas de texto, resultados y estados vacíos */
.pagina__cab { padding-block: var(--e-5) var(--e-6); }
.pagina__cab .migas { margin-bottom: var(--e-5); }
.pagina__cab .titular { margin-bottom: var(--e-4); }
.pagina__cab .buscador { max-width: 40rem; margin-top: var(--e-5); }
.pagina__cuerpo { padding-bottom: var(--seccion); }
.pagina__cuerpo > .prosa { max-width: 42rem; }
.vacio .titular { margin: var(--e-3) 0 var(--e-4); }
.vacio .buscador { max-width: 40rem; margin: var(--e-5) 0 var(--e-4); }
.vacio .sugerencias { margin-bottom: var(--e-5); }
.vacio__videos { margin-top: var(--seccion); }

/* Paginación de los listados */
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--e-6); }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .9rem; border-radius: var(--r-p); border: 1px solid var(--borde-2); color: var(--texto); text-decoration: none; font-weight: 650; }
.pagination .page-numbers.current { background: var(--boton); color: var(--boton-texto); border-color: var(--boton); }
.esta-noche { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); align-items: center; }
.esta-noche img, .esta-noche .cubierta { border-radius: var(--r-1); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.esta-noche .cubierta b { font-size: .75rem; }
.vacio .cifra { margin: 0; }
/* Sello sobre un fondo de su mismo color (banda mostaza de la Biblioteca) */
.cine--mostaza .sello[data-serie="biblioteca"], .cab-serie--mostaza .sello[data-serie="biblioteca"] { box-shadow: inset 0 0 0 1.5px #18261f; }

/* Tarjetas con algo debajo del título (barra de veredictos de un libro, «Avísame»): las tarjetas de una fila miden lo
   mismo (la pista las estira) y eso de abajo se apoya en el fondo, así queda alineado aunque los títulos ocupen 2 o 3 líneas. */
.pista > .tv { display: flex; flex-direction: column; gap: .55rem; }
.pista > .tv > .vbarra, .pista > .tv > .avisame { margin-top: auto; }

/* Tarjeta final de una fila: «Ver toda la serie» con flecha, del mismo tamaño que una miniatura */
/* Mismo alto que una tarjeta: el cuerpo con la proporción de la miniatura y debajo el hueco de la barra de duración */
.tv--mas .tv__mas { display: grid; background: var(--sup); border: 0; outline: 1.5px dashed var(--borde-2); outline-offset: -1.5px; box-shadow: none; color: var(--texto); text-align: center; transition: border-color .25s ease, background-color .25s ease; }
.tv__mas-cuerpo { display: grid; place-items: center; align-content: center; gap: .9rem; aspect-ratio: 16 / 9; padding: var(--e-3); }
.tv--mas.tv--vertical .tv__mas-cuerpo { aspect-ratio: 9 / 16; }
.tv__mas-pie { display: block; height: 2.125rem; }
.tv__mas-flecha { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--texto); color: var(--fondo); transition: transform .3s var(--curva-menu, ease); }
.tv__mas-flecha svg { width: 1.3rem; height: 1.3rem; }
.tv__mas-texto { display: grid; gap: .2rem; }
.tv__mas-texto b { font-size: 1.0625rem; font-weight: 720; }
.tv__mas-texto span { font: 500 var(--t-mono)/1.4 var(--mono); color: var(--texto-3); }
.tv--mas .tv__enlace:hover .tv__mas { outline-color: var(--texto-2); background: var(--sup-2, var(--sup)); }
.tv--mas .tv__enlace:hover .tv__mas-flecha { transform: translateX(4px); }
/* En las filas con piel (pizarra, mostaza, periódico) hereda sus colores */
[data-piel="pizarra"] .tv--mas .tv__mas { background: rgb(255 255 255 / .04); outline-color: rgb(242 240 227 / .35); color: #f2f0e3; }
[data-piel="pizarra"] .tv__mas-flecha { background: #ecd98b; color: #1c4332; }
[data-piel="pizarra"] .tv__mas-texto span { color: rgb(242 240 227 / .7); }
[data-piel="mostaza"] .tv--mas .tv__mas { background: rgb(255 255 255 / .18); outline-color: rgb(24 38 31 / .35); color: #18261f; }
[data-piel="mostaza"] .tv__mas-flecha { background: #18261f; color: #e6b33a; }
[data-piel="mostaza"] .tv__mas-texto span { color: rgb(24 38 31 / .75); }