/* ==========================================================================
   GELÉE — index.css
   Portada + menú de productos. Solo se carga en index.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   Corto a propósito: no ocupa la pantalla completa. El padding vertical se
   ata a la altura de la ventana (6vh) para que en móvil el bloque completo
   se mantenga por debajo de 60vh sin recortar nada.
   -------------------------------------------------------------------------- */
.hero {
  background-color: var(--crema);
  padding-block: clamp(var(--esp-32), 6vh, var(--esp-56));
  text-align: center;
}

.hero__interior {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-24);
}

/* Logo de la marca. Tamaño contenido: no compite con el menú. */
.hero__logo {
  width: clamp(240px, 64vw, 360px);
  margin: 0 auto;
  line-height: 0;
}

/* El archivo viene con fondo blanco, no transparente: multiply lo funde
   con el crema del hero sin necesidad de recortarlo. */
.hero__logo img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.hero__descriptor {
  max-width: 34ch;
  margin: 0;
  font-size: var(--t-lead); /* 17px */
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   2. Rejilla de sabores
   1 columna en móvil · 2 en tablet · 3 en escritorio
   -------------------------------------------------------------------------- */
.sabores {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-32);
}

@media (min-width: 600px) {
  .sabores { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .sabores { grid-template-columns: repeat(3, 1fr); }
}

/* --- Tarjeta ---
   La tarjeta ya no es un <a>: lleva dentro los botones del carrusel y un
   botón no puede vivir dentro de un enlace. El enlace es ahora el nombre
   del sabor y se estira sobre toda la tarjeta con un ::after. */
.sabor {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  color: var(--texto);
  /* La foto va a ras del borde: la tarjeta toma el radio de foto para que
     las esquinas de arriba no se vean con dos curvas distintas. */
  border-radius: var(--radio-foto);
}

.sabor__enlace {
  color: inherit;
  text-decoration: none;
  transition: color var(--transicion);
}

.sabor__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sabor:hover .sabor__enlace { color: var(--marca-oscuro); }

.sabor__media {
  position: relative; /* ancla de las flechas */
  overflow: hidden;
  background-color: var(--rosa); /* se ve mientras carga la foto */
  border-bottom: 1px solid var(--linea);
}

.sabor__foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  /* Los atributos width/height del <img> valen como CSS y anularían
     el aspect-ratio: height:auto se lo devuelve. */
  height: auto;
  object-fit: cover;
  transition: opacity 900ms ease, transform var(--transicion);
}

/* Los sabores que se hacen en dos tamaños enseñan las dos fotos, una tras
   otra. Se apilan en la misma celda del grid y solo cambia la opacidad, así
   el alto de la tarjeta no se mueve durante el cruce. El turno lo lleva
   js/carrusel.js poniendo y quitando .sabor__foto--activa. */
.sabor__carrusel { display: grid; }

.sabor__carrusel > .sabor__foto {
  grid-area: 1 / 1;
  opacity: 0;
}

.sabor__carrusel > .sabor__foto--activa { opacity: 1; }

/* Flechas a los lados de la foto. Van sobre un círculo blanco translúcido
   porque las fotos son muy claras y un trazo suelto se perdería encima. */
.sabor__flecha {
  position: absolute;
  top: 50%;
  z-index: 1; /* por encima del enlace estirado de la tarjeta */
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.82);
  color: var(--texto);
  transition: background-color var(--transicion), color var(--transicion);
}

.sabor__flecha--atras    { left: var(--esp-8); }
.sabor__flecha--adelante { right: var(--esp-8); }

.sabor__flecha:hover {
  background-color: var(--blanco);
  color: var(--marca-oscuro);
}

.sabor__flecha-icono {
  width: 18px;
  height: 18px;
}

/* Un punto por foto. El z-index los deja por encima del enlace estirado de
   la tarjeta, que si no se los comería. */
.sabor__puntos {
  position: relative;
  z-index: 1;
  display: none;
  justify-content: center;
  padding-top: var(--esp-16);
}

/* Flechas y puntos solo sirven con JS: nacen ocultos y js/carrusel.js los
   enciende poniendo .sabor--listo en la tarjeta. */
.sabor--listo .sabor__flecha { display: grid; }
.sabor--listo .sabor__puntos { display: flex; }

/* El punto mide 7px pero el botón mide 32: lo que se toca es el botón. */
.sabor__punto {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

/* Los dos puntos son del mismo color; el apagado solo baja de opacidad. En
   gris claro casi no se veía, y lo que tiene que quedar claro es que hay
   una segunda foto. */
.sabor__punto::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--marca);
  opacity: 0.3;
  transition: opacity var(--transicion), transform var(--transicion);
}

.sabor__punto:hover::before { opacity: 0.6; }

.sabor__punto--activo::before {
  opacity: 1;
  transform: scale(1.3);
}

/* Único efecto de hover: el zoom de la foto. */
.sabor:hover .sabor__foto,
.sabor:focus-within .sabor__foto {
  transform: scale(1.03);
}

.sabor__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-8);
  padding: var(--esp-24);
}

.sabor__nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.375rem; /* 22px */
  font-weight: 500;
  line-height: 1.2;
  color: var(--texto);
}

.sabor__descripcion {
  max-width: none;
  font-size: var(--t-chico); /* 14px */
  line-height: 1.5;
  color: var(--texto-suave);
}

/* Cada sabor tiene dos precios, uno por tamaño. Van en filas, con el tamaño
   a la izquierda y la cifra a la derecha, para que se comparen de un vistazo. */
.sabor__precios {
  margin-top: var(--esp-8);
  display: grid;
  gap: 6px;
}

.sabor__precio {
  display: flex;
  align-items: baseline;
  gap: var(--esp-8);
  color: var(--texto);
}

.sabor__tamano {
  flex: 1 1 auto;
  font-size: var(--t-chico);
  color: var(--texto-suave);
}

.sabor__cifra { font-weight: 500; }

/* El precio es por gelatina, no por caja: la aclaración va pegada a la cifra
   pero en gris y más chica, para que el número siga siendo lo que se lee. */
.sabor__unidad {
  font-size: var(--t-chico);
  font-weight: 400;
  color: var(--texto-suave);
}

.sabor__nota {
  max-width: none;
  margin-top: 6px;
  font-size: var(--t-chico);
  line-height: 1.4;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   3. Galería
   Fotos de producto sin texto encima. Las originales vienen en proporciones
   muy distintas (de 1:1.4 a 1:2.3), así que la rejilla las normaliza a
   cuadrado: el recorte lo hace object-fit, no el estirado.
   2 columnas en móvil, 4 a partir de 700px.
   -------------------------------------------------------------------------- */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-16);
  align-items: start; /* sin esto el grid estira cada foto al alto de su fila */
}

@media (min-width: 700px) {
  .galeria {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--esp-24);
  }
}

.galeria__foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Los atributos width/height del <img> valen como CSS y anularían
     el aspect-ratio: height:auto se lo devuelve. */
  height: auto;
  object-fit: cover;
  border-radius: var(--radio-foto);
  background-color: var(--rosa); /* se ve mientras carga la foto */
}

/* Foto muy alta cuyo motivo queda por debajo del centro: se baja el recorte
   para no cortar la rosca. */
.galeria__foto--bajo { object-position: center 65%; }