:root{font-family:Arial,Helvetica,sans-serif;color:#fff;background:#071f4d;font-synthesis:none}*{box-sizing:border-box}body{margin:0}#screen{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 100% 20%,#124987 0,transparent 65%),#071f4d}header{height:15vh;min-height:80px;padding:2.5vh 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff26;gap:2vw}.brand{font-size:clamp(18px,2.1vw,46px);font-weight:900;line-height:.98;letter-spacing:-.03em}.brand span{display:block;color:#ff932e;font-size:1.36em}.header-note{font-size:clamp(14px,1.25vw,28px);font-weight:bold;letter-spacing:.18em}.live{font-size:clamp(14px,1.1vw,25px);color:#c7d7ef;text-align:right}#stage{position:relative;flex:1;min-height:0;display:flex;align-items:center}.product{height:100%;width:100%;display:grid;grid-template-columns:51% 49%;animation:enter .55s ease both}.photo{margin:3vh 0 3vh 4vw;background:#fff;border-radius:1.4vw;overflow:hidden;padding:2.3vh;display:flex;align-items:center;justify-content:center}.photo img{width:100%;height:100%;object-fit:contain}.details{padding:4vh 4vw 3vh;display:flex;flex-direction:column;justify-content:center}.eyebrow{font-size:clamp(14px,1.3vw,30px);font-weight:700;letter-spacing:.14em;color:#ffac55;margin:0 0 2vh;text-transform:uppercase}h1,h2,p{margin-top:0}h2{font-size:clamp(25px,3.4vw,76px);line-height:1.05;letter-spacing:-.035em;margin-bottom:2vh;overflow-wrap:anywhere}.variant{font-size:clamp(16px,1.4vw,30px);color:#d7e5f8;margin-bottom:1.5vh}.price{color:#ff9a3c;font-size:clamp(50px,7vw,160px);font-weight:900;letter-spacing:-.055em;line-height:1.05;white-space:nowrap}.unit{font-size:clamp(16px,1.4vw,32px);color:#e2eaf6;margin:1vh 0 3vh}.stock{font-size:clamp(16px,1.35vw,32px);color:#91edba;font-weight:bold}.promo{padding:4vh 7vw;width:100%;animation:enter .55s ease both}.promo h1{font-size:clamp(36px,6.5vw,145px);line-height:1.02;letter-spacing:-.055em;margin-bottom:3vh;max-width:90%}.promo h1 em{color:#ff9a3c;font-style:normal}.promo p:not(.eyebrow){font-size:clamp(18px,2.2vw,48px);line-height:1.4;max-width:85%;margin-bottom:0}.category-list{color:#ffae61}.video-wrap{width:100%;height:100%;position:relative;background:#000;display:flex;justify-content:center}.video-wrap video{width:100%;height:100%;object-fit:contain}.caption{position:absolute;bottom:2vh;left:8%;right:8%;text-align:center;padding:1.1vh 2vw;background:#07152ced;border-radius:.6vw;color:#fff;font-size:clamp(18px,2vw,44px);line-height:1.25;font-weight:700}footer{height:14vh;min-height:80px;background:#041532;padding:2vh 4vw;display:flex;align-items:center;justify-content:space-between;gap:2vw}footer strong,footer span{display:block;font-size:clamp(14px,1.55vw,35px);line-height:1.4}footer span{color:#ffad61}footer a{font-size:clamp(14px,1.45vw,32px);color:#fff;text-decoration:none;font-weight:700}.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto;min-width:0}#controls-menu{position:relative;flex-shrink:0;z-index:5}#controls-toggle{width:44px;height:44px;padding:0;border-radius:50%;font-size:28px;line-height:1;background:#071f4de6;color:#fff;border-color:#ffffff66}#controls{position:absolute;right:0;top:52px;display:flex;flex-direction:column;gap:8px;padding:10px;background:#041532f5;border:1px solid #ffffff33;border-radius:12px;width:max-content;max-width:calc(100vw - 32px);box-shadow:0 5px 20px #0005}#controls[hidden]{display:none}#controls button{text-align:left}button{font:inherit;font-size:16px;background:#fff;color:#07234f;border:1px solid #bfcde1;border-radius:8px;padding:12px 16px;cursor:pointer;box-shadow:0 3px 12px #0004}button:focus-visible{outline:4px solid #ff962e;outline-offset:3px}#progress{height:4px;background:#ff9635;width:0;position:absolute;bottom:0;left:0}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-aspect-ratio:1/1){header{height:12vh;padding:2vh 5vw}.header-note{display:none}.product{grid-template-columns:1fr;grid-template-rows:52% 48%}.photo{margin:1vh 5vw;padding:1vh}.details{padding:1vh 6vw}h2{font-size:clamp(24px,5vw,42px);margin-bottom:1vh}.price{font-size:clamp(44px,10vw,80px)}.eyebrow{margin-bottom:1vh}.stock,.unit{margin:0}.promo h1{font-size:clamp(40px,10vw,76px);max-width:100%}.promo p:not(.eyebrow){max-width:100%}footer{height:17vh;flex-direction:column;justify-content:center;align-items:flex-start;gap:1vh;padding:2vh 5vw}.header-actions{gap:8px}button{padding:8px 10px}.caption{left:3%;right:3%;font-size:20px}}@media(prefers-reduced-motion:reduce){.product,.promo{animation:none}}
.promo{height:100%;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,#071f4d33,#071f4d22),url(almacen.png) center/cover no-repeat}.promo h1{max-width:78%;text-shadow:0 3px 20px #071f4d}.promo p:not(.eyebrow){max-width:65%;text-shadow:0 2px 12px #071f4d}.promo .eyebrow{text-shadow:0 2px 8px #071f4d}@media(max-aspect-ratio:1/1){.promo{background-position:40% center}.promo h1,.promo p:not(.eyebrow){max-width:100%}}
.product{position:relative}.mascot{position:absolute;right:2.5vw;bottom:1.5vh;width:17vw;max-height:19vh;object-fit:contain;pointer-events:none;filter:drop-shadow(0 10px 10px #0005);animation:truck-arrive 1.5s cubic-bezier(.16,.75,.3,1) both}.promo{position:relative}.promo .mascot{right:3vw;bottom:5vh;width:30vw;max-height:36vh;animation:truck-arrive 2s ease-out both}.promo h1{max-width:72%;font-size:clamp(36px,5.5vw,125px)}.promo p:not(.eyebrow){max-width:62%}.photo img{animation:place-product 1.2s .2s cubic-bezier(.2,.85,.28,1) both;transform-origin:50% 80%}.details{padding-bottom:7vh}.stock{padding-right:12vw}@keyframes truck-arrive{0%{opacity:0;transform:translateX(16vw)}70%{opacity:1;transform:translateX(-.8vw) rotate(-1deg)}100%{opacity:1;transform:translateX(0) rotate(0)}}@keyframes place-product{0%{opacity:0;transform:translateY(-12%) scale(.87) rotate(-3deg)}65%{opacity:1;transform:translateY(1.5%) scale(1.015) rotate(.5deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}@media(max-aspect-ratio:1/1){.mascot{width:27vw;max-height:12vh;right:2vw;bottom:2vh}.promo .mascot{width:42vw;max-height:23vh;bottom:2vh;opacity:.95}.promo h1{max-width:100%;font-size:clamp(36px,9vw,70px)}.promo p:not(.eyebrow){max-width:100%;padding-bottom:14vh}.details{padding-bottom:3vh}.stock{padding-right:22vw}}@media(prefers-reduced-motion:reduce){.photo img,.mascot,.promo .mascot{animation:none}}
/* Manos y producto comparten la llegada; las manos se retiran tras colocarlo. */
.photo{position:relative;isolation:isolate;padding:3.5vh}
.photo>img:not(.placing-hand){position:relative;width:90%;height:90%;animation:place-with-hands 2.6s cubic-bezier(.22,.72,.3,1) both;z-index:1}
.photo .placing-hand{position:absolute;width:33%;height:auto;bottom:0;object-fit:contain;z-index:2;pointer-events:none;filter:drop-shadow(0 5px 4px #0002);transform-origin:center;animation:hand-place 2.6s cubic-bezier(.22,.72,.3,1) both}
.photo .hand-left{left:-1%}.photo .hand-right{right:-1%;scale:-1 1}
@keyframes place-with-hands{0%{opacity:0;transform:translateY(65%) scale(.84)}12%{opacity:1}38%{transform:translateY(-1%) scale(1)}48%,100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hand-place{0%{opacity:0;transform:translateY(100%)}12%{opacity:1}38%,48%{opacity:1;transform:translateY(-7%)}80%,100%{opacity:0;transform:translateY(125%)}}
footer{height:20vh;min-height:152px;padding:1vh 3vw;gap:2vw}
footer>div{max-width:62%}footer strong,footer>div span{font-size:clamp(14px,1.45vw,32px)}
footer .qr-link{display:flex;align-items:center;gap:1.2vw;flex-shrink:0;text-align:right}
.qr-link img{display:block;width:clamp(120px,17vh,200px);height:clamp(120px,17vh,200px);background:#fff;border-radius:4px}
.qr-link b{display:block;color:#ffac55;font-size:clamp(14px,1.15vw,27px)}footer .qr-link span{color:#fff;font-size:clamp(13px,1.05vw,23px)}.qr-link small{font-size:clamp(11px,.85vw,19px);color:#c7d7ef}
@media(max-aspect-ratio:1/1){footer{height:auto;min-height:150px;flex-direction:row;align-items:center;padding:8px 4vw}footer>div{max-width:58%}.qr-link div{display:none}.qr-link img{width:120px;height:120px}.photo .placing-hand{width:27%}}
@media(prefers-reduced-motion:reduce){.photo>img:not(.placing-hand){animation:none}.photo .placing-hand{display:none}}