/*********************************
  VIDEO HORIZONTAL CINEMATIC PRO
*********************************/

.video-section.cinematic {
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 10px;
  margin: 0 auto;
  position: relative;
}

/* Contenedor principal */
.horizontal-video {
  position: relative;
  width: 90%;
  aspect-ratio: 16 / 9;
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;

  /* Thumbnail controlada (NO iframe preview) */
  background-image: url("https://image.comunicaciones.sura.com/lib/fe9712737364067b74/m/1/414940a4-4274-4c00-aa65-9f4380dd0621.jpg");
  background-size: cover;
  background-position: center;
  background-color: #e9effa;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.horizontal-video:hover {
  transform: translateY(-6px) scale(1.02);
}

/* Solo mejora progresiva */
@supports selector(:has(*)) {
  .horizontal-video:has(iframe:hover) {
    transform: translateY(-6px) scale(1.02);
  }
}


/* Iframe (se inyecta al hacer click) */
.horizontal-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 15px;
  background: transparent;
}

/* Overlay SOLO decorativo (no ensucia preview) */
.horizontal-video::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.horizontal-video:hover::after {
  opacity: 1;
}

/* Botón play */
.play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.95);
  cursor: pointer;
  z-index: 2;

  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.play-btn::before {
  content: "";
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 22px solid #e53935;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}

.play-btn:hover {
  transform: scale(1.1);
}

/* Animación entrada */
.fade-in {
  opacity: 0;
  transform: scale(1.02);
  animation: fadeUp 1s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transition: transform 0.3s ease;
  }
}

/* =========================
   Responsive fino
========================== */

@media (max-width: 992px) {
  .horizontal-video {
    max-width: 900px;
    border-radius: 15px;
  }
}

@media (max-width: 768px) {
  .video-section.cinematic {
    padding: 30px 14px;
  }

  .horizontal-video {
    max-width: 100%;
    border-radius: 15px;
  }
}

@media (max-width: 480px) {
  .video-section.cinematic {
    padding: 20px 10px;
  }

  .horizontal-video {
    border-radius: 15px;
  }
}



/************ Slider estilo “escenario” para tu HTML *************/

:root {
  --card-width: 320px;      /* ancho máx del slide en desktop */
  --side-offset: 300px;     /* desplazamiento lateral de los laterales */
  --scale-side: 0.80;       /* escala de laterales (como referencia) */
  --radius: 12px;
  --shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* Contenedor general del slider */
.slider-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 56px; /* espacio para flechas */
}

/* “Stage” donde posicionamos los slides */
.slider-wrapper {
  position: relative;
  width: 100%;
  height: 600px;
}

/* Cada slide es absoluto en el stage */
.slide {
  position: absolute;
  background: transparent;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;

  left: 50%;
  transform: translateX(-50%);
  transition: all 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
  opacity: 0;
  z-index: 1;
  pointer-events: none;       /* sólo el del frente será clickeable */
  width: 70%;
  max-width: var(--card-width);
}

/* Estados “escenario” */
.slide.center {
  transform: translateX(-50%) scale(1);
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
}
.slide.left {
  width: 60%;
  max-width: calc(var(--card-width) * 0.95);
  transform: translateX(calc(-50% - var(--side-offset))) scale(var(--scale-side));
  opacity: 0.7;
  z-index: 2;
}
.slide.right {
  width: 60%;
  max-width: calc(var(--card-width) * 0.95);
  transform: translateX(calc(-50% + var(--side-offset))) scale(var(--scale-side));
  opacity: 0.7;
  z-index: 2;
}
.slide.hidden {
  width: 280px;
  transform: translateX(-50%) scale(0.6);
  opacity: 0;
  z-index: 1;
}

/* Hovers suaves en laterales */
.slide:hover:not(.center) { opacity: 0.9; }
.slide.left:hover  { transform: translateX(calc(-50% - var(--side-offset))) scale(0.85); }
.slide.right:hover { transform: translateX(calc(-50% + var(--side-offset))) scale(0.85); }

/* —— Shorts 9:16 con radio 12 —— */
.video-container.vertical {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;     /* formato vertical */
  border-radius: var(--radius);
  overflow: hidden;         /* recorta el iframe con el radio */
}
.video-container.vertical iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius); /* opcional */
}

/* Flechas */
.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  color: #2c3e50;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.nav-button.prev { left: 20px; }
.nav-button.next { right: 20px; }
.nav-button:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Dots */
.dots-container {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  gap: 12px;
}
.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #b9c1d1;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}
.dot.active {
  background: #fff;
  transform: scale(1.3);
  border-color: rgba(255, 255, 255, 0.8);
}
.dot:hover:not(.active) {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.1);
}

/* Responsivo */
@media (max-width: 992px) {
  :root { --card-width: 300px; --side-offset: 220px; --scale-side: 0.82; }
}
@media (max-width: 768px) {
  :root { --card-width: 260px; --side-offset: 160px; --scale-side: 0.84; }
  .slider-container {height: 100%; padding: 10px 44px; }
.slider-wrapper {
  position: relative;
  width: 100%;
  height: 500px;
}
}
@media (max-width: 480px) {
  :root { --card-width: 220px; --side-offset: 120px; --scale-side: 0.86; }
  .slider-container {height: 100%; padding: 4px 36px; } 
.slider-wrapper {
  position: relative;
  width: 100%;
  height: 400px;
}
}

/* =========================
   FIX MOBILE SLIDER + YOUTUBE
========================== */

/* Evita que el iframe lateral bloquee swipe */
@media (max-width: 768px) {
  .slide:not(.center) iframe {
    pointer-events: none;
  }
}

/* Permite que los dots sean visibles */
.slider-container {
  overflow: visible; /* antes estaba hidden */
}

.dots-container {
  position: relative;
  z-index: 20;
}