/* Tótem vertical 1080×1920. Todo se dimensiona en px del "stage", que se escala para entrar en la pantalla real. */
html,body{overflow:hidden;background:#050d1c;user-select:none;-webkit-user-select:none;touch-action:manipulation;overscroll-behavior:none}
#stage{position:absolute;left:0;top:0;width:1080px;height:1920px;transform-origin:0 0;background:var(--bg);overflow:hidden;font-size:30px;line-height:1.3}
#screen{position:absolute;inset:0;display:flex;flex-direction:column;animation:in .25s ease-out}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
button:focus-visible{outline:5px solid var(--brand);outline-offset:3px}

/* barra superior */
.top{display:flex;align-items:center;gap:20px;padding:34px 44px 22px;background:var(--card);box-shadow:0 2px 0 var(--line)}
.top .logo{height:76px}
.top .sp{flex:1}
.iconbtn{width:84px;height:84px;border-radius:24px;background:var(--brand-soft);color:var(--brand-dark);display:grid;place-items:center;position:relative}
.iconbtn svg{width:44px;height:44px}
.cartbtn{display:flex;align-items:center;gap:16px;height:84px;padding:0 30px 0 24px;border-radius:24px;background:var(--brand);color:#fff;font-weight:800;font-size:30px}
.cartbtn svg{width:42px;height:42px}
.cartbtn .n{min-width:44px;height:44px;border-radius:22px;background:#fff;color:var(--brand-dark);display:grid;place-items:center;font-size:26px;padding:0 10px}
.cartbtn.empty{background:var(--brand-soft);color:var(--brand-dark)}

/* inicio */
.body{flex:1;overflow:auto;padding:36px 44px 44px;scrollbar-width:none}
.body::-webkit-scrollbar{display:none}
.hello{font:800 62px/1.1 var(--f-display);margin:6px 0 8px;letter-spacing:-.02em}
.hello em{font-style:normal;color:var(--brand)}
.sub{color:var(--ink-2);font-size:30px;margin:0 0 30px}
.search{display:flex;align-items:center;gap:20px;width:100%;height:112px;border-radius:30px;background:#fff;box-shadow:var(--shadow);padding:0 36px;font-size:36px;color:var(--ink-3);border:3px solid transparent;text-align:left}
.search svg{width:48px;height:48px;color:var(--brand)}
.search.on{border-color:var(--brand)}
.search .txt{flex:1;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search .txt.ph{color:var(--ink-3);font-weight:500}
.search .caret{display:inline-block;width:3px;height:44px;background:var(--brand);vertical-align:middle;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.shead{display:flex;align-items:baseline;justify-content:space-between;margin:44px 0 20px}
.shead h2{font-size:38px}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cat{position:relative;overflow:hidden;text-align:left;border-radius:28px;background:#fff;box-shadow:var(--shadow);padding:30px 30px 26px;min-height:176px;display:flex;flex-direction:column;justify-content:space-between}
.cat::before{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;background:var(--c);opacity:.16}
.cat b{font:700 32px/1.15 var(--f-display);max-width:80%}
.cat span{color:var(--ink-2);font-size:25px;font-weight:600}
.cat i{position:absolute;right:26px;top:26px;width:20px;height:20px;border-radius:50%;background:var(--c)}
.strip{display:flex;gap:22px;overflow:auto;margin:0 -44px;padding:4px 44px 18px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip .pcard{flex:0 0 300px}

/* productos */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pcard{background:#fff;border-radius:28px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;text-align:left}
.pcard img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--brand-soft)}
.pcard .info{padding:18px 22px 8px;flex:1}
.pcard .nm{font:700 27px/1.2 var(--f-display);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.pcard .br{color:var(--ink-2);font-size:23px;margin-top:6px}
.pcard .pr{font:800 36px var(--f-display);padding:6px 22px 4px;color:var(--ink)}
.pcard .add{margin:10px 18px 20px;height:76px;border-radius:20px;background:var(--brand);color:#fff;font-weight:800;font-size:29px;display:flex;align-items:center;justify-content:center;gap:10px}
.pcard .add svg{width:32px;height:32px}
.pcard .add.in{background:var(--ok-soft);color:var(--ok)}
.empty{grid-column:1/-1;text-align:center;padding:90px 30px;color:var(--ink-2)}
.empty b{display:block;font:700 42px var(--f-display);color:var(--ink);margin-bottom:12px}

/* ficha */
.detail{display:flex;flex-direction:column;gap:26px}
.detail .hero{border-radius:36px;overflow:hidden;box-shadow:var(--shadow);background:var(--brand-soft)}
.detail .hero img{width:100%;display:block;aspect-ratio:1.25;object-fit:cover}
.detail h1{font-size:54px;line-height:1.12}
.detail .meta{color:var(--ink-2);font-size:30px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:10px;padding:8px 20px;border-radius:999px;font-weight:800;font-size:27px;background:var(--ok-soft);color:var(--ok)}
.tag.no{background:var(--bad-soft);color:var(--bad)}
.tag svg{width:30px;height:30px}
.big-price{font:800 78px var(--f-display);letter-spacing:-.02em}
.price-note{font-size:25px;color:var(--ink-3);font-weight:600}

/* stepper */
.step{display:inline-flex;align-items:center;gap:6px;background:var(--brand-soft);border-radius:24px;padding:8px}
.step button{width:84px;height:84px;border-radius:18px;background:#fff;color:var(--brand-dark);display:grid;place-items:center;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.step button svg{width:38px;height:38px}
.step button[disabled]{opacity:.35}
.step output{min-width:84px;text-align:center;font:800 44px var(--f-display)}
.step.sm button{width:64px;height:64px}.step.sm output{min-width:56px;font-size:34px}

/* barras inferiores */
.bar{padding:26px 44px 40px;background:var(--card);box-shadow:0 -2px 0 var(--line);display:flex;gap:22px;align-items:center}
.bar .btn{height:112px;font-size:36px;border-radius:30px;flex:1}
.bar .btn.sec{flex:0 0 auto;padding:0 44px}
.btn svg{width:40px;height:40px}

/* carrito */
.line{display:flex;gap:22px;align-items:center;background:#fff;border-radius:26px;padding:18px;box-shadow:var(--shadow);margin-bottom:18px}
.line img{width:132px;height:132px;border-radius:18px;object-fit:cover;flex:none}
.line .t{flex:1;min-width:0}
.line .t b{font:700 29px/1.2 var(--f-display);display:block}
.line .t span{color:var(--ink-2);font-size:25px}
.line .rm{width:64px;height:64px;color:var(--bad);display:grid;place-items:center;border-radius:18px;background:var(--bad-soft);flex:none}
.line .rm svg{width:32px;height:32px}
.totalrow{display:flex;justify-content:space-between;align-items:baseline;padding:10px 6px}
.totalrow span{font-size:30px;color:var(--ink-2);font-weight:700}
.totalrow b{font:800 64px var(--f-display)}
.note{background:var(--info-soft);color:#1a3d91;border-radius:22px;padding:22px 26px;font-size:26px;font-weight:600;line-height:1.35}

/* éxito */
.ok-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 56px 40px;gap:20px;overflow:auto}
.ok-badge{width:120px;height:120px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center}
.ok-badge svg{width:70px;height:70px}
.numcard{background:var(--brand);color:#fff;border-radius:40px;padding:26px 70px 30px;box-shadow:var(--shadow)}
.numcard small{display:block;font-size:28px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.numcard b{font:800 150px/1 var(--f-display);letter-spacing:-.03em}
.steps{display:grid;gap:16px;width:100%;text-align:left;margin-top:6px}
.stp{display:flex;gap:22px;align-items:center;background:#fff;border-radius:26px;padding:22px 26px;box-shadow:var(--shadow);font-size:29px;font-weight:600}
.stp .n{flex:none;width:58px;height:58px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font:800 30px var(--f-display)}
.wa{display:flex;gap:30px;align-items:center;background:#fff;border-radius:34px;padding:26px 34px;box-shadow:var(--shadow);width:100%;text-align:left}
.wa img{width:236px;height:236px;flex:none;border-radius:14px}
.wa b{font:800 36px/1.15 var(--f-display);display:block;margin-bottom:10px}
.wa p{margin:0;font-size:27px;color:var(--ink-2)}
.wa.done{background:var(--ok-soft);color:var(--ok);justify-content:center;font:800 36px var(--f-display);padding:44px}
.countdown{height:8px;border-radius:4px;background:var(--line);width:100%;overflow:hidden}
.countdown i{display:block;height:100%;background:var(--brand);transform-origin:left;animation:cd var(--t,45s) linear forwards}
@keyframes cd{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.demo{position:absolute;right:20px;bottom:16px;font-size:20px;color:var(--ink-3);padding:10px 16px;border:2px dashed var(--line);border-radius:12px;background:#fff}

/* reposo */
.idle{position:absolute;inset:0;background:#04204a;color:#fff;overflow:hidden;text-align:left}
.idle .slide{position:absolute;inset:0;opacity:0;transition:opacity 1s}
.idle .slide.on{opacity:1}
.idle .slide img,.idle .slide video{width:100%;height:100%;object-fit:cover;display:block}
.idle .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,20,60,.22) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 48%,rgba(2,12,32,.82) 100%)}
.idle .slide img{animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.idle .sud-top{position:absolute;right:64px;top:62px;height:92px;filter:drop-shadow(0 2px 10px rgba(0,40,100,.35))}
.sud-foot{display:flex;align-items:center;justify-content:center;gap:22px;margin:54px 0 8px;font-size:26px;font-weight:600;color:var(--ink-2)}
.sud-foot .sud-logo{height:62px}
.idle .logo{position:absolute;left:64px;top:64px;height:92px}
.idle .copy{position:absolute;left:64px;right:64px;bottom:360px}
.idle .copy h1{font-size:108px;line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.idle .copy p{font-size:42px;margin:22px 0 0;opacity:.92;max-width:800px}
.idle .touch{position:absolute;left:64px;right:64px;bottom:90px;height:150px;border-radius:44px;background:#fff;color:var(--brand-dark);font:800 54px var(--f-display);display:flex;align-items:center;justify-content:center;gap:24px;animation:pulse 2.2s ease-in-out infinite}
.idle .touch svg{width:62px;height:62px}
.dots{position:absolute;left:0;right:0;bottom:290px;display:flex;justify-content:center;gap:14px}
.dots i{width:14px;height:14px;border-radius:7px;background:rgba(255,255,255,.4);transition:all .4s}
.dots i.on{width:44px;background:#fff}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.5)}50%{transform:scale(1.025);box-shadow:0 0 0 26px rgba(255,255,255,0)}}

/* teclado */
#kb{position:absolute;left:0;right:0;bottom:0;background:#dfe6f1;padding:18px 18px 26px;z-index:20;box-shadow:0 -10px 30px rgba(0,0,0,.2);animation:in .2s}
#kb .row{display:flex;gap:10px;margin-bottom:10px;justify-content:center}
#kb button.k{flex:1;max-width:92px;height:104px;border-radius:18px;background:#fff;font:700 44px var(--f-display);color:var(--ink);box-shadow:0 2px 0 rgba(0,0,0,.18)}
#kb button.k:active{background:var(--brand-soft)}
#kb button.k.w{max-width:150px;background:#c9d4e6}
#kb button.k.sp{max-width:none;flex:6}
#kb button.k.go{max-width:240px;background:var(--brand);color:#fff;font-size:34px}

/* modal y sin conexión */
#modal{position:absolute;inset:0;background:rgba(5,13,28,.7);z-index:30;display:grid;place-items:center;padding:60px}
.dlg{background:#fff;border-radius:44px;padding:56px 54px 48px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.dlg h2{font-size:52px;margin-bottom:16px}
.dlg p{font-size:32px;color:var(--ink-2);margin:0 0 34px}
.dlg .row{display:flex;gap:20px}.dlg .btn{flex:1;height:110px;font-size:34px;border-radius:28px}
.dlg .big{font:800 120px var(--f-display);color:var(--brand);line-height:1;margin:8px 0 18px}
#offline{position:absolute;inset:0;z-index:50;background:rgba(5,13,28,.94);color:#fff;display:grid;place-items:center;text-align:center;padding:80px}
#offline h2{font-size:80px;margin:30px 0 16px}#offline p{font-size:36px;opacity:.85;line-height:1.4}
.spin{width:110px;height:110px;margin:0 auto;border-radius:50%;border:10px solid rgba(255,255,255,.2);border-top-color:#fff;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.err{background:var(--bad-soft);color:var(--bad);border-radius:22px;padding:22px 26px;font-size:27px;font-weight:700}

#kb .k svg{width:46px;height:46px}
.cartbtn{white-space:nowrap;flex:none}
.idle .copy p{text-wrap:balance}