/* ============================================================================
   CONECTA COMUNIDAD · PROYECTOS · v32 (agente PROYECTOS)
   Se carga después de v29-paginas.css. Lo escribe paginas_proyectos.py.
   · hero con la formación de cushmas en Ticumpinía (foto de 3000 px);
   · el círculo del Colegio Mayor con recorte cuadrado propio, sin estirarse;
   · aliados como en la portada: una franja de logos con nombre y vínculo.
   ========================================================================== */

/* ------------------------------------------------------------------ hero */
.px-hero .pa__fondo img{ object-position:58% 64% }
@media (max-width:47.99rem){ .px-hero .pa__fondo img{ object-position:64% 62% } }

/* ------------------------------------------------------------------ apertura de Ticumpinía */
@media (min-width:48rem){
  #ticumpinia .px-ap::after{ background:linear-gradient(0deg, var(--noche-hondo) 0, rgba(6,17,31,.78) 22%, rgba(6,17,31,.12) 56%, rgba(6,17,31,0) 72%),
    linear-gradient(90deg, rgba(6,17,31,.62), rgba(6,17,31,0) 50%) }
}

/* ------------------------------------------------------------------ el círculo del Colegio Mayor
   La foto ya viene cuadrada (1:1); el marco también es cuadrado y no se encoge en la rejilla. */
.px-ppr__ojo{ flex:none; width:11rem; min-width:11rem; height:auto; aspect-ratio:1 / 1; isolation:isolate }
.px-ppr__ojo picture{ position:static; inset:auto; display:block; width:100%; height:100% }
.px-ppr__ojo img{ display:block; width:100%; height:100%; aspect-ratio:1 / 1; object-fit:cover; object-position:50% 50%; max-width:none }
@media (max-width:22.5rem){ .px-ppr__ojo{ width:9.5rem; min-width:9.5rem } }

/* ------------------------------------------------------------------ aliados (formato de la portada) */
.px-al{ padding-block:clamp(4rem,7vw,6rem) }
.px-al__in{ display:grid; gap:clamp(1.5rem,3vw,2.75rem); align-items:center }
@media (min-width:64rem){ .px-al__in{ grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr) } }
.px-al__cab .pv-t{ margin-inline:0 }
.px-al__d{ margin:var(--e-sm) 0 0; font-family:var(--lee); font-size:1.05rem; line-height:1.55; color:var(--tinta-2); max-width:34ch; text-wrap:pretty }
.px-al__l{ list-style:none; margin:0; padding:clamp(1rem,2vw,1.5rem) clamp(.8rem,1.6vw,1.2rem); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.8rem;
  border-radius:1.25rem; background:var(--blanco, #fff); color:var(--tinta);
  box-shadow:0 0 0 1px rgba(14,23,38,.06), 0 30px 60px -42px rgba(14,23,38,.45) }
.px-al__l li{ display:grid; justify-items:center; align-content:start; gap:.3rem; padding:.35rem .2rem; text-align:center; min-width:0 }
.px-al__logo{ display:flex; align-items:center; justify-content:center; width:100%; height:4.2rem; margin-bottom:.25rem }
.px-al__logo img{ display:block; width:auto; height:auto; max-width:min(100%,7.5rem); max-height:4.2rem; object-fit:contain }
.px-al__l b{ font-family:var(--sans); font-size:.88rem; font-weight:650; line-height:1.25; overflow-wrap:anywhere }
.px-al__l small{ font-family:var(--sans); font-size:.76rem; font-weight:600; line-height:1.3; color:var(--petroleo) }
.px-al__en{ margin-top:.2rem; font-family:var(--lee); font-size:.84rem; line-height:1.35; color:var(--tinta-2) }
a.px-al__en{ text-decoration:underline; text-decoration-color:rgba(20,80,79,.35); text-underline-offset:.2em; color:var(--tinta-2) }
a.px-al__en:hover{ color:var(--petroleo); text-decoration-color:currentColor }
a.px-al__en:focus-visible{ outline:2px solid var(--petroleo); outline-offset:3px; border-radius:2px }
@media (min-width:48rem) and (max-width:63.99rem){ .px-al__logo{ height:3.6rem } .px-al__logo img{ max-height:3.6rem } }
@media (max-width:47.99rem){
  .px-al__l{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem .6rem }
  .px-al__l li:last-child{ grid-column:1 / -1 }
  .px-al__logo{ height:3.4rem }
  .px-al__logo img{ max-height:3.4rem }
}

/* ------------------------------------------------------------------ columnas equilibradas
   La ficha viva (derecha) es más alta que el texto (izquierda): el texto acompaña la lectura,
   fijo bajo la barra y la subnav, y no deja un hueco al lado de la ficha. Solo si cabe en pantalla. */
@media (min-width:64rem) and (min-height:46rem){
  /* Ticumpinía ya queda pareja (su texto lleva el horizonte y los datos públicos); Callao y Proyecto País acompañan. */
  #callao .px-pf__txt, #proyecto-pais .px-pf__txt{ position:sticky; top:calc(var(--alto-nav) + 3.4rem + 1.75rem) }
}
.px-pf__txt .px-obs{ margin-top:clamp(1.75rem,3vw,2.5rem); padding-top:0; border-top:0 }