/* ============================================================
   GLOW RAVE · aura.css — sistema visual del mockup aprobado
   Aura UI (vidrio, brillos suaves, profundidad, microanimaciones)
   sobre canvas claro. Un acento: teal --acento. Pesos ≤600.
   Generado desde mockup-glow-rave.html · mantener en sincronía.
   ============================================================ */
/* ── Tokens (estándar VIMEDIA · un acento) ── */
:root{
  /* DOS COLORES PARA TODO EL SISTEMA: fucsia y amarillo. Blanco y negro son las superficies.
     Fucsia = acción e identidad (botón, fecha, activo). Amarillo = gratis y lo que hay que ver.
     El fucsia sólido pasa contraste AA con texto blanco; el amarillo SIEMPRE lleva tinta encima. */
  --acento:#d91a7d; --acento-2:#b81569; --acento-osc:#a8125e; --acento-tint:#fdeaf4; --acento-glow:rgba(217,26,125,.5);
  --acento-viv:#ff3da6; --acento-glow2:rgba(255,61,166,.45);
  --amarillo:#ffc400; --amarillo-2:#e0ac00; --amarillo-f:#fff4cc; --amarillo-glow:rgba(255,196,0,.5);
  --tinta:#0b0d12; --blanco:#fff; --negro:#0b0d12;
  --g50:#f7f7f8; --g100:#efeff1; --g200:#e3e4e7; --g400:#a2a4aa; --g600:#6a6c72;
  /* Los estados también salen de los dos colores: gratis y aviso en amarillo, error en fucsia */
  --ok:#8a6a00; --ok-f:#fff4cc; --warn:#8a6a00; --warn-f:#fff4cc; --err:#b3115f; --err-f:#fdeaf4;
  --wa:#25d366;
  --r:12px; --r-sm:10px;
  --ease:cubic-bezier(.2,.8,.2,1); --t:180ms;
  --sombra:0 10px 24px -12px rgba(17,18,20,.14); --sombra-2:0 16px 32px -14px rgba(17,18,20,.22);
  --font:"Plus Jakarta Sans",system-ui,sans-serif; --display:Sora,"Plus Jakarta Sans",sans-serif;
  --pad:clamp(16px,3vw,44px); --max:1360px;
  --mk:0px; /* sin barra: la nav va al tope */
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{overflow-x:hidden}
body{font-family:var(--font);font-size:14px;color:var(--tinta);line-height:1.5;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(70vw 60vh at 8% -5%,rgba(217,26,125,.10),transparent 60%),
    radial-gradient(60vw 55vh at 100% 22%,rgba(255,196,0,.10),transparent 62%),
    radial-gradient(55vw 50vh at 50% 108%,rgba(217,26,125,.07),transparent 60%),
    var(--blanco);
  background-attachment:fixed}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.12}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:8px}


/* ══════════ PORTADA · Aura (Vibrant Depth): vidrio, brillo suave, profundidad ══════════ */
.portada{position:relative;height:calc(100vh - var(--mk));min-height:560px;overflow:hidden;background:#0b0d12;color:#fff;isolation:isolate}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease);will-change:opacity}
.slide .img{position:absolute;inset:0;background:center/cover no-repeat;transform:scale(1.08);transition:transform 9s linear}
.slide.on{opacity:1;z-index:1}
.slide.on .img{transform:scale(1)}
.slide::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(11,13,18,.35) 0%,rgba(11,13,18,0) 30%,rgba(11,13,18,.15) 60%,rgba(11,13,18,.82) 100%),
  linear-gradient(90deg,rgba(11,13,18,.55) 0%,rgba(11,13,18,0) 60%)}
.aura{position:absolute;z-index:2;pointer-events:none;filter:blur(70px);opacity:.55;mix-blend-mode:screen}
.aura.a{width:38vw;height:38vw;left:-8vw;bottom:-10vw;background:radial-gradient(circle,var(--acento-glow),transparent 65%);animation:respira 9s ease-in-out infinite}
.aura.b{width:26vw;height:26vw;right:8vw;top:6vh;background:radial-gradient(circle,rgba(207,79,190,.35),transparent 65%);animation:respira 11s ease-in-out 1.5s infinite}
@keyframes respira{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2vw,-2vh,0) scale(1.08)}}

/* menú DENTRO de la portada: vidrio */
.nav{position:fixed;top:var(--mk);left:0;right:0;z-index:60;transition:background .3s var(--ease),border-color .3s var(--ease)}
.nav-in{max-width:var(--max);margin:0 auto;padding:12px var(--pad);display:flex;align-items:center;gap:14px}
.nav .glass{display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 8px 30px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18)}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand img{height:30px}
.brand span{white-space:nowrap}.brand b{font-family:var(--display);font-size:14px;letter-spacing:.03em;display:none;line-height:1}.brand.sin-logo b{display:block}
.brand small{font-size:10px;opacity:.7;letter-spacing:.1em;text-transform:uppercase}
.nav-links{margin-left:auto}
.nav-links a{height:34px;padding:0 13px;border-radius:999px;display:inline-flex;align-items:center;font-weight:600;font-size:13px;color:#fff;transition:background var(--t) var(--ease)}
.nav-links a:hover{background:rgba(255,255,255,.14)}
.nav-links a.on{background:#fff;color:var(--tinta)}
.nav-acc{display:flex;gap:6px;align-items:center}
.ico{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:15px;transition:transform var(--t) var(--ease),color var(--t) var(--ease)}
.ico:hover{transform:translateY(-1px) scale(1.18)}
.nav.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--g200)}
.nav.solid .glass{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;padding:0}
.nav.solid .brand,.nav.solid .nav-links a,.nav.solid .ico{color:var(--tinta)}
.nav.solid .nav-links a:hover{background:var(--g50)}
.nav.solid .nav-links a.on{background:var(--g100);color:var(--tinta)}
.nav.solid .brand small{color:var(--g600);opacity:1}

/* botones */
.btn{height:38px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--g200);background:#fff;color:var(--tinta);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:background var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.btn:hover{background:var(--g50);border-color:var(--g400)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--acento);border-color:var(--acento);color:#fff;box-shadow:0 10px 26px -12px var(--acento-glow)}
.btn.pri:hover{background:var(--acento-2);border-color:var(--acento-2);box-shadow:0 14px 30px -12px var(--acento-glow)}
.btn.glass{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn.glass:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35)}
.btn.lg{height:44px;padding:0 18px;font-size:14px}
.btn .fa-whatsapp{color:var(--wa)}

/* contenido del slide: panel de vidrio */
.portada-in{position:absolute;inset:0;z-index:3;max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:flex;align-items:flex-end;padding-bottom:clamp(100px,14vh,140px)}
.panel{width:min(560px,100%);padding:clamp(18px,2.4vw,28px);border-radius:20px;background:rgba(14,16,22,.38);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:0 30px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.14)}
.panel .kick{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.panel h1{font-size:clamp(1.45rem,2.7vw,2.3rem);letter-spacing:-.025em;color:#fff;margin-bottom:10px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.panel h1 i,.panel h1 em{font-style:normal;color:var(--amarillo)}
.panel .meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.panel .cta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.panel .precio{margin-left:auto;font-family:var(--display);font-size:15px;color:#fff;opacity:.95}
.panel > *{animation:entra .6s var(--ease) both}
.panel > *:nth-child(2){animation-delay:.08s}
.panel > *:nth-child(3){animation-delay:.16s}
.panel > *:nth-child(4){animation-delay:.24s}
.panel.cambia > *{animation:none}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.pill{height:24px;padding:0 10px;border-radius:999px;background:var(--g100);color:var(--g600);font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pill.ok{background:var(--ok-f);color:var(--ok)}.pill.warn{background:var(--warn-f);color:var(--warn)}.pill.acc{background:var(--acento-tint);color:var(--acento-2)}
.pill.glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pill.glow{background:var(--acento);color:#fff;border-color:transparent;box-shadow:0 0 0 4px rgba(10,115,133,.22),0 8px 22px -8px var(--acento-glow)}

/* tira de eventos del slider */
.tira{position:absolute;right:var(--pad);bottom:clamp(100px,14vh,140px);z-index:4;display:flex;flex-direction:column;gap:8px}
.tira button{position:relative;display:flex;align-items:center;gap:10px;width:250px;padding:7px 9px 9px 7px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(14,16,22,.34);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);color:#fff;text-align:left;transition:background var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t) var(--ease)}
.tira button:hover{background:rgba(255,255,255,.14);transform:translateX(-3px)}
.tira button.on{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35)}
.tira .th{width:54px;height:40px;border-radius:9px;background:center/cover;flex-shrink:0;box-shadow:0 6px 16px -8px rgba(0,0,0,.8)}
.tira b{display:block;font-size:12.5px;font-weight:600;line-height:1.2}
.tira small{font-size:11px;opacity:.75}
.tira .prog{position:absolute;left:7px;right:9px;bottom:4px;height:2px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden;opacity:0}
.tira button.on .prog{opacity:1}
.tira .prog i{display:block;height:100%;width:0;background:#fff;animation:prog 7s linear forwards}
@keyframes prog{to{width:100%}}
.ctrl{position:absolute;left:var(--pad);bottom:52px;z-index:4;display:flex;align-items:center;gap:8px;color:#fff}
.ctrl .ico{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);width:40px;height:40px}
.ctrl .ico:hover{background:rgba(255,255,255,.22)}
.ctrl .num{font-family:var(--display);font-size:12.5px;opacity:.8;padding:0 6px;font-variant-numeric:tabular-nums}
.ctrl .num b{opacity:1;font-size:15px}
.baja{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:4;color:#fff;opacity:.7;font-size:11.5px;display:flex;flex-direction:column;align-items:center;gap:4px}
.baja i{animation:baja 1.6s ease-in-out infinite}
/* El chevron ya viene rotado 90deg, asi que su vaiven se hace sobre el eje girado */
.baja svg.ic{animation:bajaSvg 1.6s ease-in-out infinite}
@keyframes baja{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes bajaSvg{0%,100%{transform:rotate(90deg) translateX(0)}50%{transform:rotate(90deg) translateX(5px)}}

/* ── Debajo de la portada · mismo lenguaje Aura sobre canvas claro ── */
body{background:#f6f7fa}
.fondo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fondo i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35}
.fondo .f1{width:52vw;height:52vw;left:-14vw;top:30vh;background:radial-gradient(circle,rgba(10,115,133,.55),transparent 65%);animation:respira 14s ease-in-out infinite}
.fondo .f2{width:38vw;height:38vw;right:-10vw;top:70vh;background:radial-gradient(circle,rgba(207,79,190,.35),transparent 65%);animation:respira 17s ease-in-out 2s infinite}
.fondo .f3{width:30vw;height:30vw;left:35vw;top:130vh;background:radial-gradient(circle,rgba(90,168,255,.35),transparent 65%);animation:respira 19s ease-in-out 4s infinite}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sec{padding:26px 0}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sec-head h2{font-size:18px;display:flex;align-items:center;gap:10px}
.sec-head h2 i{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--acento);background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);box-shadow:0 6px 18px -8px var(--acento-glow)}
.sec-head a{height:32px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--tinta);display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(10px);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.sec-head a:hover{transform:translateY(-1px);box-shadow:var(--sombra)}

/* vidrio claro (Aura) */
.vidrio{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 14px 40px -22px rgba(17,18,20,.28),inset 0 1px 0 rgba(255,255,255,.9)}

/* Los 3 caminos: baldosas de vidrio montadas sobre la portada */
.caminos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:-44px;position:relative;z-index:5}
/* Baldosa chica: chip de icono discreto, titulo corto y flecha que avanza al pasar el cursor.
   El aro de color grande se veia de plantilla; el color entra al tocar, no de entrada. */
.camino{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.camino:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(17,18,20,.35),0 0 0 1px rgba(255,255,255,1)}
.camino > span.ic{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--acento);background:#fff;box-shadow:0 4px 12px -4px rgba(11,13,18,.28),0 0 0 1px rgba(11,13,18,.06);
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.camino > span.ic svg.ic{width:15px;height:15px}
.camino:hover > span.ic{background:var(--acento);color:#fff;transform:scale(1.06);box-shadow:0 8px 20px -8px var(--acento-glow)}
/* Los tres caminos van idénticos: círculo blanco con el ícono fucsia, y al pasar el
   cursor se invierte (círculo fucsia, ícono blanco). Acá NO entra el amarillo: el
   amarillo es de «gratis» y de la cartelera, y en estas tres fichas solo confundía. */
.camino b{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.camino small{color:var(--g600);font-size:11.5px}
.camino > svg.ic-flecha{margin-left:auto;color:var(--g400);width:15px;height:15px;flex-shrink:0;transition:transform var(--t) var(--ease),color var(--t) var(--ease)}
.camino:hover > svg.ic-flecha{transform:translateX(4px);color:var(--acento)}

/* Categorías: pastillas de vidrio */
.cats{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{height:36px;padding:0 14px;border-radius:999px;font-weight:600;font-size:12.5px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.cat i{color:var(--acento);font-size:12px}
.cat:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
.cat.on{background:var(--acento);border-color:var(--acento);color:#fff;box-shadow:0 10px 24px -10px var(--acento-glow)}
.cat.on i,.cat.on svg.ic{color:#fff}

/* Cifras: vidrio + brillo, un número y una palabra */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cifra{padding:14px 16px;border-radius:16px;display:flex;align-items:center;gap:12px}
.cifra i{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--acento);background:#fff;box-shadow:0 4px 12px -4px rgba(11,13,18,.24),0 0 0 1px rgba(11,13,18,.06);font-size:14px}
.cifra b{display:block;font-family:var(--display);font-size:20px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cifra small{color:var(--g600);font-size:12px}

/* Posters: la imagen manda; borde de vidrio y brillo al pasar */
.rail{display:flex;gap:14px;overflow-x:auto;padding:6px 4px 14px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:0 0 auto}
.poster{display:block;position:relative;width:200px;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:var(--g100) center/cover;box-shadow:0 20px 40px -24px rgba(17,18,20,.5);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.poster:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 30px 60px -26px rgba(17,18,20,.6),0 0 0 1px rgba(255,255,255,.8)}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,18,20,0) 34%,rgba(17,18,20,.88) 100%)}
.poster .top{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;z-index:2}
.poster .txt{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;color:#fff;padding:10px 12px;border-radius:12px;background:rgba(14,16,22,.32);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.poster .txt b{display:block;font-family:var(--display);font-size:14px;line-height:1.2;margin-bottom:2px}
.poster .txt small{font-size:11.5px;opacity:.85}
.poster.lg{width:310px}.poster.lg .txt b{font-size:17px}

/* Próximos: tarjeta imagen con pie de vidrio */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* ---------- TARJETA DE EVENTO ----------
   Cuatro datos y nada más: foto, fecha, departamento y precio. El nombre es el texto.
   Lo que va ENCIMA de la foto es sólido, nunca vidrio claro: sobre una foto clara el vidrio
   blanco desaparece. Dos velos, arriba y abajo, garantizan que se lea sobre cualquier imagen. */
.card{display:block;position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/11;background:var(--g100) center/cover;box-shadow:0 18px 40px -24px rgba(11,13,18,.45);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:0 28px 56px -26px rgba(11,13,18,.55)}
.card::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(11,13,18,.42) 0,rgba(11,13,18,0) 30%),
  linear-gradient(180deg,rgba(11,13,18,0) 44%,rgba(11,13,18,.6) 100%)}
/* La fecha es lo segundo que se busca: va sobre la foto, sólida y en el color de la marca */
.card .fecha{position:absolute;top:10px;left:10px;z-index:2;width:46px;padding:6px 0;border-radius:11px;background:var(--acento);color:#fff;display:flex;flex-direction:column;align-items:center;box-shadow:0 8px 20px -8px rgba(11,13,18,.7)}
.card .fecha b{font-family:var(--display);font-size:17px;line-height:1.02;letter-spacing:-.02em}
.card .fecha small{font-size:9px;text-transform:uppercase;letter-spacing:.09em;opacity:.92}
.card .body{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;display:flex;flex-direction:column;gap:6px;padding:11px 13px;border-radius:13px;background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 26px -16px rgba(11,13,18,.7)}
.card .body b.t{display:block;font-size:14px;line-height:1.28;font-weight:600;letter-spacing:-.01em;color:var(--tinta)}
.card .pie{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card .dep{font-size:11px;color:var(--g600);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .precio{font-family:var(--display);font-size:13px;font-weight:600;color:var(--tinta);white-space:nowrap}
/* Gratis es un dato que cambia la decisión: se pinta de amarillo con tinta encima */
.card .precio.free{background:var(--amarillo);color:var(--tinta);padding:2px 8px;border-radius:999px;font-size:11.5px}

/* Organizadores: fichas con avatar y su estado */
.orgs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* Los atajos de la portada usan la misma ficha que el organizador: foto real,
   nombre, nota corta y chevrón. Es lo que hace que no se vea vacío. */
/* auto-fit y no 4 fijas: si un atajo no tiene nada detrás no se dibuja, y los que
   quedan reparten el ancho completo en vez de dejar media fila vacía. */
.atajos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.org,.atajo{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;border-radius:16px;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.org:hover{transform:translateY(-3px);box-shadow:var(--sombra-2)}
.org .im,.atajo .im{display:block;width:58px;height:58px;border-radius:14px;background:var(--g100) center/cover;box-shadow:0 10px 20px -10px rgba(17,18,20,.5)}
.org .av,.atajo .av{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--acento);box-shadow:var(--sombra)}
.org .imw,.atajo .imw{display:block;position:relative;flex-shrink:0;width:58px;height:58px}
.org b,.atajo b{display:block;font-size:13.5px;font-weight:600;line-height:1.2}
.org small,.atajo small{color:var(--g600);font-size:11.5px;display:flex;align-items:center;gap:6px;margin-top:3px}
.org .ico,.atajo .ico{margin-left:auto;color:var(--g600)}

/* ── La tira de fotos del extremo (.slid) ─────────────────────────────────────
   La ficha ancha dejaba un hueco muerto en medio. En vez de estirar el texto,
   el extremo lleva un slider de las fotos de esos mismos eventos, detrás, y un
   degradado que va de blanco sólido (donde está el texto) a transparente. Así
   la ficha se ve viva y el texto no pierde ni un punto de contraste. */
.atajo,.org{position:relative;overflow:hidden;isolation:isolate}
/* ⚠ z-index:-1 la mandaba DETRÁS del propio fondo de vidrio de la ficha y no se
   veía nada. Va en 0, y el contenido sube a 1. */
.atajo .slid,.org .slid{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden}
.atajo > .imw,.atajo > .tx,.atajo > .ico,.org > .imw,.org > span,.org > .ico{position:relative;z-index:1}
/* ⚠ La franja NO lleva un degradado blanco encima: pintar #fff sobre el vidrio de
   la ficha dejaba una costura vertical donde empezaba. La foto se desvanece sola
   con una máscara, así se funde con el fondo que tenga la ficha (claro u oscuro). */
.atajo .slid i,.org .slid i{position:absolute;inset:0;background:var(--g100) center/cover;opacity:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 46%,rgba(0,0,0,.2) 72%,rgba(0,0,0,.42) 100%);
  mask-image:linear-gradient(90deg,transparent 46%,rgba(0,0,0,.2) 72%,rgba(0,0,0,.42) 100%);
  animation:tiraCruza 16s linear infinite;transition:opacity var(--t) var(--ease)}
/* Los tramos se solapan a propósito: con 4 fotos en 25% cada una, cortar en 25%
   dejaba medio segundo con todo en cero y la ficha parpadeaba en blanco. */
@keyframes tiraCruza{0%{opacity:0}4%{opacity:1}25%{opacity:1}31%{opacity:0}100%{opacity:0}}
/* Al pasar el cursor la foto se destapa un poco: la ficha responde sin moverse. */
.atajo:hover .slid i,.org:hover .slid i{-webkit-mask-image:linear-gradient(90deg,transparent 40%,rgba(0,0,0,.34) 68%,rgba(0,0,0,.62) 100%);
  mask-image:linear-gradient(90deg,transparent 40%,rgba(0,0,0,.34) 68%,rgba(0,0,0,.62) 100%)}
/* El chevrón queda encima de la foto: va en el círculo blanco del sistema. */
.atajo .ico,.org .ico{width:26px;height:26px;border-radius:50%;background:#fff;color:var(--acento);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 3px 10px -3px rgba(11,13,18,.3),0 0 0 1px rgba(11,13,18,.05)}
.atajo .ico svg.ic,.org .ico svg.ic{width:11px;height:11px}
@media (prefers-reduced-motion:reduce){.atajo .slid i,.org .slid i{animation:none}.atajo .slid i:first-child,.org .slid i:first-child{opacity:1}}

/* El atajo es más angosto que la ficha de organizador: la foto baja a 46. */
.atajo .imw,.atajo .im{width:46px;height:46px}
.atajo .im{border-radius:12px}
.atajo .tx{min-width:0}
.atajo b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atajo small{color:var(--g600);font-size:11px;line-height:1.3}
.atajo .av svg.ic{width:11px;height:11px}
.atajo:hover .ico svg.ic-chevron{transform:translateX(3px);color:var(--acento)}

/* Marcas: imagen a sangre con panel de vidrio y brillo */
.marcas{display:flex;position:relative;border-radius:20px;overflow:hidden;aspect-ratio:32/10;background:var(--g100) center/cover;align-items:center;box-shadow:0 30px 60px -30px rgba(17,18,20,.6)}
.marcas::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,13,18,.62),rgba(11,13,18,.05))}
.marcas .aura{opacity:.5}
.marcas .txt{position:relative;z-index:2;margin:clamp(16px,3vw,32px);padding:clamp(16px,2vw,24px);border-radius:16px;background:rgba(14,16,22,.36);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);color:#fff;display:flex;flex-direction:column;gap:12px;max-width:520px}
.marcas h2{color:#fff;font-size:clamp(1.05rem,1.7vw,1.4rem);letter-spacing:-.02em}
.marcas h2 i,.marcas h2 em{font-style:normal;color:var(--amarillo)}
.marcas .row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.marcas .row .btn{margin-left:auto}

/* Footer de vidrio */
.foot{margin:30px var(--pad) 26px}
.foot .in{max-width:var(--max);margin:0 auto;padding:16px 20px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--g600)}
.foot .links{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.foot .links a{height:30px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;color:var(--tinta);font-weight:500;transition:background var(--t) var(--ease)}
.foot .links a:hover{background:rgba(255,255,255,.8)}
.foot .pw{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--tinta);text-decoration:none;transition:opacity var(--t) var(--ease)}
.foot a.pw:hover{opacity:.75}
.foot .pw b{color:var(--acento)}
.foot .pw i{color:var(--acento);filter:drop-shadow(0 0 6px var(--acento-glow))}
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.rv.in{opacity:1;transform:none}

/* ══════════ ÁREA 2 · CATÁLOGO ══════════ */
.cab{position:relative;padding:calc(var(--mk) + 24px) 0 18px}
.cab .in{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cab h1{font-size:clamp(1.1rem,1.9vw,1.55rem);letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.cab h1 .pill{height:26px;font-size:12px}
.busca{margin-left:auto;display:flex;align-items:center;gap:8px;height:48px;padding:0 8px 0 16px;border-radius:999px;width:min(520px,100%)}
.busca i{color:var(--acento)}
.busca input{flex:1;border:0;background:transparent;font:inherit;font-size:14px;color:var(--tinta);outline:none;min-width:0}
.busca input::placeholder{color:var(--g400)}
.busca .btn{height:36px;border-radius:999px}
.filtros{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:4px}
.filtros .sep{width:1px;height:26px;background:var(--g200);margin:0 4px}
.filtros .ml{margin-left:auto;display:flex;gap:6px;align-items:center}
.filtros .ico{color:var(--g600);width:38px;height:38px;border-radius:50%}
.filtros .ico.on{background:var(--acento);color:#fff;box-shadow:0 8px 20px -8px var(--acento-glow)}
.tabs{display:flex;gap:4px;padding:4px;border-radius:999px;flex-wrap:nowrap}
.tabs a{white-space:nowrap}
/* La barra de filtros se desplaza de lado en vez de partir las palabras en tres renglones */
.filtros .tabs{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filtros .tabs::-webkit-scrollbar{display:none}
.tabs a{height:34px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--tinta);transition:background var(--t) var(--ease)}
.tabs a:hover{background:rgba(255,255,255,.9)}
.tabs a.on{background:var(--tinta);color:#fff}
.tabs a .n{height:18px;padding:0 6px;border-radius:999px;background:rgba(0,0,0,.08);font-size:11px;display:inline-flex;align-items:center}
.tabs a.on .n{background:rgba(255,255,255,.2)}
.res{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 12px;font-size:12.5px;color:var(--g600)}
.res b{color:var(--tinta);font-weight:600}
.grid.cat-grid{grid-template-columns:repeat(4,1fr)}
.card.ancha{grid-column:span 2;aspect-ratio:auto;min-height:clamp(180px,15vw,236px)} /* sin min-height se aplasta cuando queda sola en su fila */
.card.ancha .body b.t{font-size:15.5px}
.dia{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:8px 0 -2px;font-size:12.5px;color:var(--g600)}
.dia b{font-family:var(--display);font-size:14px;color:var(--tinta);font-weight:600}
.dia::after{content:"";flex:1;height:1px;background:var(--g200)}
.mas{display:flex;justify-content:center;padding:18px 0 8px}
@media (max-width:1100px){.grid.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){.grid.cat-grid{grid-template-columns:repeat(2,1fr)}.card.ancha{grid-column:span 2}.busca{width:100%;margin-left:0}.filtros .ml{margin-left:0}}
@media (max-width:520px){.grid.cat-grid{grid-template-columns:1fr}.card.ancha{grid-column:span 1;aspect-ratio:16/11;min-height:0}}

/* ══════════ ÁREA 3 · EVENTO Y MAPA ══════════ */
.ev-hero{position:relative;height:min(62vh,560px);min-height:420px;margin-top:var(--mk);overflow:hidden;background:#0b0d12 center/cover;color:#fff;isolation:isolate}
.ev-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,18,.2),rgba(11,13,18,0) 30%,rgba(11,13,18,.85) 100%),linear-gradient(90deg,rgba(11,13,18,.5),rgba(11,13,18,0) 60%)}
.ev-hero .aura{opacity:.5}
.ev-in{position:absolute;inset:0;z-index:2;max-width:var(--max);margin:0 auto;padding:0 var(--pad) 26px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ev-in .panel{width:min(640px,100%)}
.ev-in .panel h1{font-size:clamp(1.35rem,2.5vw,2.05rem);letter-spacing:-.025em}
.ev-in .orgline{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.85);margin-bottom:12px}
.ev-in .orgline .av{width:24px;height:24px;border-radius:50%;background:#fff center/cover;border:1px solid rgba(255,255,255,.5)}
.ev-side-acts{display:flex;gap:8px;align-items:flex-end;padding-bottom:6px}
.ev-side-acts .ico{width:44px;height:44px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px)}
.ev-side-acts .ico:hover{background:rgba(255,255,255,.22)}
.ev-tabs{position:sticky;top:calc(var(--mk) + 62px);z-index:30;margin-top:-22px;display:flex;justify-content:center}
.ev-tabs .tabs{box-shadow:0 14px 40px -20px rgba(17,18,20,.4)}
.ev-body{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start;padding-top:22px}
.ev-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.blq{padding:18px 20px;border-radius:18px}
.blq-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.blq-h h2{font-size:16px;display:flex;align-items:center;gap:10px}
.blq-h h2 i{color:var(--acento)}
.blq p{color:var(--g600);font-size:13.5px;max-width:70ch}
.datos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dato{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9)}
.dato i{width:32px;height:32px;border-radius:50%;background:var(--acento-tint);color:var(--acento);display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.dato b{display:block;font-size:13px;font-weight:600;line-height:1.2}
.dato small{color:var(--g600);font-size:11.5px}
.tks{display:block}
.tk{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:9px 4px;border-bottom:1px solid var(--g100)}
.tk:last-child{border-bottom:0}
.tk .ic{display:none}
.tk b{display:block;font-size:13px;font-weight:600}
.tk small{color:var(--g600);font-size:11px}
.tk .pr{font-family:var(--display);font-size:14px;text-align:right;min-width:64px}
.tk .pr small{display:none}
.qty{display:inline-flex;align-items:center;gap:0;height:32px;padding:0 2px;border-radius:999px;background:#fff;border:1px solid var(--g200)}
.qty button{width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:var(--tinta);display:inline-flex;align-items:center;justify-content:center;font-size:12px;transition:background var(--t) var(--ease)}
.qty button:hover{background:var(--g100)}
.qty span{min-width:20px;text-align:center;font-weight:600;font-size:13px}
/* MAPA · plano real: escenario y zonas en arcos de mesas, colores por zona, leyenda al lado */
.plan{position:relative;padding:14px 16px 12px;border-radius:18px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);z-index:1}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.plan-top h2{font-size:15px;display:flex;align-items:center;gap:9px}
.plan-top h2 i{color:var(--acento)}
.plan-top .leg{display:flex;gap:12px;font-size:11px;color:var(--g600)}
.plan-top .leg span{display:inline-flex;align-items:center;gap:5px}
.plan-top .leg i{width:9px;height:9px;border-radius:3px;background:#fff;border:1.5px solid var(--g400)}
.plan-top .leg i.s{background:var(--acento);border-color:var(--acento)}
.plan-top .leg i.p{background:var(--warn);border-color:var(--warn)}
.plan-top .leg i.v{background:var(--g200);border-color:var(--g200)}
.plan-body{display:grid;grid-template-columns:1fr 190px;gap:14px;align-items:center}
.plan svg{width:100%;height:auto;display:block}
.plan svg .mz{cursor:pointer;transition:filter var(--t) var(--ease),stroke-width var(--t) var(--ease)}
.plan svg .mz:hover{filter:drop-shadow(0 3px 6px rgba(17,18,20,.35));stroke-width:2.4}
.plan svg .mz.v{cursor:not-allowed}
.plan svg .mz.v:hover{filter:none;stroke-width:1.4}
.plan svg .lbl{font-family:var(--display);font-size:9.5px;font-weight:600;fill:#fff;letter-spacing:.18em}
.plan svg .sub{font-family:var(--font);font-size:7.5px;fill:rgba(255,255,255,.65)}
.plan svg .svc{font-family:var(--font);font-size:7.5px;fill:var(--g600)}
/* leyenda de zonas */
.zl{display:flex;flex-direction:column;gap:6px}
.zr{display:grid;grid-template-columns:10px 1fr auto;gap:8px 9px;align-items:center;padding:7px 9px;border-radius:10px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);cursor:pointer;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.zr:hover{transform:translateX(-2px);box-shadow:var(--sombra)}
.zr .dot{width:10px;height:10px;border-radius:3px;background:var(--zc)}
.zr b{font-size:12px;font-weight:600;line-height:1.1}
.zr .pr{font-family:var(--display);font-size:12px;font-weight:600}
.zr .bar{grid-column:2/4;height:3px;border-radius:3px;background:var(--g100);overflow:hidden}
.zr .bar i{display:block;height:100%;background:var(--zc);border-radius:3px}
.zr small{grid-column:2/4;margin-top:-4px;font-size:10px;color:var(--g600)}
@media (max-width:760px){.plan-body{grid-template-columns:1fr}.zl{flex-direction:row;flex-wrap:wrap}.zr{flex:1 1 140px}}
/* vista al centro: mesa con sus sillas alrededor */
.modal-mesa{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(17,18,20,.26);backdrop-filter:blur(4px)}
.modal-mesa.on{display:flex}
.mm{width:min(380px,100%);border-radius:20px;padding:16px 18px 18px;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,1);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:0 40px 90px -40px rgba(17,18,20,.6);animation:entra .35s var(--ease) both}
.mm-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.mm-h .dot{width:10px;height:10px;border-radius:50%;background:var(--zc)}
.mm-h b{font-size:14px;font-weight:600}
.mm-h small{display:block;font-size:11.5px;color:var(--g600)}
.mm-h .ico{margin-left:auto;width:32px;height:32px;color:var(--g600)}
.ronda{position:relative;width:220px;height:220px;margin:8px auto 4px}
.ronda .tbl{position:absolute;left:50%;top:50%;width:92px;height:92px;transform:translate(-50%,-50%);border-radius:14px;background:#fff;border:1.5px solid var(--zc);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 14px 30px -18px rgba(17,18,20,.45)}
.ronda .tbl b{font-family:var(--display);font-size:15px;font-weight:600}
.ronda .tbl small{font-size:10.5px;color:var(--g600)}
.ronda .ch{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#fff;border:1.5px solid var(--g200);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;cursor:pointer;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.ronda .ch:hover{transform:scale(1.12);border-color:var(--acento)}
.ronda .ch.s{background:var(--acento);border-color:var(--acento);color:#fff;box-shadow:0 0 0 3px rgba(10,115,133,.18)}
.ronda .ch.r{background:var(--warn-f);border-color:#ead9a8;color:var(--warn);cursor:not-allowed}
.ronda .ch.v{background:var(--g100);border-color:var(--g100);color:var(--g400);cursor:not-allowed}
.mm-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.opt{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid var(--g200);font-size:12px;cursor:pointer;transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.opt b{font-weight:600}
.opt small{color:var(--g600);font-size:11px}
.opt.on{border-color:var(--acento);background:var(--acento-tint)}
.mm-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.mm-f .tot b{font-family:var(--display);font-size:16px}
.mm-f .tot small{display:block;font-size:11px;color:var(--g600)}
@media (max-width:640px){.areas{grid-template-columns:1fr}.ar .lb{border-top:1px solid var(--g100);padding-bottom:0}.ar .ms{border-top:0;padding-top:4px}.stg{margin:0 8%}.ronda{width:200px;height:200px}}
.ev-aside{position:sticky;top:calc(var(--mk) + 120px);display:flex;flex-direction:column;gap:14px}
.sel-box{padding:16px;border-radius:18px}
.sel-box h3{font-size:14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sel-box h3 .pill{height:22px}
.sel-it{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(17,18,20,.06);font-size:12.5px}
.sel-it .c{width:8px;height:8px;border-radius:50%;background:var(--acento);flex-shrink:0}
.sel-it b{font-weight:600}
.sel-it small{color:var(--g600);display:block;font-size:11px}
.sel-it .p{margin-left:auto;font-family:var(--display);font-size:13px}
.sel-it .ico{width:28px;height:28px;color:var(--g400);font-size:11px}
.tot{display:flex;justify-content:space-between;font-size:12.5px;color:var(--g600);padding:4px 0}
.tot.big{font-size:15px;color:var(--tinta);padding-top:10px;margin-top:6px;border-top:1px solid rgba(17,18,20,.08)}
.tot.big b{font-family:var(--display);font-size:20px}
.sel-box .btn{width:100%;height:44px;margin-top:10px}
.timer{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--warn);justify-content:center;margin:0 0 8px;padding:7px 10px;border-radius:10px;background:var(--warn-f)}
.timer b{font-family:var(--display);color:var(--warn)}
.mini-map{padding:12px;border-radius:16px}
.mini-map .m{height:120px;border-radius:12px;background:var(--g100) center/cover;position:relative;overflow:hidden}
.mini-map .m .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%) rotate(-45deg);width:32px;height:32px;border-radius:50% 50% 50% 0;background:var(--acento);box-shadow:0 10px 20px -8px var(--acento-glow)}
.mini-map .m .pin::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}
.mini-map .row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:12.5px}
.mini-map .row b{display:block;font-weight:600}
.mini-map .row small{color:var(--g600)}
.rel .rail .poster{width:170px}
@media (max-width:1000px){.ev-body{grid-template-columns:1fr}.ev-aside{position:static}.datos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.ev-hero{height:auto;min-height:0;padding-top:70px}.ev-in{position:relative;padding-bottom:18px}.ev-hero .meta .pill{white-space:normal;height:auto;min-height:24px;padding:5px 10px;line-height:1.35;align-items:flex-start;text-align:left}.ev-hero .meta .pill svg.ic{margin-top:2px}.ev-tabs{position:static;margin:10px 0 0;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.ev-tabs::-webkit-scrollbar{display:none}.ev-tabs .tabs{flex-wrap:nowrap;box-shadow:var(--sombra)}.ev-tabs .tabs a{white-space:nowrap}.tk{grid-template-columns:1fr auto;gap:6px 10px}.tk .pr{text-align:right;min-width:0}.tk .btn,.tk .pill{grid-column:1/-1;justify-self:start}.tk .qty{grid-column:1/-1;justify-self:start}.datos{grid-template-columns:1fr 1fr}.zr{flex:1 1 100%}.plan{overflow:hidden}.mm{width:min(360px,calc(100vw - 24px))}}

/* ══════════ ÁREA 4 · COMPRA ══════════ */
.ck-wrap{padding-top:calc(var(--mk) + 84px)}
.ck-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.ck-head h1{font-size:clamp(1.2rem,2vw,1.6rem);display:flex;align-items:center;gap:10px}
.ck-head h1 i{color:var(--acento)}
.pasos{display:flex;gap:4px;padding:4px;border-radius:999px}
.pasos span{height:32px;padding:0 12px 0 6px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--g600)}
.pasos span i{width:20px;height:20px;border-radius:50%;background:var(--g100);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-style:normal;color:var(--g600)}
.pasos span.ok{color:var(--ok)}.pasos span.ok i{background:var(--ok-f);color:var(--ok)}
.pasos span.on{background:var(--tinta);color:#fff}.pasos span.on i{background:var(--acento);color:#fff}
.ck-body{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
.ck-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.ck-card{padding:18px 20px;border-radius:18px}
.ck-card h2{font-size:15px;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ck-card h2 i{width:26px;height:26px;border-radius:50%;background:var(--acento);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-style:normal}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fg .f{display:flex;flex-direction:column;gap:4px}
.fg .f.full{grid-column:1/-1}
.fg label{font-size:11.5px;color:var(--g600);font-weight:600}
.fg input{height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--g200);background:rgba(255,255,255,.85);font:inherit;font-size:13.5px;color:var(--tinta);outline:none;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.fg input:focus{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-tint)}
.fg input::placeholder{color:var(--g400)}
.ck-sw{display:flex;gap:4px;padding:3px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--g200);width:max-content;margin-bottom:12px}
.ck-sw span{height:30px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;color:var(--g600);cursor:pointer}
.ck-sw span.on{background:var(--tinta);color:#fff}
.pagos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pago{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:rgba(255,255,255,.7);border:1.5px solid var(--g200);cursor:pointer;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.pago:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
.pago.on{border-color:var(--acento);background:var(--acento-tint);box-shadow:0 0 0 4px rgba(10,115,133,.1)}
.pago .ic{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--g200);color:var(--acento);font-size:17px;flex-shrink:0}
.pago b{display:block;font-size:13.5px;font-weight:600}
.pago small{color:var(--g600);font-size:11.5px}
.pago .chk{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--g200);background:#fff}
.pago.on .chk{background:var(--acento);border-color:var(--acento)}
.pago.on .chk::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.demo{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:var(--warn-f);color:var(--warn);font-size:11px;font-weight:600}
.paggo{margin-top:12px;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.75);border:1px solid var(--g200)}
.paggo .lg{width:52px;height:52px;border-radius:14px;background:#111214;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:-.02em;flex-shrink:0;box-shadow:0 12px 24px -14px rgba(17,18,20,.6)}
.paggo b{display:block;font-size:13.5px;font-weight:600}
.paggo small{color:var(--g600);font-size:12px;display:block}
.paggo .steps{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.paggo .steps span{height:24px;padding:0 9px;border-radius:999px;background:var(--g50);border:1px solid var(--g200);font-size:11px;color:var(--g600);display:inline-flex;align-items:center;gap:6px}
.paggo .steps span i{color:var(--acento);font-size:10px}
.verif{display:none;align-items:center;gap:14px;margin-top:12px;padding:14px 16px;border-radius:14px;background:var(--acento-tint);border:1px solid rgba(10,115,133,.25)}
.verif.on{display:flex}
.verif .sp{width:38px;height:38px;border-radius:50%;border:3px solid rgba(10,115,133,.2);border-top-color:var(--acento);animation:gira .8s linear infinite;flex-shrink:0}
@keyframes gira{to{transform:rotate(360deg)}}
.verif b{display:block;font-size:13px;color:var(--acento)}
.verif small{font-size:11.5px;color:var(--g600)}
.bancos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.banco{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.75);border:1px solid var(--g200);font-size:12px}
.banco .lg{width:36px;height:36px;border-radius:10px;background:var(--g100);display:inline-flex;align-items:center;justify-content:center;color:var(--acento);font-size:15px}
.banco b{display:block;font-size:12.5px;font-weight:600}
.banco small{color:var(--g600)}
.banco .cp{margin-left:auto;height:28px;padding:0 10px;border-radius:8px;background:#fff;border:1px solid var(--g200);font-family:ui-monospace,Menlo,monospace;font-size:11px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.banco .cp i{color:var(--g600);font-size:10px}
/* resumen */
.ck-side{position:sticky;top:calc(var(--mk) + 76px);display:flex;flex-direction:column;gap:12px}
.res-ev{display:flex;gap:12px;align-items:center}
.res-ev .im{width:74px;height:74px;border-radius:12px;background:var(--g100) center/cover;flex-shrink:0;box-shadow:0 12px 24px -14px rgba(17,18,20,.5)}
.res-ev b{display:block;font-size:14px;font-weight:600;line-height:1.2}
.res-ev small{display:block;color:var(--g600);font-size:11.5px;margin-top:2px}
.res-it{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:7px 0;border-bottom:1px solid rgba(17,18,20,.06)}
.res-it small{display:block;color:var(--g600);font-size:11px}
.res-it b{font-weight:600}
.cupon{display:flex;gap:6px;margin:10px 0}
.cupon input{flex:1;height:34px;padding:0 10px;border-radius:9px;border:1px solid var(--g200);background:#fff;font:inherit;font-size:12.5px;outline:none}
.cupon .btn{height:34px}
.seguro{display:flex;justify-content:center;gap:14px;font-size:11px;color:var(--g600);margin-top:10px}
.seguro span{display:inline-flex;align-items:center;gap:5px}
.seguro i{color:var(--ok)}
/* confirmación */
.ok-hero{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:18px}
.ok-hero .ic{width:52px;height:52px;border-radius:50%;background:var(--ok);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 0 0 8px var(--ok-f);animation:lat 1.4s var(--ease) .3s 1}
@keyframes lat{0%,100%{transform:scale(1)}40%{transform:scale(1.08)}}
.ok-hero b{display:block;font-size:16px;font-weight:600}
.ok-hero small{color:var(--g600);font-size:12.5px}
.ok-hero .acts{margin-left:auto;display:flex;gap:6px}
.tix{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tix .t{display:grid;grid-template-columns:1fr 128px;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95);box-shadow:var(--sombra)}
.tix .t .l{padding:14px;display:flex;flex-direction:column;gap:6px}
.tix .t .l .im{height:70px;border-radius:10px;background:var(--g100) center/cover}
.tix .t .l b{font-size:13px;font-weight:600}
.tix .t .l small{color:var(--g600);font-size:11px}
.tix .t .l .tag{display:inline-flex;gap:6px;flex-wrap:wrap}
.tix .t .r{border-left:1px solid var(--g200);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;background:#fff}
.qr{width:92px;height:92px;border-radius:8px;background:
 repeating-linear-gradient(90deg,#111 0 6px,transparent 6px 12px),
 repeating-linear-gradient(0deg,#111 0 6px,transparent 6px 12px);background-blend-mode:multiply;position:relative;opacity:.85}
.qr::before,.qr::after{content:"";position:absolute;width:24px;height:24px;border:5px solid #111;border-radius:3px;background:#fff}
.qr::before{left:4px;top:4px}.qr::after{right:4px;top:4px}
.tix .t .r small{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--g600)}
.tix .t .r .pw{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--g600)}
.tix .t .r .pw b{color:var(--acento);font-weight:600}
@media (max-width:1200px){.ok-hero{flex-wrap:wrap}.ok-hero > span:not(.au):not(.ic):not(.acts){flex:1 1 200px;min-width:0}.ok-hero .acts{margin-left:0;width:100%;padding-left:66px}.tix{grid-template-columns:1fr}}
@media (max-width:960px){.ck-body{grid-template-columns:1fr}.ck-side{position:static}.tix{grid-template-columns:1fr}.ok-hero .acts{padding-left:0}}
@media (max-width:640px){.fg,.pagos,.bancos,.tf{grid-template-columns:1fr}.ok-hero .acts{flex-wrap:wrap;width:100%}.pasos span.ok{font-size:0;padding:0 6px;gap:0}.pasos span.ok i{font-size:10px}.pasos span{padding:0 10px 0 5px}.tix .t{grid-template-columns:1fr}.tix .t .r{border-left:0;border-top:1px solid var(--g200)}.ok-hero{flex-wrap:wrap}.ok-hero .acts{margin-left:0}}

/* ══════════ AURA UI · profundidad viva en todas las áreas ══════════ */
.fondo i{opacity:.5}
.vidrio{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.56));box-shadow:0 18px 46px -26px rgba(17,18,20,.32),0 30px 60px -40px var(--acento-glow),inset 0 1px 0 rgba(255,255,255,.95)}
.au{position:absolute;border-radius:50%;filter:blur(52px);opacity:.62;pointer-events:none;z-index:0;animation:respira 12s ease-in-out infinite}
.au.t{background:radial-gradient(circle,rgba(217,26,125,.7),transparent 66%)}
.au.m{background:radial-gradient(circle,rgba(255,61,166,.6),transparent 66%);animation-delay:2s}
.au.b{background:radial-gradient(circle,rgba(255,196,0,.62),transparent 66%);animation-delay:4s}
.au.g{background:radial-gradient(circle,rgba(255,196,0,.55),transparent 66%);animation-delay:3s}
.rel-au{position:relative;overflow:hidden;isolation:isolate}
.rel-au>*:not(.au){position:relative;z-index:1}
/* activos con resplandor */
.tabs a.on,.pasos span.on{box-shadow:0 10px 24px -12px rgba(17,18,20,.7)}
.cat.on,.ck-sw span.on{box-shadow:0 10px 24px -10px var(--acento-glow)}
.zr:hover{box-shadow:0 14px 30px -14px var(--acento-glow),var(--sombra)}
.card:hover,.poster:hover{box-shadow:0 30px 60px -26px rgba(17,18,20,.55),0 18px 40px -20px var(--acento-glow),0 0 0 1px rgba(255,255,255,.8)}
.pago.on{box-shadow:0 0 0 4px rgba(10,115,133,.1),0 16px 34px -18px var(--acento-glow)}
.pago .ic{box-shadow:0 10px 20px -12px rgba(17,18,20,.35)}
.pago.on .ic{background:var(--acento);color:#fff;border-color:var(--acento);box-shadow:0 12px 24px -12px var(--acento-glow)}
.busca{box-shadow:0 20px 50px -26px var(--acento-glow),0 18px 46px -26px rgba(17,18,20,.3),inset 0 1px 0 rgba(255,255,255,.95)}
.busca:focus-within{box-shadow:0 0 0 4px var(--acento-tint),0 20px 50px -26px var(--acento-glow)}
.dia::after{background:linear-gradient(90deg,var(--g200),transparent)}
.zn,.plan,.sel-box,.mini-map,.ck-card,.blq{box-shadow:0 18px 46px -26px rgba(17,18,20,.32),0 30px 60px -40px var(--acento-glow),inset 0 1px 0 rgba(255,255,255,.95)}
.sel-box .btn.pri,.ck-side .btn.pri{box-shadow:0 14px 34px -14px var(--acento-glow)}
.tix .t{box-shadow:0 18px 46px -26px rgba(17,18,20,.32),0 20px 50px -30px var(--acento-glow)}
.tix .t:hover{transform:translateY(-3px)}
.tix .t{transition:transform var(--t) var(--ease)}
.ok-hero .ic{box-shadow:0 0 0 8px var(--ok-f),0 16px 34px -14px rgba(20,99,74,.6)}
.paggo{background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(230,242,244,.8))}
/* La banda del catálogo era vidrio blanco con dos manchas fucsia detrás: el
   resultado era un degradado rosa lavado, justo lo que el cliente no quiere.
   Va negra: sobre el negro el mismo brillo fucsia se lee como brillo, no como
   tinte. `.oscuro` en el markup invierte los tokens de lo que va adentro. */
.cab-band{position:relative;overflow:hidden;isolation:isolate;border-radius:20px;padding:24px 26px;margin-top:calc(var(--mk) + 70px);background:var(--negro);border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px -40px rgba(0,0,0,.8),0 26px 60px -44px var(--acento-glow)}
.cab-band .au{opacity:.34}
.cab-band .cab{padding:0}

/* ══════════ ÁREA 5 · ORGANIZADOR ══════════ */
.org-wrap{padding-top:calc(var(--mk) + 80px);display:grid;grid-template-columns:232px 1fr;gap:18px;align-items:start}
.side{position:sticky;top:calc(var(--mk) + 76px);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:3px}
.side .me{display:flex;align-items:center;gap:10px;padding:8px 8px 12px;border-bottom:1px solid rgba(17,18,20,.06);margin-bottom:6px}
.side .me .av{width:40px;height:40px;border-radius:12px;background:var(--g100) center/cover;box-shadow:0 10px 20px -10px var(--acento-glow);flex-shrink:0}
.side .me b{display:block;font-size:13px;font-weight:600;line-height:1.15}
.side .me small{display:block;margin-top:3px}
.side a{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:10px;font-size:13px;font-weight:600;color:var(--tinta);transition:background var(--t) var(--ease),transform var(--t) var(--ease)}
.side a i{width:18px;text-align:center;color:var(--g600);font-size:13px}
.side a:hover{background:rgba(255,255,255,.85);transform:translateX(2px)}
.side a.on{background:var(--tinta);color:#fff;box-shadow:0 10px 24px -12px rgba(17,18,20,.6)}
.side a.on i{color:#fff}
.side a .n{margin-left:auto;height:18px;padding:0 6px;border-radius:999px;background:var(--acento);color:#fff;font-size:10.5px;display:inline-flex;align-items:center}
.side .lbl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--g600);padding:10px 10px 3px;font-weight:600}
.org-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.org-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.org-h h1{font-size:clamp(1.15rem,1.9vw,1.5rem);display:flex;align-items:center;gap:10px}
.org-h h1 i{color:var(--acento)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{position:relative;overflow:hidden;isolation:isolate;padding:14px 16px;border-radius:16px;display:flex;flex-direction:column;gap:6px}
.kpi>*:not(.au){position:relative;z-index:1}
.kpi .t{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--g600);font-weight:600}
.kpi .t i{width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid rgba(255,255,255,.95);display:inline-flex;align-items:center;justify-content:center;color:var(--acento);font-size:11px;box-shadow:0 8px 16px -10px var(--acento-glow)}
.kpi b{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1}
.kpi small{font-size:11px;color:var(--g600)}
.kpi .sp{height:26px;margin-top:2px}
.kpi .sp svg{width:100%;height:100%;display:block}
.blk{padding:16px 18px;border-radius:18px;position:relative;overflow:hidden;isolation:isolate}
.blk>*:not(.au){position:relative;z-index:1}
.blk-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.blk-h h2{font-size:15px;display:flex;align-items:center;gap:9px}
.blk-h h2 i{color:var(--acento)}
.evs{display:flex;flex-direction:column;gap:6px}
.evr{display:grid;grid-template-columns:52px 1fr auto auto;align-items:center;gap:12px;padding:8px 10px 8px 8px;border-radius:12px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.evr:hover{transform:translateY(-2px);box-shadow:0 16px 34px -18px var(--acento-glow),var(--sombra)}
.evr .im{width:52px;height:40px;border-radius:8px;background:var(--g100) center/cover}
.evr b{display:block;font-size:13px;font-weight:600;line-height:1.2}
.evr small{color:var(--g600);font-size:11.5px}
.evr .chips{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.evr .acts{display:flex;gap:2px}
.evr .acts .ico{width:30px;height:30px;color:var(--g600);font-size:12px}
.pill.rev{background:var(--warn-f);color:var(--warn)}
.pill.err{background:var(--err-f);color:var(--err)}
.pill.draft{background:var(--g100);color:var(--g600)}
/* wizard */
.wiz{display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start}
.wz-steps{display:flex;gap:4px;padding:4px;border-radius:999px;width:max-content;max-width:100%;overflow-x:auto;margin-bottom:12px}
.wz-steps span{height:32px;padding:0 12px 0 6px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--g600);white-space:nowrap}
.wz-steps span i{width:20px;height:20px;border-radius:50%;background:var(--g100);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-style:normal}
.wz-steps span.on{background:var(--tinta);color:#fff;box-shadow:0 10px 24px -12px rgba(17,18,20,.6)}
.wz-steps span.on i{background:var(--acento);color:#fff}
.drop{position:relative;border-radius:16px;overflow:hidden;min-height:250px;background:var(--g100) center/cover;border:1px solid rgba(255,255,255,.95);box-shadow:0 24px 50px -28px rgba(17,18,20,.5);display:flex;align-items:flex-end}
.drop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,18,0) 40%,rgba(11,13,18,.7) 100%)}
.drop.vacio::after{background:none}
.drop.vacio{background:var(--g100)}
.drop.vacio .dz b,.drop.vacio .dz small{color:var(--tinta);text-shadow:none}
.drop.vacio .dz small{color:var(--g600)}
.drop.vacio .dz .ic{background:#fff;border-color:var(--g200);color:var(--acento)}
.drop .dz{position:absolute;inset:14px;border-radius:12px;border:1px solid rgba(255,255,255,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;z-index:2;background:rgba(14,16,22,.18);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.drop .dz .ic{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);display:inline-flex;align-items:center;justify-content:center;font-size:18px;backdrop-filter:blur(10px)}
.drop .dz b{font-size:14px;font-weight:600}
.drop .dz small{font-size:11.5px;opacity:.85}
.drop .dz .btn{margin-top:6px}
.drop .foot{position:relative;z-index:3;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;width:100%;color:#fff;font-size:12px}
.drop .foot .pill{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px)}
.formatos{margin-top:12px}
.formatos .t{font-size:11.5px;color:var(--g600);font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.formatos .t i{color:var(--acento)}
.fx{display:grid;grid-template-columns:2.2fr 1.4fr 1fr 1fr .8fr;gap:8px;align-items:end}
.fx div{border-radius:10px;background:var(--g100) center/cover;position:relative;overflow:hidden;box-shadow:0 12px 24px -16px rgba(17,18,20,.6)}
.fx div::after{content:attr(data-l);position:absolute;left:6px;bottom:5px;font-size:9px;color:#fff;font-weight:600;padding:2px 6px;border-radius:999px;background:rgba(17,18,20,.55);backdrop-filter:blur(6px);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.fx .hero{aspect-ratio:21/9}.fx .wide{aspect-ratio:16/9}.fx .post{aspect-ratio:3/4}.fx .sq{aspect-ratio:1}.fx .tk{aspect-ratio:4/3;border-radius:7px}
.wz-side{display:flex;flex-direction:column;gap:10px}
.wz-side .row{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:6px 0;border-bottom:1px solid rgba(17,18,20,.06)}
.wz-side .row small{color:var(--g600)}
.wz-side .row:last-child{border:0}
.tipo{display:grid;gap:8px}
.tipo label input{position:absolute;opacity:0;pointer-events:none;margin:0}
.tipo label{position:relative;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.72);border:1.5px solid var(--g200);font-size:12.5px;cursor:pointer}
.tipo label b{display:block;font-weight:600}
.tipo label small{color:var(--g600);font-size:11px}
.tipo label.on{border-color:var(--acento);background:var(--acento-tint);box-shadow:0 12px 26px -16px var(--acento-glow)}
.tipo label .r{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--g200);background:#fff;margin-left:auto;flex-shrink:0;position:relative}
.tipo label.on .r{border-color:var(--acento);background:var(--acento)}
.tipo label.on .r::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.regla{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border-radius:9px;background:var(--warn-f);color:var(--warn);font-size:11.5px;font-weight:600}
/* solicitudes */
.sol{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95)}
.sol b{display:block;font-size:13px;font-weight:600}
.sol small{color:var(--g600);font-size:11.5px}
.sol .est{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.flow{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:4px}
.flow span{height:22px;padding:0 8px;border-radius:999px;background:var(--g100);color:var(--g600);font-size:10.5px;font-weight:600;display:inline-flex;align-items:center}
.flow span.done{background:var(--ok-f);color:var(--ok)}.flow span.now{background:var(--acento);color:#fff;box-shadow:0 8px 18px -8px var(--acento-glow)}
.flow i{color:var(--g400);font-size:9px}
@media (max-width:1000px){.org-wrap{grid-template-columns:1fr}.side{position:static;flex-direction:row;flex-wrap:wrap}.side .me{width:100%;border:0;padding-bottom:4px}.side .lbl{display:none}.kpis{grid-template-columns:repeat(2,1fr)}.wiz{grid-template-columns:1fr}}
@media (max-width:640px){.kpis{grid-template-columns:1fr 1fr}.evr{grid-template-columns:52px 1fr}.evr .chips{justify-content:flex-start}.fx{grid-template-columns:repeat(3,1fr)}.sol{grid-template-columns:1fr}.sol .est{align-items:flex-start}}

/* ══════════ ÁREA 6 · GLOWPASS ADMIN ══════════ */
.adm-wrap{padding-top:calc(var(--mk) + 80px);display:grid;grid-template-columns:232px 1fr;gap:18px;align-items:start}
.adm .side .me .av{border-radius:12px;background:#111214;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-size:11px;font-weight:600}
.adm .kpis{grid-template-columns:repeat(4,1fr)}
.adm .kpi b{font-size:20px}
.tbl{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:12.5px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--g600);font-weight:600;padding:0 10px 2px}
.tbl td{background:rgba(255,255,255,.72);border-top:1px solid rgba(255,255,255,.95);border-bottom:1px solid rgba(255,255,255,.95);padding:9px 10px;vertical-align:middle}
.tbl td:first-child{border-left:1px solid rgba(255,255,255,.95);border-radius:12px 0 0 12px}
.tbl td:last-child{border-right:1px solid rgba(255,255,255,.95);border-radius:0 12px 12px 0}
.tbl tr:hover td{background:rgba(255,255,255,.92)}
.tbl b{font-weight:600;display:block;line-height:1.2}
.tbl small{color:var(--g600);font-size:11px}
.tbl .im{width:44px;height:34px;border-radius:7px;background:var(--g100) center/cover;display:block}
.tbl .who{display:flex;align-items:center;gap:10px}
.tbl .acts{display:flex;gap:4px;justify-content:flex-end}
.tbl .acts .btn{height:30px;padding:0 10px;font-size:12px}
.tbl .acts .ico{width:30px;height:30px;color:var(--g600);font-size:12px}
.btn.ok{color:var(--ok);border-color:#bfe3cf;background:#fff}
.btn.ok:hover{background:var(--ok-f)}
.btn.no{color:var(--err);background:#fff}
.btn.no:hover{background:var(--err-f);border-color:#f0b9b9}
.comp{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px;border-radius:8px;background:var(--g50);border:1px solid var(--g200);font-size:11px;color:var(--g600)}
.comp i{color:var(--acento)}
.recent{display:flex;flex-direction:column;gap:6px}
.rc{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95)}
.rc .ic{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:13px}
.rc b{display:block;font-size:12.5px;font-weight:600;line-height:1.2}
.rc small{color:var(--g600);font-size:11px}
.two{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
/* negocio */
.reglas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rg{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95)}
.rg i.ic{width:34px;height:34px;border-radius:10px;background:var(--acento-tint);color:var(--acento);display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.rg b{display:block;font-size:12.5px;font-weight:600;line-height:1.2}
.rg small{color:var(--g600);font-size:11px}
.sw{margin-left:auto;width:38px;height:22px;border-radius:999px;background:var(--g200);position:relative;flex-shrink:0;transition:background var(--t) var(--ease);cursor:pointer}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(17,18,20,.3);transition:transform var(--t) var(--ease)}
.sw.on{background:var(--acento);box-shadow:0 8px 18px -8px var(--acento-glow)}
.sw.on::after{transform:translateX(16px)}
.num{margin-left:auto;height:30px;min-width:64px;padding:0 10px;border-radius:9px;border:1px solid var(--g200);background:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:13px}
.estados{display:flex;flex-wrap:wrap;gap:6px}
/* modal activación */
.modal-act{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(17,18,20,.26);backdrop-filter:blur(4px)}
.modal-act.on{display:flex}
.ma{width:min(560px,100%);border-radius:20px;padding:18px 20px 20px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,1);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:0 40px 90px -40px rgba(17,18,20,.6);animation:entra .35s var(--ease) both;position:relative;overflow:hidden;isolation:isolate}
.ma>*:not(.au){position:relative;z-index:1}
.ma-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ma-h .im{width:46px;height:46px;border-radius:12px;background:var(--g100) center/cover;box-shadow:0 10px 20px -10px var(--acento-glow)}
.ma-h b{display:block;font-size:14px;font-weight:600}
.ma-h small{color:var(--g600);font-size:11.5px}
.ma-h .ico{margin-left:auto;color:var(--g600)}
.ma .fg{grid-template-columns:1fr 1fr 1fr}
.ma .fg .f.full{grid-column:1/-1}
.ma .fg textarea{min-height:60px;padding:9px 12px;border-radius:10px;border:1px solid var(--g200);background:rgba(255,255,255,.85);font:inherit;font-size:13px;resize:vertical;outline:none}
.ma .sws{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:10px 0}
.ma .sws label{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.75);border:1px solid var(--g200);font-size:12px;font-weight:600}
.ma .sws label .sw{width:32px;height:18px}
.ma .sws label .sw::after{width:12px;height:12px}
.ma .sws label .sw.on::after{transform:translateX(14px)}
.ma-f{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
.ma-f small{color:var(--g600);font-size:11.5px}
@media (max-width:1000px){.adm-wrap{grid-template-columns:1fr}.adm .side{position:static;flex-direction:row;flex-wrap:wrap}.adm .side .me{width:100%;border:0}.adm .side .lbl{display:none}.adm .kpis{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}.reglas{grid-template-columns:1fr}}
@media (max-width:760px){.tbl{display:block;overflow-x:auto;white-space:nowrap}.ma .fg,.ma .sws{grid-template-columns:1fr}}

/* ══════════ ÁREA 7 · MIS TICKETS ══════════ */
.mt-wrap{padding-top:calc(var(--mk) + 80px)}
.mt-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.mt-h h1{font-size:clamp(1.2rem,2vw,1.6rem);display:flex;align-items:center;gap:10px}
.mt-h .who{display:flex;align-items:center;gap:10px}
.mt-h .who .av{width:40px;height:40px;border-radius:50%;background:var(--acento);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;box-shadow:0 10px 24px -10px var(--acento-glow)}
.mt-h .who b{display:block;font-size:13.5px;font-weight:600;line-height:1.1}
.mt-h .who small{color:var(--g600);font-size:11.5px}
.prox-ev{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-bottom:14px}
.big-t{position:relative;border-radius:20px;overflow:hidden;min-height:250px;background:var(--g100) center/cover;color:#fff;box-shadow:0 30px 60px -30px rgba(17,18,20,.6);display:flex;align-items:flex-end}
.big-t::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,18,.05),rgba(11,13,18,.82))}
.big-t .in{position:relative;z-index:2;padding:18px;width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.big-t h2{color:#fff;font-size:20px;margin-bottom:6px}
.big-t .kick{position:absolute;top:14px;left:14px;z-index:2;display:flex;gap:6px}
.big-t .cnt{position:absolute;top:14px;right:14px;z-index:2;text-align:center;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(12px)}
.big-t .cnt b{display:block;font-family:var(--display);font-size:18px;line-height:1}
.big-t .cnt small{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.tk-list{display:flex;flex-direction:column;gap:8px}
.tkc{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:10px 12px 10px 10px;border-radius:14px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.tkc:hover{transform:translateY(-2px);box-shadow:0 16px 34px -18px var(--acento-glow),var(--sombra)}
.tkc .im{width:56px;height:56px;border-radius:12px;background:var(--g100) center/cover}
.tkc b{display:block;font-size:13px;font-weight:600;line-height:1.2}
.tkc small{display:block;color:var(--g600);font-size:11.5px}
.tkc .chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.tkc .r{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.tkc .r .acts{display:flex;gap:2px}
.tkc .r .acts .ico{width:30px;height:30px;color:var(--g600);font-size:12px}
.tkc .qmini{width:46px;height:46px;border-radius:8px;background:repeating-linear-gradient(90deg,#111 0 4px,transparent 4px 8px),repeating-linear-gradient(0deg,#111 0 4px,transparent 4px 8px);background-blend-mode:multiply;opacity:.75}
.pill.used{background:var(--g100);color:var(--g600)}
.gratis-row .poster{width:160px}
/* ══════════ ÁREA 8 · STAFF QR ══════════ */
.st-wrap{padding-top:calc(var(--mk) + 70px);display:grid;grid-template-columns:360px 1fr;gap:26px;align-items:start}
.phone{position:relative;width:340px;border-radius:38px;padding:12px;background:#0b0d12;box-shadow:0 40px 90px -36px rgba(17,18,20,.8),inset 0 0 0 1px rgba(255,255,255,.08);margin:0 auto}
.phone .scr{border-radius:28px;overflow:hidden;background:#0f1218;color:#fff;min-height:640px;display:flex;flex-direction:column;position:relative;isolation:isolate}
.phone .scr .aura{opacity:.6}
.ph-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:38px 14px 10px;position:relative;z-index:2}
.ph-top .ev{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);font-size:12px;font-weight:600;backdrop-filter:blur(10px)}
.ph-top .ev i{color:#48c7d9;font-size:11px}
.ph-top .cnt{height:34px;padding:0 12px;border-radius:999px;background:#68d985;color:#062a12;font-family:var(--display);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:110px;height:26px;border-radius:999px;background:#0b0d12;z-index:3}
.view{position:relative;z-index:2;margin:6px 14px;aspect-ratio:1;border-radius:22px;background:#161b24 center/cover;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.view::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 38%,rgba(11,13,18,.7) 75%)}
.view .fr{position:absolute;inset:18%;border-radius:18px;z-index:2}
.view .fr i{position:absolute;width:26px;height:26px;border:3px solid #fff;border-radius:6px}
.view .fr i:nth-child(1){top:-2px;left:-2px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.view .fr i:nth-child(2){top:-2px;right:-2px;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.view .fr i:nth-child(3){bottom:-2px;left:-2px;border-right:0;border-top:0;border-radius:0 0 0 6px}
.view .fr i:nth-child(4){bottom:-2px;right:-2px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.view .line{position:absolute;left:18%;right:18%;height:2px;background:#48c7d9;box-shadow:0 0 14px #48c7d9;z-index:3;animation:scan 2.2s ease-in-out infinite}
@keyframes scan{0%,100%{top:20%}50%{top:80%}}
.view .hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:11.5px;color:rgba(255,255,255,.8);z-index:3}
.res-card{position:relative;z-index:2;margin:8px 14px 0;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(16px);display:flex;gap:12px;align-items:center}
.res-card .ic{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.res-card b{display:block;font-size:14px;font-weight:600}
.res-card small{display:block;font-size:11.5px;opacity:.8}
.res-card.ok .ic{background:#68d985;color:#062a12;box-shadow:0 0 0 6px rgba(104,217,133,.2)}
.ph-btn{margin:10px 14px 0;height:46px;border-radius:14px;border:0;background:#68d985;color:#062a12;font:inherit;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;z-index:2;box-shadow:0 16px 34px -14px rgba(104,217,133,.7)}
.ph-search{margin:10px 14px 0;height:40px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;gap:8px;padding:0 12px;font-size:12.5px;color:rgba(255,255,255,.7);position:relative;z-index:2}
.ph-search i{color:#48c7d9}
.ph-tabs{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);padding:10px 10px 14px;gap:4px;position:relative;z-index:2;background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.08)}
.ph-tabs span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:rgba(255,255,255,.6);padding:8px 0;border-radius:12px}
.ph-tabs span i{font-size:15px}
.ph-tabs span.on{color:#fff;background:rgba(255,255,255,.1)}
.ph-tabs span.on i{color:#48c7d9}
/* estados de escaneo, al lado del teléfono */
.st-side{display:flex;flex-direction:column;gap:12px}
.st-side h2{font-size:15px;display:flex;align-items:center;gap:9px}
.st-side h2 i{color:var(--acento)}
.estados-qr{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.eq{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px}
.eq .ic{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:16px;flex-shrink:0}
.eq b{display:block;font-size:13px;font-weight:600}
.eq small{color:var(--g600);font-size:11.5px}
.eq.ok .ic{background:var(--ok);box-shadow:0 0 0 6px var(--ok-f)}
.eq.used .ic{background:var(--g400);box-shadow:0 0 0 6px var(--g100)}
.eq.pend .ic{background:#c9a24d;box-shadow:0 0 0 6px var(--warn-f)}
.eq.can .ic{background:var(--err);box-shadow:0 0 0 6px var(--err-f)}
.eq.nf .ic{background:#111214;box-shadow:0 0 0 6px var(--g100)}
.aforo{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.af{padding:12px 14px;border-radius:14px}
.af b{display:block;font-family:var(--display);font-size:18px;font-weight:600}
.af small{color:var(--g600);font-size:11.5px}
.af .bar{height:4px;border-radius:4px;background:var(--g100);margin-top:8px;overflow:hidden}
.af .bar i{display:block;height:100%;background:var(--acento);border-radius:4px}
.af.warn .bar i{background:#c9a24d}
@media (max-width:1000px){.st-wrap{grid-template-columns:1fr}.prox-ev{grid-template-columns:1fr}}
@media (max-width:640px){.tkc{grid-template-columns:56px 1fr}.tkc .r{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}.estados-qr,.aforo{grid-template-columns:1fr}.phone{width:100%}}


/* ══════════ CAMINOS · páginas públicas (publicar · vender · administrado · marcas) ══════════ */
/* Portada con foto: mismo lenguaje que la del evento, más baja */
.cam-hero{position:relative;min-height:clamp(300px,42vh,430px);display:flex;align-items:flex-end;background:var(--g100) center/cover;overflow:hidden;isolation:isolate}
.cam-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,18,.12) 0%,rgba(11,13,18,.5) 55%,rgba(11,13,18,.88) 100%)}
.cam-hero .in{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:104px var(--pad) 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cam-hero .panel{max-width:620px;padding:20px 22px;border-radius:20px;background:rgba(17,18,20,.34);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);color:#fff;box-shadow:0 30px 70px -34px rgba(0,0,0,.6);animation:entra .5s var(--ease) both}
.cam-hero .kick{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.cam-hero h1{font-family:var(--display);color:#fff;font-size:clamp(1.3rem,2.5vw,1.95rem);font-weight:600;line-height:1.08;letter-spacing:-.025em}
.cam-hero h1 em{font-style:normal;color:var(--amarillo)}
.cam-hero .sub{color:rgba(255,255,255,.85);font-size:13.5px;margin-top:7px;max-width:52ch;line-height:1.45}
.cam-hero .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.cam-hero .cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.cam-hero .cifra{margin-left:auto;text-align:right;color:#fff}
.cam-hero .cifra b{display:block;font-family:var(--display);font-size:32px;font-weight:600;line-height:1;letter-spacing:-.02em;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.cam-hero .cifra small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.cam-wrap{padding-top:18px;padding-bottom:40px;display:flex;flex-direction:column;gap:14px}
.cam-body{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
.cam-side{position:sticky;top:calc(var(--mk) + 76px);display:flex;flex-direction:column;gap:12px}
.fl{display:grid}
.fl .p{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(17,18,20,.06)}
.fl .p:last-child{border-bottom:0}
.fl .n{width:28px;height:28px;border-radius:50%;background:var(--acento-tint);color:var(--acento);display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:12px}
.fl .n.ok{background:var(--ok-f);color:var(--ok)}
.fl b{display:block;font-size:13px;font-weight:600;line-height:1.2}
.fl small{display:block;color:var(--g600);font-size:11.5px;margin-top:1px}
/* tres pasos gráficos: número al fondo, icono, dos palabras */
/* Tres pasos = UNA tira, no tres tarjetones. Eran tres cuadrados de 128px de alto
   con un número fantasma de 76px y un círculo de 38: puro relleno para decir seis
   palabras. Ahora es una sola pieza de ~56px con hilos entre paso y paso; el orden
   lo hace el contador, que es lo único que un paso necesita. */
.pasos3{display:grid;grid-template-columns:repeat(3,1fr);border-radius:14px;counter-reset:paso;overflow:hidden;list-style:none}
.pasos3 li{position:relative;display:flex;align-items:center;gap:11px;padding:11px 16px;min-width:0}
.pasos3 li + li::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:var(--g200)}
.pasos3 li::after{counter-increment:paso;content:counter(paso);flex-shrink:0;order:-1;
  width:21px;height:21px;border-radius:50%;background:var(--acento);color:#fff;
  font-family:var(--display);font-size:11px;font-weight:600;line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.pasos3 li > span{min-width:0}
.pasos3 li b,.pasos3 li small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pasos3 li b{font-size:13px;font-weight:600;line-height:1.2}
.pasos3 li small{color:var(--g600);font-size:11px;line-height:1.35}
@media (max-width:720px){.pasos3{grid-template-columns:1fr}
  .pasos3 li + li::before{left:16px;right:16px;top:0;bottom:auto;width:auto;height:1px}}
/* baldosas: icono grande + una palabra */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,120px));gap:10px;justify-content:start}
.tiles .tl{min-height:104px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:10px;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.tiles .tl:hover{transform:translateY(-5px);box-shadow:0 18px 40px -22px var(--acento-glow),var(--sombra)}
.tiles .tl i{font-size:22px;color:var(--acento);filter:drop-shadow(0 4px 10px var(--acento-glow))}
.tiles .tl b{font-size:12.5px;font-weight:600;line-height:1.2}
.tiles .tl small{font-size:10.5px;color:var(--g600);line-height:1.25}
/* muestra del producto (3 piezas visuales) */
.demo3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dm{border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:190px}
.dm .cap{font-size:11.5px;color:var(--g600);font-weight:600;display:flex;align-items:center;gap:7px;margin-top:auto}
.dm .cap i{color:var(--acento)}
.dm .lienzo{flex:1;border-radius:12px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);display:grid;place-items:center;overflow:hidden;padding:10px}
.dm svg{width:100%;height:auto;display:block}
.dm .tkmini{width:100%;display:grid;grid-template-columns:1fr 74px;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--g200)}
.dm .tkmini .l{padding:10px;display:flex;flex-direction:column;gap:5px}
.dm .tkmini .l b{font-size:11.5px;font-weight:600;line-height:1.2}
.dm .tkmini .l small{font-size:9.5px;color:var(--g600)}
.dm .tkmini .r{border-left:1px solid var(--g200);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;background:var(--g50)}
.dm .tkmini .r .qr{width:52px;height:52px}
.dm .tkmini .r small{font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--g600)}
.dm .barras{display:flex;align-items:flex-end;gap:6px;height:96px;width:100%;padding:0 4px}
.dm .barras i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--acento),rgba(10,115,133,.35))}
/* paquetes */
.pk{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
.pkc{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px 20px;border-radius:18px;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.pkc:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px var(--acento-glow),var(--sombra)}
.pkc.top{box-shadow:0 18px 46px -26px rgba(17,18,20,.32),0 20px 50px -30px var(--acento-glow)}
.pkc .tag{position:absolute;top:-11px;left:18px}
.pkc .nm{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.01em}
.pkc .pr{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1}
.pkc .pr span{font-size:11.5px;color:var(--g600);font-weight:400;display:block;letter-spacing:0}
.pkc.top .pr{color:var(--acento)}
.pkc ul{list-style:none;display:grid;gap:5px;font-size:12px;color:var(--g600)}
.pkc ul li{display:flex;gap:7px;align-items:center;line-height:1.3}
.pkc ul li i{color:var(--ok);font-size:10px}
.pkc .btn{margin-top:auto;align-self:stretch;justify-content:center}
/* tipos de cobro (multi) */
.tps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tps label{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:14px;background:rgba(255,255,255,.72);border:1.5px solid var(--g200);cursor:pointer;text-align:center;font-size:12px;font-weight:600;transition:border-color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t) var(--ease)}
.tps label:hover{transform:translateY(-3px)}
.tps label i{font-size:17px;color:var(--g600)}
.tps label input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.tps label:has(input:checked){border-color:var(--acento);background:var(--acento-tint);box-shadow:0 12px 26px -16px var(--acento-glow)}
.tps label:has(input:checked) i{color:var(--acento)}
.tps label:has(input:focus-visible){outline:2px solid var(--acento);outline-offset:2px}
/* formulario compartido */
.fg textarea{min-height:84px;padding:9px 12px;border-radius:10px;border:1px solid var(--g200);background:rgba(255,255,255,.85);font:inherit;font-size:13.5px;color:var(--tinta);resize:vertical;outline:none;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.fg textarea:focus{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-tint)}
.fg label small{font-weight:400;color:var(--g400)}
.fg .gp-sel-btn{height:38px;border-radius:10px;background:rgba(255,255,255,.85);border-color:var(--g200);font-size:13.5px}
.fg .cta{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;padding-top:4px}
.chk{display:flex;align-items:center;gap:9px;font-size:12.5px;cursor:pointer;line-height:1.4}
.chk input{width:16px;height:16px;accent-color:var(--acento);flex-shrink:0}
.err-list{margin:4px 0 0 16px;display:grid;gap:2px;font-size:12.5px}
@media (max-width:1000px){.cam-body{grid-template-columns:1fr}.cam-side{position:static}.pk{grid-template-columns:1fr}.tps{grid-template-columns:repeat(2,1fr)}.demo3{grid-template-columns:1fr}.pasos3{grid-template-columns:1fr}.cam-hero .in{padding-top:100px}.cam-hero .cifra{margin-left:0}}
@media (max-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}.cam-hero{min-height:0}.cam-hero .in{padding-top:88px}.cam-hero .panel{padding:16px;border-radius:16px}}

@media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}.nav .glass.nav-links{display:none}.tira{display:none}.cifras{grid-template-columns:repeat(2,1fr)}}
@media (max-width:800px){
  .grid{grid-template-columns:repeat(2,1fr)}.caminos{grid-template-columns:1fr;margin-top:12px}.orgs{grid-template-columns:1fr}.marcas{aspect-ratio:4/5;align-items:flex-end}
  .portada{min-height:520px}.portada-in{padding-bottom:70px}.panel{padding:16px;border-radius:16px}.panel .precio{margin-left:0}
  .brand small{display:none}.nav .glass{padding:4px}.baja{display:none}
}
@media (max-width:520px){.grid{grid-template-columns:1fr}.btn.lg{height:40px}.cifras{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.rv{opacity:1;transform:none}.slide .img{transform:none}}

/* ---------- HISTORIAL: lo que ya pasó queda, pero en miniatura ---------- */
.hist{margin-top:26px}
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.mini-card{display:flex;align-items:center;gap:10px;padding:7px;border-radius:12px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);text-decoration:none;color:var(--tinta);opacity:.82;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),opacity var(--t) var(--ease)}
.mini-card:hover{opacity:1;transform:translateY(-2px);box-shadow:var(--sombra)}
.mini-card .im{width:48px;height:40px;border-radius:8px;background:var(--g100) center/cover;flex-shrink:0;filter:grayscale(.45)}
.mini-card:hover .im{filter:none}
.mini-card .tx{min-width:0}
.mini-card b{display:block;font-size:12.5px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-card small{display:block;color:var(--g600);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Textos que no pueden desbordar su tarjeta ---------- */
/* Un titulo largo de evento real (los de verdad son largos) empujaba el panel de vidrio
   hasta tapar la foto completa. Se corta en dos lineas y el lugar en una. */
.card .body b.t,.poster .txt b,.tira b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .body small,.poster .txt small,.tira small,.mini-card small{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* El chip de fecha hereda el blanco de su propio fondo */
.card .fecha b,.card .fecha small{color:inherit}

/* ══════════ COLOR DE FIESTA ══════════ */
/* Cada categoria trae su color. La tarjeta lo recibe en --cat y lo usan el chip de fecha,
   el filete de arriba y el brillo del hover: la cartelera se lee de un vistazo por color. */
/* Las categorías ya no tienen color propio: el sistema corre con fucsia y amarillo.
   El atributo data-cat se queda por si algún día se necesita, pero no pinta nada. */

/* UN color manda. El de la categoría queda como pista chica (el ícono), no como bloque:
   con siete colores compitiendo no hay jerarquía, hay ruido. Medido contra una cartelera que
   corre con un solo acento en el 0.5 % del área y por eso pega. */
.card .fecha{background:var(--acento);box-shadow:0 8px 18px -8px var(--acento-glow)}
.card:hover{box-shadow:0 30px 60px -26px rgba(17,18,20,.55),0 16px 38px -18px var(--acento-glow),0 0 0 1px rgba(255,255,255,.8)}
.cat i,.cat svg.ic{color:var(--cat,var(--acento))}
.cat.on{background:var(--acento);border-color:transparent}
.cat.on i,.cat.on svg.ic{color:#fff}
.mini-card .im{box-shadow:inset 0 0 0 2px var(--acento)}

/* El boton principal deja de ser un bloque plano: el mismo teal con brillo de fiesta */
.btn.pri{background:linear-gradient(135deg,#e5288b 0%,var(--acento) 45%,var(--acento-osc) 100%);box-shadow:0 12px 26px -12px var(--acento-glow)}
.btn.pri:hover{box-shadow:0 16px 34px -12px var(--acento-glow2),0 0 0 1px rgba(255,255,255,.5)}
.pill.glow{background:linear-gradient(135deg,var(--acento) 0%,var(--acento-osc) 100%);box-shadow:0 8px 20px -10px var(--acento-glow)}

/* ── Íconos propios (sprite glow-icons.svg incrustado en el header) ── */
svg.ic{width:1em;height:1em;fill:currentColor;flex:0 0 auto;vertical-align:-.125em}
svg.ic.abajo{transform:rotate(90deg)}svg.ic.izq{transform:rotate(180deg)}svg.ic.arriba{transform:rotate(-90deg)}
.pill svg.ic,.cat svg.ic,.btn svg.ic{width:1.05em;height:1.05em}
.dato svg.ic{width:16px;height:16px}
.sec-head h2 svg.ic,.blk-h h2 svg.ic{width:1em;height:1em}

/* ══════════ ÍCONOS: al servicio del texto, no vallas ══════════ */
/* Revisión del cliente: los íconos grandes metidos en círculos de color son lo que delata
   una plantilla. Acá bajan de tamaño, pierden el aro y acompañan a la palabra. */
svg.ic{width:.95em;height:.95em}
.pill svg.ic,.cat svg.ic,.btn svg.ic{width:1em;height:1em}

/* Título de sección: tipografía, no medalla */
.sec-head h2 i,.sec-head h2 svg.ic,.blk-h h2 i,.blk-h h2 svg.ic{
  width:auto;height:auto;background:none;border:0;box-shadow:none;border-radius:0;
  color:var(--acento);font-size:.86em;margin-right:2px}
.sec-head h2 svg.ic,.blk-h h2 svg.ic{width:.86em;height:.86em}

/* Dato del evento: el icono va suelto al lado del texto, sin cuadro ni aro.
   Medido en Eventbrite: icono de 16px junto a texto de 18px, fondo transparente. */
.dato{padding:10px 12px;gap:9px;align-items:flex-start}
.dato i,.dato svg.ic{width:16px;height:16px;background:none;border-radius:0;padding:0;box-shadow:none;
  color:var(--cat,var(--acento));fill:var(--cat,var(--acento));font-size:14px;flex-shrink:0;margin-top:2px}

/* Los tres caminos y las cifras: tiles mas discretas */
.camino > span.ic{width:34px;height:34px;font-size:14px}
.camino > span.ic svg.ic{width:15px;height:15px;padding:0;background:none;border-radius:0}
.cifra i,.cifra svg.ic{width:28px;height:28px;font-size:12px}
.cifra svg.ic{padding:8px;border-radius:50%;background:#fff;color:var(--acento);fill:var(--acento);box-shadow:0 4px 12px -4px rgba(11,13,18,.24),0 0 0 1px rgba(11,13,18,.06)}

/* ══════════ DETALLE DEL EVENTO: bueno saber, agenda y preguntas ══════════ */
.saber{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.sb{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9)}
.sb svg.ic{width:16px;height:16px;padding:0;background:none;color:var(--acento);fill:var(--acento);flex-shrink:0;margin-top:2px}
.sb small{display:block;color:var(--g600);font-size:11px}
.sb b{display:block;font-size:12.8px;font-weight:600;line-height:1.35}
.listas{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.lt{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;margin-bottom:6px}
.lt svg.ic{color:var(--ok)}
.no .lt svg.ic{color:var(--err)}
.listas ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.listas li{position:relative;padding-left:14px;font-size:12.5px;color:var(--g600);line-height:1.45}
.listas li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--ok)}
.listas .no li::before{background:var(--err)}
.agenda{margin-top:14px;padding-top:12px;border-top:1px solid rgba(17,18,20,.07)}
.ag{display:grid;grid-template-columns:76px 1fr;gap:10px;padding:6px 0;font-size:12.8px}
.ag+.ag{border-top:1px dashed transparent}
.ag .h{font-family:var(--display);font-weight:600;color:var(--acento)}
.ag .q{color:var(--g600)}
.faq details{border-bottom:1px solid rgba(17,18,20,.07)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;font-size:13px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg.ic{color:var(--g400);transition:transform var(--t) var(--ease)}
.faq details[open] summary svg.ic{transform:rotate(-90deg)}
.faq p{font-size:12.8px;color:var(--g600);line-height:1.55;padding:0 0 12px;max-width:68ch}
@media (max-width:640px){.listas{grid-template-columns:1fr}.ag{grid-template-columns:64px 1fr}}

/* Aviso de vista previa: solo lo ve el admin, y tiene que verse distinto a la web real */
.vista-previa{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 14px;font-size:12.5px;background:var(--warn-f);color:var(--warn);border-bottom:1px solid rgba(122,83,0,.2)}
.vista-previa b{font-weight:600}

/* ══════════ BARRA DE COMPRA Y COLUMNA LARGA (patrón de las plataformas de boletos) ══════════ */
/* Lateral fija: precio, fecha y UN botón. El detalle de la compra vive en el checkout. */
.compra{position:sticky;top:calc(var(--mk) + 96px);padding:16px 18px;border-radius:18px;display:flex;flex-direction:column;gap:4px}
.compra .pz{font-family:var(--display);font-size:22px;font-weight:600;line-height:1.1}
.compra .nt{color:var(--g600);font-size:11.5px;line-height:1.4}
.compra .fh{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--g600);margin:8px 0 10px;padding-top:10px;border-top:1px solid rgba(17,18,20,.07)}
.compra .fh svg.ic{color:var(--acento)}
.compra .btn{width:100%;justify-content:center}
.ev-aside .sel-box{position:sticky;top:calc(var(--mk) + 96px)}

/* En celular la barra baja al pie y se queda fija */
.compra-movil{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(17,18,20,.08);box-shadow:0 -10px 30px -18px rgba(17,18,20,.4)}
.compra-movil b{display:block;font-family:var(--display);font-size:15px;font-weight:600;line-height:1.15}
.compra-movil small{display:block;color:var(--g600);font-size:11px;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compra-movil .btn{flex-shrink:0}

/* Descripción cortada por líneas, no por palabras */
.desc.corta{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.vermas{margin-top:8px;border:0;background:none;padding:0;color:var(--acento);font-weight:600;font-size:12.5px;cursor:pointer}
.vermas:hover{text-decoration:underline}

/* Ubicación en la columna principal */
.ubi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center}
.ubi .m{position:relative;height:170px;border-radius:14px;background:var(--g100) center/cover}
.ubi .m .pin{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--acento);box-shadow:0 0 0 6px rgba(10,115,133,.25),0 6px 14px -6px var(--acento-glow)}
.ubi .d b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.ubi .d small{display:block;color:var(--g600);font-size:12.5px;margin-top:2px}
.ubi .d .row{margin-top:12px}

@media (max-width:900px){.ubi{grid-template-columns:1fr}}
@media (max-width:820px){
  .compra-movil{display:flex}
  .ev-body{padding-bottom:78px}
  .compra{display:none}          /* en celular manda la barra de abajo */
}

/* Tarjetas del lateral: en una columna angosta el texto y el botón no caben lado a lado */
.ev-aside .mini-map .row{flex-direction:column;align-items:flex-start;gap:10px}
.ev-aside .mini-map .row .btn{width:100%;justify-content:center}
.ev-aside .mini-map .row > span{max-width:100%}
.ev-aside .mini-map small{max-width:100%!important}

/* ══════════ MOVIMIENTO DE LOS ÍCONOS ══════════ */
/* Cada ícono se mueve según lo que hace, no por adorno: la flecha avanza, el reloj marca,
   el corazón late. 180–240 ms y una sola curva, como el resto del sistema. */
svg.ic{transition:transform 200ms var(--ease),color 200ms var(--ease),opacity 200ms var(--ease)}
/* Solo con puntero real: en pantalla tactil el :hover se queda pegado al tocar */
@media (hover:hover) and (pointer:fine){
:is(a,button,.card,.camino,.cat,.tk,.sb,.dato,.mini-card,summary):hover svg.ic-flecha,
:is(a,button):hover svg.ic-chevron{transform:translateX(4px)}
:is(a,button):hover svg.ic-entrar{transform:translateX(3px)}
:is(a,button):hover svg.ic-afuera{transform:translate(3px,-3px)}
:is(a,button):hover svg.ic-enviar{transform:translate(4px,-4px) rotate(6deg)}
:is(a,button,.card):hover svg.ic-corazon{animation:icLate 600ms var(--ease)}
:is(a,button):hover svg.ic-compartir{transform:translateY(-3px) scale(1.06)}
:is(a,button,.dato,.sb,.ubi):hover svg.ic-pin{animation:icSalta 620ms var(--ease)}
:is(a,button,.dato,.sb):hover svg.ic-mapa{animation:icSalta 620ms var(--ease)}
:is(a,button,.dato,.sb,.blk-h):hover svg.ic-reloj{transform:rotate(18deg)}
:is(a,button,.dato,.sb):hover svg.ic-calendario{transform:translateY(-2px)}
:is(a,button,.cat,.pill):hover svg.ic-rayo{animation:icChispazo 620ms var(--ease)}
:is(a,button,.cat):hover svg.ic-musica{animation:icFlota 900ms var(--ease) infinite}
:is(a,button,.cat,.tk):hover svg.ic-ticket{transform:rotate(-9deg) scale(1.06)}
:is(a,button):hover svg.ic-qr{animation:icLate 700ms var(--ease)}
:is(a,button):hover svg.ic-buscar{transform:scale(1.16)}
:is(a,button):hover svg.ic-megafono{animation:icGrita 560ms var(--ease)}
:is(a,button,.camino):hover svg.ic-gema{transform:rotate(-10deg) scale(1.08)}
:is(a,button):hover svg.ic-regalo{animation:icSalta 620ms var(--ease)}
:is(a,button):hover svg.ic-estrella{transform:rotate(22deg) scale(1.1)}
:is(a,button):hover svg.ic-chispa{animation:icChispazo 700ms var(--ease)}
:is(a,button):hover svg.ic-historial{transform:rotate(-32deg)}
:is(a,button):hover :is(svg.ic-mas,svg.ic-cerrar){transform:rotate(90deg)}
:is(a,button):hover :is(svg.ic-copiar,svg.ic-enlace,svg.ic-grid,svg.ic-check,svg.ic-tick){transform:scale(1.14)}
:is(a,button,.cat):hover :is(svg.ic-deportes,svg.ic-cultura,svg.ic-ferias,svg.ic-gastronomia,svg.ic-corporativos,svg.ic-familia,svg.ic-aforo,svg.ic-usuario){transform:translateY(-2px) scale(1.06)}
.cat.on svg.ic{transform:none}
}

@keyframes icLate{0%,100%{transform:scale(1)}30%{transform:scale(1.22)}55%{transform:scale(.96)}}
@keyframes icSalta{0%,100%{transform:translateY(0)}35%{transform:translateY(-5px)}70%{transform:translateY(-1px)}}
@keyframes icChispazo{0%,100%{transform:scale(1);opacity:1}35%{transform:scale(1.2) rotate(-8deg);opacity:.75}}
@keyframes icFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes icGrita{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}55%{transform:rotate(7deg)}80%{transform:rotate(-3deg)}}

@media (prefers-reduced-motion:reduce){
  svg.ic,svg.ic *{transition:none!important;animation:none!important}
  :is(a,button,.card,.camino,.cat,.tk,.sb,.dato,.mini-card,summary):hover svg.ic{transform:none!important}
}

/* ══════════ JERARQUÍA TIPOGRÁFICA ══════════ */
/* Una etiqueta chica arriba, un titular corto donde UNA palabra lleva el color, y el detalle
   en gris. El tamaño no es el que manda: manda el peso y el contraste. */
.cej{display:block;font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--g400);margin-bottom:3px}
.camino b i,.camino b em{font-style:normal;color:var(--acento)}
h1 i,h2 i,h1 em,h2 em{font-style:normal;color:var(--acento)}
.sec-head h2{font-size:15.5px;letter-spacing:-.01em}
.blk-h h2{font-size:14.5px;letter-spacing:-.01em}

/* ══════════ JERARQUÍA DE SECCIÓN Y DE DATO ══════════ */
/* Título de sección: una barrita del acento en vez del ícono. Es el gesto que más ordena
   una página larga, y deja el ícono para los bloques de adentro. */
.sec-head h2{display:flex;align-items:center;gap:10px}
.sec-head h2 svg.ic,.sec-head h2 i{display:none}
.sec-head h2::before{content:"";width:4px;height:1.1em;border-radius:999px;background:var(--acento);flex-shrink:0}

/* Dato del evento: primero la etiqueta chica en gris, después el valor en negrita.
   Se escanea mejor y es como lo resuelven las carteleras que funcionan. */
.dato > span{display:flex;flex-direction:column-reverse}
.dato b{font-size:13px;line-height:1.25}
.dato small{font-size:10.5px;letter-spacing:.02em;margin-bottom:1px}


/* ══════════ BLOQUES NEGROS: la web alterna blanco y negro ══════════ */
/* El bloque redefine los tokens, así que todo lo que vive adentro se invierte solo:
   vidrio, grises, filetes y pastillas. No hay que duplicar componentes. */
.oscuro{
  --tinta:#fff; --blanco:#0b0d12;
  --g50:rgba(255,255,255,.05); --g100:rgba(255,255,255,.09); --g200:rgba(255,255,255,.16);
  --g400:rgba(255,255,255,.44); --g600:rgba(255,255,255,.68);
  --acento-tint:rgba(217,26,125,.18); --amarillo-f:rgba(255,196,0,.16);
  --sombra:0 10px 24px -12px rgba(0,0,0,.6); --sombra-2:0 16px 32px -14px rgba(0,0,0,.7);
  background:var(--negro); color:#fff; position:relative;
}
.oscuro .vidrio{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:0 14px 40px -22px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08)}
.oscuro .card{box-shadow:0 18px 40px -24px rgba(0,0,0,.8)}
.oscuro .card .body{background:rgba(11,13,18,.9);border-color:rgba(255,255,255,.14)}
.oscuro .card .body b.t{color:#fff}
.oscuro .mini-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff}
.oscuro .sec-head h2{color:#fff}
.oscuro .sec-head a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
.oscuro .cifra i,.oscuro .cifra svg.ic{background:#fff;color:var(--acento)}
.oscuro .dato,.oscuro .sb{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
/* Franja de sección negra a todo el ancho, aunque el contenido vaya en la columna */
.sec.oscuro{padding-left:var(--pad);padding-right:var(--pad);margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);padding-top:34px;padding-bottom:34px;border-radius:26px}

/* ══════════ FICHAS VIVAS: el ícono entra en bucle y el texto aparece letra por letra ══════════ */
/* Para las baldosas que son botones con una indicación encima. El ciclo es largo (7 s) y el
   texto pasa el 80 % del tiempo visible: se nota vivo sin volverse un letrero de neón. */
.vivo > .ic svg.ic{animation:icCiclo 7s var(--ease) infinite}
.vivo:nth-of-type(2) > .ic svg.ic{animation-delay:.9s}
.vivo:nth-of-type(3) > .ic svg.ic{animation-delay:1.8s}
.vivo:hover > .ic svg.ic{animation:none}          /* al pasar el cursor manda el gesto del hover */

@keyframes icCiclo{
  0%{opacity:0;transform:translateX(-9px) scale(.72)}
  9%{opacity:1;transform:translateX(0) scale(1)}
  38%{transform:translateY(-2px) scale(1.07)}
  52%{transform:translateY(0) scale(1)}
  90%{opacity:1;transform:translateX(0) scale(1)}
  100%{opacity:0;transform:translateX(7px) scale(.86)}
}

/* El texto se arma letra por letra y se rehace en cada ciclo */
.letras span{display:inline-block;animation:letraEntra 7s var(--ease) infinite;animation-delay:calc(var(--i) * 28ms)}
.vivo:nth-of-type(2) .letras span{animation-delay:calc(.9s + var(--i) * 28ms)}
.vivo:nth-of-type(3) .letras span{animation-delay:calc(1.8s + var(--i) * 28ms)}
@keyframes letraEntra{
  0%,4%{opacity:0;transform:translateY(.34em)}
  12%,88%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-.18em)}
}

/* La copia que leen los lectores de pantalla: el texto partido en letras no se lee bien */
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .vivo > .ic svg.ic,.letras span{animation:none!important;opacity:1!important;transform:none!important}
}

/* ══════════ SOBRE FOTO: BLANCO SÓLIDO, NO VIDRIO GRIS ══════════ */
/* El vidrio traslúcido con letra blanca se pierde contra la foto: se ve gris sobre gris.
   La pastilla blanca con la tinta y el ícono en fucsia se lee desde lejos, que es de lo que se trata.
   Todo `.pill.glass` del sitio vive encima de una foto, así que la regla es general. */
.pill.glass{background:#fff;color:var(--negro);border:0;
  box-shadow:0 4px 14px -6px rgba(11,13,18,.5);backdrop-filter:none;-webkit-backdrop-filter:none}
.pill.glass svg.ic{color:var(--acento)}
/* Gratis no es un dato más: va en amarillo con tinta, como en toda la cartelera. */
.pill.glass.am,.poster .top .pill.am{background:var(--amarillo);color:var(--negro)}
.pill.glass.am svg.ic{color:var(--negro)}

/* El botón secundario sobre foto también sale del vidrio gris. */
.panel .btn.glass,.cam-hero .btn.glass,.marcas .btn.glass,.e404 .btn.glass,.ev-hero .btn.glass{
  background:#fff;border-color:transparent;color:var(--negro);
  box-shadow:0 6px 18px -8px rgba(11,13,18,.5);backdrop-filter:none;-webkit-backdrop-filter:none}
.panel .btn.glass svg.ic,.cam-hero .btn.glass svg.ic,.marcas .btn.glass svg.ic,
.e404 .btn.glass svg.ic,.ev-hero .btn.glass svg.ic{color:var(--acento)}
.panel .btn.glass:hover,.cam-hero .btn.glass:hover,.marcas .btn.glass:hover,
.e404 .btn.glass:hover,.ev-hero .btn.glass:hover{background:var(--amarillo-f);border-color:transparent}


/* ══════════ PIE DE PÁGINA · AURA UI negro glass ══════════
   Sangra a los bordes y hereda `.oscuro`, así los componentes de adentro se
   invierten solos. Cuatro columnas: la marca y las tres puertas del negocio. */
.pieweb{position:relative;overflow:hidden;isolation:isolate;margin:56px 0 0;padding:clamp(30px,4vw,52px) var(--pad) 0}
.pieweb > .au{z-index:0}
.pie-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(20px,3vw,44px);align-items:start}
.pie-logo{height:30px;width:auto;display:block;margin-bottom:12px}
.pie-marca p{color:rgba(255,255,255,.62);font-size:12.5px;line-height:1.55;max-width:38ch;margin:0}
.pie-marca p b{color:#fff;font-weight:600}
.pie-redes{margin-top:14px}
.pie-wa{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:12.5px;font-weight:600;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}
.pie-wa:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28)}
.pie-wa i{color:#25d366;font-size:15px}
.pie-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.pie-col h3{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.56);margin-bottom:8px}
.pie-col a{color:rgba(255,255,255,.78);font-size:12.5px;padding:5px 0;position:relative;width:fit-content;
  transition:color var(--t) var(--ease),transform var(--t) var(--ease)}
.pie-col a::after{content:"";position:absolute;left:0;right:100%;bottom:3px;height:1px;background:var(--acento);
  transition:right var(--t) var(--ease)}
.pie-col a:hover{color:#fff;transform:translateX(2px)}
.pie-col a:hover::after{right:0}
/* Franja de cierre: hilo arriba, y el sello de GlowPass a la derecha. */
.pie-base{position:relative;z-index:1;max-width:var(--max);margin:clamp(24px,3vw,38px) auto 0;
  padding:16px 0 20px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:12px;color:rgba(255,255,255,.5)}
.pie-base .pw{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:rgba(255,255,255,.72);
  transition:color var(--t) var(--ease)}
.pie-base .pw:hover{color:#fff}
.pie-base .pw b{color:var(--acento-viv)}
.pie-base .pw svg.ic{color:var(--acento-viv);filter:drop-shadow(0 0 6px var(--acento-glow2))}
@media (max-width:900px){.pie-in{grid-template-columns:1fr 1fr}.pie-marca{grid-column:1/-1}}
@media (max-width:520px){.pie-in{grid-template-columns:1fr;gap:22px}.pie-base{justify-content:flex-start}}

/* ══════════ El espacio de GlowPass en el catálogo ══════════
   Negro glass, como la banda de arriba. Un solo gancho por página y al final:
   primero la cartelera, después el negocio. Sin precios ni lista de módulos —
   eso vive en /vender-entradas.php. */
.vip{position:relative;overflow:hidden;isolation:isolate;border-radius:20px;margin:30px 0 8px;padding:clamp(20px,3vw,30px) clamp(20px,3vw,32px);
  background:var(--negro);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px -44px rgba(0,0,0,.85),0 24px 56px -46px var(--acento-glow)}
.vip .au{opacity:.3}
.vip-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,34px);flex-wrap:wrap}
.vip h2{font-size:clamp(1.05rem,1.9vw,1.45rem);color:#fff;letter-spacing:-.02em;margin:6px 0 6px}
.vip h2 i,.vip h2 em{font-style:normal;color:var(--acento-viv)}
.vip p{color:rgba(255,255,255,.62);font-size:12.5px;line-height:1.55;max-width:52ch;margin:0}
.vip .cej{color:rgba(255,255,255,.56)}
@media (max-width:640px){.vip-in{flex-direction:column;align-items:flex-start}.vip .btn{width:100%;justify-content:center}}