/* ============================================================
   Shio Gourmet · Hero de la portada (index.html)
   Referencia: assets/imgs/hero.png
   - fondo crema (muestreado de la referencia)
   - titular con "sabores." ciclando colores de las sales
   - párrafo y botón: elementos HTML
   - imagen: assets/imgs/hero/ (base.webp + recortes por frasco con
     parallax de mouse; fuente única: assets/imgs/herochat.webp)
   - nav sin fondo (arriba): texto/logo/botón en #283139
   ============================================================ */

.hero-home {
  --hero-tinta: var(--bs-secondary-1);
  --hero-oro: var(--color-bronce);
  position: relative;
  display: flex;
  align-items: center;
  min-height: 92vh;
  padding: 8.5rem 0 5.5rem;
  background: transparent;
  overflow: hidden;
}

.hero-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  align-items: center;
  gap: var(--espacio-4);
}

/* ------------------------------------------------------------
   Copia (izquierda) — textos HTML
   ------------------------------------------------------------ */
.hero-copy {
  position: relative;
  z-index: 2;
  transform: translateY(-50px);
}

.hero-title {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 4.9vw, 4.3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--hero-tinta);
}

/* "sabores." cambia cada 3s por los colores de las sales */
.hero-oro {
  color: var(--hero-oro);
  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);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-oro {
    animation: none;
    color: var(--hero-oro);
  }
}

.hero-lead {
  max-width: 25rem;
  margin: 1.7rem 0 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--hero-tinta);
}

/* Botón negro con texto blanco; hover replica el patrón de
   .btn-primary-1:hover (fondo más claro + borde acorde) */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2.1rem;
  padding: 0.85rem 2rem;
  border: 1.5px solid var(--hero-tinta);
  border-radius: var(--radio-pastilla);
  background: var(--hero-tinta);
  color: var(--bs-white) !important;
  font-family: "Poppins", sans-serif;
  font-size: 0.85rem;
  font-weight: var(--peso-medio);
  letter-spacing: var(--espaciado-letras);
  text-transform: uppercase;
  text-decoration: none;
  line-height: normal;
  transition: background-color var(--transicion-rapida), border-color var(--transicion-rapida),
    color var(--transicion-rapida);
}

.hero-cta svg {
  transition: transform 0.25s ease;
}

.hero-cta:hover {
  background: var(--color-hover-secundario);
  border-color: var(--color-hover-secundario);
  color: var(--bs-white) !important;
}

.hero-cta:hover svg {
  transform: translateX(5px);
}

/* ------------------------------------------------------------
   Imagen (derecha): frascos + círculo + decoración
   Casi el doble de la columna: a pantalla completa, sangrada
   a la derecha, por detrás del texto.
   El arte está en capas: base.webp (sin frascos) + un recorte
   por frasco (.hero-jar) que se mueve con el mouse (parallax).
   ------------------------------------------------------------ */
.hero-art-wrap {
  position: absolute;
  right: -5vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(82vw, 1300px, 114vh);
  z-index: 1;
}

.hero-art {
  position: relative;
  width: 100%;
}

.hero-art-base {
  display: block;
  width: 100%;
  height: auto;
}

.hero-jar {
  position: absolute;
  height: auto;
  will-change: transform;
}

/* ------------------------------------------------------------
   El estilo del nav de esta página (sin fondo arriba,
   color al scrollear) vive en css/nav.css.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .hero-home {
    padding-top: var(--espacio-8);
    min-height: auto;
  }

  .hero-home-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero-art-wrap {
    position: static;
    width: 100%;
    transform: none;
  }

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

  .hero-copy {
    transform: none;
  }
}
@media (max-width: 575.98px) {
  .hero-home {
    padding-bottom: 4.5rem;
  }
}