/* ============================================================
   BABELSTREAM — ESTILOS
   Un solo archivo para todas las páginas. Tema oscuro, acento ámbar.
   ============================================================ */

:root {
  --bg: #0f1115;
  --sup: #171a21;
  --sup2: #1f2430;
  --texto: #e8eaf0;
  --suave: #a6adbb;
  --acento: #f2b544;
  --acento-osc: #d99a26;
  --tinta: #1b1405;
  --borde: rgba(255,255,255,0.08);
  --borde2: rgba(255,255,255,0.16);
  --titulos: 'Outfit', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --cuerpo: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ancho: 1240px;
  --lado: max(16px, 4vw);
  --radio: 10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  background: var(--bg);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 4px; }

.oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* La clase "js" la pone app.js al arrancar, ya con la página pintada.
   Por eso lo que solo sirve con JavaScript se esconde con visibility y
   no con display: ocupa su sitio desde el principio y, al aparecer, no
   empuja nada (en el móvil el buscador es una fila entera de la barra). */
.js-solo { display: flex; }
html:not(.js) .js-solo { visibility: hidden; }

.saltar {
  position: absolute; inset-inline-start: 12px; top: -48px; z-index: 50;
  background: var(--acento); color: var(--tinta); font-weight: 700;
  padding: 8px 14px; border-radius: 6px;
}
.saltar:focus { top: 12px; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding-left: var(--lado); padding-right: var(--lado); }

/* ---------- barra superior ---------- */

.barra {
  position: sticky; top: 0; z-index: 20;
  background: rgba(15,17,21,0.88);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--borde);
}
.barra-in {
  max-width: var(--ancho); margin: 0 auto;
  padding: 10px var(--lado);
  display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap;
}
.logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--titulos); font-size: 22px; font-weight: 800; letter-spacing: -0.3px; color: #fff; }
.logo b { color: var(--acento); font-weight: 800; }
.logo-torre { color: var(--acento); flex-shrink: 0; }
.menu { display: flex; gap: 4px; }
.menu a { padding: 6px 10px; border-radius: 6px; color: var(--suave); font-weight: 600; font-size: 15px; }
.menu a:hover { color: #fff; background: var(--sup); }
.menu a[aria-current="page"] { color: #fff; }

.buscador, .portada-buscar { position: relative; align-items: center; flex: 1 1 220px; max-width: 420px; }
.buscador svg, .portada-buscar svg { position: absolute; inset-inline-start: 12px; color: var(--suave); pointer-events: none; }
.buscar-input {
  width: 100%; height: 40px; padding-block: 0; padding-inline: 38px 14px;
  background: var(--sup); border: 1px solid var(--borde2); border-radius: 999px;
  outline: none; transition: border-color .2s, background .2s;
}
.buscar-input::placeholder { color: var(--suave); }
.buscar-input:focus { border-color: var(--acento); background: var(--sup2); }
.buscar-input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
.buscar-res {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--sup); border: 1px solid var(--borde2); border-radius: var(--radio);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55); overflow: hidden; max-height: 70vh; overflow-y: auto;
}
.buscar-res li a, .buscar-res .vacio { display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.buscar-res li a:hover { background: var(--sup2); }
/* La opción activa del teclado: el foco real sigue en el campo (que no
   tiene outline), así que esta marca es el único indicador. La raya
   ámbar contra --sup supera de sobra el 3:1. */
.buscar-res li[aria-selected="true"] a { background: rgba(242,181,68,0.14); box-shadow: inset 3px 0 0 var(--acento); }
[dir="rtl"] .buscar-res li[aria-selected="true"] a { box-shadow: inset -3px 0 0 var(--acento); }
.buscar-res li[aria-selected="true"] strong { color: var(--acento); }
.buscar-res img, .buscar-res .sin { width: 34px; height: 51px; border-radius: 4px; object-fit: cover; background: var(--sup2); flex-shrink: 0; }
.buscar-res strong { display: block; font-weight: 600; line-height: 1.3; }
.buscar-res small { color: var(--suave); font-size: 13px; }
.buscar-res .vacio { color: var(--suave); }

/* Menú de idiomas: un <details> (funciona sin JavaScript). La lista se
   abre hacia dentro de la página desde el final de la barra. */
.idiomas { position: relative; margin-inline-start: auto; }
.idiomas summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--borde2); border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: var(--suave);
}
.idiomas summary::-webkit-details-marker { display: none; }
.idiomas summary:hover, .idiomas[open] summary { color: #fff; border-color: var(--acento); }
.idiomas-lista {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 35;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  width: min(320px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; padding: 8px;
  background: var(--sup); border: 1px solid var(--borde2); border-radius: var(--radio);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.idiomas-lista a { display: block; padding: 7px 10px; border-radius: 6px; font-size: 15px; color: var(--texto); }
.idiomas-lista a:hover { background: var(--sup2); color: #fff; }
.idiomas-lista a[aria-current] { color: var(--acento); font-weight: 700; }

/* ---------- migas ---------- */

.migas { padding-top: 14px; padding-bottom: 6px; position: relative; z-index: 2; }
.migas ol { display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; color: var(--suave); }
.migas li { display: flex; align-items: center; min-width: 0; }
.migas li + li::before { content: '/'; opacity: .5; padding: 0 8px; }
.migas a:hover { color: #fff; text-decoration: underline; }
/* display: block porque en un contenedor flex el texto va en un ítem
   anónimo y text-overflow no le llega: se cortaba sin los "…". */
.migas li[aria-current] { display: block; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

/* ---------- botones y etiquetas ---------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  font-weight: 700; font-size: 16px; transition: background .2s, transform .15s;
}
.boton-pri { background: var(--acento); color: var(--tinta); }
.boton-pri:hover { background: var(--acento-osc); }
.boton-sec { background: rgba(255,255,255,0.12); color: #fff; }
.boton-sec:hover { background: rgba(255,255,255,0.2); }
.boton-estreno { border: 1px solid var(--acento); color: var(--acento); }
.boton:active { transform: scale(.98); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a, .chips span {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--sup2); border: 1px solid var(--borde); font-size: 14px;
}
.chips a:hover { border-color: var(--acento); color: #fff; }

/* ---------- bloques ---------- */

.bloque { margin-top: 40px; }
.bloque h2 {
  font-family: var(--titulos); font-weight: 700; font-size: 26px; line-height: 1.2;
  letter-spacing: -0.2px; color: #fff; margin-bottom: 16px;
}
.bloque-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ver-todo { color: var(--acento); font-weight: 700; font-size: 15px; white-space: nowrap; }
.ver-todo:hover { text-decoration: underline; }
.bloque p { max-width: 820px; }
.bloque p + p { margin-top: 12px; color: var(--suave); }

/* ---------- portada ---------- */

/* Sin overflow: hidden (ni clip-path ni overflow: clip): recortaba la
   lista del buscador, que cuelga por debajo de la portada. El fondo y el
   ::after van con inset: 0 y no se salen. El z-index deja la portada,
   con su lista, por encima de lo que viene después (las tarjetas del
   riel crean su propia capa al pasar el ratón). */
.portada {
  position: relative; z-index: 1; isolation: isolate;
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--borde);
}
.portada-fondo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%; opacity: .32; z-index: -2;
}
.portada::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(1200px 500px at 15% 0%, rgba(242,181,68,0.16), transparent 60%),
    linear-gradient(180deg, rgba(15,17,21,0.55), var(--bg) 92%);
}
.portada-in { max-width: 860px; margin: 0 auto; text-align: center; }
.portada h1 {
  font-family: var(--titulos); font-weight: 800; color: #fff;
  font-size: clamp(32px, 5.4vw, 58px); line-height: 1.06; letter-spacing: -1px;
}
.portada-intro { color: var(--suave); font-size: 18px; margin: 16px auto 0; max-width: 640px; }
.portada-buscar { margin: 26px auto 0; max-width: 620px; }
.portada-buscar .buscar-input { height: 54px; font-size: 18px; padding-inline-start: 46px; }
.portada-buscar svg { inset-inline-start: 16px; width: 22px; height: 22px; }
.portada-buscar .buscar-res { text-align: start; }
.portada-chips { justify-content: center; margin-top: 18px; }

.riel {
  display: grid; grid-auto-flow: column; grid-auto-columns: 160px; gap: 14px;
  overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--sup2) transparent;
}
.riel li { scroll-snap-align: start; }
.sobre p { color: var(--suave); }

/* ---------- tarjetas ---------- */

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 14px; }
.tarjeta { display: flex; flex-direction: column; min-width: 0; }
.tarjeta img, .tarjeta-sin-poster {
  width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 8px; background: var(--sup2);
  transition: transform .2s, box-shadow .2s;
}
.tarjeta-sin-poster { display: block; }
.tarjeta:hover img, .tarjeta:focus-visible img { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--acento), 0 12px 26px rgba(0,0,0,0.55); }
.tarjeta-titulo {
  margin-top: 8px; font-weight: 600; font-size: 15px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta-meta { font-size: 13px; color: var(--suave); }

/* ---------- ficha ---------- */

.ficha-hero {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: -44px; padding-top: 64px; padding-bottom: 36px;
}
.ficha-fondo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%; opacity: .42; z-index: -2;
}
.ficha-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(15,17,21,0.97) 0%, rgba(15,17,21,0.78) 48%, rgba(15,17,21,0.4) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 45%);
}
/* De derecha a izquierda el texto va a la derecha: el oscurecido también. */
[dir="rtl"] .ficha-hero::after {
  background:
    linear-gradient(270deg, rgba(15,17,21,0.97) 0%, rgba(15,17,21,0.78) 48%, rgba(15,17,21,0.4) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 45%);
}
.ficha-cabeza { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: end; }
.ficha-poster {
  width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 12px; box-shadow: 0 20px 44px rgba(0,0,0,0.6); background: var(--sup2);
}
.ficha-info { min-width: 0; }
.ficha-tipo { font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--acento); margin-bottom: 6px; }
.ficha-info h1 {
  font-family: var(--titulos); font-weight: 800; color: #fff;
  font-size: clamp(34px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.8px;
  overflow-wrap: anywhere;
}
.ficha-lema { font-style: italic; color: var(--suave); margin-top: 10px; font-size: 17px; }
.ficha-datos { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 14px; }
.ficha-datos li { font-size: 14px; font-weight: 600; padding: 3px 10px; border: 1px solid var(--borde2); border-radius: 6px; }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.ficha-cuerpo { padding-bottom: 48px; }
.sinopsis { font-size: 17px; }

/* dónde ver */
.dv { background: var(--sup); border: 1px solid var(--borde); border-radius: 14px; padding: 22px 24px; margin-top: 8px; }
.dv h2 { margin-bottom: 8px; }
.dv-frase { color: var(--suave); }
.dv-barra { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; }
/* Sin JavaScript el selector solo tiene el país por defecto y no se
   puede usar: fuera, en vez de un control deshabilitado que parece vivo. */
html:not(.js) .dv-barra { display: none; }
.dv-barra label { font-weight: 700; font-size: 14px; color: var(--suave); }
.dv-pais {
  appearance: none; -webkit-appearance: none;
  background: var(--sup2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a6adbb' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--borde2); border-radius: 8px; padding: 8px 36px 8px 12px; min-width: 220px; max-width: 100%;
}
[dir="rtl"] .dv-pais { background-position: left 12px center; padding: 8px 12px 8px 36px; }
.dv-grupos { display: grid; gap: 4px; }
.dv-grupo { padding: 12px 0; border-top: 1px solid var(--borde); }
.dv-grupo:first-child { border-top: 0; }
.dv-grupo h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--acento); margin-bottom: 10px; }
.dv-logos { display: flex; flex-wrap: wrap; gap: 14px 18px; }
.dv-logos li { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; text-align: center; font-size: 12px; line-height: 1.25; color: var(--texto); }
.dv-logos img, .dv-sin-logo { width: 46px; height: 46px; border-radius: 10px; background: var(--sup2); }
/* El logo lleva a la web del servicio (pestaña nueva). */
.dv-enlace { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; color: inherit; }
.dv-enlace img, .dv-enlace .dv-sin-logo { transition: box-shadow .15s, transform .15s; }
.dv-enlace:hover img, .dv-enlace:focus-visible img { box-shadow: 0 0 0 2px var(--acento); transform: translateY(-2px); }
.dv-enlace:hover span, .dv-enlace:focus-visible span { color: #fff; text-decoration: underline; }
.dv-sin-logo { display: block; }
.dv-nada { color: var(--suave); padding: 10px 0; }
.dv-cine { font-weight: 700; font-size: 17px; color: #fff; }
.dv-cine-nota { font-size: 13px; color: var(--suave); margin-top: 2px; }

/* reparto */
.reparto { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px 14px; }
.reparto li { display: flex; flex-direction: column; min-width: 0; }
.reparto img, .reparto-inicial {
  width: 100%; aspect-ratio: 2 / 3; height: auto; object-fit: cover;
  border-radius: 8px; background: var(--sup2); margin-bottom: 8px;
}
.reparto-inicial { display: flex; align-items: center; justify-content: center; font-family: var(--titulos); font-size: 40px; color: var(--suave); }
.reparto-nombre { font-weight: 600; font-size: 15px; line-height: 1.3; }
.reparto-personaje { font-size: 13px; color: var(--suave); line-height: 1.3; margin-top: 2px; }

/* temporadas */
.temporadas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.temporadas li { display: flex; }
.temporada { flex: 1; display: flex; flex-direction: column; padding: 12px 14px; border-radius: 8px; background: var(--sup); border-inline-start: 3px solid var(--acento); }
a.temporada:hover { background: var(--sup2); }
a.temporada .temporada-nombre { color: var(--acento); }
.temporada-nombre { font-weight: 700; }
.temporada-meta { font-size: 14px; color: var(--suave); }

/* página de temporada */
.temporada-pagina { padding-top: 10px; padding-bottom: 48px; }
.temporada-cabeza { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; margin-bottom: 8px; }
.temporada-poster { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; background: var(--sup2); box-shadow: 0 16px 36px rgba(0,0,0,0.5); }
.temporada-cabeza h1 {
  font-family: var(--titulos); font-weight: 800; color: #fff;
  font-size: clamp(28px, 4.2vw, 46px); line-height: 1.08; letter-spacing: -0.6px; overflow-wrap: anywhere;
}
.temporada-cabeza .ficha-tipo a:hover { text-decoration: underline; }
.temporada-cabeza p + p, .temporada-cabeza .sinopsis { margin-top: 10px; }
.dv-mas { margin-top: 14px; }
.episodios { display: grid; gap: 8px; }
.episodios details { background: var(--sup); border: 1px solid var(--borde); border-radius: 10px; }
.episodios summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 16px;
  cursor: pointer; list-style: none;
}
.episodios summary::-webkit-details-marker { display: none; }
.episodios summary::before { content: '+'; color: var(--acento); font-weight: 800; width: 12px; flex-shrink: 0; }
.episodios details[open] summary::before { content: '–'; }
.episodios summary:hover { background: var(--sup2); border-radius: 10px; }
.ep-num { font-size: 13px; font-weight: 700; color: var(--acento); white-space: nowrap; }
.ep-nombre { font-weight: 700; color: #fff; flex: 1 1 200px; min-width: 0; }
.ep-fecha { font-size: 13px; color: var(--suave); white-space: nowrap; }
.ep-cuerpo { display: grid; grid-template-columns: 240px 1fr; gap: 16px; padding: 4px 16px 16px; }
.ep-cuerpo:not(:has(.ep-imagen)) { grid-template-columns: 1fr; }
.ep-imagen { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--sup2); }
.ep-texto p { color: var(--texto); }
.ep-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 14px; color: var(--suave); }
.ep-etiqueta { color: var(--suave); font-weight: 700; }
.ep-texto h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--acento); margin: 14px 0 6px; }
.ep-gente { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.ep-gente .personaje { color: var(--suave); }
.temporada-nav { display: flex; flex-wrap: wrap; gap: 10px; }

/* reparto con página de persona: la tarjeta entera es el enlace */
.reparto-enlace { display: flex; flex-direction: column; min-width: 0; }
.reparto-enlace:hover .reparto-nombre, .reparto-enlace:focus-visible .reparto-nombre { color: var(--acento); text-decoration: underline; }
.ficha-tecnica dd a, .ep-gente a { color: inherit; text-decoration: underline; text-decoration-color: var(--borde2); text-underline-offset: 3px; }
.ficha-tecnica dd a:hover, .ep-gente a:hover { color: var(--acento); text-decoration-color: currentColor; }

/* página de persona */
.persona-pagina { padding-top: 10px; padding-bottom: 48px; }
.persona-resumen { margin-top: 10px; font-size: 17px; }
.persona-datos { margin-top: 14px; grid-template-columns: 1fr; max-width: 640px; }
.filmografia { display: grid; gap: 2px; max-width: 900px; }
.filmografia li { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 14px; padding: 8px 0; border-bottom: 1px solid var(--borde); align-items: baseline; }
.filmo-anio { color: var(--suave); font-size: 14px; font-variant-numeric: tabular-nums; }
.filmo-titulo { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.filmo-titulo a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.filmo-rol { color: var(--suave); font-size: 14px; min-width: 0; overflow-wrap: anywhere; }

/* ficha técnica */
.ficha-tecnica { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 32px; max-width: 1000px; }
.ficha-tecnica div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.ficha-tecnica dt { color: var(--suave); font-size: 15px; }
.ficha-tecnica dd { font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.ficha-tecnica a { color: var(--acento); text-decoration: underline; }

/* ---------- índices ---------- */

.indice { padding-top: 10px; padding-bottom: 48px; }
.indice h1 {
  font-family: var(--titulos); font-weight: 800; color: #fff;
  font-size: clamp(30px, 4.4vw, 48px); line-height: 1.1; letter-spacing: -0.6px;
}
.indice-intro { color: var(--suave); max-width: 820px; margin: 10px 0 18px; font-size: 17px; }
.indice-az { columns: 4 220px; column-gap: 32px; font-size: 15px; }
.indice-az li { break-inside: avoid; padding: 3px 0; }
.indice-az a:hover { color: var(--acento); text-decoration: underline; }
.indice-az span { color: var(--suave); font-size: 13px; }
.acerca p { color: var(--texto); }
.acerca a { color: var(--acento); text-decoration: underline; }
.creditos-logo { display: inline-block; margin-bottom: 14px; }
.creditos-logo img { width: 190px; height: auto; }
.creditos-aviso { color: var(--suave); font-size: 15px; }
.no-encontrado { padding-top: 60px; }
.no-encontrado p { margin-top: 12px; color: var(--suave); }
.no-encontrado a { color: var(--acento); text-decoration: underline; }

/* ---------- aviso de cookies (solo Europa) ---------- */

.cookies {
  position: fixed; z-index: 40;
  left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: 14px;
  background: var(--sup2); border: 1px solid var(--borde2);
  box-shadow: 0 18px 44px rgba(0,0,0,0.6);
  font-size: 15px;
}
.cookies p { flex: 1 1 320px; margin: 0; }
.cookies a { color: var(--acento); text-decoration: underline; }
.cookies-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.cookies .boton { min-height: 40px; padding: 0 18px; font-size: 15px; }
button.boton { border: 0; cursor: pointer; }

/* ---------- pie ---------- */

.pie { margin-top: 32px; padding: 36px 0 calc(36px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--borde); background: #0b0d10; font-size: 14px; color: var(--suave); }
.pie-logo { font-size: 20px; }
.pie-lema { margin: 6px 0 18px; }
.pie-nav ul { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }
.pie-nav a:hover { color: #fff; text-decoration: underline; }
.pie-generos { font-size: 13px; }
.pie-texto { max-width: 820px; margin-top: 12px; line-height: 1.55; font-size: 13px; }
.pie-texto a { color: var(--texto); text-decoration: underline; }

/* ---------- otros alfabetos ----------
   Outfit solo tiene alfabeto latino: con cirílico, hebreo, árabe, CJK o
   tailandés los títulos irían en dos fuentes a la vez (Outfit para las
   palabras latinas, la del sistema para el resto). En esos idiomas todo
   va en la del sistema. El espaciado negativo de los títulos rompe las
   ligaduras del árabe y amontona los signos del tailandés y del CJK. */
:root:is(:lang(ru), :lang(uk), :lang(he), :lang(ar), :lang(ja), :lang(zh), :lang(ko), :lang(th)) { --titulos: var(--cuerpo); }
:root:is(:lang(ar), :lang(he), :lang(ja), :lang(zh), :lang(ko), :lang(th)) :is(h1, h2, h3, .ficha-tipo, .dv-grupo h3, .idiomas summary) { letter-spacing: normal; }
:root:is(:lang(ar), :lang(th)) body { line-height: 1.75; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .ficha-cabeza { grid-template-columns: 200px 1fr; gap: 24px; }
}

@media (max-width: 820px) {
  /* Por debajo de unos 800 px la barra ya no cabe en una fila: mide 108 px
     (148 en el móvil, con tres filas). Fija se comería media pantalla y el
     scroll-padding de 84 px dejaría los títulos de los anclajes debajo de
     ella. Medido: una sola fila desde 778 px en /es/ y 796 px en /. */
  .barra { position: relative; }
  html { scroll-padding-top: 0; }
}

@media (max-width: 640px) {
  .barra-in { gap: 10px 14px; padding-top: 8px; padding-bottom: 8px; }
  .logo { font-size: 20px; }
  .menu { order: 3; flex: 1 1 100%; justify-content: flex-start; margin-inline-start: -10px; }
  .buscador { order: 4; flex: 1 1 100%; max-width: none; }
  .idiomas { order: 2; }
  .portada { padding: 44px 0 36px; }
  .portada-intro { font-size: 16px; }
  .portada-buscar .buscar-input { height: 50px; font-size: 16px; }
  .ficha-hero { margin-top: -40px; padding-top: 52px; padding-bottom: 24px; }
  .ficha-hero::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(15,17,21,0.85) 55%, rgba(15,17,21,0.6) 100%); }
  .ficha-cabeza { grid-template-columns: 36% 1fr; gap: 16px; }
  .ficha-info h1 { font-size: clamp(26px, 7.4vw, 38px); }
  .ficha-lema { font-size: 15px; }
  .boton { flex: 1 1 auto; padding: 0 16px; }
  .dv { padding: 18px 16px; border-radius: 12px; }
  .dv-barra { flex-wrap: wrap; }
  .dv-pais { flex: 1 1 100%; min-width: 0; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 10px; }
  .riel { grid-auto-columns: 124px; }
  .reparto { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px 10px; }
  .temporada-cabeza { grid-template-columns: 34% 1fr; gap: 16px; }
  .filmografia li { grid-template-columns: 44px minmax(0, 1fr); }
  .filmo-rol { grid-column: 2; }
  .ep-cuerpo { grid-template-columns: 1fr; padding: 4px 12px 14px; }
  .episodios summary { padding: 12px; }
  .ficha-tecnica { grid-template-columns: 1fr; }
  .ficha-tecnica div { grid-template-columns: 130px 1fr; }
  .bloque { margin-top: 32px; }
  .bloque h2 { font-size: 22px; }
}

@media (max-width: 380px) {
  .ficha-cabeza { grid-template-columns: 1fr; }
  .ficha-poster { width: 46%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .tarjeta:hover img { transform: none; }
}