/* ═══════════════════════════════════════════════════════════════════
   IMAGE CAROUSEL SYSTEM · Base CSS · v1.2
   ───────────────────────────────────────────────────────────────────
   Cárgalo junto con carousel-system.js.
   scroll-system.css debe cargarse ANTES que este archivo.

   Cambios v1.2:
     · Nuevas reglas para #carousel-overlay: neutralizan clip-path,
       mask-image y -webkit-mask en el slide y sus descendientes
       mientras vuela en el overlay. Resuelven la deformación en forma
       de hexágono causada por masks/clip-paths de Elementor o del
       tema. Al aterrizar el slide de vuelta en el contenedor, las
       reglas dejan de aplicar automáticamente.
     · Las dimensiones de la imagen se preservan intactas (no se
       sobreescriben con !important). El ghost se dimensiona en JS
       usando firstImg.offsetWidth × offsetHeight para que coincida
       con el tamaño real de la imagen en reposo.

   Cambios v1.1:
     · Ya no se requiere overflow:visible en el contenedor ni en ningún
       padre. El JS usa un overlay portal (#carousel-overlay, body-level)
       durante las animaciones para escapar de overflow:hidden.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Contenedor principal ────────────────────────────────────────── */
.image-carousel {
  position: relative;
  /* overflow NO se fuerza aquí — el overlay portal del JS se encarga
     de que los slides vuelen libremente durante la animación. */
}

/* ── Overlay de animación ────────────────────────────────────────── */
/* Creado dinámicamente por JS. Aquí solo como referencia de sus estilos.
   No editar — el JS lo genera con los mismos valores vía inline style. */
/* #carousel-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8000;
  overflow: visible;
} */

/* ── Slides ──────────────────────────────────────────────────────── */
/* El JS aplica position, inset, z-index, opacity y transform.
   Estas reglas son defaults y red de seguridad cuando los slides
   están dentro del contenedor (estado de reposo). */
.carousel-slide {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
  pointer-events: none;
}

/* ── Imágenes dentro de los slides ──────────────────────────────── */
.carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── Slides en vuelo (en #carousel-overlay) ─────────────────────── */
/* Mientras el slide está animándose en el overlay portal, se         */
/* neutralizan clip-path, máscaras y otros efectos visuales que      */
/* podrían deformar la imagen (p.ej. máscaras de Elementor o         */
/* clip-paths del tema de WordPress). Al aterrizar de nuevo en el    */
/* contenedor, estas reglas dejan de aplicar automáticamente —no se  */
/* necesita restauración por JS—.                                    */
/*                                                                    */
/* ⚠ NO se fuerzan width/height en las imágenes: el JS dimensiona   */
/* el ghost a partir de firstImg.offsetWidth × offsetHeight, que     */
/* coincide con el tamaño real de la imagen en reposo. Forzar 100%   */
/* haría que la imagen llenara el contenedor de Elementor (mayor)    */
/* en lugar de su tamaño visual real.                                */
#carousel-overlay .carousel-slide,
#carousel-overlay .carousel-slide * {
  clip-path:          none !important;
  -webkit-clip-path:  none !important;
  mask:               none !important;
  mask-image:         none !important;
  -webkit-mask:       none !important;
  -webkit-mask-image: none !important;
}

/* Asegurar display block en el overlay por si algún CSS de Elementor
   lo sobreescribiera al mover el elemento en el DOM. */
#carousel-overlay .carousel-slide img {
  display: block !important;
}

/* ── Modo editor de Elementor ────────────────────────────────────── */
/* En el editor, restauramos el flujo normal para poder editar los slides. */
html.scroll-system-editor-mode .image-carousel {
  position: relative !important;
  height: auto !important;
  min-height: 200px;
}

html.scroll-system-editor-mode .carousel-slide {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  opacity: 1 !important;
  margin-bottom: 8px;
  outline: 1px dashed rgba(127, 127, 127, 0.3);
}

html.scroll-system-editor-mode #carousel-overlay {
  display: none;
}