/*
 * Ajustes del clon. El CSS de verdad es el del original
 * (/_nuxt/*.css + los <style> que vienen en cada página).
 *
 * Acá va SOLO lo que el runtime de Vue hacía visible. Todo lo que el original
 * oculta esperando a su JS tiene que quedar visible por CSS: si dependiera de
 * clone.js, un error de JS dejaría la página en blanco.
 */

/* --- Contenido oculto a la espera del observer de entrada ---------------- */
/* .fade-in[data-v-*] { opacity: 0 } envuelve el contenido de 28 páginas.
   Visible por defecto; clone.js reintroduce la animación si puede. */
.fade-in {
  opacity: 1 !important;
}

/* --- Carruseles ---------------------------------------------------------- */
/* .splide { visibility: hidden } hasta que Splide arranca. */
.splide {
  visibility: visible !important;
}

.splide__list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}

.splide__list::-webkit-scrollbar {
  display: none;
}

/* Splide da a cada slide el ancho del track (1000px en los testimonios);
   con flex:auto quedaban a 880px, el ancho del contenido. */
.splide__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  opacity: 1 !important;
}

.splide__arrow {
  cursor: pointer;
}

/* --- Dropdown del nav ---------------------------------------------------- */
.products-dropdown {
  display: none;
  opacity: 0;
}

.products.dropdown-opened .products-dropdown,
.products-button.dropdown-opened .products-dropdown {
  display: flex;
  opacity: 1;
}

/* El menú móvil es absolute y va oculto en desktop; sin el JS de Vue queda en
   display:block. Se replica el estado del original. */
@media (min-width: 900px) {
  .navigation-mobile-wrapper {
    display: none;
  }
}

/* --- Testimonios --------------------------------------------------------- */
/*
 * El original aplica [data-v-1b5296c3] .testimonials-container{padding-bottom:9.6rem}
 * desde un <style> que Vue inyecta al hidratar, y por orden de cascada le gana
 * a la regla base de 14.8rem. Sin Vue quedaba 148px en vez de 96px (52px de más
 * en el alto de la home).
 */
[data-v-1b5296c3] .testimonials-container {
  padding-bottom: 9.6rem;
}

/* --- Vista previa del hero ----------------------------------------------- */
/* Las imágenes se apilan y solo la activa lleva .show. Sin JS, la primera. */
.preview img:first-of-type {
  visibility: visible;
}

/* --- Video --------------------------------------------------------------- */
/* El reproductor de Cloudinary se reemplaza por un <video> nativo. */
.video-container.hidden {
  visibility: visible;
}

.cld-video-player video,
.video-container video {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Animación de entrada ------------------------------------------------ */
/* clone.js baja la opacidad y la sube al entrar en viewport. Si no corre,
   el estado final ya es el visible de arriba. */
.clone-fade {
  opacity: 0 !important;
  transform: translateY(1.6rem);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

.clone-fade.clone-fade--in {
  opacity: 1 !important;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .clone-fade,
  .clone-fade.clone-fade--in {
    opacity: 1 !important;
    transform: none;
    transition: none;
  }
}