:root{--bg:#080c24;--white:#fff;--gold:#ffd15a}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:#fff;background:var(--bg)}body{overflow-x:hidden;background:radial-gradient(ellipse at 50% 35%,#252258 0%,#111633 48%,#080c24 100%)}.ambient{position:fixed;border-radius:50%;filter:blur(80px);opacity:.24;pointer-events:none}.ambient.a{width:55vw;height:55vw;background:#8e4bf8;top:-20vw;left:-20vw}.ambient.b{width:55vw;height:55vw;background:#00a5c8;right:-20vw;bottom:-20vw}.shell{position:relative;min-height:100dvh;max-width:1150px;margin:auto;padding:24px 32px 16px;display:flex;flex-direction:column}header,footer{display:flex;justify-content:space-between;align-items:center;gap:15px}.brand{display:flex;align-items:center;gap:11px}.brand-icon{width:45px;height:45px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#f7c547,#f1764b);font-size:29px;color:#17142d}.brand b{font-size:24px;letter-spacing:-1px}.brand b span{color:var(--gold)}.brand small{display:block;letter-spacing:2px;font-size:9px;color:#b9bed9;font-weight:700}.event-tag{border:1px solid #7777a0;border-radius:40px;padding:10px 20px;font-size:12px;font-weight:800;letter-spacing:2px;color:#e8d9ff;background:#ffffff0c}.heading{text-align:center;margin:16px 0 5px}.eyebrow{font-size:12px;letter-spacing:4px;color:#d3b7ff;font-weight:800}.heading h1{font-size:clamp(38px,5.5vw,72px);margin:5px 0;letter-spacing:-2px;line-height:1.1;font-weight:1000}.heading em{font-style:normal;color:var(--gold);text-shadow:0 3px 28px #e7a83150}.heading p{margin:8px 0;color:#d0d2e6;font-size:clamp(14px,1.6vw,19px)}.play{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.wheel-area{position:relative;width:min(58vh,72vw,590px);aspect-ratio:1;min-width:280px;display:grid;place-items:center}.glow{position:absolute;inset:4%;border-radius:50%;box-shadow:0 0 80px #ffbc4255,0 0 130px #8748ff33;pointer-events:none}canvas{width:100%;height:100%;filter:drop-shadow(0 14px 22px #0007)}.pointer{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:51px;color:#fff1a8;z-index:5;line-height:1;filter:drop-shadow(0 4px 2px #0008)}.spin-center{position:absolute;z-index:3;width:19%;height:19%;border-radius:50%;border:6px solid #fff1b1;background:radial-gradient(circle at 30% 20%,#fff5bc,#f8b43d 70%,#d98720);color:#37220a;font-weight:1000;font-size:clamp(14px,2vw,24px);box-shadow:0 0 20px #0008;cursor:pointer;touch-action:manipulation}.spin-center span{display:block;font-size:15px}.controls{text-align:center;margin:8px 0}.spin-button,.again{background:linear-gradient(100deg,#ffde72,#ffb333);color:#38200a;border:0;border-radius:100px;padding:17px 44px;font-size:clamp(16px,2.1vw,23px);font-weight:1000;box-shadow:0 9px 28px #ffae3b45;cursor:pointer;touch-action:manipulation}.spin-button:disabled,.spin-center:disabled{opacity:.6;cursor:default}.controls p{font-size:14px;color:#bec3df;margin:10px 0}footer{font-size:12px;color:#a7aecf;border-top:1px solid #ffffff22;padding-top:12px}footer button{background:#ffffff16;color:white;border:1px solid #ffffff33;padding:8px 13px;border-radius:30px;cursor:pointer}.overlay{position:fixed;z-index:10;inset:0;display:grid;place-items:center;background:#070b21e8;backdrop-filter:blur(12px);padding:18px}.overlay[hidden],.ticket[hidden]{display:none}.result-card{position:relative;z-index:2;text-align:center;width:min(94vw,660px);max-height:94dvh;overflow-y:auto;padding:clamp(24px,5vh,50px) 28px;background:linear-gradient(150deg,#282456,#151b3d);border:2px solid #ffffff30;border-radius:34px;box-shadow:0 30px 100px #000a}.result-card.winner{border:3px solid #ffe08a;box-shadow:0 0 100px #eab54b55}.result-icon{font-size:clamp(65px,11vh,120px);animation:pop .65s both}.result-tag{font-size:13px;letter-spacing:3px;color:#ffdb80;font-weight:900;margin:10px 0}.result-card h2{font-size:clamp(28px,5vw,52px);margin:6px 0 16px}.result-card p{font-size:clamp(19px,2.8vw,29px);line-height:1.45;margin:14px auto;max-width:550px}.result-card .result-detail{font-size:clamp(15px,2vw,20px);color:#d3d9f2}.ticket{border:2px dashed #ffe09a;border-radius:15px;background:#ffda7520;padding:12px;margin:16px 0;font-weight:800;letter-spacing:1px;overflow-wrap:anywhere}.again{margin-top:16px;font-size:18px;padding:16px 25px}.result-card small{display:block;margin-top:18px;color:#aeb8d6}.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}.piece{position:absolute;top:-30px;width:10px;height:19px;animation:fall linear forwards}@keyframes fall{to{transform:translate3d(var(--dx),110vh,0) rotate(900deg);opacity:0}}@keyframes pop{0%{transform:scale(.3) rotate(-20deg);opacity:0}70%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}@media(max-width:600px){.shell{padding:15px 13px}.event-tag{font-size:9px;padding:9px}.brand b{font-size:20px}.brand small{font-size:7px}.brand-icon{width:38px;height:38px}.heading{margin-top:20px}.eyebrow{letter-spacing:2px;font-size:10px}.wheel-area{width:min(92vw,52vh);min-width:0}.pointer{top:-13px;font-size:38px}.spin-button{padding:15px 24px}footer{font-size:10px;flex-wrap:wrap;justify-content:center}.result-card{padding:25px 18px}}@media(min-aspect-ratio:13/9) and (max-height:720px){.shell{padding-top:10px}.heading{margin:0}.heading h1{font-size:37px}.wheel-area{width:min(55vh,440px)}.controls{margin:0}.spin-button{padding:10px 25px;font-size:17px}footer{padding-top:5px}}@media(prefers-reduced-motion:reduce){.piece,.result-icon{animation:none}}

/* MUPI vertical táctil: dimensionamiento fluido sin depender de pulgadas. */
@media (orientation:portrait){
 .shell{width:100%;max-width:900px;min-height:100dvh;padding:clamp(12px,2.2vh,32px) clamp(14px,3vw,38px);justify-content:space-between}
 header{min-height:6dvh}.heading{margin:clamp(12px,3vh,36px) 0 0}.heading h1{font-size:clamp(35px,6.3vw,82px)}
 .heading p{font-size:clamp(15px,2.8vw,26px)}
 .play{flex:1;justify-content:center;gap:clamp(12px,2.8vh,32px)}
 .wheel-area{width:min(95vw,73dvh,800px);min-width:0}
 .controls{width:100%}.spin-button{width:min(90%,650px);min-height:clamp(68px,8vh,110px);font-size:clamp(19px,3.2vw,31px)}
 .controls p{font-size:clamp(14px,2.2vw,23px)}
 .result-card{width:min(94vw,790px);max-height:90dvh}.again{min-height:68px}
 .sound{min-height:44px;min-width:110px}
}
@media (orientation:portrait) and (max-height:700px){.heading{margin:2px 0}.heading p{margin:3px 0}.play{gap:3px}.wheel-area{width:min(88vw,55dvh)}.spin-button{min-height:54px}footer{padding-top:4px}}
button{-webkit-tap-highlight-color:transparent}button:focus-visible{outline:4px solid #fff;outline-offset:4px}

/* Ajuste específico para MUPI Full HD 1080x1920 (9:16), escalable a la resolución CSS del navegador. */
@media (orientation:portrait) and (min-aspect-ratio: 9/17) and (max-aspect-ratio: 9/15){
 html,body{width:100%;height:100%;overscroll-behavior:none}
 .shell{height:100dvh;min-height:100dvh;max-width:none;padding:2.2dvh 3.8vw 1.6dvh;overflow:hidden}
 header{flex:0 0 auto;min-height:4.5dvh}
 .brand-icon{width:clamp(38px,5.2vw,72px);height:clamp(38px,5.2vw,72px)}
 .brand b{font-size:clamp(22px,3.4vw,42px)}
 .event-tag{font-size:clamp(10px,1.55vw,20px)}
 .heading{flex:0 0 auto;margin:1.4dvh 0 .4dvh}
 .heading h1{font-size:clamp(42px,7.5vw,90px)}
 .heading p{font-size:clamp(16px,2.65vw,30px)}
 .play{min-height:0;gap:1.8dvh;justify-content:center}
 .wheel-area{width:min(92vw,51dvh,980px);flex:0 1 auto;min-width:0}
 .spin-center{font-size:clamp(13px,2.5vw,30px)}
 .spin-button{min-height:7dvh;width:min(91vw,800px);font-size:clamp(21px,3.2vw,38px)}
 .controls p{font-size:clamp(14px,2.3vw,26px)}
 footer{flex:0 0 auto;min-height:4dvh;font-size:clamp(11px,1.55vw,18px)}
 .result-card{width:min(92vw,900px);max-height:88dvh}
 .result-card p{font-size:clamp(19px,3vw,36px)}
 .again{min-height:6dvh;font-size:clamp(19px,2.6vw,32px)}
}

/* Identidad institucional personalizable: fondo blanco permanente */
.logo-panel{background:#fff!important;border-radius:18px;min-width:220px;width:min(38vw,390px);height:clamp(90px,10vh,160px);padding:12px 18px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px #0003;overflow:hidden}
.logo-panel img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.logo-panel.logo-empty:after{content:"ESPACIO PARA LOGO";color:#6b7280;font-size:14px;font-weight:700;text-align:center;letter-spacing:1px}
@media(max-width:600px){.logo-panel{min-width:145px;width:46vw;height:clamp(70px,9vh,115px);padding:9px}.event-tag{max-width:45vw;text-align:center}}
@media(min-aspect-ratio:9/16){.logo-panel{height:clamp(65px,9vh,120px)}}

/* ============================================================
   IDENTIDAD CCICH - Brandbook, página 10
   MUPI táctil vertical 1080 × 1920
   ============================================================ */
:root{--bg:#135EA9;--white:#fff;--gold:#F8AD4C;--orange:#EC663A;--blue:#135EA9;--teal:#05A1AB}
html,body{background:#135EA9;color:#fff}
body{background:radial-gradient(ellipse at 52% 43%,#087baf 0%,#135EA9 58%,#07417e 100%)}
.ambient.a{background:#05A1AB;opacity:.35}.ambient.b{background:#F8AD4C;opacity:.15}
.event-tag{border-color:#ffffff80;background:#ffffff20;color:#fff}
.eyebrow{color:#d7faff}
.heading em{color:#F8AD4C;text-shadow:0 4px 22px #EC663A77}
.heading p,.controls p{color:#eefaff}
.glow{box-shadow:0 0 90px #F8AD4C55,0 0 140px #05A1AB55}
.pointer{color:#F8AD4C}
.spin-center{border:7px solid #fff;background:#fff;box-shadow:0 0 0 8px #F8AD4C,0 8px 24px #04345d80;display:grid;place-items:center;cursor:default;pointer-events:none}
.center-mark{display:block;color:#05A1AB;font-size:clamp(28px,6vw,75px);line-height:1}
.spin-button,.again{background:linear-gradient(105deg,#F8AD4C,#EC663A);color:#fff;box-shadow:0 10px 30px #063c7090;border:2px solid #fff9}
.spin-button:active,.again:active{transform:scale(.985)}
.result-card{background:linear-gradient(145deg,#135EA9,#075077);border:2px solid #ffffff70}
.result-card.winner{border-color:#F8AD4C;box-shadow:0 0 90px #F8AD4C88}
.result-tag{color:#ffdf9b}
.result-card .result-detail{color:#e4f9ff}
.ticket{border-color:#F8AD4C;background:#F8AD4C20}
footer{color:#e4f9ff}
footer button{background:#ffffff20}
.logo-panel{background:#fff!important}
/* La rueda se dimensiona en relación con la altura disponible, sin recortes */
@media(orientation:portrait){.wheel-area{width:min(92vw,50dvh,900px)}.heading{margin-top:1dvh}}