*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#120907;color:#fff;font-family:Georgia,serif}
body{display:grid;place-items:center;padding:12px}
.wrap{width:min(100%,1448px)}
.game{
  position:relative;width:100%;aspect-ratio:1448/1086;overflow:hidden;border-radius:14px;
  background:url("../assets/taberna-clean.png") center/100% 100% no-repeat;
  box-shadow:0 14px 45px #0009;touch-action:none
}

/* ---------- EXPRESIONES: SOLO CAPAS ENCIMA DE LA CARA ----------
   No se recorta ni duplica la ilustración; así la camarera no se "rompe". */
.facefx{
  position:absolute;left:8.5%;top:32.2%;width:14.5%;height:18.5%;
  z-index:18;pointer-events:none;transform-origin:50% 68%;
}
.facefx.perfecto{animation:fxPerfect 1s ease-in-out}
.facefx.muybueno{animation:fxHappy .8s ease-in-out}
.facefx.bueno{animation:fxNod .7s ease-in-out}
.facefx.regular{animation:fxWobble .8s ease-in-out}
.facefx.malo{animation:fxSad .85s ease-in-out}
.facefx.desborde{animation:fxShock .9s ease-in-out}

.eye,.brow,.mouth,.blush,.sweat,.foamdot,.star-eye{
  position:absolute;opacity:0;transition:opacity .18s ease;
}
.eye{
  width:14%;height:8%;border-top:4px solid #4b2418;border-radius:50%;
}
.eye.left{left:24%;top:28%}
.eye.right{left:58%;top:28%}

.brow{
  width:16%;height:6%;border-top:4px solid #5a2c1d;border-radius:50%;
}
.brow.left{left:22%;top:19%}
.brow.right{left:57%;top:19%}

.mouth{
  left:42%;top:55%;width:17%;height:10%;
  border-bottom:4px solid #8f3d3a;border-radius:0 0 50% 50%;
}

.blush{
  left:15%;top:40%;width:70%;height:20%;
  background:
    radial-gradient(ellipse at 18% 50%, #f26f7b66 0 35%, transparent 60%),
    radial-gradient(ellipse at 82% 50%, #f26f7b66 0 35%, transparent 60%);
}

.sweat{
  left:73%;top:20%;width:9%;height:16%;
  background:linear-gradient(#b7e6ff,#7ec8ff);
  border-radius:50% 50% 60% 60% / 35% 35% 70% 70%;
  transform:rotate(18deg);
  box-shadow:0 0 6px #7ec8ff88;
}

.foamdot{
  width:9%;height:9%;background:#fff8ec;border-radius:50%;box-shadow:0 0 6px #fff8ecaa;
}
.foamdot.f1{left:19%;top:8%}
.foamdot.f2{left:75%;top:12%}
.foamdot.f3{left:10%;top:24%}

.star-eye{
  width:12%;height:12%;display:grid;place-items:center;
  font-size:clamp(10px,1vw,18px);color:#ffd94d;text-shadow:0 0 8px #ffd94d;
}
.star-eye.left{left:24%;top:22%}
.star-eye.right{left:58%;top:22%}

.face-smile .eye,.face-smile .mouth,.face-smile .blush{opacity:1}
.face-smile .eye.left{transform:rotate(5deg)}
.face-smile .eye.right{transform:rotate(-5deg)}

.face-perfect .star-eye,.face-perfect .mouth,.face-perfect .blush{opacity:1}
.face-perfect .mouth{width:18%;height:13%;left:41%;border:3px solid #8f3d3a;border-top:0;background:#6f2830;border-radius:0 0 50% 50%}

.face-regular .brow,.face-regular .mouth,.face-regular .sweat{opacity:1}
.face-regular .brow.left{transform:rotate(-8deg)}
.face-regular .brow.right{transform:rotate(12deg)}
.face-regular .mouth{width:15%;height:4%;left:43%;top:57%;border-bottom:3px solid #7e3b36;border-radius:50%;transform:rotate(-4deg)}

.face-sad .brow,.face-sad .mouth,.face-sad .sweat{opacity:1}
.face-sad .brow.left{transform:rotate(12deg)}
.face-sad .brow.right{transform:rotate(-12deg)}
.face-sad .mouth{width:16%;height:8%;left:42.5%;top:58%;border-top:4px solid #7e3b36;border-bottom:0;border-radius:50% 50% 0 0}

.face-shock .eye,.face-shock .mouth,.face-shock .foamdot{opacity:1}
.face-shock .eye{height:16%;width:12%;border:3px solid #4b2418;border-radius:50%;background:#f9ead6}
.face-shock .eye.left{left:26%;top:22%}
.face-shock .eye.right{left:59%;top:22%}
.face-shock .mouth{width:12%;height:18%;left:44%;top:52%;border:3px solid #7e3b36;background:#6c2930;border-radius:50%}

/* ---------- CHOP ---------- */
.mug-window{
  position:absolute;left:38.15%;top:25.2%;width:24.4%;height:43.2%;
  overflow:hidden;border-radius:5% 5% 12% 12%;z-index:3;
  clip-path:polygon(3% 0,97% 0,94% 100%,6% 100%);
}
.glass-clean{
  position:absolute;inset:0;z-index:1;background:rgba(82,55,35,.18);
  backdrop-filter:blur(7px) saturate(.8);-webkit-backdrop-filter:blur(7px) saturate(.8)
}
.beer{
  position:absolute;left:0;right:0;bottom:0;height:0%;z-index:2;
  background:linear-gradient(90deg,#a75a00,#f0b62a 48%,#b56500);
  box-shadow:inset 10px 0 20px #fff2,inset -12px 0 18px #0002
}
.beer::after{
  content:"";position:absolute;inset:0;opacity:.45;
  background-image:
    radial-gradient(circle at 18% 90%,#fff 0 1.5px,transparent 2px),
    radial-gradient(circle at 46% 74%,#fff 0 1px,transparent 2px),
    radial-gradient(circle at 72% 86%,#fff 0 1.3px,transparent 2px),
    radial-gradient(circle at 86% 64%,#fff 0 1px,transparent 2px);
  background-size:47px 62px,55px 73px,61px 66px,43px 58px;
  animation:bubble 1.7s linear infinite
}
.foam{
  position:absolute;left:0;right:0;bottom:0;height:0%;z-index:3;
  background:
    radial-gradient(circle at 10px 7px,#fffef1 0 8px,transparent 9px) 0 0/28px 18px repeat-x,
    linear-gradient(90deg,#ead9ad,#fff9dd 47%,#e6d19f);
  border-top:3px solid #fffdf2;box-shadow:inset 0 8px 9px #fff7
}
.mark{position:absolute;left:7%;right:7%;height:0;border-top:3px dashed;z-index:5;filter:drop-shadow(0 2px 2px #000);pointer-events:none}
.mark span{position:absolute;right:0;bottom:5px;padding:2px 6px;border-radius:5px;font-family:Arial,sans-serif;font-size:clamp(7px,1vw,13px);font-weight:900;color:#fff7dc;text-shadow:0 1px 2px #000;background:#2b160dcc}
#beerMark{border-color:#ffc72e} #foamMark{border-color:#ff7680}
.spill{position:absolute;left:38%;top:23.7%;width:24.7%;height:3%;z-index:8;border-radius:50%;background:#fff8dc;opacity:0;transform:scaleY(.25);transition:.18s;pointer-events:none;box-shadow:0 5px 10px #fff6}
.spill.on{opacity:1;transform:scaleY(1)} .spill::after{content:"";position:absolute;right:-4%;top:45%;width:7%;height:210%;background:#fff8dc;border-radius:0 0 50% 50%}

/* ---------- PANEL / SCORE ---------- */
.score-cover{
  position:absolute;left:79.05%;top:13.3%;width:14.2%;height:8.1%;z-index:14;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(#3a1d10,#251108);border-radius:8%;
  box-shadow:inset 0 0 12px #0008;
  color:#fff0c8;font-size:clamp(15px,3.2vw,43px);font-weight:900;text-shadow:0 3px #000
}
.score-cover.negative{color:#ff736a;text-shadow:0 2px #4c0707,0 0 12px #ff3d3488}
.bad-score-cover{
  position:absolute;left:89.45%;top:59.2%;width:5.7%;height:4.7%;z-index:15;
  display:flex;align-items:center;justify-content:center;
  background:#34100df5;color:#ff7068;border-radius:7px;
  font:900 clamp(8px,1.45vw,19px) Arial,sans-serif;text-shadow:0 2px #250000;
}
.overflow-penalty{
  position:absolute;left:76.9%;top:64.1%;width:18.9%;height:4.8%;z-index:15;
  display:flex;align-items:center;justify-content:center;
  background:#40120eea;color:#ff8b80;border:2px solid #8c332c;border-radius:8px;
  font:900 clamp(7px,1.08vw,14px) Arial,sans-serif
}
.phase{position:absolute;left:43.5%;top:18.1%;transform:translateX(-50%);z-index:14;max-width:35%;padding:.45em .8em;border:2px solid #9e6b39;border-radius:999px;background:#2c160dcc;color:#ffe3a4;font:900 clamp(8px,1.35vw,18px) Arial,sans-serif;text-align:center;box-shadow:0 4px 10px #0006}
.run-progress{position:absolute;left:76.8%;top:69.7%;width:19%;z-index:14;display:flex;gap:3px}
.round-dot{flex:1;height:8px;border-radius:99px;background:#3a1e12;border:1px solid #9b6837;box-shadow:inset 0 0 4px #0008}
.round-dot.done{background:#d6a43d} .round-dot.current{background:#fff1a5;box-shadow:0 0 10px #ffd454}

.sound-panel{position:absolute;right:1.8%;top:1.8%;z-index:20;display:flex;gap:6px;align-items:center;background:#2b160dcc;border:2px solid #8c5a32;border-radius:999px;padding:5px 8px;font:700 clamp(8px,1vw,13px) Arial,sans-serif;color:#ffe4ae}
.sound-panel button{width:36px;height:34px;border:1px solid #a77942;border-radius:999px;background:#4d2916;color:#fff2c0;font-size:18px;cursor:pointer}
.sound-panel input{width:78px;accent-color:#d9a53d}

.hot{position:absolute;z-index:16;border:0;background:transparent;cursor:pointer;border-radius:12px}
.hot:focus-visible{outline:4px solid #fff3a2;outline-offset:-4px}
.pick.active{box-shadow:inset 0 0 0 5px #ffd34e,0 0 25px #ffbe39}
#rubia{left:22.1%;top:76.4%;width:14.7%;height:16.2%}
#negra{left:38.1%;top:76.4%;width:14.7%;height:16.2%}
#granadina{left:54.2%;top:76.4%;width:14.7%;height:16.2%}
#serve{left:72.7%;top:70.8%;width:23.5%;height:24.2%;border-radius:50%}
#serve.pressed{box-shadow:inset 0 0 0 7px #fff6,0 0 34px #7dff6b}
#serve.finished::after{content:"SIGUIENTE";position:absolute;inset:33% 12%;display:grid;place-items:center;border-radius:999px;background:#183f21e8;border:3px solid #f1c45c;color:#fff3bc;font:900 clamp(8px,1.6vw,22px) Georgia,serif;text-shadow:0 2px #000}
#serve.final::after{content:"VER RESULTADO"}

.rank-glow{position:absolute;left:76.9%;width:18.9%;height:7.45%;z-index:13;display:none;border:4px solid #fff29a;border-radius:10px;box-shadow:0 0 24px #ffd85d,inset 0 0 14px #fff4}
.rank-glow.on{display:block}
.r1{top:23.7%} .r2{top:31.9%} .r3{top:40.1%} .r4{top:48.25%} .r5{top:56.45%}

.result{position:absolute;left:41%;top:67.8%;transform:translateX(-50%);z-index:17;min-width:20%;max-width:38%;padding:.5em .8em;border:2px solid #966238;border-radius:10px;background:#211008e8;color:#ffe4a9;text-align:center;font:900 clamp(8px,1.25vw,17px) Arial,sans-serif;opacity:0;transition:.18s;pointer-events:none}
.result.on{opacity:1} .result.bad{color:#ff9b91;border-color:#b84a3f}
.perfect-flash{position:absolute;inset:0;z-index:12;pointer-events:none;opacity:0;box-shadow:inset 0 0 90px #ffd452,0 0 50px #ffd452}
.perfect-flash.on{animation:flash .9s ease-out}

.girl-bubble{position:absolute;left:22.6%;top:39.5%;width:14.7%;min-height:9.4%;z-index:18;display:flex;align-items:center;justify-content:center;text-align:center;padding:.65em .75em;border:2px solid #8b5b31;border-radius:18px;background:#f3dfb4ef;color:#5a3119;font:900 clamp(8px,1.18vw,17px)/1.13 Georgia,serif;box-shadow:0 6px 15px #0005}
.girl-bubble::before{content:"";position:absolute;left:-11px;bottom:18px;border:8px solid transparent;border-right-color:#f3dfb4ef;filter:drop-shadow(-2px 2px 0 #8b5b31)}
.emote{position:absolute;left:7.6%;top:31%;z-index:19;font-size:clamp(20px,4vw,58px);opacity:0;pointer-events:none;text-shadow:0 4px 10px #0008}
.emote.on{animation:emotePop 1.15s ease-out}

.final-card{position:absolute;inset:14% 20% 14% 20%;z-index:30;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4%;border:5px solid #b57a35;border-radius:24px;background:linear-gradient(#382016f2,#180c08f7);box-shadow:0 0 50px #000b,inset 0 0 30px #d3973b22;color:#fff0c3}
.final-card.on{display:flex}
.final-card h2{font-size:clamp(20px,4vw,54px);margin:0 0 .25em;color:#ffd970;text-shadow:0 3px #4b250d}
.final-score{font-size:clamp(25px,6vw,80px);font-weight:900;line-height:1}
.final-score.negative{color:#ff746b}
.discount{margin-top:.35em;font-size:clamp(18px,3vw,44px);font-weight:900;color:#aaff92}
.discount.none{color:#ff9c91}
.final-card p{font:700 clamp(10px,1.4vw,18px) Arial,sans-serif;max-width:550px}
.final-card button{margin-top:.7em;padding:.75em 1.4em;border:3px solid #e6bd61;border-radius:999px;background:#24703b;color:#fff3bf;font:900 clamp(13px,1.7vw,22px) Georgia,serif;cursor:pointer}
.round-breakdown{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:.5em}
.round-breakdown span{padding:5px 8px;border:1px solid #8d653c;border-radius:8px;background:#24130d;font:700 clamp(8px,1vw,13px) Arial,sans-serif}
.round-breakdown .neg{color:#ff8279;border-color:#8f3a34}

@keyframes bubble{from{background-position:0 45px,0 70px,0 55px,0 63px}to{background-position:0 -35px,0 -25px,0 -45px,0 -30px}}
@keyframes flash{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
@keyframes fxPerfect{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-4px) scale(1.05)}70%{transform:translateY(1px)}}
@keyframes fxHappy{0%,100%{transform:rotate(0)}35%{transform:rotate(-2deg)}70%{transform:rotate(2deg)}}
@keyframes fxNod{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes fxWobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.4deg)}75%{transform:rotate(1.4deg)}}
@keyframes fxSad{0%,100%{transform:translateY(0)}50%{transform:translateY(4px) rotate(-1deg)}}
@keyframes fxShock{0%,100%{transform:scale(1)}35%{transform:scale(1.06) rotate(-1deg)}70%{transform:scale(1.02) rotate(1deg)}}
@keyframes emotePop{0%{opacity:0;transform:translateY(10px) scale(.6)}20%{opacity:1;transform:translateY(0) scale(1.12)}80%{opacity:1}100%{opacity:0;transform:translateY(-14px) scale(1)}}
@media(prefers-reduced-motion:reduce){.beer::after,.facefx,.emote.on,.perfect-flash.on{animation:none}}

/* =========================================================
   RESPONSIVE / PRODUCT UI
   ========================================================= */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}
html{background:#120907;min-width:320px}
body{
  display:block;
  min-height:100vh;
  min-height:100dvh;
  padding:max(8px,var(--safe-top)) max(8px,var(--safe-right)) max(8px,var(--safe-bottom)) max(8px,var(--safe-left));
  background:radial-gradient(circle at 50% -10%,#70411e55,transparent 38rem),#120907;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
button{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.site-shell{width:min(100%,1450px);margin:0 auto}
.site-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 auto 10px;width:min(100%,1180px)
}
.brand-logo{width:clamp(205px,30vw,335px);display:block}
.site-actions{display:flex;align-items:center;gap:8px}
.site-link,.site-btn{
  min-height:44px;padding:0 16px;border:1px solid #8b5b33;border-radius:999px;
  background:#2a160e;color:#ffe2ad;font:900 13px Arial,sans-serif;text-decoration:none;
  display:inline-grid;place-items:center;cursor:pointer
}
.site-btn{min-width:46px;padding:0;font-size:18px}
.site-link:focus-visible,.site-btn:focus-visible,.mobile-choice:focus-visible,.mobile-serve:focus-visible{
  outline:3px solid #ffe28d;outline-offset:3px
}

.intro-card{
  width:min(100%,1180px);margin:0 auto 12px;padding:clamp(18px,4vw,34px);
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.75fr);gap:20px;align-items:center;
  border:1px solid #70452a;border-radius:20px;
  background:linear-gradient(180deg,#28160ff2,#160b07f5);box-shadow:0 15px 45px #0007
}
.intro-card h1{margin:0;color:#ffe2a0;font-size:clamp(32px,5.5vw,62px);line-height:.98;text-shadow:0 4px #3c1c0d}
.intro-card p{color:#dfc29d;font:400 clamp(15px,2vw,20px)/1.5 Arial,sans-serif}
.intro-steps{display:grid;gap:8px;margin-top:15px}
.intro-step{display:flex;gap:9px;align-items:flex-start;color:#efd9b6;font:700 15px/1.35 Arial,sans-serif}
.intro-step b{flex:0 0 27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#64391f;color:#ffd979}
.intro-side{padding:17px;border:1px solid #855632;border-radius:16px;background:#170c08c7}
.intro-side strong{color:#ffd87d;font-size:21px}
.start-btn{
  width:100%;min-height:58px;margin-top:14px;border:3px solid #bf9141;border-radius:999px;
  background:radial-gradient(circle at 40% 30%,#50a15a,#20713a 65%,#154d29);
  color:#fff4c8;font:900 18px Georgia,serif;box-shadow:0 5px 0 #493019;cursor:pointer
}
.start-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #493019}
.legal{font:400 11px/1.4 Arial,sans-serif!important;color:#a98f73!important}

.wrap{width:min(100%,1448px);margin:0 auto}
.mobile-controls{display:none;gap:9px;padding:10px 0 2px}
.mobile-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mobile-choice{
  min-height:52px;border:2px solid #80512e;border-radius:12px;
  background:linear-gradient(#5a321d,#2d170e);color:#ffe6af;
  font:900 13px Georgia,serif;cursor:pointer
}
.mobile-choice.active{outline:3px solid #f4b83f;outline-offset:1px}
.mobile-serve{
  min-height:64px;border:3px solid #c39646;border-radius:999px;
  background:radial-gradient(circle at 40% 30%,#4d9d57,#1f7037 65%,#154c29);
  color:#fff4c8;font:900 17px Georgia,serif;box-shadow:0 4px 0 #493019;cursor:pointer;touch-action:none
}
.mobile-serve:active{transform:translateY(2px)}

.coupon-box{
  width:min(100%,520px);margin:.8em auto 0;padding:12px;
  border:2px dashed #b67b39;border-radius:14px;background:#1a0e0a
}
.coupon-label{font:800 10px Arial,sans-serif;color:#d3b68d;letter-spacing:.08em}
.coupon-code{
  margin-top:3px;color:#fff1bd;font:900 clamp(17px,2.7vw,34px) ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.05em;word-break:break-word
}
.coupon-meta{margin-top:5px;color:#bea384;font:700 clamp(8px,1vw,12px)/1.35 Arial,sans-serif}
.final-buttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.final-card .copy-coupon{background:#5b371f}

.proposal-shell{width:min(100%,1040px);margin:0 auto}
.proposal-hero{padding:clamp(28px,6vw,70px) 0 30px}
.proposal-hero h1{max-width:900px;margin:0;color:#ffe2a0;font-size:clamp(38px,7vw,76px);line-height:.98}
.proposal-hero p{max-width:780px;color:#ddc19a;font:400 clamp(16px,2.2vw,21px)/1.55 Arial,sans-serif}
.proposal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.proposal-card,.proposal-cta{
  padding:20px;border:1px solid #77492a;border-radius:18px;background:#24130dcc
}
.proposal-card h3,.proposal-cta h2{margin:0 0 8px;color:#ffd97f}
.proposal-card p,.proposal-cta p{margin:0;color:#cdb391;font:400 15px/1.5 Arial,sans-serif}
.proposal-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.proposal-flow div{padding:15px;border:1px solid #75492c;border-radius:14px;background:#1e100b;color:#e4c9a4;font:400 14px/1.45 Arial,sans-serif}
.proposal-flow b{display:block;color:#ffe19b;margin-bottom:5px}
.proposal-cta{margin:28px 0}
.proposal-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}

@media(max-width:900px){
  .intro-card{grid-template-columns:1fr}
  .proposal-grid{grid-template-columns:1fr}
  .proposal-flow{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .site-actions .site-link{display:none}
  .brand-logo{width:min(70vw,270px)}
  .intro-card{padding:18px 15px}
  .intro-card h1{font-size:38px}
  .wrap{width:100%}
  .game{border-radius:10px}
  .mobile-controls{display:grid}
  .hot{display:none}
  .sound-panel{display:none}
  .girl-bubble{left:20.6%;top:39%;width:16.8%;font-size:7px}
  .phase{font-size:7px;max-width:48%}
  .result{font-size:7px;max-width:47%;min-width:27%}
  .final-card{inset:6% 5%;padding:5%}
  .final-card h2{font-size:26px}
  .final-score{font-size:38px}
  .discount{font-size:22px}
  .proposal-flow{grid-template-columns:1fr}
}
@media(max-width:430px){
  .intro-step{font-size:13px}
  .mobile-choice{font-size:11px;min-height:50px}
  .mobile-serve{font-size:15px}
}
@media(orientation:landscape) and (max-height:620px){
  body{padding-top:max(4px,var(--safe-top));padding-bottom:max(4px,var(--safe-bottom))}
  .site-top,.intro-card{display:none}
  .site-shell,.wrap{height:calc(100dvh - 8px);width:auto}
  .game{height:100%;width:auto;max-width:100vw;margin:auto}
  .mobile-controls{display:none}
  .hot{display:block}
  .sound-panel{display:flex}
}