/* vallas.css · v8.1 · la sección de aliados (#aliados): la lámina del Centro con sus vallas en blanco y, encima de cada
   una, un letrero electrónico que rota nombres de marcas. Solo selectores que empiezan por #aliados. Los componentes
   compartidos (.kicker .lead .boton .como [data-entra]) son de base.css y acá no se redefinen.
   Las vallas que iban por la ventana de la cápsula (.ventana figure.valla) siguen en ventana.css; esta sección las
   reemplaza como sitio de los aliados (Nicolás, 22-sep: «que ahí quiero publicitar los aliados»). */

/* ── medidas de la lámina: cover sin transform (para que las vallas queden por encima del degradado) ── */
#aliados{--alto:min(78svh,820px);--fx:.5;--fy:.42;--lw:max(100%,calc(var(--alto) * 16 / 9))}
@media(max-width:860px){#aliados{--alto:min(68svh,640px);--fx:.10;--fy:.5}}
#aliados .cabeza .lead{margin-bottom:0}
#aliados .centro{position:relative;height:var(--alto);margin-top:48px;overflow:hidden;background:var(--superficie);isolation:isolate}
#aliados .lamina{position:absolute;width:var(--lw);aspect-ratio:16/9;
  left:calc(var(--fx) * 100%);top:calc(var(--fy) * 100%);
  margin-left:calc(-1 * var(--fx) * var(--lw));margin-top:calc(-1 * var(--fy) * var(--lw) * 9 / 16)}
#aliados .lamina picture{display:contents}
#aliados .lamina>picture>img,#aliados .lamina>img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:fill;display:block}
/* el mismo fundido de las escenas a sangre, un poco más corto arriba para no apagar la valla alta del teléfono */
#aliados .centro::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--fondo) 0%,rgba(var(--fondo-rgb),0) 7%,rgba(var(--fondo-rgb),0) 80%,var(--fondo) 100%)}

/* ── cada valla: caja envolvente en % (sin JS) o en px + matrix3d desde las 4 esquinas medidas (con JS) ── */
#aliados .valla{position:absolute;z-index:3;margin:0;transform-origin:0 0;transform:var(--m3d,none);
  background:#0B1E2B;border-radius:2px;overflow:hidden;container-type:size;cursor:default;
  box-shadow:0 0 0 1px rgba(11,30,43,.55),inset 0 0 18px rgba(245,210,140,.06),0 0 30px 6px rgba(245,210,140,.22);
  transition:filter .3s var(--cromo)}
#aliados .valla::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%,rgba(0,0,0,.16))}
/* la lámina A (tres vallas en el skyline) es la de escritorio; la B (marquesina y valla grande, juntas a la izquierda) es la
   del teléfono: en 390 px solo caben esas dos legibles */
#aliados .valla[data-plate="centro-vallas-b-16x9"]{display:none}
@media(max-width:860px){
  #aliados .valla[data-plate="centro-vallas-a-16x9"]{display:none}
  #aliados .valla[data-plate="centro-vallas-b-16x9"]{display:block}
}
@media(hover:hover){#aliados .valla:hover{filter:brightness(1.12)}}

/* ── el letrero: una lista de nombres, uno visible a la vez; sin JS se ve el primero, quieto ── */
#aliados .letreros{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:1}
#aliados .letreros>li{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:6% 7%;text-align:center;
  font:600 clamp(10px,9.5cqw,26px)/1.08 var(--f-titulo);letter-spacing:.06em;text-transform:uppercase;color:#F7F1E6;
  text-wrap:balance;text-shadow:0 0 .3em rgba(247,241,230,.6),0 0 1.1em rgba(245,210,140,.35);
  opacity:0;transition:opacity .55s var(--cromo)}
#aliados .letreros>li.visible,#aliados .valla:not(.viva) .letreros>li:first-child{opacity:1}
#aliados .letreros>li.libre{color:#8FA3AD;font-weight:500;letter-spacing:.1em;font-size:clamp(9px,7cqw,20px);
  text-shadow:0 0 .35em rgba(143,163,173,.35)}
#aliados .letreros>li.libre b{display:block;color:#F7F1E6;font-weight:600;font-size:1.3em;letter-spacing:.06em;margin-bottom:.12em}
/* la trama LED: puntos de 3 px, discreta; al cambiar de nombre la pantalla «refresca» medio segundo */
#aliados .led{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.42;
  background:radial-gradient(circle at 50% 50%,rgba(11,30,43,0) 0 34%,rgba(11,30,43,.9) 42% 100%) 0 0/3px 3px}
#aliados .valla.cambia .led{animation:aliados-refresco .5s linear}
@keyframes aliados-refresco{0%{opacity:.42}30%{opacity:.7}60%{opacity:.34}100%{opacity:.42}}

/* ── el remate: los nombres en texto (accesibles y sin JS), la línea honesta y el CTA (solo con CORREO_ALIANZAS) ── */
#aliados .remate{display:grid;gap:22px;padding-top:44px}
@media(min-width:861px){#aliados .remate{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:start}}
#aliados .nombres{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
#aliados .nombres li{padding:9px 14px;border:1px solid var(--marco);border-radius:999px;
  font:500 12px/1 var(--f-titulo);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta)}
#aliados .nombres li.libre{color:var(--tinta-2);border-style:dashed}
#aliados .remate .como{margin:0}
#aliados .cta{display:grid;gap:12px;justify-items:start}
@media(min-width:861px){#aliados .cta{justify-items:end;text-align:right}}
#aliados [data-alianzas-cta][hidden]{display:none}

@media(prefers-reduced-motion:reduce){
  #aliados .letreros>li{transition:none}
  #aliados .valla.cambia .led{animation:none}
}