.hmmp-player{position:relative;width:100%;isolation:isolate;color:#fff;font-family:inherit}.hmmp-player .hmmp-hero{height:90vh;min-height:600px;position:relative;overflow:hidden;background-size:cover;background-position:center;background-color:#08080a;display:flex;align-items:flex-end}.hmmp-player .hmmp-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.32) 58%,transparent),linear-gradient(0deg,rgba(0,0,0,.9),transparent 60%);z-index:1}.hmmp-player .hmmp-trailer-layer{position:absolute;inset:0;z-index:0}.hmmp-player .hmmp-hero-mobile-banner{display:none;position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}.hmmp-player .hmmp-trailer-video{width:100%;height:100%;object-fit:cover;opacity:0;transition:.7s}.hmmp-player .hmmp-trailer-video.hmmp-visible{opacity:1}.hmmp-player .hmmp-content{position:relative;z-index:2;width:min(760px,72%);padding:clamp(28px,5vw,78px)}.hmmp-player .hmmp-logo{object-fit:contain;object-position:left;margin-bottom:22px}.hmmp-player .hmmp-title{display:none;font-size:var(--hmmp-title-size,clamp(36px,5vw,76px));line-height:.95;margin:0 0 20px}.hmmp-player .hmmp-meta,.hmmp-player .hmmp-genres{color:rgba(255,255,255,.72);margin:7px 0}.hmmp-player .hmmp-description{max-height:135px;overflow:auto;line-height:1.6;margin-top:18px}.hmmp-player .hmmp-actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}.hmmp-player .hmmp-button{min-height:48px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;backdrop-filter:blur(14px)}.hmmp-player .hmmp-primary{background:#fff;color:#111;font-weight:700}.hmmp-player .hmmp-more-button{width:50px;padding:0}.hmmp-player .hmmp-more-button .hmmp-more-label{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.hmmp-player .hmmp-download-button{display:none!important}/* v3.2.3: el botón Descargar del control del reproductor (dentro del modal) vuelve a mostrarse */.hmmp-player .hmmp-drawer{position:absolute;right:34px;bottom:34px;z-index:5;width:min(390px,calc(100% - 68px));padding:16px;border-radius:18px;background:rgba(12,12,15,.94);backdrop-filter:blur(22px);transform:translateX(calc(100% + 50px));opacity:0;transition:.3s}.hmmp-player .hmmp-drawer.hmmp-open{transform:translateX(0);opacity:1}.hmmp-player .hmmp-drawer button,.hmmp-player .hmmp-modal button{font:inherit}.hmmp-player .hmmp-drawer-close,.hmmp-player .hmmp-modal-close{display:block;margin-left:auto;background:transparent;border:0;color:#fff;font-size:28px;cursor:pointer}.hmmp-player .hmmp-option{width:100%;min-height:48px;margin-top:8px;border:0;border-radius:12px;background:rgba(255,255,255,.07);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 14px;cursor:pointer}.hmmp-player .hmmp-locked{opacity:.5}.hmmp-player .hmmp-selected{outline:2px solid #fff}.hmmp-player .hmmp-download-submit{width:100%;min-height:48px;margin-top:12px;border:0;border-radius:12px;background:#fff;color:#111}.hmmp-player .hmmp-download-submit:disabled{opacity:.3}.hmmp-player .hmmp-modal{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.88);padding:20px}.hmmp-player .hmmp-modal.hmmp-open{display:flex}.hmmp-player .hmmp-dialog{position:relative;width:min(1250px,96vw);background:#000;border-radius:16px;overflow:hidden}.hmmp-player .hmmp-modal-close{position:absolute;right:12px;top:8px;z-index:10}.hmmp-player .hmmp-video-wrap{position:relative;aspect-ratio:16/9;background:#000}.hmmp-player .hmmp-video{width:100%;height:100%;display:block}.hmmp-player .hmmp-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:7px;padding:12px;background:linear-gradient(transparent,rgba(0,0,0,.95));z-index:4}.hmmp-player .hmmp-ctrl{background:transparent;border:0;color:#fff;cursor:pointer}.hmmp-player .hmmp-seek{flex:1;accent-color:#fff}.hmmp-player .hmmp-volume{width:80px}.hmmp-player .hmmp-time{font-size:12px;white-space:nowrap}.hmmp-player .hmmp-settings{position:absolute;right:12px;bottom:60px;z-index:6;background:rgba(10,10,12,.97);padding:14px;border-radius:14px;display:grid;gap:10px}.hmmp-player .hmmp-settings label{display:grid;gap:4px;font-size:12px}.hmmp-player .hmmp-settings select{background:#222;color:#fff;border:1px solid #444;padding:7px}.hmmp-player .hmmp-next{position:absolute;right:18px;bottom:70px;background:rgba(0,0,0,.8);padding:12px;border-radius:12px;z-index:5}.hmmp-player .hmmp-cinema .hmmp-hero{height:100vh;height:calc(var(--hmmp-vh,1vh) * 100);height:100dvh;min-height:100vh;min-height:calc(var(--hmmp-vh,1vh) * 100);min-height:100dvh}/* ============================================================
   RESPONSIVE LAYOUTS: Mobile, Tablet, Desktop
   ============================================================ */

/* MOBILE: Diseño apilado vertical optimizado para pantallas pequeñas */
@media(max-width:767px){
  .hmmp-player{--hmmp-mobile-layout:stack}

  /* v2.5.26 -- Fix "interfaz cortada" en mobile: el valor de altura de
     desktop (.hmmp-hero{height:90vh}, definido arriba SIN media query)
     tenía la misma especificidad que estas reglas y, en layouts que no
     redefinían "height" explícitamente (p.ej. compact), seguía ganando
     por orden de cascada. Se resetea aquí a "auto" para que cada layout
     de mobile controle su propia altura desde cero. */
  .hmmp-player .hmmp-hero{height:auto}

  /* Banner mobile: si se configuró, reemplaza visualmente al banner normal
     (que sigue siendo el fondo del .hmmp-hero) solo en esta resolución. */
  .hmmp-player .hmmp-hero-mobile-banner{display:block}

  /* Título: el campo "Título" ahora solo se muestra en mobile; en
     desktop/tablet se sigue usando el Logo (si está configurado). */
  .hmmp-player .hmmp-title{display:block}
  .hmmp-player .hmmp-logo{display:none!important}

  /* Botón "Descargar": solo en mobile, abre el mismo panel que "⋯".
     v2.5.26: !important porque la regla genérica .hmmp-button{display:
     inline-flex} (más abajo en el archivo, sin media query) tiene la
     misma especificidad y, al venir después en la cascada, terminaba
     ganando — por eso el botón podía aparecer también en desktop. */
  .hmmp-player .hmmp-download-button{display:inline-flex!important}

  /* Estructura de referencia en mobile: solo "Ver ahora" y "Descargar".
     Trailer y Menú (⋯) quedan ocultos aquí — el menú abre el mismo panel
     que ya cubre el botón Descargar, así que mostrar los dos es redundante.
     v2.5.26: !important por el mismo motivo que arriba -- sin esto, la
     regla genérica .hmmp-button{display:inline-flex} los volvía a mostrar
     en mobile, que es justo el bug de "dos botones de descarga". */
  .hmmp-player .hmmp-trailer-button,
  .hmmp-player .hmmp-more-button{
    display:none!important
  }

  /* Evita que el título herede un color de enlace del tema (se veía azul). */
  .hmmp-player .hmmp-title{color:#fff}
  
  /* Layout stack: video grande, info debajo */
  .hmmp-player.hmmp-layout-stack .hmmp-hero{
    min-height:320px;
    height:auto;
    aspect-ratio:4/5;
    max-height:50vh
  }
  
  .hmmp-player.hmmp-layout-stack .hmmp-content{
    width:100%;
    padding:16px 14px;
    margin-top:12px
  }
  
  .hmmp-player.hmmp-layout-stack .hmmp-title{
    font-size:var(--hmmp-title-size,clamp(22px,6vw,32px));
    margin:0 0 10px
  }
  
  .hmmp-player.hmmp-layout-stack .hmmp-meta,
  .hmmp-player.hmmp-layout-stack .hmmp-genres{
    font-size:13px
  }
  
  .hmmp-player.hmmp-layout-stack .hmmp-description{
    max-height:80px;
    font-size:13px;
    margin-top:10px
  }
  
  /* Estructura de referencia: solo "Ver ahora" y "Descargar", apilados a
     todo el ancho. Trailer y Menú (que en desktop abren el mismo panel de
     descarga) se ocultan en mobile para no duplicar funciones. */
  .hmmp-player.hmmp-layout-stack .hmmp-actions{
    flex-direction:column;
    gap:10px;
    margin-top:16px
  }
  
  .hmmp-player.hmmp-layout-stack .hmmp-button{
    font-size:15px;
    min-height:50px;
    padding:0 18px;
    width:100%;
    flex:none
  }
  
  /* Layout compact: mínimo espacio en mobile */
  .hmmp-player.hmmp-layout-compact .hmmp-hero{
    min-height:360px;
    aspect-ratio:9/16
  }
  
  .hmmp-player.hmmp-layout-compact .hmmp-content{
    width:100%;
    padding:12px 12px;
    margin-top:0
  }
  
  .hmmp-player.hmmp-layout-compact .hmmp-title{
    font-size:var(--hmmp-title-size,clamp(18px,5vw,24px));
    margin:0 0 6px
  }
  
  .hmmp-player.hmmp-layout-compact .hmmp-meta,
  .hmmp-player.hmmp-layout-compact .hmmp-genres,
  .hmmp-player.hmmp-layout-compact .hmmp-description{
    display:none
  }
  
  .hmmp-player.hmmp-layout-compact .hmmp-actions{
    margin-top:10px;
    gap:6px
  }
  
  .hmmp-player.hmmp-layout-compact .hmmp-button{
    font-size:12px;
    min-height:38px;
    padding:0 10px
  }
  
  /* Layout hero: pantalla completa en mobile.
     v2.5.26: 100vh puro se calcula en muchos navegadores mobile con la
     barra de direcciones VISIBLE (más alto de lo que realmente se ve),
     y solo se corrige cuando el usuario interactúa/hace scroll y el
     navegador recalcula -- eso es exactamente el "tengo que minimizar
     manualmente la pantalla para que se vea completa". dvh (dynamic
     viewport height) ya resuelve esto de forma nativa en navegadores
     modernos; calc(var(--hmmp-vh)) es el fallback vía JS para el resto. */
  .hmmp-player.hmmp-layout-hero .hmmp-hero{
    min-height:100vh;
    min-height:calc(var(--hmmp-vh,1vh) * 100);
    min-height:100dvh;
    height:100vh;
    height:calc(var(--hmmp-vh,1vh) * 100);
    height:100dvh
  }
  
  .hmmp-player.hmmp-layout-hero .hmmp-content{
    width:100%;
    padding:clamp(16px,4vw,22px)
  }
  
  /* Drawer adaptado para mobile */
  .hmmp-player .hmmp-drawer{
    right:10px;
    bottom:10px;
    width:calc(100% - 20px)
  }
  
  .hmmp-player .hmmp-volume{display:none}
  .hmmp-player .hmmp-controls{gap:3px;padding:8px}
  .hmmp-player .hmmp-ctrl{padding:5px;font-size:12px}
}

/* TABLET: Diseño intermedio */
@media(min-width:768px) and (max-width:1024px){
  .hmmp-player{--hmmp-tablet-layout:hero}
  
  /* Tablet - Layout hero (default) */
  .hmmp-player.hmmp-layout-hero .hmmp-hero{
    height:70vh;
    min-height:500px
  }
  
  .hmmp-player.hmmp-layout-hero .hmmp-content{
    width:min(600px,65%);
    padding:clamp(32px,4vw,48px)
  }
  
  /* Tablet - Layout split: video + información lado a lado */
  .hmmp-player.hmmp-layout-split{
    display:flex;
    flex-direction:row;
    gap:24px;
    align-items:flex-start
  }
  
  .hmmp-player.hmmp-layout-split .hmmp-hero{
    flex:1;
    height:500px;
    min-height:500px;
    margin:0
  }
  
  .hmmp-player.hmmp-layout-split .hmmp-content{
    flex:1;
    width:100%;
    padding:32px 0;
    margin-top:0
  }
  
  .hmmp-player.hmmp-layout-split .hmmp-overlay{
    background:none
  }
  
  /* Tablet - Layout grid: 2 columnas */
  .hmmp-player.hmmp-layout-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    padding:20px
  }
  
  .hmmp-player.hmmp-layout-grid .hmmp-hero{
    grid-column:1;
    height:400px;
    margin:0
  }
  
  .hmmp-player.hmmp-layout-grid .hmmp-content{
    grid-column:2;
    width:100%;
    padding:0;
    margin-top:0
  }
}

/* DESKTOP: Diseño completo */
@media(min-width:1025px){
  .hmmp-player .hmmp-hero{height:90vh;min-height:600px}
  .hmmp-player .hmmp-content{width:min(760px,72%);padding:clamp(28px,5vw,78px)}
}

/* Hail Mary Media Player PRO 2.3.0 */
.hmmp-player .hmmp-controls{transition:opacity .28s ease,transform .28s ease;opacity:1;transform:translateY(0)}
.hmmp-player .hmmp-controls.hmmp-controls-hidden{opacity:0;transform:translateY(10px);pointer-events:none}
.hmmp-player .hmmp-video-wrap{cursor:default}
.hmmp-player .hmmp-download-panel{padding:4px 2px 2px}
.hmmp-player .hmmp-download-title{font-size:18px;font-weight:700;margin:0 0 14px}
.hmmp-player .hmmp-download-quality-list{width:100%;display:flex;flex-direction:column;gap:8px}
.hmmp-player .hmmp-download-quality-option{appearance:none;-webkit-appearance:none;width:100%;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.035);color:#fff;cursor:pointer;font:inherit;text-align:left;transition:background .2s ease,border-color .2s ease,transform .15s ease,box-shadow .2s ease}
.hmmp-player .hmmp-download-quality-option:hover{background:rgba(255,255,255,.07);border-color:rgba(100,150,220,.38)}
.hmmp-player .hmmp-download-quality-option:active{transform:scale(.985)}
.hmmp-player .hmmp-download-quality-option.hmmp-selected{background:rgba(255,255,255,.1);border-color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.hmmp-player .hmmp-download-quality-name{font-size:14px;font-weight:650}
.hmmp-player .hmmp-download-quality-check{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .15s ease}
.hmmp-player .hmmp-download-quality-check svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hmmp-player .hmmp-download-quality-option.hmmp-selected .hmmp-download-quality-check{opacity:1;transform:scale(1)}
.hmmp-player .hmmp-download-quality-option .hmmp-lock{display:none}
.hmmp-player .hmmp-download-quality-option .hmmp-lock.hmmp-show{display:inline-block}
.hmmp-player .hmmp-download-quality-option.hmmp-download-locked{cursor:not-allowed;opacity:.55}
.hmmp-player .hmmp-download-submit{width:100%;min-height:48px;margin-top:12px;border:0;border-radius:12px;background:#fff;color:#111;font:inherit;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.hmmp-player .hmmp-download-submit svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hmmp-player .hmmp-download-submit:disabled{cursor:not-allowed;opacity:.35}
.hmmp-player .hmmp-download-submit.hmmp-download-loading{opacity:.7;pointer-events:none}
.hmmp-player .hmmp-download-submit.hmmp-download-loading span{font-size:0}
.hmmp-player .hmmp-download-submit.hmmp-download-loading span:after{content:"Preparando…";font-size:14px}
.hmmp-player .hmmp-download-status{font-size:12px;opacity:.65;margin-top:9px;min-height:16px}
@media(max-width:767px){.hmmp-player .hmmp-download-quality-option{min-height:52px}.hmmp-player .hmmp-download-submit{min-height:48px}}

/* Hail Mary Media Player PRO 2.4.0 — Elementor styling */
.hmmp-player .hmmp-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--hmmp-button-icon-gap,8px)}
.hmmp-player .hmmp-button-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.hmmp-player .hmmp-button-icon svg{width:1em;height:1em;display:block}
.hmmp-player .hmmp-button-icon.hmmp-icon-hidden{display:none!important}
.hmmp-player .hmmp-description{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.hmmp-player .hmmp-description::-webkit-scrollbar{width:0;height:0}
.hmmp-player .hmmp-description:hover,.hmmp-player .hmmp-description:focus,.hmmp-player .hmmp-description.hmmp-scroll-active{scrollbar-width:thin}
.hmmp-player .hmmp-description:hover::-webkit-scrollbar,.hmmp-player .hmmp-description:focus::-webkit-scrollbar,.hmmp-player .hmmp-description.hmmp-scroll-active::-webkit-scrollbar{width:7px;height:7px}
.hmmp-player .hmmp-description::-webkit-scrollbar-thumb{background:rgba(255,255,255,.38);border-radius:20px}
.hmmp-player .hmmp-description::-webkit-scrollbar-track{background:transparent}

/* 2.4.6 - fix: default logo width/height now come from the widget's own Elementor
   control defaults (500px / 190px), generated the normal Elementor way. No hardcoded
   max-width/max-height here anymore — that was silently capping the logo whenever
   someone set Ancho/Alto bigger than 500px/190px without also touching a max-width
   field (there is no max-height control at all), which looked like the container was
   limiting the size. */
.hmmp-player .hmmp-logo{display:block;box-sizing:border-box;}

/* ============================================================
   Hail Mary Media Player PRO 2.5.0 — Custom player engine
   (reemplaza los controles nativos del <video> dentro del modal
   por el motor propio: scrubbing con preview, capítulos, gestos
   táctiles, 2x al mantener presionado, "¿sigues ahí?", cast real,
   etc. Colores alineados a la paleta blanco/negro que ya usa el
   resto del widget, en vez del acento dorado de la demo original.)
   ============================================================ */
.hmmp-player .hmmp-video-wrap{position:relative;user-select:none;}
.hmmp-player .hmmp-video{object-fit:contain;background:#000;}

.hmmp-player .hmmp-gesture-zone{position:absolute;top:0;bottom:72px;width:33.33%;z-index:3;}
.hmmp-player .hmmp-gesture-zone[data-gesture="left"]{left:0;}
.hmmp-player .hmmp-gesture-zone[data-gesture="center"]{left:33.33%;}
.hmmp-player .hmmp-gesture-zone[data-gesture="right"]{right:0;}

.hmmp-player .hmmp-gesture-flash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);background:rgba(0,0,0,.55);border-radius:50%;width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:4;}
.hmmp-player .hmmp-gesture-flash.hmmp-show{opacity:1;transform:translate(-50%,-50%) scale(1);}

.hmmp-player .hmmp-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:#fff;animation:hmmp-spin .8s linear infinite;display:none;z-index:4;}
.hmmp-player .hmmp-video-wrap.hmmp-buffering .hmmp-spinner{display:block;}
@keyframes hmmp-spin{to{transform:translate(-50%,-50%) rotate(360deg);}}

.hmmp-player .hmmp-center-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;cursor:pointer;z-index:3;transition:opacity .2s ease,transform .2s ease;}
.hmmp-player .hmmp-video-wrap.hmmp-playing .hmmp-center-play{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.85);}

.hmmp-player .hmmp-holdspeed-badge{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.65);color:#fff;font-weight:700;font-size:13px;padding:5px 12px;border-radius:20px;opacity:0;transition:opacity .15s ease;z-index:5;pointer-events:none;}
.hmmp-player .hmmp-holdspeed-badge.hmmp-show{opacity:1;}

.hmmp-player .hmmp-cast-badge{position:absolute;top:14px;left:14px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:5px 10px;border-radius:20px;z-index:5;letter-spacing:.02em;}

.hmmp-player .hmmp-toast{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:rgba(10,10,12,.9);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:12px;padding:7px 12px;border-radius:7px;opacity:0;transition:opacity .25s ease;z-index:7;pointer-events:none;white-space:nowrap;}
.hmmp-player .hmmp-toast.hmmp-show{opacity:1;}

.hmmp-player .hmmp-quality-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:13px;z-index:6;}
.hmmp-player .hmmp-quality-overlay[hidden]{display:none;}
.hmmp-player .hmmp-mini-spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:hmmp-spin .8s linear infinite;}

.hmmp-player .hmmp-idle-modal{position:absolute;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:8;}
.hmmp-player .hmmp-idle-modal[hidden]{display:none;}
.hmmp-player .hmmp-idle-box{background:#151518;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:22px 26px;text-align:center;max-width:320px;}
.hmmp-player .hmmp-idle-box p{font-size:13px;color:rgba(255,255,255,.75);margin:8px 0 16px;}
.hmmp-player .hmmp-idle-continue{background:#fff;color:#111;border:0;border-radius:999px;padding:10px 20px;font-weight:700;cursor:pointer;}

.hmmp-player .hmmp-next{position:absolute;right:18px;bottom:96px;background:rgba(0,0,0,.8);padding:12px;border-radius:12px;z-index:5;font-size:13px;display:flex;align-items:center;gap:10px;}
.hmmp-player .hmmp-next[hidden]{display:none;}
.hmmp-player .hmmp-next button{background:#fff;color:#111;border:0;border-radius:999px;padding:7px 14px;font-weight:700;cursor:pointer;}

/* barra de controles propia (reemplaza el <input type=range> nativo) */
.hmmp-player .hmmp-controls{opacity:1;transform:translateY(0);}

/* FIX 2.6.1: .hmmp-controls nunca traía flex-direction:column, así que la fila
   de progreso (.hmmp-seek-row) y la fila de botones (.hmmp-btn-row) quedaban
   una al lado de la otra en una sola línea en vez de apiladas -- esto es lo
   que rompía visualmente toda la barra de controles (icono de reproducir
   pegado al tiempo, thumb del seek suelto en el texto, etc.). Viene desde la
   base del CSS original del plugin, antes de cualquier cambio de iconos. */
.hmmp-player .hmmp-controls{flex-direction:column;align-items:stretch;}
.hmmp-player .hmmp-seek-row{width:100%;}
.hmmp-player .hmmp-btn-row{width:100%;}
.hmmp-player .hmmp-video-wrap.hmmp-ui-hidden .hmmp-controls{opacity:0;transform:translateY(10px);pointer-events:none;}
.hmmp-player .hmmp-seek-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.hmmp-player .hmmp-seek-row .hmmp-time{font-size:12px;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;flex-shrink:0;}
.hmmp-player .hmmp-seek{position:relative;flex:1;padding:10px 0;cursor:pointer;}
.hmmp-player .hmmp-seek-track{position:relative;height:4px;border-radius:3px;background:rgba(255,255,255,.22);}
.hmmp-player .hmmp-seek-buffered{position:absolute;top:0;left:0;height:100%;border-radius:3px;background:rgba(255,255,255,.38);width:0;}
.hmmp-player .hmmp-seek-fill{position:absolute;top:0;left:0;height:100%;border-radius:3px;background:#fff;width:0;}
.hmmp-player .hmmp-seek-thumb{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(255,255,255,.18);}
.hmmp-player .hmmp-chapter-markers{position:absolute;inset:0;pointer-events:none;}
.hmmp-player .hmmp-chapter-mark{position:absolute;top:50%;width:2px;height:9px;background:rgba(0,0,0,.55);transform:translate(-50%,-50%);}
.hmmp-player .hmmp-seek-preview{position:absolute;bottom:26px;transform:translateX(-50%);background:#000;border:1px solid rgba(255,255,255,.2);border-radius:6px;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:6;}
.hmmp-player .hmmp-seek-preview.hmmp-show{opacity:1;}
.hmmp-player .hmmp-seek-preview canvas{display:block;width:128px;height:72px;}
.hmmp-player .hmmp-seek-tooltip{position:absolute;bottom:2px;transform:translateX(-50%);background:rgba(0,0,0,.85);color:#fff;font-size:11px;padding:2px 6px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:6;white-space:nowrap;}
.hmmp-player .hmmp-seek-tooltip.hmmp-show{opacity:1;}

.hmmp-player .hmmp-btn-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.hmmp-player .hmmp-ctrl{background:transparent;border:0;color:#fff;font-size:16px;cursor:pointer;padding:8px;border-radius:6px;line-height:1;display:flex;align-items:center;justify-content:center;}
.hmmp-player .hmmp-ctrl:hover{background:rgba(255,255,255,.1);}
.hmmp-player .hmmp-ctrl[hidden]{display:none;}
.hmmp-player .hmmp-ctrl.hmmp-active{color:#fff;background:rgba(255,255,255,.18);}

/* íconos minimalistas de línea (2.6.0) */
.hmmp-player .hmmp-icon{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block;flex-shrink:0;}
.hmmp-player .hmmp-icon.hmmp-icon-fill{fill:currentColor;stroke:none;}
.hmmp-player .hmmp-center-play svg{width:26px;height:26px;margin-left:2px;}
.hmmp-player .hmmp-ctrl-num{flex-direction:column;gap:1px;}
.hmmp-player .hmmp-ctrl-num-label{font-size:9px;font-weight:600;line-height:1;letter-spacing:-0.02em;}
.hmmp-player [data-action="downloads"] .hmmp-icon{width:19px;height:19px;}
.hmmp-player .hmmp-vol-wrap{display:flex;align-items:center;gap:6px;}
.hmmp-player .hmmp-volume{width:80px;accent-color:#fff;}
.hmmp-player .hmmp-speed-label{font-size:12px;color:rgba(255,255,255,.75);padding:0 4px;min-width:28px;text-align:center;}
.hmmp-player .hmmp-spacer{flex:1;}

/* menú de ajustes (calidad / velocidad / subtítulos / capítulos) */
.hmmp-player .hmmp-settings{position:absolute;right:12px;bottom:64px;z-index:6;background:rgba(10,10,12,.97);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:6px;width:220px;max-height:min(420px,60vh);overflow:auto;}
.hmmp-player .hmmp-settings[hidden]{display:none;}
.hmmp-player .hmmp-menu-section{font-size:10.5px;letter-spacing:.06em;color:rgba(255,255,255,.5);text-transform:uppercase;padding:9px 10px 4px;}
.hmmp-player .hmmp-menu-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;font-size:13px;border-radius:8px;cursor:pointer;color:#fff;}
.hmmp-player .hmmp-menu-item:hover{background:rgba(255,255,255,.08);}
.hmmp-player .hmmp-menu-item.hmmp-sel{background:rgba(255,255,255,.14);font-weight:600;}
.hmmp-player .hmmp-menu-item[hidden]{display:none;}
.hmmp-player .hmmp-lock{font-size:10px;color:rgba(255,255,255,.45);}
.hmmp-player .hmmp-lock.hmmp-show::after{content:'🔒';}
.hmmp-player .hmmp-chapter-jump-list .hmmp-menu-item{font-size:12.5px;}

/* modo cine: el diálogo del modal pasa a ocupar toda la pantalla, sin bordes */
.hmmp-player .hmmp-dialog.hmmp-cinema-on{width:100vw;height:100vh;height:calc(var(--hmmp-vh,1vh) * 100);height:100dvh;max-width:100vw;border-radius:0;}
.hmmp-player .hmmp-dialog.hmmp-cinema-on .hmmp-video-wrap{height:100%;}
.hmmp-player .hmmp-dialog.hmmp-cinema-on .hmmp-video{height:100%;}

@media(max-width:767px){
 .hmmp-player .hmmp-settings{width:calc(100% - 24px);right:12px;}
 .hmmp-player .hmmp-seek-preview{display:none;}
}

/* Menú de descargas propio de los controles del reproductor */
.hmmp-player .hmmp-player-download-menu{position:absolute;right:12px;bottom:64px;z-index:7;background:rgba(10,10,12,.97);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:6px;width:220px;max-height:min(420px,60vh);overflow:auto;}
.hmmp-player .hmmp-player-download-menu[hidden]{display:none;}
.hmmp-player .hmmp-player-download-status{font-size:11px;color:rgba(255,255,255,.62);padding:4px 10px;min-height:15px;}
@media(max-width:767px){.hmmp-player .hmmp-player-download-menu{right:8px;bottom:58px;width:210px;}}

/* ============================================================
   Hail Mary Media Player PRO -- Área de avisos del reproductor
   (hmmp-plan-notice): banner en la esquina superior derecha del
   video para mensajes de "función bloqueada por plan" y avisos
   de estado como "Descarga iniciada". Independiente del toast
   (que queda centrado arriba) y del modal de upgrade (pantalla
   completa) -- este es un aviso liviano que no bloquea el video.
   ============================================================ */
.hmmp-player .hmmp-plan-notice{position:absolute;top:16px;right:16px;z-index:7;display:flex;align-items:flex-start;gap:8px;max-width:min(320px,72%);background:rgba(10,10,12,.94);border:1px solid rgba(255,255,255,.14);border-left:3px solid #4c8dff;color:#fff;font-size:12.5px;line-height:1.45;padding:10px 12px;border-radius:9px;opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease;pointer-events:none;}
.hmmp-player .hmmp-plan-notice[hidden]{display:none;}
.hmmp-player .hmmp-plan-notice.hmmp-show{opacity:1;transform:translateY(0);pointer-events:auto;}
.hmmp-player .hmmp-plan-notice--lock{border-left-color:#f5b942;}
.hmmp-player .hmmp-plan-notice--info{border-left-color:#4c8dff;}
.hmmp-player .hmmp-plan-notice-icon{flex:0 0 auto;font-size:14px;line-height:1.3;}
.hmmp-player .hmmp-plan-notice-text{flex:1;}
.hmmp-player .hmmp-plan-notice-close{flex:0 0 auto;margin:-2px -2px 0 0;background:transparent;border:0;color:rgba(255,255,255,.65);font-size:16px;line-height:1;cursor:pointer;padding:2px;}
.hmmp-player .hmmp-plan-notice-close:hover{color:#fff;}
@media(max-width:767px){.hmmp-player .hmmp-plan-notice{top:10px;right:10px;max-width:calc(100% - 20px);font-size:12px;padding:9px 10px;}}


/* Recuperación de pantalla completa después de volver desde PiP */
.hmmp-pip-return-fullscreen {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 80;
  border: 0;
  border-radius: 10px;
  padding: 13px 18px;
  background: rgba(20, 20, 20, .92);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}

.hmmp-pip-return-fullscreen:active {
  transform: translate(-50%, -50%) scale(.98);
}


/* PiP: el mismo video permanece vivo, pero el reproductor de fondo no es visible. */
.hmmp-player .hmmp-modal.hmmp-pip-background-hidden{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
.hmmp-player .hmmp-modal.hmmp-pip-background-hidden .hmmp-dialog{visibility:hidden!important}
.hmmp-player .hmmp-preview-source{display:none!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}


/* ============================================================
   PiP RETURN FULLSCREEN FALLBACK
   Cuando el navegador bloquea requestFullscreen() al volver desde PiP
   por falta de user activation, el mismo reproductor ocupa el viewport.
   No crea un segundo video ni modifica el src.
   ============================================================ */
html.hmmp-pip-css-lock,
body.hmmp-pip-css-lock{overflow:hidden!important;width:100%!important;height:100%!important;}
/* Portal temporal directo en <body>: evita que un transform/filter de Elementor
   limite el position:fixed del fullscreen visual. Sigue siendo el mismo player. */
.hmmp-player.hmmp-pip-portal{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:calc(var(--hmmp-vh,1vh) * 100)!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  z-index:2147483646!important;
  pointer-events:none!important;
  isolation:isolate!important;
}
.hmmp-player.hmmp-pip-portal .hmmp-modal{
  pointer-events:auto!important;
}

.hmmp-player .hmmp-modal.hmmp-pip-return-css-fullscreen{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:calc(var(--hmmp-vh,1vh) * 100)!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  background:#000!important;
  z-index:2147483647!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
.hmmp-player .hmmp-modal.hmmp-pip-return-css-fullscreen .hmmp-dialog{
  width:100vw!important;
  max-width:none!important;
  height:100vh!important;
  height:calc(var(--hmmp-vh,1vh) * 100)!important;
  height:100dvh!important;
  min-height:100vh!important;
  min-height:calc(var(--hmmp-vh,1vh) * 100)!important;
  min-height:100dvh!important;
  border-radius:0!important;
  display:flex!important;
  flex-direction:column!important;
  background:#000!important;
}
.hmmp-player .hmmp-modal.hmmp-pip-return-css-fullscreen .hmmp-video-wrap{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  flex:1 1 auto!important;
}
.hmmp-player .hmmp-modal.hmmp-pip-return-css-fullscreen .hmmp-video{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
.hmmp-player .hmmp-modal.hmmp-pip-return-css-fullscreen .hmmp-modal-close{
  position:absolute!important;
  top:12px!important;
  right:16px!important;
}

/*
   PiP RETURN: el primer click/toque convierte el fallback visual en
   fullscreen nativo. El aviso no intercepta el gesto.
*/
.hmmp-pip-return-hint{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  z-index:2147483647!important;
  padding:12px 18px!important;
  border-radius:999px!important;
  background:rgba(0,0,0,.72)!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  pointer-events:none!important;
  box-shadow:0 8px 30px rgba(0,0,0,.35)!important;
}

/* Trailer: mismos controles del reproductor, pero sin Descargar ni Ajustes. */
.hmmp-player .hmmp-video-wrap.hmmp-trailer-mode .hmmp-ctrl.hmmp-trailer-disabled{
  opacity:.32!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
}
.hmmp-player .hmmp-video-wrap.hmmp-trailer-mode .hmmp-ctrl.hmmp-trailer-disabled:focus{
  outline:none!important;
}

/* v2.5.13 — carga inicial minimalista: solo spinner, sin texto ni controles */
.hmmp-player .hmmp-loading-screen{position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:20;}
.hmmp-player .hmmp-loading-screen[hidden]{display:none;}
.hmmp-player .hmmp-loading-spinner{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.16);border-top-color:#fff;animation:hmmp-loading-spin .75s linear infinite;}
@keyframes hmmp-loading-spin{to{transform:rotate(360deg);}}
.hmmp-player .hmmp-video-wrap.hmmp-video-loading .hmmp-controls{opacity:0!important;transform:translateY(10px)!important;pointer-events:none!important;}
.hmmp-player .hmmp-video-wrap.hmmp-video-loading .hmmp-center-play{opacity:0!important;pointer-events:none!important;}
.hmmp-player .hmmp-video-wrap.hmmp-video-loading .hmmp-gesture-zone{pointer-events:none;}

/* v2.5.14 — pantalla de carga completamente cuadrada, sin esquinas redondeadas */
.hmmp-player .hmmp-dialog.hmmp-loading-active{border-radius:0!important;}
.hmmp-player .hmmp-dialog.hmmp-loading-active .hmmp-video-wrap{border-radius:0!important;}
.hmmp-player .hmmp-dialog.hmmp-loading-active .hmmp-loading-screen{border-radius:0!important;}

/* ============================================================
   v2.5.27 -- "interfaz recortada, hay que minimizar la pantalla
   para verla completa" -- SEGUNDA CAUSA, distinta a la de 2.5.26.

   El fix de 100dvh de la versión anterior arregla el caso donde el
   propio widget mide mal su alto. Pero en las capturas nuevas ya
   solo aparece "Ver ahora" + "Descargar" (ese fix ya sirvió) y
   igual se corta. Eso indica que el recorte NO lo hace el widget:
   lo hace la SECCIÓN/CONTENEDOR de Elementor que lo envuelve.

   Elementor permite fijar, solo para el breakpoint "Mobile", una
   altura de sección tipo "Min Height: Fit to screen" (=100vh) con
   overflow oculto. Si esa opción está activada en la sección donde
   vive este widget, todo lo que el widget mida de más que esa altura
   queda recortado -- y al reducir el zoom del navegador, el 100vh de
   esa sección pasa a representar más píxeles reales, revelando el
   resto. Eso explica exactamente el "tengo que minimizar".

   Esto no se puede arreglar solo con configuración de Elementor
   porque puede variar por sección; en cambio, se libera aquí mismo
   cualquier contenedor ancestro que envuelva a .hmmp-player en
   mobile, para que nunca lo recorte, sin tocar el resto del sitio.
   :has() ya lo soportan Chrome/Safari/Firefox mobile actuales.
   ============================================================ */
@media(max-width:767px){
  body:has(.hmmp-player) .elementor-section:has(.hmmp-player),
  body:has(.hmmp-player) .elementor-top-section:has(.hmmp-player),
  body:has(.hmmp-player) .elementor-container:has(.hmmp-player),
  body:has(.hmmp-player) .elementor-row:has(.hmmp-player),
  body:has(.hmmp-player) .elementor-column:has(.hmmp-player),
  body:has(.hmmp-player) .elementor-column-wrap:has(.hmmp-player),
  body:has(.hmmp-player) .elementor-widget-wrap:has(.hmmp-player),
  body:has(.hmmp-player) .elementor-widget:has(.hmmp-player),
  body:has(.hmmp-player) .e-con:has(.hmmp-player),
  body:has(.hmmp-player) .e-con-inner:has(.hmmp-player){
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
}



/* =========================================================
   HMMP 2.6.3 — PELISANIME MOBILE UI INTEGRATION
   Imported from user-provided CSS customization.
   ========================================================= */

/* =========================================================

BASE DEL PLAYER (MOBILE)
========================================================= */

@media (max-width: 767px) and (orientation: portrait) {

.hmmp-view-mobile .hmmp-player {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100svh !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #020811 !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
}

.hmmp-view-mobile .hmmp-player *,
.hmmp-view-mobile .hmmp-player *::before,
.hmmp-view-mobile .hmmp-player *::after {
    box-sizing: border-box;
}

/* Evita espacios creados por Elementor */
.hmmp-view-mobile .hmmp-player .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}


/* =====================================================
   2. HERO
   ===================================================== */

.hmmp-view-mobile .hmmp-player .hmmp-hero {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: #020811 !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important;
}

.hmmp-view-mobile .hmmp-player .hmmp-hero-mobile-banner {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important;
    pointer-events: none !important;
}

/* Oscurecimiento cinematográfico */
.hmmp-view-mobile .hmmp-player .hmmp-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    background: linear-gradient(
        to bottom,
        rgba(0, 5, 12, .08) 0%,
        rgba(0, 5, 12, .04) 25%,
        rgba(0, 6, 14, .12) 42%,
        rgba(0, 6, 14, .35) 58%,
        rgba(0, 6, 14, .76) 73%,
        rgba(1, 7, 15, .94) 88%,
        #020811 100%
    ) !important;
}

/* Degradado lateral para profundidad */
.hmmp-view-mobile .hmmp-player .hmmp-hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background: linear-gradient(
        to right,
        rgba(0, 4, 10, .34) 0%,
        rgba(0, 4, 10, .08) 45%,
        rgba(0, 4, 10, .02) 100%
    ) !important;
}

.hmmp-view-mobile .hmmp-player .hmmp-trailer-layer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    pointer-events: none !important;
}


/* =====================================================
   3. CONTENIDO
   ===================================================== */

.hmmp-view-mobile .hmmp-player .hmmp-content {
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: env(safe-area-inset-top) 24px calc(max(22px, env(safe-area-inset-bottom)) + 15px) !important;
    overflow: hidden !important;
}


/* =====================================================
   4. LOGO (oculto — la referencia usa el título)
   ===================================================== */

.hmmp-view-mobile .hmmp-player .hmmp-logo {
    display: none !important;
}


/* =====================================================
   5. TÍTULO (con línea azul decorativa)
   ===================================================== */

.hmmp-view-mobile .hmmp-player .hmmp-title {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px !important;
    padding: 0 0 8px !important;
    color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: var(--hmmp-title-size, clamp(25px, 7vw, 46px)) !important;
    font-weight: 500 !important;
    line-height: 1.04 !important;
    letter-spacing: .12em !important;
    text-align: left !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-shadow: 0 2px 22px rgba(0,0,0,.70) !important;
}

.hmmp-view-mobile .hmmp-player .hmmp-title::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 46px !important;
    height: 3px !important;
    border-radius: 3px !important;
    background: #168cff !important;
    box-shadow: 0 0 10px rgba(22,140,255,.55) !important;
}


/* =====================================================
   6. METADATOS
   ===================================================== */

.hmmp-view-mobile .hmmp-player .hmmp-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: .02em !important;
    text-align: left !important;
    gap: 0 !important;
}


/* =====================================================
   7. GÉNEROS (con icono de barras)
   ===================================================== */

.hmmp-view-mobile .hmmp-player .hmmp-genres {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    color: #c9d7e9 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: .01em !important;
    text-align: left !important;
}

.hmmp-view-mobile .hmmp-player .hmmp-genres::before {
    content: "" !important;
    display: inline-block !important;
    width: 15px !important;
    height: 12px !important;
    flex: 0 0 15px !important;
    background-image:
        linear-gradient(#7f9ab8,#7f9ab8),
        linear-gradient(#7f9ab8,#7f9ab8),
        linear-gradient(#7f9ab8,#7f9ab8) !important;
    background-size: 3px 55%, 3px 100%, 3px 78% !important;
    background-position: 0 100%, 6px 100%, 12px 100% !important;
    background-repeat: no-repeat !important;
}
/* =====================================================
8. SINOPSIS
Encabezado FIJO por encima del texto al hacer scroll
===================================================== */

.hmmp-view-mobile .hmmp-player .hmmp-description {
 position: relative !important;
 z-index: 99 !important;

 display: block !important;
 width: 100% !important;
 max-width: 100% !important;

 height: 75px !important;
 max-height: 75px !important;
 min-height: 0 !important;

 flex: 0 0 auto !important;
 flex-shrink: 0 !important;
 flex-grow: 0 !important;

 margin: 0 0 22px !important;

 /* Espacio reservado para el encabezado */
 padding: 26px 6px 2px 0 !important;

 overflow-x: hidden !important;
 overflow-y: scroll !important;

 overscroll-behavior: contain !important;
 -webkit-overflow-scrolling: touch !important;
 scroll-behavior: smooth !important;

 color: #b7c8dd !important;
 font-family: Arial, Helvetica, sans-serif !important;
 font-size: 14px !important;
 line-height: 1.55 !important;
 letter-spacing: .005em !important;
 text-align: left !important;

 scrollbar-width: none !important;

 /* Crea una capa independiente */
 isolation: isolate !important;
}


/* =====================================================
ENCABEZADO "SINOPSIS"
Queda siempre encima del contenido que hace scroll
===================================================== */

.hmmp-view-mobile .hmmp-player .hmmp-description::before {
 content: "SINOPSIS" !important;

 position: absolute !important;
 top: 0 !important;
 left: 0 !important;
 right: 0 !important;

 z-index: 999 !important;

 display: flex !important;
 align-items: center !important;

 width: 100% !important;
 height: 26px !important;

 margin: 0 !important;
 padding: 0 26px 0 0 !important;

 box-sizing: border-box !important;

 color: #8fa8c4 !important;

 font-family: Arial, Helvetica, sans-serif !important;
 font-size: 11px !important;
 font-weight: 700 !important;

 letter-spacing: .18em !important;
 text-transform: uppercase !important;
 line-height: 26px !important;

 /* Fondo OPACO para ocultar completamente el texto */
 background-color: #030a14 !important;

 background-image:
     linear-gradient(
         rgba(255,255,255,.16),
         rgba(255,255,255,.16)
     ),
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238fa8c4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;

 background-repeat: no-repeat, no-repeat !important;

 background-size:
     calc(100% - 34px) 1px,
     14px 14px !important;

 background-position:
     0 100%,
     right 2px center !important;

 pointer-events: none !important;

 /* Evita cualquier transparencia */
 opacity: 1 !important;
}


/* =====================================================
SCROLLBAR
===================================================== */

.hmmp-view-mobile .hmmp-player .hmmp-description::-webkit-scrollbar {
 width: 3px !important;
}

.hmmp-view-mobile .hmmp-player .hmmp-description::-webkit-scrollbar-track {
 background: transparent !important;
}

.hmmp-view-mobile .hmmp-player .hmmp-description::-webkit-scrollbar-thumb {
 background: transparent !important;
 border-radius: 10px !important;
 transition: background .25s ease !important;
}


/* Scrollbar visible mientras se desplaza */
.hmmp-view-mobile .hmmp-player .hmmp-description.hmmp-desc-scrolling {
 scrollbar-width: thin !important;
 scrollbar-color: rgba(140,175,215,.55) transparent !important;
}

.hmmp-view-mobile .hmmp-player .hmmp-description.hmmp-desc-scrolling::-webkit-scrollbar-thumb {
 background: rgba(140,175,215,.55) !important;
}

.hmmp-view-mobile .hmmp-player .hmmp-description:hover::-webkit-scrollbar-thumb {
 background: rgba(140,175,215,.35) !important;
}

.hmmp-view-mobile .hmmp-player .hmmp-description {
 position: relative !important;
 z-index: 99 !important;
 isolation: isolate !important;
}


/* MANTENER EL BANNER SINOPSIS */
.hmmp-view-mobile .hmmp-player .hmmp-description::before {
 content: "SINOPSIS" !important;

 position: absolute !important;
 top: 0 !important;
 left: 0 !important;
 right: 0 !important;

 z-index: 999 !important;

 /* Mantener el aspecto actual */
 height: 24px !important;
 background-color: #030a14 !important;

 /* El resto de tu diseño actual se conserva */
}



/* =====================================================
9. CONTENEDOR DE BOTONES
Alineado exactamente con el contenido del lado izquierdo
===================================================== */

.hmmp-view-mobile .hmmp-player .hmmp-actions {
 display: flex !important;
 flex-direction: column !important;
 align-items: stretch !important;
 justify-content: flex-end !important;
 gap: 12px !important;

 width: 100% !important;

 /* Sin margen lateral adicional */
 margin: 0 !important;

 /* El ancho queda exactamente igual al texto */
 padding: 20px 0 0 0 !important;
}


 /* =====================================================
    10. BOTONES DEL HERO (base + iconos)
    ===================================================== */

 .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-button {
     position: relative !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     flex: 0 0 auto !important;
     width: 100% !important;
     min-width: 0 !important;
     min-height: 60px !important;
     height: 60px !important;
     margin: 0 !important;
     padding: 0 18px !important;
     border-radius: 31px !important;
     font-family: Arial, Helvetica, sans-serif !important;
     font-size: 14px !important;
     font-weight: 600 !important;
     line-height: 1 !important;
     letter-spacing: .19em !important;
     text-align: center !important;
     text-transform: uppercase !important;
     cursor: pointer !important;
     outline: none !important;
     transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-button-icon {
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     width: 20px !important;
     height: 20px !important;
     flex: 0 0 20px !important;
     margin: 0 14px 0 0 !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-button-icon svg {
     display: block !important;
     width: 19px !important;
     height: 19px !important;
     max-width: 19px !important;
     max-height: 19px !important;
     fill: currentColor !important;
 }


 /* =====================================================
    11. VER AHORA
    ===================================================== */

 .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-watch {
     color: #ffffff !important;
     border: 1px solid rgba(67,166,255,.95) !important;
     background: linear-gradient(135deg, #2789ef 0%, #1557b4 100%) !important;
     box-shadow: 0 0 22px rgba(18,116,240,.34), inset 0 1px 0 rgba(255,255,255,.18) !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-watch:active {
     transform: scale(.985) !important;
     box-shadow: 0 0 12px rgba(18,116,240,.25) !important;
 }


 /* =====================================================
    12. TRAILER → BOTÓN DE PLAY CENTRAL SOBRE LA IMAGEN
    ===================================================== */

 .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-trailer-button {
     position: absolute !important;
     top: 30% !important;
     left: 50% !important;
     transform: translate(-50%, -50%) !important;
     z-index: 15 !important;
     width: 84px !important;
     height: 84px !important;
     min-height: 84px !important;
     margin: 0 !important;
     padding: 0 !important;
     border-radius: 50% !important;
     border: 2px solid rgba(255,255,255,.92) !important;
     background: rgba(6,14,26,.30) !important;
     backdrop-filter: blur(6px) !important;
     -webkit-backdrop-filter: blur(6px) !important;
     box-shadow: 0 10px 34px rgba(0,0,0,.40) !important;
     transition: transform .18s ease, background .18s ease, border-color .18s ease !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-trailer-button:active {
     transform: translate(-50%, -50%) scale(.94) !important;
     background: rgba(6,14,26,.48) !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-trailer-button .hmmp-trailer-label {
     display: none !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-trailer-button .hmmp-button-icon {
     position: relative !important;
     margin: 0 !important;
     width: 30px !important;
     height: 30px !important;
     flex: 0 0 30px !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-trailer-button .hmmp-button-icon svg {
     display: none !important;
 }

 /* Triángulo de play dibujado con CSS */
 .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-trailer-button .hmmp-button-icon::before {
     content: "" !important;
     position: absolute !important;
     top: 50% !important;
     left: 54% !important;
     width: 0 !important;
     height: 0 !important;
     border-style: solid !important;
     border-width: 12px 0 12px 19px !important;
     border-color: transparent transparent transparent #ffffff !important;
     transform: translate(-50%, -50%) !important;
 }


 /* =====================================================
    13. DESCARGAR (botón del hero)
    ===================================================== */

 .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-download-button {
     color: #dce8f7 !important;
     border: 1px solid rgba(78,119,163,.75) !important;
     background: rgba(3,11,22,.72) !important;
     backdrop-filter: blur(13px) !important;
     -webkit-backdrop-filter: blur(13px) !important;
     box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-download-button:active {
     transform: scale(.985) !important;
     background: rgba(9,25,43,.80) !important;
 }


 /* =====================================================
    14. ELIMINAR BOTÓN DUPLICADO "MORE"
    ===================================================== */

 .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-more-button {
     display: none !important;
 }


 /* =====================================================
    15. CONTROLES DEL VIDEO OCULTOS SOBRE EL HERO
    (no afecta al modal)
    ===================================================== */

 .hmmp-view-mobile .hmmp-player .hmmp-hero .hmmp-controls {
     display: none !important;
 }


 /* =====================================================
    16. MENÚS DEL REPRODUCTOR (descarga / ajustes)
    ===================================================== */

 .hmmp-view-mobile .hmmp-player .hmmp-player-download-menu,
 .hmmp-view-mobile .hmmp-player .hmmp-settings {
     position: absolute !important;
     z-index: 300 !important;
     max-width: calc(100% - 32px) !important;
     max-height: 70svh !important;
     overflow-y: auto !important;
     border-radius: 18px !important;
     background: rgba(3,10,20,.97) !important;
     border: 1px solid rgba(78,132,185,.30) !important;
     box-shadow: 0 15px 50px rgba(0,0,0,.52) !important;
     backdrop-filter: blur(20px) !important;
     -webkit-backdrop-filter: blur(20px) !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-menu-section {
     padding: 13px 16px 7px !important;
     color: #7595b5 !important;
     font-size: 11px !important;
     font-weight: 700 !important;
     letter-spacing: .12em !important;
     text-transform: uppercase !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-menu-item {
     display: flex !important;
     align-items: center !important;
     justify-content: space-between !important;
     min-height: 45px !important;
     padding: 0 16px !important;
     color: #dce8f6 !important;
     font-size: 14px !important;
     border-radius: 9px !important;
     cursor: pointer !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-menu-item:active {
     background: rgba(30,120,220,.15) !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-menu-item.hmmp-sel {
     color: #3e9cff !important;
     background: rgba(35,130,235,.10) !important;
 }


 /* =====================================================
    17. AVISO DE PLAN
    ===================================================== */

 .hmmp-view-mobile .hmmp-player .hmmp-plan-notice {
     position: absolute !important;
     z-index: 400 !important;
     left: 18px !important;
     right: 18px !important;
     bottom: 18px !important;
     display: flex !important;
     align-items: center !important;
     gap: 10px !important;
     min-height: 50px !important;
     padding: 10px 12px !important;
     border: 1px solid rgba(70,130,190,.35) !important;
     border-radius: 14px !important;
     color: #dce8f6 !important;
     background: rgba(3,11,21,.94) !important;
     box-shadow: 0 10px 35px rgba(0,0,0,.35) !important;
     backdrop-filter: blur(15px) !important;
     -webkit-backdrop-filter: blur(15px) !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-plan-notice-icon {
     flex: 0 0 auto !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-plan-notice-icon img {
     width: 19px !important;
     height: 19px !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-plan-notice-text {
     flex: 1 1 auto !important;
     font-size: 13px !important;
     line-height: 1.4 !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-plan-notice-close {
     flex: 0 0 auto !important;
     width: 30px !important;
     height: 30px !important;
     padding: 0 !important;
     border: 0 !important;
     background: transparent !important;
     color: #9eb5cc !important;
     font-size: 22px !important;
     cursor: pointer !important;
 }


 /* =====================================================
    18. MODAL DEL VIDEO
    ===================================================== */

 .hmmp-view-mobile .hmmp-player .hmmp-modal {
     position: fixed !important;
     inset: 0 !important;
     z-index: 1000 !important;
     width: 100% !important;
     height: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
     background: #000000 !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-video-wrap {
     position: relative !important;
     width: 100% !important;
     height: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
     background: #000000 !important;
     overflow: hidden !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-video {
     display: block !important;
     width: 100% !important;
     height: 100% !important;
     object-fit: contain !important;
     background: #000000 !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-preview-source {
     position: absolute !important;
     width: 1px !important;
     height: 1px !important;
     opacity: 0 !important;
     pointer-events: none !important;
     display: none !important;
 }


 /* =====================================================
    19. ZONAS TÁCTILES
    ===================================================== */

 .hmmp-view-mobile .hmmp-player .hmmp-gesture-zone {
     position: absolute !important;
     top: 0 !important;
     bottom: 0 !important;
     z-index: 20 !important;
     pointer-events: auto !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-gesture-left {
     left: 0 !important;
     width: 33.333% !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-gesture-center {
     left: 33.333% !important;
     width: 33.333% !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-gesture-right {
     right: 0 !important;
     width: 33.333% !important;
 }


 /* =====================================================
    20. PANTALLA DE CARGA
    ===================================================== */

 .hmmp-view-mobile .hmmp-player .hmmp-loading-screen {
     position: absolute !important;
     inset: 0 !important;
     z-index: 100 !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     background: rgba(0,0,0,.72) !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-loading-spinner {
     width: 42px !important;
     height: 42px !important;
     border: 3px solid rgba(255,255,255,.18) !important;
     border-top-color: #ffffff !important;
     border-radius: 50% !important;
     animation: hmmp-mobile-spin .8s linear infinite !important;
 }

 @keyframes hmmp-mobile-spin {
     to { transform: rotate(360deg); }
 }


 /* =====================================================
    21. PLAY CENTRAL / TOAST
    ===================================================== */

 .hmmp-view-mobile .hmmp-player .hmmp-center-play {
     z-index: 80 !important;
     color: #ffffff !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-toast {
     z-index: 200 !important;
     max-width: calc(100% - 40px) !important;
     border-radius: 12px !important;
     background: rgba(3,10,18,.92) !important;
     color: #ffffff !important;
     backdrop-filter: blur(12px) !important;
     -webkit-backdrop-filter: blur(12px) !important;
 }


 /* =====================================================
    22. MODAL "¿SIGUES AHÍ?"
    ===================================================== */

 /* v2.6.4 — El panel "¿Sigues ahí?" no se muestra en mobile. */
.hmmp-view-mobile .hmmp-player .hmmp-idle-modal,
.hmmp-view-mobile .hmmp-player .hmmp-idle-modal[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.hmmp-view-mobile .hmmp-player .hmmp-idle-modal {
     position: absolute !important;
     inset: 0 !important;
     z-index: 500 !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     padding: 20px !important;
     background: rgba(0,0,0,.65) !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-idle-box {
     width: 100% !important;
     max-width: 340px !important;
     padding: 25px !important;
     border: 1px solid rgba(100,150,200,.25) !important;
     border-radius: 20px !important;
     background: rgba(4,12,22,.97) !important;
     text-align: center !important;
     box-shadow: 0 20px 60px rgba(0,0,0,.50) !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-idle-box strong {
     display: block !important;
     margin-bottom: 10px !important;
     color: #ffffff !important;
     font-size: 19px !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-idle-box p {
     margin: 0 0 20px !important;
     color: #aebfd1 !important;
     font-size: 14px !important;
     line-height: 1.5 !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-idle-continue {
     width: 100% !important;
     min-height: 48px !important;
     border: 0 !important;
     border-radius: 24px !important;
     color: #ffffff !important;
     background: #187ce0 !important;
     font-weight: 600 !important;
 }


 /* =====================================================
    23. "SIGUIENTE EPISODIO"
    ===================================================== */

 .hmmp-view-mobile .hmmp-player .hmmp-next {
     z-index: 250 !important;
     border-radius: 15px !important;
     background: rgba(3,10,19,.94) !important;
     backdrop-filter: blur(15px) !important;
     -webkit-backdrop-filter: blur(15px) !important;
 }


 /* =====================================================
    24. TELÉFONOS PEQUEÑOS (≤380px)
    ===================================================== */

 @media (max-width: 380px) {
     .hmmp-view-mobile .hmmp-player .hmmp-content {
         padding-left: 19px !important;
         padding-right: 19px !important;
     }

     .hmmp-view-mobile .hmmp-player .hmmp-title {
         font-size: var(--hmmp-title-size, clamp(25px, 7vw, 28px)) !important;
         letter-spacing: .095em !important;
         margin-bottom: 5px !important;
     }

     .hmmp-view-mobile .hmmp-player .hmmp-meta {
         font-size: 14px !important;
         margin-bottom: 4px !important;
     }

     .hmmp-view-mobile .hmmp-player .hmmp-genres {
         font-size: 13px !important;
         margin-bottom: 3px !important;
     }

     .hmmp-view-mobile .hmmp-player .hmmp-description {
         height: 45px !important;
         max-height: 45px !important;
         font-size: 14px !important;
         line-height: 1.48 !important;
     }

     .hmmp-view-mobile .hmmp-player .hmmp-actions {
         gap: 9px !important;
     }

     .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-button {
         min-height: 53px !important;
         height: 53px !important;
         font-size: 12px !important;
         letter-spacing: .15em !important;
     }
 }


 /* =====================================================
    25. TELÉFONOS MUY ALTOS (≥850px de alto)
    ===================================================== */

 @media (min-height: 850px) {
     .hmmp-view-mobile .hmmp-player .hmmp-content {
         padding-bottom: max(25px, env(safe-area-inset-bottom)) !important;
     }

     .hmmp-view-mobile .hmmp-player .hmmp-description {
         height: 65px !important;
         max-height: 65px !important;
     }
 }


 /* =====================================================
    26. EVITAR SELECCIÓN ACCIDENTAL
    ===================================================== */

 .hmmp-view-mobile .hmmp-player .hmmp-actions,
 .hmmp-view-mobile .hmmp-player .hmmp-button {
     -webkit-tap-highlight-color: transparent !important;
     user-select: none !important;
     -webkit-user-select: none !important;
 }

}


/* =========================================================
27. PANEL DE DESCARGA — BASE (todas las pantallas)
========================================================= */

.hmmp-player .hmmp-drawer {
 box-sizing: border-box;
 overflow: hidden;
}

.hmmp-player .hmmp-download-panel {
 width: 100%;
 box-sizing: border-box;
 padding: 4px 2px 2px;
}

.hmmp-player .hmmp-download-title {
 margin: 0 0 16px;
 padding: 0 2px;
 color: #fff;
 font-size: 19px;
 line-height: 1.25;
 font-weight: 750;
 letter-spacing: -.2px;
}

.hmmp-player .hmmp-download-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 min-height: 31px;
 margin: 0 0 15px;
}

.hmmp-player .hmmp-download-heading {
 display: flex;
 align-items: center;
 gap: 14px;
 min-width: 0;
}

.hmmp-player .hmmp-download-heading-icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 30px;
 height: 30px;
 flex: 0 0 30px;
 color: #dbe9f8;
}

.hmmp-player .hmmp-download-heading-icon svg {
 width: 22px;
 height: 22px;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
}

.hmmp-player .hmmp-drawer-close {
 width: 34px;
 height: 34px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: -4px -4px 8px auto;
 border: 1px solid rgba(255,255,255,.07);
 border-radius: 10px;
 background: rgba(255,255,255,.035);
 color: rgba(255,255,255,.75);
 font-size: 23px;
 line-height: 1;
 cursor: pointer;
 transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.hmmp-player .hmmp-drawer-close:hover {
 background: rgba(255,255,255,.08);
 border-color: rgba(255,255,255,.14);
 color: #fff;
}

.hmmp-player .hmmp-drawer-close:active {
 transform: scale(.90);
}

/* Contenido antiguo del drawer (por si queda markup viejo) */
.hmmp-player .hmmp-drawer > .hmmp-download-old-content {
 display: none;
}


/* =========================================================
28. LISTA DE CALIDADES (sistema único, sin duplicados)
========================================================= */

.hmmp-player .hmmp-download-quality-list {
 width: 100%;
 display: flex;
 flex-direction: column;
 gap: 9px;
 margin: 0;
 padding: 0;
}

.hmmp-player .hmmp-download-quality-option {
 position: relative;
 width: 100%;
 min-height: 58px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 box-sizing: border-box;
 padding: 0 15px;
 border: 1px solid rgba(91,145,200,.18);
 border-radius: 14px;
 background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
 color: #fff;
 cursor: pointer;
 font-family: inherit;
 font-size: 14px;
 font-weight: 650;
 text-align: left;
 overflow: hidden;
 box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 4px 16px rgba(0,0,0,.12);
 transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .15s ease;
 -webkit-tap-highlight-color: transparent;
 user-select: none;
 -webkit-user-select: none;
}

.hmmp-player .hmmp-download-quality-option::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(120,180,240,.35), transparent);
 opacity: .55;
 pointer-events: none;
}

.hmmp-player .hmmp-download-quality-option:hover {
 background: linear-gradient(135deg, rgba(65,125,185,.16), rgba(35,75,115,.07));
 border-color: rgba(92,158,220,.42);
 box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 7px 22px rgba(0,0,0,.22), 0 0 20px rgba(50,120,190,.07);
}

.hmmp-player .hmmp-download-quality-option:hover .hmmp-download-quality-action {
 color: #fff;
}

.hmmp-player .hmmp-download-quality-option:hover .hmmp-download-quality-action svg {
 transform: translateY(2px);
}

.hmmp-player .hmmp-download-quality-option:active {
 transform: scale(.985);
}

.hmmp-player .hmmp-download-quality-option.hmmp-download-locked {
 cursor: not-allowed;
 background: linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.012));
 border-color: rgba(255,255,255,.07);
 box-shadow: none;
}

.hmmp-player .hmmp-download-quality-option.hmmp-download-locked .hmmp-download-quality-name {
 color: rgba(255,255,255,.48);
}

.hmmp-player .hmmp-download-quality-option.hmmp-download-locked:hover {
 background: linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.012));
 border-color: rgba(255,255,255,.07);
 box-shadow: none;
}

.hmmp-player .hmmp-download-quality-option.hmmp-download-loading {
 pointer-events: none;
 opacity: .62;
}

.hmmp-player .hmmp-download-quality-option.hmmp-download-loading .hmmp-download-quality-action span {
 font-size: 0;
}

.hmmp-player .hmmp-download-quality-option.hmmp-download-loading .hmmp-download-quality-action span::after {
 content: "Preparando…";
 font-size: 12px;
 font-weight: 600;
}

.hmmp-player .hmmp-download-quality-name {
 position: relative;
 display: flex;
 align-items: center;
 min-width: 0;
 color: rgba(255,255,255,.94);
 font-size: 14px;
 line-height: 1.2;
 font-weight: 650;
}

.hmmp-player .hmmp-download-status {
 min-height: 17px;
 margin: 10px 2px 0;
 color: rgba(255,255,255,.52);
 font-size: 11px;
 line-height: 1.45;
 text-align: center;
}


/* =========================================================
29. BOTÓN "DESCARGAR" DE CADA FILA
========================================================= */

.hmmp-player .hmmp-download-quality-action {
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 7px;
 min-width: 105px;
 min-height: 36px;
 padding: 0 12px;
 box-sizing: border-box;
 border: 1px solid rgba(100,160,215,.24);
 border-radius: 9px;
 background: linear-gradient(135deg, rgba(70,125,180,.16), rgba(40,80,125,.08));
 color: rgba(255,255,255,.88);
 font-family: inherit;
 font-size: 12px;
 font-weight: 650;
 white-space: nowrap;
 cursor: pointer;
 transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.hmmp-player .hmmp-download-quality-action span {
 display: inline-block;
 color: inherit;
 font-size: 12px;
 font-weight: 650;
}

.hmmp-player .hmmp-download-quality-action svg {
 width: 16px;
 height: 16px;
 flex: 0 0 16px;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
 transition: transform .2s ease;
}

.hmmp-player .hmmp-download-quality-action:hover {
 background: linear-gradient(135deg, rgba(75,145,215,.28), rgba(50,100,160,.16));
 border-color: rgba(100,175,235,.52);
 color: #fff;
 box-shadow: 0 5px 18px rgba(0,0,0,.22), 0 0 14px rgba(65,140,210,.10);
}

.hmmp-player .hmmp-download-quality-action:hover svg {
 transform: translateY(2px);
}

.hmmp-player .hmmp-download-quality-action:active {
 transform: scale(.96);
}

.hmmp-player .hmmp-download-quality-action:disabled,
.hmmp-player .hmmp-download-quality-action.hmmp-disabled {
 opacity: .42;
 cursor: not-allowed;
 pointer-events: none;
 box-shadow: none;
}

.hmmp-player .hmmp-download-quality-option.hmmp-download-locked .hmmp-download-quality-action {
 background: rgba(255,255,255,.025);
 border-color: rgba(255,255,255,.06);
 color: rgba(255,255,255,.40);
 cursor: not-allowed;
}

.hmmp-player .hmmp-download-quality-option.hmmp-download-locked .hmmp-download-quality-action:hover {
 background: rgba(255,255,255,.025);
 border-color: rgba(255,255,255,.06);
 color: rgba(255,255,255,.40);
 box-shadow: none;
}

.hmmp-player .hmmp-download-quality-action.hmmp-download-loading {
 pointer-events: none;
 opacity: .65;
}

.hmmp-player .hmmp-download-quality-action.hmmp-download-loading::before {
 content: "";
 width: 13px;
 height: 13px;
 border: 2px solid rgba(255,255,255,.18);
 border-top-color: rgba(255,255,255,.85);
 border-radius: 50%;
 animation: hmmpDownloadSpin .7s linear infinite;
}

@keyframes hmmpDownloadSpin {
 to { transform: rotate(360deg); }
}

.hmmp-player .hmmp-download-quality-action.hmmp-download-complete {
 border-color: rgba(80,190,130,.35);
 background: rgba(60,170,110,.10);
 color: rgba(130,235,175,.95);
}


/* =========================================================
30. BOTÓN "DESCARGAR" GLOBAL (debajo de la lista)
NOTA: antes había una regla `!important` que lo ocultaba
por completo (opacity:0, 1px x 1px) y anulaba este diseño.
Se quitó esa regla para que el botón sea visible.
========================================================= */

.hmmp-player .hmmp-download-submit {
 width: 100%;
 margin-top: 18px;
 padding: 0 18px;
 min-height: 50px;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 9px;
 box-sizing: border-box;
 border: 1px solid rgba(90,150,215,.35);
 border-radius: 12px;
 background: linear-gradient(135deg, rgba(65,125,190,.22), rgba(45,85,140,.12));
 color: #fff;
 font-family: inherit;
 font-size: 14px;
 font-weight: 700;
 cursor: pointer;
 box-shadow: 0 6px 20px rgba(0,0,0,.20);
 transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.hmmp-player .hmmp-download-submit svg {
 width: 18px;
 height: 18px;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
}

.hmmp-player .hmmp-download-submit:not(:disabled):hover {
 background: linear-gradient(135deg, rgba(75,145,215,.34), rgba(50,100,160,.20));
 border-color: rgba(105,175,235,.58);
 box-shadow: 0 8px 25px rgba(0,0,0,.28), 0 0 18px rgba(65,140,210,.10);
}

.hmmp-player .hmmp-download-submit:not(:disabled):active {
 transform: scale(.98);
}

.hmmp-player .hmmp-download-submit:disabled {
 opacity: .38;
 cursor: not-allowed;
 box-shadow: none;
}

/* El <select> original queda oculto: la UI real son las tarjetas de calidad */
.hmmp-player .hmmp-download-select {
 position: absolute;
 width: 1px;
 height: 1px;
 opacity: 0;
 pointer-events: none;
 overflow: hidden;
}


/* =========================================================
31. CANDADO (calidad bloqueada)
========================================================= */

.hmmp-player .hmmp-lock {
 width: 18px;
 height: 18px;
 display: none;
 position: relative;
 margin-left: 8px;
 flex: 0 0 18px;
 color: #fff;
 opacity: .82;
}

.hmmp-player .hmmp-lock.hmmp-show {
 display: inline-block;
}

.hmmp-player .hmmp-lock.hmmp-show::after {
 content: "";
 position: absolute;
 left: 4px;
 top: 8px;
 width: 10px;
 height: 8px;
 box-sizing: border-box;
 border: 1.6px solid #fff;
 border-radius: 2px;
 background: transparent;
}

.hmmp-player .hmmp-lock.hmmp-show::before {
 content: "";
 position: absolute;
 left: 6px;
 top: 3px;
 width: 6px;
 height: 8px;
 box-sizing: border-box;
 border: 1.6px solid #fff;
 border-bottom: 0;
 border-radius: 5px 5px 0 0;
 background: transparent;
}


/* =========================================================
32. PANEL DE DESCARGA — DESKTOP (≥768px)
========================================================= */

@media (min-width: 768px) {
 .hmmp-player .hmmp-drawer {
     position: absolute;
     right: 28px;
     bottom: 28px;
     left: auto;
     top: auto;
     width: min(410px, calc(100% - 56px));
     padding: 18px;
     border: 1px solid rgba(90,145,200,.20);
     border-radius: 20px;
     background: linear-gradient(180deg, rgba(7,18,31,.97), rgba(3,11,21,.985));
     box-shadow: 0 25px 70px rgba(0,0,0,.52), 0 0 30px rgba(20,90,150,.07);
     backdrop-filter: blur(28px);
     -webkit-backdrop-filter: blur(28px);
 }
}


/* =========================================================
33. PANEL DE DESCARGA — MOBILE (bottom sheet)
Única definición del drawer para mobile (antes había
4 versiones distintas compitiendo entre sí).
========================================================= */

@media (max-width: 767px) {

 .hmmp-view-mobile .hmmp-player .hmmp-download-backdrop {
     position: fixed !important;
     inset: 0 !important;
     z-index: 99998 !important;
     width: 100vw !important;
     height: 100vh !important;
     background: rgba(0, 4, 10, .58) !important;
     backdrop-filter: blur(3px) !important;
     -webkit-backdrop-filter: blur(3px) !important;
     opacity: 0 !important;
     visibility: hidden !important;
     pointer-events: none !important;
     transition: opacity .28s ease, visibility .28s ease !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-download-backdrop.hmmp-visible {
     opacity: 1 !important;
     visibility: visible !important;
     pointer-events: auto !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-drawer {
     position: fixed !important;
     inset: auto 0 0 0 !important;
     width: 100vw !important;
     max-width: 100vw !important;
     height: auto !important;
     max-height: 82svh !important;
     min-height: 0 !important;
     margin: 0 !important;
     box-sizing: border-box !important;
     padding: 9px 16px max(18px, env(safe-area-inset-bottom)) !important;
     overflow-x: hidden !important;
     overflow-y: auto !important;
     border: 1px solid rgba(76,126,177,.28) !important;
     border-bottom: 0 !important;
     border-radius: 25px 25px 0 0 !important;
     background: linear-gradient(180deg, rgba(5,16,30,.985) 0%, rgba(2,10,20,.995) 100%) !important;
     box-shadow: 0 -18px 60px rgba(0,0,0,.58), 0 -2px 15px rgba(20,110,190,.06) !important;
     backdrop-filter: blur(28px) !important;
     -webkit-backdrop-filter: blur(28px) !important;
     transform: translate3d(0, 110%, 0) !important;
     opacity: 0 !important;
     visibility: hidden !important;
     pointer-events: none !important;
     translate: none !important;
     rotate: none !important;
     scale: 1 !important;
     will-change: transform, opacity;
     transition:
         transform .42s cubic-bezier(.22,.80,.25,1),
         opacity .28s ease,
         visibility .42s ease !important;
     scrollbar-width: thin !important;
     scrollbar-color: rgba(100,145,185,.38) transparent !important;
     z-index: 99999 !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-drawer::-webkit-scrollbar {
     width: 5px !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-drawer::-webkit-scrollbar-track {
     background: transparent !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-drawer::-webkit-scrollbar-thumb {
     background: rgba(100,145,185,.38) !important;
     border-radius: 20px !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-drawer.hmmp-open {
     transform: translate3d(0, 0, 0) !important;
     opacity: 1 !important;
     visibility: visible !important;
     pointer-events: auto !important;
     translate: none !important;
     rotate: none !important;
     scale: 1 !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-drawer::before {
     content: "" !important;
     display: block !important;
     width: 40px !important;
     height: 4px !important;
     margin: 0 auto 14px !important;
     border-radius: 99px !important;
     background: rgba(120,155,190,.65) !important;
     box-shadow: 0 1px 5px rgba(0,0,0,.25) !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-download-title {
     font-size: 18px !important;
     margin-bottom: 14px !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-download-quality-option {
     min-height: 56px !important;
     border-radius: 13px !important;
     padding: 0 14px !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-download-quality-name {
     font-size: 14px !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-download-quality-action {
     min-width: 88px !important;
     min-height: 36px !important;
     padding: 0 11px !important;
     border-radius: 9px !important;
     font-size: 11px !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-download-quality-action span {
     font-size: 11px !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-download-quality-action svg {
     width: 15px !important;
     height: 15px !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-download-submit {
     margin-top: 20px !important;
     min-height: 50px !important;
     border-radius: 12px !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-download-quality-list {
     max-height: calc(100vh - 200px) !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-drawer-close {
     width: 34px !important;
     height: 34px !important;
     margin: -3px -3px 7px auto !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-lock {
     width: 17px !important;
     height: 17px !important;
     flex-basis: 17px !important;
     margin-left: 7px !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-lock.hmmp-show::after {
     left: 3.5px !important;
     top: 7.5px !important;
     width: 10px !important;
     height: 8px !important;
 }

 .hmmp-view-mobile .hmmp-player .hmmp-lock.hmmp-show::before {
     left: 5.5px !important;
     top: 2.5px !important;
     width: 6px !important;
     height: 8px !important;
 }

 @media (max-width: 380px) {
     .hmmp-view-mobile .hmmp-player .hmmp-drawer {
         padding-left: 13px !important;
         padding-right: 13px !important;
     }

     .hmmp-view-mobile .hmmp-player .hmmp-download-quality-option {
         min-height: 53px !important;
     }
 }
}


/* =========================================================
34. ACCESIBILIDAD — REDUCIR MOVIMIENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {
 .hmmp-player .hmmp-download-quality-option,
 .hmmp-view-mobile .hmmp-player .hmmp-drawer {
     transition: none !important;
 }
}


/* =========================================================
   HMMP — SINOPSIS COMO BOTÓN + PANEL MISMO TAMAÑO QUE DESCARGAS
   ========================================================= */

/* Botón visible: solo el banner SINOPSIS + flecha */
.hmmp-player .hmmp-synopsis-trigger {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 18px 0 22px !important;
    padding: 0 13px 0 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #8fa8c4 !important;
    font: 700 11px/1 Arial,Helvetica,sans-serif !important;
    letter-spacing: .18em !important;
    text-align: left !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    overflow: hidden !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
}

.hmmp-player .hmmp-synopsis-trigger::after {
    content: "" !important;
    flex: 0 0 14px !important;
    width: 14px !important;
    height: 14px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238fa8c4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") center/14px 14px no-repeat !important;
    transition: transform .22s ease, opacity .22s ease !important;
}

.hmmp-player .hmmp-synopsis-trigger:hover,
.hmmp-player .hmmp-synopsis-trigger:focus-visible {
    color: #c4d7eb !important;
    outline: none !important;
    border-bottom-color: rgba(140,175,215,.42) !important;
}

.hmmp-player .hmmp-synopsis-trigger:hover::after,
.hmmp-player .hmmp-synopsis-trigger:focus-visible::after {
    opacity: 1 !important;
    transform: translateY(2px) !important;
}

/* Elimina por completo cualquier texto antiguo de descripción */
.hmmp-player .hmmp-synopsis-trigger .hmmp-description-header,
.hmmp-player .hmmp-synopsis-trigger .hmmp-description-text {
    display: none !important;
}

/* Panel de sinopsis: mismas dimensiones base que Descargas en escritorio */
.hmmp-player .hmmp-synopsis-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0;
    background: rgba(0,4,10,.58);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.hmmp-player .hmmp-synopsis-backdrop.hmmp-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.hmmp-player .hmmp-synopsis-drawer {
    position: absolute;
    right: 28px;
    bottom: 28px;
    width: min(410px, calc(100% - 56px));
    max-height: calc(100vh - 100px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 18px;
    border: 1px solid rgba(90,145,200,.20);
    border-radius: 20px;
    background: linear-gradient(180deg,rgba(7,18,31,.97),rgba(3,11,21,.985));
    box-shadow: 0 25px 70px rgba(0,0,0,.52),0 0 30px rgba(20,90,150,.07);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    transform: translateX(calc(100% + 50px));
    opacity: 0;
    transition: transform .3s ease, opacity .28s ease;
}

.hmmp-player .hmmp-synopsis-drawer.hmmp-open {
    transform: translateX(0);
    opacity: 1;
}

.hmmp-player .hmmp-synopsis-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.hmmp-player .hmmp-synopsis-title {
    color: #8fa8c4;
    font: 700 11px/1 Arial,Helvetica,sans-serif;
    letter-spacing: .18em;
}

.hmmp-player .hmmp-synopsis-close {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    color: #fff;
    font: 400 25px/1 Arial,Helvetica,sans-serif;
    cursor: pointer;
}

.hmmp-player .hmmp-synopsis-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 2px 2px 0;
    color: #b7c8dd;
    font: 14px/1.65 Arial,Helvetica,sans-serif;
    scrollbar-width: thin;
    scrollbar-color: rgba(140,175,215,.45) transparent;
}

.hmmp-player .hmmp-synopsis-content::-webkit-scrollbar { width: 4px; }
.hmmp-player .hmmp-synopsis-content::-webkit-scrollbar-track { background: transparent; }
.hmmp-player .hmmp-synopsis-content::-webkit-scrollbar-thumb {
    background: rgba(140,175,215,.45);
    border-radius: 10px;
}

/* En móvil: exactamente el mismo bottom-sheet que Descargas */
@media (max-width: 767px) {
    /* En móvil: conservar la primera línea del encabezado SINOPSIS
       y eliminar únicamente la segunda línea inferior del botón. */
    .hmmp-view-mobile .hmmp-player .hmmp-synopsis-trigger {
        border-bottom: 0 !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-synopsis-backdrop {
        align-items: flex-end !important;
        justify-content: center !important;
        width: 100vw !important;
        height: 100vh !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-synopsis-drawer {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: calc(100vh - 100px) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 9px 16px max(18px,env(safe-area-inset-bottom)) !important;
        border: 1px solid rgba(76,126,177,.28) !important;
        border-bottom: 0 !important;
        border-radius: 25px 25px 0 0 !important;
        background: linear-gradient(180deg,rgba(5,16,30,.985) 0%,rgba(2,10,20,.995) 100%) !important;
        box-shadow: 0 -18px 60px rgba(0,0,0,.58),0 -2px 15px rgba(20,110,190,.06) !important;
        transform: translate3d(0,110%,0) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform .42s cubic-bezier(.22,.80,.25,1),opacity .28s ease,visibility .42s ease !important;
        z-index: 99999 !important;

        /* Altura fija solicitada para el panel de sinopsis en móvil */
        height: 300px !important;
        max-height: 300px !important;
        min-height: 300px !important;
        box-sizing: border-box;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-synopsis-drawer.hmmp-open {
        transform: translate3d(0,0,0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-synopsis-drawer::before {
        content: "" !important;
        display: block !important;
        width: 40px !important;
        height: 4px !important;
        margin: 0 auto 14px !important;
        border-radius: 99px !important;
        background: rgba(120,155,190,.65) !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-synopsis-header {
        min-height: 42px !important;
        padding: 0 0 10px !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-synopsis-content {
        max-height: calc(100vh - 200px) !important;
        padding: 16px 2px 2px 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hmmp-player .hmmp-synopsis-backdrop,
    .hmmp-player .hmmp-synopsis-drawer,
    .hmmp-player .hmmp-synopsis-trigger::after {
        transition: none !important;
    }
}

/* ============================================================
   HAIL MARY MEDIA PLAYER PRO 2.6.5
   MOBILE MODAL PLAYER — RESPONSIVE FIX
   - El reproductor usa su relación 16:9 en vez de ocupar 100vh.
   - Evita barras negras internas provocadas por un contenedor 100vh.
   - Mantiene la imagen completa (object-fit: contain) sin recortarla.
   - Los controles quedan dentro del área visible y por encima de las
     zonas táctiles.
   - El modal sigue ocupando la pantalla, pero el diálogo se adapta al
     viewport móvil.
   ============================================================ */
@media (max-width: 767px) {
    .hmmp-view-mobile .hmmp-player .hmmp-modal {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-modal.hmmp-open {
        display: flex !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-dialog {
        position: relative !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
        flex: 0 0 auto !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-video-wrap {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-video {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        object-fit: contain !important;
        object-position: center center !important;
        background: transparent !important;
    }

    /* El gesto táctil no puede quedar por encima de la barra de controles. */
    .hmmp-view-mobile .hmmp-player .hmmp-gesture-zone {
        top: 0 !important;
        bottom: 92px !important;
        z-index: 20 !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-controls {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        min-height: 74px !important;
        box-sizing: border-box !important;
        padding: 8px 9px calc(8px + env(safe-area-inset-bottom)) !important;
        margin: 0 !important;
        z-index: 80 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-end !important;
        background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.92) 48%, rgba(0,0,0,.98)) !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-seek-row {
        width: 100% !important;
        min-width: 0 !important;
        height: 24px !important;
        margin: 0 0 2px !important;
        gap: 7px !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-seek-row .hmmp-time {
        font-size: 10px !important;
        line-height: 1 !important;
        min-width: 31px !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-seek {
        min-width: 0 !important;
        padding: 8px 0 !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-btn-row {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        gap: 1px !important;
        flex-wrap: nowrap !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-ctrl {
        flex: 0 0 auto !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 7px !important;
        font-size: 14px !important;
        z-index: 90 !important;
        pointer-events: auto !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-ctrl .hmmp-icon {
        width: 17px !important;
        height: 17px !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-vol-wrap {
        flex: 0 0 auto !important;
        min-width: 34px !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-volume {
        display: none !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-spacer {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-modal-close {
        position: absolute !important;
        top: max(8px, env(safe-area-inset-top)) !important;
        right: 8px !important;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        z-index: 120 !important;
        border-radius: 50% !important;
        background: rgba(0,0,0,.52) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    /* En pantallas muy bajas, reducimos la barra sin quitar controles. */
    @media (max-height: 500px) {
        .hmmp-view-mobile .hmmp-player .hmmp-video-wrap {
            width: min(100vw, calc(100dvh * 16 / 9)) !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        .hmmp-view-mobile .hmmp-player .hmmp-dialog {
            width: min(100vw, calc(100dvh * 16 / 9)) !important;
        }

        .hmmp-view-mobile .hmmp-player .hmmp-controls {
            min-height: 64px !important;
            padding-top: 5px !important;
            padding-bottom: 5px !important;
        }
    }
}

/* ============================================================
   HAIL MARY MEDIA PLAYER PRO 2.6.6
   MOBILE LANDSCAPE FULLSCREEN — SIN FRANJAS NEGRAS
   En pantalla completa horizontal el viewport debe ser el marco real
   del reproductor. El video llena todo el viewport y los controles
   permanecen por encima del video.
   ============================================================ */
@media (max-width: 767px) and (orientation: landscape) {
    .hmmp-view-mobile .hmmp-player .hmmp-modal,
    .hmmp-view-mobile .hmmp-player .hmmp-modal.hmmp-open,
    .hmmp-view-mobile .hmmp-player .hmmp-modal:fullscreen {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-width: 100vw !important;
        min-height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-dialog,
    .hmmp-view-mobile .hmmp-player .hmmp-dialog:fullscreen {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        min-width: 100vw !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
        display: block !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-video-wrap,
    .hmmp-view-mobile .hmmp-player .hmmp-dialog:fullscreen .hmmp-video-wrap {
        position: absolute !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    /* En fullscreen horizontal usamos COVER: desaparece el marco negro
       y el video ocupa físicamente toda la pantalla. */
    .hmmp-view-mobile .hmmp-player .hmmp-video,
    .hmmp-view-mobile .hmmp-player .hmmp-dialog:fullscreen .hmmp-video {
        position: absolute !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-width: 100vw !important;
        min-height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        background: #000 !important;
    }

    /* La zona táctil queda detrás de los controles. */
    .hmmp-view-mobile .hmmp-player .hmmp-gesture-zone {
        inset: 0 0 76px 0 !important;
        z-index: 20 !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-controls,
    .hmmp-view-mobile .hmmp-player .hmmp-dialog:fullscreen .hmmp-controls {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        min-height: 68px !important;
        box-sizing: border-box !important;
        padding: 7px 12px max(7px, env(safe-area-inset-bottom)) !important;
        z-index: 100 !important;
        pointer-events: auto !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-modal-close,
    .hmmp-view-mobile .hmmp-player .hmmp-dialog:fullscreen .hmmp-modal-close {
        position: absolute !important;
        top: max(8px, env(safe-area-inset-top)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        z-index: 120 !important;
    }

    /* Cuando el navegador aplica fullscreen directamente al dialog. */
    .hmmp-view-mobile .hmmp-player .hmmp-dialog:fullscreen {
        background: #000 !important;
    }
}

/* Fallback para navegadores que usan el selector webkit de fullscreen. */
@media (max-width: 767px) and (orientation: landscape) {
    .hmmp-view-mobile .hmmp-player .hmmp-dialog:-webkit-full-screen {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-video-wrap {
        position: absolute !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        aspect-ratio: auto !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-video {
        width: 100vw !important;
        height: 100dvh !important;
        object-fit: cover !important;
    }
}


/* ============================================================
   v2.6.7 — TRAILER BUTTON / MOBILE LANDSCAPE FULLSCREEN
   El modal abierto desde "Trailer" usa el mismo canvas fullscreen que
   "Ver ahora". Se fuerza también sobre hmmp-trailer-mode para evitar que
   reglas específicas del trailer vuelvan a introducir aspect-ratio o
   contain y generen franjas negras.
   ============================================================ */
@media (max-width: 767px) and (orientation: landscape) {
    .hmmp-view-mobile .hmmp-player .hmmp-video-wrap.hmmp-trailer-mode,
    .hmmp-view-mobile .hmmp-player .hmmp-dialog:fullscreen .hmmp-video-wrap.hmmp-trailer-mode,
    .hmmp-view-mobile .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-video-wrap.hmmp-trailer-mode {
        position: absolute !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-video-wrap.hmmp-trailer-mode .hmmp-video,
    .hmmp-view-mobile .hmmp-player .hmmp-dialog:fullscreen .hmmp-video-wrap.hmmp-trailer-mode .hmmp-video,
    .hmmp-view-mobile .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-video-wrap.hmmp-trailer-mode .hmmp-video {
        position: absolute !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-width: 100vw !important;
        min-height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        background: #000 !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-video-wrap.hmmp-trailer-mode .hmmp-controls {
        z-index: 100 !important;
        pointer-events: auto !important;
        display: flex !important;
    }

    .hmmp-view-mobile .hmmp-player .hmmp-video-wrap.hmmp-trailer-mode .hmmp-gesture-zone {
        z-index: 20 !important;
        bottom: 76px !important;
    }
}

/* ============================================================
   v2.6.8 — MOBILE PLAYER REBUILD
   El modal móvil es el viewport del reproductor. No se conserva el
   marco 16:9 cuando el dispositivo está en horizontal/fullscreen.
   Los controles siempre quedan por encima y reciben los toques.
   ============================================================ */
@media (max-width: 767px) {
  .hmmp-view-mobile .hmmp-player .hmmp-modal {
    padding: 0 !important;
    background: #000 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    touch-action: manipulation !important;
  }

  .hmmp-view-mobile .hmmp-player .hmmp-modal.hmmp-open {
    display: flex !important;
  }

  .hmmp-view-mobile .hmmp-player .hmmp-dialog {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    box-shadow: none !important;
  }

  .hmmp-view-mobile .hmmp-player .hmmp-video-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  .hmmp-view-mobile .hmmp-player .hmmp-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
  }

  /* Controles: nunca quedan debajo de la zona de gestos. */
  .hmmp-view-mobile .hmmp-player .hmmp-controls,
  .hmmp-view-mobile .hmmp-player .hmmp-video-wrap .hmmp-controls {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding: 7px 10px max(8px, env(safe-area-inset-bottom)) !important;
  }

  .hmmp-view-mobile .hmmp-player .hmmp-controls .hmmp-ctrl,
  .hmmp-view-mobile .hmmp-player .hmmp-controls button,
  .hmmp-view-mobile .hmmp-player .hmmp-controls input,
  .hmmp-view-mobile .hmmp-player .hmmp-controls select {
    position: relative !important;
    z-index: 1002 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* Las zonas de gestos nunca pueden interceptar los controles. */
  .hmmp-view-mobile .hmmp-player .hmmp-gesture-zone {
    z-index: 20 !important;
    pointer-events: auto !important;
  }
  .hmmp-view-mobile .hmmp-player .hmmp-gesture-left,
  .hmmp-view-mobile .hmmp-player .hmmp-gesture-center,
  .hmmp-view-mobile .hmmp-player .hmmp-gesture-right {
    bottom: 92px !important;
  }

  .hmmp-view-mobile .hmmp-player .hmmp-loading-screen {
    z-index: 900 !important;
  }
  .hmmp-view-mobile .hmmp-player .hmmp-center-play {
    z-index: 950 !important;
  }
  .hmmp-view-mobile .hmmp-player .hmmp-idle-modal {
    z-index: 1100 !important;
  }

  /* ---------------- FULLSCREEN / HORIZONTAL ---------------- */
  .hmmp-view-mobile .hmmp-player .hmmp-dialog:fullscreen,
  .hmmp-view-mobile .hmmp-player .hmmp-dialog:-webkit-full-screen,
  .hmmp-view-mobile .hmmp-player .hmmp-dialog.hmmp-mobile-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  .hmmp-view-mobile .hmmp-player .hmmp-dialog:fullscreen .hmmp-video-wrap,
  .hmmp-view-mobile .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-video-wrap,
  .hmmp-view-mobile .hmmp-player .hmmp-dialog.hmmp-mobile-fullscreen .hmmp-video-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  /* ZERO FRANJAS: fullscreen usa toda la pantalla del dispositivo. */
  .hmmp-view-mobile .hmmp-player .hmmp-dialog:fullscreen .hmmp-video,
  .hmmp-view-mobile .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-video,
  .hmmp-view-mobile .hmmp-player .hmmp-dialog.hmmp-mobile-fullscreen .hmmp-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: #000 !important;
  }

  .hmmp-view-mobile .hmmp-player .hmmp-dialog:fullscreen .hmmp-controls,
  .hmmp-view-mobile .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-controls,
  .hmmp-view-mobile .hmmp-player .hmmp-dialog.hmmp-mobile-fullscreen .hmmp-controls {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-height: 72px !important;
    z-index: 10000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    padding: 8px 12px max(10px, env(safe-area-inset-bottom)) !important;
    background: linear-gradient(to top, rgba(0,0,0,.94), rgba(0,0,0,.58) 55%, transparent) !important;
  }

  .hmmp-view-mobile .hmmp-player .hmmp-dialog:fullscreen .hmmp-gesture-zone,
  .hmmp-view-mobile .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-gesture-zone,
  .hmmp-view-mobile .hmmp-player .hmmp-dialog.hmmp-mobile-fullscreen .hmmp-gesture-zone {
    z-index: 200 !important;
    bottom: 90px !important;
  }

  .hmmp-view-mobile .hmmp-player .hmmp-dialog:fullscreen .hmmp-controls .hmmp-ctrl,
  .hmmp-view-mobile .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-controls .hmmp-ctrl,
  .hmmp-view-mobile .hmmp-player .hmmp-dialog.hmmp-mobile-fullscreen .hmmp-controls .hmmp-ctrl {
    z-index: 10002 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .hmmp-view-mobile .hmmp-player .hmmp-dialog:fullscreen .hmmp-modal-close,
  .hmmp-view-mobile .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-modal-close,
  .hmmp-view-mobile .hmmp-player .hmmp-dialog.hmmp-mobile-fullscreen .hmmp-modal-close {
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    z-index: 11000 !important;
    pointer-events: auto !important;
  }

  /* Trailer usa exactamente el mismo canvas y las mismas capas. */
  .hmmp-view-mobile .hmmp-player .hmmp-dialog:fullscreen .hmmp-video-wrap.hmmp-trailer-mode,
  .hmmp-view-mobile .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-video-wrap.hmmp-trailer-mode,
  .hmmp-view-mobile .hmmp-player .hmmp-dialog.hmmp-mobile-fullscreen .hmmp-video-wrap.hmmp-trailer-mode {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    aspect-ratio: auto !important;
  }
}

/* Horizontal: el modal abierto en móvil se adapta al viewport sin
   imponer un 16:9 que cree barras internas. */
@media (max-width: 767px) and (orientation: landscape) {
  .hmmp-view-mobile .hmmp-player .hmmp-modal.hmmp-open:not(:fullscreen) {
    padding: 0 !important;
  }
  .hmmp-view-mobile .hmmp-player .hmmp-modal.hmmp-open:not(:fullscreen) .hmmp-dialog {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .hmmp-view-mobile .hmmp-player .hmmp-modal.hmmp-open:not(:fullscreen) .hmmp-video-wrap {
    width: 100vw !important;
    height: 100dvh !important;
    aspect-ratio: auto !important;
  }
  .hmmp-view-mobile .hmmp-player .hmmp-modal.hmmp-open:not(:fullscreen) .hmmp-video {
    width: 100vw !important;
    height: 100dvh !important;
    object-fit: cover !important;
  }
}

/* ============================================================
   HMMP 2.6.9 — MOBILE MODAL PLAYER REBUILD
   El reproductor móvil usa un viewport propio dentro del modal.
   No usa requestFullscreen() para abrir "Ver ahora"/"Trailer": eso
   provocaba el aviso del navegador, barras negras y un <dialog> 16:9
   centrado que dejaba los controles fuera del área táctil.
   ============================================================ */
@media (max-width: 767px) {
  /* El modal del reproductor ocupa el viewport visible completo. */
  .hmmp-player .hmmp-modal.hmmp-mobile-player-fullscreen,
  .hmmp-player .hmmp-modal.hmmp-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: #000 !important;
    z-index: 2147483000 !important;
    overflow: hidden !important;
  }

  .hmmp-player .hmmp-modal.hmmp-mobile-player-fullscreen .hmmp-dialog,
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-dialog {
    position: relative !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Se elimina el 16:9 que estaba provocando que el video quedara
     centrado en una caja demasiado pequeña en teléfonos. */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-video-wrap,
  .hmmp-player .hmmp-modal.hmmp-mobile-player-fullscreen .hmmp-video-wrap {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #000 !important;
    isolation: isolate !important;
  }

  /* El video siempre está exactamente detrás de los controles. */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-video,
  .hmmp-player .hmmp-modal.hmmp-mobile-player-fullscreen .hmmp-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    background: #000 !important;
    object-position: center center !important;
  }

  /* Vertical: jamás cortar los lados de un video horizontal. */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-video {
    object-fit: contain !important;
  }

  /* Horizontal: llenar todo el dispositivo. Aquí cover es intencional:
     evita las franjas del viewport panorámico sin deformar el video. */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-video-wrap.hmmp-mobile-landscape .hmmp-video {
    object-fit: cover !important;
  }

  /* Si el archivo ya es vertical, nunca lo recortes. */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-video-wrap.hmmp-source-portrait .hmmp-video,
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-video-wrap.hmmp-source-portrait.hmmp-mobile-landscape .hmmp-video {
    object-fit: contain !important;
  }

  /* Capa de carga: solo cubre mientras no existe el primer frame. */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-loading-screen {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 50 !important;
    background: #000 !important;
    pointer-events: none !important;
  }

  /* Spinner de buffering: pequeño y solo durante un buffer real después
     de que el video ya está listo. */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-spinner {
    z-index: 35 !important;
    pointer-events: none !important;
  }

  /* Las zonas de gesto quedan debajo de la barra. */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-gesture-zone {
    top: 0 !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    z-index: 8 !important;
  }

  /* Play central: táctil, pero por debajo de los controles. */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-center-play {
    z-index: 20 !important;
    pointer-events: auto !important;
  }

  /* La barra de controles es una capa independiente y SIEMPRE recibe
     los toques. */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-controls {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-height: 84px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    z-index: 40 !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,.96) 100%) !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-seek-row {
    position: relative !important;
    z-index: 41 !important;
    width: 100% !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-seek {
    min-width: 0 !important;
    padding: 10px 0 !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-btn-row {
    position: relative !important;
    z-index: 42 !important;
    width: 100% !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    flex-wrap: nowrap !important;
    pointer-events: auto !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-ctrl {
    position: relative !important;
    z-index: 43 !important;
    flex: 0 0 auto !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 8px !important;
    margin: 0 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-vol-wrap {
    position: relative !important;
    z-index: 43 !important;
    flex: 0 0 auto !important;
    pointer-events: auto !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-volume {
    width: 58px !important;
    pointer-events: auto !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-spacer {
    flex: 1 1 auto !important;
    min-width: 4px !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-speed-label {
    flex: 0 0 auto !important;
  }

  /* Ajustes y descarga deben abrirse por encima de los controles. */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-settings,
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-player-download-menu {
    z-index: 60 !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    max-height: 55dvh !important;
    pointer-events: auto !important;
  }

  /* Cerrar: siempre arriba de cualquier otra capa. */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-modal-close {
    position: absolute !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    z-index: 80 !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0,0,0,.52) !important;
    pointer-events: auto !important;
  }

  /* En mobile ya no usamos el fullscreen nativo del navegador; esto evita
     el mensaje "Para salir de la pantalla completa..." y mantiene el modal
     bajo nuestro control táctil. */
  .hmmp-player .hmmp-modal.hmmp-open [data-action="fullscreen"] {
    display: none !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-controls {
    min-height: 72px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-ctrl {
    min-width: 38px !important;
    min-height: 38px !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-volume {
    width: 72px !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-gesture-zone {
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }
}


/* ============================================================
   HMMP 2.7.0 — MOBILE NATIVE FULLSCREEN + LANDSCAPE LOCK
   Los botones "Ver ahora" y "Trailer" entran en fullscreen nativo.
   Screen Orientation API solicita landscape mientras el fullscreen está activo.
   ============================================================ */
@media (max-width: 767px) {
  .hmmp-player .hmmp-dialog:fullscreen,
  .hmmp-player .hmmp-dialog:-webkit-full-screen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  .hmmp-player .hmmp-dialog:fullscreen .hmmp-video-wrap,
  .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-video-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  /* En el fullscreen horizontal el vídeo ocupa todo el canvas. */
  .hmmp-player .hmmp-dialog:fullscreen .hmmp-video,
  .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    max-width: none !important;
    max-height: none !important;
    background: #000 !important;
  }

  /* Si el archivo fuente es vertical, no lo deformamos ni recortamos. */
  .hmmp-player .hmmp-dialog:fullscreen .hmmp-video-wrap.hmmp-source-portrait .hmmp-video,
  .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-video-wrap.hmmp-source-portrait .hmmp-video {
    object-fit: contain !important;
  }

  .hmmp-player .hmmp-dialog:fullscreen .hmmp-controls,
  .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-controls {
    z-index: 10000 !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .hmmp-player .hmmp-dialog:fullscreen .hmmp-modal-close,
  .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-modal-close {
    z-index: 11000 !important;
    pointer-events: auto !important;
  }
}


/* ============================================================
   HMMP 2.7.1 — MOBILE FULLSCREEN VISUAL FIX
   Corrige el canvas vertical/offset del fullscreen y garantiza que
   el vídeo y los controles ocupen el mismo viewport.
   ============================================================ */
@media (max-width: 767px) {
  .hmmp-player .hmmp-dialog:fullscreen,
  .hmmp-player .hmmp-dialog:-webkit-full-screen {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  .hmmp-player .hmmp-dialog:fullscreen .hmmp-video-wrap,
  .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-video-wrap {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: #000 !important;
    transform: none !important;
  }

  /* El vídeo se centra en el viewport real. Contain evita que se corte
     cualquier parte de la película. */
  .hmmp-player .hmmp-dialog:fullscreen .hmmp-video,
  .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    display: block !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
    background: #000 !important;
  }

  /* El navegador puede conservar clases de UI oculta mientras cambia de
     portrait a landscape. En fullscreen móvil los controles permanecen
     siempre visibles y tocables. */
  .hmmp-player .hmmp-dialog:fullscreen .hmmp-video-wrap.hmmp-ui-hidden .hmmp-controls,
  .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-video-wrap.hmmp-ui-hidden .hmmp-controls,
  .hmmp-player .hmmp-dialog:fullscreen .hmmp-video-wrap.hmmp-video-loading .hmmp-controls,
  .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-video-wrap.hmmp-video-loading .hmmp-controls {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .hmmp-player .hmmp-dialog:fullscreen .hmmp-controls,
  .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-controls {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-height: 82px !important;
    box-sizing: border-box !important;
    padding: 8px 12px max(10px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    z-index: 2147483646 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.78) 38%, rgba(0,0,0,.98) 100%) !important;
  }

  .hmmp-player .hmmp-dialog:fullscreen .hmmp-seek-row,
  .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-seek-row,
  .hmmp-player .hmmp-dialog:fullscreen .hmmp-btn-row,
  .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-btn-row {
    position: relative !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
  }

  .hmmp-player .hmmp-dialog:fullscreen .hmmp-ctrl,
  .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-ctrl {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  .hmmp-player .hmmp-dialog:fullscreen .hmmp-gesture-zone,
  .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-gesture-zone {
    bottom: calc(90px + env(safe-area-inset-bottom)) !important;
    z-index: 10 !important;
  }

  .hmmp-player .hmmp-dialog:fullscreen .hmmp-modal-close,
  .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-modal-close {
    z-index: 2147483647 !important;
    pointer-events: auto !important;
  }

  /* El botón de fullscreen interno no tiene sentido dentro del fullscreen
     automático y puede disparar una segunda capa nativa. */
  .hmmp-player .hmmp-dialog:fullscreen [data-action="fullscreen"],
  .hmmp-player .hmmp-dialog:-webkit-full-screen [data-action="fullscreen"] {
    display: none !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .hmmp-player .hmmp-dialog:fullscreen .hmmp-controls,
  .hmmp-player .hmmp-dialog:-webkit-full-screen .hmmp-controls {
    min-height: 76px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ============================================================
   HMMP 2.7.2 — MOBILE FULLSCREEN CANVAS FIX
   Fullscreen real sobre .hmmp-modal para eliminar offsets del dialog.
   Video + controles viven dentro del mismo canvas 100vw x 100dvh.
   ============================================================ */
@media (max-width: 767px) {
  .hmmp-player .hmmp-modal:fullscreen,
  .hmmp-player .hmmp-modal:-webkit-full-screen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: #000 !important;
    transform: none !important;
  }

  .hmmp-player .hmmp-modal:fullscreen .hmmp-dialog,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-dialog {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: block !important;
    background: #000 !important;
    transform: none !important;
  }

  .hmmp-player .hmmp-modal:fullscreen .hmmp-video-wrap,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-video-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    display: block !important;
    background: #000 !important;
    transform: none !important;
  }

  /*
   * La película siempre completa. En horizontal esto puede dejar pequeñas
   * bandas laterales si la relación de aspecto del archivo no coincide con
   * la pantalla; es preferible eso a cortar la imagen.
   */
  .hmmp-player .hmmp-modal:fullscreen .hmmp-video,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
  }

  /*
   * Los controles ya NO son fixed respecto al viewport del navegador.
   * Son absolute dentro del canvas fullscreen, por lo que nunca pueden
   * quedar por debajo de la pantalla.
   */
  .hmmp-player .hmmp-modal:fullscreen .hmmp-controls,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-controls {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-height: 82px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 10px 14px max(12px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    z-index: 2147483646 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.70) 38%, rgba(0,0,0,.98) 100%) !important;
  }

  .hmmp-player .hmmp-modal:fullscreen .hmmp-seek-row,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-seek-row,
  .hmmp-player .hmmp-modal:fullscreen .hmmp-btn-row,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-btn-row {
    position: relative !important;
    width: 100% !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
  }

  .hmmp-player .hmmp-modal:fullscreen .hmmp-ctrl,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-ctrl {
    position: relative !important;
    z-index: 2147483647 !important;
    min-width: 40px !important;
    min-height: 40px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .hmmp-player .hmmp-modal:fullscreen .hmmp-gesture-zone,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-gesture-zone {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 96px !important;
    z-index: 8 !important;
  }

  .hmmp-player .hmmp-modal:fullscreen .hmmp-modal-close,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-modal-close {
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
  }

  .hmmp-player .hmmp-modal:fullscreen [data-action="fullscreen"],
  .hmmp-player .hmmp-modal:-webkit-full-screen [data-action="fullscreen"] {
    display: none !important;
  }

  /* El estado de carga nunca debe tapar los controles una vez que hay frame. */
  .hmmp-player .hmmp-modal:fullscreen .hmmp-loading-screen,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-loading-screen {
    z-index: 30 !important;
    pointer-events: none !important;
  }

  .hmmp-player .hmmp-modal:fullscreen .hmmp-spinner,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-spinner {
    z-index: 31 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .hmmp-player .hmmp-modal:fullscreen .hmmp-controls,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-controls {
    min-height: 76px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ============================================================
   HMMP 2.7.4 — MOBILE CONTROLS POSITION CONTROLS
   --hmmp-mobile-controls-offset: posición vertical del bloque.
     +px = SUBE los controles.
     -px = BAJA los controles.
   --hmmp-mobile-controls-gap: separación entre barra de duración
     y fila de botones. +px = más separación, -px = más cerca.
   ============================================================ */
:root {
  --hmmp-mobile-controls-offset: 14px;
  --hmmp-mobile-controls-gap: -3px;
}

/* ============================================================
   HMMP 2.7.3 — MOBILE CONTROLS POSITION
   Acerca la fila de botones a la barra de duración y eleva
   ligeramente todo el bloque de controles en fullscreen.
   ============================================================ */
@media (max-width: 767px) {
  .hmmp-player .hmmp-modal:fullscreen .hmmp-controls,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-controls {
    bottom: var(--hmmp-mobile-controls-offset) !important;
    min-height: 70px !important;
    padding: 3px 14px 6px !important;
    gap: 0 !important;
  }

  .hmmp-player .hmmp-modal:fullscreen .hmmp-seek-row,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-seek-row {
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hmmp-player .hmmp-modal:fullscreen .hmmp-seek,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-seek {
    padding: 5px 0 !important;
  }

  .hmmp-player .hmmp-modal:fullscreen .hmmp-btn-row,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-btn-row {
    min-height: 38px !important;
    margin-top: var(--hmmp-mobile-controls-gap) !important;
    align-items: center !important;
    gap: 2px !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .hmmp-player .hmmp-modal:fullscreen .hmmp-controls,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-controls {
    bottom: var(--hmmp-mobile-controls-offset) !important;
    min-height: 66px !important;
    padding: 2px 14px 5px !important;
  }

  .hmmp-player .hmmp-modal:fullscreen .hmmp-seek-row,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-seek-row {
    min-height: 24px !important;
  }

  .hmmp-player .hmmp-modal:fullscreen .hmmp-btn-row,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-btn-row {
    min-height: 36px !important;
    margin-top: calc(var(--hmmp-mobile-controls-gap) - 1px) !important;
  }
}


/* ============================================================
   HMMP 2.7.6 — MOBILE CONTROLS +10PX REAL
   El ajuste anterior dependía exclusivamente de :fullscreen.
   Algunos navegadores móviles no aplican ese selector de forma
   consistente después de requestFullscreen().
   Esta regla usa también las clases que el propio reproductor
   coloca en el modal, por lo que el desplazamiento es efectivo.
   SOLO MOBILE. PC/TABLET NO SE TOCAN.
   ============================================================ */
@media (max-width: 767px) {
  .hmmp-player .hmmp-modal.hmmp-mobile-player-fullscreen .hmmp-controls,
  .hmmp-player .hmmp-modal.hmmp-mobile-fullscreen .hmmp-controls,
  .hmmp-player .hmmp-modal:fullscreen .hmmp-controls,
  .hmmp-player .hmmp-modal:-webkit-full-screen .hmmp-controls {
    transform: translate3d(0, -10px, 0) !important;
  }

  /* Reafirma la posición de las dos filas dentro del bloque elevado. */
  .hmmp-player .hmmp-modal.hmmp-mobile-player-fullscreen .hmmp-seek-row,
  .hmmp-player .hmmp-modal.hmmp-mobile-fullscreen .hmmp-seek-row,
  .hmmp-player .hmmp-modal.hmmp-mobile-player-fullscreen .hmmp-btn-row,
  .hmmp-player .hmmp-modal.hmmp-mobile-fullscreen .hmmp-btn-row {
    transform: none !important;
  }
}


/* ============================================================
   HMMP 2.7.7 — MOBILE CONTROLS DIRECT VERTICAL POSITION
   Mueve el bloque REAL de controles 10px hacia arriba usando
   bottom, sin depender de transform ni de :fullscreen.
   SOLO MOBILE. PC/TABLET SIN CAMBIOS.
   ============================================================ */
@media (max-width: 767px) {
  .hmmp-view-mobile .hmmp-player .hmmp-modal .hmmp-controls {
    bottom: 10px !important;
    transform: none !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .hmmp-view-mobile .hmmp-player .hmmp-modal .hmmp-controls {
    bottom: 10px !important;
    transform: none !important;
  }
}


/* ============================================================
   HMMP 2.7.8 — PLAYER EN CELULAR HORIZONTAL (LANDSCAPE)
   ------------------------------------------------------------
   CAUSA DEL BUG: un celular moderno en horizontal mide 800–930 px
   de ancho (CSS px). Todas las reglas móviles anteriores usan
   `max-width: 767px`, así que en horizontal NO se aplicaban: el
   reproductor recibía el layout de tablet (dialog 16:9 más alto
   que la pantalla) y la fila de botones quedaba cortada abajo,
   por mucho que se subieran los px en las versiones 2.7.3–2.7.7.

   SOLUCIÓN: bloque propio para "celular en horizontal" (ancho
   >= 768px pero alto <= 500px). El modal/dialog/video ocupan
   exactamente el viewport visible y los controles se levantan
   del borde inferior con las variables de abajo.
   Tablets (alto > 500px) y PC no se ven afectados.
   ============================================================ */
:root {
  /* Distancia entre el borde inferior de la pantalla y la fila de botones.
     Súbelo (p. ej. 30px) para separar más los controles del borde. */
  --hmmp-land-controls-offset: 24px;
  /* Separación entre la barra de duración y la fila de botones. */
  --hmmp-land-controls-gap: 2px;
  /* contain = película completa (con franjas laterales si hace falta).
     cover   = llena toda la pantalla pero recorta arriba/abajo. */
  --hmmp-land-video-fit: contain;
  /* Alto reservado por los controles (para menús y zonas táctiles). */
  --hmmp-land-controls-reserve: 96px;
}

@media (orientation: landscape) and (max-height: 500px) and (min-width: 768px) {

  /* --- Modal: exactamente el viewport visible ------------------ */
  .hmmp-player .hmmp-modal.hmmp-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: #000 !important;
    transform: none !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-dialog {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: #000 !important;
    transform: none !important;
  }

  /* Si el navegador hace fullscreen directamente sobre el dialog. */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-dialog:fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-video-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    transform: none !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    object-fit: var(--hmmp-land-video-fit) !important;
    object-position: center center !important;
    background: #000 !important;
  }

  /* --- Controles: siempre dentro de la pantalla ---------------- */
  /*
   * El contenedor llega hasta el borde inferior (así el degradado
   * oscuro cubre todo el fondo) y el "levantado" se hace con
   * padding-bottom: offset + zona segura del dispositivo.
   */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-controls {
    position: absolute !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding:
      8px
      max(18px, env(safe-area-inset-right, 0px))
      calc(var(--hmmp-land-controls-offset) + env(safe-area-inset-bottom, 0px))
      max(18px, env(safe-area-inset-left, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    z-index: 100 !important;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.72) 40%, rgba(0,0,0,.94) 100%) !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-seek-row {
    position: relative !important;
    width: 100% !important;
    min-height: 26px !important;
    margin: 0 0 var(--hmmp-land-controls-gap) 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-btn-row {
    position: relative !important;
    width: 100% !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 2px !important;
    transform: none !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-btn-row .hmmp-ctrl {
    flex: 0 0 auto !important;
    min-width: 40px !important;
    min-height: 40px !important;
    touch-action: manipulation !important;
  }

  /* El slider de volumen no debe empujar botones fuera de la pantalla. */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-vol-wrap {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-volume {
    width: clamp(60px, 14vw, 110px) !important;
    min-width: 0 !important;
  }

  /* La zona de gestos termina justo encima de los controles. */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-gesture-zone {
    top: 0 !important;
    bottom: calc(var(--hmmp-land-controls-reserve) + var(--hmmp-land-controls-offset) + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 20 !important;
  }

  /* Menús (ajustes / descarga) siempre por encima de los controles y
     con scroll propio si no caben en la altura del celular. */
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-settings,
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-player-download-menu {
    bottom: calc(var(--hmmp-land-controls-reserve) + var(--hmmp-land-controls-offset) + env(safe-area-inset-bottom, 0px)) !important;
    right: max(14px, env(safe-area-inset-right, 0px)) !important;
    max-height: calc(100dvh - var(--hmmp-land-controls-reserve) - var(--hmmp-land-controls-offset) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) - 16px) !important;
    overflow-y: auto !important;
    z-index: 110 !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-next {
    bottom: calc(var(--hmmp-land-controls-reserve) + var(--hmmp-land-controls-offset) + env(safe-area-inset-bottom, 0px) + 8px) !important;
  }

  .hmmp-player .hmmp-modal.hmmp-open .hmmp-modal-close {
    position: absolute !important;
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    z-index: 120 !important;
  }

  /* Ya estamos en pantalla completa: ocultar el botón (igual que en móvil vertical). */
  .hmmp-player .hmmp-modal.hmmp-open:fullscreen [data-action="fullscreen"] {
    display: none !important;
  }
}

/* Safari antiguo (sin :fullscreen sin prefijo). Se separa en su propia
   regla para que un selector no soportado no invalide el bloque de arriba. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 768px) {
  .hmmp-player .hmmp-modal.hmmp-open:-webkit-full-screen [data-action="fullscreen"] {
    display: none !important;
  }
}


/* ============================================================
   HMMP 2.7.9 — AUDIO
   1) Aviso "Toca para activar el sonido": aparece SOLO si el navegador
      obliga a iniciar en silencio (política de autoplay). El primer
      toque en cualquier parte del reproductor también activa el audio.
   2) El slider de volumen se muestra en celular horizontal (antes
      quedaba oculto en pantallas <= 767px). En vertical se mantiene
      solo el botón de silencio para no saturar la fila de controles.
   ============================================================ */
.hmmp-player .hmmp-unmute-hint {
  position: absolute;
  top: max(14px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 130;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 120px);
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,.45);
  touch-action: manipulation;
}
.hmmp-player .hmmp-unmute-hint[hidden] { display: none !important; }
.hmmp-player .hmmp-unmute-hint .hmmp-icon { width: 20px; height: 20px; flex: 0 0 auto; }

@media (orientation: landscape) and (max-height: 500px) {
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-vol-wrap {
    display: flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-vol-wrap .hmmp-volume {
    display: block !important;
    width: clamp(56px, 12vw, 110px) !important;
    min-width: 0 !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }
}

/* Fix: en celulares pequeños en horizontal (<= 767px) reglas antiguas dejaban el
   modal CERRADO como capa negra a pantalla completa encima de la página,
   tapando el botón "Ver ahora". Un modal cerrado nunca debe mostrarse. */
@media (orientation: landscape) and (max-width: 767px) {
  .hmmp-player .hmmp-modal:not(.hmmp-open):not(:fullscreen) {
    display: none !important;
  }
}

/* Panel de diagnóstico de audio (solo con ?hmmp_debug=1 en la URL). */
.hmmp-player .hmmp-debug {
  position: absolute;
  top: max(64px, calc(env(safe-area-inset-top, 0px) + 56px));
  left: max(10px, env(safe-area-inset-left, 0px));
  z-index: 300;
  margin: 0;
  padding: 6px 8px;
  max-width: 75%;
  border-radius: 6px;
  background: rgba(0,0,0,.72);
  color: #7CFC00;
  font: 11px/1.35 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  pointer-events: none;
}


/* =====================================================================
   v2.7.11 -- SEPARACION ABSOLUTA PC / MOBILE (sin parpadeos)
   ---------------------------------------------------------------------
   1) La vista (mobile | tablet | desktop) la decide un script inline en
      <head> ANTES del primer pintado y la deja como clase en <html>
      (.hmmp-view-mobile / .hmmp-view-tablet / .hmmp-view-desktop).
      Todas las reglas mobile de este archivo cuelgan de esa clase, ya
      no de una clase que JS ponia despues de cargar.
   2) El reproductor permanece oculto (visibility:hidden, definido en el
      <head>) hasta que ESTE archivo CSS esta cargado. Esta regla es la
      que lo muestra: si el CSS se retrasa, nunca se ve sin estilos.
   ===================================================================== */
html.hmmp-js body .hmmp-player{visibility:visible}

/* HMMP IMDb metadata */
.hmmp-player .hmmp-qualities{
  display:flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin:10px 0 0;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:7px;
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.82);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
}
.hmmp-player .hmmp-meta:empty,.hmmp-player .hmmp-genres:empty,.hmmp-player .hmmp-qualities:empty,.hmmp-player .hmmp-description:empty{display:none}


/* =========================================================
   HMMP — CONTROLES DE POSICION — SOLO MOBILE
   VER AHORA + DESCARGAR + INFORMACION
   ========================================================= */

@media (max-width: 767px) {

    /* =========================================
       VER AHORA
       Negativo = arriba
       Positivo = abajo
       ========================================= */

    .hmmp-watch {
        --hmmp-watch-y: -40px;
        transform: translateY(var(--hmmp-watch-y)) !important;
    }


    /* =========================================
       DESCARGAR
       Negativo = arriba
       Positivo = abajo
       ========================================= */

    .hmmp-download-button {
        --hmmp-download-y: -40px;
        transform: translateY(var(--hmmp-download-y)) !important;
    }


    /* =========================================
       CONTROLES DE POSICION — HMMP
       Valores positivos = abajo
       Valores negativos = arriba
       ========================================= */

    .hmmp-title {
        --move-y: 20px;
        transform: translateY(var(--move-y));
    }


    .hmmp-meta {
        --move-y: 20px;
        transform: translateY(var(--move-y));
    }


    .hmmp-genres {
        --move-y: 20px;
        transform: translateY(var(--move-y));
    }


    .hmmp-qualities {
        --move-y: 10px;
        transform: translateY(var(--move-y));
    }


    .hmmp-description {
        --move-y: 20px;
        transform: translateY(var(--move-y));
    }

}


/* =====================================================================
   v3.2.1 -- TÍTULO EN ESCRITORIO (PC)
   ---------------------------------------------------------------------
   En escritorio el título ahora se muestra como texto, con el formato
   del ejemplo: tipografía geométrica fina, mayúsculas/minúsculas tal
   cual se escribe, espaciado apretado y blanco. Sustituye al logo en
   PC para no duplicar el nombre. El móvil NO se toca (sigue igual).
   Para volver a mostrar el logo en PC, borra la regla ".hmmp-logo".
   ===================================================================== */
@media (min-width: 1025px) {
  .hmmp-player .hmmp-title {
    display: block;
    margin: 0 0 20px;
    padding: 0;
    color: #fff;
    font-family: "Montserrat", "Gotham", "Avenir Next", "Century Gothic", "Segoe UI", Arial, sans-serif;
    font-size: var(--hmmp-title-size, clamp(44px, 5.2vw, 84px));
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-transform: none;
    text-align: left;
    text-shadow: 0 2px 24px rgba(0,0,0,.55);
    overflow-wrap: break-word;
  }
  .hmmp-player .hmmp-title::after { content: none; }
  .hmmp-player .hmmp-logo { display: none !important; }
}

/* =====================================================================
   v3.2.4 -- PROTECCIÓN DE LOS BOTONES DEL HERO EN MÓVIL
   En móvil solo deben verse: Ver ahora, Descargar y el play central
   (Trailer). Cualquier otro control dentro de .hmmp-actions se oculta
   y los iconos de los botones nunca pueden agrandarse (un icono SVG sin
   tamaño ocupaba toda la pantalla).
   ===================================================================== */
@media (max-width: 767px) {
  .hmmp-view-mobile .hmmp-player .hmmp-actions > :not(.hmmp-watch):not(.hmmp-trailer-button):not(.hmmp-download-button) {
    display: none !important;
  }
  .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-button svg,
  .hmmp-view-mobile .hmmp-player .hmmp-actions .hmmp-button i {
    max-width: 24px !important;
    max-height: 24px !important;
    overflow: hidden !important;
  }
  .hmmp-view-mobile .hmmp-player .hmmp-actions {
    position: static !important;
  }
}

/* ===== v3.4.6 -- Rendimiento móvil: sin desenfoques sobre el video ===== */
@media (max-width: 767px) {
  .hmmp-player .hmmp-modal,
  .hmmp-player .hmmp-modal *,
  .hmmp-view-mobile .hmmp-player .hmmp-toast,
  .hmmp-view-mobile .hmmp-player .hmmp-next,
  .hmmp-view-mobile .hmmp-player .hmmp-plan-notice,
  .hmmp-view-mobile .hmmp-player .hmmp-modal-close,
  .hmmp-view-mobile .hmmp-player .hmmp-settings,
  .hmmp-view-mobile .hmmp-player .hmmp-player-download-menu,
  .hmmp-player .hmmp-unmute-hint {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .hmmp-view-mobile .hmmp-player .hmmp-settings,
  .hmmp-view-mobile .hmmp-player .hmmp-player-download-menu { background-color: rgba(14, 14, 18, .94) !important; }
  .hmmp-view-mobile .hmmp-player .hmmp-toast,
  .hmmp-view-mobile .hmmp-player .hmmp-next,
  .hmmp-view-mobile .hmmp-player .hmmp-modal-close,
  .hmmp-player .hmmp-unmute-hint { background-color: rgba(14, 14, 18, .82) !important; }
  .hmmp-player .hmmp-modal.hmmp-open .hmmp-video { transform: translateZ(0); }
}

/* PelisAnime Studio 1.7.42 — Transición al salir del video: el reproductor se desvanece y baja un poco (240 ms)
   en lugar de desaparecer de golpe; la ficha aparece después con un fundido más largo (hmmp-product-modal.css). */
.hmmp-modal.hmmp-closing{display:flex;pointer-events:none;animation:hmmpModalOut .24s cubic-bezier(.4,0,.6,1) forwards}
.hmmp-modal.hmmp-closing .hmmp-dialog{animation:hmmpDialogOut .24s cubic-bezier(.4,0,.6,1) forwards}
@keyframes hmmpModalOut{from{opacity:1}to{opacity:0}}
@keyframes hmmpDialogOut{from{transform:none}to{transform:scale(.985) translate3d(0,6px,0)}}
@media (prefers-reduced-motion:reduce){.hmmp-modal.hmmp-closing,.hmmp-modal.hmmp-closing .hmmp-dialog{animation:none}}