/*
Theme Name:     Indigoff Glow
Template:       hello-elementor
Description:    Tema hijo de Hello Elementor
Version:        1.0.0
*/


/* 1) Contenedor full-bleed y responsivo */
.hero-producto.hero-crossfade{
  position: relative;
  width: 100vw;            /* ocupa todo el ancho de la ventana */
  left: 50%;
  right: 50%;
  margin-left: -50vw;      /* truco para salir del contenedor del tema */
  margin-right: -50vw;
  overflow: hidden;
  height: 102vh;            /* altura en desktop */
  max-height: 102vh;
}

/* 2) En móvil: ocupa alto completo (con safe area para iPhone) */
@supports (height: 102svh){
  .hero-producto.hero-crossfade{ height: 101svh; } /* mejor que 100vh en móviles */
}
@supports not (height: 100svh){
  .hero-producto.hero-crossfade{ height: 101vh; }
}
.hero-producto.hero-crossfade{
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* 3) Las imágenes llenan y recortan de forma estética */
.hero-producto.hero-crossfade img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;       /* recorte agradable sin deformar */
  object-position: center; /* ajusta a 'center top' si lo prefieres */
  opacity: 0;
  animation: heroFade 24s infinite;
  animation-delay: calc(var(--i) * 4s);
}

/* Si solo hay una imagen: mostrar fija */
.hero-producto.hero-crossfade img:only-child{
  opacity: 1; animation: none;
}

/* 4) Animación crossfade (puedes ajustar tiempos) */
@keyframes heroFade{
  0%, 8%     { opacity: 0; }
  8%, 38%    { opacity: 1; }  /* ~30% visible */
  38.01%,100%{ opacity: 0; }
}

/* 5) Si tu header es fixed y tapa el hero, deja espacio arriba en desktop */
@media (min-width: 992px){
  .admin-bar .hero-producto.hero-crossfade{ margin-top: -10px; } /* si ves que el admin bar pisa */
}


.hero-producto.hero-crossfade::after{
  content:""; position:absolute; inset:0;

  pointer-events:none;
}



/* MUESTRA DE COLORES PAGINA DE PRODUCTO*/

.color-swatches {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #ccc;
  cursor: pointer;
  display: inline-block;
  transition: all .2s ease;
}

.color-swatch.selected {
  border: 2px solid #000;
  transform: scale(1.1);
}