/* Inka Terra Asociación · sitio web · página · Our Team (v4, 4 oct) */

/* Quién hace ITA, a partir de las referencias de Rodrigo (sin redes sociales) y de la reunión con ITA (4 oct): el
   Consejo, la gestión y el equipo, por separado.
   01 · Portada — sin imagen: el titular a la izquierda y la entrada a la derecha, sobre la retícula del consejo.
   02 · Board of Directors y 03 · General Management — bloques pegados: un panel con el título y los retratos en
        cuadros, con el cargo y el nombre sobre la foto; la reseña, en el perfil (pop-up). La cadena Consejo → Gerencia se
        lee por el orden y la cercanía, sin dibujarla.
   04 · Our team — el equipo en sus dos áreas (técnica y administrativa): dos paneles pegados que funcionan como
        pestañas grandes; debajo, las fichas, el filtro por región (solo en el técnico), «Load more» y el perfil de
        Associated Researchers (css/fichas.css), con el retrato 4:5.
   05 · Colaboración — el cierre: el puente a Associated Researchers, en una banda vapor que toca el pie.
   Esquinas rectas en todo: sin formas redondeadas. */

.team{--aire:calc(clamp(28px,4vh,44px) + clamp(28px,4.4vh,48px))}
.team 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}
.team .rotulo{margin-bottom:14px}
.team .cargo{margin:0 0 8px;font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--musgo)}

/* ── 01 · portada ───────────────────────────────────────────────────────── */
/* sin imagen (Rodrigo, 4 oct): el titular a la izquierda y la entrada a la derecha, alineada abajo con la última línea
   del titular. Las dos mitades caen sobre la retícula del bloque del consejo (cuatro columnas con costura de 2 px): el
   titular sobre el panel musgo y la entrada sobre los dos retratos de su derecha. En tableta vertical y móvil, apilados */
.team .portada{padding:clamp(56px,6.1vw,88px) 0 0}
.team .portada .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2px;align-items:end}
.team .portada .texto{padding-right:clamp(24px,3vw,48px)}
.team .portada .rotulo{margin-bottom:18px}
.team .portada h1{font-family:var(--ui);font-weight:500;font-size:var(--h1);letter-spacing:-.035em;line-height:1.02;color:var(--tinta);margin:0;max-width:14ch;text-wrap:balance}
.team .portada h1 em{font-style:normal;font-weight:700;color:var(--musgo)}
.team .portada .entrada{font-family:var(--texto);font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--tinta-suave);margin:0;max-width:36em;text-wrap:pretty}

/* ── 02 y 03 · consejo y gerencia general: bloques pegados ──────────────────── */
/* como los paneles de misión y visión de Who We Are, pero pegados, y como la referencia de Rodrigo (4 oct): un panel con
   el título (musgo en el consejo, marfil en la gerencia, como el par misión · visión) y los retratos en cuadros, sin
   aire entre ellos (una costura blanca de 2 px). El cargo y el nombre, sobre la foto, abajo, con un velo suave; la
   flecha dice que abre el perfil (pop-up). Cuatro cuadros por fila (dos en móvil): el consejo, título doble y seis
   retratos; la gerencia, título triple y su retrato, cerca del consejo: la cadena se lee sin dibujarla */
.team .consejo{padding:var(--aire) 0 0}
.team .gerencia{padding:clamp(24px,3vw,40px) 0 0}
.team .bloques{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--papel)}
.team .bloques .personas{display:contents;list-style:none;margin:0;padding:0}
.team .bloques .titulo{grid-column:span 2;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;padding:clamp(22px,2.6vw,36px);background:var(--musgo)}
.team .bloques .titulo .rotulo{color:#fff}
.team .bloques .titulo h2{color:#fff}
.team .gerencia .bloques .titulo{grid-column:span 3;background:var(--marfil)}
.team .gerencia .bloques .titulo .rotulo{color:var(--musgo)}
.team .gerencia .bloques .titulo h2{color:var(--bosque)}
.team .gerencia .bajada{margin:clamp(10px,1vw,14px) 0 0;font-family:var(--texto);font-size:clamp(15.5px,1.1vw,17px);line-height:1.55;color:var(--tinta-suave);max-width:44ch;text-wrap:pretty}
.team .persona{position:relative;aspect-ratio:1;min-width:0;overflow:hidden;background:#E6E7DF}
.team .persona .foto{position:absolute;inset:0;margin:0}
.team .persona .foto img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 18%;filter:saturate(.74) sepia(.08) contrast(1.03);transition:transform .9s var(--e-sale)}
.team .persona::before{content:"";position:absolute;inset:45% 0 0;z-index:1;background:linear-gradient(180deg,rgba(20,26,15,0),rgba(20,26,15,.62));pointer-events:none}   /* el velo, para leer el nombre sobre cualquier foto */
.team .persona .pie{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,1.4vw,20px) 46px clamp(14px,1.4vw,20px) clamp(14px,1.4vw,20px)}
.team .persona .cargo{margin:0 0 5px;font-size:10px;letter-spacing:.14em;line-height:1.35;color:rgba(255,255,255,.86)}
.team .persona h3{margin:0;font-family:var(--ui);font-weight:500;font-size:clamp(16px,1.3vw,19px);line-height:1.15;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.team .persona .abre{margin:0;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.team .persona .abre::after{content:"";position:absolute;inset:0;z-index:3}   /* todo el cuadro abre el perfil */
.team .persona .abre:focus-visible{outline:none}
.team .persona:has(.abre:focus-visible){outline:2px solid var(--rio);outline-offset:-2px}
.team .persona .flecha{position:absolute;right:clamp(14px,1.4vw,20px);bottom:clamp(17px,1.6vw,23px);z-index:2;width:14px;height:10px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e-sale)}
.team .persona.relleno::before{display:none}
.team .persona.relleno .cargo,.team .persona.relleno h3{color:#9CA394}
.team .persona .foto.sin .pendiente{font-size:9px;transform:translateY(-14px)}
@media (hover:hover) and (pointer:fine){
  .team .persona:has(.abre):hover .foto img{transform:scale(1.04)}
  .team .persona:has(.abre):hover .flecha{transform:translateX(3px)}
}

/* ── 04 · el equipo ─────────────────────────────────────────────────────── */
/* la barra, las fichas y «Load more» son los de Associated Researchers (css/fichas.css); sin búsqueda: el filtro por
   región y el total. El retrato, 4:5 (Rodrigo, 4 oct: el 16:10 «se ve muy chato») */
.team .equipo{padding:var(--aire) 0 0}
/* las dos áreas: dos paneles pegados (vapor y marfil, como misión · visión) que funcionan como pestañas grandes. Cada uno
   dice qué agrupa y quién lo encabeza; el elegido lleva la línea bosque arriba (la de los filtros activos) */
.team .areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:clamp(24px,2.6vw,36px) 0 0}
.team .area{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;margin:0;padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,32px) clamp(22px,2.4vw,30px);border:0;border-top:4px solid transparent;border-radius:0;background:var(--vapor);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .25s ease}
.team .area.administrativo{background:var(--marfil)}
.team .area[aria-pressed="true"]{border-top-color:var(--bosque);cursor:default}
.team .area:not([aria-pressed="true"]):hover{border-top-color:var(--salvia)}
.team .area:focus-visible{outline:2px solid var(--rio);outline-offset:2px}
.team .area .nombre{font-family:var(--ui);font-weight:600;font-size:clamp(20px,1.8vw,26px);line-height:1.1;letter-spacing:-.025em;color:var(--bosque)}
.team .area .funciones{font-family:var(--texto);font-size:15px;line-height:1.55;color:var(--tinta-suave);max-width:48ch;text-wrap:pretty}
.team .area .lidera{margin-top:auto;font-family:var(--ui);font-weight:500;font-size:13.5px;line-height:1.35;color:var(--musgo)}
.team .area-nota{display:none}
.team .equipo .barra{grid-template-columns:minmax(0,1fr) auto;margin-top:clamp(28px,3vw,40px)}
.team .equipo .pestanas[hidden]{display:none}
.team .equipo .pestanas{flex-wrap:wrap}
.team .equipo .inv .foto{aspect-ratio:4/5}
/* el perfil ampliado: lo que aún debe mandar ITA, en calma */
.team .perfil .bio p.relleno{color:#A9AEA2}

/* ── 05 · colaboración: el cierre ────────────────────────────────────────── */
/* una banda vapor a todo el ancho, pegada al pie (la referencia de Rodrigo): el rótulo, el titular,
   el párrafo y el botón bosque macizo, en la retícula. Sin el ave, por ahora */
.team .colaboracion{margin-top:var(--aire);padding:0;background:var(--vapor)}   /* a todo el ancho y pegada al pie */
.team .colaboracion .panel{padding:clamp(40px,3.8vw,56px) 0}   /* ceñida al texto, como la referencia */
.team .colaboracion .texto{max-width:40em}
.team .colaboracion p:not(.rotulo){font-family:var(--texto);font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--tinta-suave);margin:14px 0 0;max-width:46ch;text-wrap:pretty}
.team .colaboracion .ir{display:inline-flex;align-items:center;gap:10px;height:48px;margin-top:clamp(24px,2.4vw,32px);padding:0 20px 0 22px;border-radius:var(--r);background:var(--bosque);color:#fff;font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.11em;text-transform:uppercase;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color .25s ease}
.team .colaboracion .ir svg{flex:none;width:14px;height:10px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--fluida)}


.team .colaboracion .ir:focus-visible{outline:2px solid var(--rio);outline-offset:3px}

/* ── tableta y móvil ────────────────────────────────────────────────────── */
@media (max-width:960px){
  .team .portada .wrap{grid-template-columns:minmax(0,1fr);row-gap:20px}
  .team .portada .texto{padding-right:0}
  .team .portada h1{max-width:none;font-size:var(--h1-apilado)}
  .team .portada .entrada{max-width:40em}
}
@media (max-width:820px){
  .team{--aire:calc(clamp(34px,6vw,48px) + clamp(28px,4.4vh,48px))}
}
@media (max-width:620px){
  .team .bloques{grid-template-columns:repeat(2,minmax(0,1fr))}   /* el consejo: el título a todo el ancho y seis retratos; la gerencia: el título a todo el ancho y su retrato, apaisado */
  .team .consejo .bloques .titulo{padding:28px 22px 24px}
  .team .gerencia .bloques .titulo{grid-column:span 2;padding:26px 22px 24px}
  .team .gerencia .persona{grid-column:span 2;aspect-ratio:4/3}
  /* las dos áreas, en dos botones; la línea del área elegida va debajo */
  .team .areas{margin-top:20px}
  .team .area{gap:0;padding:13px 14px 15px}
  .team .area .nombre{font-size:16px}
  .team .area .funciones,.team .area .lidera{display:none}
  .team .area-nota{display:block;margin:12px 0 0;font-family:var(--texto);font-size:14.5px;line-height:1.5;color:var(--tinta-suave)}
  .team .equipo.sin-filtro .barra{margin-top:16px;padding-bottom:0}   /* sin filtro (área administrativa) la barra queda en su filete */
  .team .persona .pie{padding:12px 36px 12px 12px}
  .team .persona .cargo{font-size:9px;letter-spacing:.1em}
  .team .persona h3{font-size:15px}
  .team .persona .flecha{right:12px;bottom:15px}
  /* el filtro, en una línea (Rodrigo, 4 oct): si no caben las cinco regiones, la fila se desliza; llega hasta los bordes
     de la pantalla para que se vea que sigue */
  .team .equipo .barra{grid-template-columns:minmax(0,1fr)}
  .team .equipo .pestanas{position:relative;flex-wrap:nowrap;overflow-x:auto;margin:0 -28px;padding:0 28px;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
  .team .equipo .pestanas.al-final{-webkit-mask-image:none;mask-image:none}   /* el borde se funde mientras queden regiones a la derecha */
  .team .equipo .pestanas::-webkit-scrollbar{display:none}
  .team .equipo .pestanas button{flex:none;padding:0 14px}
}
@media (max-width:560px){
  .team .portada{padding:44px 0 0}
  .team .colaboracion .panel{padding:36px 0 40px}
  .team .colaboracion .ir{display:flex;justify-content:center;gap:8px;height:52px;padding:0 14px;font-size:10.5px;letter-spacing:.07em}   /* en una línea hasta 320 px */
}
@media (max-width:359px){.team .colaboracion .ir{gap:6px;padding:0 10px;font-size:10px;letter-spacing:.04em}}   /* la flecha también cabe a 320 px */
@media (prefers-reduced-motion:reduce){
  .team .persona .foto img{transition:none}
}