/* === OVERLAY DE PRODUCTOS === */
.products-overlay {
  position: fixed;
  /* Mantiene el overlay fijo en pantalla */
  top: 0;
  left: -100%;
  /* Comienza oculto fuera del viewport */
  width: 100%;
  height: 100%;
  background: black;
  /* Fondo transparente inicialmente */
  z-index: 1000;
  /* Superposición alta */
  transition: left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* Animación suave al mostrar */
  overflow-y: auto;
  box-sizing: border-box;
  overflow: hidden;
  /* Evita scroll horizontal */
}

/* Video de fondo dentro del overlay */
.video-background {
  height: 100vw;
}

.video-background video {
  object-fit: cover;
  height: 100vh;
  width: 100vw;
}

/* Estado activo del overlay (entra en pantalla) */
.products-overlay.active {
  left: 0;
}

/* Animación de aparición */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Contenedor del grid de productos */
.product-grid {
  display: block;
  padding-top: 1%;
  max-width: 1440px;
  margin: 0 auto;
  background-color: black;
}

/* === CARRUSEL COVERFLOW === */
.carousel-wrapper-coverflow {
  /*   position: relative; */
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  height: 550px;
  margin-top: 40px;
}

/* Pista que contiene las slides */
.carousel-track-coverflow {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  transition: transform 0.5s ease;
  width: 100%;
}

/* Slide individual */
.carousel-slide-coverflow {
  position: absolute;
  width: 460px;
  height: 460px;
  transition: all 0.5s ease;
  transform-origin: center center;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  left: 50%;
}

.carousel-slide-coverflow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  z-index: 0;
}

/* Slide activo (centrado) */
.carousel-slide-coverflow.active {
  z-index: 3;
  pointer-events: auto;
  opacity: 1;
  transform: translateX(-50%) scale(1);
}


/* Botones de navegación */
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 99%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid white;
  color: #eee;
  font-size: 14px;
  width: 25px;
  height: 20px;
  border-radius: 20%;
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding-bottom: 2px;
}

.carousel-prev:hover,
.carousel-next:hover {
  background: rgba(255, 255, 255, 1);
}

.carousel-prev {
  left: 48.2%;
}

.carousel-next {
  right: 48.2%;
}

/* Información del producto */
.carousel-info {
  position: absolute;
  left: 50%;
  top: 88%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 600px;
  padding: 7px 30px;
  border-radius: 30px;
  background-color: hsla(0, 0%, 100%, 0.05);
  cursor: pointer;
}

.carousel-info p {
  color: white;
  margin-bottom: 0.5rem;
  font-weight: 300;
}

.carousel-info .price {
  font-size: 16px;
  color: white;
  font-weight: 200;
  margin: 0;
  line-height: 20px;
}

.carousel-info .price del {
  color: white;
  margin-right: 0.5rem;
}

/* Encabezado del carrusel */
.carousel-head {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 600px;
  text-align: center;
  padding: 15px 30px;
  border-radius: 30px;
  background: transparent;
}

.carousel-head h2 {
  font-size: 25.87px;
  margin: 0;
  color: white;
  font-weight: 100;
  line-height: 40px !important;
  font-family: 'ABCSyntMono', monospace;
  letter-spacing: 0.15em;
}

/* Contenedor principal del carrusel */
.product-carousel-container {
  position: absolute;
  top: 15%;
  left: 0;
  width: 99.9vw;
  height: 83vh;
}

/* Imagen clickeable del producto */
/* .product-image-clickable {
  cursor: pointer;
  pointer-events: auto;
} */

/* Descripción del carrusel */
#carousel-description {
  cursor: pointer;
  color: white;
  font-weight: 200;
  font-size: 16px;
  text-transform: uppercase;
  line-height: 20px;
  margin-top: 0.5rem;
}

/* Flechas de navegación al hacer hover */
.hover-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #000;
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s ease;
}

.hover-nav-arrow:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.hover-nav-left {
  left: 20px;
}

.hover-nav-right {
  right: 20px;
}



#carousel-category {
  font-family: 'ABCSyntMono', monospace;
  font-size: 16px;
  color: #eee;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}




/* === RESPONSIVE: VERSIÓN MÓVIL === */
@media (max-width: 768px) {
  .carousel-wrapper-coverflow {
    height: 400px;
  }

  .carousel-slide-coverflow {
    width: 350px;
    height: 350px;
  }

  .carousel-slide-coverflow.active {
    transform: translateX(-50%) scale(1);
  }



  .carousel-prev,
  .carousel-next {
    font-size: 1.5rem;
    padding: 0.3rem 0.8rem;
    top: 95%;
    display: none;
    /* Ocultar botones en móvil */
  }

  .carousel-info {
    top: 90%;
    padding: 5px 20px;
    max-width: 90%;
  }

  .carousel-head {
    top: 10%;
    padding: 10px 20px;
    max-width: 90%;
  }

  .carousel-head h2 {
    line-height: 22px !important;
    font-size: 18px;
  }

  #carousel-description,
  .carousel-info .price {
    font-size: 14px;
  }

  .product-carousel-container {
    top: 5%;
    height: calc(100dvh - 10%);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}


/* === RESPONSIVE: PANTALLAS GRANDES === */
@media (min-width: 1921px) {
  .product-carousel-container {
    top: 18%;
    /* Más centrado verticalmente */
    height: 78vh;
    /* Más alto */
  }

  .carousel-wrapper-coverflow {
    height: 750px;
  }

  .carousel-slide-coverflow {
    width: 640px;
    height: 520px;
  }

/*   .carousel-slide-coverflow.prev {
    transform: translateX(calc(-100% - 950px)) scale(0.6);
  }

  .carousel-slide-coverflow.next {
    transform: translateX(calc(0% + 950px)) scale(0.6);
  } */

  .carousel-info {
    top: calc(85% - 60px);
    /* Más abajo, pero no pegado al borde */
    max-width: 720px;
    font-size: 18px;
  }

  .carousel-head {
    top: 2%;
    /* Más espacio arriba */
    max-width: 720px;
  }

  .carousel-head h2 {
    font-size: 32px;
  }
}







@media (min-width: 2560px) {
  .product-carousel-container {
    top: 22%;
    height: 80vh;
  }

  .carousel-wrapper-coverflow {
    height: 850px;
  }

  .carousel-slide-coverflow {
    width: 720px;
    height: 600px;
  }

 /*  .carousel-slide-coverflow.prev {
    transform: translateX(calc(-100% - 1200px)) scale(0.6);
  }

  .carousel-slide-coverflow.next {
    transform: translateX(calc(0% + 1200px)) scale(0.6);
  } */

  .carousel-info {
    top: calc(82% - 80px);
    font-size: 20px;
    max-width: 820px;
  }

  .carousel-head {
    top: 0;
    max-width: 800px;
  }

  .carousel-head h2 {
    font-size: 36px;
  }
}




.carousel-slide-coverflow.active.prev.next {
  z-index: 3;
  pointer-events: auto;
  opacity: 1 !important;
  transform: translateX(-50%) scale(1);
}



@media (max-width: 768px) {
  .carousel-slide-coverflow.active.prev.next {
    transform: translateX(-50%) scale(1);
  }
}


















/* Estilo base (funciona en todos los dispositivos) */
.carousel-slide-coverflow.prev {
  transform: 
    translateX(calc(-100% - clamp(250px, 41.67vw - 125px, 1150px))) 
    scale(0.5);
  opacity: 0.5;
}

.carousel-slide-coverflow.next {
  transform: 
    translateX(calc(0% + clamp(250px, 41.67vw - 125px, 1150px))) 
    scale(0.5);
  opacity: 0.5;
}




/* Ajuste para pantallas grandes (≥1920px) */
@media (min-width: 1920px) {
  .carousel-slide-coverflow.prev{
    transform: 
      translateX(calc(-100% - clamp(250px, 41.67vw - 125px, 1150px))) 
      scale(0.6); /* Escala aumentada */
    opacity: 0.5;
  }


  .carousel-slide-coverflow.next {
  transform: 
    translateX(calc(0% + clamp(250px, 41.67vw - 125px, 1150px))) 
    scale(0.6);
  opacity: 0.5;
}
}


@media (max-width: 768px) {

    .carousel-slide-coverflow.prev {
    transform: translateX(calc(-100% - 60px)) scale(0.5);
    opacity: 0.5;
  }

  .carousel-slide-coverflow.next {
    transform: translateX(calc(0% + 60px)) scale(0.5);
    opacity: 0.5;
  }

}



/* Contenedor principal */
.carousel-wrapper-coverflow {
  cursor: pointer;
  position: relative;
}

/* Zona izquierda (flecha blanca ←) */
.carousel-wrapper-coverflow:hover:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 33%;
  height: 100%;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><text x="8" y="20" font-family="Arial" font-size="20" fill="white">⬅</text></svg>') 16 16, 
       url('data:image/png;base64,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') 16 16, 
       w-resize;
  z-index: 99;
}

/* Zona derecha (flecha blanca →) */
.carousel-wrapper-coverflow:hover:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 33%;
  height: 100%;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><text x="8" y="20" font-family="Arial" font-size="20" fill="white">➡</text></svg>') 16 16, 
       url('data:image/png;base64,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') 16 16, 
       e-resize;
  z-index: 99;
}


/* Nueva media query para pantallas muy anchas pero no tan altas */
@media (min-width: 1921px) and (max-height: 1200px) {
  .carousel-info {
    top: 92%;
  }

  .carousel-slide-coverflow.active{
    top: 5%;
  }
}


/* Nueva media query para pantallas muy anchas pero no tan altas */
@media (min-width: 2560px) and (max-height: 1200px) {
  .carousel-info {
    top: 92%;
  }
  .carousel-slide-coverflow.active{
    top: 5%;
  }
}