/* ==========================================================================
   NICOLEFLIX — ESTILOS
   Diseñado para el móvil primero (ella lo verá en el suyo).
   ========================================================================== */

:root {
  --rojo: #e50914;
  --rojo-oscuro: #b81d24;
  --amarillo: #ffc93c;
  --negro: #0b0b0f;
  --negro-puro: #000;
  --gris: #2a2a32;
  --gris-claro: #8c8c94;
  --blanco: #f5f5f7;
  --fuente: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radio: 6px;
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* El atributo hidden manda por encima de cualquier display de aquí abajo.
   Sin esto, .estreno/.modal/.buscador (que declaran display) se quedan
   visibles aunque el HTML los marque como ocultos. */
[hidden] { display: none !important; }

html, body {
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente);
  overflow-x: hidden;
}

body { min-height: 100vh; min-height: 100dvh; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }

/* ===== Pantallas ===== */
.pantalla { display: none; }
.pantalla.activa { display: block; }

/* ===== 1. Puerta de entrada ===== */
#puerta.activa {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; min-height: 100dvh;
  background: var(--negro-puro);
}
.puerta-contenido { text-align: center; }
.puerta-texto {
  color: var(--gris-claro);
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: .75rem;
  margin-bottom: 1.75rem;
  animation: latir 2.4s ease-in-out infinite;
}
.puerta-boton {
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  display: grid; place-items: center;
  transition: transform .25s, border-color .25s, background .25s;
}
.puerta-boton:hover, .puerta-boton:active {
  transform: scale(1.08);
  border-color: var(--rojo);
  background: rgba(229,9,20,.12);
}
.triangulo {
  width: 0; height: 0; margin-left: 6px;
  border-left: 22px solid var(--blanco);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}
@keyframes latir { 0%,100% { opacity: .45 } 50% { opacity: 1 } }

/* ===== 2. Intro del logo ===== */
/* Vive en css/intro.css — no dupliques reglas de #intro aquí:
   estilos.css se carga después y las sobrescribiría. */

/* ===== 3. Perfiles ===== */
#perfiles.activa {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100dvh;
  padding: 2rem 1rem;
  animation: entrar .5s ease;
}
@keyframes entrar { from { opacity: 0 } to { opacity: 1 } }

.perfiles-titulo {
  font-size: clamp(1.5rem, 6vw, 2.75rem);
  font-weight: 400;
  margin-bottom: 2.25rem;
  text-align: center;
}
.perfiles-lista {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  justify-content: center; max-width: 640px;
}
.perfil { width: 92px; text-align: center; transition: transform .2s; }
.perfil:not(.bloqueado):hover, .perfil:not(.bloqueado):active { transform: scale(1.06); }
.perfil-avatar {
  width: 92px; height: 92px;
  border-radius: var(--radio);
  display: grid; place-items: center;
  font-size: 2rem; font-weight: 700;
  background: linear-gradient(145deg, var(--rojo), var(--rojo-oscuro));
  background-size: cover; background-position: center;
  border: 2px solid transparent;
  transition: border-color .2s;
}
.perfil:not(.bloqueado):hover .perfil-avatar { border-color: var(--blanco); }
.perfil-nombre { margin-top: .6rem; font-size: .85rem; color: var(--gris-claro); }
.perfil.bloqueado .perfil-avatar {
  background: var(--gris);
  color: var(--gris-claro);
  font-size: 1.5rem;
}
.perfil.bloqueado { opacity: .55; cursor: not-allowed; }
.perfiles-nota {
  margin-top: 2rem; font-size: .75rem; color: var(--gris-claro);
  letter-spacing: .1em; text-transform: uppercase; text-align: center;
}

/* ===== 4. Cabecera ===== */
.cabecera {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center;
  padding: calc(.85rem + var(--seguro-arriba)) 1rem .85rem;
  transition: background .3s;
}
/* El reloj se pega al grupo de iconos de la derecha */
.reloj { margin-left: auto; }
.cabecera.con-fondo { background: rgba(11,11,15,.94); backdrop-filter: blur(8px); }
.logo-mini {
  color: var(--rojo);
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  font-size: 1.6rem; letter-spacing: .015em; line-height: 1;
}
.cabecera-acciones { display: flex; align-items: center; gap: .35rem; }

/* Reloj de la plataforma: siempre en hora de Colombia */
.reloj {
  font-size: .76rem; color: rgba(255,255,255,.72);
  white-space: nowrap; margin-right: .5rem;
  letter-spacing: .02em; user-select: none;
}
.reloj b { color: #fff; font-weight: 600; }
.reloj .sep { color: rgba(255,255,255,.35); margin: 0 .35rem; }

.icono-boton {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--blanco);
  transition: background .2s;
}
.icono-boton:hover { background: rgba(255,255,255,.12); }
.avatar-mini {
  width: 30px; height: 30px; border-radius: 4px; margin-left: .3rem;
  background: linear-gradient(145deg, var(--rojo), var(--rojo-oscuro));
  background-size: cover; background-position: center;
}

/* ===== Buscador ===== */
.buscador {
  position: fixed; z-index: 45;
  top: calc(3.6rem + var(--seguro-arriba)); left: 0; right: 0;
  display: flex; gap: .5rem; padding: .6rem 1rem;
  background: rgba(11,11,15,.97); backdrop-filter: blur(8px);
  animation: bajar .25s ease;
}
@keyframes bajar { from { opacity: 0; transform: translateY(-12px) } to { opacity: 1; transform: none } }
.buscador input {
  flex: 1; padding: .8rem 1rem; font-size: 1rem;
  background: var(--gris); color: var(--blanco);
  border: 1px solid transparent; border-radius: var(--radio);
}
.buscador input:focus { outline: none; border-color: var(--rojo); }
.buscador-cerrar { font-size: 1.8rem; line-height: 1; color: var(--gris-claro); padding: 0 .4rem; }

.resultado-busqueda {
  position: fixed; z-index: 44; inset: calc(7rem + var(--seguro-arriba)) 0 0 0;
  background: var(--negro); overflow-y: auto;
  padding: 1.25rem 1rem calc(2rem + var(--seguro-abajo));
  animation: entrar .3s ease;
}
.eureka {
  border: 1px solid rgba(229,9,20,.4);
  border-radius: var(--radio); overflow: hidden;
  background: linear-gradient(160deg, rgba(229,9,20,.14), transparent);
  padding: 1.4rem; margin-bottom: 1rem;
  animation: revelar .5s cubic-bezier(.2,.9,.25,1);
}
@keyframes revelar { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: none } }
.eureka-etiqueta {
  font-size: .65rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--rojo); margin-bottom: .5rem;
}
.eureka h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.eureka p { color: #cfcfd6; line-height: 1.6; font-size: .95rem; }
.eureka img { width: 100%; border-radius: var(--radio); margin-top: 1rem; }
.eureka audio { width: 100%; margin-top: 1rem; }
.sin-resultados { color: var(--gris-claro); text-align: center; padding: 2.5rem 1rem; line-height: 1.7; }

/* ===== Portada (hero) ===== */
.hero {
  position: relative; min-height: 78vh;
  display: flex; align-items: flex-end;
  padding: 1.5rem 1rem 2rem;
  background: radial-gradient(120% 90% at 70% 15%, #4a0d12 0%, #16060a 45%, var(--negro) 100%);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(closest-side, rgba(229,9,20,.35), transparent 70%) 78% 22%/60% 45% no-repeat,
    radial-gradient(closest-side, rgba(255,201,60,.18), transparent 70%) 18% 65%/55% 45% no-repeat;
  animation: flotar 14s ease-in-out infinite alternate;
}
@keyframes flotar { to { transform: translate3d(0, -18px, 0) scale(1.06); } }
.hero-degradado {
  position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(to top, var(--negro) 8%, transparent);
}
/* Con foto real: se apagan los orbes y entra el velo del billboard de Netflix */
/* Con foto detrás hace falta un velo más fuerte por la izquierda, o el
   texto se pierde en cuanto la imagen tiene zonas claras (una playa, por
   ejemplo). Es el mismo recurso que usa Netflix en sus billboards. */
.hero.con-foto::before {
  background:
    linear-gradient(to right, rgba(0,0,0,.92) 0%, rgba(0,0,0,.75) 30%, rgba(0,0,0,.35) 58%, transparent 82%),
    linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 45%);
  animation: none;
}
.hero-texto { position: relative; z-index: 2; width: 100%; }
.hero-etiqueta {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: #d8d8de; margin-bottom: .6rem;
}
.hero-etiqueta span { color: var(--rojo); font-weight: 700; }
/* El título del billboard va en la tipografía de la casa, como el logo de
   un título real, no como un encabezado de página */
.hero-titulo {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(3rem, 13vw, 6rem);
  font-weight: 400; line-height: .88; letter-spacing: .01em;
  margin-bottom: .5rem;
  text-shadow: 0 4px 26px rgba(0,0,0,.75);
}
/* La insignia "N.º 1", como la del billboard real */
.hero-rango {
  display: flex; align-items: center; gap: .45rem;
  font-size: .9rem; color: var(--blanco); margin-bottom: .7rem;
}
.hero-rango b { font-weight: 700; }
.rango-n {
  display: grid; place-items: center;
  width: 18px; height: 22px; border-radius: 2px;
  background: var(--rojo); color: #fff;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: 1rem; line-height: 1; padding-top: 2px;
}
.hero-descripcion { color: #d8d8de; line-height: 1.55; max-width: 34ch; margin-bottom: 1.35rem; }

/* El aviso del día: qué se estrena hoy o cuánto falta */
.hero-aviso {
  display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-size: .85rem; border-radius: 4px;
  padding: .45rem .75rem; margin-bottom: .9rem;
  border: 1px solid transparent;
}
.hero-aviso.estrena {
  background: rgba(229,9,20,.16); border-color: rgba(229,9,20,.55); color: #fff;
}
.hero-aviso.espera { background: rgba(255,255,255,.08); color: #d8d8de; }
.hero-aviso.abierto { background: rgba(70,211,105,.12); color: #b8f0c6; }
.hero-aviso b { font-weight: 700; }
/* El puntito rojo que late cuando hay estreno hoy */
.punto-vivo {
  width: 8px; height: 8px; border-radius: 50%; background: var(--rojo);
  box-shadow: 0 0 0 0 rgba(229,9,20,.7);
  animation: latido 1.8s ease-out infinite;
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(229,9,20,.7); }
  70%  { box-shadow: 0 0 0 9px rgba(229,9,20,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,9,20,0); }
}

/* La cuenta atrás dentro de la ficha de un título cerrado */
.cuenta-atras {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.09); border-radius: 4px;
  padding: .3rem .6rem; font-size: .8rem; color: #e8e8ec;
}
.cuenta-atras.ya { background: rgba(229,9,20,.18); color: #fff; }
.hero-botones { display: flex; gap: .6rem; flex-wrap: wrap; }

.boton-principal, .boton-secundario {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: var(--radio);
  font-size: .95rem; font-weight: 700;
  transition: transform .15s, opacity .2s, background .2s;
}
.boton-principal { background: var(--blanco); color: #111; }
.boton-secundario { background: rgba(109,109,110,.65); color: var(--blanco); }
.boton-principal:active, .boton-secundario:active { transform: scale(.96); }
.boton-principal:hover { opacity: .82; }
.boton-secundario:hover { background: rgba(109,109,110,.85); }
.boton-principal.ancho { width: 100%; justify-content: center; }
.triangulo-mini {
  width: 0; height: 0;
  border-left: 12px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* ===== Filas del catálogo ===== */
.filas { padding: .5rem 0 1rem; }
.fila { margin-bottom: 2rem; }
.fila-titulo { font-size: 1.05rem; font-weight: 700; padding: 0 1rem .7rem; }
/* El carrusel scrollea en horizontal, y eso RECORTA lo que se sale por
   arriba y por abajo — por eso la tarjeta ampliada en hover se cortaba.
   El truco: dejar hueco con padding y recuperarlo con margen negativo,
   así la tarjeta crecida cabe dentro del área que scrollea. */
.fila-carrusel {
  display: flex; gap: .6rem; overflow-x: auto; overflow-y: hidden;
  padding: 1.1rem 1rem 1.4rem;
  margin: -1.1rem 0 -1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.fila-carrusel::-webkit-scrollbar { display: none; }

/* Las tarjetas de fila son HORIZONTALES (16:9), como el boxart real de
   Netflix. Las verticales existen, pero solo en el Top 10 — ver .vertical */
.tarjeta {
  position: relative; flex: 0 0 auto;
  width: 232px; scroll-snap-align: start;
  transition: transform .2s;
}
.tarjeta:active { transform: scale(.96); }
.poster {
  position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: 4px; overflow: hidden;
  display: grid; place-items: center;
  padding: .9rem;
  background-size: cover; background-position: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
/* Textura de carátula: luz arriba, grano fino y viñeta. Es lo que hace que
   un póster sin foto no parezca un rectángulo de color plano. */
.poster::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 4px),
    radial-gradient(120% 85% at 50% 0%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(130% 110% at 50% 55%, transparent 35%, rgba(0,0,0,.65) 100%);
}
.poster::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.8) 2%, rgba(0,0,0,.15) 45%, transparent 70%);
}
/* El título hace de "logo" de la carátula, centrado y en la tipografía de
   la casa — como los logos de los títulos en las carátulas reales. */
.poster-titulo {
  position: relative; z-index: 2;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  font-weight: 400; line-height: .92; letter-spacing: .01em;
  text-align: center; text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0,0,0,.95), 0 0 34px rgba(0,0,0,.7);
  max-width: 92%;
}
/* Filete rojo bajo el título, como muchos logos de Netflix Originals */
.poster-titulo::after {
  content: ""; display: block;
  width: 34px; height: 2px; margin: .38rem auto 0;
  background: var(--rojo); opacity: .9;
}

/* La variante vertical: SOLO para el Top (2:3, como el Top 10 real) */
.tarjeta.vertical { width: 148px; }
.tarjeta.vertical .poster { aspect-ratio: 2 / 3; }
.tarjeta.vertical .poster-titulo { font-size: 1.15rem; }
.tarjeta.bloqueada .poster {
  filter: grayscale(.85) brightness(.45);
  transition: filter .25s ease-out;
}
/* Al pasar por encima de un título cerrado se aclara: se deja mirar,
   aunque siga sin poder reproducirse */
@media (hover: hover) and (min-width: 768px) {
  .tarjeta.bloqueada:hover .poster { filter: grayscale(.25) brightness(.8); }
}
/* El candado va en la esquina, no en el centro: en el centro se montaba
   encima del título y se leían los dos a la vez. */
.candado {
  position: absolute; z-index: 3;
  right: .5rem; bottom: .45rem;
  font-size: .95rem; opacity: .9;
  filter: grayscale(1) brightness(1.7);
}
.tarjeta.vertical .candado { right: .45rem; bottom: .4rem; }
.etiqueta-estreno {
  position: absolute; z-index: 4; top: .4rem; left: .4rem;
  background: var(--rojo); color: #fff;
  font-size: .55rem; font-weight: 800; letter-spacing: .08em;
  padding: .22rem .4rem; border-radius: 3px;
}
.etiqueta-dia {
  margin-top: .5rem; font-size: .78rem; color: #d2d2d6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Con ratón la info vive en el hover, así que debajo no hace falta.
   En móvil (sin hover) se queda visible, que si no se perdería el dato. */
@media (hover: hover) and (min-width: 768px) {
  .etiqueta-dia { transition: opacity .2s; }
  .tarjeta:hover .etiqueta-dia { opacity: 0; }
}
.barra-progreso {
  height: 3px; background: var(--gris); border-radius: 2px;
  margin-top: .45rem; overflow: hidden;
}
.barra-progreso span { display: block; height: 100%; background: var(--rojo); }

/* ===== Pie ===== */
.pie {
  padding: 1.5rem 1rem calc(3rem + var(--seguro-abajo));
  text-align: center; color: var(--gris-claro); font-size: .78rem; line-height: 1.8;
}
.pie-legal { font-size: .68rem; opacity: .6; letter-spacing: .06em; }

/* ===== 5. Detalle ===== */
.pantalla-superpuesta {
  position: fixed; inset: 0; z-index: 60;
  background: var(--negro); overflow-y: auto;
  animation: subir .35s cubic-bezier(.2,.9,.25,1);
}
@keyframes subir { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: none } }
.cerrar-detalle {
  position: fixed; z-index: 62;
  top: calc(.8rem + var(--seguro-arriba)); right: 1rem;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,.72); color: #fff;
  font-size: 1.6rem; line-height: 1; display: grid; place-items: center;
}
.detalle-cabecera {
  position: relative; min-height: 46vh;
  display: flex; align-items: flex-end; padding: 1.5rem 1rem;
  background-size: cover; background-position: center;
}
.detalle-cabecera::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--negro) 4%, transparent 70%);
}
.detalle-cabecera-texto { position: relative; z-index: 2; }
.detalle-titulo {
  font-size: clamp(1.9rem, 9vw, 3.2rem);
  font-weight: 900; line-height: .95; margin-bottom: .5rem;
}
.detalle-tagline { color: #cfcfd6; font-style: italic; font-size: .95rem; }
.detalle-cuerpo { padding: 1.25rem 1rem calc(3rem + var(--seguro-abajo)); }
.detalle-meta {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  font-size: .82rem; color: var(--gris-claro); margin-bottom: 1rem;
}
.match { color: #46d369; font-weight: 700; }
.clasificacion { border: 1px solid var(--gris-claro); padding: .05rem .35rem; font-size: .72rem; }
.detalle-sinopsis { line-height: 1.65; margin-bottom: 1.75rem; color: #e2e2e8; }

.bloque-titulo {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gris-claro); margin: 1.75rem 0 .85rem;
  border-top: 1px solid var(--gris); padding-top: 1.25rem;
}
.critica { margin-bottom: 1rem; }
.critica-texto { font-style: italic; line-height: 1.5; }
.critica-medio { font-size: .78rem; color: var(--gris-claro); margin-top: .25rem; }
.estrellas { color: var(--amarillo); font-size: .8rem; letter-spacing: .1em; }

.episodio {
  background: #14141a; border-radius: var(--radio);
  padding: 1.1rem; margin-bottom: .85rem;
}
.episodio h4 { font-size: 1rem; margin-bottom: .55rem; }
.episodio p { line-height: 1.65; color: #cfcfd6; white-space: pre-wrap; }
.episodio img { width: 100%; border-radius: var(--radio); margin-top: .9rem; }
.episodio audio { width: 100%; margin-top: .9rem; }

.cliffhanger {
  margin-top: 2rem; padding: 1.4rem;
  border: 1px dashed rgba(229,9,20,.55); border-radius: var(--radio);
  background: rgba(229,9,20,.07); text-align: center;
}
.cliffhanger-etiqueta {
  font-size: .65rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--rojo); margin-bottom: .6rem;
}
.cliffhanger-texto { font-size: 1.05rem; font-weight: 700; line-height: 1.45; filter: blur(4px); transition: filter .8s ease; }
.cliffhanger-texto.revelado { filter: none; }

/* Post-créditos del día 7 */
.post-creditos {
  margin-top: 2rem; padding: 1.6rem;
  border-radius: var(--radio);
  background: linear-gradient(160deg, rgba(255,201,60,.16), rgba(229,9,20,.1));
  border: 1px solid rgba(255,201,60,.4);
  animation: revelar .8s cubic-bezier(.2,.9,.25,1);
}
.post-creditos .bloque-titulo { border: none; padding: 0; color: var(--amarillo); margin-top: 0; }
.renovacion {
  margin-top: 2rem; padding: 1.5rem; text-align: center;
  border-radius: var(--radio); background: #14141a;
  font-weight: 900; letter-spacing: .12em; font-size: .95rem;
  color: var(--amarillo);
}

/* ===== 6. Modal ===== */
.modal {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; padding: 1.25rem;
  background: rgba(0,0,0,.85); backdrop-filter: blur(4px);
  animation: entrar .25s ease;
}
.modal-caja {
  position: relative; width: 100%; max-width: 380px;
  background: #16161d; border-radius: 10px; padding: 2rem 1.5rem 1.5rem;
  animation: subir .3s cubic-bezier(.2,.9,.25,1);
}
.modal-cerrar { position: absolute; top: .5rem; right: .75rem; font-size: 1.7rem; color: var(--gris-claro); }
.modal-titulo { font-size: 1.3rem; margin-bottom: .4rem; }
.modal-texto { color: var(--gris-claro); font-size: .88rem; margin-bottom: 1.25rem; }
#input-codigo {
  width: 100%; padding: 1rem; margin-bottom: .75rem;
  background: var(--gris); color: var(--blanco);
  border: 2px solid transparent; border-radius: var(--radio);
  font-size: 1.6rem; text-align: center; letter-spacing: .5em; font-weight: 700;
}
#input-codigo:focus { outline: none; border-color: var(--rojo); }
#input-codigo.error { border-color: var(--rojo); animation: temblar .4s; }
@keyframes temblar {
  0%,100% { transform: translateX(0) } 20% { transform: translateX(-9px) }
  40% { transform: translateX(9px) } 60% { transform: translateX(-5px) } 80% { transform: translateX(5px) }
}
.modal-error { color: var(--rojo); font-size: .85rem; min-height: 1.3em; margin-bottom: .75rem; text-align: center; }

/* ===== 7. Animación de estreno ===== */
.estreno {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 1.5rem;
  background: var(--negro-puro); animation: entrar .3s ease;
}
.estreno-contenido { text-align: center; max-width: 520px; }
.estreno-etiqueta {
  font-size: .75rem; letter-spacing: .35em; color: var(--rojo);
  margin-bottom: 1rem; animation: latir 1.2s ease-in-out infinite;
}
.estreno-titulo {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(2.4rem, 14vw, 5.5rem); font-weight: 400; line-height: .95;
  letter-spacing: .01em;
  animation: golpe .7s cubic-bezier(.2,.9,.25,1);
}
@keyframes golpe {
  0% { opacity: 0; transform: scale(2.2); filter: blur(14px) }
  100% { opacity: 1; transform: scale(1); filter: none }
}
.estreno-barra { height: 3px; background: var(--gris); margin-top: 2rem; border-radius: 2px; overflow: hidden; }
.estreno-barra span {
  display: block; height: 100%; width: 0; background: var(--rojo);
  animation: cargar 2.2s linear forwards;
}
@keyframes cargar { to { width: 100% } }

/* ==========================================================================
   El sitio completo (2026-08-25): navegación, desplegables, Top numerado,
   hover de tarjetas, colecciones, Novedades, Cuenta y Administrar perfiles.
   Valores medidos en netflix.com (docs/NETFLIX-DISENO.md).
   ========================================================================== */

/* ===== Navegación de secciones en la cabecera ===== */
.cabecera-izquierda { display: flex; align-items: center; gap: 1.2rem; min-width: 0; }
.menu-principal {
  display: flex; align-items: center; gap: 1rem;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.menu-principal::-webkit-scrollbar { display: none; }
.menu-enlace {
  color: rgba(255,255,255,.7); font-size: .82rem; white-space: nowrap;
  transition: color .25s cubic-bezier(.4,0,.68,.06); padding: .2rem 0;
}
.menu-enlace:hover { color: rgba(255,255,255,.9); }
.menu-enlace.activo { color: #fff; font-weight: 700; }

/* ===== Desplegables (notificaciones y perfil) ===== */
.desplegable-zona { position: relative; }
.desplegable {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
  min-width: 240px; max-width: min(330px, 88vw);
  background: rgba(11,11,15,.97); border: 1px solid #333;
  animation: bajar .2s ease;
}
.desplegable::before {
  content: ""; position: absolute; top: -7px; right: 14px;
  border: 7px solid transparent; border-bottom-color: #fff;
  border-top: 0;
}
.desplegable-item {
  display: block; width: 100%; text-align: left;
  padding: .8rem 1rem; font-size: .85rem; color: var(--blanco);
}
.desplegable-item:hover { background: #232323; text-decoration: underline; }
.desplegable-item.con-borde { border-top: 1px solid #333; }
.notif-punto {
  position: absolute; top: 6px; right: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rojo); border: 2px solid var(--negro);
}
.notif {
  display: flex; gap: .8rem; align-items: center;
  padding: .8rem 1rem; border-bottom: 1px solid #232323;
}
.notif:last-child { border-bottom: 0; }
.notif-mini {
  flex: none; width: 64px; aspect-ratio: 16/9; border-radius: 4px;
  display: grid; place-items: center;
  font-family: "Bebas Neue","Arial Narrow",Impact,sans-serif; font-size: .8rem;
  color: rgba(255,255,255,.9); overflow: hidden; text-align: center; line-height: 1;
}
.notif-texto { font-size: .8rem; }
.notif-texto small { display: block; color: var(--gris-claro); margin-top: .15rem; }

/* ===== El Top con numerales gigantes (medidos: 100px, tarjetas 8px) ===== */
.fila-carrusel.top-numerado { align-items: flex-end; }
.tarjeta-top { display: flex; align-items: flex-end; flex: none; }
.top-numero {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(72px, 12vw, 100px); line-height: .78;
  color: var(--negro);
  -webkit-text-stroke: 2px #8c8c94;
  margin-right: -14px; z-index: 0; user-select: none;
}
.tarjeta-top .tarjeta { z-index: 1; }

/* La vista previa animada que da Mux, por encima de la carátula */
.poster-avance {
  position: absolute; inset: 0; z-index: 2;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity .35s ease-in-out;
  pointer-events: none;
}
@media (hover: hover) and (min-width: 768px) {
  .tarjeta:hover .poster-avance.listo { opacity: 1; }
}

/* ===== Foco al deslizar (móvil) =====
   Sin ratón no hay hover, así que hace de hover el dedo: la tarjeta que
   queda centrada en el carrusel se destaca y enseña su adelanto, y va
   cambiando sola conforme ella desliza. */
@media (hover: none), (max-width: 767px) {
  .fila-carrusel .tarjeta {
    transition: opacity .3s ease, transform .25s ease;
  }
  .fila-carrusel.con-foco .tarjeta { opacity: .58; }
  .fila-carrusel.con-foco .tarjeta.enfocada { opacity: 1; }

  /* Con el dedo, 26 píxeles es muy poco: se fallaba el botón y se abría
     la ficha por detrás. Se agrandan y además se les da una zona de
     toque invisible alrededor, sin cambiar cómo se ven. */
  .tarjeta.enfocada .mini-boton { width: 32px; height: 32px; }
  .tarjeta.enfocada .mini-boton::after {
    content: ""; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 46px; height: 46px; border-radius: 50%;
  }
  .tarjeta.enfocada .hoverinfo-botones { gap: .55rem; margin-bottom: .5rem; }
  .tarjeta.enfocada .poster-avance.listo { opacity: 1; }
  .tarjeta.enfocada .tarjeta-hoverinfo { opacity: 1; pointer-events: auto; }
  .tarjeta.enfocada .poster {
    box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 10px 26px rgba(0,0,0,.75);
  }
  /* La etiqueta del día estorba cuando ya está la ficha encima */
  .tarjeta.enfocada .etiqueta-dia { opacity: 0; }
}

/* ===== Hover de tarjeta =====
   La ficha vive DENTRO del póster. Motivo: el carrusel scrollea en
   horizontal, y eso obliga al navegador a recortar lo que se salga por
   arriba y por abajo — una ficha colgando por fuera aparecía cortada y
   por debajo de la fila siguiente. Dentro del póster no se corta nunca. */
.tarjeta { position: relative; }
.tarjeta-hoverinfo {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  background: linear-gradient(to top, rgba(0,0,0,.96) 42%, rgba(0,0,0,.75) 72%, transparent);
  border-radius: 0 0 4px 4px;
  padding: .8rem .6rem .55rem;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease-in-out;
}
.tarjeta-hoverinfo .hoverinfo-botones {
  display: flex; align-items: center; gap: .35rem; margin-bottom: .45rem;
}
.mini-boton {
  position: relative;                 /* para la zona de toque de móvil */
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: .68rem;
  background: #fff; color: #000; border: 1.5px solid #fff;
  transition: transform .15s ease, background .2s, border-color .2s;
}
.mini-boton:hover { transform: scale(1.12); }
.mini-boton.secundario { background: rgba(42,42,42,.7); color: #fff; border-color: #9a9a9a; }
.mini-boton.secundario:hover { border-color: #fff; }
.mini-boton.derecha { margin-left: auto; }
.hoverinfo-meta {
  display: flex; align-items: center; gap: .35rem;
  font-size: .68rem; color: #d2d2d6;
  white-space: nowrap; overflow: hidden;
}
.hoverinfo-match { color: #46d369; font-weight: 700; }
.hoverinfo-clasif {
  border: 1px solid rgba(255,255,255,.45); border-radius: 2px;
  padding: 0 .28rem; font-size: .66rem;
}
.hoverinfo-genero {
  font-size: .72rem; color: #d2d2d6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Nada de texto largo al pasar por encima: lo que tiene que verse ahí es
   el adelanto animado, no un párrafo. El texto vive en la ficha. */

/* Fondo quieto mientras hay una ventana abierta encima. Se fija el body
   en su sitio (el JS le pone el "top") en vez de esconder el scroll: así
   al cerrar ella vuelve exactamente donde estaba mirando. */
body.fondo-quieto {
  position: fixed;
  left: 0; right: 0; width: 100%;
  overflow: hidden;
}

/* Mensajito de confirmación, abajo y centrado. Aparece al añadir algo a
   Mi lista y se va solo a los pocos segundos. */
.aviso-flotante {
  position: fixed; z-index: 95;
  left: 50%; bottom: calc(1.6rem + var(--seguro-abajo, 0px));
  transform: translate(-50%, 14px);
  background: rgba(28,28,32,.97);
  border: 1px solid rgba(255,255,255,.16);
  border-left: 3px solid var(--rojo);
  border-radius: 5px;
  padding: .7rem 1.1rem;
  font-size: .86rem; color: #fff; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); }

/* ===== Aire en los laterales =====
   Las filas iban pegadas al borde de la pantalla. Se le da margen a los
   títulos y a los carruseles a la vez, con una sola medida, para que
   queden alineados entre sí como en Netflix. */
:root { --margen-lateral: 1.15rem; }
@media (min-width: 700px)  { :root { --margen-lateral: 2rem; } }
@media (min-width: 1100px) { :root { --margen-lateral: 3.5rem; } }

.fila-titulo { padding-left: var(--margen-lateral); padding-right: var(--margen-lateral); }
.fila-carrusel {
  padding-left: var(--margen-lateral); padding-right: var(--margen-lateral);
  /* CLAVE: sin esto el scroll-snap se come el margen. Al encajar la
     tarjeta la pega al borde del contenedor ignorando el padding, y el
     carrusel aparecía desplazado justo esos píxeles: la primera tarjeta
     salía cortada contra el filo de la pantalla. */
  scroll-padding-left: var(--margen-lateral);
  scroll-padding-right: var(--margen-lateral);
}
.coleccion-titulo, .coleccion-nota { padding-left: var(--margen-lateral); padding-right: var(--margen-lateral); }
.coleccion-rejilla { padding-left: var(--margen-lateral); padding-right: var(--margen-lateral); }
.novedades-lista { padding-left: var(--margen-lateral); padding-right: var(--margen-lateral); }
.hero { padding-left: var(--margen-lateral); padding-right: var(--margen-lateral); }
/* Las flechas del carrusel se pegan al borde real, no al del contenido */
.fila-flecha.izq { left: 0; }
.fila-flecha.der { right: 0; }
@media (hover: hover) and (min-width: 768px) {
  .tarjeta { transition: transform .18s ease-out; }
  .tarjeta:hover { transform: scale(1.1); z-index: 20; }
  .tarjeta:hover .poster { box-shadow: 0 14px 34px rgba(0,0,0,.8); }
  .tarjeta:hover .tarjeta-hoverinfo { opacity: 1; pointer-events: auto; }
  /* La fila que tiene el ratón encima se pone por delante de las demás:
     si no, la fila de abajo tapa a la tarjeta que está creciendo. */
  .fila { position: relative; z-index: 1; }
  .fila:hover { z-index: 25; }
  .fila-cuerpo:hover { z-index: 25; }
}

/* ===== Vistas de colección (Series / Películas / Mi lista) ===== */
.coleccion-titulo {
  padding: calc(5.2rem + var(--seguro-arriba)) 1rem 0;
  font-size: 1.5rem;
}
.coleccion-nota { padding: .6rem 1rem 0; color: var(--gris-claro); font-size: .9rem; }
.coleccion-rejilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.6rem .8rem; padding: 1.4rem 1rem 3rem;
}
.coleccion-rejilla .tarjeta { width: auto; flex: initial; }

/* ===== Novedades ===== */
.novedades-lista { padding: 1rem 1rem 3rem; max-width: 760px; }
.novedad {
  display: flex; gap: 1rem; align-items: center;
  padding: 1.1rem 0; border-bottom: 1px solid #232323;
}
.novedad-fecha {
  flex: none; width: 74px; text-align: center;
  font-family: "Bebas Neue","Arial Narrow",Impact,sans-serif;
  line-height: .95; color: var(--blanco);
}
.novedad-fecha b { display: block; font-size: 1.9rem; font-weight: 400; }
.novedad-fecha span { font-size: .8rem; color: var(--gris-claro); text-transform: uppercase; }
.novedad-poster {
  flex: none; width: 104px; aspect-ratio: 16/9; border-radius: 4px;
  display: grid; place-items: center; overflow: hidden;
  font-family: "Bebas Neue","Arial Narrow",Impact,sans-serif;
  color: rgba(255,255,255,.9); text-align: center; line-height: 1; padding: 0 4px;
}
.novedad-info { flex: 1; min-width: 0; }
.novedad-info h4 { font-size: .95rem; margin-bottom: .2rem; }
.novedad-info p { font-size: .78rem; color: var(--gris-claro); }
.novedad-recordar {
  flex: none; font-size: .74rem; padding: .45rem .7rem;
  border: 1px solid #8c8c94; border-radius: 4px; color: var(--blanco);
  transition: background-color .25s cubic-bezier(.4,0,.68,.06);
}
.novedad-recordar.activo { background: #fff; color: #000; border-color: #fff; }

/* ===== Botonera del detalle + títulos similares ===== */
.detalle-botones { display: flex; gap: .6rem; margin: .9rem 0 1.1rem; flex-wrap: wrap; }
/* Rejilla de "Más títulos como este". Las tarjetas llevan un ancho fijo
   pensado para el carrusel; aquí hay que soltarlo o se montan unas sobre
   otras y los textos de debajo se solapan. */
.similares {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.4rem .8rem; margin: 1rem 0 2rem;
}
.similares .tarjeta { width: auto; flex: initial; }

/* ===== Pie del catálogo ===== */
.pie-enlaces {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .5rem 1.4rem; margin: 1rem 0 1.4rem; text-align: left;
  max-width: 860px; margin-left: auto; margin-right: auto;
}
.pie-enlaces a {
  color: rgba(255,255,255,.7); font-size: .76rem; text-decoration: none;
}
.pie-enlaces a:hover { text-decoration: underline; }

/* ===== Cuenta (fondo claro, como la real) ===== */
#cuenta.cuenta { background: #f3f3f3; }
.cuenta-contenido {
  max-width: 800px; margin: 0 auto;
  padding: calc(3.5rem + var(--seguro-arriba)) 1.2rem 4rem;
  color: #333;
}
.cuenta-contenido h2 { font-size: 2rem; font-weight: 400; color: #333; margin-bottom: .2rem; }
.cuenta-miembro { color: #555; font-size: .85rem; margin-bottom: 1.4rem; display: flex; align-items: center; gap: .5rem; }
.cuenta-seccion {
  border-top: 1px solid #ccc; padding: 1.2rem 0;
  display: grid; grid-template-columns: 180px 1fr; gap: .6rem 1.5rem;
}
.cuenta-seccion h3 {
  font-size: .95rem; font-weight: 400; color: #737373; text-transform: uppercase;
  letter-spacing: .03em;
}
.cuenta-dato { color: #333; font-size: .95rem; margin-bottom: .4rem; }
.cuenta-dato small { color: #737373; display: block; }
.cuenta-plan {
  display: inline-block; background: var(--rojo); color: #fff;
  font-weight: 700; font-size: .8rem; letter-spacing: .06em;
  border-radius: 3px; padding: .25rem .6rem;
}
#cuenta .cerrar-detalle { color: #333; }
@media (max-width: 640px) { .cuenta-seccion { grid-template-columns: 1fr; } }

/* ===== Administrar perfiles ===== */
.gestionar-contenido {
  max-width: 640px; margin: 0 auto; text-align: center;
  padding: calc(4rem + var(--seguro-arriba)) 1.2rem 4rem;
}
.gestionar-contenido h2 { font-size: 1.8rem; margin-bottom: 2rem; }
.gestionar-fila { display: flex; justify-content: center; gap: 1.4rem; flex-wrap: wrap; }
.gestionar-avatar {
  width: 96px; height: 96px; border-radius: 8px;
  display: grid; place-items: center; margin: 0 auto .6rem;
  font-family: "Bebas Neue","Arial Narrow",Impact,sans-serif;
  font-size: 2.6rem; color: #fff;
  background: linear-gradient(145deg, var(--rojo), var(--rojo-oscuro));
  background-size: cover; background-position: center;
}
.gestionar-perfil.bloqueado { opacity: .5; }
.gestionar-perfil p { font-size: .85rem; color: var(--gris-claro); }
.gestionar-colores { margin-top: 2.2rem; }
.gestionar-colores p { font-size: .85rem; color: var(--gris-claro); margin-bottom: .8rem; }
.paleta { display: flex; justify-content: center; gap: .7rem; flex-wrap: wrap; }
.paleta button {
  width: 44px; height: 44px; border-radius: 8px;
  border: 2px solid transparent; transition: transform .2s ease-in-out;
}
.paleta button:hover { transform: scale(1.12); }
.paleta button.elegido { border-color: #fff; }
/* Rejilla de fotos para el avatar. Lo que elija queda guardado. */
.gestionar-fotos { margin-top: 2.2rem; }
.gestionar-fotos p { font-size: .85rem; color: var(--gris-claro); margin-bottom: .9rem; }
.rejilla-avatares {
  display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  max-width: 520px; margin: 0 auto;
}
/* Sin marcos: la foto se ve limpia y ya está. La elegida se distingue
   porque las demás se apagan un poco y ella lleva una marca discreta. */
.avatar-opcion {
  position: relative;
  aspect-ratio: 1 / 1; width: 100%;
  border-radius: 8px; border: 0;
  background-size: cover; background-position: center;
  transition: transform .18s ease-out, opacity .18s;
}
.avatar-opcion:hover { transform: scale(1.08); }
.rejilla-avatares:hover .avatar-opcion { opacity: .72; }
.rejilla-avatares .avatar-opcion:hover { opacity: 1; }
.avatar-opcion.elegido { opacity: 1; }
.avatar-opcion.elegido::after {
  content: "";
  position: absolute; right: 5px; bottom: 5px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--rojo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 17.5L4 12l1.4-1.4 4.1 4.1 9.1-9.1L20 7z' fill='white'/%3E%3C/svg%3E") center/11px no-repeat;
  box-shadow: 0 1px 5px rgba(0,0,0,.6);
}

.gestionar-nota { margin-top: 2rem; font-size: .8rem; color: var(--gris-claro); }

/* ==========================================================================
   EL REPRODUCTOR (2026-08-25) — pantalla completa, controles que se esconden
   ========================================================================== */
.reproductor {
  position: fixed; inset: 0; z-index: 90;
  background: #000;
}
.reproductor video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}
.repro-capa {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 1; transition: opacity .35s ease;
}
.repro-capa.oculta { opacity: 0; pointer-events: none; }
.reproductor.sin-cursor { cursor: none; }
.repro-superior {
  display: flex; align-items: center; gap: .8rem;
  padding: calc(1rem + var(--seguro-arriba)) 1rem .8rem;
  background: linear-gradient(to bottom, rgba(0,0,0,.75), transparent);
}
.repro-titulos { display: flex; flex-direction: column; min-width: 0; }
.repro-titulos strong {
  font-family: "Bebas Neue","Arial Narrow",Impact,sans-serif;
  font-size: 1.5rem; font-weight: 400; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.repro-titulos span { font-size: .8rem; color: rgba(255,255,255,.7); }
.repro-inferior {
  padding: .6rem 1rem calc(1rem + var(--seguro-abajo));
  background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
}
.repro-barra {
  position: relative; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.3); cursor: pointer;
  margin-bottom: .7rem; touch-action: none;
  transition: transform .15s ease;
}
.repro-barra:hover { transform: scaleY(1.6); }
.repro-buffer {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: rgba(255,255,255,.45); border-radius: 2px;
}
.repro-progreso {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--rojo); border-radius: 2px;
}
.repro-tirador {
  position: absolute; right: -7px; top: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--rojo); transform: translateY(-50%);
  box-shadow: 0 0 6px rgba(0,0,0,.6);
}
.repro-controles { display: flex; align-items: center; gap: .3rem; }
.repro-boton {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; flex: none;
  transition: transform .15s ease, background .2s;
}
.repro-boton:hover { transform: scale(1.15); background: rgba(255,255,255,.12); }
.repro-tiempo { font-size: .78rem; color: rgba(255,255,255,.85); margin-left: .4rem; white-space: nowrap; }
.repro-hueco { flex: 1; }
.repro-cargando {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  pointer-events: none;
}
.repro-cargando span {
  width: 56px; height: 56px; border-radius: 50%;
  border: 4px solid rgba(229,9,20,.25); border-top-color: var(--rojo);
  animation: repro-girar .8s linear infinite;
}
@keyframes repro-girar { to { transform: rotate(360deg) } }
.repro-error {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: 2rem; z-index: 3;
  font-size: .95rem; color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.8);
}

/* ===== Episodios con miniatura y play (estilo Netflix) =====
   En móvil se apilan: el texto del episodio es lo importante del regalo y
   a 375px, en fila, se quedaba en 162px de ancho — ilegible. */
.episodio { display: flex; flex-direction: column; gap: .8rem; align-items: stretch; }
@media (min-width: 560px) {
  .episodio { flex-direction: row; gap: .9rem; align-items: flex-start; }
  .episodio-miniatura { width: 132px; }
}
.episodio-miniatura {
  position: relative; flex: none; width: 100%; max-width: 320px; aspect-ratio: 16/9;
  border-radius: 6px; overflow: hidden; cursor: pointer;
  display: grid; place-items: center;
  background-size: cover; background-position: center;
  transition: transform .2s ease-in-out;
}
.episodio-miniatura:hover { transform: scale(1.05); }
.episodio-miniatura .episodio-play {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,.55); border: 2px solid #fff; color: #fff;
  font-size: .85rem; padding-left: 3px;
  transition: transform .2s ease-in-out, background .2s;
}
.episodio-miniatura:hover .episodio-play { transform: scale(1.15); background: rgba(229,9,20,.85); border-color: var(--rojo); }
.episodio-cuerpo { flex: 1; min-width: 0; }

/* ===== Ficha de un título aún cerrado (preview) ===== */
/* La portada de un título cerrado se ve, solo que algo apagada: la idea es
   que dé ganas, no esconderla. Antes iba tan gris que no se distinguía. */
.detalle-cabecera.con-llave { filter: grayscale(.25) brightness(.85); }

/* El adelanto en movimiento sobre la portada (lo genera Mux del vídeo) */
.trailer-cabecera {
  position: absolute; inset: 0; z-index: 1;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity .28s ease-out;
}
.trailer-cabecera.listo { opacity: 1; }
/* Si ya estaba descargado, nada de fundido: se ve desde el primer momento */
.trailer-cabecera.instantaneo { transition: none; }
.etiqueta-trailer {
  position: absolute; z-index: 3; top: .8rem; left: .9rem;
  background: rgba(0, 0, 0, .68);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 3px;
  padding: .22rem .55rem;
  font-size: .62rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
}
.proximamente {
  background: var(--rojo); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; padding: .25rem .55rem; border-radius: 3px;
}
.avance-texto {
  color: #e8e8ec; line-height: 1.65;
  border-left: 3px solid var(--rojo); padding-left: .9rem;
  margin-bottom: 1.4rem;
}
.preview-cerrado {
  display: flex; align-items: center; gap: .9rem;
  background: #1a1a1f; border: 1px solid #2f2f36; border-radius: 6px;
  padding: 1rem 1.1rem; margin-bottom: 1.6rem;
}
.preview-llave { font-size: 1.5rem; filter: grayscale(1) brightness(1.5); }
.preview-cerrado p { font-size: .85rem; color: var(--gris-claro); line-height: 1.55; }
.preview-cerrado b { color: var(--blanco); }

/* ==========================================================================
   VÍDEOS VERTICALES Y HORIZONTALES
   --------------------------------------------------------------------------
   Los saludos llegan mezclados: unos grabados de pie (vertical) y otros
   apaisados. Cada caso necesita un trato distinto para que ninguno salga
   con franjas negras enormes ni recortado.
   ========================================================================== */

/* El fondo desenfocado que rellena los lados en los vídeos verticales
   vistos en pantalla ancha (es lo que hace Netflix con el contenido vertical) */
#repro-fondo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(38px) saturate(1.5) brightness(.45);
  transform: scale(1.25);       /* para que el desenfoque no deje bordes */
  pointer-events: none;
}
#repro-fondo[hidden] { display: none; }

/* --- Vídeo VERTICAL en pantalla ANCHA: centrado y alto completo --- */
@media (min-aspect-ratio: 1/1) {
  #reproductor.video-vertical #video-el,
  #reproductor.video-vertical mux-player {
    width: auto; height: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative; z-index: 1;
  }
  #reproductor.video-vertical #mux-hueco {
    display: flex; align-items: center; justify-content: center;
  }
}

/* --- Vídeo HORIZONTAL en móvil de pie: se ajusta y se ofrece girar --- */
.girar-aviso {
  position: absolute; z-index: 6;
  left: 50%; bottom: 22%; transform: translateX(-50%);
  display: none; align-items: center; gap: .5rem;
  background: rgba(0, 0, 0, .78); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 30px; padding: .55rem 1rem;
  color: #fff; font-size: .8rem; white-space: nowrap;
  animation: entrar .3s ease;
}
.girar-aviso .icono { display: inline-block; animation: girar-icono 2.2s ease-in-out infinite; }
@keyframes girar-icono {
  0%, 45% { transform: rotate(0); }
  60%, 90% { transform: rotate(90deg); }
  100% { transform: rotate(0); }
}
/* Solo aparece en móvil de pie con un vídeo apaisado */
@media (max-aspect-ratio: 1/1) and (max-width: 900px) {
  #reproductor.video-horizontal .girar-aviso { display: flex; }
}

/* ===== La cortinilla antes de cada episodio ===== */
.cortinilla {
  position: absolute; inset: 0; z-index: 20;
  background: #000;
  animation: entrar .2s ease;
}
.cortinilla[hidden] { display: none; }
.cortinilla canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cortinilla.saliendo { animation: cortinilla-fuera .45s ease forwards; }
@keyframes cortinilla-fuera { to { opacity: 0; } }
.cortinilla-saltar {
  position: absolute; z-index: 3;
  right: 1.25rem; bottom: calc(1.5rem + var(--seguro-abajo));
  padding: .5rem 1rem;
  border: 1px solid rgba(255,255,255,.35); border-radius: 4px;
  color: rgba(255,255,255,.75);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; animation: intro-mostrar-saltar .4s ease .8s forwards;
}
.cortinilla-saltar:hover { color: #fff; border-color: #fff; }

/* ===== Reproductor de Mux, vestido de NICOLEFLIX ===== */
#mux-hueco { position: absolute; inset: 0; z-index: 1; }
#mux-hueco[hidden] { display: none; }
mux-player {
  width: 100%; height: 100%;
  display: block;

  /* --- Colores de la casa --- */
  --media-accent-color: #e50914;      /* la barra de progreso, en rojo */
  --media-primary-color: #ffffff;     /* iconos y texto */
  --media-secondary-color: transparent;
  --media-object-fit: contain;

  /* --- Fuera el botón gigante del centro ---
     Netflix moderno no lo tiene: se pausa tocando el vídeo o abajo. */
  --center-controls: none;

  /* --- Fuera lo que duplica nuestra interfaz --- */
  --title-display: none;              /* el título ya está en nuestra cabecera */
  --top-controls: none;               /* la fila de arriba sobra */

  /* --- Barra inferior limpia, con degradado propio --- */
  --controls-backdrop-color: transparent;
  --media-control-background: transparent;
  --media-control-hover-background: rgba(255, 255, 255, .12);
  --media-range-track-height: 4px;
  --media-range-thumb-height: 13px;
  --media-range-thumb-width: 13px;
  --media-range-thumb-border-radius: 50%;
  --media-range-track-background: rgba(255, 255, 255, .28);
  --media-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* El degradado de abajo, para que los controles se lean sobre el vídeo.
   IMPORTANTE: no se toca ni el tamaño ni la colocación de los botones.
   El reproductor de Mux ya viene bien ordenado y al forzarle medidas
   propias se descolocaban (el tiempo se iba abajo, el volumen flotaba). */
mux-player::part(bottom) {
  background: linear-gradient(to top,
    rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 45%, transparent 100%);
}
/* Nada de botón central, ni el de cargando ni el previo */
mux-player::part(center play button),
mux-player::part(center button),
mux-player::part(play button pre-play) { display: none !important; }
/* Con Mux, nuestra barra de controles sobra: la suya es mejor */
#reproductor.con-mux .repro-controles { display: none; }
#reproductor.con-mux .repro-capa { background: none; pointer-events: none; }
#reproductor.con-mux .repro-cabecera { pointer-events: auto; }

/* ==========================================================================
   EPISODIOS DE FOTO + TEXTO (sin vídeo) y su visor a pantalla completa
   ========================================================================== */
.galeria {
  display: grid; gap: .5rem; margin-top: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.galeria-foto {
  position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden;
  background-size: cover; background-position: center; background-color: var(--gris);
  cursor: pointer; transition: transform .2s ease-in-out;
}
.galeria-foto:hover { transform: scale(1.05); z-index: 2; }
.galeria-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.35), transparent 55%);
}
/* La primera foto manda: ocupa el doble */
.galeria-foto:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }

.visor {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(0,0,0,.96);
  display: grid; place-items: center;
  animation: entrar .2s ease;
}
.visor img {
  max-width: 92vw; max-height: 78vh;
  border-radius: 4px; object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,.8);
}
.visor-cerrar {
  position: absolute; top: calc(1rem + var(--seguro-arriba)); right: 1.2rem;
  z-index: 3; font-size: 2.2rem; line-height: 1; color: var(--blanco);
}
.visor-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 2.2rem; color: var(--blanco);
  background: rgba(0,0,0,.45);
  transition: background .2s, transform .15s;
}
.visor-flecha:hover { background: rgba(255,255,255,.18); }
.visor-flecha.izq { left: .8rem; }
.visor-flecha.der { right: .8rem; }
.visor-pie {
  position: absolute; left: 0; right: 0;
  bottom: calc(1.2rem + var(--seguro-abajo));
  text-align: center; padding: 0 1.5rem;
}
.visor-pie p {
  max-width: 620px; margin: 0 auto .5rem;
  font-size: .92rem; line-height: 1.5; color: #e8e8ec;
}
.visor-pie span { font-size: .75rem; color: var(--gris-claro); letter-spacing: .08em; }
@media (max-width: 600px) {
  .visor-flecha { width: 44px; height: 44px; font-size: 1.8rem; }
  .visor img { max-height: 66vh; }
}

/* ==========================================================================
   ANIMACIONES (que nada se sienta plano)
   ========================================================================== */

/* Transición suave al cambiar de pantalla */
.pantalla.activa { animation: pantalla-entra .35s ease; }
@keyframes pantalla-entra { from { opacity: 0 } to { opacity: 1 } }

/* Las tarjetas entran en cascada al pintarse una fila */
.fila-carrusel .tarjeta, .fila-carrusel .tarjeta-top,
.coleccion-rejilla .tarjeta {
  animation: tarjeta-entra .45s cubic-bezier(.2,.9,.25,1) backwards;
  animation-delay: calc(var(--orden, 0) * 45ms);
}
@keyframes tarjeta-entra {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* El texto del hero entra deslizándose, como el billboard real */
.hero-texto > * { animation: hero-entra .6s cubic-bezier(.2,.9,.25,1) backwards; }
.hero-texto > :nth-child(2) { animation-delay: .08s; }
.hero-texto > :nth-child(3) { animation-delay: .16s; }
.hero-texto > :nth-child(4) { animation-delay: .24s; }
@keyframes hero-entra {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Flechas de las filas (aparecen al pasar el ratón, como las reales) */
.fila { position: relative; }
.fila-flecha {
  position: absolute; top: 0; bottom: 0; width: 46px; z-index: 6;
  display: grid; place-items: center; color: #fff; font-size: 1.6rem;
  opacity: 0; transition: opacity .25s ease, background .25s;
}
.fila-flecha.izq { left: 0; background: linear-gradient(to right, rgba(11,11,15,.85), transparent); border-radius: 0 4px 4px 0; }
.fila-flecha.der { right: 0; background: linear-gradient(to left, rgba(11,11,15,.85), transparent); border-radius: 4px 0 0 4px; }
.fila-flecha:hover { font-size: 2rem; }
@media (hover: hover) { .fila:hover .fila-flecha { opacity: 1; } }

/* Perfiles: aro blanco al pasar el ratón, como el real */
.perfil { transition: transform .2s ease-in-out; }
.perfil:not(.bloqueado):hover { transform: scale(1.06); }
.perfil:not(.bloqueado):hover .perfil-avatar,
.perfil:not(.bloqueado):focus .perfil-avatar { outline: 3px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .fila-carrusel .tarjeta, .coleccion-rejilla .tarjeta,
  .hero-texto > *, .pantalla.activa { animation: none !important; }
}

/* ==========================================================================
   Perfiles y avatares: clavados al real (la carita clásica de Netflix)
   ========================================================================== */
#perfiles.activa { background: #141414; }
.perfiles-titulo { font-weight: 400; }
.perfil-avatar {
  position: relative;
  background: transparent;
  /* Repuesto: el atajo "background" de arriba borra el encuadre y la foto
     salía ampliada por una esquina en vez de centrada. */
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border-radius: 4px;
}
.perfil-avatar svg { display: block; width: 100%; height: 100%; }
.perfil-candado {
  position: absolute; right: 6px; bottom: 6px;
  font-size: .95rem; filter: grayscale(1) brightness(1.6);
}
.perfil-nombre { color: #808080; transition: color .2s; }
.perfil:not(.bloqueado):hover .perfil-nombre,
.perfil:not(.bloqueado):focus .perfil-nombre { color: #fff; }
.perfil:not(.bloqueado):hover { transform: none; }  /* el real no escala: aro blanco y nombre */
/* Sin marco blanco alrededor de la foto: al pasar por encima basta con
   que crezca un poco, como en el resto del sitio. */
.perfil:not(.bloqueado):hover .perfil-avatar,
.perfil:not(.bloqueado):focus .perfil-avatar { outline: none; }
.perfil-avatar { border: 0; }
.perfiles-nota { text-transform: none; letter-spacing: normal; }

/* Aviso de sonido en la pantalla de perfiles */
.aviso-sonido {
  display: flex; align-items: center; gap: .8rem;
  max-width: 380px; margin: 1.6rem auto 0;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px; padding: .8rem 1rem;
  text-align: left;
  animation: entrar .4s ease .6s backwards;
}
.aviso-sonido[hidden] { display: none; }
.aviso-sonido-icono { font-size: 1.5rem; flex: none; }
.aviso-sonido b { display: block; font-size: .88rem; color: var(--blanco); }
.aviso-sonido span { font-size: .8rem; color: var(--gris-claro); line-height: 1.4; }

.boton-fantasma {
  display: block;
  margin: 2.6rem auto 0;
  background: transparent;
  border: 1px solid #808080;
  color: #808080;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .6em 1.6em;
  transition: color .2s, border-color .2s;
}
.boton-fantasma:hover { color: #fff; border-color: #fff; }

/* Ojo: "background: transparent" es un atajo que borra el background-size,
   y sin él la foto sale ampliada por una esquina. Hay que reponerlo. */
.avatar-mini {
  background: transparent; overflow: hidden;
  background-size: cover; background-position: center;
}
.avatar-mini svg { display: block; width: 100%; height: 100%; }
.gestionar-avatar {
  background: transparent; overflow: hidden;
  background-size: cover; background-position: center;
}
.gestionar-avatar svg { display: block; width: 100%; height: 100%; }
.fila-cuerpo { position: relative; }

/* ===== Escritorio ===== */
@media (min-width: 768px) {
  .coleccion-titulo { padding-left: 2.5rem; padding-right: 2.5rem; }
  .coleccion-nota { padding-left: 2.5rem; }
  .coleccion-rejilla { padding: 1.6rem 2.5rem 4rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .novedades-lista { padding-left: 2.5rem; margin: 0; }
  .menu-enlace { font-size: .86rem; }
}

/* (bloque original de escritorio) */
@media (min-width: 768px) {
  .cabecera { padding-left: 2.5rem; padding-right: 2.5rem; }
  .logo-mini { font-size: 1.6rem; }
  .hero { min-height: 82vh; padding: 3rem 2.5rem 3.5rem; }
  .fila-titulo, .fila-carrusel { padding-left: 2.5rem; padding-right: 2.5rem; }
  .tarjeta { width: 172px; }
  .buscador { padding: .75rem 2.5rem; }
  .resultado-busqueda { padding: 2rem 2.5rem; }
  .detalle-cuerpo { padding: 2rem 2.5rem 4rem; max-width: 860px; }
  .detalle-cabecera { padding: 2.5rem; min-height: 55vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   CABECERA EN MOVIL - va al final a proposito: tiene que ganar a las
   reglas de .cabecera-izquierda que estan mas arriba en este archivo.
   ========================================================================== */
/* En móvil la cabecera se parte en dos filas, como la de Netflix:
   arriba el logo y los iconos, abajo el menú y la hora. Así el reloj
   deja de pisar la navegación en pantallas estrechas. */
@media (max-width: 740px) {
  .cabecera {
    flex-wrap: wrap;
    row-gap: .35rem;
    padding-bottom: .5rem;
  }
  /* El logo y el menú dejan de ir en un bloque para poder repartirse
     entre las dos filas por separado. */
  .cabecera-izquierda { display: contents; }
  .logo-mini { order: 1; margin-right: auto; }
  .cabecera-acciones { order: 2; }
  .menu-principal {
    order: 3;
    flex: 1 1 calc(100% - 94px);
    min-width: 0;
    gap: 1.1rem;
    padding-right: .5rem;
    /* Se difumina el borde para que se note que hay más menú al desplazar */
    -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent);
    mask-image: linear-gradient(90deg, #000 72%, transparent);
  }
  .reloj {
    order: 4;
    margin: 0 0 0 auto;
    padding-left: .45rem;
    flex: none;
    font-size: .72rem;
  }
  .reloj .fecha-larga { display: none; }
}