/* ==========================================================================
   VESTA IM — Hoja de estilos principal
   --------------------------------------------------------------------------
   Índice
   01. Tokens de diseño (variables)
   02. Reset y base
   03. Utilidades
   04. Navegación
   05. Hero
   06. Tipografía de sección
   07. Bloque: La firma
   08. Bloque: Pilares
   09. Bloque: Qué hacemos (método)
   10. Bloque: Encuentros
   11. Bloque: Activos (ficha técnica)
   12. Bloque: Dúo fotográfico
   13. Bloque: Análisis
   14. Bloque: Contacto y pie
   15. Media queries
   16. Interacciones avanzadas
   ========================================================================== */


/* 01. TOKENS DE DISEÑO
   ========================================================================== */
:root {
  /* Paleta — dos colores, los del logotipo.
     Toda la jerarquía se construye con opacidad, no con más tonos. */
  --c-ink:   #2E2620;
  --c-paper: #F7F6F3;

  /* Derivados sobre fondo oscuro */
  --c-paper-88: rgba(247, 246, 243, .88);
  --c-paper-62: rgba(247, 246, 243, .62);
  --c-paper-44: rgba(247, 246, 243, .44);
  --c-paper-20: rgba(247, 246, 243, .20);
  --c-paper-12: rgba(247, 246, 243, .12);

  /* Derivados sobre fondo claro */
  --c-ink-72: rgba(46, 38, 32, .72);
  --c-ink-52: rgba(46, 38, 32, .52);
  --c-ink-38: rgba(46, 38, 32, .38);
  --c-ink-16: rgba(46, 38, 32, .16);
  --c-ink-10: rgba(46, 38, 32, .10);

  /* Tipografía */
  --font-base: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --fw-light:  300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   600;

  /* Escala tipográfica fluida */
  --fs-hero:    clamp(1.55rem, 3.5vw, 3rem);
  --fs-h2:      clamp(1.7rem, 3.9vw, 3.2rem);
  --fs-h2-lg:   clamp(2rem, 6vw, 5rem);
  --fs-body:    .95rem;
  --fs-small:   .92rem;
  --fs-label:   .71rem;

  /* Espaciado */
  --gutter:      clamp(20px, 4.2vw, 74px);
  --section-y:   clamp(72px, 12vh, 146px);
  --nav-height:  74px;

  /* Movimiento */
  --ease-out:  cubic-bezier(.22, .7, .3, 1);
  --ease-slow: cubic-bezier(.2, .7, .3, 1);
}


/* 02. RESET Y BASE
   ========================================================================== */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* El anclaje deja la sección a la altura del nav, no pegada al borde */
  scroll-padding-top: var(--nav-height);
  scroll-snap-type: y proximity;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-base);
  font-weight: var(--fw-light);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}


/* 03. UTILIDADES
   ========================================================================== */
.section        { padding: var(--section-y) var(--gutter); }
.section--dark  { background: var(--c-ink); color: var(--c-paper); }
.section--dark .eyebrow { color: var(--c-paper-44); }

/* Ritmo vertical y anclaje
   --------------------------------------------------------------------------
   Las secciones principales ocupan la pantalla completa y se anclan al pasar
   cerca de su borde. Siempre min-height, nunca height: si el contenido pide
   más alto que la ventana —un portátil bajo, una tipografía grande— la
   sección crece en lugar de recortarlo.

   El anclaje es "proximity" y no "mandatory": ancla cuando el usuario se
   queda cerca del límite y le deja el scroll libre en el resto. */
.intro-section,
.events,
.analysis,
.contact {
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* "01 — La firma" es una sola pantalla: el texto arriba con la altura que
   pida, y los pilares debajo absorbiendo lo que sobre con 1fr. El anclaje
   vive solo aquí; ni el bloque de texto ni los pilares lo llevan, o la
   sección se partiría en dos pantallas. */
.intro-section { display: grid; grid-template-rows: auto 1fr; }

/* Centrado vertical: sin él, el contenido corto quedaría arriba con un
   hueco muerto debajo. "safe" es lo que evita que se corte: si el contenido
   llega a superar la pantalla, un center a secas desbordaría también por
   arriba y se metería bajo el nav; con safe vuelve a alinear al inicio. */
.events,
.analysis,
.contact { display: grid; align-content: safe center; }
/* El correo es un enlace magnético: como celda de rejilla se estiraría a
   todo el ancho y arrastraría con él su área de cursor. */
.contact__mail { justify-self: start; }

/* Ocupan pantalla pero NO se anclan: el método porque el anclaje vertical
   pelearía con su recorrido horizontal, y la ficha técnica porque su tabla
   puede necesitar más de una pantalla en portátiles pequeños. */
.method,
.assets { min-height: 100svh; }
.assets { display: grid; align-content: safe center; }

.method,
.method-track-wrap,
.method-track-sticky,
.assets,
.footer { scroll-snap-align: none; }

.eyebrow {
  font-size: .70rem;
  font-weight: var(--fw-bold);
  letter-spacing: .10em;
  color: var(--c-ink-52);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

h2 {
  font-weight: var(--fw-light);
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -.038em;
}
h2 b { font-weight: var(--fw-bold); }

p { max-width: 56ch; }
.text-body { font-size: var(--fs-body); line-height: 1.70; }


/* 04. NAVEGACIÓN
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 19px var(--gutter);
  pointer-events: none;
}
.nav > * { pointer-events: auto; position: relative; z-index: 1; }

/* Degradado de legibilidad; se invierte según el fondo de la sección.
   El degradado por sí solo no separaba el menú del contenido sobre fondo
   claro —papel sobre papel—, así que la banda desenfoca además lo que pasa
   por debajo. La máscara la desvanece antes de llegar al borde inferior:
   sigue siendo una banda que se disuelve, no una caja. */
.nav::before {
  content: ""; position: absolute; inset: 0 0 auto 0; pointer-events: none;
  height: calc(100% + 30px);
  background: linear-gradient(180deg,
    rgba(46,38,32,.94) 0%, rgba(46,38,32,.66) 46%, rgba(46,38,32,0) 100%);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
  transition: background .5s ease;
}
.nav.is-light::before {
  background: linear-gradient(180deg,
    rgba(247,246,243,.96) 0%, rgba(247,246,243,.74) 46%, rgba(247,246,243,0) 100%);
}

/* Sin backdrop-filter el degradado carga solo con el contraste */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav::before {
    background: linear-gradient(180deg,
      rgba(46,38,32,.97) 0%, rgba(46,38,32,.80) 52%, rgba(46,38,32,0) 100%);
  }
  .nav.is-light::before {
    background: linear-gradient(180deg,
      rgba(247,246,243,.99) 0%, rgba(247,246,243,.88) 52%, rgba(247,246,243,0) 100%);
  }
}

.nav__logo img { height: 23px; width: auto; }
.nav__logo .logo--dark { display: none; }
.nav.is-light .nav__logo .logo--light { display: none; }
.nav.is-light .nav__logo .logo--dark  { display: block; }

.nav__menu { display: flex; gap: clamp(16px, 2.1vw, 32px); list-style: none; align-items: center; }
.nav__menu a {
  font-size: .79rem; font-weight: var(--fw-normal);
  text-decoration: none; color: var(--c-paper); opacity: .78;
  transition: opacity .22s, color .5s ease; position: relative;
}
.nav.is-light .nav__menu a { color: var(--c-ink); opacity: .86; }
.nav__menu a::after {
  content: ""; position: absolute; inset: auto 0 -4px 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}
.nav__menu a:hover { opacity: 1; }
.nav__menu a:hover::after { transform: scaleX(1); }

.nav__toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: 4px;
  font-family: var(--font-base); font-size: .79rem; color: var(--c-paper);
}
.nav.is-light .nav__toggle { color: var(--c-ink); }


/* 05. HERO
   ========================================================================== */
.hero {
  position: relative; height: 100svh; min-height: 580px;
  overflow: hidden; background: var(--c-ink);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img,
.hero__media video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(46,38,32,.46) 0%, rgba(46,38,32,.10) 38%, rgba(46,38,32,.86) 100%);
}

.hero__content {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 0 var(--gutter) clamp(52px, 9vh, 96px);
  display: flex; align-items: center; gap: clamp(20px, 3vw, 46px);
}
.hero__isotype {
  height: clamp(74px, 9.4vw, 142px); width: auto; flex: 0 0 auto;
  opacity: 0; transform: translateY(16px);
}
.hero__title {
  font-weight: var(--fw-light); font-size: var(--fs-hero);
  line-height: 1.1; letter-spacing: -.038em; color: var(--c-paper);
  max-width: 20ch; opacity: 0; transform: translateY(16px);
}
.hero__title b { font-weight: var(--fw-bold); }

/* Entrada escalonada tras el preloader */
.hero.is-ready .hero__isotype { animation: rise .95s var(--ease-out) .12s forwards; }
.hero.is-ready .hero__title   { animation: rise .95s var(--ease-out) .28s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }


/* 06. PRELOADER Y PROGRESO
   ========================================================================== */
.preloader {
  position: fixed; inset: 0; z-index: 900; background: var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform 1.05s cubic-bezier(.76, 0, .24, 1);
}
.preloader.is-done { transform: translateY(-101%); }
.preloader img {
  width: clamp(96px, 11vw, 150px);
  opacity: 0; animation: fade-in .8s ease .15s forwards;
}
@keyframes fade-in { to { opacity: 1; } }

.scroll-progress {
  position: fixed; inset: 0 auto auto 0; height: 2px; width: 0;
  background: var(--c-ink); z-index: 300;
}


/* 07. BLOQUE: LA FIRMA
   --------------------------------------------------------------------------
   Titular a la izquierda, párrafos a la derecha, en la misma banda.
   Sin envoltorios: los cuatro hijos se colocan directamente en la rejilla.

     fila 1   eyebrow   │
     fila 2   h2        │ párrafo 1
     fila 3   (h2)      │ párrafo 2

   El eyebrow ocupa su propia fila, así que el primer párrafo arranca a la
   altura del h2 y no a la del eyebrow. El h2 abarca las filas 2 y 3; la
   tercera es 1fr para que, si el titular fuese más alto que los párrafos,
   el sobrante vaya debajo del segundo párrafo y no entre ambos.

   El padding inferior es el único espacio que separa esta sección de los
   pilares: .pillars va a sangre y sin padding propio.
   ========================================================================== */
.intro {
  padding: clamp(80px, 11vh, 130px) var(--gutter) clamp(28px, 4vh, 48px);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(32px, 6vw, 90px);
  row-gap: 14px;
  align-items: start; align-content: safe center;
}
.intro .eyebrow { grid-column: 1; grid-row: 1; display: block; margin-bottom: 8px; }
.intro h2       { grid-column: 1; grid-row: 2 / span 2; max-width: 15ch; margin-bottom: 0; }
.intro p        { grid-column: 2; max-width: none; margin: 0; }
.intro p:first-of-type { grid-row: 2; }
.intro p:last-of-type  { grid-row: 3; }


/* 08. BLOQUE: PILARES
   --------------------------------------------------------------------------
   Cuatro fotografías a sangre, de borde a borde de la ventana, en una sola
   fila de celdas idénticas (25% cada una). La sección rompe el ancho del
   contenedor con margin-inline negativo.

   En reposo las cuatro pesan lo mismo: blanco y negro, número y título
   siempre legibles sobre un velo degradado desde el borde inferior. Al pasar
   el cursor una sola recupera el color, el velo se intensifica y el párrafo
   se despliega bajo el título con grid-template-rows 0fr → 1fr, de modo que
   la altura se anima sin conocer de antemano la longitud del texto.
   ========================================================================== */
.pillars {
  /* Full bleed: la sección anula el padding que traía y se estira hasta los
     bordes del documento. <main> no aporta padding lateral, así que el 100%
     ya llega a ambos bordes; no se usa 100vw porque incluye el ancho de la
     barra de scroll y recortaría unos píxeles de la primera y la última. */
  margin-inline: 0;
  width: 100%; max-width: none;
  padding: 0;

  display: grid; grid-template-columns: repeat(4, 25%);
  /* La altura la manda la fila 1fr del contenedor. Este mínimo es el suelo:
     si la ventana es tan baja que no caben, la sección crece en vez de
     aplastarlos. */
  min-height: 380px;
  background: var(--c-ink);
}

.pillar {
  position: relative; overflow: hidden; isolation: isolate;
  min-width: 0; background: var(--c-ink); cursor: default;
}
/* Filete de un píxel entre celdas. Con box-sizing: border-box el ancho de
   la celda sigue siendo exactamente el 25%. */
.pillar + .pillar { border-left: 1px solid var(--c-paper); }
.pillar:focus-visible { outline: 2px solid var(--c-paper); outline-offset: -6px; }

/* Fotografía */
.pillar__media { position: absolute; inset: 0; display: block; }
.pillar__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(.94);
  transform: scale(1.03);
  transition: filter .7s ease, transform 1.1s var(--ease-slow);
}

/* Velo en reposo — degradado desde abajo, nunca plano sobre toda la imagen */
.pillar::before,
.pillar::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.pillar::before {
  background: linear-gradient(
    to top,
    rgba(46, 38, 32, .88) 0%,
    rgba(46, 38, 32, .44) 26%,
    rgba(46, 38, 32, 0)   58%
  );
}
/* Velo reforzado — sube más arriba, pero también se extingue antes del borde */
.pillar::after {
  background: linear-gradient(
    to top,
    rgba(46, 38, 32, .96) 0%,
    rgba(46, 38, 32, .78) 34%,
    rgba(46, 38, 32, .30) 70%,
    rgba(46, 38, 32, 0)   100%
  );
  opacity: 0; transition: opacity .5s ease;
}

/* Número y título — abajo a la izquierda, siempre visibles */
.pillar__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(24px, 2.2vw, 40px);
  color: var(--c-paper);
}
.pillar__index {
  display: block; font-size: .70rem; font-weight: var(--fw-bold);
  letter-spacing: .10em; color: var(--c-paper-62); margin-bottom: 10px;
  transition: color .45s ease;
}
.pillar__title {
  font-size: clamp(1.2rem, 1.45vw, 1.4rem); font-weight: var(--fw-medium);
  letter-spacing: -.022em; line-height: 1.2; color: var(--c-paper);
}

/* Párrafo — se despliega hacia abajo sin altura conocida */
.pillar__reveal {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--ease-slow);
}
.pillar__text {
  overflow: hidden; min-height: 0;
  font-size: .88rem; line-height: 1.66; color: var(--c-paper-88);
  max-width: 42ch;
  opacity: 0; transform: translateY(8px);
  transition: opacity .38s ease, transform .55s var(--ease-slow);
}
.pillar__text::before { content: ''; display: block; height: 14px; }

/* Estado activo — cursor o foco de teclado */
.pillar:hover .pillar__media img,
.pillar:focus-visible .pillar__media img { filter: none; transform: scale(1.07); }

.pillar:hover::after,
.pillar:focus-visible::after { opacity: 1; }

.pillar:hover .pillar__index,
.pillar:focus-visible .pillar__index { color: var(--c-paper); }

.pillar:hover .pillar__reveal,
.pillar:focus-visible .pillar__reveal { grid-template-rows: 1fr; }

.pillar:hover .pillar__text,
.pillar:focus-visible .pillar__text { opacity: 1; transform: none; transition-delay: .08s; }

/* Sin cursor (táctil): el párrafo se muestra siempre */
@media (hover: none) {
  .pillar { height: 62vh; min-height: 420px; }
  .pillar::after { opacity: 1; }
  .pillar__media img { filter: grayscale(.25) contrast(1.02); transform: none; }
  .pillar__reveal { grid-template-rows: 1fr; }
  .pillar__text { opacity: 1; transform: none; }
}

/* Dos columnas */
@media (max-width: 900px) {
  /* Texto en una columna y pilares en 2x2: ya no cabe en una pantalla, así
     que la sección deja de estar limitada y crece con su contenido. */
  .intro-section { min-height: 0; grid-template-rows: auto auto; }
  .pillars { grid-template-columns: repeat(2, 50%); }
  .pillar { height: 54vh; min-height: 380px; }
  .pillar:nth-child(odd) { border-left: 0; }
  .pillar:nth-child(n + 3) { border-top: 1px solid var(--c-paper); }
}

/* Columna única */
@media (max-width: 560px) {
  .pillars { grid-template-columns: 100%; }
  .pillar { height: 46vh; min-height: 320px; border-left: 0; }
  .pillar + .pillar { border-top: 1px solid var(--c-paper); }
  .pillar__body { padding: clamp(20px, 5vw, 30px); }
}


/* 09. BLOQUE: QUÉ HACEMOS (MÉTODO)
   --------------------------------------------------------------------------
   El proceso es una secuencia temporal, así que se recorre en horizontal: la
   sección se queda pegada arriba y el scroll vertical traslada el track hacia
   la izquierda (ver methodTrack en assets/js/main.js).

   Lo que se define aquí abajo es el estado APILADO, que es el que vale sin
   JS, por debajo de 860px y con prefers-reduced-motion. El modo horizontal
   vive entero bajo .method.is-horizontal, clase que solo añade el JS cuando
   procede: si el script no llega, la sección sigue siendo legible.

   Sin cajas ni marcos: los pasos se separan por espacio.
   ========================================================================== */
.method__header { padding: var(--section-y) var(--gutter) clamp(30px, 5vh, 56px); }
.method__header h2 { max-width: 16ch; margin-top: 18px; }
.method__header p {
  margin-top: 16px; max-width: 40ch;
  color: var(--c-paper-62); font-size: .94rem; line-height: 1.72;
}

.method-track {
  display: grid; gap: clamp(44px, 7vh, 88px);
  padding: 0 var(--gutter) var(--section-y);
}

.method__num {
  display: block; line-height: 1; letter-spacing: -.03em;
  font-size: clamp(3rem, 6vw, 6rem); font-weight: var(--fw-light);
  color: var(--c-paper-20);
}
.method__rule {
  display: block; height: 1px; background: var(--c-paper-20);
  margin: clamp(16px, 2.4vh, 28px) 0 clamp(22px, 3.6vh, 42px);
}
.method__verb {
  font-size: clamp(2.2rem, 4.5vw, 4rem); font-weight: 600;
  line-height: 1.04; letter-spacing: -.035em;
}
.method__line {
  margin-top: clamp(12px, 2vh, 20px); max-width: 30ch;
  font-size: clamp(.95rem, 1.15vw, 1.08rem); line-height: 1.6; opacity: .7;
}

/* El indicador de avance y la fotografía de fondo solo existen en el
   recorrido horizontal: apilado se mantiene el bloque sobre tinta plana. */
.method__progress,
.method__bg { display: none; }


/* 09.1 MODO HORIZONTAL
   --------------------------------------------------------------------------
   Tres pasos, cada uno a pantalla completa (100vw x 100vh): solo se ve uno a
   la vez. El sticky ya no lleva padding — el paso va a sangre con su foto —,
   así que el hueco que deja la cabecera lo reserva .method__inner, que es
   quien centra el texto en lo que queda libre.

   El alto del contenedor son 260vh y no lo toca el JS: el recorrido vertical
   (160vh) es más corto que el horizontal (200vw), de modo que la secuencia
   avanza más rápido que el scroll. Los tres pasos se completan igual antes de
   soltarse, porque la traslación se calcula sobre p, no sobre píxeles.
   ========================================================================== */
.method.is-horizontal .method-track-wrap { position: relative; height: 260vh; }
.method.is-horizontal {
  /* Aire entre la cabecera y el track, y reserva para el indicador de abajo.
     Se declaran como variables porque los usan dos reglas: el padding del
     sticky y la altura máxima del paso. Si divergen, el paso desborda su
     caja y se sube encima de la cabecera. */
  --method-gap-top: clamp(20px, 3.5vh, 44px);
  --method-gap-bottom: clamp(56px, 8vh, 82px);
}
.method.is-horizontal .method-track-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: stretch; padding: 0;
}

.method.is-horizontal .method__header {
  position: absolute; z-index: 2;
  top: clamp(80px, 11vh, 116px); left: var(--gutter);
  max-width: min(44ch, 54vw); padding: 0;
}
.method.is-horizontal .method__header h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.4rem); margin-top: 14px;
}
.method.is-horizontal .method__header p { margin-top: 14px; max-width: 36ch; }

/* Sin gap ni padding: cualquier hueco entre pasos dejaría asomar al vecino y
   se perdería el "uno por pantalla". */
.method.is-horizontal .method-track {
  display: flex; gap: 0; padding: 0; will-change: transform;
}
.method.is-horizontal .method__step {
  flex: 0 0 100vw; width: 100vw; height: 100vh;
  position: relative; overflow: hidden; isolation: isolate;
}

/* Fotografía de fondo — en blanco y negro, bajo un velo de tinta al 82%.
   Las tres se repiten con otras secciones, así que cada una entra por un
   encuadre distinto para que no se reconozca como la misma toma. */
.method.is-horizontal .method__bg {
  display: block; position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.method.is-horizontal .method__step:nth-child(1) .method__bg { object-position: 18% 100%; }
.method.is-horizontal .method__step:nth-child(2) .method__bg { object-position: 88% 12%; }
.method.is-horizontal .method__step:nth-child(3) .method__bg { object-position: 0% 42%; }

.method.is-horizontal .method__step::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: rgba(46, 38, 32, .82);
}

/* El texto se centra en lo que queda entre la cabecera y el indicador.
   Es una rejilla para poder alinear número y verbo por su línea base
   (align-items: baseline) y a la vez centrar la fila (align-content). */
.method.is-horizontal .method__inner {
  position: absolute; z-index: 2;
  inset: calc(var(--method-head, 250px) + var(--method-gap-top))
         0 var(--method-gap-bottom) 0;
  padding-left: var(--gutter);
  display: grid; grid-template-columns: minmax(0, auto) 1fr;
  align-content: safe center; align-items: baseline;
  column-gap: clamp(24px, 4vw, 72px);
}
.method.is-horizontal .method__text { grid-column: 1; grid-row: 1; }

/* El número es textura, no dato: masa tipográfica al 9% que puede salirse
   por el borde derecho. El recorte lo hace el overflow del paso. */
.method.is-horizontal .method__num {
  grid-column: 2; grid-row: 1; justify-self: end;
  margin-right: calc(var(--gutter) * -1);
  font-size: clamp(9rem, 22vw, 20rem); font-weight: 200;
  line-height: .8; letter-spacing: -.04em;
  color: var(--c-paper); opacity: .09;
}

.method.is-horizontal .method__rule {
  width: 90px; margin: 0 0 clamp(18px, 2.6vh, 30px);
  background: var(--c-paper-20);
}
.method.is-horizontal .method__verb {
  font-size: clamp(3rem, 7vw, 6.5rem); font-weight: 600; letter-spacing: -.04em;
}
.method.is-horizontal .method__line {
  margin-top: 24px; max-width: 42ch;
  font-size: clamp(1rem, 1.5vw, 1.3rem); opacity: .72;
}

/* Entrada del paso activo. La foto y el número no se animan. */
.method.is-horizontal .method__verb,
.method.is-horizontal .method__line {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--ease-slow), transform .7s var(--ease-slow);
}
.method.is-horizontal .method__step.is-active .method__verb { opacity: 1; transform: none; }
.method.is-horizontal .method__step.is-active .method__line { opacity: .72; transform: none; }

.method.is-horizontal .method__progress {
  display: block; position: absolute; z-index: 2;
  left: var(--gutter); right: var(--gutter);
  bottom: clamp(26px, 4vh, 44px);
  height: 1px; background: var(--c-paper-12);
}
.method.is-horizontal .method__progress i {
  display: block; height: 100%; background: var(--c-paper);
  transform: scaleX(0); transform-origin: left center;
}


/* 10. BLOQUE: ENCUENTROS
   ========================================================================== */
.events { padding: var(--section-y) var(--gutter) clamp(48px, 8vh, 96px); }
.events__header {
  display: grid; grid-template-columns: 1fr minmax(0, 40ch);
  gap: clamp(24px, 4vw, 80px); align-items: end;
  margin-bottom: clamp(36px, 5.4vw, 68px);
}
.events h2 { max-width: 17ch; margin-top: 20px; }
.events__header p { font-size: .95rem; line-height: 1.72; opacity: .82; }

.events__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--c-ink-16);
}
.event {
  background: var(--c-paper);
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.4vw, 30px);
}
.event__kind {
  display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-ink-52); font-weight: var(--fw-bold); margin-bottom: 13px;
}
.event__title {
  display: block; font-size: clamp(1.02rem, 1.7vw, 1.22rem);
  font-weight: var(--fw-medium); letter-spacing: -.022em; margin-bottom: 10px;
}
.event__text { font-size: .92rem; line-height: 1.66; opacity: .8; display: block; }

.events__note {
  margin-top: clamp(30px, 4vw, 46px); font-size: .90rem; line-height: 1.72;
  max-width: 60ch; opacity: .72;
  padding-left: 16px; border-left: 1px solid var(--c-ink-38);
}


/* 11. BLOQUE: ACTIVOS (FICHA TÉCNICA)
   ========================================================================== */
.assets__inner {
  display: grid; grid-template-columns: minmax(0, 32ch) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 92px); align-items: start;
}
.assets h2 { margin-top: 18px; }

.spec { width: 100%; border-collapse: collapse; }
.spec tr { border-bottom: 1px solid var(--c-ink-16); }
.spec tr:first-child { border-top: 1px solid var(--c-ink-16); }
.spec th {
  text-align: left; font-weight: var(--fw-bold); font-size: var(--fs-label);
  letter-spacing: .11em; text-transform: uppercase; color: var(--c-ink-52);
  padding: 16px 22px 16px 0; width: 28%; vertical-align: top; white-space: nowrap;
}
.spec td { padding: 16px 0; font-size: .94rem; line-height: 1.64; }


/* 12. BLOQUE: DÚO FOTOGRÁFICO
   ========================================================================== */
.duo {
  display: grid; grid-template-columns: 53% 47%; align-items: start;
  gap: clamp(16px, 2.6vw, 40px);
  padding: 0 var(--gutter) clamp(70px, 11vh, 138px);
}
.duo__second { padding-top: clamp(46px, 9vw, 138px); }
.duo__caption {
  font-size: .73rem; line-height: 1.6; color: var(--c-ink-52); margin-top: 11px;
  letter-spacing: .11em; text-transform: uppercase; font-weight: var(--fw-medium);
}


/* 13. BLOQUE: ANÁLISIS
   ========================================================================== */
.analysis__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42ch);
  gap: clamp(26px, 5vw, 92px); align-items: start;
}
.analysis p { color: var(--c-paper-62); font-size: .97rem; line-height: 1.74; }
.analysis p + p { margin-top: 13px; }


/* 14. BLOQUE: CONTACTO Y PIE
   ========================================================================== */
/* Con el contenido centrado, el padding superior grande ya no hace falta */
.contact { padding: clamp(48px, 7vh, 88px) var(--gutter) clamp(40px, 6vh, 66px); }
.contact h2 {
  font-size: var(--fs-h2-lg); letter-spacing: -.05em;
  max-width: 12ch; line-height: .96; margin: 22px 0 34px;
}
.contact__mail {
  font-size: clamp(1.08rem, 2.3vw, 1.62rem); font-weight: var(--fw-medium);
  color: var(--c-ink); text-decoration: none; letter-spacing: -.03em;
  border-bottom: 1px solid var(--c-ink); padding-bottom: 4px;
  transition: color .22s;
}
.contact__mail:hover { color: var(--c-ink-52); }
.contact__note {
  margin-top: 42px; font-size: .90rem; line-height: 1.72; max-width: 46ch; opacity: .76;
}

.footer { padding: 25px var(--gutter) 32px; border-top: 1px solid var(--c-ink-16); }
.footer__row {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--c-ink-52); font-weight: var(--fw-medium);
}
.footer__legal {
  font-size: .72rem; line-height: 1.66; max-width: 66ch; margin-top: 20px; opacity: .52;
}


/* 15. MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1020px) {
  .events__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .assets__inner,
  .analysis__inner,
  .events__grid { grid-template-columns: 1fr; }
  /* Columna única: eyebrow, titular y párrafos apilados.
     20 px del titular al primer párrafo (14 de row-gap + 6 de margen). */
  .intro { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; column-gap: 0; }
  .intro .eyebrow,
  .intro h2,
  .intro p,
  .intro p:first-of-type,
  .intro p:last-of-type { grid-column: 1; grid-row: auto; }
  .intro h2 { max-width: 20ch; }
  .intro p:first-of-type { margin-top: 6px; }
}

@media (max-width: 880px) {
  .events__header { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 860px) {
  /* En móvil el contenido casi siempre excede la pantalla y el anclaje
     provoca saltos: las secciones mantienen el alto, pero sin anclarse. */
  html { scroll-snap-type: none; }
  .nav { background: transparent; }
  .nav__toggle { display: block; }
  .nav__menu {
    position: fixed; inset: 0 0 auto 0; background: var(--c-ink);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 74px var(--gutter) 24px;
    transform: translateY(-102%); transition: transform .42s var(--ease-slow);
  }
  .nav__menu.is-open { transform: none; }
  .nav__menu li { width: 100%; }
  .nav__menu a {
    display: block; width: 100%; padding: 13px 0; font-size: 1.02rem;
    opacity: 1; color: var(--c-paper) !important;
    border-bottom: 1px solid var(--c-paper-12);
  }
}

@media (max-width: 800px) {
  .duo { grid-template-columns: 1fr; }
  .duo__second { padding-top: 0; }
}

@media (max-width: 620px) {
  .hero__content { gap: 16px; }
  .hero__isotype { height: clamp(56px, 15vw, 76px); }
}

@media (max-width: 560px) {
  .spec th, .spec td { display: block; width: 100%; }
  .spec th { padding: 15px 0 3px; }
  .spec td { padding: 0 0 15px; }
}

/* Accesibilidad — respeta la preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero__isotype, .hero__title { opacity: 1; transform: none; }
  .preloader { display: none; }
}


/* ==========================================================================
   16. INTERACCIONES AVANZADAS
   --------------------------------------------------------------------------
   16.1 Revelado tipográfico por líneas
   16.2 Índice lateral de secciones
   16.3 Enlace magnético
   16.4 Numeración persistente
   ========================================================================== */


/* 16.1 REVELADO TIPOGRÁFICO POR LÍNEAS
   --------------------------------------------------------------------------
   Cada línea del titular se enmascara y sube desde debajo de su propio borde.
   No es un fundido: el texto emerge de detrás de una arista invisible.
   ========================================================================== */
.line-mask { display: block; overflow: hidden; }
.line-mask__inner {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s cubic-bezier(.19, 1, .22, 1);
}
.is-revealed .line-mask__inner { transform: none; }

/* Retardo escalonado entre líneas */
.line-mask:nth-child(1) .line-mask__inner { transition-delay: 0s; }
.line-mask:nth-child(2) .line-mask__inner { transition-delay: .09s; }
.line-mask:nth-child(3) .line-mask__inner { transition-delay: .18s; }
.line-mask:nth-child(4) .line-mask__inner { transition-delay: .27s; }

/* Párrafos y filas: desplazamiento corto, sin opacidad exagerada */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.19, 1, .22, 1);
}
.reveal.is-revealed { opacity: 1; transform: none; }


/* 16.2 ÍNDICE LATERAL DE SECCIONES
   --------------------------------------------------------------------------
   Marcas verticales fijas en el margen derecho. La sección activa alarga su
   marca y muestra su nombre. Invisible en móvil.
   ========================================================================== */
.rail {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%);
  z-index: 150; display: flex; flex-direction: column; gap: 13px;
  align-items: flex-end;
}
.rail__item {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; cursor: pointer;
}
.rail__label {
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-paper); opacity: 0; transform: translateX(6px);
  padding: 3px 7px; border-radius: 2px;
  background: var(--c-ink);
  transition: opacity .4s ease, transform .4s cubic-bezier(.19,1,.22,1);
  white-space: nowrap; font-weight: 500;
}
.rail__tick {
  display: block; height: 1px; width: 16px; background: var(--c-paper); opacity: .42;
  transition: width .45s cubic-bezier(.19,1,.22,1), opacity .35s ease;
}
.rail__item:hover .rail__label,
.rail__item.is-active .rail__label { opacity: 1; transform: none; }
.rail__item:hover .rail__tick { width: 26px; opacity: .8; }
.rail__item.is-active .rail__tick { width: 34px; opacity: 1; }

/* Inversión sobre secciones claras */
.rail.is-light .rail__tick  { background: var(--c-ink); }
.rail.is-light .rail__label { background: var(--c-ink); color: var(--c-paper); }

/* La etiqueta solo aparece al pasar el cursor: la marca activa basta como guía */
.rail__item.is-active .rail__label { opacity: 0; transform: translateX(6px); }
.rail__item:hover .rail__label     { opacity: 1; transform: none; }

@media (max-width: 1180px) { .rail { display: none; } }


/* 16.3 ENLACE MAGNÉTICO
   --------------------------------------------------------------------------
   El correo de contacto sigue ligeramente al cursor dentro de su área.
   ========================================================================== */
.magnetic {
  display: inline-block;
  transition: transform .45s cubic-bezier(.19, 1, .22, 1);
  will-change: transform;
}


/* 16.4 NUMERACIÓN PERSISTENTE
   --------------------------------------------------------------------------
   El número de sección permanece fijo mientras su bloque ocupa la pantalla.
   ========================================================================== */
.eyebrow--sticky { position: sticky; top: calc(var(--nav-height) + 14px); }


@media (prefers-reduced-motion: reduce) {
  .line-mask__inner { transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .magnetic { transform: none !important; }
  /* Los pilares muestran su texto sin animación */
  .pillar::after { opacity: 1 !important; }
  .pillar__media img { filter: none !important; transform: none !important; }
  .pillar__reveal { grid-template-rows: 1fr !important; }
  .pillar__text { opacity: 1 !important; transform: none !important; }
}