:root{--font-figtree: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif}*,*:before,*:after{margin:0;padding:0}:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#experience{position:fixed;inset:0;overflow:hidden;background-color:#fff;transition:background-color .6s ease}#experience-canvas{width:100%;height:100%}#instructionsWASD,#instructionsTeleport{pointer-events:none}#loading-screen{position:fixed;inset:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0px;z-index:2;transition:opacity .6s cubic-bezier(.4,0,.2,1) 1.2s}#loading-screen.hidden{opacity:0;pointer-events:none}.honda-loader-container{position:relative;width:320px;height:90px;margin-bottom:0;transform:translateY(-10px)}.honda-logo-base{position:absolute;inset:0;background-color:#e2e2e2;-webkit-mask-image:url(../ui/logo-honda-carga.svg);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-image:url(../ui/logo-honda-carga.svg);mask-size:contain;mask-repeat:no-repeat;mask-position:center}.honda-logo-fill{position:absolute;inset:0;background-color:#c00;-webkit-mask-image:url(../ui/logo-honda-carga.svg);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-image:url(../ui/logo-honda-carga.svg);mask-size:contain;mask-repeat:no-repeat;mask-position:center;clip-path:inset(0 100% 0 0);transition:clip-path .4s cubic-bezier(.25,1,.5,1)}.loading-counter{font-family:"Barlow",var(--font-figtree);font-size:86px;font-weight:700;font-style:italic;line-height:1;letter-spacing:-.04em;margin-bottom:4px;padding-right:18px;background:linear-gradient(135deg,#111,#777);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0px 6px 8px rgba(0,0,0,.12))}.loading-label{font-family:"Barlow",var(--font-figtree);font-size:13px;font-weight:600;letter-spacing:.6em;color:#888;text-transform:uppercase;position:relative;margin-left:.6em}.loading-label:after{content:"";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:24px;height:2px;background-color:#c00;border-radius:2px}#transition{position:fixed;inset:0;z-index:4;display:flex;flex-direction:column;pointer-events:none;transform:scaleX(0) scaleY(.02);transform-origin:center}#transition.animateScale{animation:growXY 1s cubic-bezier(.76,0,.24,1) forwards}.transSplit{width:100%;height:50%;background:#c00}#topSplit{display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px}#topSplit.splitOut{animation:flyUp .6s cubic-bezier(.76,0,.24,1) forwards}#bottomSplit.splitOut{animation:flyDown .6s cubic-bezier(.76,0,.24,1) forwards}@keyframes growXY{0%{transform:scaleX(0) scaleY(.005)}45%{transform:scaleX(1) scaleY(.015)}55%{transform:scaleX(1) scaleY(.02)}to{transform:scaleX(1) scaleY(1)}}@keyframes flyUp{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes flyDown{0%{transform:translateY(0)}to{transform:translateY(100%)}}.logo{display:flex;flex-direction:column;align-items:center;gap:4px;transform:scale(0);transform-origin:center}.logo.animateIn{animation:bounceIn .25s cubic-bezier(.34,1.56,.64,1) .5s forwards}#logoFill{width:120px}#textLogo{width:120px;height:20px;background:url(../ui/TypoLogo.svg) no-repeat}#instructionsWASD{position:fixed;bottom:32px;right:32px;z-index:80;display:grid;grid-template-areas:". w ." "a s d";gap:6px;transform:scale(0);transform-origin:center}#instructionsTeleport{position:fixed;bottom:32px;left:32px;z-index:80;transform:scale(0);transform-origin:center}#instructionsTeleport>img{transform:scale(.4);transform-origin:bottom center;opacity:.4}#instructionsWASD.animateIn,#instructionsTeleport.animateIn{animation:bounceIn .3s cubic-bezier(.34,1.56,.64,1) forwards}#wW{grid-area:w}#aA{grid-area:a}#sS{grid-area:s}#dD{grid-area:d}.marco{width:36px;height:36px;border:1px solid rgba(0,0,0,.6);border-radius:6px;display:flex;align-items:center;justify-content:center;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.instructText{font-family:Google Sans Flex,sans-serif;font-size:11px;font-weight:600;font-style:normal;font-variation-settings:"slnt" -5;letter-spacing:.1em;text-transform:uppercase;color:#fff9;min-width:4ch;text-align:center}#color-panel{position:fixed;bottom:-40px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:#0006;border:.5px solid rgba(255,255,255,.6);border-radius:40px;padding:15px 30px 75px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.panel-divider{width:.5px;height:24px;background:#ffffff26;flex-shrink:0}#color-buttons{transform:scale(0);transform-origin:center}#color-buttons.animateIn{animation:bounceIn .3s cubic-bezier(.34,1.56,.64,1) forwards}.color-btn{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;margin:0 2px;transition:transform .15s,border-color .15s,box-shadow .15s}.icon-btn{width:60px;height:60px;border-radius:100%;border:.5px solid rgba(255,255,255,.15);background:#ffffff14;cursor:pointer;display:inline-block;align-items:center;justify-content:center;transition:background .2s,transform .15s;filter:brightness(2.25);margin-right:15px;margin-left:15px;margin-bottom:20px}.icon-btn:hover{background:#ffffff40;transform:translateY(-1px)}.icon-btn.active{background:#fff6;border-color:#ffffff80}.icon-btn img{width:22px;height:22px;opacity:1;mix-blend-mode:multiply}.color-btn:hover{transform:scale(1.18)}.color-btn.active{border-color:#ffffffb3;box-shadow:0 0 0 1px #fff3}.other-buttons{display:flex;gap:2px}.other-buttons.animateIn{animation:bounceIn .3s cubic-bezier(.34,1.56,.64,1) forwards}.anim-btn img{width:100%;height:100%;object-fit:contain}.anim-btn.active{outline:2px solid white}.anim-info{background:#0006;border:.5px solid rgba(0,0,0,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:18px;overflow:hidden;opacity:0;pointer-events:none;z-index:10;width:420px;display:flex;gap:.75rem;flex-direction:column;position:fixed;padding:16px}.anim-info img{width:100%;height:160px;object-fit:cover;border:1.5px solid rgba(0,0,0,.1);border-radius:10px;flex-shrink:0;display:block}.anim-info p{font-family:Google Sans Flex,sans-serif;font-size:.75rem;line-height:1.6;color:#fffc;padding:.75rem 1rem}@keyframes bounceIn{0%{transform:scale(0)}to{transform:scale(1)}}.top-ui{position:fixed;top:12px;left:50%;transform:translate(-50%);display:flex;gap:8px;z-index:999}.ui-btn:hover{background:#ffffff38;transform:translateY(-1px)}.ui-btn.active{background:#00ffb459}#product-panel{position:fixed;bottom:8rem;left:50%;transform:translate(-50%) scale(1);z-index:100;min-width:380px;text-align:center;background:#0006;border:.5px solid rgba(0,0,0,.6);border-radius:20px;padding:2rem;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:opacity .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}#product-panel.hidden{opacity:0;pointer-events:none;transform:translate(-50%) scale(.85)}.panel-close{position:absolute;top:10px;right:12px;background:#ffffff14;border:.5px solid rgba(255,255,255,.15);color:#ffffffb3;font-size:1.1rem;width:32px;height:32px;border-radius:50%;cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center}.panel-close:hover{background:#ffffff26}.panel-name{font-family:Google Sans Flex,sans-serif;font-size:1.5rem;font-weight:700;font-variation-settings:"slnt" -5;color:#fff;margin:.25rem 0 .3rem}.panel-subtitle{font-family:Google Sans Flex,sans-serif;font-size:1.1 rem;font-weight:400;color:#fff9;letter-spacing:.02em;margin-bottom:2rem}.panel-btn{display:inline-block;background:#e31837;color:#fff;font-family:Google Sans Flex,sans-serif;font-weight:600;font-size:.9rem;padding:.55rem 1.6rem;border-radius:12px;text-decoration:none;border:.5px solid rgba(255,255,255,.15);transition:background .15s,transform .15s}.panel-btn:hover{background:#ff2040;transform:translateY(-1px)}.anim-info-close{position:absolute;top:15px;right:14px;background:#c00;border:0;color:#fff;font-weight:700;line-height:1;font-size:1.1rem;width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.anim-info-close:hover{background:#ff2000}#moto-drawer{position:fixed;top:50%;right:0;transform:translateY(-50%) translate(calc(100% - 28px));z-index:200;display:flex;flex-direction:row;align-items:center;transition:transform .35s cubic-bezier(.76,0,.24,1)}#moto-drawer.open{transform:translateY(-50%) translate(0)}#moto-drawer-tab{width:28px;height:56px;background:#fff6;border:.5px solid rgba(255,255,255,.6);border-right:none;border-radius:10px 0 0 10px;color:#ffffffb3;font-size:1.2rem;cursor:pointer;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0}#moto-drawer-tab:hover{background:#ffffff26}#moto-drawer-content{width:200px;max-height:70vh;overflow-y:auto;background:#0a0a0ee0;border:.5px solid rgba(255,255,255,.15);border-right:none;border-radius:12px 0 0 12px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:12px 0;display:flex;flex-direction:column}#moto-drawer-content::-webkit-scrollbar{width:4px}#moto-drawer-content::-webkit-scrollbar-track{background:transparent}#moto-drawer-content::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.drawer-title{font-family:Google Sans Flex,sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#ffffff4d;padding:0 16px 8px}.drawer-item{font-family:Google Sans Flex,sans-serif;font-size:.82rem;font-weight:500;color:#ffffffb3;background:none;border:none;text-align:left;padding:9px 16px;cursor:pointer;transition:background .12s,color .12s;border-left:2px solid transparent}.drawer-item:hover{background:#ffffff12;color:#fff}.drawer-item.active{color:#fff;border-left-color:#e31837;background:#e3183714;font-weight:700}#qr-popup{display:none;position:fixed;inset:0;z-index:9999}#qr-popup.active{display:flex;align-items:center;justify-content:center}#qr-backdrop{position:absolute;inset:0;background:#000000a6;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}#qr-content{transform:scale(.85);padding:35px;position:relative;z-index:1;display:flex;flex-direction:column;background:#0a0a0eeb;border:.5px solid rgba(255,255,255,.12);border-radius:20px;overflow:hidden;box-shadow:0 32px 80px #0009;width:300px}#qr-iframe-col{width:300px;height:300px;overflow:hidden;flex-shrink:0;position:relative}#qr-iframe-col iframe{width:100%;height:100%;border:none;display:block}#qr-info-col{display:flex;flex-direction:column;padding:20px 20px 22px;gap:12px;border-top:.5px solid rgba(255,255,255,.08)}.qr-title{font-family:Barlow,sans-serif;font-size:1.4rem;font-weight:500;font-variation-settings:"slnt" -5;color:#fff;line-height:1.3;margin:0;text-align:center}.qr-divider{height:.5px;background:#ffffff26}.qr-instructions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}.qr-instructions li{display:flex;align-items:flex-start;gap:8px}.qr-icon{font-size:.9rem;flex-shrink:0;margin-top:1px}.qr-instructions span:last-child{font-family:Barlow,sans-serif;font-weight:300;font-size:.94rem;color:#ffffffa6;line-height:1.5;text-align:center}#qr-close{position:absolute;top:10px;right:10px;background:#0006;border:.5px solid rgba(255,255,255,.15);color:#ffffffb3;font-size:1rem;width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:2}#qr-close:hover{background:#ffffff26}.anim-btn-label{font-family:Google Sans Flex,sans-serif;font-size:.57rem;line-height:1.6;color:#fffc;margin-top:3px;align-self:center;display:inline-block;position:relative;padding-top:5px}body.con-panel-debug #side-menu{left:360px;right:auto}#side-menu{position:fixed;top:50%;right:20px;transform:translateY(-50%);z-index:150;display:none;flex-direction:column;gap:10px;background:#0006;border:.5px solid rgba(255,255,255,.6);border-radius:20px;padding:14px 10px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.side-menu-item{width:64px;background:none;border:none;color:inherit;text-decoration:none;font:inherit;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:12px;cursor:pointer;transition:background .2s,transform .15s}.side-menu-item:hover{background:#ffffff14;transform:translateY(-1px)}.side-menu-item.active{background:#ffffff2e}.side-menu-item img{width:40px;height:40px;opacity:1}.side-menu-item h2{font-family:Google Sans Flex,sans-serif;font-size:.6rem;font-weight:600;font-style:normal;letter-spacing:.04em;color:#ffffffbf;margin:0;text-transform:none;white-space:nowrap}.side-menu-item.active h2{color:#fff}#sub-panel{position:fixed;bottom:0;left:50%;transform:translate(-50%) translateY(100%);z-index:140;display:flex;align-items:center;justify-content:center;gap:12px;min-width:280px;background:#0006;border:.5px solid rgba(255,255,255,.6);border-radius:40px 40px 0 0;padding:18px 30px 28px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:transform .4s cubic-bezier(.34,1.2,.4,1);pointer-events:none}#sub-panel.open{transform:translate(-50%) translateY(0);pointer-events:auto}.leyenda-submenu{display:none}.subpanel-content{display:none;align-items:center;gap:12px}#subpanel-anim .icon-btn h2{font-family:Google Sans Flex,sans-serif;font-size:.65rem;line-height:1.6;color:#fffc;margin-top:3px;margin-bottom:0;align-self:center;display:inline-block;position:relative;padding-top:17px}.subpanel-content.visible{display:flex}@media(max-width:640px){.honda-loader-container{width:240px;height:68px}.loading-counter{font-size:64px}#side-menu{right:10px;gap:6px;padding:10px 6px}.side-menu-item{width:48px;padding:6px 2px}.side-menu-item img{width:24px;height:24px}.side-menu-item h2{font-size:.5rem}#sub-panel{width:94vw;max-width:94vw;padding:14px 16px 22px;border-radius:24px 24px 0 0;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}#sub-panel::-webkit-scrollbar{display:none}.subpanel-content.visible{display:grid}.subpanel-content .other-buttons,.subpanel-content #color-buttons{display:contents}#subpanel-anim{padding-bottom:32px}#subpanel-color .icon-btn,#subpanel-color .color-btn,#subpanel-env .icon-btn{width:54px;height:54px;flex:0 0 54px}#subpanel-color .icon-btn img,#subpanel-env .icon-btn img{width:26px;height:26px}.subpanel-content{grid-template-columns:repeat(auto-fit,86px);justify-content:center;column-gap:4px;row-gap:28px;justify-items:center;align-items:start;overflow-x:visible;width:100%}.subpanel-content .icon-btn{flex:0 0 36px;width:36px;height:36px;margin:0}.subpanel-content .color-btn{flex:0 0 auto}.subpanel-content .icon-btn img{width:17px;height:17px}.leyenda-submenu{display:none}#subpanel-anim .icon-btn h2,#subpanel-env .icon-btn h2,#subpanel-color .icon-btn h2,.subpanel-content .anim-btn-label{display:block;position:absolute;top:100%;left:50%;transform:translate(-50%);width:84px;padding-top:6px;margin:0;font-family:var(--font-figtree);font-size:.66rem;line-height:1.2;height:2.4em;white-space:normal;text-align:center;color:#ffffffd9}.subpanel-content .icon-btn{position:relative}.icon-btn{width:46px;height:46px;margin-left:6px;margin-right:6px;margin-bottom:8px;flex-shrink:0}.icon-btn img{width:18px;height:18px}.color-btn{width:38px;height:38px;flex-shrink:0}.anim-info{width:88vw;max-width:360px;inset:12px auto auto 50%;transform:translate(-50%);padding-top:36px}.anim-info img{height:110px}.anim-info p{font-size:.68rem;padding:.5rem .75rem}#qr-content{padding:16px;max-width:80vw}#qr-content img{width:70vw;max-width:220px;height:auto}#product-panel{min-width:unset;width:90vw;padding:1.5rem 1.25rem}.panel-name{font-size:1.2rem}}@media(max-width:380px){.side-menu-item{width:44px}.side-menu-item img{width:20px;height:20px}.side-menu-item h2{font-size:.44rem}.icon-btn{width:40px;height:40px}#qr-content{width:100%}}#visor-producto{position:fixed;inset:0;z-index:10000;background:#fff;display:flex}#visor-producto.oculto{display:none}#visor-frame{flex:1;width:100%;height:100%;border:0;display:block}#visor-volver{position:absolute;top:18px;left:18px;z-index:2;display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border:2px solid #cc0000;border-radius:12px;background:#fff;color:#c00;font:700 15px/1 Poppins,system-ui,sans-serif;cursor:pointer;box-shadow:0 2px 10px #0000001f;transition:background .2s ease,color .2s ease,box-shadow .2s ease}#visor-volver:before{content:"";width:22px;height:22px;flex:0 0 auto;background:currentColor;-webkit-mask:url(../ui/animIcons/ICON_Beneficios_Generico.png) center / contain no-repeat;mask:url(../ui/animIcons/ICON_Beneficios_Generico.png) center / contain no-repeat}#visor-volver:hover{background:#c00;color:#fff;box-shadow:0 4px 14px #cc00004d}@media(max-width:768px){#visor-volver{top:12px;left:12px;padding:10px 16px;font-size:13px;gap:8px}#visor-volver:before{width:18px;height:18px}}body.con-visor #instructionsWASD,body.con-visor #instructionsTeleport,body.con-visor .top-ui,body.con-visor #product-panel{display:none!important}.side-menu-item h2,#subpanel-anim .icon-btn h2,.icon-btn h2,.panel-name,.panel-subtitle,.panel-btn,#anim-info-text,.anim-info-text,.qr-instructions,#qr-content h2,#qr-content p{font-family:var(--font-figtree)!important}.panel-name,#qr-content h2,.anim-info-text strong,.side-menu-item h2{font-weight:700}#barra-inferior{display:contents}.icon-btn.con-foto{overflow:hidden;filter:none}.icon-btn.con-foto img,#subpanel-env .icon-btn.con-foto img{display:block;width:100%;height:100%;object-fit:cover;border-radius:100%}@media(max-width:640px){#barra-inferior{display:block;position:fixed;bottom:0;left:0;right:0;z-index:150}#side-menu,body.con-panel-debug #side-menu{position:relative;z-index:1;inset:auto;transform:none;flex-direction:row;justify-content:space-around;align-items:stretch;gap:2px;padding:0 6px;border-radius:20px 20px 0 0;border-left:0;border-right:0;border-bottom:0;background:#0000009e}.side-menu-item{width:auto;flex:1 1 0;min-width:0;padding:10px 2px calc(8px + env(safe-area-inset-bottom));gap:3px;position:relative;border-radius:0}.side-menu-item.active{background:#c00}.side-menu-item.active h2{color:#fff;font-weight:800}.side-menu-item.active img{opacity:1;transform:scale(1.08)}.side-menu-item img{transition:transform .18s ease}#side-menu{border-radius:0;border-top:0}#sub-panel{position:absolute;bottom:100%;z-index:auto;left:0;right:0;width:auto;min-width:0;max-width:none;flex-direction:column;align-items:stretch;transform:translateY(100%);background:#0000009e;border-radius:20px 20px 0 0;border-bottom:0;border-left:0;border-right:0;padding:14px 8px 16px;overflow-x:visible}#sub-panel.open{transform:translateY(0)}.side-menu-item.active:after{content:"";position:absolute;bottom:100%;left:0;right:0;height:10px;background:#c00;border-radius:8px 8px 0 0}}#anim-info-text,.anim-info-text{font-family:var(--font-figtree);margin:0}#anim-info-text h1,.anim-info-text h1{font-family:var(--font-figtree);font-size:1.35rem;font-weight:800;line-height:1.25;letter-spacing:-.01em;text-align:center;color:#fff;margin:0 0 12px;padding:0 38px 12px;position:relative}#anim-info-text h1:after,.anim-info-text h1:after{content:"";position:absolute;left:50%;bottom:0;transform:translate(-50%);width:44px;height:3px;border-radius:2px;background:#c00}#anim-info-text h2,.anim-info-text h2{font-family:var(--font-figtree);font-size:.85rem;font-weight:400;line-height:1.5;text-align:left;color:#ffffffd1;margin:0}@media(max-width:640px){.anim-info{width:min(92vw,420px);left:4vw!important;right:4vw;padding:16px;border-radius:16px}#anim-info-text h1,.anim-info-text h1{font-size:1.2rem;padding:0 34px 11px}#anim-info-text h2,.anim-info-text h2{font-size:.8rem;line-height:1.45}}#subpanel-color .icon-btn,#subpanel-env .icon-btn{margin-bottom:0!important}@media(min-width:641px){#sub-panel{padding-bottom:18px!important}}
