/* ══ LÍNEA DE TIEMPO de /nosotros/ (2026-09-29) ══
   Escritorio: la sección mide n × 70svh; dentro, .lt__fijo se queda pegado (sticky) y el JS
   traduce el avance vertical a desplazamiento horizontal de la pista. El año gigante, detrás,
   cambia con el hito que está en el centro; la regla de abajo marca el avance y deja saltar.
   Móvil / reducir movimiento: .lt--vertical, tira vertical con el año pegado arriba. */
.lt{position:relative;background:var(--ga-marina);color:#fff;height:calc(var(--n) * 62svh + 100svh)}
.lt__fijo{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  padding-top:calc(var(--barra-alto) + var(--flota) * 2 + 28px);padding-bottom:28px}
.lt__cab{position:relative;z-index:2;display:flex;align-items:baseline;gap:18px}
.lt__etq{margin:0;font:700 12px/1 var(--ga-texto);letter-spacing:.2em;text-transform:uppercase;color:var(--ga-cielo)}
.lt__titulo{margin:0;font-family:var(--ga-titular);font-weight:700;font-size:clamp(24px,2.4vw,36px);text-transform:uppercase;color:#fff}

/* el año gigante: contorno claro detrás de las tarjetas */
.lt__anio{position:absolute;z-index:0;left:0;right:0;top:50%;transform:translateY(-46%);margin:0;text-align:center;pointer-events:none;
  font-family:var(--ga-titular);font-weight:700;font-size:clamp(160px,27vw,420px);line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(201,222,240,.16)}
.lt__anio span{display:inline-block;transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.lt__anio span.cambia{opacity:0;transform:translateY(24px)}

/* la pista: tarjetas en fila que el JS desplaza */
.lt__pista{position:relative;z-index:1;list-style:none;margin:0;align-self:center;display:flex;align-items:center;gap:clamp(24px,3vw,48px);
  padding:0 calc(50vw - min(24vw,210px));will-change:transform}
.lt__hito{flex:0 0 min(48vw,420px);display:grid;gap:18px;opacity:.38;transform:scale(.92);transform-origin:center;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.lt__hito.es-actual{opacity:1;transform:none}
.lt__foto{margin:0;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:rgba(201,222,240,.08);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.lt__foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35);transition:filter .6s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.lt__hito.es-actual .lt__foto img{filter:none;transform:scale(1.03)}
.lt__a{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--ga-cielo);color:var(--ga-marina);font:700 12px/1 var(--ga-texto);letter-spacing:.12em}
.lt__texto h3{margin:12px 0 8px;font-family:var(--ga-titular);font-weight:700;font-size:clamp(18px,1.5vw,22px);line-height:1.25;color:#fff}
.lt__texto p{margin:0;font-size:14.5px;line-height:22px;color:rgba(255,255,255,.84);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.lt__hito.abierto .lt__texto p{-webkit-line-clamp:unset;display:block}
.lt__mas{margin-top:10px;padding:0;border:0;background:none;color:var(--ga-cielo);font:700 11px/1 var(--ga-texto);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.lt__mas[hidden]{display:none}
.lt__fin{flex:0 0 auto;padding:0 8vw;font-family:var(--ga-titular);font-weight:700;font-size:clamp(22px,2.2vw,32px);color:var(--ga-cielo);white-space:nowrap}

/* la regla 1960 → hoy */
.lt__regla{position:relative;z-index:2;height:54px;margin-top:10px}
.lt__barra{position:absolute;left:var(--lado);right:var(--lado);top:10px;height:2px;background:rgba(201,222,240,.2);border-radius:2px}
.lt__barra .i{position:absolute;inset:0 auto 0 0;width:calc(var(--lt-avance,0) * 100%);background:var(--ga-cielo);border-radius:2px}
.lt__marca{position:absolute;top:4px;width:14px;height:14px;padding:0;margin-left:calc(var(--lado) - 7px);border:0;border-radius:50%;background:var(--ga-marina);
  box-shadow:inset 0 0 0 2px rgba(201,222,240,.45);cursor:pointer;transition:box-shadow .3s ease,transform .3s ease}
.lt__regla .lt__marca{left:0}
.lt__marca span{position:absolute;top:22px;left:50%;transform:translateX(-50%);font:700 11px/1 var(--ga-texto);color:rgba(201,222,240,.55);white-space:nowrap;
  transition:color .3s ease;pointer-events:none}
.lt__marca.pasado{box-shadow:inset 0 0 0 7px var(--ga-cielo)}
.lt__marca.es-actual{transform:scale(1.35);box-shadow:inset 0 0 0 7px #fff}
.lt__marca.es-actual span,.lt__marca:hover span{color:#fff}
/* los años de la regla se apiñan (varios en 2019–2025): sólo se ve el actual y las décadas */
.lt__marca:not(.es-actual):not(.decada) span{opacity:0}
.lt__marca:hover span{opacity:1}

/* ── vertical: móvil y quien pidió menos movimiento ── */
.lt--vertical{height:auto}
.lt--vertical .lt__fijo{position:relative;height:auto;overflow:visible;display:block;padding:72px 0}
.lt--vertical .lt__anio{position:sticky;top:calc(var(--barra-alto) + var(--flota) * 2 + 8px);transform:none;font-size:clamp(64px,20vw,120px);text-align:left;
  padding-left:var(--lado);margin:18px 0 -10px;-webkit-text-stroke:1.2px rgba(201,222,240,.35)}
.lt--vertical .lt__pista{display:grid;gap:44px;padding:0 var(--lado);transform:none!important}
.lt--vertical .lt__hito{opacity:1;transform:none}
.lt--vertical .lt__hito .lt__foto img{filter:none}
.lt--vertical .lt__fin{padding:0;white-space:normal}
.lt--vertical .lt__regla{display:none}
/* la pista es muy ancha: no debe ensanchar la rejilla (empujaba título y regla fuera de la pantalla) */
.lt__fijo{grid-template-columns:minmax(0,100%)}
.lt__pista{width:max-content;justify-self:start}
/* móvil: sin año gigante pegado (se montaba sobre el texto); cada hito lleva su año */
.lt--vertical .lt__anio{display:none}
.lt--vertical .lt__cab{margin-bottom:36px;flex-direction:column;gap:8px;align-items:flex-start}
.lt--vertical .lt__pista{width:auto}
.lt--vertical .lt__hito{width:auto}
/* en la regla, la etiqueta de década que choca con la del año actual se oculta */
.lt__marca.cerca:not(.es-actual) span{opacity:0}
/* móvil: raíl vertical a la izquierda con un punto por hito que se enciende al pasar */
.lt--vertical .lt__pista{position:relative;padding-left:calc(var(--lado) + 26px)}
.lt--vertical .lt__pista::before{content:"";position:absolute;left:calc(var(--lado) + 6px);top:6px;bottom:0;width:2px;background:rgba(201,222,240,.2)}
.lt--vertical .lt__hito{position:relative}
.lt--vertical .lt__hito::before{content:"";position:absolute;left:-26px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--ga-marina);
  box-shadow:inset 0 0 0 2px rgba(201,222,240,.45);transition:box-shadow .3s ease,transform .3s ease}
.lt--vertical .lt__hito.es-actual::before{box-shadow:inset 0 0 0 7px var(--ga-cielo);transform:scale(1.2)}
.lt--vertical .lt__hito{opacity:.55;transition:opacity .5s ease}
.lt--vertical .lt__hito.es-actual{opacity:1}

/* ── ajustes 2026-09-29 (Carlos): eyebrow, sin año gigante, tarjetas desde la izquierda ── */
.lt__cab{display:grid;justify-items:start;gap:0}
.lt__etq{font-family:var(--ga-titular);font-weight:700;font-size:clamp(14px,1.2vw,17px);letter-spacing:.2em}
.lt__cab .pd-raya{margin-block:12px 16px;background:rgba(201,222,240,.7)}
.lt__anio{display:none}
/* la primera tarjeta arranca en el borde izquierdo de la columna de contenido */
.lt__pista{padding:0 max(var(--lado),calc((100vw - var(--ga-ancho)) / 2 + var(--lado)));align-items:stretch}
/* cada hito es una tarjeta */
.lt__hito{flex-basis:min(40vw,400px);align-content:start;gap:0;padding:14px 14px 22px;border-radius:22px;background:rgba(201,222,240,.07);border:1px solid rgba(201,222,240,.12);
  transform:none;opacity:.55;transition:opacity .5s ease,background .5s ease,border-color .5s ease}
.lt__hito.es-actual{opacity:1;background:rgba(201,222,240,.12);border-color:rgba(201,222,240,.28)}
.lt__foto{border-radius:14px;box-shadow:none}
.lt__texto{padding:18px 8px 0}
.lt__texto h3{margin-top:12px}
.lt--vertical .lt__hito{opacity:1;padding:12px 12px 20px}
.lt--vertical .lt__hito::before{left:-38px}
/* pantallas bajas: la pista nunca sube sobre el título; la foto se encoge con el alto disponible */
.lt__pista{align-self:start;margin-top:clamp(16px,3vh,40px)}
.lt__foto{aspect-ratio:auto;height:clamp(140px,calc(100svh - 520px),260px)}
.lt--vertical .lt__foto{height:auto;aspect-ratio:16/10}
.lt--vertical .lt__pista{margin-top:0}
/* la tarjeta llena el hueco entre título y regla: la foto cede lo que falte */
.lt__fijo{grid-template-rows:auto minmax(0,1fr) auto}
.lt__pista{align-self:stretch;min-height:0;margin-block:clamp(14px,2.5vh,32px) 12px}
.lt__hito{display:flex;flex-direction:column;min-height:0;max-height:100%}
.lt__foto{flex:1 1 auto;height:auto;min-height:90px;max-height:300px}
.lt__texto{flex:0 0 auto}
@media (max-height:760px){.lt__texto p{-webkit-line-clamp:3}.lt__texto h3{font-size:17px;margin-block:8px 6px}.lt__texto{padding-top:12px}}
.lt--vertical .lt__hito{max-height:none}
.lt--vertical .lt__foto{flex:none;max-height:none}
@media (max-height:640px){.lt__texto p{-webkit-line-clamp:2}.lt__cab .pd-raya{margin-block:6px 8px}.lt__titulo{font-size:22px}.lt__fijo{padding-top:calc(var(--barra-alto) + var(--flota) * 2 + 14px)}}

/* ── tarjetas parejas (Carlos, 2026-09-29): fotos del mismo alto; títulos en la letra de contenido y en una línea ── */
.lt__hito{flex-basis:min(42vw,440px)}
.lt__foto{flex:none;height:clamp(120px,calc(100svh - 540px),270px);max-height:none}
.lt__texto{flex:1 1 auto;min-height:0}
.lt__texto h3{font-family:var(--ga-texto);font-weight:700;font-size:17px;line-height:1.3;letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden}
.lt--vertical .lt__foto{height:auto;aspect-ratio:16/10}
/* todas las tarjetas del MISMO ancho: el título se ajusta a la tarjeta, no al revés */
.lt__hito{flex:0 0 min(42vw,440px);width:min(42vw,440px);min-width:0}
.lt__texto,.lt__texto h3{min-width:0;max-width:100%}
.lt--vertical .lt__hito{width:auto;flex:none}
.lt--vertical .lt__texto h3{white-space:normal;font-size:17px!important}   /* móvil: los títulos largos pueden ir en 2 líneas (a 12 px no cabían) */
/* «Leer más» dentro de la tarjeta: la foto se recoge y el texto, si aún no cabe, se desplaza dentro (nunca sale) */
.lt__hito{overflow:hidden}
.lt__foto{transition:height .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease,margin .45s ease}
.lt__hito.abierto .lt__foto{height:0;opacity:0;margin:0}
.lt__hito.abierto .lt__texto{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(201,222,240,.4) transparent;padding-right:6px}
.lt__hito.abierto .lt__mas{position:sticky;bottom:0;display:block;width:100%;text-align:left;padding-top:10px;background:linear-gradient(180deg,transparent,rgba(46,55,75,.95) 40%)}
.lt--vertical .lt__hito{overflow:visible}
.lt--vertical .lt__hito.abierto .lt__foto{height:auto;opacity:1}
.lt--vertical .lt__hito.abierto .lt__texto{overflow:visible}
.lt--vertical .lt__hito.abierto .lt__mas{position:static;background:none}
.lt__hito.abierto .lt__foto{min-height:0}
.lt__hito.abierto .lt__texto{padding-top:4px}
.lt__hito.abierto .lt__mas{position:static;background:none;padding-top:10px}
/* menos texto en la tarjeta cerrada: «Leer más» con aire debajo (Carlos, 2026-09-29) */
/* texto descriptivo corto en la tarjeta cerrada: 2 líneas; el resto con «Leer más» (Carlos) */
.lt__hito:not(.abierto) .lt__texto p{-webkit-line-clamp:2}
.lt__mas{margin-bottom:6px}
/* todas las tarjetas iguales y encendidas (Carlos, 2026-09-29: las apagadas parecían un error); sólo el hover marca borde */
.lt__hito,.lt__hito.es-actual{opacity:1;background:rgba(201,222,240,.1);border-color:rgba(201,222,240,.14);transition:border-color .3s ease,background .3s ease}
.lt__hito .lt__foto img,.lt__hito.es-actual .lt__foto img{filter:none;transform:none}
.lt__texto p{color:rgba(255,255,255,.84)}
.lt__hito .lt__a{background:var(--ga-cielo);color:var(--ga-marina)}
@media (hover:hover){.lt__hito:hover{border-color:var(--ga-cielo);background:rgba(201,222,240,.14)}}
.lt--vertical .lt__hito{opacity:1}
/* arrastre con ratón */
@media (hover:hover) and (pointer:fine){.lt:not(.lt--vertical) .lt__pista{cursor:grab;user-select:none}}
.lt__pista.arrastrando{cursor:grabbing}
.lt__pista.arrastrando .lt__hito{pointer-events:none}
.lt__pista img{-webkit-user-drag:none}
/* MÓVIL (Carlos, 2026-09-30, ley «cards en móvil = carrusel, el scroll no se alarga»): la tira de hitos es un
   carrusel horizontal con la vecina asomando; carriles.js le pone el mando (barra de avance). Va por ancho de
   pantalla, SIN depender de la clase .lt--vertical que pone el JS (si el JS tarda, la sección no se queda en
   modo escritorio de 12.000 px). */
@media (max-width:760px){
  .lt{height:auto!important}
  .lt .lt__fijo{position:relative;height:auto;overflow:visible;display:block;padding:56px 0}
  .lt .lt__anio,.lt .lt__regla{display:none}
  .lt .lt__cab{margin-bottom:28px;justify-items:center;text-align:center}
  .lt .lt__cab .pd-raya{margin-inline:auto}
  .lt .lt__pista{display:flex;width:auto;justify-self:stretch;max-width:100%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding:4px var(--lado) 12px;margin:0;scroll-padding-inline:var(--lado);align-items:stretch;transform:none!important}   /* todas del alto de la más alta (2026-10-01) */
  .lt .lt__pista::-webkit-scrollbar{display:none}
  .lt .lt__pista::before,.lt .lt__hito::before{display:none}
  .lt .lt__hito{flex:0 0 82%;width:auto;scroll-snap-align:start;opacity:1;transform:none}
  .lt .lt__hito .lt__foto img{filter:none}
  /* el texto llena la tarjeta y «Leer más» queda abajo, a la misma altura en todas */
  .lt .lt__hito{max-height:none}
  .lt .lt__texto{flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start}
  .lt .lt__texto .lt__mas{margin-top:auto}
}

/* «Leer más» abre el hito entero en una ventana emergente centrada; las tarjetas no se estiran (Carlos, 2026-10-01) */
.lt-hoja{position:fixed;inset:0;margin:auto;width:min(560px,calc(100vw - 32px));max-width:none;height:fit-content;max-height:min(86dvh,820px);
  padding:0;border:0;border-radius:22px;background:var(--ga-marina);color:#fff;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.lt-hoja[open]{display:grid;grid-template-rows:minmax(0,1fr);animation:lt-hoja-entra .35s cubic-bezier(.23,1,.32,1)}
.lt-hoja::backdrop{background:rgba(22,32,47,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lt-hoja__cuerpo{outline:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 14px 28px}
.lt-hoja .lt__foto{margin:0;width:100%;max-width:none;height:auto;opacity:1;border-radius:16px;overflow:hidden;aspect-ratio:16/10}
.lt-hoja .lt__foto img{width:100%!important;height:100%!important;max-width:none;object-fit:cover;display:block}
.lt-hoja .lt__texto{padding:18px 8px 0}
.lt-hoja .lt__texto p{display:block;-webkit-line-clamp:unset;overflow:visible;margin:0;font-size:15px;line-height:1.7;color:rgba(255,255,255,.86)}
.lt-hoja .lt__texto h3{margin:12px 0 10px;white-space:normal;overflow:visible;font-size:20px}
.lt-hoja__cerrar{position:absolute;z-index:2;top:24px;right:24px;width:40px;height:40px;border:0;border-radius:50%;
  background:var(--ga-marina);border:1px solid rgba(201,222,240,.35);display:grid;place-items:center;cursor:pointer}
.lt-hoja__cerrar span{grid-area:1/1;width:18px;height:1.5px;background:#fff;transform:rotate(45deg)}
.lt-hoja__cerrar span+span{transform:rotate(-45deg)}
body.hoja-abierta .cta-movil{opacity:0;pointer-events:none}
@keyframes lt-hoja-entra{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lt-hoja[open]{animation:none}}
/* títulos de los hitos en el teléfono: 16 px (15 en pantallas estrechas) para no pasar de 3 líneas (2026-10-01) */
@media (max-width:760px){.lt .lt__texto h3,.lt--vertical .lt__texto h3{font-size:16px!important}}
@media (max-width:360px){.lt .lt__texto h3,.lt--vertical .lt__texto h3{font-size:15px!important}}