/* ========== GALERÍA DE VIDEO (16:9) ========== */
.video-slider-acatlan{
  --vs-bg:#000; 
  --vs-accent:#1C5159; 
  --vs-accent-2:#13322B;

  position:relative;
  max-width:960px;
  margin:0 auto;
  background:var(--vs-bg);
  border-radius:10px;
  overflow:hidden;

  /* UX */
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
}

/* Bordes rectos en móviles se controlan desde el shortcode ahora */

.video-slider-acatlan .vs-track{
  display:flex;
  will-change:transform;
  transition:transform 300ms ease;
}

.video-slider-acatlan .vs-slide{
  position:relative;
  min-width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}

.video-slider-acatlan video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* ---------- Botón de sonido ---------- */
.video-slider-acatlan .vs-sound{
  position:absolute;
  right:15px; bottom:15px;
  z-index:3;

  background:rgba(28,81,89,.85);
  color:#fff;
  border:0;
  padding:10px 14px;
  font-size:14px;
  border-radius:6px;
  cursor:pointer;
  transition:background .3s;
}
.video-slider-acatlan .vs-sound:hover{ background:rgba(20,60,66,.95); }

/* ---------- Overlay y tarjeta ---------- */
.video-slider-acatlan .vs-overlay{
  display:none;
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none; /* capa no bloquea gestos */
}

/* Tarjeta (sí acepta clics) */
.video-slider-acatlan .vs-card{
  position:absolute;
  left:16px; bottom:16px;
  max-width:min(580px,85%);
  padding:14px 16px;
  padding-right:48px;           /* deja espacio para la ✕ */
  border-radius:10px;

  background:rgba(0,0,0,.62);
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:15px;
  line-height:1.55;
  backdrop-filter:saturate(120%) blur(2px);

  pointer-events:auto;
}

.video-slider-acatlan .vs-close{
  position:absolute;
  top:8px; right:8px;
  width:32px; height:32px; line-height:28px;
  display:flex; align-items:center; justify-content:center;

  border-radius:50%;
  border:1px solid #ffffff66;
  background:rgba(0,0,0,.5);
  color:#fff;
  font-size:20px; font-weight:700;
  cursor:pointer;
  transition:background .2s;
}
.video-slider-acatlan .vs-close:hover{ background:rgba(0,0,0,.7); }

.video-slider-acatlan .vs-actions{
  display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;
}
.video-slider-acatlan .vs-btn-link,
.video-slider-acatlan .vs-follow{
  display:inline-block;
  text-decoration:none;
  color:#fff;
  background:var(--vs-accent);
  padding:8px 12px;
  border-radius:6px;
  font-weight:600;
  font-size:14px;
}
.video-slider-acatlan .vs-btn-link:hover{ background:var(--vs-accent-2); }
.video-slider-acatlan .vs-follow{ background:#1877F2; }
.video-slider-acatlan .vs-follow:hover{ filter:brightness(0.95); }

/* ---------- Flechas y dots ---------- */
.video-slider-acatlan .vs-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(28,81,89,.7);
  border:0;
  color:#fff;
  font-size:28px;
  padding:8px 12px;
  border-radius:6px;
  z-index:5;
  cursor:pointer;
  transition:background .2s;
}
.video-slider-acatlan .vs-btn:hover{ background:rgba(20,60,66,.95); }
.video-slider-acatlan .vs-prev{ left:10px; }
.video-slider-acatlan .vs-next{ right:10px; }

.video-slider-acatlan .vs-dots{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:5;
}
.video-slider-acatlan .vs-dots button{
  width:9px; height:9px; padding:0;
  border:0; border-radius:50%;
  background:#ffffff80;
  cursor:pointer;
}
.video-slider-acatlan .vs-dots button[aria-selected="true"]{ background:#fff; }

/* ---------- Fullscreen y overlay ---------- */
/* Muestra overlay solo cuando:
   - el contenedor está en FS y la slide activa tiene .fs-active, o
   - la slide (video) está en FS nativo (iOS). */
.video-slider-acatlan:not(:fullscreen) .vs-slide.fs-active .vs-overlay,
.video-slider-acatlan:not(:-webkit-full-screen) .vs-slide.fs-active .vs-overlay{
  display:none !important;
}
.video-slider-acatlan:fullscreen .vs-slide.fs-active .vs-overlay,
.video-slider-acatlan:-webkit-full-screen .vs-slide.fs-active .vs-overlay{
  display:block !important;
}
.video-slider-acatlan .vs-slide:fullscreen .vs-overlay,
.video-slider-acatlan .vs-slide:-webkit-full-screen .vs-overlay{
  display:block;
}

/* Botón salir de fullscreen (contenedor) */
.video-slider-acatlan .vs-exitfs{
  position:absolute; top:10px; left:10px;
  z-index:6;
  width:36px; height:36px; line-height:1;
  display:none; align-items:center; justify-content:center;

  border-radius:50%;
  border:1px solid #ffffff66;
  background:rgba(0,0,0,.55);
  color:#fff; font-size:18px; font-weight:700;
  cursor:pointer;
  transition:background .2s;
}
.video-slider-acatlan .vs-exitfs:hover{ background:rgba(0,0,0,.75); }

.video-slider-acatlan:fullscreen .vs-exitfs,
.video-slider-acatlan:-webkit-full-screen .vs-exitfs{
  display:flex;
}

/* Ajustes de controles en fullscreen */
.video-slider-acatlan:fullscreen .vs-btn,
.video-slider-acatlan:-webkit-full-screen .vs-btn{
  font-size:32px;
  padding:10px 14px;
}

/* ---------- Hint para rotar en portrait ---------- */
.video-slider-acatlan .vs-rotate-hint{
  position:absolute;
  left:16px; right:16px; bottom:16px;
  display:none;
  justify-content:center; align-items:center;
  padding:10px 12px;
  border-radius:8px;
  font-weight:600;
  background:rgba(0,0,0,.55);
  color:#fff;
  z-index:7;
}
@media (orientation: portrait){
  .video-slider-acatlan:fullscreen .vs-rotate-hint,
  .video-slider-acatlan:-webkit-full-screen .vs-rotate-hint{
    display:flex;
  }
}

/* ===== MÓVIL: ocultar reseñas/overlay (incluye fullscreen) ===== */
@media (max-width: 768px){
  .video-slider-acatlan .vs-overlay,
  .video-slider-acatlan .vs-card,
  .video-slider-acatlan .vs-close{
    display:none !important;
  }

  /* Refuerzo para estados de fullscreen del contenedor y del video */
  .video-slider-acatlan:fullscreen .vs-slide.fs-active .vs-overlay,
  .video-slider-acatlan:-webkit-full-screen .vs-slide.fs-active .vs-overlay,
  .video-slider-acatlan .vs-slide:fullscreen .vs-overlay,
  .video-slider-acatlan .vs-slide:-webkit-full-screen .vs-overlay{
    display:none !important;
  }
}