*{box-sizing:border-box}
body{margin:0;background:#f7f5f1;color:#222;font-family:system-ui,-apple-system,Segoe UI,sans-serif}
header{background:#171717;color:white;text-align:center;padding:18px 14px 12px}
header img{width:min(190px,65vw);height:125px;object-fit:contain;background:white;border-radius:14px}
header p{color:#f0b65a;margin:8px 0 0;font-size:13px}
main{max-width:720px;margin:auto;padding:18px}
.intro{padding:8px 2px 14px}
.intro h1{font-size:28px;margin:0 0 5px}
.intro p,.muted{color:#777}
.menu{display:grid;gap:12px}
.product,.checkout{background:white;border-radius:16px;padding:16px;box-shadow:0 2px 12px #0000000b}
.product{display:flex;align-items:center;justify-content:space-between;gap:12px}
.product h3{margin:0 0 4px;font-size:17px}
.product p{margin:0;color:#777;font-size:13px}
.price{color:#a45b14;font-size:19px;font-weight:850;margin-top:8px}
.qty{display:flex;align-items:center;gap:12px}
.qty button{border:0;border-radius:50%;width:36px;height:36px;background:#222;color:white;font-size:22px;cursor:pointer}
.qty span{font-weight:800;min-width:14px;text-align:center}
h2{font-size:20px;margin:22px 0 12px}
.checkout{margin-top:22px}
.line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #eee}
.total{text-align:right;font-size:20px;margin:16px 0}
.total strong{color:#a45b14}
label{display:block;font-weight:700;font-size:13px;margin:13px 0 6px}
input,select,textarea{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid #ddd8d0;border-radius:10px;background:#fff;font:inherit;font-weight:400}
textarea{min-height:78px}
.send{width:100%;border:0;border-radius:12px;background:#a45b14;color:#fff;font-size:16px;font-weight:800;padding:15px;margin-top:18px;cursor:pointer}
.send:disabled{opacity:.65;cursor:wait}
.small{font-size:12px;color:#777;text-align:center}
.hidden{display:none!important}
footer{text-align:center;color:#888;padding:24px;font-size:12px}

/* Pantalla de confirmación del pedido */
.confirmation{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(15,15,15,.78);backdrop-filter:blur(5px);animation:fadeIn .28s ease-out}
.confirmation-content{width:min(100%,420px);padding:30px 24px 26px;border-radius:24px;background:#fff;text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.28);animation:popIn .42s cubic-bezier(.2,.85,.25,1.2)}
.confirmation-content h2{margin:18px 0 8px;color:#257a3e;font-size:23px;letter-spacing:.3px}
.success-animation{width:104px;height:104px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:#e8f7ec;animation:ringPulse 1.5s ease-out infinite}
.success-check{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#2e9d50;color:#fff;font-size:48px;font-weight:800;line-height:1;box-shadow:0 7px 18px rgba(46,157,80,.28);animation:checkPop .55s .12s both}
.success-message{font-size:16px;font-weight:700;margin:8px 0;color:#333}
.success-thanks{font-size:14px;line-height:1.5;color:#666;margin:8px 0 18px}
.confirmation-content .small{margin:0;color:#a45b14;font-weight:700}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes checkPop{0%{opacity:0;transform:scale(.25) rotate(-35deg)}70%{opacity:1;transform:scale(1.14) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
@keyframes ringPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media(min-width:600px){.menu{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.confirmation,.confirmation-content,.success-animation,.success-check{animation:none!important}}