/* Inkaterra Asociación · sitio web · página · History (30 sep) */

/* La historia de ITA en dos piezas:
   01 · Portada — la pregunta con la que empezó todo y la foto de 1986; la misma estructura
        que la portada de Who We Are (texto a la izquierda, imagen a la derecha).
   02 · La cronología — todos los hitos del PPTX en cuatro épocas: los principales (los
        resaltados), con título, frase y foto; el resto, comprimidos (año y frase). Un panel
        fijo con el año que se está leyendo en grande, el índice de épocas y el filtro; la
        línea se rellena al avanzar. En móvil, una barra fija con el año, la época y el avance. */

.history{--aire:calc(clamp(28px,4vh,44px) + clamp(28px,4.4vh,48px))}

/* ── 01 · portada ───────────────────────────────────────────────────────── */
.history .portada{padding:clamp(56px,6.1vw,88px) 0;background:var(--papel)}
.history .portada .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.history .portada .rotulo{margin-bottom:18px}
.history .portada h1{font-family:var(--ui);font-weight:500;font-size:var(--h1);letter-spacing:-.035em;line-height:1.02;max-width:15ch;color:var(--tinta);margin:0 0 clamp(26px,2.4vw,34px);text-wrap:balance}
.history .portada h1 em{font-style:normal;font-weight:700;color:var(--musgo)}
.history .portada .bajada{font-family:var(--ui);font-weight:400;font-size:clamp(17px,1.4vw,20px);line-height:1.34;letter-spacing:-.012em;color:var(--tinta);max-width:38ch;margin:0 0 clamp(16px,1.5vw,22px);text-wrap:pretty}
.history .portada .entrada{font-family:var(--texto);font-size:16px;line-height:1.55;color:var(--tinta-suave);max-width:50ch;margin:0;text-wrap:pretty}
.history .portada .archivo{margin:0}
.history .portada .archivo img{display:block;width:100%;max-width:none;height:auto;aspect-ratio:4/3;object-fit:cover}
.history .portada .archivo figcaption{margin-top:12px;font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}

/* ── 02 · la cronología ──────────────────────────────────────────────────── */
.history .cronologia{padding:var(--aire) 0 clamp(72px,9vw,128px)}
.history .crono{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);column-gap:clamp(48px,6vw,104px);align-items:start}

/* el panel, fijo mientras se lee: el año del hito que se está leyendo, en grande; el índice
   de las épocas (la activa, marcada) y el filtro */
.history .panel{position:sticky;top:calc(var(--cab-h) + 36px)}
.history .anio-actual{margin:0 0 clamp(26px,2.6vw,38px);font-family:var(--ui);font-weight:500;font-size:clamp(84px,7.6vw,124px);line-height:.86;letter-spacing:-.055em;color:var(--bosque);font-variant-numeric:tabular-nums}
.history .anio-actual span{display:inline-block}
.history .anio-actual span.cambia{animation:anio-cambia .35s var(--fluida)}
@keyframes anio-cambia{from{opacity:.2;transform:translateY(10px)}to{opacity:1;transform:none}}
.history .eras-nav{display:grid;margin:0 0 clamp(26px,2.6vw,36px);border-left:1px solid var(--linea)}
.history .eras-nav a{display:grid;gap:4px;margin-left:-1px;padding:11px 0 11px 18px;border-left:2px solid transparent;text-decoration:none;transition:border-color .25s ease}
.history .eras-nav .rango{font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave);transition:color .25s ease}
.history .eras-nav .nombre{font-family:var(--ui);font-weight:500;font-size:16px;line-height:1.25;letter-spacing:-.01em;color:var(--tinta-suave);transition:color .25s ease}
.history .eras-nav a:hover .nombre{color:var(--tinta)}
.history .eras-nav a.activa{border-left-color:var(--bosque)}
.history .eras-nav a.activa .rango{color:var(--musgo)}
.history .eras-nav a.activa .nombre{color:var(--bosque)}
.history .eras-nav a:focus-visible{outline:2px solid var(--rio);outline-offset:2px}
.history .vista{display:flex;flex-wrap:wrap;gap:6px 22px}
.history .vista button{padding:6px 0;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave);transition:color .2s ease,border-color .2s ease}
.history .vista button span{margin-left:5px;font-family:var(--dato);font-weight:500;letter-spacing:0;color:var(--salvia)}
.history .vista button:hover{color:var(--tinta)}
.history .vista button[aria-pressed="true"]{color:var(--bosque);border-bottom-color:var(--bosque)}
.history .vista button:focus-visible{outline:2px solid var(--rio);outline-offset:3px}

/* la barra de móvil: el año, la época y el avance (solo en pantallas estrechas) */
.history .barra{display:none}

/* el recorrido: una línea vertical que se rellena de musgo al avanzar (--avance, de js/history.js);
   marcas cuadradas —sin formas redondeadas—: la de la época, hueca y grande; la de un hito
   principal, mediana; la de uno comprimido, pequeña. Las ya leídas se rellenan */
.history .flujo{position:relative;padding-left:40px}
.history .flujo::before,.history .flujo::after{content:"";position:absolute;left:5px;top:8px;bottom:0;width:1px}
.history .flujo::before{background:var(--linea)}
.history .flujo::after{background:var(--musgo);transform:scaleY(var(--avance,0));transform-origin:top}
.history .era{position:relative;padding-top:clamp(56px,6vw,96px);scroll-margin-top:calc(var(--cab-h) + 24px)}
.history .era:first-child{padding-top:0}
.history .era-cab{position:relative;margin-bottom:clamp(14px,1.4vw,20px)}
.history .era-cab::before{content:"";position:absolute;left:-41px;top:0;width:13px;height:13px;box-sizing:border-box;background:var(--papel);border:1.5px solid var(--bosque)}
.history .era-cab .rotulo{margin-bottom:12px}
.history .era-cab h2{font-family:var(--ui);font-weight:600;font-size:clamp(28px,2.5vw,38px);line-height:1.04;letter-spacing:-.034em;color:var(--bosque);margin:0;max-width:none;text-wrap:balance}
.history .hitos{list-style:none;margin:0;padding:0}
.history .hito{position:relative}
.history .hito::before{content:"";position:absolute;box-sizing:border-box;transition:background-color .3s ease,border-color .3s ease,transform .3s ease}
/* los comprimidos: el año y una frase, en una lista apretada */
.history .hito:not(.clave){display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:12px;padding:7px 0}
.history .hito:not(.clave)::before{left:-37px;top:15px;width:5px;height:5px;background:var(--salvia)}
.history .hito:not(.clave) .anio{margin:0;font-family:var(--ui);font-weight:600;font-size:14px;line-height:1.55;color:var(--musgo);font-variant-numeric:tabular-nums}
.history .hito:not(.clave) p{margin:0;font-family:var(--texto);font-size:15px;line-height:1.55;color:var(--tinta-suave);max-width:62ch;text-wrap:pretty;transition:color .3s ease}
.history .hito:not(.clave).pasado::before{background:var(--musgo)}
.history .hito:not(.clave).activo::before{background:var(--bosque);transform:scale(1.6)}
.history .hito:not(.clave).activo p{color:var(--tinta)}
/* los principales: el año, un título y una frase; si la hay, su foto a la derecha */
.history .hito.clave{padding:clamp(22px,2.4vw,32px) 0}
.history .hito.clave::before{left:-40px;top:calc(clamp(22px,2.4vw,32px) + 6px);width:11px;height:11px;background:var(--papel);border:1.5px solid var(--musgo)}
.history .hito.clave.pasado::before{background:var(--musgo)}
.history .hito.clave.activo::before{background:var(--bosque);border-color:var(--bosque);transform:scale(1.25)}
.history .hito.clave .anio{margin:0 0 6px;font-family:var(--ui);font-weight:500;font-size:clamp(18px,1.5vw,21px);line-height:1.2;letter-spacing:-.01em;color:var(--musgo);font-variant-numeric:tabular-nums}
.history .hito.clave h3{font-family:var(--ui);font-weight:500;font-size:clamp(22px,1.9vw,28px);line-height:1.15;letter-spacing:-.022em;color:var(--tinta);margin:0 0 10px;text-wrap:balance}
.history .hito.clave .txt p:not(.anio){font-family:var(--texto);font-size:16px;line-height:1.6;color:var(--tinta-suave);margin:0;max-width:58ch;text-wrap:pretty}
.history .hito.con-foto{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,21vw,300px);column-gap:clamp(24px,2.6vw,40px);align-items:start}
.history .hito .foto{margin:4px 0 0}
.history .hito .foto img{display:block;width:100%;max-width:none;height:auto;aspect-ratio:4/3;object-fit:cover}
/* el filtro: solo los principales */
.history .cronologia[data-vista="clave"] .hito:not(.clave){display:none}

/* tableta y móvil: el panel se recoge —queda el filtro, arriba— y aparece la barra fija con el
   año, la época y el avance */
@media (max-width:1100px){
  .history .crono{grid-template-columns:minmax(0,1fr);row-gap:clamp(24px,4vw,32px)}
  .history .panel{position:static}
  .history .anio-actual,.history .eras-nav{display:none}
  .history .barra{display:block;position:sticky;top:var(--cab-h);z-index:5;background:rgba(255,255,255,.97);border-bottom:1px solid var(--linea-tenue)}
  .history .barra .wrap{display:flex;align-items:baseline;gap:12px;padding:11px 0 12px}
  .history .barra .anio{flex:none;font-family:var(--ui);font-weight:600;font-size:20px;line-height:1;letter-spacing:-.02em;color:var(--bosque);font-variant-numeric:tabular-nums}
  .history .barra .era-nombre{min-width:0;font-family:var(--texto);font-size:14px;line-height:1.2;color:var(--tinta-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .history .barra::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--musgo);transform:scaleX(var(--avance,0));transform-origin:left}
  .history .era{scroll-margin-top:calc(var(--cab-h) + 64px)}
}
@media (max-width:760px){
  .history .hito.con-foto{grid-template-columns:minmax(0,1fr)}
  .history .hito .foto{margin-top:16px;max-width:420px}
}
/* tableta y móvil */
@media (max-width:960px){
  .history .portada{padding:56px 0 48px}
  .history .portada .wrap{grid-template-columns:.95fr 1.05fr;gap:32px}
}
@media (max-width:850px){
  .history .portada{padding:44px 0 36px}
  .history .portada .wrap{grid-template-columns:1fr;gap:28px}
  .history .portada h1{max-width:none;font-size:var(--h1-apilado)}
  .history .portada .bajada{font-size:19px;max-width:none}
  .history .portada .entrada{font-size:17px;max-width:none}
}
@media (max-width:820px){
  .history{--aire:calc(clamp(34px,6vw,48px) + clamp(28px,4.4vh,48px))}
}
@media (max-width:560px){
  .history .portada .bajada{font-size:20px;line-height:1.32}
  .history .portada .entrada{font-size:16px}
  .history .flujo{padding-left:30px}
  .history .era-cab::before{left:-31px}
  .history .hito.clave::before{left:-30px}
  .history .hito:not(.clave)::before{left:-27px}
  .history .hito:not(.clave){grid-template-columns:minmax(0,1fr);padding:8px 0}
  .history .hito:not(.clave) .anio{font-size:13px}
  .history .hito .foto{max-width:none}
}