/* Cubupi: botones de juguete y acabados de la edición 3. */
:root{--spring:cubic-bezier(.2,.85,.3,1.18)}
.button,.action-chip,.round-button,.destination-tabs>button,.companion-buttons>button,.outfit-choice{
 --face-top:#fffef5;--face-bottom:#d9edf4;--edge:#517d98;--base:#315e7c;--lift:6px;
 background:linear-gradient(175deg,var(--face-top) 8%,var(--face-bottom) 100%);
 border:2px solid var(--edge);border-radius:18px;
 box-shadow:inset 0 3px 0 #ffffffd9,inset 2px 0 0 #ffffff70,inset 0 -4px 0 #0000000e,0 var(--lift) 0 var(--base),0 calc(var(--lift) + 5px) 8px #16324d1c;
 transition:transform .2s var(--spring),box-shadow .2s var(--spring);position:relative;touch-action:manipulation;
}
.button{min-height:60px;padding:14px 24px;text-shadow:0 1px #ffffff85}
.button-yellow{--face-top:#fff087;--face-bottom:#ffce25;--edge:#bd861a;--base:#a56911;color:#193c4b}
.button-white{--face-top:#fff;--face-bottom:#c9f3ff;--edge:#4085ad;--base:#236889;color:#155c89}
.big-play{min-height:70px;padding:14px 29px 14px 18px;border-radius:21px;--lift:8px;font-size:21px;letter-spacing:.3px}
.button .play-object{height:57px;width:57px;object-fit:contain;margin:-11px 0 -9px -6px;filter:drop-shadow(0 3px 1px #67581226);transition:transform .22s var(--spring)}
.nav-play{min-height:53px;padding:11px 20px 11px 12px;gap:5px;font-size:17px}
.nav-play .play-object{width:39px;height:39px;margin:-9px 0 -9px -4px}
.button>svg{filter:drop-shadow(0 2px 0 #ffffffb3);transition:transform .22s var(--spring)}
.action-chip{--face-bottom:#e0f3fb;--base:#55859b;--edge:#568bab;--lift:5px;border-radius:17px;min-height:48px;padding:10px 15px}
.action-chip svg{stroke-width:2.4;filter:drop-shadow(0 2px 0 #fff);color:#24759b}
.round-button{--face-bottom:#d4edf8;--base:#386d8a;--edge:#4f87a5;width:49px;height:49px;border-radius:18px;--lift:5px}
.day-control{position:absolute;--face-top:#fff7b1;--face-bottom:#ffd949;--edge:#b38b27;--base:#886721;color:#725325}
.day-control[aria-pressed=true]{--face-top:#dce0ff;--face-bottom:#a6bef5;--base:#415b93;--edge:#7485c3;color:#354f8d}
.turn-button{position:absolute}
.destination-tabs{gap:14px;margin-block:27px 33px;max-width:1060px}
.destination-tabs>button{--face-bottom:#e9f2dc;--edge:#9dbb8b;--base:#709363;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;flex:1 1 0;min-width:120px;max-width:170px;padding:5px 8px 12px;border-radius:21px;font-size:15px;color:#325333;min-height:103px}
.destination-tabs>button img{width:77px;height:67px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 2px #48674020);transition:transform .22s var(--spring)}
.destination-tabs>button.selected{--face-top:#197caa;--face-bottom:#10638f;--edge:#08769f;--base:#075580;color:#fff;text-shadow:0 1px #075c82}
.destination-tabs>button.selected img{transform:translateY(-4px) rotate(-5deg) scale(1.07)}
.explorer{border-width:3px;box-shadow:inset 0 4px 0 #ffffff6b,inset 0 -7px 0 #00000009,0 9px #80b76e48,0 17px 24px #2c654d0a}
.explorer-bottom{background:linear-gradient(175deg,#fffffff7,#f4fff6f0);border:2px solid #fff;box-shadow:inset 0 -3px #c5dcc33b,0 5px #294c5926;padding-bottom:22px}
.explorer-bottom .button{--lift:5px;min-height:55px;font-size:15px;max-width:310px}
.scene-tag{box-shadow:inset 0 2px #fff,0 3px #18443822;background:linear-gradient(#fff,#e4f2e5)}
.speech-bubble,.zone-bubble,.companion-speech{background:linear-gradient(160deg,#fff,#fffbe6);box-shadow:inset 0 3px #fff,3px 5px #214b6024}
.hero h1{text-shadow:0 2px #087db1,0 4px #07689e,0 7px 0 #075a8b3d}
.hero h1>span{color:#eeffc2}
.hero-copy>.eyebrow{font-size:13px;letter-spacing:1.4px}
.hero-copy>.device-note{font-size:13px}
.sky-shell{isolation:isolate}
.sky-shell:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#17285b,#2b477d 56%,#7a96b0 100%);opacity:0;transition:opacity 1.2s}
.sky-shell.is-night:before{opacity:1}
.hero-world.night{background:transparent}
.sky-shell.is-night .world-controls>span{color:#effaff}
.header nav>a{padding:8px 17px 9px;border-radius:16px;background:#ffffff0b;box-shadow:inset 0 1px #ffffff28,0 3px #0463a92b}
.outfit-choices>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;max-width:440px}
.outfit-choice{--face-top:#715bad;--face-bottom:#594391;--edge:#c3b8f5;--base:#46338f;display:flex;align-items:center;flex-direction:column;padding:0 6px 10px;color:#fff;min-width:0;border-radius:19px;font-size:14px}
.outfit-choice img{display:block;width:76px;height:76px;object-fit:contain;pointer-events:none;margin-top:0;filter:drop-shadow(0 3px 1px #352d692a);transition:transform .22s var(--spring)}
.outfit-choice.selected{--face-top:#fbffdf;--face-bottom:#d6ee9e;--edge:#eaffc4;--base:#82954a;color:#34533d}
.outfit-choice.selected img{transform:translateY(-4px) rotate(-3deg)}
.swatch{position:relative;border-radius:15px;border:3px solid #e4e0ff;background:linear-gradient(150deg,#ffffff50,transparent 48%,#00000012),var(--swatch);box-shadow:inset 0 3px #ffffff7a,inset 0 -3px #00000021,0 5px #3d3184;transition:transform .18s var(--spring);touch-action:manipulation;min-width:44px;min-height:44px}
.swatch.selected:after{content:'';position:absolute;left:12px;top:7px;width:8px;height:14px;border:solid white;border-width:0 3px 3px 0;transform:rotate(45deg);filter:drop-shadow(0 1px 1px #000)}
.swatch.selected{outline-offset:4px}
.companion-buttons>button{--face-bottom:#fff0b9;--edge:#caad55;--base:#ab883d;border-radius:16px;font-size:14px}
.companion-buttons>button.selected{--face-top:#ffe871;--face-bottom:#ffcc32;--edge:#b49023;--base:#91731e}
.destination-tabs>button.selected,.companion-buttons>button.selected,.outfit-choice.selected{background:linear-gradient(175deg,var(--face-top),var(--face-bottom));border-color:var(--edge);box-shadow:inset 0 3px #ffffffc9,inset 2px 0 #ffffff70,inset 0 -4px #0000000e,0 var(--lift) var(--base),0 calc(var(--lift) + 5px) 8px #16324d1c}
.round-button:hover,.action-chip:hover,.outfit-choice:hover{background:linear-gradient(175deg,var(--face-top),var(--face-bottom))}
.faq-list summary>span{width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;font-size:25px;border-radius:11px;background:linear-gradient(#fff,#def4fb);box-shadow:inset 0 2px #fff,0 3px #b5d6e4;border:1px solid #b5d6e4;color:#267ea4;transition:transform .2s}
.closing{background:linear-gradient(135deg,#109fe0,#0b7dc2)}
@media(hover:hover) and (pointer:fine){
 .button:hover,.action-chip:hover,.round-button:hover,.destination-tabs>button:hover,.companion-buttons>button:hover,.outfit-choice:hover{transform:translateY(-3px);box-shadow:inset 0 3px #fff,inset 2px 0 #ffffff70,inset 0 -4px #0000000e,0 calc(var(--lift) + 3px) var(--base),0 calc(var(--lift) + 9px) 12px #16324d20;background:linear-gradient(175deg,var(--face-top),var(--face-bottom))}
 .button:hover .play-object{transform:rotate(-8deg) scale(1.09)}
 .button:hover>svg:last-child{transform:translateX(3px)}
 .destination-tabs>button:hover img,.outfit-choice:hover img{transform:translateY(-6px) rotate(-5deg)}
 .turn-button:hover{transform:translate(-50%,-3px)}
 .swatch:hover{transform:translateY(-4px)}
}
.button:active,.action-chip:active,.round-button:active,.destination-tabs>button:active,.companion-buttons>button:active,.outfit-choice:active{transform:translateY(4px);box-shadow:inset 0 2px #ffffffad,inset 0 -2px #0000000c,0 2px var(--base),0 4px 3px #16324d18;transition-duration:.07s}
.turn-button:active{transform:translate(-50%,4px)}
.swatch:active{transform:translateY(3px);box-shadow:inset 0 2px #ffffff55,0 2px #312874}
.action-chip.is-reacting svg{animation:toy-wave .5s ease-in-out 2}
@keyframes toy-wave{0%,100%{transform:rotate(0)}35%{transform:rotate(-16deg)}70%{transform:rotate(12deg)}}
@media(max-width:1050px){.header nav{gap:8px}.header nav>a{padding-inline:12px}.destination-tabs{gap:10px}.destination-tabs>button{min-width:105px}.outfit-choices>div{gap:8px}.outfit-choice img{width:66px;height:66px}.outfit-choice{padding-inline:3px}.button{padding-inline:20px}}
@media(max-width:760px){
 .hero-actions{gap:13px}.hero-actions>.big-play{padding:13px 15px 13px 8px;min-height:60px;font-size:15px;gap:6px}
 .hero-actions>.button-white{min-height:60px;padding:13px 15px;font-size:14px}.hero-actions .play-object{width:41px;height:41px;margin:-7px 0 -7px -3px}
 .nav-play{padding:10px 12px 10px 7px;gap:2px;min-height:47px}.nav-play .play-object{width:32px;height:32px;margin:-7px 0 -7px -2px}
 .hero-copy>.eyebrow{font-size:12px}.hero-copy>.device-note{font-size:12px}
 .action-chip{padding:10px 11px;font-size:13px;border-radius:15px;gap:7px}.world-controls>div{gap:10px}
 .day-control{position:absolute;width:44px;height:44px;border-radius:15px}
 .destination-tabs{max-width:480px;gap:12px 9px;margin-block:25px 29px}.destination-tabs>button{min-width:0;max-width:none;min-height:91px;padding:3px 3px 10px;font-size:13px;border-radius:17px;line-height:1.1}.destination-tabs>button img{height:57px;width:65px}
 .explorer{border-radius:24px;border-width:2px}.explorer-topline .round-button{width:44px;height:44px;border-radius:15px}
 .explorer-bottom{padding:16px 11px 22px;gap:12px}.explorer-bottom .button{font-size:14px;min-height:49px;padding:11px 17px}
 .outfit-choices>div{max-width:360px;margin:auto;gap:8px}.outfit-choice{font-size:14px;padding:0 3px 9px;min-height:84px;border-radius:16px}.outfit-choice img{width:64px;height:64px}.outfit-choices{margin-top:23px}.swatch{width:44px;height:44px}
 .companion-buttons>button{font-size:13px;border-radius:14px;min-height:46px}.companion-speech{left:50%;top:-17px;font-size:13px}
 .wardrobe-copy .button{max-width:100%;font-size:15px}.turn-button{position:absolute}
}
@media(max-width:370px){.hero-actions{gap:11px}.hero-actions>.big-play{font-size:14px;padding-right:11px}.hero-actions>.button-white{padding-inline:11px;font-size:13px}.hero-actions .play-object{width:35px;height:35px}.color-choices>div{gap:9px}.destination-tabs>button{font-size:12px}.drag-hint{font-size:10px;gap:3px;padding-inline:5px}}
@media(prefers-reduced-motion:reduce){.button,.action-chip,.round-button,.destination-tabs>button,.companion-buttons>button,.outfit-choice{transition:none}.sky-shell:before{transition:none}}
@media(hover:none){.button:hover,.action-chip:hover,.round-button:hover,.destination-tabs>button:hover,.companion-buttons>button:hover,.outfit-choice:hover{transform:none}.turn-button:hover{transform:translateX(-50%)}.button:active,.action-chip:active,.round-button:active,.destination-tabs>button:active,.companion-buttons>button:active,.outfit-choice:active{transform:translateY(4px)}.turn-button:active{transform:translate(-50%,4px)}}