/* Páginas públicas: web del grupo, check-in, invitados, votar y pantalla */
.pwrap{max-width:720px;margin:0 auto;padding:18px 16px 60px}
.phead{display:flex;align-items:center;gap:12px;margin:6px 0 18px}
.phead img{max-height:52px;max-width:150px;object-fit:contain}
.phead h1{font-size:20px}
.phead small{display:block;color:var(--muted);font-size:13px;font-weight:400}
.big-ok{text-align:center;padding:30px 10px}
.big-ok .ic{font-size:64px;line-height:1}
.big-ok h2{font-size:26px;margin:10px 0 6px}
.ptiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ptiles .btile{min-height:58px}
.vote-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;justify-content:flex-start;padding:14px;margin-bottom:10px;font-size:17px;min-height:60px;position:relative;overflow:hidden}
.vote-opt .bar{position:absolute;left:0;top:0;bottom:0;background:rgba(207,32,48,.12);z-index:0;transition:width .6s}
.vote-opt span{position:relative;z-index:1}
.vote-opt .n{margin-left:auto;font-weight:700}
.vote-opt.on .bar{background:rgba(255,255,255,.18)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* web pública */
.hero{background:linear-gradient(135deg,#cf2030,#8f1019);color:#fff;padding:54px 20px 64px;text-align:center}
.hero img{max-height:90px;max-width:240px;object-fit:contain;background:#fff;border-radius:14px;padding:10px;margin-bottom:16px}
.hero h1{font-size:clamp(28px,5vw,44px)}
.hero p{max-width:640px;margin:14px auto 0;font-size:17px;opacity:.95;white-space:pre-line}
.hero .when{display:inline-flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.hero .when span{background:rgba(255,255,255,.16);padding:7px 14px;border-radius:30px;font-size:14px}
.wsec{max-width:1100px;margin:0 auto;padding:36px 16px}
.wsec>h2{font-size:24px;margin-bottom:18px;text-align:center}
.wnav{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);display:flex;gap:4px;justify-content:center;flex-wrap:wrap;padding:6px}
.wnav a{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--text);font-size:14px}
.wnav a:hover{background:var(--soft)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.mcard{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.mcard .av.lg{width:88px;height:88px}
.mcard .lg-logo{max-height:38px;max-width:120px;object-fit:contain;margin-top:4px}
.mcard p{font-size:13px;color:#4b5263;margin:4px 0 0}
.wgal{columns:4 220px;column-gap:10px}
.wgal img{width:100%;border-radius:10px;margin-bottom:10px;display:block;cursor:zoom-in;break-inside:avoid}
.wfoot{text-align:center;color:var(--muted);font-size:13px;padding:30px 16px}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:50;cursor:zoom-out}
.lb img{max-width:96vw;max-height:92vh;border-radius:6px}

/* pantalla del proyector */
body[data-page=pantalla]{background:#0f1320;color:#fff;overflow:hidden}
.scr{height:100vh;display:flex;flex-direction:column;padding:2.2vh 3vw}
.scr-top{display:flex;align-items:center;gap:18px;font-size:2.2vh}
.scr-top img{height:6vh;background:#fff;border-radius:10px;padding:4px 8px}
.scr-top b{font-size:3vh}
.scr-top .grow{flex:1}
.scr-main{flex:1;display:flex;gap:4vw;align-items:center;justify-content:center;min-height:0}
.scr-qr{background:#fff;border-radius:2vh;padding:1.6vh;width:min(42vh,32vw);flex:none;text-align:center;color:#1d2330}
.scr-qr svg{width:100%;height:auto;display:block}
.scr-qr div{font-size:2.2vh;font-weight:600;margin-top:.6vh}
.scr-qr.sm{width:min(28vh,22vw)}
.scr-col{flex:1;min-width:0;max-width:1100px}
.scr h2{font-size:5.2vh;margin-bottom:2vh}
.scr .sub{font-size:2.6vh;opacity:.7}
.sbar{display:flex;align-items:center;gap:1.4vw;margin:1.1vh 0;font-size:3vh}
.sbar .nm{width:30%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbar .tr{flex:1;background:rgba(255,255,255,.08);border-radius:1vh;height:4.4vh;overflow:hidden}
.sbar .tr div{height:100%;background:linear-gradient(90deg,#cf2030,#f25c69);border-radius:1vh;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.sbar .ct{width:4em;text-align:right;font-weight:700}
.sbar.win .nm{color:#ffd54a;font-weight:700}
.scr-win{text-align:center}
.scr-win .trophy{font-size:14vh;line-height:1}
.scr-win .name{font-size:9vh;font-weight:800;color:#ffd54a;margin:2vh 0 1vh;line-height:1.1}
.scr .wheel-box{width:min(76vh,48vw)!important;flex:none}
.scr .pointer{border-top-color:#fff}
.scr-sound{position:fixed;inset:0;background:rgba(15,19,32,.88);display:flex;align-items:center;justify-content:center;z-index:20;cursor:pointer;font-size:3vh;flex-direction:column;gap:2vh}
.scr-sound button{font-size:3vh;padding:2vh 4vw}
.scr-count{display:flex;gap:3vw;justify-content:center;margin-top:4vh}
.scr-count div{text-align:center}
.scr-count b{display:block;font-size:10vh;line-height:1}
.scr-count span{font-size:2.6vh;opacity:.7}
.pwrap .seg{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
.pwrap .seg button{padding:9px 4px;font-size:13px}
.wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.wheel-box{position:relative;width:min(calc(100vh - 200px),100%);max-width:720px;aspect-ratio:1}
.wheel-box canvas{width:100%;height:100%;display:block}
.pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:22px solid transparent;border-right:22px solid transparent;border-top:44px solid var(--text);filter:drop-shadow(0 3px 3px rgba(0,0,0,.3));z-index:2}
.wheel-box.glow canvas{animation:glow .6s ease-in-out 4 alternate}
@keyframes glow{from{filter:drop-shadow(0 0 0 rgba(207,32,48,0))}to{filter:drop-shadow(0 0 30px rgba(207,32,48,.8))}}
.win-card{text-align:center}
.win-card .win{font-size:clamp(30px,6vw,54px);font-weight:700;color:var(--accent);margin:10px 0 6px}
/* bienvenida en el proyector */
.scr-bienv{background:linear-gradient(180deg,#0f1320,#1a2136)}
.mosaico{flex:1;display:grid;gap:1.2vh;align-content:center;min-height:0}
.mos{background:#fff;border-radius:1.2vh;aspect-ratio:2.2;display:flex;align-items:center;justify-content:center;padding:1.2vh;overflow:hidden;animation:mosin .6s both}
.mos img{max-width:100%;max-height:100%;object-fit:contain}
.mos span{color:#1d2330;font-weight:700;font-size:2vh;text-align:center}
@keyframes mosin{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.scr-clock{text-align:right;line-height:1.1}
.scr-clock b{display:block;font-size:4vh}
.scr-clock span{font-size:1.8vh;opacity:.75}
.scr-foot{display:flex;align-items:center;gap:2vw;font-size:2.4vh;padding-top:1.5vh}
.mini-qr{display:flex;align-items:center;gap:1vw;font-size:2vh}
.mini-qr svg{width:12vh;height:12vh;background:#fff;border-radius:1vh;padding:.5vh}