/* ============================================================
   Shio Gourmet · Hero "todos nuestros sabores" (productos.html)
   Foto sin fondo (ingredientes sueltos sobre --color-fondo),
   textos centrados encima en desktop y debajo en mobile.
   ============================================================ */

/* La clase del body solo estaba activa en mobile: la activamos siempre
   para que el hero arranque en top: 0 como en la portada. */
body.bodymarginless {
  margin-top: 0 !important;
}

.hero-sabores {
  padding: var(--espacio-8) 0 0;
}

.hero-sabores-card {
  position: relative;
  /* Recorta el zoom de entrada de la foto (GSAP) para que no
     desborde la card ni genere scroll horizontal. */
  overflow: hidden;
}

.hero-sabores-foto {
  display: block;
  width: 100%;
  height: auto;
}

/* Fundido inferior: la imagen se disuelve en el fondo de pagina */
.hero-sabores-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 6rem;
  background: linear-gradient(
    to top,
    var(--color-fondo) 30%,
    rgba(248, 246, 243, 0)
  );
  pointer-events: none;
}

.hero-sabores-copy {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--espacio-6) var(--espacio-4) var(--espacio-7);
  text-align: center;
}

.hero-sabores-title {
  margin: var(--espacio-1) 0 0;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: var(--peso-negro);
  line-height: 1.12;
  color: var(--bs-text-1);
}

/* "sabores." cicla los colores de las sales, igual que en la portada */
.hero-sabores-title span {
  color: var(--color-bronce);
  animation: hero-sabores var(--ciclo-sabores) infinite;
}

@keyframes hero-sabores {
  0%,
  16.66% {
    color: var(--bs-primary-2);
  }
  16.67%,
  33.33% {
    color: var(--bs-primary-1);
  }
  33.34%,
  50% {
    color: var(--color-oro);
  }
  50.01%,
  66.66% {
    color: var(--bs-primary-3);
  }
  66.67%,
  83.33% {
    color: var(--color-rojo);
  }
  83.34%,
  100% {
    color: var(--color-magenta);
  }
}

.hero-sabores-lead {
  max-width: 31rem;
  margin: 2rem auto 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--bs-text-1);
}

.hero-sabores-beneficios {
  display: flex;
  justify-content: center;
  max-width: 42rem;
  margin: var(--espacio-5) auto 0;
  padding: 0;
  list-style: none;
}

.hero-sabores-beneficios li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-2);
  padding: 0 var(--espacio-4);
  text-align: center;
}

/* Iconos con el mismo ciclo de colores que "sabores." */
.hero-sabores-beneficios svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--bs-text-1);
  animation: hero-sabores var(--ciclo-sabores) infinite;
}

.hero-sabores-beneficios span {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--bs-text-1);
}

/* --- Desktop ancho: imagen a pantalla completa desde top:0, texto encima --- */
@media (min-width: 1200px) {
  .hero-sabores {
    padding-top: 0;
  }

  .hero-sabores-card {
    min-height: max(32rem, 90vh);
  }

  .hero-sabores-foto {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .hero-sabores-copy {
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-6);
  }

  /* Los beneficios fluyen debajo del texto, a 48px (--espacio-5) */
}

/* --- Mobile/tablet: foto arriba, texto centrado abajo --- */
@media (max-width: 991.98px) {
  .hero-sabores {
    padding-top: var(--espacio-8);
  }

  .hero-sabores-lead {
    max-width: 100%;
  }

  .hero-sabores-beneficios {
    max-width: none;
    flex-wrap: wrap;
    gap: var(--espacio-4);
  }

  .hero-sabores-beneficios li {
    flex: 1 1 40%;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-sabores-title span {
    animation: none;
    color: var(--color-bronce);
  }

  .hero-sabores-beneficios svg {
    animation: none;
    color: var(--bs-text-1);
  }
}

/* --- Grilla de productos: la tarjeta centraba su texto con la clase
   .hover-zoom (que ahora no usamos: el zoom va en la imagen, al estilo
   de recetas.html). Conservamos lo visual que esa clase aportaba. --- */
.row.productos .card {
  text-align: center;
  box-shadow: none !important;
}