/* ==========================================================================
   content.css — secciones del home por debajo de la escena
   ========================================================================== */

/* El escenario del hero está posicionado (lo pinnea ScrollTrigger), así que
   pintaría por encima de cualquier hermano estático. Todo lo que va después
   se posiciona explícitamente para quedar por delante. */
.statement,
.materials,
.work,
.process-brief,
.quote,
.cta-block,
.footer,
.marquee {
  position: relative;
  z-index: 1;
}

/* ---- Declaración + cifras -------------------------------------------------- */

.statement {
  background: var(--ink);
  color: var(--light);
  padding: var(--section-y) 0;
}

.statement__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(38px, 6vw, 110px);
  align-items: start;
}

.statement__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-top: 26px;
}

.statement__title em {
  font-style: italic;
  color: var(--brass-light);
}

.statement__body {
  margin-top: 34px;
  max-width: 54ch;
  font-size: var(--fs-lead);
  line-height: 1.68;
  color: rgba(242, 237, 228, 0.72);
}

.statement__body + .statement__body { margin-top: 20px; }

.stats {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(242, 237, 228, 0.16);
}

.stat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 20px;
  padding: clamp(22px, 3vw, 34px) 0;
  border-bottom: 1px solid rgba(242, 237, 228, 0.16);
}

.stat__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  min-width: 3.2ch;
}

.stat__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.68);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .statement__grid { grid-template-columns: 1fr; }
  .stats { margin-top: 20px; }
}

/* ---- Materiales: media fija + lista que se recorre --------------------------- */

.materials {
  background: var(--plaster);
  padding: var(--section-y) 0;
}

.materials__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(34px, 6vw, 96px);
  align-items: start;
}

/* `position: sticky` también es el bloque contenedor de las imágenes
   apiladas y del índice, que van en absoluto. */
.materials__media {
  position: sticky;
  top: calc(var(--nav-height) + 6vh);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--plaster-warm);
}

.materials__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.85s var(--ease), transform 1.5s var(--ease);
}

.materials__media img.is-active {
  opacity: 1;
  transform: scale(1);
}

.materials__index {
  position: absolute;
  left: 20px; bottom: 18px;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--light);
  mix-blend-mode: difference;
  font-variant-numeric: tabular-nums lining-nums;
}

.materials__list { display: flex; flex-direction: column; }

/* Marcar el material activo bajando la opacidad de los demás dejaba el texto
   por debajo del contraste mínimo (0,42 de opacidad sobre un gris ya suave).
   El estado activo se indica ahora con una barra de latón y el color del
   nombre; el cuerpo de texto se lee igual de bien en los cuatro. */
.material {
  position: relative;
  padding: clamp(30px, 4.4vw, 56px) 0;
  border-top: 1px solid var(--ink-faint);
}

.material::before {
  content: '';
  position: absolute;
  left: -20px;
  top: clamp(34px, 4.6vw, 60px);
  width: 2px;
  height: 30px;
  background: var(--brass);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.55s var(--ease);
}

.material.is-active::before { transform: scaleY(1); }

.material:last-child { border-bottom: 1px solid var(--ink-faint); }

.material__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.material__num {
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  color: var(--brass-ink);
}

.material__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.1;
  color: var(--ink-mute);
  transition: color 0.55s var(--ease);
}

.material.is-active .material__name { color: var(--ink); }

.material__body {
  margin-top: 14px;
  max-width: 48ch;
  color: var(--ink-mute);
  line-height: 1.68;
}

.material__spec {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.material__spec span::before {
  content: '—';
  margin-right: 8px;
  opacity: 0.6;
}

@media (max-width: 900px) {
  .materials__grid { grid-template-columns: 1fr; }
  .materials__media { position: relative; top: auto; aspect-ratio: 3 / 2; }
}

/* ---- Trabajo destacado ------------------------------------------------------- */

.work { padding: var(--section-y) 0; background: var(--paper); }

.work__list { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 130px); }

.work-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 70px);
  align-items: center;
}

.work-card:nth-child(even) .work-card__media { order: 2; }

/* Igual que .project__media: es un <a> y necesita `display:block` para que
   `aspect-ratio` tenga efecto. */
.work-card__media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--plaster-warm);
}

.work-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

.work-card:hover .work-card__media img { transform: scale(1.045); }

.work-card__tag {
  position: absolute;
  left: 16px; top: 16px;
  z-index: 2;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(20, 18, 15, 0.62);
  backdrop-filter: blur(6px);
  color: var(--light);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.work-card__index {
  font-size: var(--fs-micro);
  letter-spacing: 0.26em;
  color: var(--brass-ink);
}

.work-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 16px 0 0;
}

.work-card__body {
  margin-top: 18px;
  max-width: 44ch;
  color: var(--ink-mute);
  line-height: 1.68;
}

.work-card__meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-faint);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.work-card__link { margin-top: 30px; display: inline-block; }

@media (max-width: 860px) {
  .work-card { grid-template-columns: 1fr; }
  .work-card:nth-child(even) .work-card__media { order: 0; }
}

/* ---- Bloque de proceso resumido ----------------------------------------------- */

.process-brief {
  background: var(--sage-dark);
  color: var(--light);
  padding: var(--section-y) 0;
  overflow: hidden;
}

.process-brief__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(34px, 6vw, 100px);
  align-items: center;
}

.process-brief__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.process-brief__media img {
  width: 100%; height: 120%;
  object-fit: cover;
  will-change: transform;
}

.process-steps { margin-top: 34px; }

.process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid rgba(242, 237, 228, 0.16);
}

.process-step:last-child { border-bottom: 1px solid rgba(242, 237, 228, 0.16); }

.process-step__num {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--brass-light);
  font-variant-numeric: tabular-nums;
}

.process-step__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.process-step__body {
  margin-top: 7px;
  color: rgba(242, 237, 228, 0.66);
  line-height: 1.62;
  max-width: 46ch;
}

@media (max-width: 900px) {
  .process-brief__grid { grid-template-columns: 1fr; }
  .process-brief__media { aspect-ratio: 3 / 2; }
}

/* ---- Testimonio ------------------------------------------------------------------ */

.quote {
  padding: clamp(80px, 11vw, 170px) 0;
  background: var(--plaster);
  text-align: center;
}

.quote__mark {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 8vw, 6rem);
  line-height: 0.4;
  color: var(--brass-ink);
  opacity: 0.5;
  display: block;
  margin-bottom: 26px;
}

.quote__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  line-height: 1.28;
  letter-spacing: -0.012em;
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}

.quote__author {
  margin-top: 34px;
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
}