/* ════════════════════════════════════════════════════════════════════════════
   Clientes: muro de logos (16/10/2026 · pulido; 21/10/2026: solo las placas que siguen publicadas)
   - Una placa por marca; --lg-h trae la «altura óptica» de cada logo (superficie x densidad de tinta),
     así los logos anchos y los cuadrados pesan parecido.
   Usa las fichas de ensigna.css (--noche, --borde, --lila, --papel, --facil…). Todo lleva el prefijo .lg-
   - En el muro, todos los logos van en blanco (como Stripe o Linear). El elegido se enciende con un
     brillo de marca y un borde degradé; el logo a color va SOLO en la ficha, sobre una placa blanca.
   - Las fichas se arman todas juntas, apiladas en la misma celda: la ficha mide siempre lo mismo y
     cambiar de negocio no mueve nada de la página (CLS 0).
   - Teléfono (< 600 px): los logos van en una sola fila que se desliza de costado y la ficha queda
     justo debajo.
   Solo se anima transform y opacity. Sin JS: la grilla de logos se ve igual y la ficha queda escondida.
   ════════════════════════════════════════════════════════════════════════════ */
.lg-muro{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:24px;align-items:start}
.lg-grilla{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* con 6 logos o más, 3 columnas en la compu */
.lg-grilla.lg-muchos{grid-template-columns:repeat(3,minmax(0,1fr))}
.lg-item{display:flex;min-width:0}
.lg-vos{grid-column:span var(--lg-span,1)}

/* ── la placa: vidrio que se inclina hacia el puntero; el logo sale hacia afuera ── */
.lg-placa{--lg-escala:1.22;position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  min-height:226px;padding:28px 16px 18px;border-radius:var(--r-m);border:1px solid var(--borde);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:var(--sombra);
  color:var(--texto);font:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transform:perspective(720px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px));transform-style:preserve-3d;
  transition:transform .55s var(--facil),border-color .3s,box-shadow .35s}
.lg-placa.moviendo{transition:transform .08s linear,border-color .3s,box-shadow .35s}
/* textura de puntos, apenas visible, para que la placa no se vea vacía */
.lg-placa::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.8;
  background-image:radial-gradient(rgba(185,190,230,.11) 1px,transparent 1.3px);background-size:14px 14px;
  -webkit-mask-image:radial-gradient(62% 58% at 50% 42%,#000,transparent 78%);mask-image:radial-gradient(62% 58% at 50% 42%,#000,transparent 78%)}
.lg-placa-vos::before{display:none}
.lg-brillo{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.11),rgba(161,47,214,.15) 38%,transparent 70%)}
.lg-logo{position:relative;display:grid;place-items:center;width:100%;transform:translateZ(var(--lz,0px));transform-style:preserve-3d;
  transition:transform .55s var(--facil)}
/* halo de marca detrás del logo: aparece en la elegida (solo opacidad) */
.lg-logo::before{content:"";position:absolute;left:50%;top:50%;width:150%;height:190%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(245,9,177,.30),rgba(112,37,189,.16) 55%,transparent);opacity:0;transition:opacity .45s var(--facil)}
.lg-logo img{position:relative;height:auto;width:min(100%,calc(var(--lg-h) * var(--lg-escala) * var(--lg-a,3)));object-fit:contain;opacity:.78;
  transition:opacity .4s var(--facil)}
.lg-rubro{font:500 12px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--gris-2);text-align:center;transform:translateZ(10px);transition:color .3s}

/* la elegida: el logo sigue en blanco, con brillo de marca y un borde degradé */
.lg-placa[aria-pressed="true"]{--lz:22px;border-color:transparent;
  background:linear-gradient(180deg,#15182f,#0c0f23) padding-box,linear-gradient(125deg,#F509B1,#7025BD 52%,#FFAD40) border-box;
  box-shadow:var(--sombra),0 26px 50px -24px rgba(245,9,177,.5)}
.lg-placa[aria-pressed="true"] .lg-logo::before{opacity:1}
.lg-placa[aria-pressed="true"] .lg-logo img{opacity:1;filter:drop-shadow(0 0 18px rgba(245,9,177,.45))}
.lg-placa[aria-pressed="true"] .lg-rubro{color:var(--lila)}
.lg-placa[aria-pressed="true"]::after{content:"";position:absolute;left:50%;bottom:-1px;width:44px;height:3px;margin-left:-22px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,#F509B1,#FFAD40)}
.lg-placa:focus-visible{outline:3px solid #fff;outline-offset:3px}
.lg-placa:focus-visible .lg-logo img{opacity:1}
@media (hover:hover) and (pointer:fine){
  .lg-placa:hover{--tz:8px;--lz:36px;border-color:var(--borde-2)}
  .lg-placa[aria-pressed="true"]:hover{border-color:transparent}
  .lg-placa:hover .lg-brillo{opacity:1}
  .lg-placa:hover .lg-logo img{opacity:1}
  .lg-placa:hover .lg-logo::before{opacity:.7}
}
/* toque en el teléfono: se hunde hacia el dedo y vuelve */
.lg-placa.apretada{--tz:-10px;transition:transform .12s ease-out}

/* ── la última placa: invita, no aparenta ser un cliente ── */
.lg-placa-vos{gap:8px;border-style:dashed;border-color:var(--borde-2);background:rgba(255,255,255,.02);box-shadow:none;text-align:center}
.lg-vos-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--lila);
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--borde-2);transform:translateZ(18px);transition:transform .4s var(--facil)}
.lg-vos-ico .ico{width:22px;height:22px}
.lg-vos-t{font-weight:650;font-size:var(--t17);line-height:1.25;transform:translateZ(12px)}
.lg-vos-s{font-size:var(--t15);color:var(--gris);text-decoration:underline;text-decoration-color:rgba(244,244,255,.3);text-underline-offset:4px;transform:translateZ(8px)}
.lg-vos[data-span="2"] .lg-placa-vos,.lg-vos[data-span="3"] .lg-placa-vos{display:grid;grid-template-columns:auto auto;column-gap:14px;row-gap:2px;align-content:center;justify-content:center;text-align:left}
.lg-vos[data-span="2"] .lg-vos-ico,.lg-vos[data-span="3"] .lg-vos-ico{grid-row:span 2}
.lg-vos[data-span="3"] .lg-placa-vos{min-height:110px}
@media (hover:hover) and (pointer:fine){
  .lg-placa-vos:hover{border-color:var(--borde-fuerte);background:rgba(255,255,255,.04)}
  .lg-placa-vos:hover .lg-vos-ico{transform:translateZ(30px) rotate(90deg)}
}

/* ── la ficha: todas apiladas en la misma celda, se ve solo la elegida ── */
.lg-ficha{position:sticky;top:96px;border-radius:var(--r-l);border:1px solid var(--borde);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));box-shadow:var(--sombra);padding:26px 26px 0}
.lg-ficha-cuerpo{display:grid}
.lg-f{grid-area:1 / 1;min-width:0;visibility:hidden}
.lg-f.on{visibility:visible}
.lg-anima .lg-f.on{animation:lg-entra .45s var(--facil) both}
@keyframes lg-entra{from{opacity:0;transform:translate3d(0,10px,0)}}
.lg-ficha-cab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 18px;align-items:center}
/* el logo a color, sobre una placa blanca del MISMO tamaño para todos (los anchos y los cuadrados pesan parecido:
   --lg-h ya trae la altura óptica de cada uno). Así el título no se corre al pasar de un negocio a otro. */
.lg-ficha-logo{display:grid;place-items:center;width:204px;height:108px;padding:14px;border-radius:16px;
  background:#fff;box-shadow:0 18px 32px -18px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.4) inset}
.lg-ficha-logo img{width:min(176px,calc(var(--lg-h) * var(--lg-a,3)));height:auto;max-height:80px;object-fit:contain}
.lg-ficha img:not([src]){visibility:hidden}
.lg-paso{font:500 var(--t13)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gris-2);margin-bottom:6px}
.lg-ficha h3{font-size:var(--t26);letter-spacing:-.02em;line-height:1.1;outline:none}
.lg-donde{display:flex;align-items:flex-start;gap:6px;margin-top:6px;color:var(--gris);font-size:var(--t15)}
.lg-donde .ico{width:16px;height:16px;margin-top:3px;color:var(--gris-2)}
/* el grupo: una franja debajo del logo y del nombre («Un solo grupo · 4 tiendas y 1 almacén») */
.lg-del-grupo{grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px 6px 12px;
  border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--borde-2);color:var(--gris);font-size:var(--t15);line-height:1.35}
.lg-del-grupo .ico{width:18px;height:18px;flex:none;color:var(--lila)}
.lg-del-grupo b{font-weight:650;color:var(--texto)}
.lg-resumen{margin-top:18px;color:var(--gris);font-size:var(--t17)}
.lg-sub{margin-top:22px;font:500 var(--t13)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gris-2)}
.lg-hicimos{display:grid;gap:12px;margin-top:12px}
.lg-hicimos li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center}
.lg-hi-ico{position:relative;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:var(--lila);
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--borde-2)}
.lg-hi-ico img{width:60px;height:60px;max-width:none;transform:translate3d(2px,-5px,0);filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}
.lg-hi-ico .ico{width:24px;height:24px}
.lg-hicimos b{display:block;font-size:var(--t17);line-height:1.25}
.lg-hicimos span{display:block;color:var(--gris);font-size:var(--t15);line-height:1.45}
.lg-mas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:20px}
.lg-sello{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 12px;border-radius:999px;border:1px solid var(--borde-2);
  font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.lg-sello .ico{width:16px;height:16px;color:var(--ok)}
.lg-grupo{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--t13);color:var(--gris-2)}
.lg-hermana{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;border:0;cursor:pointer;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--borde-2);transition:background .2s,box-shadow .2s}
.lg-hermana img{height:var(--lg-chip,15px);width:auto;opacity:.85}
.lg-hermana:hover{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px var(--borde-fuerte)}
/* puente a la demo del sistema */
.lg-puente{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;margin-top:22px;padding:10px 14px 10px 16px;border-radius:14px;
  color:var(--gris);font-size:var(--t15);line-height:1.35;text-decoration:none;
  background:linear-gradient(100deg,rgba(245,9,177,.12),rgba(112,37,189,.12));box-shadow:inset 0 0 0 1px rgba(217,200,255,.22);transition:box-shadow .2s,background .2s}
.lg-puente b{color:var(--texto);font-weight:650}
.lg-puente .ico{width:20px;height:20px;flex:none;color:var(--lila);transition:transform .3s var(--facil)}
.lg-puente:hover{box-shadow:inset 0 0 0 1px rgba(217,200,255,.5)}
.lg-puente:hover .ico{transform:translateX(3px)}
.lg-ficha-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:14px 0 16px;border-top:1px solid var(--borde)}
.lg-honesto{flex:1 1 200px;font-size:var(--t13);color:var(--gris-2);line-height:1.45}
.lg-ctrl{display:flex;gap:6px}
.lg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 12px;border:0;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--borde-2);color:var(--texto);font-size:var(--t15);font-weight:600;transition:background .2s,box-shadow .2s}
.lg-btn:hover{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px var(--borde-fuerte)}
.lg-btn .ico{width:18px;height:18px}
#lgAnt .ico{transform:scaleX(-1)}
.lg-avance{height:2px;margin:0 -26px;background:rgba(255,255,255,.06)}
.lg-avance i{display:block;height:100%;background:linear-gradient(90deg,#F509B1,#FFAD40);transform-origin:0 50%;transform:scaleX(0)}
.lg-avance.anda i{animation:lg-llenar var(--lg-t,5s) linear forwards}
.lg-avance.quieta i{animation-play-state:paused}
@keyframes lg-llenar{to{transform:scaleX(1)}}
.lg-sin-recorrido .lg-avance{opacity:0}

/* ── responsivo ── */
.lg-muchos .lg-placa{--lg-escala:1;min-height:176px}
/* compu: las filas de logos se estiran hasta el alto de la ficha (logos.js pone --lg-filas); la ficha no se estira */
@media (min-width:1100.02px){
  .lg-vivo .lg-grilla{align-self:stretch}
  .lg-vivo .lg-ficha{align-self:start}
  .lg-vivo .lg-grilla.lg-muchos{grid-template-rows:repeat(var(--lg-filas,3),minmax(176px,1fr))}
  .lg-vivo .lg-grilla.lg-muchos[data-vos-fila]{grid-template-rows:repeat(var(--lg-filas,3),minmax(176px,1fr)) minmax(110px,auto)}
}
@media (max-width:1100px){
  .lg-muro{grid-template-columns:minmax(0,1fr)}
  .lg-ficha{position:relative;top:auto}
  .lg-grilla,.lg-grilla.lg-muchos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg-placa,.lg-muchos .lg-placa{--lg-escala:1;min-height:160px;padding:24px 14px 16px}
}
@media (min-width:700px) and (max-width:1100px){
  .lg-hicimos{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
}
/* teléfono: una sola fila de logos que se desliza de costado; la ficha queda justo debajo */
@media (max-width:599.98px){
  .lg-muro{gap:14px}
  .lg-grilla,.lg-grilla.lg-muchos{display:flex;gap:10px;margin:0 calc(var(--gutter) * -1);padding:8px var(--gutter) 14px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 26px),transparent)}
  .lg-grilla::-webkit-scrollbar{display:none}
  .lg-item{flex:0 0 150px;scroll-snap-align:start}
  .lg-vos{flex-basis:208px}
  /* 16/10 (revisión): placa de 104 px y logos hasta 64 px. Con 88/46 las letras de los logos cuadrados
     quedaban de unos 5,6 px (más chicas que el rótulo de abajo) y el peso entre logos iba de 1 a 2,7. */
  .lg-placa,.lg-muchos .lg-placa{--lg-escala:.8;height:104px;min-height:104px;padding:10px 8px 9px;gap:7px;border-radius:16px}
  /* ancho fijo (como en la compu) y como mucho 64 px de alto: el lugar del logo queda reservado aunque la imagen
     todavía no haya llegado (las de la derecha de la fila cargan al deslizar: sin esto, la placa se movía) */
  .lg-logo img{width:min(100%,calc(var(--lg-h) * var(--lg-escala) * var(--lg-a,3)),calc(64px * var(--lg-a,3)))}
  /* el logo se centra en su lugar y el rótulo de abajo queda a la misma altura en todas las placas */
  .lg-logo{flex:1 1 auto;min-height:0}
  .lg-rubro{font-size:12px;letter-spacing:.03em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .lg-placa[aria-pressed="true"]::after{width:32px;margin-left:-16px}
  .lg-placa-vos{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:0;align-content:center;justify-content:start;text-align:left;padding:10px 12px}
  .lg-vos-ico{grid-row:span 2;width:36px;height:36px;border-radius:12px}
  .lg-vos-ico .ico{width:18px;height:18px}
  .lg-vos-t{font-size:14px}
  .lg-vos-s{font-size:13px}
  .lg-ficha{padding:20px 18px 0;border-radius:var(--r-m)}
  .lg-avance{margin:0 -18px}
  .lg-ficha-cab{grid-template-columns:minmax(0,1fr);gap:14px}
  .lg-ficha-logo{justify-self:start;width:176px;height:92px;padding:12px}
  .lg-ficha-logo img{width:min(150px,calc(var(--lg-h) * .84 * var(--lg-a,3)));max-height:68px}
  .lg-del-grupo{margin-top:-4px;font-size:14px;min-height:34px}
  .lg-ficha h3{font-size:var(--t20)}
  .lg-resumen{font-size:var(--t15);line-height:1.5}
  .lg-hicimos li{grid-template-columns:46px minmax(0,1fr);gap:12px}
  .lg-hi-ico{width:46px;height:46px;border-radius:12px}
  .lg-hi-ico img{width:54px;height:54px}
  .lg-hicimos b{font-size:var(--t15)}
  .lg-hicimos span{font-size:14px}
  .lg-puente{font-size:14px;margin-top:18px}
  .lg-ficha-pie{flex-direction:column;align-items:stretch}
  .lg-honesto{flex:none}
  .lg-ctrl .lg-btn:nth-child(2){flex:1}
}

/* ── sin movimiento si la persona lo pidió ── */
@media (prefers-reduced-motion:reduce){
  .lg-placa,.lg-logo,.lg-rubro,.lg-vos-ico{transform:none!important}
  .lg-anima .lg-f.on{animation:none}
  .lg-avance,#lgPausa{display:none}
  .lg-grilla{scroll-behavior:auto}
}