/* Inka Terra Asociación · sitio web · página · Associated Researchers (v3, 4 oct) */

/* La referencia y el brief de Rodrigo: editorial, sobrio, natural, institucional y contemporáneo; nada de lujo ni de
   «tech». Fondo blanco en toda la página (Rodrigo, 4 oct), titulares en bosque, acentos en verdes suaves y grises cálidos. Un solo
   recurso gráfico: los retratos. Esquinas rectas: solo los botones principales llevan el radio de 4 px del sistema. Todo es rejilla y flujo: se adapta solo a cualquier pantalla */
.investigadores{--e-sale:cubic-bezier(.16,1,.3,1);--e-suave:cubic-bezier(.22,1,.36,1);background:var(--papel)}
.investigadores h1,.investigadores h2{font-family:var(--ui);color:var(--bosque);max-width:none;text-wrap:balance}

/* ── 01 · hero: la opción A «Mosaico» (Rodrigo, 4 oct) ─────────────────────── */
/* sobre blanco: a la izquierda el rótulo, el titular (Archivo, con la palabra clave en musgo), y la entrada (sin
   botón); a la derecha, seis retratos 4:5 en una rejilla de 3 × 2, con la columna del medio más baja.
   Esquinas rectas. Solo rejilla: se adapta sola. Debajo de 860 px, el texto arriba y la rejilla debajo */
.investigadores .red-hero{padding:0;background:var(--papel)}
.investigadores .red-hero .wrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(40px,6vw,96px);align-items:center;padding:clamp(48px,5.6vw,88px) 0 clamp(72px,7vw,112px)}   /* el mosaico, más grande: el hero no se siente vacío */
.investigadores .red-hero .rotulo{margin-bottom:clamp(16px,1.6vw,22px)}
.investigadores .red-hero h1{font-family:var(--ui);font-weight:500;font-size:var(--h1);line-height:1.02;letter-spacing:-.035em;color:var(--tinta);margin:0 0 clamp(18px,1.8vw,26px);max-width:none;text-wrap:balance}   /* --h1: la escala común de las portadas (css/pagina.css) */
.investigadores .red-hero h1 em{font-style:normal;font-weight:700;color:var(--musgo)}
.investigadores .red-hero .entrada{font-family:var(--texto);font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--tinta-suave);margin:0;max-width:34em;text-wrap:pretty}
.investigadores .mosaico li:nth-child(3n+2){transform:translateY(var(--baja))}   /* la columna del medio, más baja */
/* vivo: la foto nueva (.n) se funde encima de la que estaba y se asienta con un leve acercamiento */
.investigadores .mosaico .n{opacity:0;transform:scale(1.04);transition:opacity 1.2s cubic-bezier(.22,1,.36,1),transform 2.4s cubic-bezier(.16,1,.3,1)}
.investigadores .mosaico .llega .n{opacity:1;transform:none}
@media (max-width:860px){
  .investigadores .red-hero .wrap{grid-template-columns:minmax(0,1fr);gap:40px;padding-bottom:clamp(56px,10vw,80px)}
  .investigadores .red-hero h1{font-size:var(--h1-apilado)}
  .investigadores .mosaico{width:100%;max-width:540px;justify-self:center}   /* en tableta vertical no crece más (los retratos no se ven borrosos y el hero no se alarga) y va centrado */
}

/* ── 02 · la red ───────────────────────────────────────────────────────────── */
.investigadores .directorio{padding:clamp(48px,5vw,72px) 0 clamp(72px,8vw,112px);background:var(--papel);scroll-margin-top:calc(var(--cab-h) - 8px)}

@media (prefers-reduced-motion:reduce){
  .investigadores .mosaico .n{transition:none}
}

/* el mismo aire arriba (cabecera → hero) que abajo (hero → barra All · Current · Legacy), en todos los anchos (Rodrigo,
   4 oct); el de arriba es el de las otras portadas (History, Our Team). Abajo se suma lo que baja la columna del medio del
   mosaico, y el directorio no añade el suyo. Al final del archivo: manda sobre los padding generales */
.investigadores{--aire-hero:clamp(56px,6.1vw,88px);--baja:clamp(14px,2.6vw,40px)}
@media (max-width:960px){.investigadores{--aire-hero:56px}}
@media (max-width:850px){.investigadores{--aire-hero:44px}}
.investigadores .red-hero .wrap{padding-top:var(--aire-hero);padding-bottom:calc(var(--aire-hero) + var(--baja))}
.investigadores .directorio{padding-top:0}

/* ── el estilo nuevo de la home (Rodrigo, 11 oct) ────────────────────────────
   Las mismas piezas, en el lenguaje de How ITA works: fotos con esquinas de 14 px, controles de 12 px, botones de
   14 px en caja normal y el perfil como una tarjeta de 18 px. Solo en esta página (fichas.css lo comparten Our Team
   y Amazon); las fichas siguen abiertas, sin cajas */
.investigadores .mosaico li{border-radius:16px}
.investigadores .inv .foto{border-radius:16px}
.investigadores .sello{border-radius:6px}
/* All · Current · Legacy: pastillas de 12 px; las inactivas en arena, la elegida en bosque */
.investigadores .pestanas button{height:42px;padding:0 18px;border:0;border-radius:16px;background:#F3EFE5;color:var(--bosque);font-weight:500;font-size:14.5px;letter-spacing:-.005em;text-transform:none;transition:background .25s,color .25s}
.investigadores .pestanas button:not([aria-pressed="true"]):hover{background:#E9E3D4;color:var(--bosque)}
.investigadores .pestanas button[aria-pressed="true"]{background:var(--bosque);color:#FBF8F1}
.investigadores .busca input{height:42px;border-radius:16px}
/* cargar más y limpiar: como los botones de la home */
.investigadores .carga,.investigadores .vacio .limpia{height:54px;padding:0 26px 0 28px;border:0;border-radius:16px;background:var(--bosque);color:#FBF8F1;font-family:var(--ui);font-weight:500;font-size:16px;letter-spacing:-.005em;text-transform:none;transition:translate .35s var(--curva),box-shadow .35s var(--curva),background .25s}
.investigadores .carga:hover,.investigadores .vacio .limpia:hover{background:var(--bosque);color:#FBF8F1;translate:0 -3px;box-shadow:0 10px 22px -12px rgba(36,52,20,.55)}
.investigadores .carga:active{transform:none;translate:0 -1px}
/* el perfil: una tarjeta de 18 px; la foto con las esquinas de su lado */
.investigadores .perfil{border-radius:16px}
.investigadores .perfil .sus-campos li{border-radius:16px}
.investigadores .perfil .cierra{border-radius:16px;transition:background .25s}
.investigadores .perfil .cierra:hover{opacity:1;background:#F3EFE5}

/* la entrada del hero (Rodrigo, 11 oct). El mosaico se arma en dos bloques: la fila de arriba baja y la de abajo sube
   hacia su sitio, columna a columna; cada retrato se abre desde el centro como una ventana de esquinas redondas
   mientras la foto se asienta desde más cerca. El titular entra palabra a palabra con un leve giro, como si se
   levantara, y la entrada aparece saliendo de un desenfoque */
html.entradas .investigadores .mosaico [data-r="revela"]{transition:clip-path 1.6s var(--e-sale) var(--d,0ms),opacity .7s var(--e-suave) var(--d,0ms),transform 1.7s var(--e-sale) var(--d,0ms)}
html.entradas .investigadores .mosaico [data-r="revela"]:not(.dentro){clip-path:inset(22% 22% 22% 22% round 14px);opacity:0;transform:translate3d(0,-44px,0) scale(.94)}
html.entradas .investigadores .mosaico li:nth-child(n+4) [data-r="revela"]:not(.dentro){transform:translate3d(0,44px,0) scale(.94)}
html.entradas .investigadores .mosaico [data-r="revela"].dentro{clip-path:inset(0 0 0 0 round 14px)}
html.entradas .investigadores .mosaico [data-r="revela"] img.v{transition:transform 2.2s var(--e-sale) var(--d,0ms)}
html.entradas .investigadores .mosaico [data-r="revela"]:not(.dentro) img.v{transform:scale(1.32)}
html.entradas .investigadores .red-hero [data-r="palabras"] .pi{transform-origin:0 100%}
html.entradas .investigadores .red-hero [data-r="palabras"]:not(.dentro) .pi{transform:translate3d(0,115%,0) rotate(8deg)}
html.entradas .investigadores .red-hero [data-r="sube"]{transition:opacity 1.1s var(--e-suave) var(--d,0ms),transform 1.3s var(--e-sale) var(--d,0ms),filter 1.2s var(--e-suave) var(--d,0ms)}
html.entradas .investigadores .red-hero [data-r="sube"]:not(.dentro){filter:blur(10px)}