/* ===== páginas de ficha (/peliculas/<slug>/, /series/<slug>/, /anime/<slug>/) ===== */

.gs-entrada{padding-top:0;}

/* ===== hero: banner + sinopsis encima (sin video de portada) ===== */
.gs-fhero{
  position:relative;min-height:78vh;display:flex;align-items:flex-end;
  background-color:var(--surface);background-size:cover;background-position:center 25%;
}
.gs-fhero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(90deg, rgba(10,13,11,.96) 8%, rgba(10,13,11,.6) 45%, rgba(10,13,11,.15) 78%),
    linear-gradient(0deg, var(--bg) 0%, rgba(10,13,11,.25) 26%, rgba(10,13,11,.15) 60%, rgba(10,13,11,.4) 100%);
}
.gs-fhero-inner{position:relative;z-index:1;max-width:680px;padding:120px 48px 56px;}
.gs-fhero h1{
  font-family:var(--display);font-size:clamp(2rem,4.6vw,3.6rem);font-weight:900;line-height:1.06;margin:0 0 16px;
  text-shadow:0 2px 20px rgba(0,0,0,.65);
}
.gs-fhero-meta{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  font-family:var(--mono);font-size:.85rem;color:var(--slime);margin-bottom:18px;
}
.gs-fhero-meta span{color:var(--muted);}
.gs-fhero-syn{
  font-size:1.02rem;line-height:1.6;color:var(--bone);opacity:.92;margin:0 0 26px;max-width:600px;
}
.gs-hero-actions{display:flex;flex-wrap:wrap;gap:14px;}
.gs-btn-ghost{background:rgba(237,234,224,.12);color:var(--bone);border:1px solid rgba(237,234,224,.25);}

/* ===== reproductor embebido ===== */
.gs-player-wrap{margin-bottom:26px;}
.gs-player{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;
  /* Sin este techo, en pantallas anchas pero de poca altura (monitor
     grande, ventana no maximizada) el video en 16:9 puede salir muy
     alto y "comerse" el espacio de los botones de abajo — al elegir un
     capítulo, scrollIntoView alinea el video arriba y el botón de
     Pantalla completa queda tapado/cortado hasta que el usuario
     scrollea a mano. Con max-height, el ancho se ajusta solo (sigue
     siendo aspect-ratio 16/9) y siempre queda lugar debajo. */
  max-height:calc(100vh - 170px);
  margin-inline:auto;
}
.gs-player iframe,.gs-player embed{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;
  border:0;
}
/* Rumble/Odysee a veces inyectan su iframe con width/height fijos en
   línea (recién resuelven a 100%/100% un instante después). Mientras
   tanto puede sobrar contenido dentro de .gs-player: lo recortamos acá
   para que nunca se vea "más grande que la pantalla" ni empuje al botón
   de pantalla completa fuera de lugar. */

/* Pantalla completa se pide sobre TODO #gsPlayerWrap (video + botones),
   no solo sobre el video — si se pide solo sobre el video, el navegador
   oculta cualquier hermano (botones) apenas entra a pantalla completa,
   porque la API de Fullscreen solo muestra al elemento pedido y sus
   hijos. Poniendo el wrap entero, los botones quedan adentro y siguen
   visibles y navegables con flechas incluso ya en pantalla completa. */
/* .gs-fs es NUESTRA propia clase (ver entrada.js) — se activa/desactiva
   a mano con el botón, sin depender de que el navegador reconozca de
   verdad el elemento como :fullscreen (en navegadores de Smart TV la
   API nativa suele fallar en silencio, así que .gs-fs es la que manda
   siempre; :fullscreen queda como bonus para ocultar también la barra
   del navegador cuando el dispositivo sí la soporta). Mismo tratamiento
   visual para ambos casos.
   OJO — BUG QUE COSTÓ ENCONTRAR: .gs-fs tiene que ir en una regla
   SEPARADA de :fullscreen, nunca mezclada en la misma lista separada
   por comas. Si un solo selector de una lista con comas es inválido
   para el navegador (acá eran los prefijos viejos :-webkit-full-screen
   / :-moz-full-screen, que Chrome moderno ya no reconoce), TODA la
   regla se descarta entera — clase .gs-fs incluida, aunque esa parte
   sea perfectamente válida. Por eso nada de lo que probamos antes
   funcionaba: la regla ni se registraba. */
.gs-player-wrap:fullscreen,
.gs-player-wrap.gs-fs{
  /* position:fixed asegura que tape TODA la pantalla incluso cuando
     :fullscreen nativo nunca se activó (sin esto, .gs-fs solo por CSS
     quedaría del tamaño de 100vw/100vh pero en el lugar de siempre
     dentro de la página, no pegado a la esquina superior visible). */
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;justify-content:center;
  width:100vw;height:100vh;margin:0;background:#000;padding:0;gap:10px;
  /* Odysee (y en general cualquier iframe que no encoja tan prolijo
     como el flex:1 1 auto espera) puede terminar empujando el alto
     total por encima de 100vh. La API de Fullscreen NO deja scrollear
     el documento de atrás, así que si no habilitamos overflow acá el
     usuario queda literalmente sin forma de llegar al botón de abajo.
     Con esto, si sobra contenido, se puede bajar DENTRO del wrap. */
  overflow-y:auto;
}
.gs-player-wrap:fullscreen .gs-player,
.gs-player-wrap.gs-fs .gs-player{
  flex:1 1 auto;width:100%;aspect-ratio:auto;border-radius:0;min-height:0;
  /* El .gs-player base trae max-height:calc(100vh - 170px) pensado para
     la vista normal (dejar lugar a los botones de abajo). Acá lo
     anulamos: en pantalla completa los botones ya están escondidos, no
     hace falta dejarles lugar. */
  max-height:none;
}
.gs-player-wrap:fullscreen .gs-fullscreen-btn,
.gs-player-wrap:fullscreen .gs-fallback-btn,
.gs-player-wrap.gs-fs .gs-fullscreen-btn,
.gs-player-wrap.gs-fs .gs-fallback-btn{
  display:none;
}
/* El botón "Pantalla completa" solo sirve para ENTRAR — una vez que ya
   estamos en pantalla completa (.gs-fs), se oculta del todo. Para
   salir el usuario usa Esc/atrás (ver entrada.js), el botón propio de
   Rumble/Odysee dentro del video, o el botón atrás del control remoto
   — nunca hace falta que nuestro botón "sepa salir", ni que se vea
   flotando sobre el video. (Además esto se refuerza por JS con estilo
   en línea — ver ocultarBotonesFullscreen en entrada.js — para que
   funcione pase lo que pase con el CSS.) El de "cambiar servidor"
   (.gs-fallback-btn) se esconde por el mismo motivo que se dejó de
   reservarle espacio arriba: en pantalla completa no se usa en la
   práctica, y si sigue ocupando su franja de alto, el video se achica
   para dejarle lugar — esa diferencia es la que se veía como franja
   negra abajo, comparado con la pantalla completa nativa de Rumble. */
.gs-player-wrap:fullscreen .gs-fullscreen-btn,
.gs-player-wrap.gs-fs .gs-fullscreen-btn{
  display:none;
}

/* botón de pantalla completa y de cambiar servidor: mismo tratamiento
   visual, grandes y claros — antes el de "cambiar servidor" no tenía
   ESTILO PROPIO NINGUNO (se veía como una tira gris por defecto del
   navegador). Ahora comparten look. */
.gs-fullscreen-btn,.gs-fallback-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 0;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-weight:700;font-size:.95rem;padding:12px 20px;border-radius:10px;width:100%;
}
/* El video (#gsPlayer) también es .gs-focusable y queda enfocado apenas
   arranca un capítulo (ver entrada.js). La regla global de foco mete
   transform:scale(1.08) — perfecto para las tarjetas del catálogo, pero
   en el video eso lo agranda SOBRE el botón de abajo (el transform no
   empuja el layout, solo se dibuja encima). Acá lo anulamos puntual y
   dejamos solo el resplandor verde, sin el agrandado. */
.gs-player.gs-focusable:focus-visible,
.gs-player.gs-focusable.gs-focused{
  transform:none;
  box-shadow:none;
}
.gs-fullscreen-btn:hover,.gs-fullscreen-btn:focus,
.gs-fallback-btn:hover:not(:disabled),.gs-fallback-btn:focus:not(:disabled){
  background:rgba(143,209,79,.18);border-color:var(--slime);
}
.gs-fallback-btn:disabled{opacity:.45;cursor:default;}
/* En mobile (touch) no mostramos nuestro botón de pantalla completa —
   ver esMobileTouch/reproducirCapitulo en entrada.js. El usuario entra
   a pantalla completa con el ícono propio del reproductor (Rumble/
   Odysee) adentro del iframe, que ahí sí rota bien solo. pointer:coarse
   no afecta PC (mouse), solo touch real. */
@media (pointer:coarse){
  #gsFullscreenBtn{display:none;}
}
.gs-capitulo-play{cursor:pointer;}
.gs-capitulo-play:hover{border-color:var(--slime);}
.gs-capitulo.gs-cap-activo{border-color:var(--slime);background:rgba(143,209,79,.1);}

/* ===== temporadas ===== */
.gs-ftemporadas{position:relative;z-index:1;margin-top:-40px;padding:20px 48px 60px;}
.gs-temp-pills{display:flex;gap:10px;overflow-x:auto;padding:6px 0 22px;scroll-behavior:smooth;}
.gs-temp-pills::-webkit-scrollbar{display:none;}
.gs-temp-pill{
  flex:0 0 auto;padding:10px 20px;border-radius:999px;background:var(--surface);
  border:1px solid var(--surface-2);color:var(--bone);font-weight:700;font-size:.9rem;cursor:pointer;
}
.gs-temp-pill.activo{background:var(--slime);color:#0A0D0B;border-color:var(--slime);}

.gs-cap-bloque{display:none;}
.gs-cap-bloque.activo{display:block;}

.gs-capitulos{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;
}
.gs-capitulo{
  background:var(--surface);border:1px solid var(--surface-2);border-radius:8px;
  padding:16px 18px;font-weight:700;color:var(--bone);display:flex;align-items:center;gap:10px;
}
.gs-capitulo .gs-cap-num{
  font-family:var(--mono);color:var(--slime);font-size:.8rem;flex:none;
  width:26px;height:26px;border-radius:50%;background:rgba(143,209,79,.12);
  display:flex;align-items:center;justify-content:center;
}

/* ===== relacionados (películas) ===== */
.gs-frelacionados{padding:10px 48px 60px;}

@media (max-width:720px){
  .gs-fhero{min-height:64vh;}
  .gs-fhero-inner{padding:96px 16px 34px;}
  .gs-ftemporadas,.gs-frelacionados{padding:16px 16px 40px;}
  .gs-capitulos{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}

  /* En celular (retrato) el wrap de pantalla completa mide 100vh, que es
     un alto enorme comparado al ancho angosto. La regla base pone
     flex:1 1 auto + aspect-ratio:auto en .gs-player para que ocupe todo
     el alto disponible — eso está bien en escritorio/TV (pantallas
     anchas), pero en celular estira el video verticalmente muy por
     fuera de 16:9, dejándolo deforme y con un montón de espacio vacío
     abajo (ver captura). Acá SOLO para mobile restauramos aspect-ratio
     16/9 y dejamos que .gs-player-wrap (que ya tiene
     justify-content:center) lo centre con franjas negras arriba/abajo
     en vez de estirarlo. No se toca nada de la regla base para que
     escritorio y TV sigan exactamente igual. */
  .gs-player-wrap:fullscreen .gs-player,
  .gs-player-wrap.gs-fs .gs-player{
    flex:0 1 auto;
    width:100%;
    aspect-ratio:16/9;
    max-height:100vh;
  }
}