/* ============================================================
   LPB Gallery Modal — estilo Reels/Instagram
   Fondo negro, deslizamiento vertical con snap, soporta
   imagen, video y texto. Mismos nombres de clase del wrapper
   original (lpb-film-*) para ser reemplazo directo del CSS previo.
   Sin tira de carrete / perforaciones (eso queda eliminado).
   ============================================================ */

.lpb-film-gallery,
.lpb-film-gallery *{
  box-sizing:border-box;
}
.lpb-film-gallery figure,
.lpb-film-gallery figcaption{
  margin:0;
}

.lpb-film-tab{
  position:fixed;
  right:var(--lfg-tab-right,0);
  top:var(--lfg-tab-top,50%);
  transform:translateY(-50%);
  z-index:2147482000;
  border:0;
  border-radius:12px 0 0 12px;
  padding:14px 10px;
  background:var(--lfg-accent,#111827);
  color:#fff;
  writing-mode:vertical-rl;
  font:800 13px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:-6px 8px 24px rgba(0,0,0,.18);
}
.lpb-film-tab:hover{padding-right:16px}

/* Overlay del modal a pantalla completa, negro */
.lpb-film-modal{
  position:fixed;
  inset:0;
  z-index:2147483200;
  display:none;
  background:#000;
  color:#fff;
}
.lpb-film-modal.is-open{display:block}

.lpb-film-close{
  position:fixed;
  right:16px;
  top:16px;
  z-index:5;
  width:40px;height:40px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#111;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.lpb-film-close:hover{background:#fff}

/* Contenedor con scroll-snap vertical, ancho tipo Reels.
   Full width por defecto (mobile); se limita a 480px solo en pantallas grandes. */
.lpb-film-scroll{
  height:100dvh;
  width:100%;
  max-width:100%;
  margin:0 auto;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  background:#000;
}
.lpb-film-scroll::-webkit-scrollbar{display:none}
@media(min-width:641px){
  .lpb-film-scroll{max-width:480px}
}

.lpb-film-strip{
  display:block;
  width:100%;
  background:#000;
  padding:0;
}

/* Cada slide ocupa toda la pantalla, tipo Reel */
.lpb-film-frame{
  position:relative;
  height:100dvh;
  width:100%;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;
}
.lpb-film-frame img,
.lpb-film-frame video{
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
  display:block;
}

/* Slide de texto (data-type="text") */
.lpb-film-frame.lpb-frame-text{
  padding:32px;
  background:linear-gradient(160deg,#111827,#000);
}
.lpb-film-frame.lpb-frame-text .lpb-film-text{
  font:700 26px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  text-align:center;
  max-width:420px;
  color:#fff;
}

/* Caption inferior con degradado, estilo Reels */
.lpb-film-caption{
  position:absolute;
  left:16px;
  right:80px;
  bottom:28px;
  padding:0;
  background:transparent;
  color:#fff;
  font:600 14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
  border-radius:0;
  pointer-events:none;
  z-index:1;
}
.lpb-film-frame:before{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:35%;
  background:linear-gradient(to top,rgba(0,0,0,.65),transparent);
  pointer-events:none;
}

/* Columna de acciones flotante — fija al viewport (no al frame), así
   nunca queda cortada por el overflow:hidden de cada slide. WhatsApp y los
   botones personalizados comparten esta misma columna, apilados; el JS
   actualiza cuáles se muestran según el slide activo. */
.lpb-film-actions{
  position:fixed;
  right:calc(env(safe-area-inset-right,0px) + 16px);
  bottom:calc(env(safe-area-inset-bottom,0px) + 96px);
  z-index:2147483250;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:14px;
}
.lpb-film-wa,
.lpb-film-action,
.lpb-film-mute{
  flex:0 0 auto;
  width:52px;height:52px;
  border-radius:50%;
  align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  text-decoration:none;
  transition:transform .15s ease;
}
.lpb-film-wa{background:#25D366;display:none}
.lpb-film-wa.is-visible{display:flex}
.lpb-film-action{display:flex;background:#111827}
.lpb-film-mute{display:flex;background:#111827;border:0;cursor:pointer;padding:0}
.lpb-film-wa:hover,
.lpb-film-action:hover,
.lpb-film-mute:hover{transform:scale(1.08)}
.lpb-film-wa svg,
.lpb-film-action svg,
.lpb-film-mute svg{width:26px;height:26px;fill:#fff}

/* Indicador sutil de progreso (puntos a la derecha) */
.lpb-film-progress{
  position:fixed;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lpb-film-progress span{
  width:5px;height:16px;border-radius:3px;
  background:rgba(255,255,255,.3);
}
.lpb-film-progress span.is-active{background:#fff}

@media(max-width:640px){
  /* No fijar top/bottom acá: en desktop la pestaña usa --lfg-tab-top (el
     slider "Altura lateral"). Forzar bottom:110px en mobile la llevaba
     siempre al mismo punto sin importar ese valor, chocando con la pestaña
     de Catálogo de productos (mismo override) apenas ambas estaban activas. */
  .lpb-film-tab{font-size:12px;padding:12px 8px}
  .lpb-film-scroll{width:100%}
  .lpb-film-frame.lpb-frame-text .lpb-film-text{font-size:20px;max-width:88%}
  .lpb-film-actions{right:12px;bottom:84px;gap:10px}
  .lpb-film-wa,
  .lpb-film-action,
  .lpb-film-mute{width:46px;height:46px}
  .lpb-film-wa svg,
  .lpb-film-action svg,
  .lpb-film-mute svg{width:22px;height:22px}
  .lpb-film-progress{display:none}
}