/* ==================== MIMETIZACIÓN POR LUGAR (spec 34) ==================== */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Temas: solo reasignan tokens y fondo; las vistas no se duplican ---------- */
#app.lz-own[data-tema="estadio"],#app.lz-own[data-tema="casa"]{--bg:var(--abyss);background:var(--abyss);background-image:radial-gradient(120% 60% at 80% 0%,rgba(61,139,255,.22),transparent 60%),linear-gradient(180deg,var(--abyss) 0%,var(--abyss-2) 100%)}
#app.lz-own[data-tema="casa"]{background-image:radial-gradient(120% 60% at 50% 0%,rgba(111,179,230,.22),transparent 60%),linear-gradient(180deg,var(--casa-night) 0%,var(--abyss-2) 100%)}
#app.lz-own[data-tema="hotel"]{--bg:var(--ixtapa-sand);background:var(--ixtapa-sand);background-image:radial-gradient(90% 50% at 100% 0%,rgba(232,161,58,.16),transparent 60%),radial-gradient(80% 50% at 0% 100%,rgba(25,163,179,.12),transparent 60%)}

/* ---------- Pastilla del lugar en el header (reemplaza al lema) ---------- */
.top .hd-lugar{display:none}
#app.en-lugar:not(.sub) .top .brand{display:none}
#app.en-lugar:not(.sub) .top .hd-lugar{flex:1;min-width:0;display:flex;justify-content:center}
.top .hd-lugar{align-items:center;gap:8px;height:36px;margin:0 6px;padding:0 14px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);color:var(--white);font-family:var(--tech);font-size:1rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;-webkit-touch-callout:none;user-select:none;max-width:220px}
.top .hd-lugar b{overflow:hidden;text-overflow:ellipsis;font-weight:700}
.top .hd-lugar .pin,.lz-aviso .pin{position:relative;flex:none;width:10px;height:10px;border-radius:50%;background:var(--lugar-pin)}
.top .hd-lugar .pin::after,.lz-aviso .pin::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--lugar-pin);opacity:0;animation:lzPin 1.6s ease-out infinite}
@keyframes lzPin{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.4);opacity:0}}
.top .brand{-webkit-touch-callout:none;user-select:none}

/* Menú lateral: tarjeta del lugar arriba */
.drawer .dr-lugar{background:var(--glass);border:1px solid var(--glass-line);margin-bottom:8px}
.drawer .dr-lugar img{width:28px;height:28px;object-fit:contain;border-radius:6px;background:#fff;padding:2px}

/* ---------- Tabbar: los iconos cambian uno por uno al transformarse ---------- */
.tabbar.lz-morph button{animation:lzTab .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0) * 60ms)}
@keyframes lzTab{0%{opacity:0;transform:translateY(10px) scale(.85)}100%{opacity:1;transform:none}}

/* ---------- Aviso de llegada: como una notificación del teléfono ---------- */
.lz-aviso{position:absolute;z-index:90;top:calc(10px + env(safe-area-inset-top));left:10px;right:10px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;background:rgba(10,18,40,.82);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border:1px solid var(--glass-line);box-shadow:0 18px 40px rgba(0,0,0,.35);color:var(--white);text-align:left;transform:translateY(-130%);transition:transform .45s cubic-bezier(.2,.9,.25,1.05)}
.lz-aviso.on{transform:none}
.lz-aviso .ic{flex:none;width:40px;height:40px;border-radius:10px;background:var(--navy-g1);padding:4px;object-fit:contain}
.lz-aviso .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lz-aviso small{font-size:.72rem;color:var(--on-dark-2);letter-spacing:.02em}
.lz-aviso b{font-size:.9rem;font-weight:600;line-height:1.3}
.lz-aviso .pin{margin-right:4px}

/* ---------- Onda: cubre la app con la paleta del lugar y da la bienvenida ---------- */
.lz-onda{position:absolute;inset:0;z-index:95;overflow:hidden;color:var(--white);display:grid;place-items:center;text-align:center;clip-path:circle(0% at 86% 6%);transition:clip-path .65s cubic-bezier(.65,0,.35,1),opacity .55s ease}
.lz-onda.on{clip-path:circle(150% at 86% 6%)}
.lz-onda.out{opacity:0;pointer-events:none}
.lz-onda.red{clip-path:none;opacity:0;transition:opacity .2s}
.lz-onda.red.on{opacity:1}.lz-onda.red.out{opacity:0}
.lz-onda.t-estadio{background:radial-gradient(90% 60% at 50% 30%,rgba(61,139,255,.55),transparent 70%),linear-gradient(180deg,var(--abyss) 0%,#0a2a7a 100%)}
.lz-onda.t-hotel{color:var(--ixtapa-ink);background:radial-gradient(90% 60% at 50% 20%,rgba(232,161,58,.45),transparent 70%),linear-gradient(180deg,var(--ixtapa-sand) 0%,#bfe6e8 100%)}
.lz-onda.t-ligero{background:linear-gradient(160deg,var(--navy-g1) 0%,var(--navy-g2) 100%)}
.lz-onda.t-casa{background:var(--casa-night)}
.lz-bv{display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 28px}
.lz-logos{display:flex;align-items:center;gap:14px}
.lz-logos img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 6px 22px rgba(61,139,255,.55))}
.lz-logos .mk{width:auto;max-width:130px;height:64px;background:#fff;border-radius:14px;padding:8px;filter:none}
.lz-h{font-family:var(--tech);font-weight:700;font-size:clamp(2rem,9vw,2.6rem);line-height:1.02;text-transform:uppercase;letter-spacing:.01em}
.lz-sub{font-size:.98rem;opacity:.86;max-width:30ch}
.lz-onda:not(.red) .lz-bv>*{animation:lzUp .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:.5s}
.lz-onda:not(.red) .lz-bv>*:nth-child(2){animation-delay:.62s}
.lz-onda:not(.red) .lz-bv>*:nth-child(3){animation-delay:.74s}
@keyframes lzUp{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}

/* Nuestra Casa: el video oficial del túnel a la tribuna y el lema del club, línea por línea */
.lz-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lz-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,8,23,.15) 0%,rgba(3,8,23,.05) 40%,rgba(3,8,23,.78) 78%,rgba(3,8,23,.95) 100%)}
.lz-casa{position:absolute;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 24px}
.lz-lema{display:flex;flex-direction:column;gap:2px;font-family:var(--tech-wide);font-weight:600;font-size:.95rem;letter-spacing:.32em;text-transform:uppercase;opacity:.92}
.lz-lema span{opacity:0;animation:lzFade .7s ease both}
.lz-lema span:nth-child(1){animation-delay:.9s}.lz-lema span:nth-child(2){animation-delay:1.7s}.lz-lema span:nth-child(3){animation-delay:2.5s}
.lz-casa .lz-escudo{width:76px;height:76px;margin-top:10px;filter:drop-shadow(0 0 24px rgba(111,179,230,.7));opacity:0;animation:lzUp .7s cubic-bezier(.2,.8,.2,1) 3.4s both}
.lz-casa .lz-h{font-size:clamp(2.2rem,11vw,3rem);opacity:0;animation:lzUp .7s cubic-bezier(.2,.8,.2,1) 3.7s both;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.lz-casa .lz-sub{opacity:0;animation:lzFade .7s ease 4.2s both}
.lz-skip{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));left:0;right:0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;opacity:0;animation:lzFade .6s ease 4.6s both;color:var(--on-dark-2)}
.lz-onda.red .lz-lema span,.lz-onda.red .lz-escudo,.lz-onda.red .lz-h,.lz-onda.red .lz-sub,.lz-onda.red .lz-skip{animation:none;opacity:1}
@keyframes lzFade{0%{opacity:0}100%{opacity:1}}

/* Cortina al salir del lugar */
.lz-cortina{position:absolute;inset:0;z-index:95;background:var(--navy-g1);opacity:0;transition:opacity .3s;pointer-events:none}
.lz-cortina.on{opacity:1}.lz-cortina.out{opacity:0}

/* ---------- Pre-permiso ---------- */
.lz-perm{display:flex;flex-direction:column;gap:12px}
.lz-perm-ic{width:52px;height:52px;border-radius:16px;background:var(--bg-card);color:var(--navy);display:grid;place-items:center}
.lz-perm-ic svg{width:26px;height:26px}
.lz-perm h3{font-family:var(--tech);font-size:1.5rem;line-height:1.05;color:var(--navy);text-transform:uppercase}
.lz-perm ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:2px 0 6px}
.lz-perm li{display:flex;gap:10px;align-items:center;font-size:.92rem;color:var(--text)}
.lz-perm li svg{flex:none;width:20px;height:20px;color:var(--sky-ink)}
.lz-perm-pie{font-size:.76rem;color:var(--muted);text-align:center}

/* ---------- Hoja de la pastilla y control de lugares ---------- */
.lz-pill-sh{text-align:center}
.lz-pill-sh .mk{width:64px;height:64px;object-fit:contain;margin:0 auto 10px;display:block}
.lz-pill-sh h3,.lz-ctl-h{font-family:var(--tech);font-size:1.4rem;color:var(--navy);text-transform:uppercase}
.lz-ctl{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.lz-ctl-it{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 12px;border-radius:var(--r-tile);background:var(--bg-card);text-align:left;width:100%}
.lz-ctl-it img{width:36px;height:36px;object-fit:contain;border-radius:8px;background:#fff;padding:3px;flex:none}
.lz-ctl-it .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.lz-ctl-it b{color:var(--navy);font-size:.92rem}
.lz-ctl-it small{color:var(--muted);font-size:.76rem}
.lz-ctl-it kbd{font-family:var(--font);font-size:.68rem;color:var(--muted);border:1px solid var(--gray-light);border-radius:6px;padding:2px 6px}
.lz-ctl-it.on{outline:2px solid var(--sky-ink);background:#fff}
.lz-ctl-mom{display:flex;gap:8px;margin-top:12px}
@media (hover:none){.lz-ctl-it kbd{display:none}}
@media (max-height:620px){.lz-ctl-it{min-height:44px}.lz-ctl-it small{display:none}}

/* ---------- "Gracias por venir" (hoja oscura) ---------- */
.lz-sal{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--white)}
.lz-sal-mk{width:56px;height:56px;object-fit:contain;margin-bottom:8px}
.lz-sal h3{font-family:var(--tech);font-size:1.6rem;line-height:1.05;text-transform:uppercase}
.lz-sal-lugar{color:var(--on-dark-2);font-size:.86rem;margin-top:2px}
.lz-sal-list{list-style:none;width:100%;display:flex;flex-direction:column;gap:6px;margin:14px 0 10px;text-align:left;max-height:30vh;overflow:auto}
.lz-sal-list li{display:flex;align-items:center;gap:10px;font-size:.88rem;padding:8px 10px;border-radius:12px;background:var(--glass)}
.lz-sal-list li svg{width:16px;height:16px;color:var(--cyan);flex:none}
.lz-sal-list li span{flex:1}
.lz-sal-list li b{font-family:var(--num);color:var(--cyan)}
.lz-sal-tot{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--glass-line);font-weight:600}
.lz-nota{width:100%;margin-top:14px}
.lz-nota p{font-size:.9rem;color:var(--on-dark-2)}
.lz-caras{display:flex;justify-content:space-between;gap:6px;margin-top:8px}
.lz-caras button{flex:1;height:48px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-line);font-size:1.5rem;transition:transform .15s}
.lz-caras button:active{transform:scale(.92)}
.lz-gracias{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--cyan)!important;font-weight:600}
.lz-gracias svg{width:18px;height:18px}

/* ---------- Banner de los lugares ligeros, arriba del Inicio de siempre ---------- */
.lz-banner{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:12px;border-radius:var(--r-tile);background:#fff;box-shadow:var(--shadow-soft)}
.lz-banner-mk{flex:none;width:52px;height:52px;border-radius:12px;background:var(--bg-card);display:grid;place-items:center;padding:6px}
.lz-banner-mk img{max-width:100%;max-height:100%;object-fit:contain}
.lz-banner .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lz-banner .tx .flag{align-self:flex-start}
.lz-banner b{color:var(--navy);font-size:.95rem;line-height:1.2}
.lz-banner small{color:var(--muted);font-size:.78rem;line-height:1.3}
.lz-banner .btn{flex:none;min-height:40px}
@container (max-width:360px){.lz-banner{flex-wrap:wrap}.lz-banner .btn{width:100%}}

/* Perfil: switch de Lugares Cruz Azul */
.pf-lugares .switch{flex:none}

@media (prefers-reduced-motion:reduce){
  .tabbar.lz-morph button,.top .hd-lugar .pin::after,.lz-aviso .pin::after{animation:none}
  .lz-aviso{transition:none}
}

/* Los logos de las marcas de la Cooperativa son blancos: van sobre marino */
.lz-ctl-it img,.lz-banner-mk,.drawer .dr-lugar img,.lz-pill-sh .mk,.lz-logos .mk{background:var(--navy-g1)}
.lz-pill-sh .mk{border-radius:14px;padding:8px}
.lz-sal-mk{border-radius:12px;padding:6px;background:var(--navy-g1)}

/* Teléfonos angostos (320 px): la pastilla y los nombres de los tabs del lugar caben en una línea */
@container (max-width:340px){ .top .hd-lugar{font-size:.88rem;padding:0 10px;gap:6px;margin:0 4px} }
#app.en-lugar .tabbar button span{white-space:nowrap}
@media (max-width:340px){ #app.en-lugar .tabbar button{font-size:.64rem} }

/* Selector de lugar (menú lateral): misma hoja que el idioma, con el logo de cada lugar */
.lz-opt .code{background:var(--navy-g1);padding:5px}
.lz-opt .code img{width:100%;height:100%;object-fit:contain}
.lz-opt .code svg{width:20px;height:20px;color:var(--white)}
@media (max-height:620px){ .lang-opts:has(.lz-opt){gap:6px} .lz-opt{min-height:44px;padding:6px 12px} .lz-opt .code{width:32px;height:32px} .lz-opt small{display:none} }