.morph-deluxe {
  height: 180vh;              /* altura final recomendada */
  padding-bottom: 10vh;       /* margen final */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #ffffff;
  transition: background 1s ease;
  font-family: "Schibsted Grotesk", sans-serif;
}

.md-text {
  position: sticky;
  top: 28vh;
  text-align: center;
  max-width: 900px;
  line-height: 1.1;
  transition: color 0.8s ease;
}

.md-line {
  display: block;
  font-weight: 400; /* Schibsted Grotesk tiene una excelente lectura en pesos estándar */
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: -1px;
  opacity: 0.15;
  transform: scale(0.92);
  transition:
    font-size 0.8s ease,
    font-weight 0.8s ease,
    letter-spacing 0.8s ease,
    opacity 0.8s ease,
    transform 0.8s ease;
}

.md-line.active {
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 700; /* Schibsted Grotesk bold / extrabold */
  letter-spacing: -3px;
  opacity: 1;
  transform: scale(1);
  /* Al ser fuente única, eliminamos el cambio de font-family que había antes */
}

.md-line.mid {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 500; /* Peso intermedio para el estado mid */
  opacity: 0.6;
  transform: scale(0.97);
}

/* ============================
   VARIANTE: DEGRADADO ATMOSFÉRICO
   ============================ */

.morph-deluxe.morph--degradado {
  background: linear-gradient(120deg, #ffffff, #f7f2e8);
  transition: background 1s ease;
}

/* Degradados por step */
.morph-deluxe.morph--degradado.step-1 {
  background: linear-gradient(120deg, #ffffff, #f7f2e8);
}

.morph-deluxe.morph--degradado.step-2 {
  background: linear-gradient(120deg, #f7f2e8, #e8d9b8);
}

.morph-deluxe.morph--degradado.step-3 {
  background: linear-gradient(120deg, #e8d9b8, #d2a96a);
}

.morph-deluxe.morph--degradado.step-4 {
  background: linear-gradient(120deg, #d2a96a, #b8864b);
}

/* ============================
   VARIANTE: TEXTURA EDITORIAL (IMAGEN)
   ============================ */

.morph-deluxe.morph--textura {
  background: #faf8f5 url('/assets/texturas/papel-suave.png') center/cover;
  position: relative;
}