@charset "UTF-8";
/* ============================================================================
   CONECTA COMUNIDAD · ALIADOS Y CONVENIOS · v15.0
   ----------------------------------------------------------------------------
   aliados.js pinta dos bandas (Empresas, Instituciones) dentro del contenedor
   [data-aliados] de la portada y de /proyectos/. Cada banda: título con su
   conteo, una bajada y los logotipos grandes, a color, sin placa, sin borde y
   sin tarjeta. Cada logo vive en una caja de altura fija y se encaja con
   object-fit:contain (ninguno se corta). Debajo: nombre, relación y una línea de
   detalle. Al pasar el cursor o enfocar (Tab) un aliado, su logo se acerca y los
   demás de su banda se atenúan; cada banda entra escalonada al aparecer.
   Los selectores parten de [data-aliados] para pesar más que las reglas
   heredadas de componentes.css y de cada página.
   ========================================================================== */

[data-aliados]{ --al-rel:var(--petroleo); --al-t:var(--tinta); --al-d:var(--tinta-2); --al-g:var(--mudo);
  --al-cuenta:#83601C; --al-caja:7rem; --al-ancho:15.5rem }
.oscuro [data-aliados]{ --al-rel:var(--sol-2, #E8C270); --al-t:var(--papel); --al-d:#C9D4D7; --al-g:#A9C0C3; --al-cuenta:var(--sol-2, #E8C270) }

/* Contenedor: dos bandas, una sobre otra, siempre centradas */
ul.aliados[data-aliados].aliados--grupos,
[data-aliados].aliados--grupos{ list-style:none; margin:clamp(2.5rem,5vw,3.5rem) auto 0; padding:0; display:grid; grid-template-columns:1fr;
  gap:clamp(3rem,6vw,4.5rem); max-width:68rem; overflow:visible }
[data-aliados] > .aliados__grupo{ display:flex; flex-direction:column; align-items:center; min-width:0; margin:0; padding:0 }

/* Cabeza de banda: título claro con su conteo y una bajada */
[data-aliados] .aliados__banda-cab{ display:grid; justify-items:center; gap:.45rem; margin:0 0 clamp(1.75rem,3.5vw,2.5rem); text-align:center }
[data-aliados] .aliados__grupo-t{ position:relative; margin:0; padding:0; border:0; display:inline-flex; align-items:flex-start; gap:.3rem;
  font-family:var(--sans); font-size:clamp(1.45rem,1.2rem + .8vw,1.9rem); font-weight:650; line-height:1.1; letter-spacing:-.02em; text-transform:none; color:var(--al-t) }
/* v17: el conteo va en una píldora a media altura del título (no parece una nota al pie) */
[data-aliados] .aliados__grupo-t{ align-items:center; gap:.6rem }
[data-aliados] .aliados__cuenta{ display:inline-grid; place-items:center; min-width:1.9rem; height:1.9rem; padding:0 .55rem; border-radius:999px;
  font-family:var(--sans); font-style:normal; font-weight:700; font-size:.85rem; line-height:1; letter-spacing:.02em; font-variant-numeric:tabular-nums;
  color:var(--al-cuenta); background:color-mix(in srgb, var(--al-cuenta) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--al-cuenta) 35%, transparent) }
[data-aliados] .aliados__grupo-d{ margin:0; max-width:44ch; font-family:var(--sans); font-size:.95rem; line-height:1.5; color:var(--al-d); text-wrap:balance }

/* Lista de cada banda: logos lado a lado, centrados */
[data-aliados] .aliados__lista,
[data-aliados].aliados--plano{ list-style:none; margin:0; padding:0; width:100%; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:clamp(2rem,3.5vw,2.75rem) clamp(1.5rem,4vw,4rem) }

/* Aliado: sin tarjeta, sin borde, sin sombra */
[data-aliados] li.aliado,
[data-aliados] li.aliado:hover{ flex:0 1 var(--al-ancho); display:flex; flex-direction:column; align-items:center; gap:0; min-width:0; margin:0;
  padding:.5rem .25rem; text-align:center; background:none; border:0; border-radius:.375rem; box-shadow:none; transform:none; outline:none;
  transition:opacity .35s ease }
[data-aliados] li.aliado:focus-visible{ box-shadow:0 0 0 3px var(--sol, #D9A441) }

/* Caja del logotipo: altura fija, logo encajado sin recorte */
[data-aliados] li.aliado .aliado__marca,
[data-aliados] li.aliado:hover .aliado__marca{ display:flex; align-items:center; justify-content:center;
  width:100%; height:var(--al-caja); min-height:0; aspect-ratio:auto; margin:0 0 1.1rem; padding:0;
  background:none; border:0; border-radius:0; box-shadow:none; overflow:visible }
[data-aliados] li.aliado .aliado__marca img,
[data-aliados] li.aliado:hover .aliado__marca img,
[data-aliados] li.aliado:focus-within .aliado__marca img{
  filter:none !important; opacity:1 !important; mix-blend-mode:normal;
  display:block; width:auto; height:auto; max-width:min(100%, 12rem); max-height:100%; object-fit:contain;
  transition:transform .5s cubic-bezier(.3,.7,.2,1) }
[data-aliados] li.aliado .aliado__marca img[src$=".svg"]{ max-width:min(100%, 15rem); max-height:3.5rem }
/* v17: peso visual parejo entre logotipos (CNPC, alto y macizo; DP World, apaisado y fino) */
[data-aliados] li.aliado .aliado__marca img[src*="cnpc"]{ max-height:80% }
[data-aliados] li.aliado .aliado__marca img[src*="dp-world"]{ max-width:min(100%, 16.5rem); max-height:4rem }
[data-aliados] .aliado__nombre-marca{ color:var(--al-t); text-align:center }
[data-aliados] .aliado__nombre-marca small{ color:var(--al-g) }

/* Texto: nombre, relación y detalle */
[data-aliados] .aliado__t{ margin:0; font-family:var(--sans); font-size:1.04rem; font-weight:650; line-height:1.3; color:var(--al-t) }
[data-aliados] .aliado__rel{ display:block; min-height:0; margin:.35rem 0 0; padding:0; border:0; max-width:24ch;
  font-family:var(--sans); font-size:.72rem; font-weight:700; line-height:1.4; letter-spacing:.01em; text-transform:none; color:var(--al-rel) }
[data-aliados] .aliado__mas{ display:grid; grid-template-rows:1fr; width:100% }
[data-aliados] .aliado__mas > p{ min-height:0 }
[data-aliados] .aliado__d,
[data-aliados] li.aliado:hover .aliado__d{ margin:.6rem auto 0; max-width:30ch; font-family:var(--sans); font-size:.88rem; line-height:1.55; color:var(--al-d) }

/* Con ratón o teclado: el aliado elegido se acerca (logo un poco mayor, relación
   subrayada, detalle en tinta plena) y los demás de su banda se atenúan. Todo el
   texto se ve siempre: nada queda escondido ni deja huecos. */
@media (hover:hover) and (pointer:fine){
  [data-aliados] li.aliado:hover .aliado__marca img,
  [data-aliados] li.aliado:focus .aliado__marca img{ transform:scale(1.08) translateY(-3px) }
  [data-aliados] .aliados__lista:has(li.aliado:is(:hover,:focus)) li.aliado:not(:hover,:focus){ opacity:.42 }
  [data-aliados] .aliado__rel{ text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.35em; transition:text-decoration-color .35s ease }
  [data-aliados] li.aliado:hover .aliado__rel,
  [data-aliados] li.aliado:focus .aliado__rel{ text-decoration-color:currentColor }
  [data-aliados] .aliado__d{ transition:color .35s ease }
  [data-aliados] li.aliado:hover .aliado__d,
  [data-aliados] li.aliado:focus .aliado__d{ color:var(--al-t) }
}

/* Entrada escalonada (aliados.js añade y quita la clase) */
@media (prefers-reduced-motion:no-preference){
  [data-aliados] .aliados__grupo .aliados__banda-cab,
  [data-aliados] .aliados__grupo li.aliado{ transition:opacity .7s ease, translate .8s cubic-bezier(.3,.7,.2,1) }
  [data-aliados] .aliados__grupo li.aliado:nth-child(2){ transition-delay:.1s }
  [data-aliados] .aliados__grupo li.aliado:nth-child(3){ transition-delay:.2s }
  [data-aliados] .aliados__grupo--espera .aliados__banda-cab,
  [data-aliados] .aliados__grupo--espera li.aliado{ opacity:0; translate:0 1.25rem }
}
@media (prefers-reduced-motion:reduce){
  [data-aliados] li.aliado,[data-aliados] .aliado__d,[data-aliados] .aliado__marca img{ transition:none !important }
}

@media (max-width:40rem){
  [data-aliados]{ --al-caja:5.25rem }
  [data-aliados] .aliados__lista,
  [data-aliados].aliados--plano{ gap:2rem .75rem }
  [data-aliados] li.aliado,[data-aliados] li.aliado:hover{ flex:0 1 calc(50% - .375rem); padding-inline:.2rem }
  [data-aliados] li.aliado .aliado__marca img{ max-width:min(100%, 8.5rem) }
  [data-aliados] .aliado__t{ font-size:.98rem }
  [data-aliados] li.aliado .aliado__marca img[src$=".svg"]{ max-width:min(92%, 9.5rem); max-height:2.4rem }
  [data-aliados] li.aliado .aliado__marca img[src*="dp-world"]{ max-width:min(96%, 10.5rem); max-height:2.7rem }
  [data-aliados] .aliado__d{ font-size:.86rem }
}

/* v16 · modo compacto (portada): logo, nombre y relación; bandas más juntas */
[data-aliados].aliados--compacto.aliados--grupos{ gap:clamp(2.25rem,4.5vw,3.25rem); margin-top:clamp(2rem,4vw,2.75rem) }
[data-aliados].aliados--compacto .aliados__banda-cab{ margin-bottom:clamp(1.25rem,2.5vw,1.75rem) }