/* =========================================================
   Glassip · Carrusel de Productos (Swiper 11)
   css/glassip-products.css  · v1.0 (05-jun-2025)
   ========================================================= */

/* ——————————————————————————
   1. VARIABLES DE TAMAÑO
   —————————————————————————— */
:root {
  /* Desktop */
  --card-width-desktop: 200px;
  --card-img-height-desktop: 300px;

  /* Tablet */
  --card-width-tablet: 180px;
  --card-img-height-tablet: 260px;

  /* Móvil */
  --card-width-mobile: 84vw;      /* 84% del viewport width */
  --card-img-height-mobile: 250px;
}

/* =========================================================
   2. CONTENEDOR DEL CARRUSEL
   ========================================================= */
.productos-swiper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden; /* Evita que se vean los clones o desbordes */
}

.productos-swiper .swiper-wrapper {
  display: flex;
}

/* =========================================================
   3. CADA DIAPOSITIVA (SLIDE)
   ========================================================= */
.productos-swiper .swiper-slide {
  flex-shrink: 0;   /* Fuerza que cada slide mantenga ancho fijo */
  width: auto;      /* Swiper inyectará el ancho inline automáticamente */
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

/* =========================================================
   4. TARJETA DE PRODUCTO (product-card)
   ========================================================= */
.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

/* ─── Desktop (≥1024px) ─── */
@media (min-width: 1024px) {
  .product-card {
    flex: 0 0 var(--card-width-desktop);
    max-width: var(--card-width-desktop);
  }
  .product-image-container {
    width: 100%;
    height: var(--card-img-height-desktop);
    padding: 12px;
    border-radius: 18px;
    background: #000; /* Fondo negro para recorte limpio */
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* ─── Tablet (≥600px <1024px) ─── */
@media (min-width: 600px) and (max-width: 1023px) {
  .product-card {
    flex: 0 0 var(--card-width-tablet);
    max-width: var(--card-width-tablet);
  }
  .product-image-container {
    width: 100%;
    height: var(--card-img-height-tablet);
    padding: 10px;
    border-radius: 16px;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* ─── Móvil (<600px) ─── */
@media (max-width: 599px) {
  .product-card {
    flex: 0 0 var(--card-width-mobile);
    max-width: var(--card-width-mobile);
    margin: 0 0 18px; /* Separación vertical entre cards */
  }
  .product-image-container {
    width: 100%;
    height: var(--card-img-height-mobile);
    padding: 8px;
    border-radius: 14px;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* =========================================================
   5. EFECTO “HOVER” EN LA TARJETA COMPLETA
   ========================================================= */
.product-card:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

/* =========================================================
   6. IMAGEN INTERIOR (product-image-container img)
   ========================================================= */
.product-image-container img {
  max-width: 90%;    /* Ocupa el 90% del ancho del contenedor */
  max-height: 100%;  /* Ocupa todo el alto disponible del contenedor */
  object-fit: contain;
  /* NO animamos el zoom de la imagen: la animación es sobre .product-card:hover */
}

/* =========================================================
   7. NOMBRE DEL PRODUCTO (h3.product-name)
   ========================================================= */
.product-name {
  margin: 10px 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #c5e82e !important;
  letter-spacing: 0.3px;
  line-height: 1.2em;
  min-height: 2.1em;
  text-align: center;
}

/* =========================================================
   8. GRADIENTES DE FONDO PARA CADA SLIDE
   ========================================================= */
.bg-1 {
  background: linear-gradient(135deg, #8cd3ff, #4e98ff);
}
.bg-2 {
  background: linear-gradient(135deg, #d66eff, #ad4fff);
}
.bg-3 {
  background: linear-gradient(135deg, #a066ff, #602eff);
}
.bg-4 {
  background: linear-gradient(135deg, #ff7ad6, #ff2ec9);
}

/* =========================================================
   9. FLECHAS (swiper-button-prev / swiper-button-next)
   ========================================================= */
.productos-swiper .swiper-button-prev,
.productos-swiper .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.2rem;
  height: 2.2rem;
  color: #c5e82e;
  background: none;
  border: none;
  z-index: 20;
}

/* Desktop: colocamos las flechas “fuera” del carrusel para que no tapen nada */
@media (min-width: 1024px) {
  .productos-swiper .swiper-button-prev {
    left: -38px;
  }
  .productos-swiper .swiper-button-next {
    right: -38px;
  }
}

/* En tablet/móvil: ocultamos flechas (el usuario desliza con el dedo) */
@media (max-width: 1023px) {
  .productos-swiper .swiper-button-prev,
  .productos-swiper .swiper-button-next {
    display: none;
  }
}

/* =========================================================
   10. PAGINACIÓN POR BULLETS
   ========================================================= */
.productos-swiper .swiper-pagination-bullet {
  background: #c5e82e;
  opacity: 0.35;
}

.productos-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

/*  */
@media (max-width: 599px) {
  .productos-swiper .swiper-wrapper {
  }

  .productos-swiper .swiper-slide {
    width: 100% !important;                 /* Fuerza a ocupar todo el ancho visible */
    display: flex !important;
    justify-content: center !important;     /* Centra internamente */
  }

  .product-card {
    max-width: 84vw !important;
    width: 84vw !important;
    margin: 0 auto !important;              /* Centra dentro del slide */
  }
}