/* Capas del plugin PelisAnime: cabecera #hdr = 50, barra inferior móvil .bwrap = 60,
   menús/paneles .layer = 100 y .user-layer = 110. El modal queda por debajo de todos ellos. */
.hmmp-product-modal{position:fixed;inset:0;z-index:var(--hmmp-modal-z,45);display:flex;align-items:center;justify-content:center;transition:z-index 0s linear .5s}
/* Pseudo-fullscreen CSS del reproductor (al volver de PiP): debe tapar también la cabecera. */
/* Video y pseudo-fullscreen: mientras estén abiertos, el modal sube por encima de la cabecera y del menú de
   navegación de PelisAnime. Al cerrar baja con un pequeño retraso (animación).
   v3.1.7: los paneles (descargas, sinopsis) YA NO suben el modal; la cabecera y el menú inferior se quedan visibles. */
.hmmp-product-modal:has(.hmmp-modal.hmmp-open,.hmmp-pip-return-css-fullscreen){z-index:2147483000;transition-delay:0s}
.hmmp-product-modal[hidden]{display:none!important}
.hmmp-product-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(6px)}

/* Pantalla completa en escritorio y móvil. El banner llega hasta el borde superior de la pantalla. */
/* v3.6.1: el diálogo se ancla a los 4 bordes del modal fijo (inset:0) en vez de medir 100vw/100dvh: sigue al viewport
   real en cada fotograma, también mientras la pantalla gira o cambian las barras del navegador. */
.hmmp-product-modal-dialog{position:absolute;inset:0;width:auto;height:auto;z-index:2;overflow:auto;overscroll-behavior:contain;background:#080808;border-radius:0;box-shadow:none}
.hmmp-product-modal-content{min-height:100%;height:100%;transition:opacity .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1)}
/* Al salir del video: oculta (sin transición) y reaparece con fundido cuando el viewport se estabiliza. */
html.hmmp-returning .hmmp-product-modal-content{opacity:0;transform:scale(1.012);transition:none}
@media (prefers-reduced-motion:reduce){.hmmp-product-modal-content{transition:opacity .15s linear}html.hmmp-returning .hmmp-product-modal-content{transform:none}}
.hmmp-product-modal{--hmmp-m-gap:22px}
.hmmp-product-modal-content>.hmmp-player{min-height:100%;height:100%;visibility:visible!important}
.hmmp-product-modal.is-loading .hmmp-product-modal-content:before{content:'Cargando…';display:grid;place-items:center;height:100%;color:#fff;font-size:16px}
.hmmp-product-modal-open{overflow:hidden!important}

/* La cabecera de PelisAnime siempre queda fija arriba y por encima del modal
   (aunque la página estuviera scrolleada y el sticky no se viera). */
html.hmmp-product-modal-open #hdr{position:fixed!important;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:60}

/* Móvil: el hero ocupa exactamente el alto del modal (sin depender de svh) y los botones
   quedan a -8px (más abajo) respecto a la medida de la barra inferior (el JS afina la medida real). */
.hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-hero{height:100%!important;min-height:100%!important}
.hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-content{
 height:100%!important;min-height:0!important;
 /* distancia fija desde el borde inferior: menú inferior (medido) + separación (--hmmp-m-gap, 22px) */
 padding-bottom:calc(var(--hmmp-modal-bottom,calc(env(safe-area-inset-bottom,0px) + 70px)) + var(--hmmp-m-gap,22px))!important;
}


/* v3.1.7 — Móvil: con la cabecera (#hdr) y el menú inferior (.bwrap) visibles, los paneles (Descargar y Sinopsis)
   se apoyan justo encima del menú y nunca pasan por debajo de la cabecera.
   --hmmp-modal-bottom la mide hmmp-product-modal.js (alto real del menú inferior). */
@media (max-width:767px){
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-drawer,
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-synopsis-drawer{
  inset:auto 10px calc(var(--hmmp-modal-bottom,0px) + 8px) 10px!important;
  width:auto!important;max-width:none!important;
  border:1px solid rgba(76,126,177,.28)!important;border-radius:22px!important;
  padding-bottom:18px!important;
 }
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-drawer{
  max-height:calc(100dvh - var(--hmmp-modal-bottom,0px) - 96px)!important;
 }
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-synopsis-drawer{
  max-height:min(300px,calc(100dvh - var(--hmmp-modal-bottom,0px) - 96px))!important;
 }
 /* Transform de cierre: que baje sin salirse del hueco del menú. */
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-drawer:not(.hmmp-open),
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-synopsis-drawer:not(.hmmp-open){
  transform:translate3d(0,24px,0)!important;
 }
}

/* v3.1.9 — El fondo de Sinopsis medía 100vh (en móvil es más alto que la pantalla visible por la barra del navegador)
   y, como tiene backdrop-filter, el panel se posicionaba respecto a ese fondo y quedaba detrás del menú inferior.
   Ahora el fondo ocupa exactamente la pantalla visible, igual que el de Descargar. */
@media (max-width:767px){
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-synopsis-backdrop{
  position:fixed!important;inset:0!important;width:auto!important;height:auto!important;
  max-height:none!important;
 }
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-download-backdrop{
  inset:0!important;width:auto!important;height:auto!important;
 }
}


/* v3.2.0 — Posición vertical del bloque de información y de los botones (solo móvil, dentro del modal).
   Los desplazamientos por transform (-40px botones, +20px textos) movían los elementos sin mover su lugar real,
   y por eso la separación visible no era la esperada. Aquí se anulan y el espaciado se define con el flujo normal:
   - Sinopsis queda a 10px de "Ver ahora".
   - Los botones quedan a 32px sobre el menú inferior (lo ajusta hmmp-product-modal.js, constante ACTIONS_GAP). */
@media (max-width:767px){
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-title,
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-meta,
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-genres,
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-qualities,
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-description,
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-watch,
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-download-button{
  transform:none!important;
 }
 /* El botón Sinopsis mide lo que se ve (la barra de 24px) y deja 10px hasta "Ver ahora". */
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-description.hmmp-synopsis-trigger{
  height:46px!important;min-height:46px!important;max-height:46px!important;
  padding:0!important;margin:0 0 12px!important;overflow:visible!important;
 }
 .hmmp-view-mobile .hmmp-product-modal .hmmp-player .hmmp-actions{padding-top:0!important}
}


/* v3.2.2 — Botón SINOPSIS en móvil: de barra plana y cuadrada a botón tipo píldora.
   Mismo lenguaje visual que los botones "Ver ahora" / "Descargar" (bordes totalmente redondeados) pero en
   cristal azulado para que quede por debajo de ellos en jerarquía: borde fino, degradado suave, brillo
   superior interno, sombra, icono de texto a la izquierda y chip circular con flecha a la derecha.
   Solo cambia el aspecto: el comportamiento (abrir el panel) y la altura reservada en el flujo no cambian. */
@media (max-width:767px){
 .hmmp-view-mobile .hmmp-player .hmmp-description.hmmp-synopsis-trigger{
  position:relative!important;display:block!important;width:100%!important;
  height:46px!important;min-height:46px!important;max-height:46px!important;
  margin:0 0 12px!important;padding:0!important;overflow:visible!important;
  border:1px solid rgba(143,168,196,.30)!important;border-radius:999px!important;
  background:linear-gradient(180deg,rgba(143,168,196,.20) 0%,rgba(143,168,196,.07) 100%)!important;
  -webkit-backdrop-filter:blur(14px)!important;backdrop-filter:blur(14px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(0,0,0,.25),0 8px 22px rgba(0,0,0,.38)!important;
  color:#e3edf8!important;text-align:left!important;cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
  transition:transform .18s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease!important;
 }
 /* Etiqueta + icono de texto (se dibuja con el ::before que ya existía; ahora sin el fondo opaco de barra) */
 .hmmp-view-mobile .hmmp-player .hmmp-description.hmmp-synopsis-trigger::before{
  content:"SINOPSIS"!important;position:absolute!important;top:0!important;left:0!important;right:0!important;
  z-index:2!important;display:flex!important;align-items:center!important;
  width:100%!important;height:100%!important;margin:0!important;padding:0 56px 0 50px!important;
  box-sizing:border-box!important;border-radius:inherit!important;
  color:#e3edf8!important;font:700 12px/1 Arial,Helvetica,sans-serif!important;letter-spacing:.2em!important;text-transform:uppercase!important;
  background-color:transparent!important;
  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='%23b9cde3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='4' y1='11' x2='20' y2='11'/%3E%3Cline x1='4' y1='16' x2='14' y2='16'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-size:18px 18px!important;background-position:20px center!important;
  opacity:1!important;pointer-events:none!important;
 }
 /* Chip circular con la flecha, a la derecha */
 .hmmp-view-mobile .hmmp-player .hmmp-description.hmmp-synopsis-trigger::after{
  content:""!important;position:absolute!important;display:block!important;z-index:3!important;
  top:50%!important;right:7px!important;left:auto!important;margin-top:-16px!important;
  flex:none!important;width:32px!important;height:32px!important;border-radius:50%!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/16px 16px no-repeat,rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)!important;
  opacity:1!important;pointer-events:none!important;
 }
 .hmmp-view-mobile .hmmp-player .hmmp-description.hmmp-synopsis-trigger:active{
  transform:scale(.98)!important;
  background:linear-gradient(180deg,rgba(143,168,196,.30) 0%,rgba(143,168,196,.12) 100%)!important;
  border-color:rgba(190,215,240,.50)!important;
 }
 .hmmp-view-mobile .hmmp-player .hmmp-description.hmmp-synopsis-trigger:focus-visible{
  outline:2px solid rgba(190,215,240,.85)!important;outline-offset:2px!important;
 }
}
@media (prefers-reduced-motion:reduce){
 .hmmp-view-mobile .hmmp-player .hmmp-description.hmmp-synopsis-trigger{transition:none!important}
}

/* v3.5 — esqueleto de apertura instantánea: banner + título de la tarjeta mientras llega la interfaz */
.hmmp-product-modal.is-loading .hmmp-product-modal-content:before{content:none;display:none}
.hmmp-skel{position:relative;width:100%;height:100%;min-height:100%;background:#080808 center/cover no-repeat;display:flex;align-items:flex-end;overflow:hidden}
.hmmp-skel-shade{position:absolute;inset:0;background:linear-gradient(to top,#080808 6%,rgba(8,8,8,.55) 48%,rgba(8,8,8,.2) 100%)}
.hmmp-skel-body{position:relative;width:100%;max-width:760px;padding:0 clamp(18px,4vw,64px) calc(96px + env(safe-area-inset-bottom,0px));box-sizing:border-box}
.hmmp-skel-title{margin:0 0 20px;color:#fff;font:500 clamp(1.8rem,5vw,3.6rem)/1.05 Montserrat,system-ui,sans-serif;letter-spacing:-.01em;overflow-wrap:anywhere}
.hmmp-skel-btns{display:flex;gap:12px}
.hmmp-skel-btns span{display:block;height:48px;width:150px;border-radius:12px;background:rgba(255,255,255,.18);animation:hmmpSkel .9s ease-in-out infinite alternate}
.hmmp-skel-btns span+span{width:130px;animation-delay:.15s}
@keyframes hmmpSkel{to{opacity:.4}}
@media (min-width:768px){.hmmp-skel-shade{background:linear-gradient(to right,#080808 4%,rgba(8,8,8,.6) 42%,rgba(8,8,8,0) 75%),linear-gradient(to top,#080808 0,rgba(8,8,8,0) 30%)}.hmmp-skel-body{padding-bottom:clamp(60px,12vh,140px)}}
@media (max-width:767px){.hmmp-skel-body{padding-bottom:calc(var(--hmmp-modal-bottom,calc(env(safe-area-inset-bottom,0px) + 70px)) + var(--hmmp-m-gap,22px))}.hmmp-skel-btns{flex-direction:column}.hmmp-skel-btns span,.hmmp-skel-btns span+span{width:100%}}
@media (prefers-reduced-motion:reduce){.hmmp-skel-btns span{animation:none}}