/* _sliders-css.css — Sliders 100% CSS (sin Swiper/jQuery). Regla CSS-first (CLAUDE.md §2).
 * Home / hero: el carrusel se DESACOPLÓ de las clases swiper de Elementor (renombradas a
 * .cc-hero / .cc-hero-track / .cc-hero-slide en index.html) para que el CSS de Swiper no
 * rompa el pintado de las slides. Contenido interno intacto (pixel-perfect).
 * Desktop: autoplay con @keyframes. Móvil: swipe con scroll-snap.
 */

/* ---- HERO (3 slides full-width) ---- */
.elementor-element-1c1ba22 {
  position: relative;        /* ancla para las flechas absolutas */
}
.elementor-element-1c1ba22 .cc-hero {
  position: relative;
  display: block !important;
  overflow: hidden;
  width: 100%;
}

/* Flechas ‹ › del hero: forzar tamaño pequeño y posición a los lados
   (sin el JS de Elementor el SVG se desbordaba a ~1250px). */
.elementor-element-1c1ba22 .elementor-swiper-button {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center;
  font-size: 32px !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  z-index: 5;
  color: rgba(255, 255, 255, 0.9);
}
.elementor-element-1c1ba22 .elementor-swiper-button svg {
  width: 1em !important;
  height: 1em !important;
  fill: currentColor;
}
.elementor-element-1c1ba22 .elementor-swiper-button-prev {
  left: 15px !important;
  right: auto !important;
}
.elementor-element-1c1ba22 .elementor-swiper-button-next {
  right: 15px !important;
  left: auto !important;
}
.elementor-element-1c1ba22 .cc-hero-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100%;
  transform: translateX(0);
  animation: heroSlide 18s infinite;
}
/* pausa al pasar el mouse (como Elementor) */
.elementor-element-1c1ba22 .cc-hero:hover .cc-hero-track {
  animation-play-state: paused;
}
/* cada slide = 100% del ancho del viewport (desbordan el track, .cc-hero los recorta) */
.elementor-element-1c1ba22 .cc-hero-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* la imagen del banner llena la slide */
.elementor-element-1c1ba22 .cc-hero-slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* 3 diapositivas: cada una visible ~5s, transición de deslizado ~1s */
@keyframes heroSlide {
  0%,     28%    { transform: translateX(0); }
  33.33%, 61%    { transform: translateX(-100%); }
  66.66%, 94%    { transform: translateX(-200%); }
  100%           { transform: translateX(0); }
}

/* En táctil: swipe nativo con scroll-snap (sin autoplay, mejor UX móvil) */
@media (hover: none) {
  .elementor-element-1c1ba22 .cc-hero {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .elementor-element-1c1ba22 .cc-hero::-webkit-scrollbar { display: none; }
  .elementor-element-1c1ba22 .cc-hero-track {
    animation: none;
    transform: none;
    width: auto;
  }
  .elementor-element-1c1ba22 .cc-hero-slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    scroll-snap-align: center;
  }
}

/* Respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .elementor-element-1c1ba22 .cc-hero-track { animation: none; }
}

/* =========================================================================
   FLECHAS DE TODOS LOS CARRUSELES — tamaño/posición seguros (sin JS)
   Sin el JS de Elementor el SVG de las flechas se desbordaba a ~1250px.
   ========================================================================= */
.elementor-swiper-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  font-size: 30px;
  width: auto;
  height: auto;
  line-height: 1;
  z-index: 5;
}
.elementor-swiper-button svg {
  width: 1em !important;
  height: 1em !important;
}
.elementor-swiper-button-prev { left: 10px; right: auto; }
.elementor-swiper-button-next { right: 10px; left: auto; }
/* anclar las flechas dentro de su widget */
.elementor-widget-image-carousel .elementor-widget-container,
.elementor-widget-elementskit-testimonial .elementor-widget-container { position: relative; }

/* =========================================================================
   CARRUSELES AUTOPLAY (marquee CSS, sin JS) — image-carousels y testimonios
   Las slides se duplicaron (scripts/clone-carousel-slides.mjs) y el track se
   desplaza -50% en bucle infinito → autoplay continuo y sin saltos.
   El espaciado entre tarjetas se hace con margin-right (mantiene el bucle exacto).
   ========================================================================= */

/* contenedores: recortar lo que sobra del track */
.elementor-image-carousel-wrapper,
.elementskit-testimonial-slider .swiper,
.elementskit-testimonial-slider .ekit-main-swiper {
  overflow: hidden;
  position: relative;
}

/* track marquee */
.swiper-wrapper.cc-mq {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  animation: ccMarquee 58s linear infinite;
}
/* testimonios un poco más lentos (tarjetas más anchas) */
.elementskit-testimonial-slider .swiper-wrapper.cc-mq { animation-duration: 64s; }
.swiper-wrapper.cc-mq:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .swiper-wrapper.cc-mq { animation: none; }
}

/* slides: ancho fijo responsive + separación con margin-right (bucle exacto) */
.elementor-image-carousel-wrapper .cc-mq > .swiper-slide {
  flex: 0 0 clamp(240px, 23vw, 350px) !important;
  width: clamp(240px, 23vw, 350px) !important;
  margin: 0 28px 0 0 !important;
  scroll-snap-align: none;
}
.elementskit-testimonial-slider .cc-mq > .swiper-slide {
  flex: 0 0 clamp(280px, 30vw, 420px) !important;
  width: clamp(280px, 30vw, 420px) !important;
  margin: 0 28px 0 0 !important;
  height: auto !important;
}

@keyframes ccMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================================================
   HERO controlado por JS (flechas + autoplay). Mejora progresiva:
   si el JS no carga, queda el autoplay CSS (keyframes heroSlide).
   ========================================================================= */
.js-on .elementor-element-1c1ba22 .cc-hero { overflow: hidden; }
.js-on .elementor-element-1c1ba22 .cc-hero-track {
  animation: none !important;
  width: 100% !important;
  transition: transform 0.55s ease;
  will-change: transform;
}
.js-on .elementor-element-1c1ba22 .cc-hero-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
}
@media (hover: none) {
  .js-on .elementor-element-1c1ba22 .cc-hero {
    overflow: hidden;
    scroll-snap-type: none;
  }
}
/* flechas del hero clicables por encima de todo */
.js-on .elementor-element-1c1ba22 .elementor-swiper-button { cursor: pointer; }

/* =========================================================================
   LIGHTBOX (imágenes de carruseles)
   ========================================================================= */
.cc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 5vmin clamp(56px, 8vw, 96px);
  background: rgba(0, 0, 0, 0.9);
}
.cc-lightbox.is-open { display: flex; }
.cc-lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  cursor: zoom-out;
}
.cc-lightbox img {
  max-width: min(1100px, 88vw);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.6);
}

/* Botón cerrar: cuadrado perfecto, × centrada (override de estilos de botón Elementor) */
.cc-lightbox__close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #e21b1b !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.cc-lightbox__close:hover { background: #c41616 !important; }

/* Chevrons de navegación a los lados */
.cc-lightbox__nav {
  flex: 0 0 auto;
  width: 52px !important;
  height: 52px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  font-size: 26px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background 0.2s ease;
  z-index: 1;
}
.cc-lightbox__nav:hover { background: rgba(255, 255, 255, 0.34) !important; }
@media (max-width: 600px) {
  .cc-lightbox { padding: 8vmin 8px; }
  .cc-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px !important;
    height: 44px !important;
  }
  .cc-lightbox__prev { left: 8px; }
  .cc-lightbox__next { right: 8px; }
}