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

/* Usa los estilos de Our Team (css/team.css: titulares, rótulos y el cierre vapor) y añade:
   01 · Hero — distinto del de Associated Researchers (Rodrigo): el texto a la izquierda y una foto de trabajo
        compartido a la derecha; debajo, a todo el ancho, una cinta con los logos de los aliados que corre sin
        fin, con los bordes difuminados (como la de actividades de Who We Are).
   02 · Colaboraciones destacadas — tres tarjetas: la foto, el logo del aliado montado en su borde inferior, el
        titular, el texto y las etiquetas.
   03 · Directorio — el filtro por tipo y el buscador; fichas en cuatro columnas con el logo (o un marcador
        tipográfico), el tipo y una línea.
   Esquinas rectas en todo; solo los botones llevan el radio mínimo del sitio. */

.socios .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 01 · hero ──────────────────────────────────────────────────────────── */
.socios .hero-socios{padding:clamp(48px,5.4vw,80px) 0 0;background:var(--papel)}
.socios .hero-socios .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);column-gap:clamp(40px,5vw,88px);align-items:center}
.socios .hero-socios .rotulo{margin-bottom:clamp(18px,1.8vw,24px)}
.socios .hero-socios 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(20px,2vw,28px);max-width:none;text-wrap:balance}
.socios .hero-socios h1 em{font-style:normal;font-weight:700;color:var(--musgo)}
.socios .hero-socios .entrada{font-family:var(--texto);font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--tinta-suave);margin:0;max-width:30em;text-wrap:pretty}
.socios .hero-socios .ir{display:inline-flex;align-items:center;gap:10px;height:50px;margin-top:clamp(26px,2.6vw,36px);padding:0 22px 0 24px;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;transition:background-color .25s ease}
.socios .hero-socios .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)}


.socios .hero-socios .ir:focus-visible{outline:2px solid var(--rio);outline-offset:3px}
.socios .hero-socios .foto{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--vapor)}
.socios .hero-socios .foto img{display:block;width:100%;max-width:none;height:100%;object-fit:cover}
/* la cinta de logos: a todo el ancho, entre filetes, con los bordes difuminados; cuatro copias de la fila
   —al llegar a la mitad el dibujo es idéntico: el bucle no tiene costura, también en pantallas muy anchas—.
   Se para al pasar el ratón y queda quieta con movimiento reducido */
.socios .logos{margin-top:clamp(48px,5.4vw,80px);border-top:1px solid var(--linea-tenue);border-bottom:1px solid var(--linea-tenue)}
.socios .logos .ventana{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.socios .logos .cinta{display:flex;width:max-content}
.socios .logos .cinta.en-marcha{animation:socios-cinta 70s linear infinite}   /* js/partners.js clona la fila tres veces y la pone en marcha */
.socios .logos ul{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.socios .logos li{display:flex;align-items:center;justify-content:center;height:clamp(84px,7vw,104px);padding:0 clamp(28px,3vw,44px)}
.socios .logos img{display:block;width:auto;max-width:150px;max-height:36px;object-fit:contain}
@keyframes socios-cinta{to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){.socios .logos:hover .cinta{animation-play-state:paused}}
@media (prefers-reduced-motion:reduce){.socios .logos .cinta.en-marcha{animation:none}}

/* ── 02 · colaboraciones destacadas ─────────────────────────────────────── */
.socios .destacadas{padding:var(--aire) 0 0}
.socios .cab{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px 40px;margin-bottom:clamp(28px,3vw,40px)}
.socios .colabs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(20px,2.4vw,32px)}
.socios .colab{position:relative;display:flex;flex-direction:column}
.socios .colab .foto{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--vapor)}
.socios .colab .foto img{display:block;width:100%;max-width:none;height:100%;object-fit:cover;transition:transform .8s var(--fluida)}
.socios .colab:hover .foto img{transform:scale(1.03)}
.socios .insignia{align-self:flex-start;display:grid;place-items:center;height:56px;min-width:150px;margin:-28px 0 0 16px;padding:0 18px;position:relative;z-index:1;background:var(--papel);border:1px solid var(--linea-tenue);box-shadow:0 12px 24px -16px rgba(27,36,16,.3)}
.socios .insignia img{display:block;width:auto;max-width:170px;height:26px;object-fit:contain}
.socios .insignia.marcador{font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:-.005em;color:var(--bosque)}
.socios .colab h3{font-family:var(--ui);font-weight:500;font-size:clamp(20px,1.7vw,24px);line-height:1.15;letter-spacing:-.02em;color:var(--tinta);margin:20px 0 10px;text-wrap:balance}
.socios .colab .texto{font-family:var(--texto);font-size:15px;line-height:1.6;color:var(--tinta-suave);margin:0 0 16px;text-wrap:pretty}
.socios .colab .etiquetas{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--linea-tenue);font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--musgo)}

/* ── 03 · directorio ────────────────────────────────────────────────────── */
.socios .directorio{padding:var(--aire) 0 0;scroll-margin-top:calc(var(--cab-h) + 8px)}
.socios .herramientas{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;margin-bottom:clamp(24px,2.6vw,34px)}
.socios .chips{display:flex;flex-wrap:wrap;gap:6px}
.socios .chips button{display:inline-flex;align-items:center;height:38px;padding:0 14px;border:1px solid var(--linea);border-radius:var(--r);background:var(--papel);cursor:pointer;font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;line-height:1;color:var(--tinta-suave);white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.socios .chips button span{margin-left:8px;font-family:var(--dato);font-weight:500;letter-spacing:0;color:var(--salvia)}
.socios .chips button:hover{border-color:var(--salvia);color:var(--tinta)}
.socios .chips button[aria-pressed="true"]{background:var(--bosque);border-color:var(--bosque);color:#fff}
.socios .chips button:focus-visible{outline:2px solid var(--rio);outline-offset:2px}
.socios .buscar{display:flex;align-items:center;gap:10px;width:min(100%,280px);height:40px;padding:0 14px;border:1px solid var(--linea);border-radius:var(--r);background:var(--papel);transition:border-color .2s ease}
.socios .buscar:focus-within{border-color:var(--musgo)}
.socios .buscar svg{flex:none;width:15px;height:15px;fill:none;stroke:var(--tinta-suave);stroke-width:1.5;stroke-linecap:round}
.socios .buscar input{flex:1;min-width:0;height:100%;border:0;background:none;font-family:var(--texto);font-size:14px;color:var(--tinta);outline:none}
.socios .buscar input::placeholder{color:var(--tinta-suave)}
.socios .lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}   /* cuatro columnas (Rodrigo) */
.socios .socio{display:flex;flex-direction:column;padding:clamp(18px,1.7vw,24px);border:1px solid var(--linea-tenue);background:var(--papel);transition:border-color .2s ease}
.socios .socio:hover{border-color:var(--salvia)}
.socios .socio[hidden]{display:none}
.socios .socio .logo{display:flex;align-items:center;height:60px;margin-bottom:20px}
.socios .socio .logo img{display:block;width:auto;max-width:min(100%,170px);max-height:42px;object-fit:contain}   /* todos con un peso visual parecido: ni el más ancho llena la ficha */
.socios .socio .logo.marcador{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
.socios .socio .logo.marcador span{font-family:var(--ui);font-weight:600;font-size:15px;line-height:1.2;letter-spacing:-.01em;color:var(--bosque);text-wrap:balance}
.socios .socio .logo.marcador small{font-family:var(--ui);font-weight:600;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--salvia)}
.socios .socio .tipo{margin:0 0 8px;font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.1em;white-space:nowrap;text-transform:uppercase;color:var(--musgo)}
.socios .socio .que{margin:0;font-family:var(--texto);font-size:14px;line-height:1.55;color:var(--tinta-suave);text-wrap:pretty}
.socios .vacio{margin:24px 0 0;font-family:var(--texto);font-size:15px;color:var(--tinta-suave)}
.socios .colaboracion{margin-top:var(--aire)}

/* ── tableta y móvil ────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .socios .colabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .socios .lista{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .socios .hero-socios .wrap{grid-template-columns:minmax(0,1fr);row-gap:clamp(32px,5vw,44px)}
  .socios .hero-socios h1{font-size:var(--h1-apilado)}
  .socios .hero-socios .foto{aspect-ratio:16/10}
  .socios .herramientas{flex-direction:column;align-items:stretch}
  .socios .chips{flex-wrap:nowrap;overflow-x:auto;min-width:0;width:calc(100% + 80px);margin:0 -40px;padding:0 40px 2px;scrollbar-width:none}   /* el ancho, fijo: si no, la fila crece con sus botones y la página se sale de la pantalla */
  .socios .chips button{flex:none}
  .socios .chips::-webkit-scrollbar{display:none}
  .socios .buscar{width:100%}
}
@media (max-width:760px){
  .socios .lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .socios .colabs{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .socios .hero-socios .ir{display:flex;justify-content:center;height:52px}
  .socios .logos li{height:76px;padding:0 24px}
  .socios .logos img{max-width:120px;max-height:30px}
  .socios .chips{width:calc(100% + 56px);margin:0 -28px;padding:0 28px 2px}
  .socios .lista{grid-template-columns:minmax(0,1fr)}
  .socios .socio{padding:18px 20px}
  .socios .socio .logo{height:48px;margin-bottom:14px}
}