:root{
  --negro:#121212;
  --carbon:#1b1b1c;
  --grafito:#262627;
  --gris:#3a3a3c;
  --humo:#8e8e93;
  --plata:#d4d4d8;
  --blanco:#f2f2f3;
  --radio:4px;
  --acento:#8b5cf6;
  --fuente-titulo:"Bricolage Grotesque",system-ui,sans-serif;
  --fuente-texto:"DM Sans",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:80px}
body{background:var(--negro);color:var(--plata);font-family:var(--fuente-texto);line-height:1.6;min-height:100vh}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blanco);outline-offset:3px}
img{max-width:100%;display:block}

/* Barra superior */
.barra{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;padding:14px 5vw;background:rgba(18,18,18,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--grafito)}
.logo{transition:text-shadow .3s}
.logo:hover{text-shadow:0 0 18px var(--acento)}
.logo{font-family:var(--fuente-titulo);font-weight:800;font-size:1.5rem;color:var(--blanco);letter-spacing:-.02em}
.barra .espacio{flex:1}
.buscar{background:var(--carbon);border:1px solid var(--gris);color:var(--blanco);padding:9px 14px;border-radius:4px;width:min(260px,40vw);font:inherit}
.buscar::placeholder{color:var(--humo)}
.btn{background:var(--blanco);color:var(--negro);border:0;padding:9px 18px;border-radius:4px;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:var(--plata)}
.btn.sec{background:transparent;color:var(--plata);border:1px solid var(--gris)}
.hamb{position:relative;width:42px;height:42px;padding:0;display:grid;place-content:center;gap:5px;flex:none}
.hamb i{display:block;width:20px;height:2px;background:currentColor}
.hamb[data-n]::after{content:attr(data-n);position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;display:grid;place-items:center;background:var(--acento);color:#fff;font-size:.7rem;font-style:normal;border-radius:3px}
.btn.sec:hover{border-color:var(--humo)}
.usuario{display:flex;align-items:center;gap:10px}
.usuario img{width:32px;height:32px;border-radius:4px;border:1px solid var(--gris)}
.usuario span{font-size:.9rem;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oculto{display:none!important}

/* Portada */
.portada{padding:5vh 5vw 2vh}
.portada h1{font-family:var(--fuente-titulo);font-weight:800;font-size:clamp(2.2rem,7vw,4.5rem);line-height:.95;letter-spacing:-.04em;color:var(--blanco);max-width:12ch}
.portada p{margin-top:18px;color:var(--humo);max-width:46ch}
.panel-gen{position:absolute;top:100%;left:5vw;right:5vw;max-width:760px;max-height:70vh;overflow:auto;padding:16px;background:rgba(27,27,28,.98);border:1px solid var(--gris);border-radius:0 0 6px 6px;box-shadow:0 20px 40px rgba(0,0,0,.6);animation:baja .18s ease-out}
.panel-gen[hidden]{display:none}
@keyframes baja{from{opacity:0;transform:translateY(-6px)}}
.generos{display:flex;flex-wrap:wrap;gap:8px}
.activos{display:flex;flex-wrap:wrap;gap:8px;padding:0 5vw}
.activos:empty{display:none}
.filtros{padding-bottom:12px!important}
.chip{background:var(--carbon);border:1px solid var(--gris);color:var(--plata);padding:6px 14px;border-radius:4px;font:inherit;font-size:.9rem;cursor:pointer}
.chip:hover{border-color:var(--acento)}
.chip[aria-pressed="true"]{background:var(--acento);color:#fff;border-color:var(--acento)}

/* Destacado */
.destacado{position:relative;display:flex;align-items:flex-end;gap:24px;margin:10px 5vw 22px;padding:24px;min-height:280px;border-radius:6px;overflow:hidden;border:1px solid var(--grafito);background:linear-gradient(90deg,rgba(18,18,18,.96) 30%,rgba(18,18,18,.55)),var(--fondo) center/cover,var(--carbon)}
.destacado[hidden]{display:none}
.destacado>*{transition:opacity .35s}.destacado.cambia>*{opacity:0}
.puntos{position:absolute;right:14px;bottom:12px;display:flex;gap:6px}
.puntos button{width:18px;height:4px;border:0;padding:0;background:rgba(255,255,255,.3);cursor:pointer}
.puntos button[aria-current="true"]{background:var(--acento)}
.destacado img{width:150px;aspect-ratio:2/3;object-fit:cover;border-radius:var(--radio);box-shadow:0 12px 30px rgba(0,0,0,.6);flex:none}
.destacado h2{font-family:var(--fuente-titulo);font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.05;color:var(--blanco);margin:4px 0 8px}
.destacado small{color:var(--acento);font-weight:600}
.destacado p{max-width:60ch;color:var(--plata);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:14px}
.destacado .btn{display:inline-block;background:var(--acento);color:#fff}
.destacado .btn:hover{filter:brightness(1.15)}
.filtros{padding:0 5vw 12px}
.filtros .buscar{width:auto;min-width:170px}

/* Catálogo */
.catalogo{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px;padding:10px 5vw 8vh}
.tarjeta{display:block;transition:transform .25s}
.poster{transition:box-shadow .25s}
.tarjeta:hover .poster{box-shadow:0 10px 30px rgba(139,92,246,.35),0 0 0 1px var(--acento)}
@media(hover:hover){.tarjeta:hover{transform:scale(1.03)}}
.poster{aspect-ratio:2/3;border-radius:var(--radio);background:linear-gradient(160deg,var(--gris),var(--carbon));overflow:hidden;position:relative}
.poster img{width:100%;height:100%;object-fit:cover}
.poster{perspective:700px}
/* Efecto persiana: el póster está cortado en 6 tiras que giran una tras otra y dejan ver la info */
.tira{position:absolute;left:0;right:0;top:calc(var(--i)*100%/6);height:calc(100%/6 + 1px);
  background-image:var(--img);background-size:100% 600%;background-position:0 calc(var(--i)*100%/5);
  backface-visibility:hidden;transition:transform .55s cubic-bezier(.3,.7,.2,1) calc(var(--i)*55ms)}
.info{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:14px;
  background:linear-gradient(180deg,var(--grafito),var(--negro));opacity:0;transition:opacity .2s}
.info strong{font-family:var(--fuente-titulo);font-size:1.8rem;color:var(--blanco);line-height:1}
.info span{font-size:.85rem;color:var(--plata)}
.tarjeta:hover .tira,.tarjeta:focus-visible .tira{transform:rotateX(180deg)}
.tarjeta:hover .info,.tarjeta:focus-visible .info{opacity:1;transition-delay:.15s}
.poster .sin-img{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--fuente-titulo);font-size:2.4rem;color:var(--humo)}
.tarjeta h3{margin-top:10px;font-size:1rem;color:var(--blanco);font-weight:600;line-height:1.3}
.tarjeta small{color:var(--humo)}
.vacio{grid-column:1/-1;color:var(--humo);padding:40px 0}

/* Detalle */
.detalle{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:36px;padding:5vh 5vw 3vh}
.detalle .poster{width:100%}
.detalle h1{font-family:var(--fuente-titulo);font-weight:800;font-size:clamp(2rem,5vw,3.6rem);line-height:1;letter-spacing:-.03em;color:var(--blanco)}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.meta span{background:var(--grafito);padding:3px 12px;border-radius:4px;font-size:.85rem;color:var(--plata)}
.sinopsis{max-width:62ch;color:var(--plata)}
.volver{display:inline-block;padding:18px 5vw 0;color:var(--humo)}
.volver:hover{color:var(--blanco)}

.reproductor{padding:0 5vw 8vh;display:grid;grid-template-columns:1fr 320px;gap:24px}
.pantalla{aspect-ratio:16/9;background:#000;border-radius:var(--radio);overflow:hidden;position:relative;border:1px solid var(--grafito)}
.pantalla video,.pantalla iframe{width:100%;height:100%;border:0;display:block}
.aviso{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--humo)}
.aviso .btn{margin-top:14px}
.episodios{background:var(--carbon);border-radius:var(--radio);border:1px solid var(--grafito);max-height:480px;overflow:auto}
.episodios h2{font-family:var(--fuente-titulo);font-size:1.05rem;color:var(--blanco);padding:14px 16px;border-bottom:1px solid var(--grafito);position:sticky;top:0;background:var(--carbon)}
.episodios button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--grafito);color:var(--plata);padding:12px 16px;font:inherit;cursor:pointer}
.episodios button:hover{background:var(--grafito)}
.episodios button[aria-current="true"]{background:var(--blanco);color:var(--negro);font-weight:600}

/* Reproductor propio */
.rp{position:absolute;inset:0;background:#000;color:#fff;user-select:none}
.rp video{width:100%;height:100%;object-fit:contain;cursor:pointer}
.rp-ctl{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 8px;background:linear-gradient(transparent,rgba(0,0,0,.85));transition:opacity .25s}
.rp.quieto .rp-ctl{opacity:0;pointer-events:none}.rp.quieto{cursor:none}
.rp-fila{display:flex;align-items:center;gap:4px;margin-top:4px}
.rp-fila .espacio{flex:1}
.rp-fila button{display:flex;align-items:center;justify-content:center;gap:2px;background:none;border:0;color:#fff;min-width:44px;height:44px;border-radius:4px;cursor:pointer;transition:background .15s,transform .1s}
.rp-fila button:hover{background:rgba(255,255,255,.15)}.rp-fila button:active{transform:scale(.9)}
.rp-fila button[hidden]{display:none}
.rp-fila b{font-size:.65rem;font-weight:600}
.rp-t{font-size:.85rem;font-variant-numeric:tabular-nums;margin-left:6px;white-space:nowrap}
.rp input[type=range]{-webkit-appearance:none;appearance:none;height:5px;border-radius:5px;background:linear-gradient(90deg,var(--acento) var(--p,0%),rgba(255,255,255,.3) var(--p,0%));cursor:pointer;touch-action:none}
.rp-barra{width:100%;display:block}.rp-vol{width:80px}
.rp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:2px;background:#fff;box-shadow:0 0 0 3px var(--acento)}
.rp input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:2px;background:#fff}
.rp-carga{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px;border:4px solid rgba(255,255,255,.25);border-top-color:var(--acento);border-radius:50%;animation:giro .8s linear infinite}
.rp-fila [data-a=adelante] svg{transform:scaleX(-1)}
.rp-toast{position:absolute;left:12px;right:12px;top:12px;padding:10px 12px;background:rgba(0,0,0,.85);border:1px solid var(--acento);font-size:.85rem;text-align:center}
.rp-toast[hidden]{display:none}
.rp-carga[hidden],.rp-error[hidden]{display:none}
.rp-error{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:rgba(0,0,0,.8)}
@keyframes giro{to{transform:rotate(360deg)}}

@media(max-width:820px){
  .barra{gap:8px;padding:10px 4vw;flex-wrap:nowrap}
  .logo{font-size:1rem}
  .buscar{flex:1 1 auto;min-width:0;width:auto;padding:7px 10px;font-size:.8rem}
  .btn{padding:6px 9px;font-size:.74rem}
  .barra{gap:6px}
  .hamb{width:36px;height:36px;padding:0}
  #btn-perfil{flex:none;max-width:48vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logo{flex:none}
  .portada{padding:3vh 4vw 1vh}.portada h1{font-size:clamp(1.8rem,8vw,2.6rem);max-width:none}.portada p{font-size:.8rem}
  .catalogo{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:12px 8px;padding:8px 4vw 6vh}
  .tarjeta{min-width:0}.tarjeta h3{overflow-wrap:anywhere;font-size:.68rem;margin-top:5px;line-height:1.2;font-weight:600}.tarjeta small{font-size:.6rem}.info strong{font-size:1rem}.info span{font-size:.6rem}.info{padding:6px}
  .filtros,.activos{padding-left:4vw;padding-right:4vw}
  .panel-gen{left:4vw;right:4vw;padding:10px}.generos{gap:6px}.chip{font-size:.78rem;padding:5px 10px}
  .destacado{margin:6px 4vw 14px;padding:14px;gap:12px;min-height:0}.destacado img{width:24vw;max-width:110px}.destacado h2{font-size:1.2rem}.destacado p{font-size:.78rem;-webkit-line-clamp:3;margin-bottom:10px}.destacado small{font-size:.75rem}
  .rp-vol{display:none}.rp-t{font-size:.75rem}.rp-fila button{min-width:38px}
  .detalle{grid-template-columns:1fr}
  .detalle .poster{max-width:200px}
  .reproductor{grid-template-columns:1fr}
  .usuario span{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Destacado en computador: póster grande y más aire */
@media(min-width:821px){
  .destacado{min-height:380px;padding:36px 48px;gap:44px;align-items:center;background:linear-gradient(90deg,rgba(18,18,18,.97) 32%,rgba(18,18,18,.45)),var(--fondo) center 20%/cover,var(--carbon)}
  .destacado img{width:min(240px,20vw);min-width:180px;box-shadow:0 18px 44px rgba(0,0,0,.7)}
  .destacado h2{font-size:clamp(2rem,3.6vw,3.4rem);margin:8px 0 14px}
  .destacado small{font-size:.95rem}
  .destacado p{font-size:1.05rem;max-width:58ch;-webkit-line-clamp:4;margin-bottom:20px}
  .destacado .btn{padding:12px 28px;font-size:1rem}
  .puntos{right:24px;bottom:20px}.puntos button{width:26px;height:5px}
}