/* ═══ COLECCIÓN: escenario del estreno, fondo crema ═══ */
.coleccion { background: var(--crema); }

/* Cabecera a dos columnas: la portada de la colección a la izquierda,
   el relato a la derecha. Antes el nombre viajaba solo en la columna ancha
   y dejaba un hueco muerto debajo. */
.coleccion__cabecera {
  display: grid; gap: var(--esp-3);
  grid-template-columns: 1fr 1.1fr;
  align-items: start;
  margin-block: 0 var(--esp-4);
}

.coleccion__portada {
  display: flex; flex-direction: column; align-items: flex-start;
}

.coleccion__etiqueta { color: var(--coral); margin-bottom: var(--esp-1); }
.coleccion__nombre { color: var(--marino); }

.coleccion__nota {
  font-family: var(--fuente-mano);
  font-size: var(--paso-2);
  color: var(--coral);
  transform: rotate(-1.5deg);
  margin-top: var(--esp-2);
}
.coleccion__acciones {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--esp-2); margin-top: var(--esp-3);
}

/* El relato arranca a la altura del nombre, no de la etiqueta: así las dos
   columnas cierran a alturas parecidas y la lectura empieza en el mismo punto. */
.coleccion__historia { margin-top: var(--esp-3); }
.coleccion__historia p { font-size: var(--paso-1); font-weight: 300; }
.coleccion__historia p + p { margin-top: var(--esp-2); }
.coleccion__enlace {
  color: var(--azul-vivo); font-weight: 500;
  text-underline-offset: .2em; text-decoration-thickness: 2px;
  padding-block: .5rem;
}
.coleccion__enlace:hover { color: var(--marino); }

/* Tres columnas iguales, y no por comodidad: la primera foto es 2:3 y es la
   más alta de las tres, así que su ancho es el que fija la altura del renglón
   (ancho x 1.5). Cuando esa columna era 1.35fr el renglón se estiraba y dejaba
   a las otras dos en huecos de 1:2, donde una foto 4:5 perdía el 38% de su
   ancho por los costados. Con las tres en 1fr el hueco queda en 2:3 y el
   recorte baja al 17%. Si algún día volvés a agrandar la primera columna,
   acordate de que el precio no lo paga ella: lo pagan las otras dos. */
.coleccion__galeria {
  list-style: none; padding: 0;
  display: grid; gap: var(--esp-2);
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
.coleccion__foto img { width: 100%; height: 100%; object-fit: cover; }
.coleccion__foto {
  transition: transform var(--dur-media) var(--curva-salida), box-shadow var(--dur-media) var(--curva-salida);
}
.coleccion__foto:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--sombra-alta); }
.coleccion__foto--alta { grid-row: span 1; }

@media (max-width: 860px) {
  /* Apilado en una columna. La portada se aplana (display: contents) para
     poder meter el relato entre el nombre y la nota, y que el pedido quede
     al final: nombre, historia, dónde encontrarla, pedido. El espaciado sale
     del margen de cada pieza, por eso el gap de la grilla se anula. */
  .coleccion__cabecera { grid-template-columns: 1fr; gap: 0; }
  .coleccion__portada { display: contents; }
  .coleccion__etiqueta { order: 1; justify-self: start; }
  .coleccion__nombre   { order: 2; }
  .coleccion__historia { order: 3; margin-top: var(--esp-2); }
  .coleccion__nota     { order: 4; margin-top: var(--esp-3); }
  .coleccion__acciones { order: 5; }

  /* Carrusel con snap en móvil */
  .coleccion__galeria {
    display: flex; overflow-x: auto; gap: var(--esp-2);
    scroll-snap-type: x mandatory;
    padding-bottom: var(--esp-2);
    margin-inline: calc(50% - 50vw); padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    scrollbar-width: none;
  }
  .coleccion__galeria::-webkit-scrollbar { display: none; }
  .coleccion__foto {
    flex: 0 0 78%; scroll-snap-align: center;
    aspect-ratio: 4 / 5;
  }
}