/* Rifa guiada: tren, tres pasos y un contenido limpio en primer plano. */
html:has(body.rw),body.rw{height:100%;overflow:hidden}
body.rw{--rail:clamp(92px,15dvh,124px);--ts:1;--ry:10px;--t:2200ms;--ease:cubic-bezier(.5,0,.22,1);--d:1000px;--ink:#16233f;--ink2:#46536b;background:#dfe7fa;color:var(--ink);overscroll-behavior:none}
@media(max-height:760px){body.rw{--ts:.86}}
@media(max-height:640px){body.rw{--ts:.72;--rail:74px;--ry:6px}}

/* ---- Escenario ---- */
.w-scene{position:fixed;inset:0;overflow:hidden;--step:0;z-index:0;pointer-events:none}
.sky{position:absolute;inset:0;opacity:0;transition:opacity var(--t) ease}
.s0{background:linear-gradient(180deg,#cfdcf7,#eef2fc);opacity:1}
.s1{background:linear-gradient(180deg,#dcd8f5,#f3eefb)}
.s2{background:linear-gradient(180deg,#f6dccf,#fbf0e8)}
.s3{background:linear-gradient(180deg,#16235f,#3b4a93)}
.w-scene[data-step="1"] .s1,.w-scene[data-step="2"] .s2,.w-scene[data-step="3"] .s3{opacity:1}
.lay{position:absolute;left:0;width:calc(100vw + 3*var(--d)*var(--f) + 60px);transform:translate3d(calc(var(--step)*var(--f)*var(--d)*-1),0,0);transition:transform var(--t) var(--ease);will-change:transform;background-repeat:repeat-x;background-position:left bottom;background-size:auto 100%}
.l-mont{bottom:calc(var(--ry) + 22px);height:calc(var(--rail)*1.05);background-image:url(/assets/tren/montanas.svg)}
.l-colina{bottom:calc(var(--ry) + 14px);height:calc(var(--rail)*.8);background-image:url(/assets/tren/colina.svg)}
.dusk{position:absolute;inset:0;background:#141d5e;opacity:0;transition:opacity var(--t)}
.w-scene[data-step="3"] .dusk{opacity:.55}
.l-ground{bottom:0;height:calc(var(--ry) + 16px);background:#fff;background-image:none}
.via{position:absolute;left:0;right:0;bottom:calc(var(--ry) - 7px);height:18px;background:url(/assets/tren/via.svg) repeat-x left center/auto 100%}
.sta{position:absolute;bottom:calc(var(--ry) + 8px);left:calc(var(--i)*var(--d) + max(16px,calc(50vw - 180px)));width:0;height:0}
.sta-post{position:absolute;bottom:0;left:calc(var(--ts)*44px);width:calc(var(--ts)*5px);height:calc(var(--ts)*72px);background:#5b6472;border-radius:3px}
.sta-board{position:absolute;bottom:calc(var(--ts)*56px);left:0;width:calc(var(--ts)*92px);padding:calc(var(--ts)*5px) 2px;text-align:center;font:600 calc(var(--ts)*14px)/1.05 var(--head);color:#fff;background:var(--green-d);border-radius:8px;white-space:nowrap}

/* ---- Tren ---- */
.train{position:absolute;z-index:4;bottom:var(--ry);right:max(8px,calc(50vw - 188px));display:flex;flex-direction:row-reverse;align-items:flex-end;transform:scale(var(--ts));transform-origin:100% 100%}
.car{position:relative;flex:none}
.car svg{display:block;width:100%;height:100%;overflow:visible}
.loco{width:128px;height:80px}
.wag{width:70px;height:54px;margin-right:-1px}
.wh{transform-box:fill-box;transform-origin:center}
.train.moving .wh{animation:spin .42s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.train.moving .car{animation:chug .34s ease-in-out infinite alternate}
@keyframes chug{to{translate:0 -1.2px}}
.train.jolt .car{animation:joltF .55s ease-out both;animation-delay:calc(var(--n)*50ms)}
.train.stop .car{animation:joltB .6s ease-out both;animation-delay:calc(var(--n)*55ms)}
@keyframes joltF{30%{translate:6px 0}65%{translate:-2px 0}}
@keyframes joltB{30%{translate:-6px 0}65%{translate:2px 0}}
.driver{position:absolute;overflow:hidden;left:10%;top:17%;width:23%;height:30%;border-radius:4px 4px 0 0}
.driver img{position:absolute;width:150%;max-width:none;left:-25%;top:4%}
.w-load{position:absolute;left:7px;right:7px;bottom:25px;height:22px}
.w-tk{position:absolute;bottom:0;width:24px;height:15px;margin-left:-12px;border-radius:2px;background:#e6b63d;border:1px solid #fff;transform-origin:50% 100%;animation:drop .3s cubic-bezier(.2,1.5,.4,1)}
@keyframes drop{from{translate:0 -20px;opacity:.3}}
.wag.bump{animation:bumpWag .3s}
@keyframes bumpWag{35%{translate:0 2px}}
.wag.w-join{animation:joinWag .5s ease-out both}
@keyframes joinWag{from{translate:-60px 0;opacity:0}}
.w-count{position:absolute;left:50%;top:27px;translate:-50% 0;font:700 13px/1 var(--head);color:#fff;white-space:nowrap}
.puff{position:fixed;z-index:1;border-radius:50%;background:#fff;pointer-events:none;animation:puff var(--life) ease-out forwards}
@keyframes puff{0%{transform:translate(0,0) scale(.35);opacity:.85}100%{transform:translate(var(--dx),var(--dy)) scale(var(--sc));opacity:0}}
#snow{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* ---- Estructura ---- */
.wizard{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);height:100dvh}
.w-top{flex:none;display:flex;align-items:center;gap:8px;padding:10px 16px 8px;width:100%;max-width:560px;margin:0 auto}
.w-back{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:var(--shadow-s)}
.w-back svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.w-line{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;list-style:none;margin:0;padding:0}
.w-stop{position:relative;padding-top:12px;text-align:center;font:600 .95rem/1.1 var(--head);color:var(--ink2)}
.w-stop:before{content:"";position:absolute;left:0;right:0;top:0;height:7px;border-radius:9px;background:rgba(22,35,63,.2);transition:background .5s}
.w-stop.on{color:var(--ink)}
.w-stop.on:before{background:var(--green)}
.w-mine{flex:none;display:grid;place-items:center;min-height:48px;padding:0 12px;border-radius:14px;background:#fff;color:var(--green-d);font:600 .92rem/1.05 var(--head);text-align:center;box-shadow:var(--shadow-s);text-decoration:none}
.w-stage{position:relative;flex:1;min-height:0;overflow:hidden;margin-bottom:var(--rail)}
.w-track{display:flex;height:100%;width:400%;transition:transform 1150ms cubic-bezier(.55,0,.2,1);--i:0;transform:translate3d(calc(var(--i)*-25%),0,0)}
.w-step{flex:0 0 25%;max-width:25%;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:2px 16px 14px;transition:opacity .4s}
.w-step>*{width:100%;max-width:480px}
.w-step[inert]{opacity:0}
.w-panel{background:#fff;border-radius:22px;box-shadow:0 3px 10px rgba(22,35,63,.12);padding:16px}
.w-closed{height:100%;display:grid;place-items:center;padding:16px}
.w-closed .w-panel{width:100%;max-width:440px;text-align:center}
.w-closed h1{color:var(--ink);font-size:1.9rem;margin:6px 0}
.w-preview{flex:none;background:#fff5d6;color:#5c4404;border-radius:12px;padding:6px 12px;font-weight:800;font-size:.9rem;text-align:center}
.w-cta{flex:none;width:100%;min-height:60px;font-size:1.3rem}
h1:focus,h2:focus{outline:0}

/* ---- 1. Cesta: la tarjeta mide lo que su contenido; la foto cede altura si falta sitio ---- */
#s0{justify-content:center}
.c-card{flex:0 1 auto;min-height:0;container-type:inline-size;display:flex;flex-direction:column;text-align:center;gap:8px;overflow:hidden}
.c-card h1{flex:none;font-size:clamp(1.5rem,6.6vw,1.95rem);line-height:1.1;font-weight:700;color:var(--red-d)}
.c-desc{flex:none;color:var(--ink2);font-weight:700;font-size:1.02rem;line-height:1.25}
/* La foto manda: todo el ancho de la tarjeta, entera y sin recortes; si falta altura, encoge */
.c-hero{position:relative;flex:0 1 auto;margin:0 -16px;aspect-ratio:var(--ar,1.414);min-height:120px}
.c-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.c-items[hidden]{display:none}
.c-items{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:6px;text-align:left}
.c-group{background:var(--cream);border-radius:12px;padding:6px 9px 7px}
.c-group h3{display:flex;align-items:center;gap:6px;font-size:.86rem;font-weight:700;color:var(--red-d);margin-bottom:2px}
.c-group h3:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.c-group p{margin:0;font-weight:700;font-size:.84rem;line-height:1.25;color:var(--ink)}
.c-plain{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;list-style:none;margin:0;padding:0}
.c-plain li{position:relative;padding-left:18px;font-weight:700;font-size:1rem;line-height:1.25}
.c-plain li:before{content:"";position:absolute;left:3px;top:.42em;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.c-how{flex:none;list-style:none;margin:0;padding:0;display:grid;gap:6px;text-align:left}
.c-how li{display:flex;gap:9px;align-items:flex-start;background:var(--cream);border-radius:12px;padding:7px 10px}
.c-how li>b{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font:700 .9rem/1 var(--head)}
.c-how span{font-size:.95rem;line-height:1.25;font-weight:700;color:var(--ink)}
.c-how strong{color:var(--red-d)}
.c-how em{font-style:normal;color:var(--ink2)}
.c-how .h-cash{display:inline-block;margin-left:2px;padding:1px 8px;border-radius:99px;background:#dff5e6;color:var(--green-d);font-size:.86rem;font-weight:800}
.c-how small{display:block;margin-top:2px;font-size:.86rem;color:var(--ink2);font-weight:700}
.c-more{flex:none;min-height:46px;border:0;border-radius:14px;background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#4a3604;font:600 1.05rem/1.1 var(--head);box-shadow:0 4px 0 var(--gold-d);margin-bottom:4px;cursor:pointer}
.c-more:active{transform:translateY(2px);box-shadow:0 2px 0 var(--gold-d)}
.c-more:after{content:" ›";font-size:1.15em}
/* Detalle completo */
.items-in{text-align:left;padding:0;display:flex;flex-direction:column;overflow:hidden}
.items-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 20px 6px}
.items-body h2{color:var(--red-d);font-size:1.5rem;text-align:center;margin-bottom:6px}
.items-body h3{font-size:1.05rem;color:var(--green-d);margin:12px 0 4px;padding-bottom:3px;border-bottom:2px solid var(--gold-l)}
.items-body ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.items-body li{position:relative;padding-left:18px;font-size:.98rem;line-height:1.3;color:var(--ink)}
.items-body li:before{content:"";position:absolute;left:3px;top:.45em;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.items-close{flex:none;margin:8px 16px calc(16px + env(safe-area-inset-bottom));width:auto}
#items .sheet-in{max-height:90dvh}

/* ---- 2. Boletos ---- */
.q-title{flex:none;text-align:center;font-size:clamp(1.45rem,6.4vw,1.85rem);font-weight:700;color:var(--ink)}
.q-zone{position:relative;flex:1;min-height:80px}
.q-say{position:absolute;z-index:3;left:50%;top:0;transform:translateX(-50%);max-width:92%;width:max-content;background:#fff;border-radius:14px;padding:6px 14px;font:600 1.02rem/1.2 var(--head);color:var(--ink);text-align:center;box-shadow:var(--shadow-s)}
.q-say.go{animation:sayIn .28s ease-out}
@keyframes sayIn{from{transform:translateX(-50%) translateY(5px);opacity:0}}
.q-elf{position:absolute;bottom:0;left:50%;height:50%;aspect-ratio:468/740;margin:0;padding:0;border:0;background:none;cursor:pointer;transform:translateX(-50%);touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
/* El balanceo lo calcula el malabarista; los gestos puntuales usan transform y se suman. */
.q-rig{position:absolute;inset:0;display:block;transform-origin:50% 100%}
.q-rig.hop{animation:hopE .4s cubic-bezier(.3,1.3,.5,1)}
.q-rig.ow{animation:ow .36s}
.q-rig.nope{animation:nope .36s}
@keyframes hopE{45%{transform:translateY(-9%)}}
@keyframes ow{30%{transform:translateY(3%) rotate(3deg)}}
@keyframes nope{25%{transform:rotate(-5deg)}70%{transform:rotate(5deg)}}
.q-rig img{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 100%;pointer-events:none}
.q-balls{position:absolute;inset:0;z-index:2;pointer-events:none}
.jt{--w:var(--jw,52px);position:absolute;left:0;top:0;width:var(--w);height:calc(var(--w)/2);margin:calc(var(--w)/-4) 0 0 calc(var(--w)/-2);border-radius:5px;background:#f1c95a;border:2px solid #fff;box-shadow:0 2px 5px rgba(90,60,0,.3);color:var(--red-d);font:700 calc(var(--w)*.28)/calc(var(--w)/2 - 4px) var(--head);text-align:center;will-change:transform}
.jt.in{animation:jtIn .22s ease-out}
@keyframes jtIn{from{scale:.3}}
.q-panel{flex:none;display:grid;gap:8px;padding:12px 14px 14px}
.q-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.q-num{flex:1;text-align:center;line-height:1}
.q-num b{display:block;font:700 3rem/1 var(--head);color:var(--ink);font-variant-numeric:tabular-nums}
.q-num b.bump{animation:numB .26s ease-out}
@keyframes numB{40%{transform:scale(1.18)}}
.q-num small{font:600 1rem var(--head);color:var(--ink2)}
.q-btn{flex:none;width:72px;height:72px;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;cursor:pointer;touch-action:manipulation;font:700 2.7rem/1 var(--head);transition:transform .1s;user-select:none;-webkit-user-select:none}
.q-btn:active{transform:scale(.93)}
.q-plus{background:var(--green)}
.q-minus{background:var(--red)}
.q-btn[disabled]{background:#c9ced8;color:#4b5563;cursor:not-allowed}
.q-total{text-align:center;font-weight:800;font-size:1.08rem;margin:0}
.fly{position:fixed;z-index:30;width:60px;height:28px;left:0;top:0;border-radius:6px;background:#f1c95a;border:2px solid #fff;box-shadow:0 2px 6px rgba(90,60,0,.3);pointer-events:none}

/* ---- 3. Datos ---- */
.d-form{min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px 14px 14px}
.d-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.d-head h2{font-size:1.4rem;color:var(--ink);white-space:nowrap}
.d-pill{flex:0 1 auto;min-width:0;min-height:44px;border:2px solid var(--line);background:#fff;color:var(--ink);padding:4px 12px;border-radius:14px;font:600 .92rem/1.15 var(--head);cursor:pointer}
.d-pill u{text-underline-offset:2px;color:var(--green-d)}
.d-form .field{margin-bottom:7px}
.d-form .field label{font:600 1rem var(--head);color:var(--ink);margin-bottom:2px}
.d-form .field input:not([type=checkbox]){min-height:46px;padding:8px 12px;font-size:1.05rem;border-radius:12px;border-color:#aab3c2}
.d-form .field label.check{display:flex;padding:8px 10px;gap:10px;font:inherit;margin:0;align-items:center;min-height:46px}
.d-form .check span{font-size:1rem;line-height:1.25}
.d-form .check input{width:28px;height:28px}
.d-form .err{font-size:.92rem;margin-top:2px}
.d-form .w-cta{position:sticky;bottom:0;margin-top:4px;min-height:58px;font-size:1.22rem;z-index:2}
.d-form .form-error{padding:8px 12px;margin-bottom:6px;font-size:.95rem}

.d-link{display:inline;padding:0;border:0;background:none;color:var(--green-d);font:700 1em var(--body);text-decoration:underline;text-underline-offset:2px;cursor:pointer;min-height:0}
.priv-in{text-align:left;padding:0;display:flex;flex-direction:column;overflow:hidden;animation:none}
#priv-text{flex:1;min-height:0;overflow-y:auto;padding:20px 20px 8px;overscroll-behavior:contain}
#priv-text article{box-shadow:none;padding:0;margin:0;border-radius:0}
.priv-close{flex:none;margin:8px 16px calc(16px + env(safe-area-inset-bottom));width:auto}
#priv .sheet-in{max-height:90dvh}

.req{color:#c8202b;font-weight:800}
.d-legend{display:block;font:700 .84rem/1 var(--body);color:var(--ink2);margin-top:1px}
.combo{position:relative}
.combo-box{position:relative}
.d-form .field .combo-box input{padding-right:48px;text-overflow:ellipsis}
.combo-x{position:absolute;right:1px;top:1px;bottom:1px;width:46px;display:grid;place-items:center;border:0;background:none;border-radius:0 12px 12px 0;cursor:pointer}
.combo-x svg{width:18px;height:18px;fill:none;stroke:var(--ink2);stroke-width:2.6;stroke-linecap:round}
.combo-list{position:absolute;z-index:6;left:0;right:0;bottom:calc(100% - 22px);margin:0;padding:4px;list-style:none;max-height:min(232px,42dvh);overflow-y:auto;overscroll-behavior:contain;background:#fff;border:2px solid #aab3c2;border-radius:14px;box-shadow:0 10px 26px rgba(22,35,63,.26)}
.combo-list li{min-height:44px;display:flex;flex-direction:column;justify-content:center;padding:5px 10px;border-radius:9px;cursor:pointer;font-weight:700;line-height:1.2;color:var(--ink)}
.combo-list li small{font-weight:600;font-size:.82rem;color:var(--ink2)}
.combo-list li mark{background:#ffe9ae;color:inherit;border-radius:3px}
.combo-list li.on,.combo-list li:hover{background:#eef2fc}
.combo-list li.empty{cursor:default;background:none;color:var(--ink2);font-weight:600}

.d-form:has(.field.bad) .w-cta{position:static}

/* Confirmación: los botones quedan siempre a mano aunque el aviso del sorteo sea largo */
#done .sheet-in{padding:14px 16px 0}
#done .okmark{width:52px;height:52px;margin-bottom:4px}
#done .okmark svg{width:30px;height:30px}
#done h2{font-size:1.45rem}
#done .ticket{margin:10px 0}
#done .notice{margin-bottom:0;padding:10px 12px;font-size:.92rem}
#done .stack-btns{position:sticky;bottom:0;background:#fff;margin:0 -16px;padding:10px 16px calc(14px + env(safe-area-inset-bottom));gap:8px;z-index:2}
#done .stack-btns .btn{min-height:50px}

/* Alturas justas: se mantienen los tamaños táctiles y se compacta lo demás */
@media(max-height:700px){
  .q-btn{width:60px;height:60px;font-size:2.3rem}
  .q-num b{font-size:2.4rem}
  .w-cta{min-height:52px;font-size:1.15rem}
  .q-panel{gap:5px;padding:8px 12px 10px}
  .c-desc{font-size:.94rem}
  .c-card{gap:6px}
  .c-group{padding:5px 8px 6px}
  .c-group h3,.c-group p{font-size:.84rem}
  .c-more{min-height:42px}
  .c-how li{padding:5px 8px}
  .c-how span{font-size:.88rem}
  .c-how small,.c-how .h-cash{font-size:.8rem}
  .c-hero{margin:0 -12px}
  .w-panel.c-card{padding:12px}
  .d-form{padding:8px 12px 10px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8px;align-content:start}
  .d-form>*{grid-column:1/-1}
  .d-form>.f-half{grid-column:auto}
  .d-form .field{margin-bottom:3px}
  .d-form .field label{font-size:.92rem;margin-bottom:0}
  .d-form .field input:not([type=checkbox]){min-height:44px;padding:5px 11px}
  .d-form .field label.check{min-height:44px;padding:4px 8px}
  .d-form .w-cta{min-height:52px}
  .d-head{margin-bottom:2px}
  .q-say{font-size:.94rem;padding:4px 10px}
}
@media(max-height:600px){.c-desc{display:none}.d-form .w-cta{position:static}}
@media(max-width:360px){.d-head h2{font-size:1.2rem}.d-pill{font-size:.84rem;padding:3px 8px}}
@media(max-height:520px){
  body.rw{--rail:0px}
  .train,.l-ground{display:none}
}
@media(prefers-reduced-motion:reduce){body.rw{--t:10ms}.w-track{transition:none}}
.no-anim,.no-anim *{transition:none!important;animation:none!important}