/* ==========================================================================
   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.
   -------------------------------------------------------------------------- */
/* Sin fondo propio. Antes pintaba crema, que era el mismo color de la página y
   no se notaba, pero ahora taparía el degradado del fondo justo en la mitad
   superior y dejaría una franja partida a media portada. */
.hero {
  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);
}

/* --- La descripción larga de la portada proteica ---
   La clara despacha esto con una línea y .hero__descriptor la centra sin más.
   La proteica trae tres frases del cliente, y tres frases centradas dejan los
   bordes en pico. Van justificadas y a ancho de lectura, con el bloque
   centrado dentro del hero, que es lo que sí se lee de corrido. */
.hero__texto {
  max-width: 46ch;
  text-align: justify;
  font-size: var(--t-lead);
  color: var(--texto-suave);
}

/* El remate: el nombre de la línea y su frase. Centrado y sin justificar,
   porque son dos líneas cortas que cierran y no un párrafo más. El nombre va
   en la tipografía de los títulos y en el color de marca para que se despegue
   de la frase que lleva debajo. */
.hero__lema {
  max-width: 40ch;
  margin: 0;
  font-size: var(--t-lead);
  color: var(--texto-suave);
}

.hero__lema-marca {
  display: block;
  margin-bottom: var(--esp-8);
  font-family: var(--fuente-titulo);
  font-size: 1.125rem;
  color: var(--marca);
}

/* --- El paso a la otra línea ---
   Va entre el título del menú y las tarjetas. El título ya deja --esp-40 por
   debajo, que es el hueco que separa el encabezado de la rejilla; el botón se
   mete dentro de ese hueco en vez de abrir uno propio, y se queda a --esp-24
   del título. El aire entero vuelve a abrirse abajo, antes de las tarjetas.
   El botón en sí está en css/nav.css. */
.mundo-paso {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--esp-24) - var(--esp-40));
  margin-bottom: var(--esp-40);
}

/* --------------------------------------------------------------------------
   2. Rejilla de sabores
   1 columna en móvil · 2 en tablet · 3 en escritorio
   -------------------------------------------------------------------------- */
.sabores {
  /* El alto del botón de un punto del carrusel, o sea el alto de la tira que
     va bajo la foto. Vive en la rejilla y no en .sabor__punto porque las
     tarjetas que no tienen tira necesitan medir la de sus hermanas, y desde
     dentro de una tarjeta no se llega a la de al lado. */
  --puntos-alto: 32px;

  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(--tenue); /* 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 disco translúcido porque un
   trazo suelto se perdería encima de la imagen. El disco es claro en el sitio
   claro y oscuro en el proteico, y por eso sale de --velo-foto y no de un
   blanco escrito aquí. */
.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: var(--velo-foto);
  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(--superficie);
  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; }

/* Los sabores de un solo tamaño no llevan tira, y en cuanto la rejilla pone
   dos o tres tarjetas por fila eso se ve: la vecina con carrusel baja su
   cuerpo el alto de la tira y los nombres, las descripciones y los precios de
   la fila dejan de estar a la misma altura.

   Así que se les reserva el hueco de la tira que no tienen. Cuelga de
   .sabores:has(.sabor--listo) porque sin JavaScript no hay tira en ninguna
   tarjeta y entonces reservar descuadraría la fila al revés. Y va de 600px
   para arriba porque en una sola columna no hay nada con qué alinearse y el
   hueco sería aire muerto bajo la foto. */
@media (min-width: 600px) {
  .sabores:has(.sabor--listo) .sabor:not(:has(.sabor__puntos)) .sabor__media {
    margin-bottom: calc(var(--esp-16) + var(--puntos-alto));
  }
}

/* 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: var(--puntos-alto);
  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(--tenue); /* 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%; }

/* --------------------------------------------------------------------------
   4. Variantes para cuando hay pocas piezas
   La línea proteica tiene un solo producto y dos fotos. Las rejillas de arriba
   están hechas para cuatro y para ocho, así que con tan poco dejarían la
   tarjeta arrinconada a la izquierda y las fotos diminutas.
   Van al final del archivo a propósito: las reglas de arriba viven dentro de
   media queries, que no suman especificidad, así que estas empatan con ellas y
   gana la última que se lee. Lo que se agregue después y toque .sabores o
   .galeria hay que ponerlo antes de este bloque.
   -------------------------------------------------------------------------- */

/* Un solo producto: se queda al centro y a un ancho de tarjeta, no estirado
   de lado a lado. En cuanto haya un segundo sabor se quita la clase del
   marcado y las columnas de siempre vuelven solas. */
.sabores--uno {
  grid-template-columns: minmax(0, 340px);
  justify-content: center;
}

/* Dos fotos: dos columnas siempre, en lugar de pasar a cuatro. */
@media (min-width: 700px) {
  .galeria--dos { grid-template-columns: repeat(2, 1fr); }
}