/* Inkaterra Asociación · sitio web · páginas internas · retícula común (29 sep) */

/* Lo que comparten todas las páginas de dentro: la cabecera de página (rótulo,
   titular y entradilla, sin hero a pantalla completa —eso es del home—), la
   columna de lectura, los filetes que separan los apartados y el pase a la
   página siguiente. Cada sección institucional añade después su propio
   archivo con lo suyo. */

.pagina{background:var(--papel);--fluida:cubic-bezier(.32,.72,0,1)}

/* cabecera de página: no es un hero; es la portada de un documento */
.pagina .portada{padding:clamp(48px,7vh,92px) 0 clamp(30px,4vh,46px)}
.pagina .portada .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(40px,5vw,80px);align-items:end}
.pagina .rotulo{display:inline-flex;align-items:center;gap:14px;margin:0 0 clamp(12px,1.2vw,18px);font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--musgo)}
.pagina .rotulo i{display:block;flex:0 0 44px;width:44px;height:1px;background:currentColor;opacity:.7}   /* el filete no se encoge dentro del flex */
.pagina h1{font-family:var(--ui);font-weight:500;font-size:clamp(34px,4.4vw,64px);line-height:1;letter-spacing:-.036em;color:var(--bosque);margin:0;max-width:16ch;text-wrap:balance}
.pagina h1 em{font-style:normal;color:var(--musgo)}
.pagina .entrada{font-family:var(--texto);font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:var(--tinta-suave);max-width:50ch;margin:0 0 6px;text-wrap:pretty}

/* la fotografía de portada, a sangre por dentro del margen */
.pagina .lamina{margin:0 0 clamp(36px,5vh,64px)}
.pagina .lamina img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;background:var(--linea-tenue)}
.pagina .lamina figcaption{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-family:var(--texto);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--musgo)}

/* apartados: un filete arriba, el rótulo a la izquierda y el texto a la derecha */
.pagina .apartado{padding:clamp(34px,4.6vh,56px) 0;border-top:1px solid var(--linea)}
.pagina .apartado .wrap{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);column-gap:clamp(36px,4.6vw,80px);align-items:start}
.pagina .apartado h2{font-family:var(--ui);font-weight:500;font-size:clamp(22px,2.1vw,30px);line-height:1.08;letter-spacing:-.028em;color:var(--bosque);margin:0;max-width:16ch;text-wrap:balance}
.pagina .apartado .marca{display:inline-flex;align-items:center;gap:14px;margin-bottom:12px;font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--musgo)}   /* el rótulo del home, también aquí */
.pagina .cuerpo p{font-family:var(--texto);font-size:clamp(16px,1.15vw,17.5px);line-height:1.62;color:var(--tinta-suave);margin:0 0 1em;max-width:62ch;text-wrap:pretty}
.pagina .cuerpo p:last-child{margin-bottom:0}
.pagina .cuerpo p strong{font-weight:600;color:var(--bosque)}
.pagina .cuerpo a{color:var(--bosque);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:var(--salvia);transition:text-decoration-color .25s ease}
.pagina .cuerpo a:hover{text-decoration-color:var(--ocre)}

/* una afirmación grande, para cortar el ritmo del texto */
.pagina .afirma{padding:clamp(40px,5.4vh,68px) 0;border-top:1px solid var(--linea);background:var(--marfil)}
.pagina .afirma p{font-family:var(--ui);font-weight:500;font-size:clamp(26px,3vw,44px);line-height:1.08;letter-spacing:-.03em;color:var(--bosque);margin:0;max-width:20ch;text-wrap:balance}
.pagina .afirma .pie{margin:clamp(14px,1.6vw,20px) 0 0;font-family:var(--texto);font-size:clamp(15px,1.05vw,16.5px);line-height:1.6;color:var(--tinta-suave);max-width:56ch}

/* el pase a la página siguiente: la sección institucional se lee en orden */
.pagina .sigue{border-top:1px solid var(--linea);padding:clamp(30px,4vh,44px) 0 clamp(52px,7vh,84px)}
.pagina .sigue a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center;color:inherit;text-decoration:none;outline:none}
.pagina .sigue .rotulo{margin-bottom:10px}
.pagina .sigue .nombre{display:block;font-family:var(--ui);font-weight:500;font-size:clamp(26px,2.8vw,40px);line-height:1.02;letter-spacing:-.03em;color:var(--bosque);transition:color .3s var(--fluida)}
.pagina .sigue .dice{display:block;margin-top:8px;font-family:var(--texto);font-size:15px;line-height:1.5;color:var(--tinta-suave);max-width:46ch}
.pagina .sigue svg{width:30px;height:30px;fill:none;stroke:var(--musgo);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--fluida),stroke .3s var(--fluida)}
@media (hover:hover) and (pointer:fine){
  .pagina .sigue a:hover .nombre{color:var(--musgo)}
  .pagina .sigue a:hover svg{transform:translateX(6px);stroke:var(--bosque)}
}
.pagina .sigue a:focus-visible{outline:2px solid var(--rio);outline-offset:6px}

@media (max-width:960px){
  .pagina .portada .wrap,.pagina .apartado .wrap{grid-template-columns:1fr;row-gap:clamp(16px,2.4vh,24px)}
  .pagina h1{max-width:20ch}
  .pagina .lamina img{aspect-ratio:3/2}
}
@media (max-width:560px){
  .pagina .portada{padding:36px 0 26px}
  .pagina h1{font-size:clamp(32px,9vw,40px);max-width:none}
  .pagina .apartado{padding:30px 0}
  .pagina .afirma p{font-size:clamp(25px,7.4vw,32px)}
  .pagina .sigue .nombre{font-size:28px}
  .pagina .lamina img{aspect-ratio:4/3}
}

/* el titular de las portadas de dentro: la misma escala en todas (Who We Are, History, Our Team, Associated Researchers,
   Partners). Rodrigo, 4 oct: «la página tiene que ser coherente en su sistema de diseño». Dos tamaños, según dónde esté:
   · --h1, junto a la imagen (portada en dos columnas): se achica con la imagen de al lado, de 46 px a 1440 a 34 px desde
     unos 1060, hasta que la portada se apila;
   · --h1-apilado, encima de la imagen (tableta vertical y móvil): 40 px en tableta y 37 en un móvil de 390. Antes, al
     apilarse, crecía hasta 60 px, más que en escritorio («demasiado grande», Rodrigo).
   Cada página usa --h1-apilado en la misma regla que apila su portada */
.pagina{--h1:clamp(34px,3.2vw,46px);--h1-apilado:clamp(32px,9.6vw,40px)}

/* ── entradas (Rodrigo, 4 oct): pocas, suaves y con un solo ritmo ───────────── */
/* Tres gestos, nada más:
   · las palabras de los titulares (y de la cita) suben desde su máscara, una tras otra;
   · lo demás sube un poco y aparece (los rótulos, además, despliegan su línea);
   · las imágenes se descubren con una cortina: el collage de abajo arriba, la foto de 1986 de izquierda a
     derecha, como una diapositiva, y las fotos del mosaico de Associated Researchers de abajo arriba, una tras otra. Las tarjetas suben y su grabado se posa después; en Our values se
     dibujan los filetes.
   La misma curva para todo (ease-out exponencial) y escalonado dentro de cada bloque. js/entradas.js pone .dentro
   cuando la pieza entra en pantalla y, al terminar, le quita data-r: en reposo no queda nada (los titulares
   conservan sus máscaras, ya quietas). El estado inicial lo activa html.entradas, que pone un script en la
   cabecera antes de pintar: sin JS, con movimiento reducido o si el script no arranca, todo está en su sitio. */
.pagina{--e-sale:cubic-bezier(.16,1,.3,1);--e-suave:cubic-bezier(.22,1,.36,1)}
html.entradas .pagina [data-r="sube"]{transition:opacity 1s var(--e-suave) var(--d,0ms),transform 1.25s var(--e-sale) var(--d,0ms)}
html.entradas .pagina [data-r="sube"]:not(.dentro){opacity:0;transform:translate3d(0,24px,0)}
html.entradas .pagina [data-r="aparece"]{transition:opacity 1.2s var(--e-suave) var(--d,0ms)}
html.entradas .pagina [data-r="aparece"]:not(.dentro){opacity:0}
html.entradas .pagina [data-r="linea"]{transition:opacity .9s var(--e-suave) var(--d,0ms)}
html.entradas .pagina [data-r="linea"]:not(.dentro){opacity:0}
html.entradas .pagina [data-r="linea"] i{transition:transform 1.1s var(--e-sale) calc(var(--d,0ms) + 200ms)}
html.entradas .pagina [data-r="linea"]:not(.dentro) i{transform:scaleX(0)}
/* las palabras: cada una en su máscara, con holgura arriba y abajo para tildes y descendentes */
html.entradas .pagina [data-r="palabras"]:not(.partido){visibility:hidden}
html.entradas .pagina [data-r="palabras"] .pm{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .06em .16em;margin:-.08em -.06em -.16em}
html.entradas .pagina [data-r="palabras"] .pi{display:inline-block;transition:transform 1.15s var(--e-sale) calc(var(--d,0ms) + var(--i,0) * var(--paso,40ms))}
html.entradas .pagina [data-r="palabras"]:not(.dentro) .pi{transform:translate3d(0,115%,0)}
html.entradas .pagina [data-r="cortina"]{transition:opacity 1s var(--e-suave) var(--d,0ms),transform 1.6s var(--e-sale) var(--d,0ms)}
html.entradas .pagina [data-r="cortina"]:not(.dentro){opacity:0;transform:translate3d(0,32px,0)}
html.entradas .pagina [data-r="cortina"] img{transition:clip-path 1.7s var(--e-sale) var(--d,0ms)}
html.entradas .pagina [data-r="cortina"]:not(.dentro) img{clip-path:inset(100% 0 0 0)}
html.entradas .pagina [data-r="tarjeta"]{transition:opacity 1.1s var(--e-suave) var(--d,0ms),transform 1.4s var(--e-sale) var(--d,0ms)}
html.entradas .pagina [data-r="tarjeta"]:not(.dentro){opacity:0;transform:translate3d(0,48px,0)}
html.entradas .pagina [data-r="grabado"]{transition:opacity 1.4s var(--e-suave) var(--d,0ms),transform 1.6s var(--e-sale) var(--d,0ms)}
html.entradas .pagina [data-r="grabado"]:not(.dentro){opacity:0;transform:translate3d(0,18px,0) rotate(-3deg)}
html.entradas .pagina [data-r="foto"]{transition:clip-path 1.8s var(--e-sale) var(--d,0ms)}
html.entradas .pagina [data-r="foto"]:not(.dentro){clip-path:inset(0 100% 0 0)}
/* revela: una foto que se descubre de abajo arriba mientras aparece (el mosaico de Associated Researchers; va en el
   botón de cada foto, no en el hueco, que ya tiene su propio desplazamiento) */
html.entradas .pagina [data-r="revela"]{transition:clip-path 1.5s var(--e-sale) var(--d,0ms),opacity .9s var(--e-suave) var(--d,0ms)}
html.entradas .pagina [data-r="revela"]:not(.dentro){clip-path:inset(100% 0 0 0);opacity:0}