:root{color-scheme:dark;--red:#f22d45;--bg:#090b10;--card:#191d26}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:white;font:15px system-ui,Arial}button,input,select{font:inherit}button{cursor:pointer}header{display:flex;align-items:center;gap:25px;padding:18px 5%;background:#101218;position:sticky;top:0;z-index:5;border-bottom:1px solid #252936}.logo{font-size:24px;font-weight:900;white-space:nowrap}.logo span{color:var(--red)}nav{display:flex;gap:18px;flex-wrap:wrap}nav button{border:0;background:transparent;color:#ddd}nav button.active,nav button:hover{color:var(--red)}.search{margin-left:auto;background:#20242d;border:1px solid #3b414b;border-radius:30px;padding:10px;color:white;min-width:160px}.hero{min-height:350px;padding:75px 6%;background:linear-gradient(90deg,#0a0c11 15%,#141923dd 65%,#212f46);display:flex;align-items:center}.hero h1{font-size:clamp(34px,6vw,65px);margin:5px 0}.hero p{max-width:550px;color:#c7cbd5;line-height:1.6}.eyebrow{color:#ff455c;font-weight:800;letter-spacing:2px}.primary,.secondary{border:0;border-radius:9px;padding:12px 22px;font-weight:700}.primary{background:var(--red);color:white}.secondary{background:#303641;color:white}.actions{display:flex;gap:12px;margin-top:22px}main{padding:25px 5% 80px}.section-title{margin:30px 0 15px;font-size:23px}.categories{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.category{padding:25px 10px;text-align:center;background:linear-gradient(135deg,#222b42,#361d32);border-radius:12px;font-weight:800}.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}.movie{background:#171b23;border-radius:12px;overflow:hidden;border:1px solid #2b3039}.poster{height:165px;display:flex;align-items:center;justify-content:center;font-size:58px;background:linear-gradient(135deg,#202d43,#4a2538);user-select:none}.movie:nth-child(2n) .poster{background:linear-gradient(135deg,#3a263e,#1a3941)}.movie .details{padding:14px}.movie h3{margin:0 0 6px}.movie p{color:#aeb6c5;font-size:13px}.movie button{width:100%;margin-top:6px}.empty{color:#aeb6c5}.modal{position:fixed;inset:0;background:#050609ed;z-index:10;display:none;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.player-shell{width:min(100%,1000px);background:#121722;border:1px solid #333b4b;border-radius:15px;overflow:hidden}.player-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}.player-head button{background:transparent;color:white;border:0;font-size:25px}.stage{position:relative;background:black;aspect-ratio:16/9}.stage video,.stage iframe{width:100%;height:100%;display:block;border:0}.stage .placeholder{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:8px;color:#c6cedc;background:linear-gradient(135deg,#101826,#050507)}.placeholder strong{font-size:35px;color:#fff}.ad{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(135deg,#162d45,#351b2d);text-align:center;padding:30px;z-index:2}.ad.show{display:flex}.ad h2{margin:8px}.controls{padding:14px 18px 18px;background:#121722}.progress{width:100%;accent-color:var(--red);cursor:pointer}.control-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.control-row button{background:#2a303c;border:0;border-radius:8px;color:white;padding:10px 12px}.control-row button:hover{background:#404957}.time{font-variant-numeric:tabular-nums;color:#b9c2d1;font-size:13px;margin-left:auto}.notice{margin-top:20px;background:#151a23;border-left:3px solid var(--red);padding:16px;color:#b9c3d1;line-height:1.6}.muted{color:#aeb7c5;font-size:13px}footer{padding:30px 5%;color:#9ca4b3;border-top:1px solid #2a3039}@media(max-width:760px){header{flex-wrap:wrap;gap:12px;padding:13px 4%}nav{order:3;width:100%;overflow:auto;flex-wrap:nowrap}.search{width:100%;order:2}.hero{padding:45px 5%;min-height:290px}.categories{grid-template-columns:repeat(2,1fr)}.catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.poster{height:130px}.control-row{gap:6px}.control-row button{padding:9px}.time{width:100%;margin:5px 0 0}}

/* GZOUK PLAY V2 — DISEÑO ORIGINAL INSPIRADO EN LA EXPERIENCIA DE STREAMING */
:root{--red:#ef263e;--bg:#09090c;--card:#16171d}body{background:#09090c}header{background:#101014ed;backdrop-filter:blur(16px);border-bottom:0;gap:30px}nav button{font-size:14px}.logo{letter-spacing:-.6px}.hero{position:relative;min-height:530px;background-size:cover;background-position:center;transition:opacity .4s ease;padding:100px 6% 90px;isolation:isolate}.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#09090cf5 0%,#09090cba 38%,#09090c33 78%),linear-gradient(0deg,#09090c 0%,transparent 45%)}.hero p{font-size:16px;max-width:510px}.hero h1{font-weight:900;letter-spacing:-1.7px}.hero-dots{display:none;gap:10px;margin-top:26px}.hero-dots button{width:10px;height:10px;border:0;border-radius:50%;padding:0;background:#8b8b92}.hero-dots button.active{background:var(--red);width:27px;border-radius:20px}.hero-arrows{display:none}.hero-arrows button,.rail-arrow{border:1px solid #ffffff35;background:#191a20c9;color:white;border-radius:50%;width:42px;height:42px;font-size:24px}.hero-arrows button:hover,.rail-arrow:hover{background:var(--red)}main{padding-top:0;position:relative;z-index:1}.categories{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.category{border:1px solid #ffffff1e;min-height:138px;position:relative;overflow:hidden;text-align:left;display:flex;align-items:end;padding:16px;background-size:cover;background-position:center;cursor:pointer;font-size:19px;text-shadow:0 2px 12px #000}.category:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000e,transparent 90%)}.category span{position:relative}.category:hover{transform:translateY(-3px);border-color:#fff8}.section-title{font-size:23px;margin:35px 0 14px}.rail-heading{display:flex;justify-content:space-between;align-items:center}.rail-buttons{display:flex;gap:8px}.rail{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 15px}.rail::-webkit-scrollbar{display:none}.movie{flex:0 0 clamp(170px,19vw,265px);scroll-snap-align:start;background:transparent;border:0;border-radius:7px;cursor:pointer;transition:transform .2s}.movie:hover{transform:scale(1.025)}.poster{height:auto;aspect-ratio:16/10;border-radius:7px;overflow:hidden;background-size:cover;background-position:center;position:relative;align-items:end;justify-content:start;padding:10px;font-size:12px}.poster:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0009,transparent 65%)}.poster .poster-label{position:relative;background:#e51c36;padding:3px 6px;border-radius:3px;font-weight:800;font-size:10px}.movie .details{padding:10px 1px}.movie h3{font-size:15px;margin:0 0 5px}.movie p{margin:0;color:#9da1ad}.movie button{display:none}.category:focus-visible,.movie:focus-visible{outline:3px solid white}.notice{margin-top:35px}.catalog{display:none}.empty{padding:25px;color:#bbb}.filter-view .hero,.filter-view .categories{display:none}.filter-view main{padding-top:28px}@media(max-width:760px){.hero{min-height:420px;padding:80px 5% 60px}.hero h1{font-size:40px}.hero p{font-size:14px}.hero-arrows{bottom:30px}.categories{grid-template-columns:repeat(2,minmax(0,1fr))}.category{min-height:115px}.movie{flex-basis:65vw}.rail-heading h2{font-size:19px}header{gap:12px}}

/* SECCIÓN DE ESTILOS: BOTONES DE GÉNERO COMPACTOS EN FILAS HORIZONTALES CON SALTO AUTOMÁTICO. */
.categories{display:flex!important;flex-wrap:wrap;gap:7px!important;align-items:center;margin:10px 0 24px}
.category{display:inline-flex!important;align-items:center;justify-content:center;min-height:0!important;width:auto!important;flex:0 0 auto;padding:8px 12px!important;background:#1b1c27!important;background-image:none!important;border:1px solid #30313f!important;border-radius:6px!important;color:#d5d5df;font-size:13px!important;font-weight:500!important;text-shadow:none!important;line-height:1.15;transform:none!important;transition:background .15s,border-color .15s}
.category:before{display:none!important}.category:hover,.category.active{background:#30303d!important;border-color:#e9324b!important;color:white}
.category:focus-visible{outline:2px solid #f43f50;outline-offset:2px}
main>.section-title:first-child{font-size:12px!important;letter-spacing:2.5px;color:#a2a2b2;font-weight:800;margin:27px 0 12px}
@media(max-width:760px){.categories{gap:6px!important}.category{font-size:12px!important;padding:7px 9px!important}}

/* ===== DEMO 8: TOP 10 SIN DESPLAZAMIENTO VERTICAL INTERNO ===== */
/* overflow-y:hidden elimina el scroll vertical accidental sin afectar el scroll normal de la página. */
.section-title{text-transform:uppercase!important;letter-spacing:.35px}
.top-ten-wrap{position:relative;margin:4px 0 24px}
.top-ten-track{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;padding:8px 5px 14px;touch-action:pan-x pan-y}
.top-ten-track::-webkit-scrollbar{display:none}
.rank-card{position:relative;flex:0 0 225px;height:205px;display:flex;align-items:center;scroll-snap-align:start;cursor:pointer;isolation:isolate}
.rank-number{font-size:190px;line-height:1;font-weight:1000;letter-spacing:-16px;color:#101014;-webkit-text-stroke:2px #777;paint-order:stroke fill;position:absolute;left:0;bottom:-8px;z-index:-1;user-select:none}
.rank-poster{width:117px;height:175px;object-fit:cover;position:absolute;left:94px;top:9px;border-radius:5px;box-shadow:0 8px 18px #0009}
.rank-card[data-rank="10"]{flex-basis:270px}.rank-card[data-rank="10"] .rank-poster{left:135px}
.rank-label{position:absolute;left:100px;bottom:4px;background:#df1732;color:#fff;font-size:10px;font-weight:800;padding:4px 5px;border-radius:3px;max-width:125px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rank-card[data-rank="10"] .rank-label{left:140px}
.top-arrow{position:absolute;right:0;top:35%;z-index:2;border:0;border-radius:30px 0 0 30px;background:#18191de8;color:white;width:45px;height:65px;font-size:28px;opacity:0;transition:opacity .2s}
.top-arrow.prev{left:0;right:auto;border-radius:0 30px 30px 0}
.top-ten-wrap:hover .top-arrow,.top-arrow:focus-visible{opacity:1}
.top-arrow.hidden{display:none}
.site-footer{padding:30px 5% 24px;background:#101014;border-top:1px solid #282830;text-align:center}
.footer-brand{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.socials{display:flex;gap:9px}.socials a{display:grid;place-items:center;width:33px;height:33px;border-radius:7px;background:#22242b;border:1px solid #3a3b42;color:white;text-decoration:none;font-weight:800}.socials a:hover{background:#e52940}.site-footer p{font-size:12px;color:#a4a5af;margin-top:23px}
@media(max-width:760px){.rank-card{flex-basis:175px;height:175px}.rank-number{font-size:150px;letter-spacing:-12px}.rank-poster{left:75px;width:94px;height:143px}.rank-label{left:79px;bottom:4px;font-size:9px}.rank-card[data-rank="10"]{flex-basis:215px}.rank-card[data-rank="10"] .rank-poster{left:115px}.rank-card[data-rank="10"] .rank-label{left:119px}.top-arrow{display:none!important}}

/* ===== DEMO 9: FICHAS INFORMATIVAS. Modifica los textos en INFO_PELICULAS. ===== */
.info-overlay{position:fixed;inset:0;z-index:8;background:#000c;display:none;align-items:center;justify-content:center;padding:22px;overflow-y:auto}
.info-overlay.open{display:flex}.info-panel{position:relative;width:min(860px,100%);max-height:min(92vh,950px);overflow-y:auto;background:#171922;border:1px solid #353744;border-radius:17px;box-shadow:0 25px 90px #000d}.info-cover{height:clamp(190px,35vw,335px);background-position:center;background-size:cover;position:relative}.info-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#171922 0%,transparent 80%)}.info-content{position:relative;margin-top:-65px;padding:0 clamp(20px,4vw,40px) 32px}.info-content h2{font-size:clamp(30px,4vw,48px);margin:0 0 10px;letter-spacing:-1px}.info-meta{color:#c4c8d1;font-size:14px;margin-bottom:15px}.info-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}.info-tags span{border:1px solid #a83a4d;color:#ffd3da;border-radius:20px;padding:5px 11px;font-size:12px}.info-desc{color:#e0e1e8;line-height:1.75;max-width:650px}.info-extra{color:#b0b5c0;font-size:13px;line-height:1.8;margin:20px 0}.info-extra b{color:white}.info-close{position:absolute;z-index:3;right:18px;top:16px;background:#090a0dcc;border:1px solid #ffffff55;border-radius:50%;width:40px;height:40px;color:white;font-size:24px}.info-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.info-cta button{min-height:45px}.info-page{display:none;min-height:65vh;background:#09090c}.info-page.open{display:block}.info-page .info-cover{height:clamp(260px,45vw,520px)}.info-page .info-content{max-width:1150px;margin:-120px auto 0;padding:0 5% 65px}.info-page .info-content h2{font-size:clamp(36px,6vw,70px)}.info-page .info-desc{font-size:16px}.info-page .info-close{display:none}.back-link{display:inline-flex;gap:8px;margin:24px 5%;background:#24252f;border:1px solid #454655;border-radius:9px;padding:11px 17px;color:white}.demo-note{font-size:12px;color:#aeb2c0;margin-top:12px}.movie{position:relative}.movie:focus-visible,.rank-card:focus-visible{outline:3px solid #f22d45;outline-offset:3px}@media(max-width:650px){.info-overlay{padding:8px;align-items:center}.info-panel{max-height:95dvh}.info-content{margin-top:-28px}.info-page .info-content{margin-top:-60px}}

/* =========================================================
  GZOUK PLAY — AJUSTES FINALES PARA PUBLICACIÓN
  - Oculta visualmente las barras, conserva scroll y accesibilidad.
  - No bloquea zoom ni selección de texto.
  - Ajusta Safari iPhone y pantallas pequeñas.
========================================================= */
html,body{max-width:100%;overflow-x:clip;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,.info-panel::-webkit-scrollbar,.info-overlay::-webkit-scrollbar{display:none;width:0;height:0}
.info-panel,.info-overlay{scrollbar-width:none}
img{-webkit-user-drag:none}
@media(max-width:760px){.search-panel input{font-size:16px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ===============================================================
 GZOUK PLAY - CORRECCIONES DE PUBLICACIÓN V13
 Mantén estas reglas al final: prevalecen sobre versiones anteriores.
 =============================================================== */
/* 01. Cabecera, logo y búsqueda compacta */
.logo-home{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:3px}.logo-home:hover{color:#fff}.logo-home:focus-visible{outline:2px solid #fff;outline-offset:5px}
header{min-height:74px;display:flex;align-items:center;gap:clamp(12px,2vw,32px);padding:14px 5%}header nav{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(10px,2vw,25px);min-width:0}header nav button{white-space:nowrap;padding:8px 0}button{color:inherit}
.search-wrap{position:relative;display:flex;align-items:center;margin-left:auto;flex:0 0 auto}.search-toggle,.search-close{display:grid;place-items:center;background:transparent;color:#f4f4f7;border:0;border-radius:9px;width:42px;height:42px;padding:0}.search-toggle:hover,.search-close:hover{background:#292a32}.search-panel{display:none;align-items:center;gap:6px;position:absolute;right:0;top:calc(100% + 12px);width:min(370px,calc(100vw - 32px));padding:7px;background:#171920;border:1px solid #373a45;border-radius:12px;box-shadow:0 16px 35px #0009;z-index:30}.search-wrap.open .search-panel{display:flex}.search-panel .search{width:100%;min-width:0;margin:0;font-size:16px;background:#242731;border:1px solid #424652;border-radius:8px;padding:11px 12px;outline-offset:2px}.search-close{flex:0 0 35px;font-size:24px}
/* 02. Secciones del catálogo: portadas en cuadrícula vertical, sin carrusel lateral */
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:16px;margin:10px 0 26px}.catalog-grid .movie{width:100%;min-width:0;transform:none}.catalog-grid .movie:hover{transform:translateY(-3px)}.catalog-grid .poster{aspect-ratio:16/10;height:auto}.catalog-grid .movie .details{padding:9px 2px}.catalog-grid .movie h3{font-size:14px;overflow-wrap:anywhere}.catalog-grid .movie p{font-size:12px}
/* 03. Fichas y vista rápida: evitar desbordes */
.info-overlay{z-index:40;overscroll-behavior:contain}.info-panel{width:min(860px,100%);overflow-x:hidden}.info-page{position:relative}.info-page .info-content{position:relative}.info-content{min-width:0}.info-content .info-cta{align-items:center}.info-cta button{border:0;border-radius:9px;font-weight:700;padding:12px 16px}.info-cta .secondary{background:#333844}.back-link{position:relative;z-index:2;align-items:center;background:#252630;border:1px solid #484b55;border-radius:999px;padding:10px 18px;font-weight:700;transition:background .2s}.back-link:hover{background:#b81f36}.info-page .info-content{max-width:1160px}.quick-open{overflow:hidden}
/* 04. Temporadas y episodios: filas, miniaturas, texto y selector */
.episodes-section{margin-top:30px;border-top:1px solid #343640;padding-top:20px}.episodes-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.episodes-head h3{margin:0;font-size:22px;letter-spacing:.4px}.season-select{appearance:none;-webkit-appearance:none;min-width:165px;padding:11px 38px 11px 15px;background:#282b35;color:#fff;border:1px solid #494d58;border-radius:9px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat}.season-select option{background:#20232b;color:white}.episode-list{display:flex;flex-direction:column;gap:0}.episode-item{display:grid;grid-template-columns:32px minmax(105px,175px) minmax(0,1fr) 20px;align-items:center;text-align:left;gap:16px;width:100%;background:transparent;border:0;border-top:1px solid #343640;border-radius:0;padding:15px 8px;color:#fff;min-height:120px}.episode-item:last-child{border-bottom:1px solid #343640}.episode-item:hover,.episode-item:focus-visible{background:#242730;outline:none}.episode-number{font-size:23px;font-weight:700;text-align:center;color:#aeb3bf}.episode-thumb{position:relative;display:block;aspect-ratio:16/9;background-color:#272c37;background-size:cover;background-position:center;border-radius:8px;overflow:hidden}.episode-thumb:after{content:'';position:absolute;inset:0;background:#0004}.episode-play{position:absolute;z-index:1;inset:0;display:grid;place-items:center;font-size:24px;text-shadow:0 2px 8px #000}.episode-name{font-weight:750;font-size:16px;line-height:1.4}.episode-duration{font-size:12px;color:#aeb7c5;margin:4px 0}.episode-summary{font-size:13px;line-height:1.55;color:#c5c9d1}.episode-chevron{font-size:25px;color:#adb2bd}.episodes-hint{font-size:12px;color:#aab0bb;line-height:1.5}.next-episode{display:none;margin:12px 18px;background:#e82743;border:0;color:white;padding:11px 16px;border-radius:8px;font-weight:700}.next-episode.show{display:inline-flex}
/* 05. Sin barras de desplazamiento visibles, conservando la navegación */
html,body,.info-panel,.info-overlay,nav,.top-ten-track{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,body::-webkit-scrollbar,.info-panel::-webkit-scrollbar,.info-overlay::-webkit-scrollbar,nav::-webkit-scrollbar,.top-ten-track::-webkit-scrollbar{display:none;width:0;height:0}
@media(max-width:760px){header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 8px;padding:13px 4%}.logo-home{grid-column:1;grid-row:1;font-size:clamp(19px,5vw,24px)}.search-wrap{grid-column:2;grid-row:1;justify-self:end}.search-panel{right:0;top:calc(100% + 12px)}header nav{grid-column:1/-1;grid-row:2;order:unset;width:100%;gap:20px;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;padding:3px 0 8px}header nav button{flex:0 0 auto}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.info-overlay{padding:8px}.episode-item{grid-template-columns:23px minmax(85px,116px) minmax(0,1fr);gap:9px;padding:13px 3px;min-height:100px}.episode-chevron{display:none}.episode-number{font-size:17px}.episode-name{font-size:14px}.episode-summary{font-size:12px;line-height:1.4}.episodes-head h3{font-size:18px}.season-select{min-width:140px;padding:10px 32px 10px 10px;font-size:14px}.info-page .info-content{padding-bottom:45px}}
@media(max-width:380px){.episode-item{grid-template-columns:18px 90px minmax(0,1fr);gap:7px}.episode-summary{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.search-panel{width:calc(100vw - 24px);right:-4px}}
/* El reproductor debe quedar por encima de cualquier ficha rápida. */
.modal{z-index:100}

/* =========================================================
   GZOUK PLAY V13 — REPRODUCTOR CINEMATOGRÁFICO
   CONFIGURACIÓN: modifica el tiempo de ocultación en js/app.js
   El modo pantalla completa se solicita con gesto del usuario.
========================================================= */
.modal{padding:0;background:#000;z-index:110}
.player-shell{width:100vw;max-width:none;height:100dvh;max-height:none;border:0;border-radius:0;background:#000;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.stage{position:relative;width:100%;height:100%;aspect-ratio:auto;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}
.stage video,.stage iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.player-ui{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;opacity:1;transition:opacity .24s ease}
.player-ui button,.player-ui input{pointer-events:auto}
.player-shell.ui-hidden .player-ui{opacity:0;pointer-events:none}
.player-shell.ui-hidden .player-ui *{pointer-events:none}
.player-ui-top{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;align-items:center;gap:12px;padding:clamp(14px,3vw,32px);background:linear-gradient(#000b,transparent)}
.player-title{font-size:clamp(13px,1.5vw,17px);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650;text-shadow:0 2px 10px #000}
.player-ui-bottom{padding:36px clamp(14px,3vw,38px) max(18px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#000b 45%,#000e)}
.player-icon{border:0!important;background:transparent!important;color:#fff!important;border-radius:8px!important;min-width:43px;min-height:44px;padding:5px!important;display:inline-flex;align-items:center;justify-content:center;gap:0;font-size:27px;line-height:1;transition:transform .15s,background .15s;position:relative}
.player-icon:hover,.player-icon:focus-visible{background:#ffffff26!important;transform:scale(1.07);outline:2px solid transparent}
.player-icon small{font-size:10px;font-weight:800;position:absolute;top:17px;left:50%;transform:translateX(-50%)}
.exit-player{font-size:34px;justify-self:start}
.player-progress-line{display:flex;align-items:center;gap:14px;margin-bottom:13px}
.player-progress-line .progress{flex:1;min-width:0;width:auto;height:18px;accent-color:#f22d45;cursor:pointer}
.player-progress-line .time{margin:0;color:#e1e1e5;white-space:nowrap;font-size:12px}
.control-row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:nowrap}
.control-group{display:flex;align-items:center;gap:clamp(1px,1.2vw,14px)}
.ad{z-index:4}.placeholder{z-index:2}.next-episode{position:absolute;right:24px;bottom:155px;z-index:7}
/* La flecha de la ficha queda DENTRO de la imagen, sin margen exterior */
.info-page.open{position:relative}
.info-page .back-link{position:absolute;z-index:5;top:clamp(14px,2vw,28px);left:clamp(14px,3vw,40px);margin:0;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;font-size:28px;padding:0;background:#08090bbb;border:1px solid #ffffff66;backdrop-filter:blur(8px);color:#fff}
.info-page .back-link:hover{background:#e92b45}
@media(max-width:760px){.player-ui-top{padding:12px 14px}.player-ui-bottom{padding:28px 12px max(16px,env(safe-area-inset-bottom))}.player-icon{min-width:39px;min-height:42px;font-size:23px}.control-group{gap:0}.player-progress-line .time{font-size:10px}.player-title{font-size:13px}.info-page .back-link{width:43px;height:43px}}
@media(prefers-reduced-motion:reduce){.player-ui{transition:none}}

/* ============================================================
   GZOUK PLAY V13.1 — FLECHA DE REGRESO SOBRE LA PORTADA
   La flecha es hija de .info-cover; no genera franja ni margen.
   Ajustar top/left para moverla sin modificar el resto de la ficha.
   ============================================================ */
.info-page #infoPagePanel{display:block;margin:0;padding:0}
.info-page .info-cover{position:relative;margin:0;width:100%}
.info-page .info-cover .back-link{
 position:absolute;top:clamp(14px,2vw,28px);left:clamp(14px,3vw,40px);
 z-index:10;margin:0;padding:0;width:48px;height:48px;
 display:flex;align-items:center;justify-content:center;
 border-radius:50%;border:1px solid #ffffff70;
 background:#08090bc9;color:#fff;font-size:28px;line-height:1;
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
 cursor:pointer;
}
.info-page .info-cover .back-link:hover{background:#e92b45}
.info-page .info-cover .back-link:focus-visible{outline:2px solid white;outline-offset:3px}
@media(max-width:760px){.info-page .info-cover .back-link{width:44px;height:44px;top:14px;left:14px}}


/* ================================================================
   GZOUK PLAY 13.3 — CORRECCIÓN ESTRUCTURAL DEFINITIVA
   IMPORTANTE: makeInfo() crea un DIV envolvente dentro de #infoPagePanel.
   Por eso NO usar #infoPagePanel > .info-cover: no existe tal hijo.
   El selector correcto es #infoPagePanel > div > .info-cover.
   Este bloque también anula el margen del botón antiguo.
   ================================================================ */
.info-page.open{margin:0!important;padding:0!important}
.info-page.open #infoPagePanel,
.info-page.open #infoPagePanel > div{display:block!important;margin:0!important;padding:0!important;position:relative}
.info-page.open #infoPagePanel > div > .info-cover{
  position:relative!important;
  display:block!important;
  margin:0!important;padding:0!important;
  width:100%!important;
  height:clamp(260px,34vw,440px)!important;
  background-size:cover!important;
  background-position:center center!important;
}
/* La flecha se encuentra físicamente dentro de la portada (movida por app.js). */
.info-page.open #infoPagePanel > div > .info-cover > #backToCatalog{
  all:unset;
  box-sizing:border-box!important;
  position:absolute!important;
  top:clamp(12px,2vw,24px)!important;
  left:clamp(12px,3vw,36px)!important;
  z-index:30!important;
  width:46px!important;height:46px!important;
  margin:0!important;padding:0!important;
  border:1px solid rgba(255,255,255,.45)!important;
  border-radius:50%!important;
  background:rgba(9,10,14,.82)!important;
  color:white!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  line-height:0!important;
  cursor:pointer!important;
  box-shadow:0 3px 14px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.info-page.open #infoPagePanel > div > .info-cover > #backToCatalog svg{
  display:block!important;position:static!important;
  width:23px!important;height:23px!important;
  flex:none!important;transform:none!important;
}
.info-page.open #infoPagePanel > div > .info-cover > #backToCatalog:hover{background:rgba(235,39,67,.9)!important}
.info-page.open #infoPagePanel > div > .info-cover > #backToCatalog:focus-visible{outline:2px solid white!important;outline-offset:3px!important}
.info-page.open #infoPagePanel > div > .info-content{
  position:relative!important;
  z-index:1!important;
  margin:-68px auto 0!important;
  max-width:1120px!important;
  padding:0 5% 60px!important;
}
/* Vista rápida en PC: corregir la altura y anchura sin afectar móvil. */
@media(min-width:761px){
  .info-overlay.open{padding:24px!important;align-items:center!important;justify-content:center!important}
  .info-overlay.open .info-panel{width:min(760px,100%)!important;max-height:calc(100dvh - 48px)!important;margin:auto!important}
  .info-overlay.open .info-panel .info-cover{height:280px!important}
  .info-overlay.open .info-panel .info-content{margin-top:-46px!important;padding:0 30px 30px!important}
}
@media(max-width:760px){
  .info-page.open #infoPagePanel > div > .info-cover{
    height:clamp(205px,57vw,300px)!important;
    margin:0!important;padding:0!important;
  }
  .info-page.open #infoPagePanel > div > .info-cover > #backToCatalog{
    top:12px!important;left:12px!important;width:44px!important;height:44px!important;
  }
  .info-page.open #infoPagePanel > div > .info-content{
    margin:-42px auto 0!important;padding:0 5% 44px!important;
  }
}

/* V14: botón realmente superpuesto a la portada, sin fila propia. */
#infoPage.open{padding:0!important;margin:0!important;border:0!important;}
#infoPage.open #infoPagePanel{margin:0!important;padding:0!important;}
#infoPage.open #infoPagePanel > div{margin:0!important;padding:0!important;}
#infoPage.open #infoPagePanel .info-cover{position:relative!important;display:block!important;margin:0!important;padding:0!important;overflow:hidden!important;}
#infoPage.open #infoPagePanel .info-cover::after{pointer-events:none!important;}
#infoPage.open #infoPagePanel .info-cover #backToCatalog{position:absolute!important;inset:14px auto auto 14px!important;z-index:50!important;display:flex!important;align-items:center!important;justify-content:center!important;width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;margin:0!important;padding:0!important;line-height:0!important;box-sizing:border-box!important;border-radius:50%!important;background:rgba(12,13,18,.78)!important;}
#infoPage.open #infoPagePanel .info-cover #backToCatalog svg{display:block!important;width:23px!important;height:23px!important;flex:0 0 23px!important;}
/* Si un script antiguo dejara el botón fuera, que no reserve una franja. */
#infoPage.open > #backToCatalog{position:absolute!important;top:14px!important;left:14px!important;z-index:50!important;margin:0!important;width:46px!important;height:46px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:50%!important;}

/* V14.1: flecha limitada a la portada; nunca flota sobre el resto de la ficha. */
#infoPage.open #infoPagePanel > div > .info-cover {
  position:relative!important; isolation:isolate!important; overflow:hidden!important;
}
#infoPage.open #infoPagePanel > div > .info-cover > #backToCatalog {
  position:absolute!important; top:14px!important; left:14px!important;
  right:auto!important; bottom:auto!important; transform:none!important;
  z-index:2!important; margin:0!important;
}
/* No mostrar una segunda flecha fuera de la fotografía, aunque haya JS en caché. */
#infoPage.open > #backToCatalog {display:none!important;}

/* V14.2 — Botones rectangulares redondeados, integrados en la portada. */
#infoPage.open #infoPagePanel > div > .info-cover > #backToCatalog{
  width:64px!important;height:43px!important;min-width:64px!important;min-height:43px!important;
  border-radius:14px!important;
  background:rgba(26,28,37,.82)!important;
  border:1px solid rgba(255,255,255,.26)!important;
  box-shadow:0 5px 22px rgba(0,0,0,.28)!important;
  -webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;
  transition:opacity .18s ease,background-color .2s ease,box-shadow .2s ease!important;
  transform:none!important;
}
#infoPage.open #infoPagePanel > div > .info-cover > #backToCatalog:hover{
  background:rgba(54,56,68,.95)!important;box-shadow:0 7px 25px rgba(0,0,0,.4)!important;
}
#infoPage.open #infoPagePanel > div > .info-cover > #backToCatalog svg{
  width:22px!important;height:22px!important;flex:0 0 22px!important;
}
/* La X de vista rápida usa el mismo lenguaje visual, sin alterar su posición. */
#infoOverlay .info-panel > .info-close{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:54px!important;height:40px!important;min-width:54px!important;
  border-radius:13px!important;line-height:1!important;padding:0!important;
  background:rgba(25,27,35,.86)!important;border:1px solid rgba(255,255,255,.28)!important;
  color:#fff!important;font-size:25px!important;font-weight:400!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background-color .2s ease!important;
}
#infoOverlay .info-panel > .info-close:hover{background:rgba(65,67,80,.95)!important}
/* La cabecera siempre cubre la ficha cuando se desplaza por debajo. */
body.details-open > header,body.details-open header{z-index:80!important}
@media(max-width:760px){
 #infoPage.open #infoPagePanel > div > .info-cover > #backToCatalog{
   width:60px!important;height:42px!important;min-width:60px!important;min-height:42px!important;
 }
 #infoOverlay .info-panel > .info-close{width:50px!important;height:38px!important;min-width:50px!important}
}
@media(prefers-reduced-motion:reduce){
 #infoPage.open #infoPagePanel > div > .info-cover > #backToCatalog{transition:none!important}
}