/* ═══════════════ Muro de clientes · Wall 1 "Marquesina de obra" (v3, integrado a la opción 4) ═══════════════
   Prefijo propio: mc- (sin choques con .fila/.pista/.celda/.cajetin de la opción 4).
   Usa los tokens de la página (--night, --violet, --sans, --mono, --gut…); trae respaldo por si faltan.
   Movimiento: solo transform y opacity. El "desenfoque" de los brillos está pre-pintado en gradientes (sin filter animado). */

.mc-muro{--mc-rastro:.12;--mc-u:1;--mc-gap:80px;--mc-banda:52px;--mc-bpx:46px;--mc-bpy:48px;--mc-ease-out:cubic-bezier(.23,1,.32,1);
  position:relative;isolation:isolate;overflow:hidden;background:var(--night,#0b0a10);color:var(--night-ink,#f3f1f6);
  padding:clamp(48px,7vh,88px) 0 clamp(44px,6vh,72px);font-family:var(--sans,system-ui,sans-serif)}
/* luz baja, como la ventana encendida de la maqueta de noche */
.mc-muro::before{content:"";position:absolute;z-index:-1;left:50%;top:38%;width:min(1200px,120vw);height:520px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(130,1,248,.11),rgba(130,1,248,0));pointer-events:none}
.mc-env{max-width:calc(1240px + 2 * var(--gut,24px));margin:0 auto;padding:0 var(--gut,24px)}
.mc-mono{font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase}
.mc-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0}

.mc-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px}
.mc-kicker{display:flex;align-items:center;gap:10px;color:#8f8a9a;margin:0 0 14px}
.mc-kicker i{width:7px;height:7px;border-radius:50%;background:var(--violet,#8201F8);box-shadow:0 0 0 4px rgba(130,1,248,.2)}
.mc-titulo{font-size:clamp(1.9rem,3.4vw,3.1rem);line-height:1.04;letter-spacing:-.035em;font-weight:740;margin:0;max-width:17ch;text-wrap:balance;color:var(--night-ink,#f3f1f6)}
.mc-titulo em{font-style:normal;color:var(--violet-soft,#a55bff);display:block}
.mc-bajada{max-width:44ch;color:var(--night-ink-2,#aaa5b4);font-size:16px;line-height:1.55;margin:0}

/* ───── Filas: a sangre, bordes que se desvanecen (rampa suavizada) ───── */
.mc-filas{position:relative;margin-top:clamp(36px,5.5vh,56px);--mc-fade:clamp(52px,12vw,220px);
  --mc-mascara:linear-gradient(90deg,
    rgba(0,0,0,0) 0,rgba(0,0,0,.05) calc(var(--mc-fade)*.2),rgba(0,0,0,.24) calc(var(--mc-fade)*.42),rgba(0,0,0,.56) calc(var(--mc-fade)*.64),rgba(0,0,0,.86) calc(var(--mc-fade)*.84),#000 var(--mc-fade),
    #000 calc(100% - var(--mc-fade)),rgba(0,0,0,.86) calc(100% - var(--mc-fade)*.84),rgba(0,0,0,.56) calc(100% - var(--mc-fade)*.64),rgba(0,0,0,.24) calc(100% - var(--mc-fade)*.42),rgba(0,0,0,.05) calc(100% - var(--mc-fade)*.2),rgba(0,0,0,0) 100%)}
.mc-fila{position:relative;overflow:hidden;padding:28px 0 48px;border-top:1px solid var(--night-line,rgba(255,255,255,.11));-webkit-mask-image:var(--mc-mascara);mask-image:var(--mc-mascara);-webkit-user-select:none;user-select:none}
.mc-fila:last-of-type{border-bottom:1px solid var(--night-line,rgba(255,255,255,.11))}
.mc-pista{display:flex;width:max-content;will-change:transform;backface-visibility:hidden}
.mc-tramo{display:flex;flex:none;align-items:center}

.mc-logo{position:relative;isolation:isolate;flex:none;width:calc(var(--mw) * var(--mc-u) * 1px);height:var(--mc-banda);margin-right:var(--mc-gap);opacity:var(--mo);transition:opacity .24s ease}
.mc-logo.mc-dev{opacity:.94}
.mc-tinta{position:absolute;left:0;top:50%;width:100%;height:calc(var(--mh) * var(--mc-u) * 1px);transform:translateY(-50%)}
.mc-tinta img{position:absolute;display:block;max-width:none;width:calc(var(--miw) * var(--mc-u) * 1px);height:calc(var(--mih) * var(--mc-u) * 1px);left:calc(var(--ml) * var(--mc-u) * 1px);top:calc(var(--mt) * var(--mc-u) * 1px);-webkit-user-drag:none}

/* Marcas de registro (esquinas de plano) que se cierran sobre el logo al seleccionarlo */
.mc-logo .mc-tinta::before{content:"";position:absolute;inset:-10px -12px;pointer-events:none;--c:rgba(165,91,255,.9);--mk:7px;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--mk) 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px var(--mk) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--mk) 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px var(--mk) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--mk) 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px var(--mk) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--mk) 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px var(--mk) no-repeat;
  opacity:0;transform:scale(1.1);transition:opacity .12s ease,transform .12s ease}

/* Ficha: nombre + ciudad */
.mc-pie{position:absolute;left:50%;top:calc(100% + 12px);display:flex;align-items:baseline;gap:8px;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,6px);transition:opacity .12s ease,transform .12s ease}
.mc-pie>i{align-self:center;flex:none;width:6px;height:6px;border-radius:50%;background:var(--violet,#8201F8);box-shadow:0 0 0 3px rgba(130,1,248,.22)}
.mc-pie b{font-size:13.5px;font-weight:650;letter-spacing:-.01em;color:#fff}
.mc-pie small{font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--night-ink-2,#aaa5b4)}
.mc-puntos{display:inline-flex;gap:4px;align-self:center;margin-left:2px}
.mc-puntos i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.22);transition:background-color .4s ease}
.mc-puntos i.on{background:var(--violet-soft,#a55bff)}

/* Familia Zoí: un solo lugar en la fila; sus desarrollos se relevan con fundido */
.mc-familia .mc-tinta img{opacity:0;filter:blur(3px);transition:opacity .8s ease,filter .8s ease}
.mc-familia .mc-tinta img.on{opacity:1;filter:blur(0)}

/* Encendido: el logo señalado con el mouse o tocado (la fila sigue a su velocidad) */
.mc-logo.mc-activo{opacity:1}
.mc-filas.mc-toque .mc-logo:not(.mc-activo){opacity:.28}
.mc-logo.mc-activo .mc-tinta::before{opacity:1;transform:none;transition:opacity .2s var(--mc-ease-out),transform .28s var(--mc-ease-out)}
.mc-logo.mc-activo .mc-pie{opacity:1;transform:translate(-50%,0);transition:opacity .2s var(--mc-ease-out),transform .28s var(--mc-ease-out)}
/* (v3.19) Mouse y toque usan la misma clase .mc-activo, que pone clientes.js en el logo bajo el cursor en cada cuadro:
   la fila no frena y el :hover de CSS se quedaría pegado en un logo que ya se fue. */

/* ═════════════ BRILLO DE LOS DESARROLLADORES · Aurora (fijo, v3.11: decisión de Diego) ═════════════
   La lista de quién lleva brillo vive en UNA línea: CON_BRILLO, al inicio de clientes.js.
   Aurora: mancha de luz que respira y cambia de forma (dos lóbulos morados + uno cálido, órbitas desfasadas). */
.mc-brillo{position:absolute;z-index:-1;left:50%;top:50%;pointer-events:none;
  width:calc(var(--mw) * var(--mc-u) * 1px + 2 * var(--mc-bpx));height:calc(2 * var(--mc-bpy));
  margin:calc(-1 * var(--mc-bpy)) 0 0 calc(-.5 * (var(--mw) * var(--mc-u) * 1px + 2 * var(--mc-bpx)))}
.mc-brillo i{position:absolute;display:block;pointer-events:none}
.mc-muro .mc-brillo i:nth-child(1){inset:6% 24% 10% 0;background:radial-gradient(closest-side,rgba(130,1,248,.62),rgba(130,1,248,.3) 42%,rgba(130,1,248,.08) 74%,rgba(130,1,248,0));opacity:.86;transform:translate3d(2%,-1%,0) rotate(3deg) scale(1.04,.96);animation:mc-aurora-1 12s ease-in-out var(--mc-d,0s) infinite alternate}
.mc-muro .mc-brillo i:nth-child(2){inset:12% 0 4% 30%;background:radial-gradient(closest-side,rgba(165,91,255,.5),rgba(165,91,255,.2) 48%,rgba(165,91,255,.05) 76%,rgba(165,91,255,0));opacity:.8;transform:translate3d(-2%,2%,0) rotate(-4deg);animation:mc-aurora-2 15s ease-in-out calc(var(--mc-d,0s) * 1.6) infinite alternate}
.mc-muro .mc-brillo i:nth-child(3){inset:28% 28% 20% 30%;background:radial-gradient(closest-side,rgba(255,179,107,.34),rgba(255,179,107,.1) 55%,rgba(255,179,107,0));opacity:.6;animation:mc-aurora-3 9s ease-in-out calc(var(--mc-d,0s) * .7) infinite alternate}
@keyframes mc-aurora-1{0%{transform:translate3d(-7%,5%,0) rotate(-10deg) scale(.94,.84);opacity:.7}50%{transform:translate3d(3%,-6%,0) rotate(5deg) scale(1.1,1.02);opacity:1}100%{transform:translate3d(9%,4%,0) rotate(16deg) scale(.96,1.1);opacity:.78}}
@keyframes mc-aurora-2{0%{transform:translate3d(6%,-4%,0) rotate(12deg) scale(1.08,.9);opacity:.88}50%{transform:translate3d(-5%,5%,0) rotate(-6deg) scale(.9,1.08);opacity:.58}100%{transform:translate3d(-10%,-3%,0) rotate(-18deg) scale(1.12,.95);opacity:.96}}
@keyframes mc-aurora-3{0%{transform:translate3d(-14%,6%,0) scale(.8);opacity:.35}100%{transform:translate3d(16%,-8%,0) scale(1.25);opacity:.9}}

/* ═════ TURNOS (E15.4): el brillo rota, ~2 desarrolladores a la vez; clientes.js decide quién (una sola cola de tiempo) ═════
   Fuera de turno queda un rastro de 12 %: el desarrollador se sigue distinguiendo y el encendido se siente como respiración, no como foco.
   Encender: 1.1 s con curva fuerte de salida. Apagar: 1.4 s parejo (más lento que encender, para que el relevo se cruce). Solo opacity. */
.mc-logo.mc-dev .mc-brillo{opacity:var(--mc-rastro);transition:opacity 1.4s ease}
.mc-logo.mc-dev.mc-turno .mc-brillo{opacity:1;transition:opacity 1.1s var(--mc-ease-out)}
/* fuera de turno las capas internas se congelan: no se gasta GPU en luz que casi no se ve */
.mc-logo.mc-dev:not(.mc-turno):not(.mc-saliendo) .mc-brillo i{animation-play-state:paused!important}
.mc-medidor{position:absolute;left:0;top:0;width:var(--mc-fade);height:0;visibility:hidden;pointer-events:none}
/* retícula (movimiento reducido): sin rotación, brillo tenue fijo en los 9 */
.mc-celda.mc-dev .mc-brillo{opacity:.5}

/* Pausas: fuera de pantalla (mc-fuera) o con el botón de pausa accesible (mc-detenido) */
.mc-muro.mc-fuera .mc-brillo i,.mc-muro.mc-detenido .mc-brillo i{animation-play-state:paused!important}

/* ───── RETÍCULA (movimiento reducido): fija, ordenada, con nombre y ciudad visibles ───── */
.mc-reticula-env{display:none;margin-top:clamp(32px,4.5vh,48px)}
.mc-reticula{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border-top:1px solid var(--night-line,rgba(255,255,255,.11));border-left:1px solid var(--night-line,rgba(255,255,255,.11));--mc-u:.7;--mc-bpx:26px;--mc-bpy:28px}
.mc-celda{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 6px 11px;border-right:1px solid var(--night-line,rgba(255,255,255,.11));border-bottom:1px solid var(--night-line,rgba(255,255,255,.11));text-align:center;min-width:0;overflow:hidden}
.mc-banda{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:100%;height:calc(50px * var(--mc-u));margin-bottom:7px}
.mc-celda .mc-tinta{position:relative;top:auto;transform:none;flex:none;width:calc(var(--mw) * var(--mc-u) * 1px);opacity:var(--mo);transition:opacity .2s ease}
.mc-celda.mc-dev .mc-tinta{opacity:.96}
.mc-nom{font-size:12.5px;font-weight:600;line-height:1.25;color:var(--night-ink,#f3f1f6)}
.mc-ciu{font-family:var(--mono,ui-monospace,monospace);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#8f8a9a}
.mc-celda.mc-sello{justify-content:center;gap:10px}
.mc-sello img{width:26px;height:26px;opacity:.42;filter:grayscale(1)}
.mc-sello .mc-mono{font-size:9.5px;line-height:1.5;color:#77727f}
@media (hover:hover) and (pointer:fine){
  .mc-reticula:has(.mc-celda:hover) .mc-celda:not(:hover) .mc-tinta{opacity:.3}
  .mc-celda:hover .mc-tinta{opacity:1}
}

/* ───── Pausa accesible (WCAG 2.2.2): sin nada visible; el botón aparece solo con foco de teclado ───── */
.mc-pausa-foco{position:absolute;z-index:6;top:16px;right:var(--gut,24px);margin:0;padding:0;border:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mc-pausa-foco:focus-visible{width:auto;height:auto;min-height:44px;padding:0 18px;clip-path:none;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  background:rgba(18,16,26,.94);color:var(--night-ink,#f3f1f6);font:600 13.5px/1 var(--sans,system-ui,sans-serif);cursor:pointer;outline:2px solid var(--violet,#8201F8);outline-offset:3px}

/* ───── Modo quieto: prefers-reduced-motion o ?movimiento=reducido → retícula fija y brillo estático ───── */
.mc-quieto .mc-filas,.mc-quieto .mc-lista-sr,.mc-quieto .mc-pausa-foco{display:none!important}
.mc-quieto .mc-reticula-env{display:block}
.mc-quieto .mc-brillo i{animation:none!important}
@media (prefers-reduced-motion:reduce){
  .mc-filas,.mc-lista-sr,.mc-pausa-foco{display:none!important}
  .mc-reticula-env{display:block}
  .mc-brillo i{animation:none!important}
}

/* ───── Tableta ───── */
@media (max-width:1100px){
  .mc-muro{--mc-u:.82;--mc-gap:62px;--mc-banda:44px;--mc-bpx:38px;--mc-bpy:42px}
  .mc-reticula{grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* ───── Celular: filas más compactas ───── */
@media (max-width:760px){
  .mc-muro{--mc-u:.6;--mc-gap:40px;--mc-banda:32px;--mc-bpx:24px;--mc-bpy:30px}
  .mc-filas{--mc-fade:44px}
  .mc-fila{padding:16px 0 34px}
  .mc-logo .mc-tinta::before{inset:-7px -8px;--mk:6px}
  .mc-pie{top:calc(100% + 9px);gap:6px}
  .mc-pie b{font-size:12.5px}
  .mc-pie small{font-size:9.5px}
  .mc-bajada{font-size:15px}
  .mc-reticula{grid-template-columns:repeat(4,minmax(0,1fr));--mc-u:.5;--mc-bpx:16px;--mc-bpy:22px}
  .mc-celda{padding:11px 3px 9px}
  .mc-banda{margin-bottom:6px}
  .mc-nom{font-size:10.5px}
  .mc-ciu{font-size:8px;letter-spacing:.08em}
}
@media (max-width:360px){
  .mc-reticula{grid-template-columns:repeat(3,minmax(0,1fr));--mc-u:.56}
}