/**
 * Bloque: iink-as-manifesto
 * Blueprint: Animales Sueltos
 * Estética: Fabrica Studio — sección blanca, texto editorial gigante Inter SemiBold
 * Regla absoluta: cero valores hardcodeados — solo var(--iink-*)
 */

/* ── Sección base — fondo blanco ──────────────────────────────────────────── */
.iink-as-manifesto {
  position: relative;
  background: var(--iink-bg);
  padding-block: var(--iink-section-padding-y);
  overflow: hidden;
}

/* ── Inner — columna con gap editorial ────────────────────────────────────── */
.iink-as-manifesto__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 56px);
  position: relative;
  z-index: 2;
}

/* ── Variantes de alineación ──────────────────────────────────────────────── */
.iink-as-manifesto--izquierda .iink-as-manifesto__contenido {
  align-items: flex-start;
  text-align: left;
}

.iink-as-manifesto--centrado .iink-as-manifesto__contenido {
  align-items: center;
  text-align: center;
}

/* ── Bloque de contenido ──────────────────────────────────────────────────── */
.iink-as-manifesto__contenido {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 40px);
}

/* ── Cita / Texto del manifiesto ──────────────────────────────────────────── */
.iink-as-manifesto__cita {
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Contenedor por línea — overflow hidden oculta el texto antes del reveal */
.iink-as-manifesto__linea-wrap {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}

/* La línea real — Inter SemiBold gigante — GSAP anima translateY(110%→0) */
.iink-as-manifesto__linea {
  display: block;
  font-family: var(--iink-font-heading);
  font-size: var(--iink-text-xl);
  font-weight: var(--iink-font-weight-bold);
  letter-spacing: var(--iink-ls-heading);
  line-height: var(--iink-lh-heading);
  color: var(--iink-text);
  transform: translateY(110%); /* estado inicial — GSAP lleva a translateY(0) */
}

/* ── Párrafo secundario ────────────────────────────────────────────────────── */
.iink-as-manifesto__secundario {
  max-width: 600px;
  /* Estado inicial GSAP: opacity 0 → 1 */
  opacity: 0;
}

.iink-as-manifesto--centrado .iink-as-manifesto__secundario {
  margin-inline: auto;
}

.iink-as-manifesto__parrafo {
  font-family: var(--iink-font-body);
  font-size: var(--iink-text-md);
  font-weight: 400;
  letter-spacing: var(--iink-ls-body);
  line-height: var(--iink-lh-body);
  color: var(--iink-text);
  opacity: 0.6;
  margin: 0;
}

/* ── Número decorativo de fondo ────────────────────────────────────────────── */
.iink-as-manifesto__num-bg {
  position: absolute;
  bottom: -0.15em;
  right: -0.05em;
  z-index: 1;
  font-family: var(--iink-font-heading);
  font-size: clamp(18rem, 35vw, 40rem);
  font-weight: var(--iink-font-weight-bold);
  line-height: 1;
  letter-spacing: var(--iink-ls-heading);
  color: var(--iink-text);
  opacity: 0.025;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

/* ── RESPONSIVE — mobile first ────────────────────────────────────────────── */

/* Mobile 480px — simplificar sin distracciones */
@media (max-width: 480px) {
  .iink-as-manifesto__inner {
    gap: clamp(24px, 6vw, 32px);
  }

  .iink-as-manifesto__num-bg {
    display: none;
  }

  .iink-as-manifesto__linea {
    /* El token --iink-text-xl ya usa clamp internamente — el mobile se reduce solo */
    line-height: var(--iink-lh-heading);
  }
}

/* Tablet 768px */
@media (min-width: 768px) {
  .iink-as-manifesto__linea {
    line-height: calc(var(--iink-lh-heading) * 0.95);
  }
}