:root{font-family:Arial,sans-serif;color:#263322;background:#e3e7d8;color-scheme:light}*{box-sizing:border-box}body{margin:0}button,a,input,select{-webkit-tap-highlight-color:transparent;font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #70932a;outline-offset:3px}button:disabled{opacity:.45;cursor:default}a{text-decoration:none;color:inherit}[hidden]{display:none!important}.app{background:#f3f1e7;max-width:520px;margin:auto;min-height:100dvh;position:relative;box-shadow:0 0 100px #364b1510}header{padding:32px 24px 16px;display:flex;align-items:center;justify-content:space-between;background:#f3f1e7;position:sticky;top:0;z-index:5}.logo{display:flex;align-items:center;gap:9px}.logo>span{font-size:32px;line-height:1}.logo>div{font-size:17px;font-weight:700;letter-spacing:-.05em;line-height:1.1}.logo small{display:block;font-size:6px;letter-spacing:.17em;line-height:1.7}header button{border:1px solid #cad2b9;border-radius:20px;background:transparent;padding:8px 12px;font-size:9px}main{padding:0 24px 115px}.demo-strip{display:flex;justify-content:space-between;align-items:center;font-size:7px;letter-spacing:.1em;color:#8c9878;border-bottom:1px solid #dce0d0;padding:7px 0 12px;margin-bottom:23px}.demo-strip button{border:0;background:none;font-size:8px;color:#889579}.view{animation:enter .3s ease}.greeting{display:flex;justify-content:space-between;align-items:center}.greeting p{font-size:10px;color:#7a8a66;margin:0}.greeting>span{color:#9eb969;font-size:22px}h1{font-size:33px;line-height:1.06;letter-spacing:-.065em;font-weight:500;margin:11px 0 25px}h1>span{color:#9eb969}.coffee-hero{height:300px;position:relative;background:#d9e6bc;border-radius:150px 150px 20px 20px;overflow:hidden;margin-bottom:18px}.coffee-cup{width:105px;height:89px;background:linear-gradient(110deg,#f7f2df,#d8d5ba);border-radius:8px 8px 45px 45px;position:absolute;top:46px;left:calc(50% - 52px);box-shadow:0 27px 22px -17px #34491f88;animation:float 6s ease-in-out infinite;transform:rotate(-9deg)}.coffee-cup:before{content:'';position:absolute;right:-30px;top:7px;width:32px;height:43px;border:9px solid #dddac4;border-radius:50%;z-index:0}.coffee-cup>i{width:103px;height:25px;background:radial-gradient(ellipse at center,#b78e58,#805331 60%,#e4d7bc 70%,#f3edd8 80%);border-radius:50%;position:absolute;top:-10px;left:1px}.coffee-cup>b{font-size:32px;color:#9aa87a;position:absolute;top:28px;left:38px;font-weight:400}.steam{position:absolute;top:15px;left:47%;display:flex;gap:8px}.steam i{width:4px;height:28px;border-radius:100%;background:#fffffc66;filter:blur(2px);animation:steam 4s infinite}.steam i:nth-child(2){animation-delay:1s}.steam i:nth-child(3){animation-delay:2s}.hero-caption{position:absolute;left:24px;bottom:22px}.hero-caption>span{font-size:6px;letter-spacing:.16em;color:#6b7d4c}.hero-caption>strong{font-size:27px;letter-spacing:-.055em;line-height:1.1;display:block;margin:8px 0 13px;font-weight:500}.hero-caption button{font-size:9px;background:#27371e;border:0;color:#e8efd9;padding:10px 16px;border-radius:25px}.circle-type{position:absolute;right:19px;bottom:24px;writing-mode:vertical-rl;font-size:7px;letter-spacing:.15em;color:#82965f}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quick-grid button{border:1px solid #d7decb;background:#f8f7ef;border-radius:14px;text-align:left;padding:16px}.quick-grid button>span{font-size:24px;color:#96ac6d}.quick-grid b{display:block;font-size:11px;margin:13px 0 5px}.quick-grid small{font-size:7px;color:#91a07d}.small-note{font-size:8px;line-height:1.7;color:#97a087;margin:20px 0 0}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,520px);padding:13px 15px max(16px,env(safe-area-inset-bottom));display:flex;justify-content:space-around;background:#f6f6edf2;border-top:1px solid #d6deca;backdrop-filter:blur(16px);z-index:8}.bottom-nav button{border:0;background:none;font-size:8px;color:#899777;padding:4px 12px;border-radius:12px}.bottom-nav button>span{font-size:23px;display:block;line-height:1.25;margin-bottom:5px;position:relative}.bottom-nav button.active{color:#36511c;background:#e3edce}.bottom-nav i{position:absolute;right:-9px;top:-5px;font-size:7px;background:#293d19;color:#e7efda;border-radius:50%;width:14px;height:14px;display:grid;place-items:center;font-style:normal}.kicker{font-size:7px;letter-spacing:.15em;color:#96a27f}.category-tabs{display:flex;gap:7px;margin-bottom:20px}.category-tabs button{border:1px solid #d4dcc8;border-radius:20px;padding:9px 14px;background:transparent;font-size:9px;color:#82906e}.category-tabs button.active{background:#293a1b;color:#eef4e6;border-color:transparent}.product{display:grid;grid-template-columns:80px 1fr;gap:15px;padding:16px 0;border-bottom:1px solid #dce0d0;position:relative}.product-art{width:80px;height:90px;border-radius:30px 30px 12px 12px;display:grid;place-items:center;font-size:33px;background:var(--product-color,#e1cfb2)}.product-art>span{filter:drop-shadow(2px 7px 4px #0002);transform:rotate(-10deg)}.product h2{font-size:15px;font-weight:500;letter-spacing:-.04em;margin:8px 22px 4px 0}.product p{font-size:8px;line-height:1.5;color:#93a17c;margin:0 0 11px}.product-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px}.product-bottom strong{font-size:12px;font-weight:500}.qty{display:flex;gap:7px;align-items:center}.qty button{width:22px;height:22px;border:1px solid #bdcda7;border-radius:50%;background:none;font-size:13px}.qty button:last-child{background:#d1e4ae;border-color:#d1e4ae}.qty span{font-size:9px;min-width:10px;text-align:center}.favorite{position:absolute;right:0;top:19px;background:none;border:0;color:#93a27c;font-size:19px}.favorite.active{color:#a96961}.primary{display:flex;justify-content:space-between;align-items:center;gap:15px;width:100%;padding:16px 18px;background:#2a3a1c;color:#edf4df;border:0;border-radius:30px;font-size:11px;margin-top:25px}.primary>span{font-size:15px}.loyalty-card{background:#2a3a20;color:#eff2df;padding:24px;border-radius:20px;position:relative;overflow:hidden}.loyalty-card:after{content:'';position:absolute;width:200px;height:200px;border:1px solid #9db47133;border-radius:50%;right:-150px;top:10px}.loyalty-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;align-items:center}.loyalty-head>span{font-size:25px;color:#c6e38b}.loyalty-card p{font-size:10px;color:#a2b58e;margin:15px 0 25px}.stamps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stamp{height:58px;border-radius:50%;border:1px dashed #82996877;display:grid;place-items:center;font-size:27px;color:#82996855}.stamp.filled{background:#c7e396;color:#2f451f;border:0;animation:stamp .35s ease-out}.loyalty-progress{height:3px;margin:27px 0 13px;background:#ffffff16;border-radius:5px;overflow:hidden}.loyalty-progress i{display:block;background:#c7e396;height:100%;width:0;transition:width .4s}.loyalty-card>span{font-size:9px;color:#a6ba8a}.reward-message{text-align:center;border:1px solid #c7d9ad;background:#e2eccf;border-radius:18px;padding:22px;margin-top:20px}.reward-message>span{font-size:40px;color:#9fb96d;display:block;animation:spin 15s linear infinite}.reward-message h2{font-size:23px;letter-spacing:-.04em;font-weight:400;margin:13px 0 9px}.reward-message p{font-size:10px;color:#91a078}.reward-message button{border:0;background:none;font-size:10px;text-decoration:underline;color:#617a42}.order-line{display:flex;gap:15px;align-items:center;border-bottom:1px solid #d7deca;padding:17px 0;font-size:11px}.order-line .qty{margin-left:auto}.order-summary{display:flex;justify-content:space-between;align-items:center;padding:25px 0;font-size:11px}.order-summary strong{font-size:28px;font-weight:500;letter-spacing:-.05em}.empty{text-align:center;padding:35px 15px;background:#e9eede;border:1px dashed #c4d2b0;border-radius:15px;font-size:11px;color:#83936d}.pickup-label{font-size:9px;color:#7c8e63;display:block}.pickup-label select{display:block;width:100%;background:#e7eddb;border:1px solid #d0ddbd;padding:13px;color:#617749;border-radius:10px;margin-top:9px;font-size:11px}#demo-toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%,10px);background:#283a1c;color:#eff5e5;font-size:10px;padding:12px 18px;max-width:85%;width:max-content;border-radius:25px;z-index:20;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 10px 20px #0002}#demo-toast.show{opacity:1;transform:translate(-50%,0)}dialog{border:0;border-radius:20px;max-width:380px;width:calc(100% - 30px);background:#f2f3e7;color:#2c3c20;padding:30px;box-shadow:0 20px 80px #0005}dialog::backdrop{background:#14280eb5;backdrop-filter:blur(5px)}#close-dialog{border:0;background:none;font-size:24px;position:absolute;top:8px;right:13px;color:#94a17f}dialog h2{font-size:29px;font-weight:500;letter-spacing:-.06em;line-height:1.1;margin:18px 0}dialog p,dialog li{font-size:11px;line-height:1.7;color:#849773}dialog .primary{font-size:10px}.complete-icon{font-size:45px;color:#809f47}#confetti{position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden}#confetti i{position:absolute;top:-20px;width:7px;height:12px;animation:fall 2s ease-in forwards}@keyframes enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}@keyframes steam{50%{transform:translateY(-17px);opacity:.15}}@keyframes float{50%{transform:translateY(-5px) rotate(-4deg)}}@keyframes stamp{from{transform:scale(1.3) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fall{to{transform:translateY(110vh) rotate(700deg);opacity:0}}@media(max-width:350px){header{padding:28px 20px 15px}main{padding:0 20px 100px}h1{font-size:30px}.coffee-hero{height:280px}.product{grid-template-columns:70px 1fr;gap:12px}.product-art{width:70px;height:80px}.stamps{gap:10px}.stamp{height:53px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Lectura y controles cómodos tanto en el mockup como en el teléfono real. */
.no-motion *,.no-motion *:before,.no-motion *:after{animation:none!important;transition:none!important}
header button{min-height:40px;font-size:12px}.demo-strip{font-size:9px;color:#5c6c4b}.demo-strip button{font-size:11px;min-height:35px}.greeting p{font-size:12px;color:#5b6f45}
.product p{font-size:12px;color:#586c45}.product h2{font-size:17px}.product-bottom strong{font-size:14px}.qty button{width:32px;height:32px;font-size:17px}.qty span{font-size:12px}.favorite{width:40px;height:40px;right:-8px;top:7px;font-size:23px}
.category-tabs button{min-height:38px;font-size:11px;color:#5b6d48}.primary{font-size:13px;min-height:48px}.order-line{font-size:13px}.pickup-label{font-size:12px;color:#5c7046}.pickup-label select{font-size:16px}.empty{font-size:13px;color:#536a3b}
.loyalty-card p,.loyalty-card>span{font-size:12px;color:#c1d2aa}.reward-message p{font-size:12px;color:#526c35}.reward-message button{font-size:12px;min-height:40px}dialog p,dialog li{font-size:14px;color:#566f42}dialog .primary{font-size:13px}#demo-toast{font-size:12px}#close-dialog{width:40px;height:40px}