/* ═══ ALMA EN LOS DISEÑOS: fondo hueso claro para que los trazos respiren ═══ */
.alma { background: var(--hueso); }

.alma .titulo { color: var(--marino); }
.alma .acento-mano { color: var(--coral); }

.alma__intro {
  font-size: var(--paso-1); font-weight: 300;
  max-width: 44ch;
  margin-block: var(--esp-2) var(--esp-4);
}

/* ── Tres muestras del producto terminado ──
   Mismo ancho, mismo alto y mismo recorte: son tres piezas equivalentes, no
   una secuencia. La inclinación de cada tarjeta es identidad de marca (el
   gesto de foto pegada a mano), por eso se queda. */
.alma__muestras {
  list-style: none; padding: 0;
  display: grid; gap: var(--esp-3);
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

.alma__marco { aspect-ratio: 4 / 5; }
.alma__marco img { width: 100%; height: 100%; object-fit: cover; }

.alma__muestra:nth-child(1) .alma__marco { transform: rotate(-2.5deg); }
.alma__muestra:nth-child(2) .alma__marco { transform: rotate(1.2deg); }
.alma__muestra:nth-child(3) .alma__marco { transform: rotate(-1deg); }

/* ── Historia de Luis ── */
.alma__historia {
  position: relative;
  max-width: 46rem;
  margin: var(--esp-5) auto;
  text-align: center;
  padding-inline: var(--esp-3);
  padding-top: var(--esp-4);
}
.alma__relato { font-size: var(--paso-2); font-weight: 300; line-height: 1.4; margin-inline: auto; }
.alma__relato strong { font-weight: 600; color: var(--marino); }
.alma__arte {
  margin-top: var(--esp-2);
  font-size: var(--paso-2);
  color: var(--azul);
  transform: rotate(-1.5deg);
  margin-inline: auto;
}
.alma__baile {
  top: -2.5rem; right: clamp(0rem, 4vw, 2rem);
  width: clamp(64px, 6.5vw, 96px); height: auto;
  transform: rotate(6deg); opacity: .9;
}

/* ── Galería de diseños protagonistas ── */
.alma__galeria {
  list-style: none; padding: 0;
  display: grid; gap: var(--esp-4) var(--esp-3);
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
}
.alma__galeria li { text-align: center; }
.alma__galeria img {
  width: min(100%, 17rem); height: auto;
  margin-inline: auto;
  transition: transform var(--dur-media) var(--curva-salida);
}
.alma__galeria li:nth-child(odd) img { transform: rotate(-2deg); }
.alma__galeria li:nth-child(even) img { transform: rotate(2deg); }
.alma__galeria li:hover img { transform: rotate(0deg) scale(1.06); }
.alma__galeria h3 { font-size: var(--paso-2); color: var(--marino); margin-top: var(--esp-2); }

@media (max-width: 860px) {
  /* Las tres muestras pasan a una sola columna, angostada para que la foto no
     crezca de más: siguen midiendo lo mismo entre ellas. */
  .alma__muestras { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
  .alma__galeria { grid-template-columns: repeat(2, 1fr); }
}