/* ============================================================
   CG · home por pantallas — retícula viva, rieles fijados,
   interludio oscuro y cierre ¿Hablamos?
   ============================================================ */

/* El fundido papel↔tinta lo hace el telón ligado al scroll (home.js);
   la clase tema-oscuro del body queda solo para estados de texto/nav. */

/* Canvas de la retícula de píxeles: bajo el contenido, sobre el papel */
.reticula-pixeles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Telón: fundido continuo papel→tinta ligado al scroll (sin cortes).
   Vive entre el canvas de píxeles y el contenido. */
.telon {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--tinta);
  opacity: 0;
  pointer-events: none;
}

.pantalla {
  position: relative;
  z-index: 2;
  min-height: 100vh; /* respaldo para navegadores sin svh */
  min-height: 100svh;
}

/* La banda y el pie también viven sobre el canvas de píxeles.
   La banda lleva papel propio para no oscurecerse con el telón. */
.banda-geometrica, .pie, .riel { position: relative; z-index: 2; }
.banda-geometrica { background: var(--papel); }

.pantalla__interior {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--margen-pagina);
}

/* Rótulo de sección: enorme y tenue + kicker (jerarquía sharebien) */
.rotulo-seccion {
  font-family: var(--fuente-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  font-size: clamp(44px, 7vw, 110px);
  color: rgba(20, 20, 20, 0.14); /* respaldo sin color-mix */
  color: color-mix(in srgb, var(--tinta) 14%, transparent);
}

.rotulo-seccion--pleno { color: var(--tinta); }

/* ============================================================
   01 · Portada
   ============================================================ */

.portada {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.portada__interior { text-align: center; padding: 120px var(--margen-pagina) 140px; }

.portada__kicker {
  display: inline-block;
  padding: 12px 26px;
  border-top: var(--filete);
  border-bottom: var(--filete);
  font-family: var(--fuente-display);
  font-weight: 500;
  font-size: clamp(11px, 1.2vw, 14px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.portada h1 {
  margin-top: 34px;
  font-family: var(--fuente-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: 0.005em;
  font-size: clamp(64px, 12.6vw, 186px);
}

.portada h1 .g { color: var(--cobalto); }

/* Flecha de bajada a la siguiente pantalla */
.portada__flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-top: 40px;
  border-radius: 50%;
  font-size: 22px;
  color: var(--tinta);
  text-decoration: none;
  transition: background 0.25s var(--suave), color 0.25s var(--suave), transform 0.25s var(--suave);
}

.portada__flecha span {
  display: inline-block;
  animation: flecha-late 2.2s var(--estado) infinite;
}

.portada__flecha:hover {
  background: var(--tinta);
  color: var(--papel);
  transform: translateY(4px);
}

@keyframes flecha-late {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(5px); }
}

.portada__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: var(--filete);
}

.portada__meta-interior {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 18px var(--margen-pagina);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 28px;
  flex-wrap: wrap;
}

.dato-visor {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--fuente-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.dato-visor b {
  font-weight: 700;
}

.dato-visor span { opacity: 0.65; }


/* ============================================================
   02 · Perfil
   ============================================================ */

.perfil-pantalla {
  display: flex;
  align-items: center;
  border-top: var(--filete);
  overflow: hidden;
}

.perfil-pantalla .pantalla__interior {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 14vh;
  padding-bottom: 14vh;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 72px;
  align-items: center;
}

.perfil-pantalla .marquesina-v { z-index: 1; }

.perfil-pantalla .marquesina-v__pista { align-items: flex-end; padding-right: 2vw; }

/* ============================================================
   03 · Riel de áreas (pinned)
   ============================================================ */

.riel { position: relative; }

.riel--areas { height: 420vh; }

.riel__escena {
  position: sticky;
  top: 0;
  height: 100vh; /* respaldo para navegadores sin svh */
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-top: var(--filete);
}

.riel__interior {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 90px var(--margen-pagina) 40px;
  width: 100%;
}

.areas-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  margin-top: 36px;
}

.area-item {
  padding: 20px 0;
  border-top: var(--filete);
  opacity: 0.32;
  transition: opacity 0.45s var(--estado);
}

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

.area-item__numero {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

.area-item h3 {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.45s;
}

.area-item__cuerpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--suave);
}

.area-item__cuerpo > div { overflow: hidden; }

.area-item__cuerpo p {
  padding: 12px 0 6px 0;
  max-width: 46ch;
  font-size: 15px;
  opacity: 0.85;
}

/* estados activos por tramo */
.riel--areas[data-activo="0"] .area-item:nth-child(1),
.riel--areas[data-activo="1"] .area-item:nth-child(2),
.riel--areas[data-activo="2"] .area-item:nth-child(3),
.riel--areas[data-activo="3"] .area-item:nth-child(4) { opacity: 1; }

.riel--areas[data-activo="0"] .area-item:nth-child(1) .area-item__cuerpo,
.riel--areas[data-activo="1"] .area-item:nth-child(2) .area-item__cuerpo,
.riel--areas[data-activo="2"] .area-item:nth-child(3) .area-item__cuerpo,
.riel--areas[data-activo="3"] .area-item:nth-child(4) .area-item__cuerpo { grid-template-rows: 1fr; }

.riel--areas[data-activo="0"] .area-item:nth-child(1) h3 { color: var(--cobalto); }
.riel--areas[data-activo="1"] .area-item:nth-child(2) h3 { color: var(--rojo); }
/* El amarillo sobre papel no contrasta como texto: el área de IA se
   activa en tinta con subrayado grueso amarillo (mismo código de color) */
.riel--areas[data-activo="2"] .area-item:nth-child(3) h3 {
  color: var(--tinta);
  box-shadow: inset 0 -0.22em var(--amarillo);
}
.riel--areas[data-activo="3"] .area-item:nth-child(4) h3 { color: var(--tinta); }

.areas-escenario {
  position: relative;
  height: min(48vh, 460px);
}

.areas-escenario svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(30vh, 300px);
  height: auto;
  transform: translate(-50%, -50%) scale(0.6) rotate(-14deg);
  opacity: 0;
  transition: transform 0.6s var(--muelle), opacity 0.4s;
}

.riel--areas[data-activo="0"] .areas-escenario svg:nth-of-type(1),
.riel--areas[data-activo="1"] .areas-escenario svg:nth-of-type(2),
.riel--areas[data-activo="2"] .areas-escenario svg:nth-of-type(3),
.riel--areas[data-activo="3"] .areas-escenario svg:nth-of-type(4) {
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  opacity: 1;
}

/* Degradación sin movimiento: los rieles se apilan en plano, sin
   perder contenido. El mismo apilado sirve para dos casos: la clase
   riel--plano (reduced-motion, la pone rieles.js) y la ausencia de
   html.js (sin JavaScript; la clase la pone un script del <head>). */
:is(.riel--plano, html:not(.js) [data-riel]) { height: auto !important; }
:is(.riel--plano, html:not(.js) [data-riel]) .riel__escena { position: static; height: auto; }
:is(.riel--plano, html:not(.js) [data-riel]) .area-item { opacity: 1; }
:is(.riel--plano, html:not(.js) [data-riel]) .area-item__cuerpo { grid-template-rows: 1fr; }
:is(.riel--plano, html:not(.js) [data-riel]) .areas-escenario { display: none; }

:is(.riel--plano, html:not(.js) [data-riel]).riel--casos .riel__escena { padding: 64px 0; }

:is(.riel--plano, html:not(.js) [data-riel]) .casos-escenario {
  position: static;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--margen-pagina);
}

:is(.riel--plano, html:not(.js) [data-riel]) .caso-riel__titulo {
  position: static;
  opacity: 1;
  transform: none;
  text-align: left;
  font-size: clamp(30px, 4.4vw, 54px);
  pointer-events: auto;
}

:is(.riel--plano, html:not(.js) [data-riel]) .caso-riel__media {
  position: relative;
  margin: 0;
  width: min(88vw, 640px);
  aspect-ratio: auto;
}

:is(.riel--plano, html:not(.js) [data-riel]) .caso-riel__media > * {
  position: static;
  opacity: 1;
  transform: none;
  clip-path: none;
  height: auto;
  aspect-ratio: 3 / 2;
  display: none;
}

/* En plano solo se muestra el primer caso como muestra visual; los
   demás quedan accesibles con sus títulos y enlaces apilados */
:is(.riel--plano, html:not(.js) [data-riel]) .caso-riel__media > :first-child { display: block; }

:is(.riel--plano, html:not(.js) [data-riel]) .caso-riel__kicker,
:is(.riel--plano, html:not(.js) [data-riel]) .casos-contador { display: none; }

:is(.riel--plano, html:not(.js) [data-riel]) .casos-margen { position: static; align-items: flex-start; }

:is(.riel--plano, html:not(.js) [data-riel]) .casos-enlaces { position: static; height: auto; width: auto; display: flex; flex-wrap: wrap; gap: 12px; }

:is(.riel--plano, html:not(.js) [data-riel]) .casos-enlaces a {
  position: static;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Sin JavaScript tampoco hay telón ni arrastre: la Trayectoria pinta
   su propio fondo tinta, la pista se desplaza con scroll nativo y el
   monograma del pie queda en su posición final. */
html:not(.js) .trayectoria { background: var(--tinta); }
html:not(.js) .pie__cg span { transform: translateY(16%); }

/* ============================================================
   04 · Riel de casos destacados (pinned)
   ============================================================ */

.riel--casos { height: 430vh; }

.riel--casos .riel__escena::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--velo-caso, transparent);
  transition: background 0.6s var(--estado);
}

.riel--casos[data-activo="0"] .riel__escena { --velo-caso: rgba(34, 66, 199, 0.07); --velo-caso: color-mix(in srgb, var(--cobalto) 7%, transparent); }
.riel--casos[data-activo="1"] .riel__escena { --velo-caso: rgba(242, 178, 0, 0.09); --velo-caso: color-mix(in srgb, var(--amarillo) 9%, transparent); }
.riel--casos[data-activo="2"] .riel__escena { --velo-caso: rgba(20, 20, 20, 0.05); --velo-caso: color-mix(in srgb, var(--tinta) 5%, transparent); }
.riel--casos[data-activo="3"] .riel__escena { --velo-caso: rgba(224, 52, 44, 0.07); --velo-caso: color-mix(in srgb, var(--rojo) 7%, transparent); }

.casos-escenario {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* El cuerpo del título y el hueco que necesitan sus dos líneas. La
     imagen arranca DEBAJO de esa medida, no a una distancia fija: antes
     el título crecía con el ancho y la imagen subía con la altura, y en
     ventanas anchas y bajas (portátiles) acababan pisándose, cortando
     la segunda línea por la mitad. */
  --riel-titulo: clamp(44px, min(7.4vw, 10.5vh), 118px);
  --riel-titulo-alto: calc(var(--riel-titulo) * 0.92 * 2);
  /* Cuánto sube la imagen sobre la segunda línea. Es el efecto que
     Carlos quería conservar: la foto monta sobre el rótulo. Va en em
     del propio título, así que el montaje se ve igual en cualquier
     pantalla, y se queda en el aire de la caja de línea sin comerse
     los trazos de las mayúsculas. */
  /* 0.30em: por debajo de ~0.22em la imagen solo llega al hueco que
     queda bajo la base de las mayúsculas y el montaje no se percibe.
     Con esto muerde un dedo del pie de la letra —se ve que monta— y el
     rótulo sigue leyéndose entero. */
  --riel-solape: calc(var(--riel-titulo) * 0.30);
  /* El visor y su alto, en variables, para poder colgar el título DE LA
     IMAGEN. Antes cada uno se colocaba por su lado —el título arriba y
     la imagen centrada por flex— y al cambiar de tamaño el montaje
     variaba solo: podía comerse media línea o desaparecer del todo. */
  --riel-visor: min(46vw, 760px, 78vh);
  --riel-visor-alto: calc(var(--riel-visor) * 2 / 3);

  /* Cuánto sube el título al activarse. Sale de su posición centrada y
     se apoya sobre el visor, pero nunca sube tanto que se meta bajo la
     pastilla de nav: de ahí el max() con los 96 px del borde. */
  --riel-titulo-sube: max(
    calc(96px - 50svh + var(--riel-titulo-alto) / 2),
    calc(var(--riel-solape) - var(--riel-visor-alto) / 2 - var(--riel-titulo-alto) / 2)
  );

  /* Y la imagen se coloca RESPECTO AL TÍTULO, no por su cuenta: en un
     flex centrado, un margen superior M deja la caja en el centro menos
     medio alto más M/2, así que este es el M que hace que la base del
     rótulo caiga --riel-solape px dentro de la foto. Antes cada pieza se
     situaba por separado y el montaje variaba con cada formato. */
  --riel-visor-margen: calc(
    var(--riel-visor-alto) + var(--riel-titulo-alto)
    + 2 * var(--riel-titulo-sube) - 2 * var(--riel-solape)
  );
}

.caso-riel__titulo {
  position: absolute;
  /* Por DELANTE de la imagen: el rótulo monta sobre la foto y se lee
     entero, en vez de que la foto le corte el pie a la segunda línea.
     (Probado mix-blend-mode: difference para adaptarse a portadas
     oscuras: invierte también la mezcla de las dos imágenes durante la
     transición del riel y la escena entera se vuelve un negativo.
     Descartado.) */
  z-index: 3;
  color: var(--tinta);
  width: 100%;
  text-align: center;
  font-family: var(--fuente-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  font-size: var(--riel-titulo);
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.5s var(--estado), transform 0.5s var(--suave);
  pointer-events: none;
}

.caso-riel__media {
  position: relative;
  z-index: 2;
  /* El límite en vh es el alto disponible traducido a ancho (×3/2): en
     ventanas bajas el visor encoge MANTENIENDO el 3:2 en vez de
     achatarse, que es lo que pasaba limitando solo el alto. */
  width: var(--riel-visor);
  aspect-ratio: 3 / 2;
  margin-top: var(--riel-visor-margen);
}

.caso-riel__media > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08) rotate(1.2deg);
  clip-path: inset(14% 10% 14% 10%);
  transition:
    opacity 0.45s var(--estado),
    transform 0.7s var(--suave),
    clip-path 0.7s var(--suave);
  border: var(--filete);
}

.caso-riel__media .placa-geometrica { background: var(--papel); }

/* El título parte centrado en la escena (es absolute dentro de un flex
   centrado) y sube hasta apoyarse en el visor: su base queda
   --riel-solape px por debajo del borde superior de la imagen. El
   desplazamiento sale de restar medio visor y medio título, así que NO
   depende del alto de la ventana y el montaje se ve idéntico en
   cualquier pantalla. El max() es la guarda de siempre: nunca subir
   tanto que el rótulo se meta bajo la pastilla de nav. */
.riel--casos[data-activo="0"] .caso-riel__titulo:nth-of-type(1),
.riel--casos[data-activo="1"] .caso-riel__titulo:nth-of-type(2),
.riel--casos[data-activo="2"] .caso-riel__titulo:nth-of-type(3),
.riel--casos[data-activo="3"] .caso-riel__titulo:nth-of-type(4) {
  opacity: 1;
  transform: translateY(var(--riel-titulo-sube));
}

.riel--casos[data-activo="0"] .caso-riel__media > :nth-child(1),
.riel--casos[data-activo="1"] .caso-riel__media > :nth-child(2),
.riel--casos[data-activo="2"] .caso-riel__media > :nth-child(3),
.riel--casos[data-activo="3"] .caso-riel__media > :nth-child(4) {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  clip-path: inset(0 0 0 0);
}

.casos-margen {
  position: absolute;
  z-index: 3;
  right: var(--margen-pagina);
  bottom: 10vh;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.casos-contador {
  position: relative;
  min-width: 90px;
  height: 1.3em;
  overflow: hidden;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.18em;
}

.casos-contador span {
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(110%);
  transition: opacity 0.35s, transform 0.45s var(--suave);
}

.riel--casos[data-activo="0"] .casos-contador span:nth-child(1),
.riel--casos[data-activo="1"] .casos-contador span:nth-child(2),
.riel--casos[data-activo="2"] .casos-contador span:nth-child(3),
.riel--casos[data-activo="3"] .casos-contador span:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
}

.casos-enlaces { position: relative; height: 44px; width: 180px; }

.casos-enlaces a {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 11px 22px;
  border-radius: 10px;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s, background 0.25s, color 0.25s;
}

.casos-enlaces a:hover { background: var(--tinta); color: var(--papel); }

/* Solo el enlace del caso activo es visible y clicable. Los inactivos
   siguen siendo tabulables a propósito: al recibir foco, home.js lleva
   el riel a su tramo y el enlace aparece (acceso por teclado). */
.riel--casos[data-activo="0"] .casos-enlaces a:nth-child(1),
.riel--casos[data-activo="1"] .casos-enlaces a:nth-child(2),
.riel--casos[data-activo="2"] .casos-enlaces a:nth-child(3),
.riel--casos[data-activo="3"] .casos-enlaces a:nth-child(4) {
  opacity: 1;
  pointer-events: auto;
}

.caso-riel__kicker {
  position: absolute;
  z-index: 3;
  left: var(--margen-pagina);
  bottom: 10vh;
  height: 1.4em;
  min-width: 40vw;
  overflow: hidden;
  font-family: var(--fuente-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.caso-riel__kicker span {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(110%);
  transition: opacity 0.35s, transform 0.45s var(--suave);
}

.riel--casos[data-activo="0"] .caso-riel__kicker span:nth-child(1),
.riel--casos[data-activo="1"] .caso-riel__kicker span:nth-child(2),
.riel--casos[data-activo="2"] .caso-riel__kicker span:nth-child(3),
.riel--casos[data-activo="3"] .caso-riel__kicker span:nth-child(4) {
  opacity: 0.65;
  transform: translateY(0);
}

/* ============================================================
   05 · Grid 3×3 de casos
   ============================================================ */

.pantalla--casos { padding: 15vh 0 12vh; border-top: var(--filete); }

.pantalla--casos .encabezado-flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 54px;
}

.pantalla--casos .rejilla-proyectos { position: relative; }

@media (min-width: 1024px) {
  .pantalla--casos .rejilla-proyectos { grid-template-columns: repeat(3, 1fr); }
}

.pantalla--casos .cta-fila { margin-top: 54px; }

/* ============================================================
   06 · Trayectoria (interludio oscuro)
   ============================================================ */

.trayectoria {
  min-height: 100vh; /* respaldo para navegadores sin svh */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8vh;
  color: var(--papel);
  padding: 18vh 0 16vh;
}

.trayectoria .rotulo-seccion { color: rgba(246, 244, 239, 0.16); color: color-mix(in srgb, var(--papel) 16%, transparent); }

.trayectoria__cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---------- Cronología vertical ----------
   El efecto firma de la pantalla: un trazo amarillo que se pinta (y
   despinta) ligado al scroll sobre un eje de papel tenue. Cuando el
   trazo alcanza el nodo de un hito, el hito se enciende (linea-tiempo.js
   togglea .hito--visto). Solo transform/opacity. */

.cronologia {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}

.cronologia__eje {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: rgba(246, 244, 239, 0.22);
}

.cronologia__trazo {
  position: absolute;
  left: -0.5px;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--amarillo);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}

/* La punta viajera del trazo: un rombo (cuadrado girado) de la casa.
   La gira y desplaza linea-tiempo.js; se esconde en los extremos. */
.cronologia__punta {
  position: absolute;
  left: 0.5px;
  top: 0;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  background: var(--amarillo);
  opacity: 0;
  transition: opacity 0.25s;
  will-change: transform;
}

.cronologia__hitos {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 58px;
  padding: 34px 0 46px;
}

.hito {
  position: relative;
  width: calc(50% - 54px);
}

/* Zigzag: impares a la izquierda mirando al eje, pares a la derecha */
.hito:nth-child(odd) { align-self: flex-start; text-align: right; }
.hito:nth-child(even) { align-self: flex-end; }

/* Nodo sobre el eje: círculo pleno = experiencia, aro = formación */
.hito__nodo {
  position: absolute;
  top: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--amarillo);
  transform: scale(0.45);
  opacity: 0.35;
  transition: transform 0.5s var(--muelle), opacity 0.3s, background 0.3s;
}

.hito:nth-child(odd) .hito__nodo { right: -54px; transform-origin: center; translate: 50% 0; }
.hito:nth-child(even) .hito__nodo { left: -54px; translate: -50% 0; }

.hito--formacion .hito__nodo {
  background: var(--tinta);
  border: 1.5px solid rgba(246, 244, 239, 0.72);
}

/* El contenido se revela cuando el trazo alcanza su nodo. El estado
   oculto lo activa el PROPIO linea-tiempo.js (clase cronologia--js):
   si el módulo no carga —sin JS, 404, red— los hitos nacen visibles. */
.hito__ano,
.hito__titulo,
.hito__lugar {
  transition: opacity 0.45s var(--suave), transform 0.55s var(--suave);
}

.cronologia--js .hito .hito__ano,
.cronologia--js .hito .hito__titulo,
.cronologia--js .hito .hito__lugar {
  opacity: 0;
  transform: translateY(14px);
}

.cronologia--js .hito.hito--visto .hito__ano,
.cronologia--js .hito.hito--visto .hito__titulo,
.cronologia--js .hito.hito--visto .hito__lugar {
  opacity: 1;
  transform: none;
}

/* Escalonado sutil dentro del hito: año, título, lugar */
.hito .hito__titulo { transition-delay: 0.06s; }
.hito .hito__lugar { transition-delay: 0.12s; }

.hito--visto .hito__nodo {
  transform: scale(1);
  opacity: 1;
}

.hito__ano {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--amarillo);
}

.hito__titulo {
  margin-top: 14px;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: clamp(19px, 1.8vw, 24px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.25;
}

.hito__lugar {
  margin-top: 8px;
  font-size: 13.5px;
  opacity: 0.62;
}

.cronologia--js .hito .hito__lugar { opacity: 0; }
.cronologia--js .hito.hito--visto .hito__lugar { opacity: 0.62; }

/* Los hitos de formación se distinguen en papel atenuado: mantiene el
   doble código (amarillo = experiencia) sin salirse de las cinco
   tintas de la identidad */
.hito--formacion .hito__ano { color: rgba(246, 244, 239, 0.72); }

/* Sin JavaScript o con reduced-motion, la cronología está completa:
   trazo pintado de arriba abajo, sin punta viajera, nodos plenos */
html:not(.js) .cronologia__trazo,
.cronologia--plena .cronologia__trazo { transform: scaleY(1); }
html:not(.js) .cronologia__punta,
.cronologia--plena .cronologia__punta { display: none; }
html:not(.js) .hito__nodo,
.cronologia--plena .hito__nodo { transform: scale(1); opacity: 1; }
.cronologia--plena .hito .hito__ano,
.cronologia--plena .hito .hito__titulo,
.cronologia--plena .hito .hito__lugar { opacity: 1; transform: none; }
.cronologia--plena .hito .hito__lugar { opacity: 0.62; }

.trayectoria .cta-fila {
  color: var(--papel);
  border-color: rgba(246, 244, 239, 0.35);
  border-color: color-mix(in srgb, var(--papel) 35%, transparent);
}

.trayectoria .cta-fila::before { background: var(--papel); }
.trayectoria .cta-fila:hover span { color: var(--tinta); }

/* ============================================================
   07 · Método y herramientas
   ============================================================ */

.metodo { padding: 16vh 0 14vh; }

.metodo__intro {
  max-width: 640px;
  margin-top: 30px;
  font-size: 17px;
  line-height: 1.7;
}

.metodo__pasos {
  margin-top: 8vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: var(--filete);
}

.paso {
  padding: 30px 28px 40px 22px;
  border-left: var(--filete);
}

.paso:first-child { border-left: none; padding-left: 0; }

.paso__numero {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--cobalto);
}

.paso h3 {
  margin-top: 12px;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.paso p { margin-top: 10px; font-size: 15px; opacity: 0.8; max-width: 34ch; }

.metodo .muro { margin-top: 9vh; }

/* ============================================================
   08 · Cierre — banda ¿Hablamos? + pie
   ============================================================ */

.pie--final .pie__correo {
  display: inline-block;
  margin-top: 26px;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: var(--fuente-display);
  font-weight: 200;
  font-size: clamp(16px, 5.8vw, 66px);
  letter-spacing: 0.02em;
  color: var(--papel);
  text-decoration: none;
  border-bottom: 1px solid rgba(246, 244, 239, 0.4);
  border-bottom: 1px solid color-mix(in srgb, var(--papel) 40%, transparent);
  transition: color 0.3s, border-color 0.3s;
}

.pie--final .pie__correo:hover { color: var(--amarillo); border-color: var(--amarillo); }

.pie__cg {
  margin-top: 10vh;
  overflow: hidden;
  line-height: 0.72;
  pointer-events: none;
}

.pie__cg span {
  display: block;
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: clamp(160px, 26vw, 430px);
  letter-spacing: -0.02em;
  color: rgba(246, 244, 239, 0.07);
  color: color-mix(in srgb, var(--papel) 7%, transparent);
  transform: translateY(58%);
  transition: transform 0.9s var(--suave);
}

.pie__cg.visible span { transform: translateY(16%); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1023px) {
  .riel--areas { height: 340vh; }
  .riel--casos { height: 340vh; }
  .casos-escenario { --riel-visor: min(78vw, 560px); }
}

/* Móvil: pin más corto — el pulgar recorría ~2000px por riel con la
   pantalla casi estática; con menos recorrido el scrub gana ritmo */
@media (max-width: 767px) {
  .riel--areas { height: 240vh; }
  .riel--casos { height: 260vh; }
}

/* Apaisado móvil y ventanas muy bajas: no hay hueco sobre la imagen,
   así que el título pasa por delante y el visor se encoge y baja */
/* (El título ya va por delante de la imagen en todos los formatos, así
   que aquí solo queda encoger el visor.) */
@media (max-height: 520px) {
  .casos-escenario { --riel-visor: min(48vh, 420px); }
}

@media (max-width: 900px) {
  .perfil-pantalla .pantalla__interior { grid-template-columns: 1fr; gap: 44px; }
  .areas-cuerpo { grid-template-columns: 1fr; }
  .areas-escenario { display: none; }
  .metodo__pasos { grid-template-columns: 1fr; }
  .paso { border-left: none; padding-left: 0; border-top: var(--filete); }
  .paso:first-child { border-top: none; }

  /* Cronología: el eje pasa al lateral y los hitos a una columna */
  .cronologia__eje { left: 7px; margin-left: 0; }

  .hito,
  .hito:nth-child(odd),
  .hito:nth-child(even) {
    width: auto;
    align-self: stretch;
    text-align: left;
    padding-left: 44px;
  }

  .hito:nth-child(odd) .hito__nodo,
  .hito:nth-child(even) .hito__nodo {
    left: 7px;
    right: auto;
    translate: -50% 0;
  }

  .cronologia__hitos { gap: 46px; }
}

@media (max-width: 600px) {
  .portada h1 { font-size: 15.4vw; }

  /* El bloque kicker+nombre+flecha se centra en el espacio libre entre
     la nav y la banda de metadatos (que en móvil ocupa 4 filas, ~210px);
     centrado a pantalla completa quedaba hundido y el arranque vacío */
  .portada__interior { padding: 90px var(--margen-pagina) 230px; }

  /* En móvil el título manda sobre el ancho, no sobre el alto */
  .casos-escenario { --riel-titulo: 10.5vw; }

  /* Recorte más vertical: la imagen apaisada dejaba el caso perdido
     entre dos grandes vacíos en la pantalla que debe venderlo. El
     41vh la mantiene dentro de pantalla en móviles cortos (el 3:4
     crece rápido de alto) y el margen la baja hasta después del
     título, que si no le comía la segunda línea. */
  .casos-escenario {
    --riel-visor: min(76vw, 420px, 41vh);
    /* aquí el visor es 3:4, no 3:2, y el título cuelga de su alto */
    --riel-visor-alto: calc(var(--riel-visor) * 4 / 3);
  }

  .caso-riel__media { aspect-ratio: 3 / 4; }

  .casos-margen { bottom: 6vh; }

  /* El kicker gana una segunda línea para no truncar el nombre */
  .caso-riel__kicker {
    bottom: 6vh;
    max-width: calc(100% - 220px);
    height: 3em;
  }

  .caso-riel__kicker span { white-space: normal; line-height: 1.45; }
}

/* Por debajo de 400px no hay sitio para el kicker y el botón en la
   misma franja: el min-width de 40vw de la regla base le ganaba al
   max-width y el nombre del proyecto acababa por detrás del botón. Se
   apilan, y el visor cede la altura que hace falta para ello. */
@media (max-width: 400px) {
  /* 32vh: en un iPhone SE (320×568) el visor llegaba a rozar el kicker */
  .casos-escenario { --riel-visor: min(76vw, 420px, 32vh); }

  .caso-riel__kicker {
    /* de margen a margen: sin min-width el texto colapsaba a una
       columna de una palabra, y con el de 40vw invadía el botón */
    min-width: 0;
    width: calc(100% - 2 * var(--margen-pagina));
    max-width: none;
    bottom: calc(6vh + 52px);
  }

  /* Las marcas de agua ganan presencia en pantallas pequeñas */
  .rotulo-seccion { color: rgba(20, 20, 20, 0.3); color: color-mix(in srgb, var(--tinta) 30%, transparent); }
  .trayectoria .rotulo-seccion { color: rgba(246, 244, 239, 0.3); color: color-mix(in srgb, var(--papel) 30%, transparent); }
}

@media (max-width: 360px) {
  /* "TRAYECTORIA" no se puede partir: a su mínimo de 44px mide 311px
     y desborda los viewports más estrechos (320) */
  .rotulo-seccion { font-size: clamp(30px, 12vw, 44px); }
}

@media (prefers-reduced-motion: reduce) {
  .portada__flecha span { animation: none; }
  .caso-riel__titulo, .caso-riel__media > *, .casos-contador span, .area-item, .areas-escenario svg { transition: none; }
  .pie__cg span { transform: translateY(16%); transition: none; }
  .cronologia__trazo, .hito__nodo, .hito__ano, .hito__titulo, .hito__lugar { transition: none; }
}