:root{
  --bg:#EBEFF6; --s1:#EEF1F8; --s2:#F2F5FA; --hi:#FFFFFF; --lo:#C2CADD;
  --ink:#0B0D12; --ink2:#3B4250; --mut:#5D626D; --line:#DFE3EB; --line2:#CBD1DD;
  --blue:#1437FF; --blue-ink:#0F2BD6; --blue-t:#E4E9FF; --teal:#008BA3; --cyan:#00B8D4; --teal-t:#DDF5F9;
  --amber:#B26A0B; --amber-t:#FBEFD9; --red:#C62828; --red-t:#FBE6E6;
  --raise-sm:4px 4px 10px var(--lo),-4px -4px 10px var(--hi);
  --inset-sm:inset 2px 2px 6px var(--lo),inset -2px -2px 6px var(--hi);
  --font:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button{font-family:inherit}
[hidden]{display:none!important}
.app{max-width:440px;margin:0 auto;min-height:100dvh;padding:18px 18px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:28px}
.top img{height:20px;display:block}
.top .quien{font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vista{display:none;flex-direction:column;gap:14px;flex:1}
.vista.on{display:flex}
h1{font-size:26px;line-height:1.08;letter-spacing:-.02em;margin:0;font-weight:700}
.sub{color:var(--ink2);font-size:15px;line-height:1.45;margin:4px 0 0}
.fine{font-size:12.5px;color:var(--mut);line-height:1.45;text-align:center;margin:0}
.hero{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px;padding:20px 0}
.hero .mark{width:136px;filter:drop-shadow(0 10px 18px rgba(20,55,255,.22))}
.btn{appearance:none;border:0;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 16px;border-radius:999px;background:var(--blue);color:#fff;font-weight:600;font-size:16px;cursor:pointer;box-shadow:0 6px 16px rgba(20,55,255,.25)}
.btn2{appearance:none;border:0;display:flex;align-items:center;justify-content:center;width:100%;padding:15px 16px;border-radius:999px;background:var(--s2);color:var(--ink);font-weight:600;font-size:16px;cursor:pointer;box-shadow:var(--raise-sm)}
.btn[disabled],.btn2[disabled]{opacity:.45;cursor:default}
.btn.ms{background:var(--s2);color:var(--ink);box-shadow:var(--raise-sm)}
.msq{display:grid;grid-template-columns:9px 9px;gap:2px}
.msq i{width:9px;height:9px;display:block}
.msq i:nth-child(1){background:#F25022}.msq i:nth-child(2){background:#7FBA00}.msq i:nth-child(3){background:#00A4EF}.msq i:nth-child(4){background:#FFB900}
.link{appearance:none;background:none;border:0;padding:0;color:var(--ink2);text-decoration:underline;text-underline-offset:2px;font-size:13px;font-weight:500;cursor:pointer}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aviso{padding:12px 14px;border-radius:16px;font-size:14px;line-height:1.4;color:var(--ink2)}
.aviso.mal{background:var(--red-t)}
.aviso.bien{background:var(--teal-t);color:var(--ink)}
.aviso.bien b{color:var(--teal)}
/* cámara */
.cam{position:relative;border-radius:24px;overflow:hidden;background:#1A1D26;aspect-ratio:3/4;box-shadow:var(--raise-sm)}
.cam video,.cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cam video{transform:scaleX(-1)}
.cam .oval{position:absolute;left:50%;top:41%;width:58%;height:54%;transform:translate(-50%,-50%);border:2px dashed rgba(255,255,255,.9);border-radius:50%;pointer-events:none}
.cam.pintando .oval{display:none}
.cam.pintando::after{content:"";position:absolute;top:-10%;bottom:-10%;width:40%;left:-45%;background:linear-gradient(90deg,rgba(95,242,255,0),rgba(95,242,255,.55),rgba(20,55,255,0));filter:blur(4px);animation:pincel 1.5s ease-in-out infinite}
@keyframes pincel{to{left:105%}}
.camtxt{text-align:center;font-size:15px;font-weight:600;min-height:22px;margin:0}
.shut{appearance:none;width:70px;height:70px;border-radius:50%;background:var(--s2);box-shadow:var(--raise-sm);display:grid;place-items:center;border:0;align-self:center;cursor:pointer;padding:0}
.shut i{width:52px;height:52px;border-radius:50%;background:var(--blue);display:block;transition:transform .15s}
.shut:active i{transform:scale(.86)}
.shut[disabled]{opacity:.4}
.subir{align-self:center;font-size:13px;color:var(--ink2);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
/* figura */
.fig{border-radius:24px;overflow:hidden;background:#fff;aspect-ratio:3/4;box-shadow:var(--raise-sm)}
.fig img{width:100%;height:100%;object-fit:contain;display:block}
/* pase */
.tix{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:#F5EFE4;box-shadow:var(--raise-sm)}
.tix .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 14%;display:block}
.tix.sinrostro .art{object-position:center}
.holo{position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(120,240,255,.26) 46%,rgba(255,255,255,.5) 50%,rgba(150,170,255,.26) 54%,transparent 62%);background-size:260% 100%;mix-blend-mode:screen;animation:holo 3.4s linear infinite;pointer-events:none}
@keyframes holo{from{background-position:130% 0}to{background-position:-130% 0}}
.clk{position:absolute;left:16px;top:14px;color:var(--ink);font-size:26px;font-weight:700;letter-spacing:-.01em;text-shadow:0 0 10px #fff,0 0 22px rgba(255,255,255,.9)}
.clk small{display:block;font-size:12px;font-weight:600;letter-spacing:0;color:var(--ink2)}
.tix.sinrostro .clk{color:#fff;text-shadow:0 1px 2px rgba(11,13,18,.6),0 0 16px rgba(11,13,18,.45)}
.tix.sinrostro .clk small{color:#fff}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.tixqr{--p:0;position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:50%;aspect-ratio:1/1;border-radius:20px;padding:5px;background:conic-gradient(#00B8D4,#1437FF calc(var(--p) * 360deg),rgba(255,255,255,.55) calc(var(--p) * 360deg));box-shadow:0 10px 26px rgba(11,13,18,.35)}
@keyframes giro{to{--ang:360deg}}
.tixqr canvas{width:100%;height:100%;border-radius:16px;background:#fff;display:block}
.idr{display:flex;gap:12px;align-items:center}
.idr img{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff;background:#fff;flex:0 0 auto}
.nm{font-size:18px;font-weight:700}
.ac{font-size:13px;color:var(--mut);margin-top:1px}
.chelas{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink2);padding:12px 14px;border-radius:16px;background:var(--s2);box-shadow:var(--raise-sm)}
.chelas b{color:var(--ink);margin-right:2px}
.chelas i{width:14px;height:14px;border-radius:50%;background:var(--blue);display:block}
.chelas i.usada{background:var(--line2)}
.chelas em{margin-left:auto;font-style:normal;color:var(--mut);font-size:13px}
/* puerta */
.seg{display:flex;padding:4px;border-radius:999px;background:var(--s1);box-shadow:var(--inset-sm)}
.seg button{flex:1;border:0;background:transparent;padding:11px 4px;border-radius:999px;font-size:14px;font-weight:600;color:var(--mut);cursor:pointer}
.seg button.on{background:var(--s2);color:var(--ink);box-shadow:var(--raise-sm)}
.scan{position:relative;border-radius:24px;overflow:hidden;background:#1A1D26;aspect-ratio:1/1}
.scan video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan .marco{position:absolute;inset:16%;border:3px solid var(--cyan);border-radius:20px;box-shadow:0 0 0 2000px rgba(11,13,18,.22)}
.scan .msg{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:#fff;font-size:14px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.res{border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:12px}
.res.ok{background:var(--teal-t)}.res.warn{background:var(--amber-t)}.res.bad{background:var(--red-t)}
.badge{align-self:flex-start;padding:7px 13px;border-radius:999px;font-size:15px;font-weight:700;color:#fff}
.ok .badge{background:var(--teal)}.warn .badge{background:var(--amber)}.bad .badge{background:var(--red)}
.who{display:flex;gap:14px;align-items:center}
.who img,.who .ini{width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff;background:#fff;flex:0 0 auto}
.who .ini{display:grid;place-items:center;font-size:26px;font-weight:700;color:var(--ink2)}
.wn{font-size:19px;font-weight:700}.ws{font-size:13px;color:var(--ink2);margin-top:2px}
.hint{font-size:14px;color:var(--ink2);line-height:1.4;margin:0}
/* RH */
.card{background:var(--s2);border-radius:22px;box-shadow:var(--raise-sm);padding:16px}
.card h2{font-size:15px;margin:0 0 10px}
.big{font-size:52px;font-weight:700;letter-spacing:-.02em;line-height:1}
.bar{height:10px;border-radius:999px;background:var(--s1);box-shadow:var(--inset-sm);overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--blue));border-radius:999px;transition:width .5s}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpis .card b{display:block;font-size:26px}
.kpis .card span{font-size:13px;color:var(--mut)}
.lst{display:flex;flex-direction:column;gap:8px;font-size:14px}
.lst div{display:flex;justify-content:space-between;gap:12px}
.lst em{font-style:normal;font-weight:700;white-space:nowrap}
.vacio{font-size:14px;color:var(--mut)}
.live{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--teal)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--cyan);animation:pulso 1.6s infinite}
@keyframes pulso{50%{opacity:.35}}

/* barra de carga */
.carga{display:flex;flex-direction:column;gap:8px}
.carga-bar{height:10px;border-radius:999px;background:var(--s1);box-shadow:var(--inset-sm);overflow:hidden;width:100%}
.carga-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--blue));transition:width .35s ease}
.carga-bar.ind{width:180px;margin-top:6px}
.carga-bar.ind i{width:40%;animation:ind 1.3s ease-in-out infinite}
@keyframes ind{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
.carga-t{display:flex;justify-content:space-between;font-size:14px;font-weight:600;color:var(--ink2);margin:0}
.carga-t span:last-child{color:var(--mut);font-weight:500}
/* rifa */
.rifa{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:18px;background:var(--s2);box-shadow:var(--raise-sm)}
.rifa .rl{font-size:14px;color:var(--ink2)}
.rifa .rl b{display:block;color:var(--ink);font-size:15px}
.rifa .rn{font-size:34px;font-weight:700;letter-spacing:.02em;color:var(--blue-ink);line-height:1}
.rifa .rp{font-size:13px;color:var(--mut);text-align:right;max-width:150px;line-height:1.35}
/* agenda y lugar */
.agenda > div{display:flex;flex-direction:column}
.ag{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.35}
.ag:first-child{border-top:0;padding-top:2px}
.ag .h{color:var(--blue-ink);font-weight:700;white-space:nowrap}
.ag .q b{display:block;color:var(--ink);font-weight:600}
.ag .q span{color:var(--mut);font-size:13px}
.fine.izq{text-align:left;margin-top:8px}
.dato{margin:0;font-size:14px;color:var(--ink2);line-height:1.45}
.dato b{display:block;color:var(--ink);font-size:15px}
.h2b{margin-top:14px!important}
.lugar .link{display:inline-block;margin-top:6px}

/* chelas que canjea cada quien */
.chelas2{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border-radius:18px;background:var(--s2);box-shadow:var(--raise-sm)}
.ch-h{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink2)}
.ch-h b{color:var(--ink);margin-right:2px}
.ch-h .dots{display:flex;gap:6px}
.ch-h .dots i{width:14px;height:14px;border-radius:50%;background:var(--blue);display:block}
.ch-h .dots i.usada{background:var(--line2)}
.ch-h em{margin-left:auto;font-style:normal;color:var(--mut);font-size:13px;white-space:nowrap}
.ch-t{margin:0;font-size:13px;color:var(--mut);line-height:1.4}
.ch-t.mal{color:var(--red)}
/* pantalla de canje: grande y viva, para que la vea quien atiende la barra */
.canje{position:fixed;inset:0;z-index:50;background:rgba(11,13,18,.55);display:grid;place-items:center;padding:18px}
.canje-c{position:relative;overflow:hidden;width:100%;max-width:400px;border-radius:28px;padding:30px 22px 22px;text-align:center;color:#fff;background:linear-gradient(160deg,#00B8D4,#1437FF 70%);box-shadow:0 30px 60px rgba(11,13,18,.4);display:flex;flex-direction:column;align-items:center;gap:10px}
.canje-c .holo{opacity:.9}
.ck{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;animation:late 1.4s ease-in-out infinite}
.ck svg{width:44px;height:44px}
@keyframes late{50%{transform:scale(1.08)}}
.canje-t{font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.canje-n{font-size:16px;font-weight:600;opacity:.95}
.canje-h{font-size:30px;font-weight:700;margin-top:6px}
.canje-h small{display:block;font-size:13px;font-weight:600;opacity:.9}
.canje-f{margin:6px 0 4px;font-size:14px;opacity:.95}
.canje .btn2{position:relative;z-index:1}

/* teclado del código de la barra */
.pin{position:fixed;inset:0;z-index:40;background:rgba(11,13,18,.5);display:flex;align-items:flex-end;justify-content:center}
.pin-c{width:100%;max-width:440px;background:var(--bg);border-radius:28px 28px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
.pin-c.tiembla{animation:tiembla .35s ease}
@keyframes tiembla{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pin-h{text-align:center;display:flex;flex-direction:column;gap:4px}
.pin-h b{font-size:19px}
.pin-h span{font-size:14px;color:var(--ink2)}
.pin-dots{display:flex;justify-content:center;gap:16px;padding:6px 0}
.pin-dots i{width:16px;height:16px;border-radius:50%;background:var(--s1);box-shadow:var(--inset-sm);display:block}
.pin-dots i.on{background:var(--blue);box-shadow:none}
.pin-e{min-height:20px;margin:0;text-align:center;font-size:14px;font-weight:600;color:var(--red)}
.pin-k{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pin-k button{appearance:none;border:0;height:58px;border-radius:18px;background:var(--s2);box-shadow:var(--raise-sm);font-size:24px;font-weight:600;color:var(--ink);cursor:pointer}
.pin-k button.tx{font-size:15px;color:var(--ink2)}
.pin-k button:active{box-shadow:var(--inset-sm)}
/* código en el tablero de RH */
.codigo{margin-top:12px;padding:14px;border-radius:16px;background:var(--blue-t);display:flex;flex-direction:column;gap:2px}
.codigo span{font-size:13px;color:var(--blue-ink);font-weight:600}
.codigo b{font-size:40px;letter-spacing:.12em;color:var(--blue-ink);line-height:1.1}
.codigo small{font-size:12.5px;color:var(--ink2);line-height:1.4}

/* invitación a la pausa de hidratación */
.hidra{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:18px;color:#fff;background:linear-gradient(160deg,#00B8D4,#1437FF 75%);box-shadow:0 10px 24px rgba(20,55,255,.25);animation:hidra .7s cubic-bezier(.34,1.56,.64,1) 1}
.hidra b{font-size:17px}
.hidra span{font-size:14px;line-height:1.4;opacity:.95}
.hidra .link{color:#fff;align-self:flex-start;margin-top:4px;font-weight:600}
@keyframes hidra{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}

.serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.01em}
/* tu tarde: línea de tiempo pintada (como en la propuesta) */
.tarde{background:#fff;border-radius:24px;padding:20px 18px 14px;box-shadow:var(--raise-sm)}
.tarde h2{margin:0 0 16px;font-size:36px;line-height:1}
.tl{position:relative}
.tl-linea{position:absolute;left:73px;top:6px;width:10px;height:calc(100% - 26px);overflow:visible}
.tl-linea path{fill:none;stroke:url(#gAzul);stroke-width:4;stroke-linecap:round;filter:url(#pincel);stroke-dasharray:100;stroke-dashoffset:100;animation:traza 1.4s cubic-bezier(.16,1,.3,1) .1s forwards}
@keyframes traza{to{stroke-dashoffset:0}}
.tl-i{display:grid;grid-template-columns:62px 1fr;gap:30px;align-items:start;min-height:58px;padding-bottom:12px;position:relative;animation:entraI .7s cubic-bezier(.16,1,.3,1) both}
@keyframes entraI{from{transform:translateX(-8px);opacity:0}to{transform:none;opacity:1}}
.tl-i time{font-size:15px;font-weight:600;color:var(--blue-ink);text-align:right;padding-top:1px;line-height:1.2}
.tl-i p{margin:0;display:flex;flex-direction:column;gap:2px}
.tl-i b{font-size:16px;font-weight:600}
.tl-i span{font-size:13px;color:var(--mut)}
.tl-i::before{content:"";position:absolute;left:73px;top:5px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--blue)}
.tl-i.paso{opacity:.45}
.tl-i.ahora::before{background:var(--cyan);box-shadow:0 0 0 5px rgba(0,184,212,.2)}
.tl-i.ahora span{color:#007E93;font-weight:600}
/* la tarjeta de chelas se puede tocar */
.chelas2{cursor:pointer}
.ch-h .ver{margin-left:8px;color:var(--blue-ink);font-weight:600;font-size:13px}
/* detalle de la barra de hidratación */
.hb{position:fixed;inset:0;z-index:45;background:rgba(11,13,18,.45);display:flex;align-items:flex-end;justify-content:center}
.hb-c{width:100%;max-width:440px;max-height:92dvh;overflow:auto;background:var(--bg);border-radius:28px 28px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;animation:sube .45s cubic-bezier(.16,1,.3,1)}
@keyframes sube{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
.hb-asa{width:44px;height:5px;border-radius:3px;background:var(--line2);align-self:center;margin-bottom:4px}
.hb-cab{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hb-cab h2{margin:0;font-size:30px;line-height:1.05}
.hb-estado{flex:0 0 auto;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--s1);color:var(--ink2)}
.hb-estado.abierta{background:var(--teal-t);color:#007E93}
.hb-chelas{display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;background:#fff;box-shadow:var(--raise-sm)}
.hb-chelas .caps{display:flex;gap:10px;color:var(--blue)}
.hb-chelas .caps svg{width:44px;height:44px;transition:opacity .3s}
.hb-chelas .caps svg.usada{color:var(--line2)}
.hb-chelas p{margin:0;display:flex;flex-direction:column;gap:2px}
.hb-chelas p b{font-size:22px;font-family:'Instrument Serif',Georgia,serif;font-weight:400}
.hb-chelas p span{font-size:13px;color:var(--mut)}
.hb-sub{margin:4px 0 -4px;font-size:15px;font-weight:600}
.plano{border-radius:20px;background:#fff;box-shadow:var(--raise-sm);padding:10px}
.plano svg{width:100%;height:auto;display:block}
.hb-lista{display:flex;flex-direction:column}
.hb-lista div{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;padding:10px 2px;border-top:1px solid var(--line)}
.hb-lista div:first-child{border-top:0}
.hb-lista i{width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);margin:4px 0 0 4px;display:block}
.hb-lista b{display:block;font-size:15px}
.hb-lista span{font-size:13px;color:var(--mut)}
/* el momento de entrar: una hoja chica, el protagonista es tu número de rifa */
.entra{position:fixed;inset:0;z-index:55;background:rgba(11,13,18,.45);display:flex;align-items:flex-end;justify-content:center}
.entra-c{width:100%;max-width:440px;background:var(--bg);border-radius:28px 28px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;animation:sube .45s cubic-bezier(.16,1,.3,1)}
.entra-t{margin:6px 0 0;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ink2)}
.entra-ck{width:22px;height:22px;border-radius:50%;background:var(--teal);display:grid;place-items:center;flex:0 0 auto}
.entra-ck svg{width:15px;height:15px;display:block}
.entra-rifa{width:100%;padding:16px;border-radius:20px;background:#fff;box-shadow:var(--raise-sm)}
.entra-rifa>span{font-size:13px;color:var(--mut)}
.entra-rifa small{display:block;font-size:13px;color:var(--mut);margin-top:4px}
.slot{display:flex;justify-content:center;font-size:96px;line-height:1;height:1em;overflow:hidden;margin-top:4px;color:var(--blue-ink)}
.slot .d{display:block;height:1em;overflow:hidden}
.slot .d i{display:block;font-style:normal;width:.58em;word-break:break-all;line-height:1;text-align:center;transform:translateY(0)}
.entra .btn{margin-top:6px}
/* modo prueba */
.demo{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:18px;border:1.5px dashed var(--line2)}
.demo>span{font-size:12px;color:var(--mut)}
.demo .link{align-self:center}
@media (prefers-reduced-motion: reduce){.tl-linea path,.tl-i,.entra-c,.hb-c{animation:none!important;stroke-dashoffset:0}}

/* la tarjeta de la barra se toca completa */
button.ch-h{appearance:none;border:0;background:none;padding:0;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.ch-h .chev{width:16px;height:16px;flex:0 0 auto;color:var(--blue-ink);margin-left:-2px}
.chelas2:active{transform:scale(.99)}
/* tu tarde: entrada escalonada solo la primera vez */
.tl-i:nth-child(2){animation-delay:.12s}.tl-i:nth-child(3){animation-delay:.2s}.tl-i:nth-child(4){animation-delay:.28s}.tl-i:nth-child(5){animation-delay:.36s}.tl-i:nth-child(6){animation-delay:.44s}.tl-i:nth-child(7){animation-delay:.52s}
.tl.quieto .tl-linea path{animation:none;stroke-dashoffset:0}
.tl.quieto .tl-i{animation:none}
.tl-i.toca{cursor:pointer;padding-right:22px}
.tl-i.toca::after{content:"";position:absolute;right:6px;top:7px;width:7px;height:7px;border-right:2px solid var(--blue-ink);border-top:2px solid var(--blue-ink);transform:rotate(45deg)}
.tl-i.toca:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:12px}
/* detalle de la barra */
.hb-estado i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);margin-right:6px;vertical-align:1px;animation:pulso 1.6s infinite}
.hb-chelas .caps{display:flex;gap:12px}
.cap{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--blue)}
.cap svg{width:46px;height:46px;display:block;filter:drop-shadow(0 4px 8px rgba(20,55,255,.22))}
.cap.usada{color:var(--line2)}
.cap.usada svg{filter:none}
.cap small{font-size:11.5px;font-weight:600;color:var(--mut);min-height:14px;line-height:14px}
.pin{z-index:47}
/* plano de las barras */
.plano svg text{font-family:var(--font);font-size:11.5px;font-weight:600;fill:var(--ink2)}
.plano svg .pl-s{font-size:10.5px;font-weight:500;fill:var(--mut)}
.pl-sala{fill:#F5F7FB}
.pl-muro{fill:none;stroke:#9AA3B5;stroke-width:2;stroke-linecap:round}
.pl-mesas circle{fill:#fff;stroke:var(--line2);stroke-width:1.5}
.pl-flecha{fill:none;stroke:var(--ink2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pl-b rect{fill:var(--ink)}
.pl-b .pl-halo{fill:none;stroke:none}
.pl-b.lib rect{fill:var(--mut)}
.pl-b.apagada rect{fill:var(--line2)}
.pl-b.apagada text{fill:var(--mut)}
.pl-b.viva rect{fill:var(--cyan)}
.pl-b.viva .pl-halo{fill:none;stroke:var(--cyan);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:halo 1.8s cubic-bezier(.16,1,.3,1) infinite}
.pl-b.viva text:not(.pl-s){fill:var(--ink)}
.pl-b.viva .pl-s{fill:#007E93;font-weight:600}
@keyframes halo{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.9,1.25)}}
.plano svg.nuevo .pl-b{animation:entraI .7s cubic-bezier(.16,1,.3,1) .15s both}
.plano svg.nuevo .pl-mesas{animation:entraI .7s cubic-bezier(.16,1,.3,1) both}
.hb-lista i{width:12px;height:22px;border-radius:6px;transform:none;margin:2px 0 0 4px;background:var(--ink)}
.hb-lista .lib i{background:var(--mut)}
.hb-lista .apagada i{background:var(--line2)}
.hb-lista .viva i{background:var(--cyan)}
.hb-lista .viva span{color:#007E93;font-weight:600}
.hb-lista p{margin:0}
.demo-e{margin:0;font-size:13px;color:var(--red);text-align:center;min-height:0}
.demo-e:empty{display:none}
@media (prefers-reduced-motion: reduce){.pl-b.viva .pl-halo,.hb-estado i{animation:none}.plano svg.nuevo .pl-b,.plano svg.nuevo .pl-mesas{animation:none}}

/* cuándo abre la barra de hidratación: el dato que importa en la hoja */
.hb-cuando{padding:16px;border-radius:20px;background:#fff;box-shadow:var(--raise-sm)}
.hc-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hc-a{font-size:15px;font-weight:600;color:var(--ink2)}
.hc-t b{font-size:48px;line-height:1;color:var(--ink)}
.hc-t b.largo{font-size:34px;line-height:1.05}
.hc-t b small{font-family:var(--font);font-size:17px;font-weight:600;color:var(--ink2);margin-left:6px}
.hb-cuando>p{margin:8px 0 0;font-size:14px;line-height:1.4;color:var(--ink2)}
.hb-cuando>p.hc-nota{margin-top:10px;font-size:12.5px;color:var(--mut)}
/* la barra libre y la de hidratación van una tras otra, nunca al mismo tiempo */
.fases{display:grid;grid-template-columns:3fr 1.25fr;gap:4px;margin-top:14px}
.fases div{display:flex;flex-direction:column;gap:6px;min-width:0}
.fases i{display:block;height:8px;border-radius:999px}
.fases .f1 i{background:var(--line2)}
.fases .f2 i{background:linear-gradient(90deg,var(--cyan),var(--blue))}
.fases span{font-size:12px;font-weight:600;color:var(--mut);white-space:nowrap}
.fases .f2 span{color:var(--blue-ink)}
.fases.en-hid .f1 i{background:var(--line)}
.fases.en-hid .f1 span{color:#9AA0AB}
.fases.en-hid .f2 i{animation:pulso 1.6s infinite}
.fases.en-hid .f2 span{color:#007E93}
@media (prefers-reduced-motion: reduce){.fases.en-hid .f2 i{animation:none}}

/* el QR con personalidad: piel azul de apolo, marco que se llena y la etiqueta de boleto */
.tixqr{aspect-ratio:auto;width:52%}
.qr-in{background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.tixqr .qr-in canvas{width:100%;height:auto;aspect-ratio:1/1;border-radius:0;display:block}
.qr-tag{margin:0;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 10px 9px;background:var(--blue);color:#fff;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.qr-tag img{width:15px;height:15px;display:block;filter:brightness(0) invert(1)}

/* ===== el pase: tu retrato de un lado y tu código del otro (como en la propuesta) ===== */
.pase{position:relative;perspective:1400px;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;border-radius:26px}
.pase:focus-visible{box-shadow:0 0 0 3px var(--blue)}
.pase-in{position:relative;display:grid;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.pase-in.sin-anim{transition:none}
.pase-in.vuelta{transform:rotateY(180deg)}
.cara{grid-area:1/1;border-radius:26px;background:#fff;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(20,35,90,.08),0 12px 32px rgba(20,35,90,.14),0 32px 64px rgba(20,35,90,.10)}
.reverso{transform:rotateY(180deg)}
.pase-arte{position:relative;aspect-ratio:4/5;background:#F6F0E6;overflow:hidden}
.pase-arte .mural{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.34}
.pase-arte .p-fig{position:absolute;left:50%;bottom:-2%;height:95%;width:auto;max-width:none;transform:translateX(-50%)}
.pase-arte img.p-fig:not(.recortada){mix-blend-mode:multiply}
.pase-arte .p-fig.recortada{filter:drop-shadow(0 14px 22px rgba(60,40,20,.16));animation:aparece .5s cubic-bezier(.16,1,.3,1)}
@keyframes aparece{from{opacity:.55}to{opacity:1}}
.pase-arte.sinrostro .mural{opacity:.6}
.brillo{position:absolute;inset:0;background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.55) 47%,rgba(140,240,255,.38) 52%,transparent 63%);background-size:260% 100%;background-position:130% 0;pointer-events:none;animation:brillo 4.6s cubic-bezier(.2,0,0,1) .9s infinite}
@keyframes brillo{0%{background-position:130% 0}38%,100%{background-position:-130% 0}}
.pase-ev{position:absolute;left:20px;top:18px;margin:0;font-size:30px;line-height:.95;color:var(--ink)}
.pase-pie{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px 18px;border-top:1.5px dashed var(--line)}
.pase-pie::before,.pase-pie::after{content:"";position:absolute;top:-11px;width:22px;height:22px;border-radius:50%;background:var(--bg)}
.pase-pie::before{left:-11px}.pase-pie::after{right:-11px}
.p-nom{margin:0;font-size:18px;font-weight:600}
.p-al{margin:4px 0 0;font-size:13px;color:var(--ink2);display:flex;align-items:center;gap:7px}
.p-al i{width:10px;height:10px;border-radius:3px;background:var(--blue);flex:0 0 auto}
.p-fecha{text-align:right;flex:0 0 auto}
.p-fecha b{display:block;font-size:30px;line-height:1}
.p-fecha span{font-size:13px;color:var(--mut)}
.q-cab{display:flex;gap:12px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.q-cab img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line);flex:0 0 auto}
.q-s{margin:3px 0 0;font-size:13px;color:var(--ink2)}
.q-zona{position:relative;flex:1;display:grid;place-items:center;min-height:0}
.anillo{position:absolute;width:96%;height:auto;aspect-ratio:1/1;transform:rotate(-90deg);overflow:visible}
.anillo circle{fill:none;stroke-width:8;stroke-linecap:round}
.a-base{stroke:var(--line)}
.a-va{stroke:url(#gAzul);filter:url(#pincel);stroke-dasharray:100;stroke-dashoffset:100}
.q-zona canvas{position:relative;width:58%;height:auto;aspect-ratio:1/1;border-radius:14px;display:block}
.q-pie{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 20px 18px}
.q-r{font-size:13px;color:var(--mut)}
.voltea{margin:-2px 0 0;text-align:center;font-size:14px;color:var(--ink2);display:flex;align-items:center;justify-content:center;gap:8px}
.voltea svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* casillas bajo el pase: rifa, chelas y lo que sigue */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line2)}
.tile{appearance:none;background:none;border:0;border-left:1px solid var(--line2);padding:14px 4px 4px 14px;display:flex;flex-direction:column;gap:6px;text-align:left;font:inherit;color:inherit;min-width:0}
.tile:first-child{border-left:0;padding-left:2px}
button.tile{cursor:pointer;-webkit-tap-highlight-color:transparent}
button.tile:active{opacity:.7}
.tile>span{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:6px}
.tile b{font-size:16px;font-weight:600;min-height:26px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.tile b.serif{font-size:24px;font-weight:400;line-height:1}
.tile em{font-style:normal;color:var(--blue-ink)}
.tile .caps svg{width:24px;height:24px;color:var(--blue);display:block}
.tile .caps svg.usada{color:var(--line2)}
.tile.viva>span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:pulso 1.6s infinite}
/* fotos de la fiesta */
.fotos{background:#fff;border-radius:24px;padding:20px 18px 16px;box-shadow:var(--raise-sm);display:flex;flex-direction:column;gap:12px}
.fo-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fo-cab h2{margin:0;font-size:32px;line-height:1}
.fo-n{font-size:13px;font-weight:600;color:var(--mut);white-space:nowrap}
.fo-s{margin:-4px 0 0;font-size:14px;color:var(--ink2);line-height:1.4}
.fo-pila{position:relative;height:200px}
.polar{position:absolute;left:50%;top:6px;width:150px;padding:8px 8px 30px;background:#fff;border-radius:6px;box-shadow:0 1px 2px rgba(20,35,90,.1),0 10px 24px rgba(20,35,90,.16);transform-origin:50% 60%;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.polar img{width:134px;height:134px;object-fit:cover;display:block;border-radius:2px;background:var(--s1)}
.polar.p0{transform:translateX(-50%) rotate(-3deg);z-index:3}
.polar.p1{transform:translateX(calc(-50% + 72px)) rotate(7deg);z-index:2}
.polar.p2{transform:translateX(calc(-50% - 72px)) rotate(-9deg);z-index:1}
.polar.pend img{filter:saturate(.55) brightness(1.06)}
.polar.p0.pend:not(.fuera){animation:llega .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes llega{from{transform:translateX(-50%) translateY(26px) rotate(4deg);opacity:0}to{transform:translateX(-50%) rotate(-3deg);opacity:1}}
.polar.fuera{animation:fuera 1.8s cubic-bezier(.16,1,.3,1) forwards}
@keyframes fuera{0%,12%{transform:translateX(-50%) rotate(-3deg)}22%{transform:translateX(calc(-50% - 9px)) rotate(-6deg)}32%{transform:translateX(calc(-50% + 9px)) rotate(0deg)}42%{transform:translateX(-50%) rotate(-3deg);opacity:1}100%{transform:translateX(-50%) translateY(34px) rotate(-10deg);opacity:0}}
.polar.vacia{transform:translateX(-50%) rotate(-3deg);height:172px;border:2px dashed var(--line2);box-shadow:none;background:var(--s2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--mut);font-size:13px;font-weight:500}
.polar.vacia svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.sello{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ink2)}
.sello.bien{color:#007E93}
.sello.mal{color:var(--red)}
.gira{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--blue);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.acciones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cta,.fantasma{appearance:none;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 12px;border-radius:999px;font:600 15px/1 var(--font);cursor:pointer;border:0;-webkit-tap-highlight-color:transparent}
.cta{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(20,55,255,.25)}
.fantasma{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2)}
.cta:active,.fantasma:active{transform:scale(.98)}
.cta svg,.fantasma svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.cta[disabled],.fantasma[disabled]{opacity:.45;cursor:default}
.fo-m{margin:0;font-size:12.5px;color:var(--mut);text-align:center;line-height:1.4;min-height:18px}
.fo-m.vivo{color:#007E93;font-weight:600}
.fo-m.mal{color:var(--red)}
/* tu retrato para compartir */
.retrato{display:grid;grid-template-columns:44% 1fr;gap:16px;align-items:center;background:#fff;border-radius:24px;padding:16px;box-shadow:var(--raise-sm)}
.re-prev{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#3a2414,#7a4a26);box-shadow:0 10px 24px rgba(20,35,90,.22)}
.re-prev img{width:100%;height:100%;object-fit:cover;display:block;animation:aparece .5s cubic-bezier(.16,1,.3,1)}
.re-carga{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;font-size:12.5px;font-weight:600;text-align:center;padding:10px}
.re-carga i{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:gira .8s linear infinite}
.re-der{display:flex;flex-direction:column;gap:10px;min-width:0}
.re-der h2{margin:0;font-size:28px;line-height:1.02}
.re-der p{margin:0 0 4px;font-size:13.5px;color:var(--ink2);line-height:1.4}
@media (prefers-reduced-motion: reduce){.pase-in{transition:none}.brillo,.polar,.polar.fuera,.polar.p0.pend,.re-prev img,.pase-arte .p-fig.recortada{animation:none!important;transition:none}}

/* RH: galería de las fotos de la fiesta */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.galeria a{position:relative;display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--s1)}
.galeria img{width:100%;height:100%;object-fit:cover;display:block}
.galeria span{position:absolute;left:6px;bottom:6px;padding:3px 7px;border-radius:999px;background:var(--amber-t);color:var(--amber);font-size:11px;font-weight:700}
.galeria .vacio{grid-column:1/-1}

/* la foto de AP 2026, en vivo: la pantalla es tu celular */
.obra{background:#fff;border-radius:24px;padding:18px 18px 14px;box-shadow:var(--raise-sm);display:flex;flex-direction:column;gap:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
.obra:focus-visible{box-shadow:0 0 0 3px var(--blue)}
.ob-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ob-cab h2{margin:0;font-size:30px;line-height:1}
.ob-n{font-size:13px;font-weight:600;color:var(--mut);white-space:nowrap}
.ob-n.viva{color:#007E93}
.ob-n.viva::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-right:6px;vertical-align:1px;animation:pulso 1.6s infinite}
.ob-lienzo{border-radius:16px;overflow:hidden;background:#3a2414;box-shadow:0 10px 24px rgba(20,35,90,.18)}
.ob-lienzo canvas{width:100%;height:auto;display:block}
.ob-s{margin:0;font-size:13px;color:var(--mut);line-height:1.4}
.ob-s b{color:var(--ink)}
.ob-full{position:fixed;inset:0;z-index:52;background:#0B0D12;display:flex;flex-direction:column;color:#fff}
.ob-top{display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 16px 10px}
.ob-top .serif{font-size:24px;flex:1}
.ob-top span:not(.serif){font-size:13px;color:rgba(255,255,255,.7)}
.ob-top .link{color:#fff;font-size:14px}
.ob-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.ob-scroll canvas{width:320vw;height:auto;display:block}
.ob-pie{margin:0;padding:10px 16px calc(14px + env(safe-area-inset-bottom));font-size:12.5px;color:rgba(255,255,255,.7);text-align:center}