/* Exact V13 fixes: subtle motion + no overlap with ENTRAR */
.portal-card{overflow:hidden!important;}
.portal-illustration{top:12px!important;right:10px!important;z-index:1!important;pointer-events:none!important;}
.portal-label,.portal-sub,.portal-go{z-index:4!important;}
.portal-go{isolation:isolate;}
.portal-go::before{content:"";position:absolute;inset:-4px -8px;z-index:-1;border-radius:999px;background:linear-gradient(90deg,rgba(11,5,13,.88),rgba(11,5,13,.66));}
.portal-svg{transform-origin:50% 72%;}
.bottle-svg{animation:bottleIdleV13 6.8s ease-in-out infinite!important;}
.food-svg{animation:foodIdleV13 6.4s ease-in-out infinite!important;}
.mojito-svg{animation:mojitoIdleV13 6.6s ease-in-out infinite!important;}
.portal-illustration::before{animation:iconAuraV13 5.8s ease-in-out infinite!important;opacity:.58!important;}
.fork-art{animation:forkWiggleV13 6.2s ease-in-out infinite!important;}
.spoon-art{animation:spoonWiggleV13 6.2s ease-in-out infinite .4s!important;}
.mojito-svg .svg-lime{animation:limeWiggleV13 5.6s ease-in-out infinite!important;}
.mojito-svg .svg-straw{animation:strawWiggleV13 6s ease-in-out infinite!important;}
.bottle-spark{animation:sparkBlinkV13 4.8s ease-in-out infinite!important;}
.bottle-shine{animation:shinePulseV13 5s ease-in-out infinite!important;}
@keyframes bottleIdleV13{0%,100%{transform:translateY(0) rotate(-.25deg)}50%{transform:translateY(-2.2px) rotate(.35deg)}}
@keyframes foodIdleV13{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes mojitoIdleV13{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(.45deg)}}
@keyframes iconAuraV13{0%,100%{transform:scale(.96);opacity:.42}50%{transform:scale(1.035);opacity:.66}}
@keyframes forkWiggleV13{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.8deg)}}
@keyframes spoonWiggleV13{0%,100%{transform:rotate(.6deg)}50%{transform:rotate(-.8deg)}}
@keyframes limeWiggleV13{0%,100%{transform:rotate(0)}50%{transform:rotate(2deg)}}
@keyframes strawWiggleV13{0%,100%{transform:rotate(0)}50%{transform:rotate(-.7deg)}}
@keyframes sparkBlinkV13{0%,45%,100%{opacity:.22;transform:scale(.8)}50%{opacity:.92;transform:scale(1.15)}}
@keyframes shinePulseV13{0%,100%{opacity:.36}50%{opacity:.72}}
@media(max-width:520px){
 .portal-illustration{width:84px!important;height:84px!important;right:9px!important;top:9px!important;}
 .portal-card{padding-right:92px!important;}
 .portal-label{right:82px!important;}
 .portal-sub{max-width:60%!important;}
 .portal-go{right:16px!important;bottom:14px!important;}
}
@media(hover:hover) and (pointer:fine){
 .portal-card:hover .bottle-svg,.portal-card:hover .food-svg,.portal-card:hover .mojito-svg{animation-duration:5.4s!important;}
}
@media(prefers-reduced-motion:reduce){.bottle-svg,.food-svg,.mojito-svg,.portal-illustration::before,.fork-art,.spoon-art,.bottle-spark,.bottle-shine{animation:none!important;}}

:root{
  --mobile-header-h:64px;
  --mobile-safe-top:env(safe-area-inset-top,0px);
}

/* Header becomes an opaque/blurred layer so content never bleeds through */
header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(8,2,10,.985),rgba(8,2,10,.965))!important;
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.30);
  transform:translateZ(0);
}

/* Solid backing layer fixes Safari compositing/bleed issues */
header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 18% 50%,rgba(199,0,255,.08),transparent 34%),
    linear-gradient(180deg,#09020b 0%,#080109 100%);
  pointer-events:none;
}

.header-inner{
  position:relative;
  z-index:2;
  min-height:64px;
}

/* Any secondary sticky menu bar sits immediately below the main header */
.menu-topbar{
  top:var(--mobile-header-h)!important;
  z-index:900!important;
  background:rgba(7,2,8,.98)!important;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

/* Prevent route headings/cards from painting above the sticky navigation */
.menu-home,.home-shell,.menu-section,.section-head,.portal-grid{
  position:relative;
  z-index:1;
}

/* Safari sometimes promotes transformed/animated text above sticky layers */
.home-title,.home-brand,.welcome-menu-neon,.section-head h2{
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  backface-visibility:hidden;
}

@media(max-width:720px){
  :root{--mobile-header-h:58px;}

  html{
    scroll-padding-top:calc(var(--mobile-header-h) + 12px);
    background:#070108;
  }

  body{
    overflow-x:hidden;
    background:#070108;
  }

  header{
    min-height:58px!important;
  }

  .header-inner{
    min-height:58px!important;
    padding:8px 14px!important;
    gap:10px!important;
  }

  .header-logo{
    width:132px!important;
    max-width:42vw!important;
    max-height:38px!important;
    object-fit:contain;
    flex:0 0 auto;
  }

  .header-actions{
    margin-left:auto!important;
    gap:5px!important;
    min-width:0;
  }

  .social-links{
    gap:5px!important;
    flex-wrap:nowrap!important;
  }

  .social-link{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    background:rgba(255,255,255,.025)!important;
    border-color:rgba(255,255,255,.12)!important;
  }

  .social-link svg{
    width:14px!important;
    height:14px!important;
  }

  /* More breathing room below sticky header */
  .menu-home{
    padding-top:18px!important;
  }

  .home-shell{
    padding-top:22px!important;
  }

  /* Keep title fully below the sticky header */
  .home-brand{
    margin-top:0!important;
  }

  /* Secondary in-menu nav gets compact on phone */
  .menu-topbar{
    top:58px!important;
    min-height:50px;
    padding:8px 12px!important;
  }

  .menu-current{
    font-size:20px!important;
    line-height:1!important;
  }

  .menu-back,.menu-home-btn{
    min-height:38px!important;
  }

  /* Keep content from sliding under both bars when opening a route */
  .menu-section.route-active{
    scroll-margin-top:120px;
  }
}

@media(max-width:390px){
  :root{--mobile-header-h:56px;}
  header{min-height:56px!important}
  .header-inner{
    min-height:56px!important;
    padding:7px 11px!important;
  }
  .header-logo{
    width:116px!important;
    max-width:40vw!important;
    max-height:34px!important;
  }
  .social-link{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
  }
  .social-links{gap:4px!important}
  .menu-topbar{top:56px!important}
}

/* iPhones with notch / Dynamic Island */
@supports (padding-top: env(safe-area-inset-top)){
  @media(max-width:720px){
    header{
      padding-top:env(safe-area-inset-top)!important;
    }
    .menu-topbar{
      top:calc(58px + env(safe-area-inset-top))!important;
    }
    body{
      padding-left:env(safe-area-inset-left);
      padding-right:env(safe-area-inset-right);
    }
  }
  @media(max-width:390px){
    .menu-topbar{
      top:calc(56px + env(safe-area-inset-top))!important;
    }
  }
}

/* Only PA' TOMAR is changed. Exactly TWO beer mugs. */
.v20-beer-cheers{width:300px!important;height:220px!important;left:20px!important;top:30px!important}
.v20-beer-cheers svg{width:100%;height:100%;overflow:visible}
.v20-beer-cheers .v20-mug{transform-box:fill-box;transform-origin:50% 85%}
.v20-beer-cheers .v20-flash,.v20-beer-cheers .v20-rays{opacity:0}

.route-transition.play .v20-left{
  animation:v20LeftToast 1.16s cubic-bezier(.2,.8,.2,1) forwards!important
}
.route-transition.play .v20-right{
  animation:v20RightToast 1.16s cubic-bezier(.2,.8,.2,1) forwards!important
}
.route-transition.play .v20-flash{
  animation:v20Flash .52s .49s ease-out forwards!important
}
.route-transition.play .v20-rays{
  transform-box:fill-box;transform-origin:50% 50%;
  animation:v20Rays .58s .49s ease-out forwards!important
}

@keyframes v20LeftToast{
  0%{transform:translate(-22px,28px) rotate(-13deg) scale(.9);opacity:0}
  35%{opacity:1}
  51%{transform:translate(78px,-2px) rotate(18deg) scale(1)}
  60%{transform:translate(84px,-5px) rotate(21deg) scale(1.025)}
  72%{transform:translate(77px,0) rotate(16deg) scale(1)}
  100%{transform:translate(62px,12px) rotate(10deg);opacity:1}
}
@keyframes v20RightToast{
  0%{transform:translate(22px,28px) rotate(13deg) scale(.9);opacity:0}
  35%{opacity:1}
  51%{transform:translate(-78px,-2px) rotate(-18deg) scale(1)}
  60%{transform:translate(-84px,-5px) rotate(-21deg) scale(1.025)}
  72%{transform:translate(-77px,0) rotate(-16deg) scale(1)}
  100%{transform:translate(-62px,12px) rotate(-10deg);opacity:1}
}
@keyframes v20Flash{
  0%{opacity:0;transform:scale(.2)}
  30%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(5)}
}
@keyframes v20Rays{
  0%{opacity:0;transform:scale(.5)}
  28%{opacity:1}
  100%{opacity:0;transform:scale(1.35)}
}
@media(max-width:520px){
  .v20-beer-cheers{transform:scale(.88);transform-origin:50% 50%}
}
@media(prefers-reduced-motion:reduce){
  .v20-beer-cheers *{animation:none!important}
}

.v20-beer-cheers{display:none!important}

.v21-beer-cheers{
  width:320px!important;
  height:220px!important;
  left:0!important;
  top:26px!important;
}
.v21-beer-cheers svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.v21-beer-cheers .v21-mug{
  transform-box:fill-box;
  transform-origin:50% 82%;
}
.v21-impact{
  opacity:0;
  transform-box:fill-box;
  transform-origin:50% 50%;
}

/* Realistic toast: approach -> tilt -> rim contact -> tiny rebound -> settle */
.route-transition.play .v21-left{
  animation:v21ToastLeft 1.28s cubic-bezier(.18,.82,.22,1) forwards!important;
}
.route-transition.play .v21-right{
  animation:v21ToastRight 1.28s cubic-bezier(.18,.82,.22,1) forwards!important;
}
.route-transition.play .v21-impact{
  animation:v21Impact .48s .54s ease-out forwards!important;
}

@keyframes v21ToastLeft{
  0%{
    transform:translate(-22px,30px) rotate(-8deg) scale(.94);
    opacity:0;
  }
  24%{
    opacity:1;
  }
  48%{
    transform:translate(62px,2px) rotate(13deg) scale(1);
  }
  57%{
    transform:translate(70px,-3px) rotate(17deg) scale(1.015);
  }
  66%{
    transform:translate(64px,1px) rotate(14deg) scale(1);
  }
  100%{
    transform:translate(48px,11px) rotate(8deg) scale(1);
    opacity:1;
  }
}
@keyframes v21ToastRight{
  0%{
    transform:translate(22px,30px) rotate(8deg) scale(.94);
    opacity:0;
  }
  24%{
    opacity:1;
  }
  48%{
    transform:translate(-62px,2px) rotate(-13deg) scale(1);
  }
  57%{
    transform:translate(-70px,-3px) rotate(-17deg) scale(1.015);
  }
  66%{
    transform:translate(-64px,1px) rotate(-14deg) scale(1);
  }
  100%{
    transform:translate(-48px,11px) rotate(-8deg) scale(1);
    opacity:1;
  }
}
@keyframes v21Impact{
  0%{opacity:0;transform:scale(.45)}
  28%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.55)}
}

@media(max-width:520px){
  .v21-beer-cheers{
    transform:scale(.86);
    transform-origin:50% 50%;
  }
}
@media(prefers-reduced-motion:reduce){
  .v21-beer-cheers *{animation:none!important}
}

/* V22: tarros rectos, simétricos y sin apariencia chueca */
.route-transition.play .v21-left{
  animation:v22ToastLeft 1.22s cubic-bezier(.2,.8,.2,1) forwards!important;
  transform-origin:50% 90%!important;
}
.route-transition.play .v21-right{
  animation:v22ToastRight 1.22s cubic-bezier(.2,.8,.2,1) forwards!important;
  transform-origin:50% 90%!important;
}
.route-transition.play .v21-impact{
  animation:v22Impact .40s .56s ease-out forwards!important;
}

@keyframes v22ToastLeft{
  0%{transform:translate(-34px,22px) rotate(0deg) scale(.94);opacity:0}
  24%{opacity:1}
  48%{transform:translate(61px,0) rotate(0deg) scale(1)}
  56%{transform:translate(68px,-2px) rotate(5deg) scale(1.01)}
  64%{transform:translate(62px,0) rotate(2deg) scale(1)}
  78%{transform:translate(52px,5px) rotate(0deg) scale(1)}
  100%{transform:translate(46px,9px) rotate(0deg) scale(1);opacity:1}
}
@keyframes v22ToastRight{
  0%{transform:translate(34px,22px) rotate(0deg) scale(.94);opacity:0}
  24%{opacity:1}
  48%{transform:translate(-61px,0) rotate(0deg) scale(1)}
  56%{transform:translate(-68px,-2px) rotate(-5deg) scale(1.01)}
  64%{transform:translate(-62px,0) rotate(-2deg) scale(1)}
  78%{transform:translate(-52px,5px) rotate(0deg) scale(1)}
  100%{transform:translate(-46px,9px) rotate(0deg) scale(1);opacity:1}
}
@keyframes v22Impact{
  0%{opacity:0;transform:scale(.55)}
  30%{opacity:.9;transform:scale(1)}
  100%{opacity:0;transform:scale(1.35)}
}

.route-transition .v26-simple{width:180px!important;height:180px!important;left:80px!important;top:55px!important;display:none;align-items:center;justify-content:center}
.route-transition[data-kind="drink"] .anim-drink,.route-transition[data-kind="food"] .anim-food,.route-transition[data-kind="snack"] .anim-food,.route-transition[data-kind="meal"] .anim-food,.route-transition[data-kind="share"] .anim-food,.route-transition[data-kind="zero"] .anim-zero{display:flex!important}
.v26-ring{width:140px;height:140px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(255,255,255,.07),rgba(255,255,255,.015) 58%,transparent 72%);border:1px solid rgba(255,105,229,.28);box-shadow:0 0 28px rgba(255,52,216,.12),inset 0 0 24px rgba(169,68,255,.06);opacity:0;transform:translateY(10px) scale(.9)}
.v26-ring span{font-size:64px;line-height:1;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))}
.route-transition.play .v26-ring{animation:v26in .62s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes v26in{0%{opacity:0;transform:translateY(10px) scale(.9)}70%{opacity:1;transform:translateY(0) scale(1.02)}100%{opacity:1;transform:none}}
.route-transition::before{animation:none!important;opacity:.18!important}.transition-glow{animation:none!important;opacity:.42!important}.route-transition.play .transition-stage::before,.route-transition.play .transition-stage::after{animation:none!important;opacity:.10!important}
@media(max-width:520px){.v26-ring{width:124px;height:124px}.v26-ring span{font-size:56px}}

/* One clean brand transition for all three menu choices */
.route-transition .v27-kap-transition{
  width:320px!important;
  height:150px!important;
  left:10px!important;
  top:75px!important;
  display:none;
  align-items:center;
  justify-content:center;
}
.route-transition[data-kind="drink"] .anim-drink,
.route-transition[data-kind="food"] .anim-food,
.route-transition[data-kind="snack"] .anim-food,
.route-transition[data-kind="meal"] .anim-food,
.route-transition[data-kind="share"] .anim-food,
.route-transition[data-kind="zero"] .anim-zero{
  display:flex!important;
}
.v27-kap-word{
  position:relative;
  font-family:var(--font-display,Impact,"Arial Black",sans-serif);
  font-size:38px;
  font-weight:900;
  line-height:1;
  letter-spacing:.075em;
  white-space:nowrap;
  color:#fff;
  opacity:0;
  transform:translateY(8px) scale(.97);
  text-shadow:
    0 0 7px rgba(255,255,255,.48),
    0 0 17px rgba(255,63,220,.50),
    0 0 34px rgba(181,62,255,.28);
}
.v27-kap-word::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:-15px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,75,222,.78),rgba(255,215,116,.82),transparent);
  transform:scaleX(0);
  opacity:0;
}
.route-transition.play .v27-kap-word{
  animation:v27KapIn .66s cubic-bezier(.2,.75,.25,1) forwards;
}
.route-transition.play .v27-kap-word::after{
  animation:v27Line .68s .12s ease-out forwards;
}
@keyframes v27KapIn{
  0%{opacity:0;transform:translateY(8px) scale(.97);filter:blur(3px)}
  65%{opacity:1;transform:translateY(0) scale(1.01);filter:blur(0)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes v27Line{
  0%{opacity:0;transform:scaleX(0)}
  55%{opacity:.85;transform:scaleX(1)}
  100%{opacity:.42;transform:scaleX(.82)}
}

/* Remove the old V26 ring visuals entirely */
.v26-simple,.v26-ring{display:none!important}

/* Keep transition understated */
.route-transition::before{animation:none!important;opacity:.12!important}
.transition-glow{animation:none!important;opacity:.32!important}
.route-transition.play .transition-stage::before,
.route-transition.play .transition-stage::after{animation:none!important;opacity:.07!important}

@media(max-width:520px){
  .v27-kap-word{font-size:31px;letter-spacing:.055em}
}

/* Hide the previous V27 artwork. */
.v27-kap-transition,.v27-kap-word{display:none!important}

/* Perfectly center the transition scene */
.route-transition .v28-kap-transition{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:none;
  align-items:center;
  justify-content:center;
  transform:none!important;
  filter:none!important;
}
.route-transition[data-kind="drink"] .anim-drink.v28-kap-transition,
.route-transition[data-kind="food"] .anim-food.v28-kap-transition,
.route-transition[data-kind="snack"] .anim-food.v28-kap-transition,
.route-transition[data-kind="meal"] .anim-food.v28-kap-transition,
.route-transition[data-kind="share"] .anim-food.v28-kap-transition,
.route-transition[data-kind="zero"] .anim-zero.v28-kap-transition{
  display:flex!important;
}

.v28-brand{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:min(92vw,560px);
  min-height:110px;
  text-align:center;
  isolation:isolate;
  transform:translateY(-8px);
}

.v28-main,.v28-glitch{
  grid-area:1/1;
  font-family:'Bebas Neue',Impact,'Arial Black',sans-serif;
  font-size:clamp(46px,12vw,76px);
  line-height:.94;
  font-weight:400;
  letter-spacing:.075em;
  white-space:nowrap;
  color:#fff;
  text-transform:uppercase;
}

.v28-main{
  position:relative;
  z-index:3;
  opacity:0;
  text-shadow:
    0 0 2px #fff,
    0 0 8px rgba(255,255,255,.72),
    0 0 17px rgba(255,87,225,.68),
    0 0 34px rgba(197,59,255,.42);
  filter:brightness(1.06);
}

.v28-main::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:-20px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#ff56dc 22%,#ffd56f 50%,#a257ff 78%,transparent);
  box-shadow:0 0 14px rgba(255,74,220,.35);
  opacity:0;
  transform:scaleX(.15);
}

.v28-glitch{
  z-index:2;
  opacity:0;
  pointer-events:none;
  text-shadow:none;
}
.v28-g1{
  color:#ff47d8;
  clip-path:polygon(0 12%,100% 12%,100% 39%,0 39%);
}
.v28-g2{
  color:#a85cff;
  clip-path:polygon(0 58%,100% 58%,100% 84%,0 84%);
}

.route-transition.play .v28-main{
  animation:v28Main 1.05s cubic-bezier(.2,.75,.22,1) forwards;
}
.route-transition.play .v28-main::after{
  animation:v28Line .82s .14s ease-out forwards;
}
.route-transition.play .v28-g1{
  animation:v28Glitch1 1.05s linear forwards;
}
.route-transition.play .v28-g2{
  animation:v28Glitch2 1.05s linear forwards;
}

/* Clear first, brief "breaking apart" in the middle, then clean again. */
@keyframes v28Main{
  0%{opacity:0;transform:translateY(9px) scale(.975);filter:blur(3px) brightness(.8)}
  20%{opacity:1;transform:translateY(0) scale(1);filter:blur(0) brightness(1.04)}
  43%{opacity:1;transform:none;filter:brightness(1.08)}
  47%{opacity:.32;transform:translateX(-3px) skewX(-2deg);filter:brightness(.7)}
  50%{opacity:.95;transform:translateX(2px) skewX(1deg);filter:brightness(1.25)}
  53%{opacity:.44;transform:translateX(-1px);filter:brightness(.8)}
  57%{opacity:1;transform:none;filter:brightness(1.1)}
  100%{opacity:1;transform:none;filter:brightness(1.04)}
}
@keyframes v28Glitch1{
  0%,42%,58%,100%{opacity:0;transform:translateX(0)}
  45%{opacity:.72;transform:translateX(8px)}
  49%{opacity:.95;transform:translateX(-7px)}
  53%{opacity:.65;transform:translateX(5px)}
  56%{opacity:0;transform:translateX(0)}
}
@keyframes v28Glitch2{
  0%,43%,59%,100%{opacity:0;transform:translateX(0)}
  46%{opacity:.62;transform:translateX(-9px)}
  50%{opacity:.9;transform:translateX(6px)}
  54%{opacity:.55;transform:translateX(-4px)}
  58%{opacity:0;transform:translateX(0)}
}
@keyframes v28Line{
  0%{opacity:0;transform:scaleX(.15)}
  55%{opacity:.85;transform:scaleX(1)}
  100%{opacity:.38;transform:scaleX(.78)}
}

/* Calmer background so the brand remains easy to read */
.route-transition{
  background:
    radial-gradient(circle at 50% 48%,rgba(212,0,255,.13),transparent 32%),
    linear-gradient(180deg,#080109 0%,#030103 100%)!important;
}
.route-transition::before{animation:none!important;opacity:.08!important}
.route-transition::after{opacity:.25!important}
.transition-glow{animation:none!important;opacity:.26!important}
.route-transition.play .transition-stage::before,
.route-transition.play .transition-stage::after{animation:none!important;opacity:.04!important}

/* Center labels below the brand without crowding */
.transition-kicker{
  left:0!important;
  right:0!important;
  bottom:38px!important;
  text-align:center!important;
}
.transition-name{
  left:0!important;
  right:0!important;
  bottom:-4px!important;
  text-align:center!important;
  font-size:30px!important;
  letter-spacing:.12em!important;
}

@media(max-width:520px){
  .v28-brand{width:96vw;transform:translateY(-12px)}
  .v28-main,.v28-glitch{
    font-size:clamp(40px,11.5vw,58px);
    letter-spacing:.045em;
  }
  .transition-kicker{bottom:34px!important}
  .transition-name{font-size:27px!important}
}
@media(prefers-reduced-motion:reduce){
  .v28-main{opacity:1!important;animation:none!important;filter:none!important;transform:none!important}
  .v28-glitch{display:none!important}
  .v28-main::after{opacity:.4!important;transform:scaleX(.78)!important;animation:none!important}
}

/* PRICE DISTRIBUTION HEADERS — restore and keep visible */
.matrix-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,76,225,.32) transparent;
  padding-bottom:3px;
}
.matrix-scroll::-webkit-scrollbar{height:4px}
.matrix-scroll::-webkit-scrollbar-thumb{background:rgba(255,76,225,.32);border-radius:10px}

.modal-table.price-matrix{
  display:table!important;
  width:100%!important;
  border-collapse:separate!important;
  border-spacing:0 8px!important;
}
.modal-table.price-matrix thead{
  display:table-header-group!important;
}
.modal-table.price-matrix thead tr{
  display:table-row!important;
  background:rgba(255,70,224,.07)!important;
  box-shadow:inset 0 0 0 1px rgba(255,87,229,.13)!important;
}
.modal-table.price-matrix th{
  display:table-cell!important;
  padding:11px 12px!important;
  color:#ff9aed!important;
  font-family:Montserrat,sans-serif!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  border:0!important;
  text-align:left!important;
}
.modal-table.price-matrix th:first-child{border-radius:12px 0 0 12px!important}
.modal-table.price-matrix th:last-child{border-radius:0 12px 12px 0!important}
.modal-table.price-matrix th.price-col{text-align:right!important}

.modal-table.price-matrix tbody{
  display:table-row-group!important;
}
.modal-table.price-matrix tbody tr{
  display:table-row!important;
}
.modal-table.price-matrix td{
  display:table-cell!important;
  vertical-align:middle!important;
  white-space:normal;
}
.modal-table.price-matrix td.price-col{
  white-space:nowrap!important;
  text-align:right!important;
}
.beer-price-matrix{min-width:520px!important}
.bottle-table.price-matrix{min-width:430px!important}

/* BOTELLAS SUBMENU */
.bottle-submenu{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin:2px 0 18px;
}
.bottle-submenu-btn{
  min-height:62px;padding:9px 7px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  color:#a99dab;font:900 8px Montserrat,sans-serif;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;
}
.bottle-submenu-btn span{display:block;margin-bottom:5px;font-size:7px;color:#6f6373}
.bottle-submenu-btn.active{
  color:#fff;border-color:rgba(255,86,229,.38);
  background:radial-gradient(circle at 50% 0,rgba(255,65,225,.15),transparent 58%),rgba(255,65,225,.06);
}
.bottle-submenu-btn.active span{color:#ff76e6}
.bottle-panel{display:none}
.bottle-panel.active{display:block}
.bottle-panel-head{display:flex;align-items:center;gap:10px;margin:8px 0 10px}
.bottle-panel-head span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,88,230,.24);color:#ff7ee8;font-size:7px;font-weight:900}
.bottle-panel-head strong{font-family:'Bebas Neue';font-size:27px;font-weight:400;letter-spacing:.08em;color:#fff}

/* PROMO */
.promo-strip{margin:22px 0 25px;position:relative;z-index:3}
.promo-strip-head{margin-bottom:10px}
.promo-strip-head>div{display:flex;align-items:baseline;gap:8px}
.promo-strip-head span{font-size:8px;font-weight:900;letter-spacing:.28em;color:#ff68e3}
.promo-strip-head strong{font-family:'Bebas Neue';font-size:21px;font-weight:400;letter-spacing:.05em}
.promo-card{position:relative;min-height:230px;border-radius:23px;overflow:hidden;border:1px solid rgba(255,255,255,.09);background:radial-gradient(circle at 82% 28%,rgba(255,82,226,.18),transparent 28%),linear-gradient(135deg,#170619,#09020b 55%,#120415);box-shadow:0 20px 44px rgba(0,0,0,.28)}
.promo-copy{position:relative;z-index:3;min-height:230px;padding:27px 270px 24px 27px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.promo-badge{padding:6px 9px;margin-bottom:13px;border:1px solid rgba(255,89,223,.25);border-radius:999px;color:#ff83e8;font-size:7px;font-weight:900;letter-spacing:.20em}
.promo-kicker{font-size:7px;font-weight:900;letter-spacing:.22em;color:#8e7e92;margin-bottom:6px}
.promo-copy h3{margin:0;font-family:'Bebas Neue';font-size:58px;line-height:.84;font-weight:400;color:#fff}
.promo-copy h3 b{color:#ff5cdf;font-weight:400}
.promo-price{margin-top:8px;font-family:'Bebas Neue';font-size:62px;line-height:.9;color:#ffd271}
.promo-price small{font:900 7px Montserrat,sans-serif;letter-spacing:.18em;color:#9d8da1;margin-right:6px}
.promo-note{margin-top:13px;font-size:7px;color:#746777}
.promo-real-bottles{position:absolute;z-index:2;top:-5px;right:8px;width:275px;height:255px}
.promo-real-bottle{position:absolute;bottom:-4px;width:132px;height:244px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 18px rgba(0,0,0,.48)) drop-shadow(0 0 12px rgba(255,71,219,.10))}
.promo-real-repo{right:88px;transform:rotate(-3deg)}
.promo-real-plata{right:8px;transform:rotate(3deg)}

/* Reassert the clean V29 welcome sizing on phones */
@media(max-width:720px){
  .welcome-screen{min-height:calc(100vh - 58px)!important;padding:42px 18px 48px!important}
  .welcome-inner{width:min(860px,100%)!important}
  .welcome-eyebrow{margin-bottom:34px!important}
  .welcome-menu-neon{font-size:clamp(76px,25vw,112px)!important;line-height:.9!important;margin-bottom:28px!important}
  .welcome-title{font-size:52px!important}
  .welcome-copy{font-size:10px!important;max-width:330px!important}
  .welcome-cta{min-height:54px!important;min-width:210px!important}
}
@media(max-width:620px){
  .bottle-submenu{display:flex;overflow-x:auto;gap:7px;scrollbar-width:none;padding-bottom:5px}
  .bottle-submenu::-webkit-scrollbar{display:none}
  .bottle-submenu-btn{flex:0 0 96px;min-height:56px}
  .promo-card{min-height:205px}
  .promo-copy{min-height:205px;padding:21px 145px 19px 19px}
  .promo-copy h3{font-size:38px;max-width:175px}
  .promo-price{font-size:44px}
  .promo-note{font-size:6px;max-width:165px;line-height:1.4}
  .promo-real-bottles{width:164px;height:205px;right:-4px;top:0}
  .promo-real-bottle{width:94px;height:194px}
  .promo-real-repo{right:62px}
  .promo-real-plata{right:3px}
}
@media(max-width:390px){
  .welcome-menu-neon{font-size:82px!important}
  .welcome-title{font-size:46px!important}
}

/* =========================================================
   V35 — MOBILE FIRST POLISH
   Goal: no cramped promo, no cut price columns on phones.
   ========================================================= */

/* --- PROMO: turn into stacked layout on phones --- */
@media(max-width:620px){
  .promo-strip{
    margin:16px 0 20px!important;
  }

  .promo-card{
    min-height:0!important;
    border-radius:20px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    overflow:hidden!important;
  }

  .promo-copy{
    min-height:0!important;
    padding:20px 18px 10px!important;
    align-items:center!important;
    text-align:center!important;
    z-index:4!important;
  }

  .promo-badge{
    margin-bottom:10px!important;
  }

  .promo-kicker{
    margin-bottom:5px!important;
  }

  .promo-copy h3{
    max-width:none!important;
    font-size:42px!important;
    line-height:.88!important;
    text-align:center!important;
  }

  .promo-price{
    font-size:48px!important;
    margin-top:7px!important;
    text-align:center!important;
  }

  .promo-note{
    max-width:250px!important;
    margin-top:10px!important;
    font-size:6.5px!important;
    line-height:1.45!important;
    text-align:center!important;
  }

  .promo-real-bottles{
    position:relative!important;
    width:100%!important;
    height:205px!important;
    top:auto!important;
    right:auto!important;
    margin:0 auto 4px!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    gap:0!important;
    overflow:visible!important;
  }

  .promo-real-bottle{
    position:relative!important;
    width:auto!important;
    height:190px!important;
    bottom:auto!important;
    right:auto!important;
    object-fit:contain!important;
    object-position:center bottom!important;
  }

  .promo-real-repo{
    transform:rotate(-2deg) translateX(10px)!important;
    z-index:3!important;
  }

  .promo-real-plata{
    transform:rotate(2deg) translateX(-10px)!important;
    z-index:2!important;
  }

  /* faint floor/glow beneath both */
  .promo-real-bottles::after{
    content:"";
    position:absolute;
    left:16%;
    right:16%;
    bottom:8px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,210,105,.6),rgba(255,77,220,.55),transparent);
    box-shadow:0 0 14px rgba(255,75,220,.18);
  }
}

/* --- CERVEZA PRICE MATRIX: fit all columns without horizontal scrolling --- */
@media(max-width:620px){
  .matrix-scroll{
    overflow:visible!important;
    width:100%!important;
    padding-bottom:0!important;
  }

  .beer-price-matrix{
    min-width:0!important;
    width:100%!important;
    table-layout:fixed!important;
    border-spacing:0 7px!important;
  }

  .beer-price-matrix thead,
  .beer-price-matrix tbody{
    width:100%!important;
  }

  .beer-price-matrix th,
  .beer-price-matrix td{
    padding:10px 7px!important;
  }

  .beer-price-matrix th{
    font-size:6.2px!important;
    line-height:1.15!important;
    white-space:normal!important;
    text-align:center!important;
    letter-spacing:.04em!important;
  }

  .beer-price-matrix th:first-child{
    text-align:left!important;
    width:38%!important;
  }

  .beer-price-matrix th.price-col{
    width:20.666%!important;
    text-align:center!important;
  }

  .beer-price-matrix td{
    font-size:9.5px!important;
    line-height:1.25!important;
  }

  .beer-price-matrix td:first-child{
    width:38%!important;
    padding-left:10px!important;
  }

  .beer-price-matrix td.price-col{
    width:20.666%!important;
    min-width:0!important;
    padding-left:3px!important;
    padding-right:3px!important;
    text-align:center!important;
    font-size:15px!important;
    white-space:nowrap!important;
  }

  /* Don't let the generic modal mobile rules turn matrix rows into cards */
  .beer-price-matrix,
  .beer-price-matrix tbody,
  .beer-price-matrix thead{
    display:table!important;
  }
  .beer-price-matrix tr{
    display:table-row!important;
  }
  .beer-price-matrix th,
  .beer-price-matrix td{
    display:table-cell!important;
  }

  /* slightly wider modal on mobile, almost edge to edge */
  .drink-modal{
    padding:7px!important;
  }
  .drink-modal-card{
    width:100%!important;
    max-width:none!important;
    padding:24px 12px 18px!important;
    border-radius:24px 24px 16px 16px!important;
  }

  .drink-modal-title{
    font-size:40px!important;
    padding-right:42px!important;
  }
}

/* --- BOTELLAS MATRIX: also avoid awkward side scrolling where possible --- */
@media(max-width:620px){
  .bottle-table.price-matrix{
    min-width:0!important;
    width:100%!important;
    table-layout:fixed!important;
  }

  .bottle-table.price-matrix th,
  .bottle-table.price-matrix td{
    padding:10px 8px!important;
  }

  .bottle-table.price-matrix th:first-child,
  .bottle-table.price-matrix td:first-child{
    width:52%!important;
  }

  .bottle-table.price-matrix th.price-col,
  .bottle-table.price-matrix td.price-col{
    width:24%!important;
    min-width:0!important;
    text-align:center!important;
    white-space:nowrap!important;
  }

  .bottle-table.price-matrix th{
    font-size:6.2px!important;
    letter-spacing:.04em!important;
    white-space:normal!important;
  }

  .bottle-table.price-matrix td{
    font-size:9.5px!important;
  }

  .bottle-table.price-matrix td.price-col{
    font-size:15px!important;
  }

  .bottle-table.price-matrix,
  .bottle-table.price-matrix tbody,
  .bottle-table.price-matrix thead{
    display:table!important;
  }
  .bottle-table.price-matrix tr{
    display:table-row!important;
  }
  .bottle-table.price-matrix th,
  .bottle-table.price-matrix td{
    display:table-cell!important;
  }

  .bottle-submenu{
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* Extra-small phones */
@media(max-width:380px){
  .promo-copy h3{font-size:38px!important}
  .promo-price{font-size:44px!important}
  .promo-real-bottle{height:178px!important}

  .beer-price-matrix th{
    font-size:5.7px!important;
  }
  .beer-price-matrix td{
    font-size:8.8px!important;
  }
  .beer-price-matrix td.price-col{
    font-size:13px!important;
  }

  .bottle-table.price-matrix th{
    font-size:5.8px!important;
  }
  .bottle-table.price-matrix td{
    font-size:8.8px!important;
  }
  .bottle-table.price-matrix td.price-col{
    font-size:13px!important;
  }
}

/* =========================================================
   V36 — Fix screenshots:
   1) Centenario promo horizontal again.
   2) Beer prices perfectly centered.
   3) Bottles modal full width / no clipping.
   ========================================================= */

@media(max-width:620px){

  /* ---------- PROMO CENTENARIO: horizontal like V34 ---------- */
  .promo-card{
    display:block!important;
    min-height:225px!important;
  }

  .promo-copy{
    min-height:225px!important;
    padding:22px 145px 18px 18px!important;
    align-items:flex-start!important;
    text-align:left!important;
  }

  .promo-copy h3{
    font-size:38px!important;
    max-width:175px!important;
    text-align:left!important;
  }

  .promo-price{
    font-size:44px!important;
    text-align:left!important;
  }

  .promo-note{
    max-width:165px!important;
    text-align:left!important;
  }

  .promo-real-bottles{
    position:absolute!important;
    width:160px!important;
    height:205px!important;
    top:8px!important;
    right:-2px!important;
    margin:0!important;
    display:block!important;
  }

  .promo-real-bottle{
    position:absolute!important;
    width:84px!important;
    height:190px!important;
    bottom:0!important;
    object-fit:contain!important;
  }

  .promo-real-repo{
    right:68px!important;
    transform:rotate(-3deg)!important;
  }

  .promo-real-plata{
    right:0!important;
    transform:rotate(3deg)!important;
  }


  /* ---------- CERVEZA: centered columns ---------- */
  .beer-price-matrix{
    table-layout:fixed!important;
    width:100%!important;
  }

  .beer-price-matrix th,
  .beer-price-matrix td{
    text-align:center!important;
    vertical-align:middle!important;
  }

  .beer-price-matrix th:first-child,
  .beer-price-matrix td:first-child{
    text-align:left!important;
    width:42%!important;
  }

  .beer-price-matrix th.price-col,
  .beer-price-matrix td.price-col{
    width:19.33%!important;
    text-align:center!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  .beer-price-matrix td.price-col{
    font-size:16px!important;
  }


  /* ---------- BOTELLAS: modal uses full width ---------- */
  .drink-modal{
    padding:4px!important;
  }

  .drink-modal-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:24px 10px 20px!important;
    overflow:hidden!important;
  }

  .bottle-submenu{
    width:100%!important;
    margin:0 0 16px!important;
    padding:0 2px 4px!important;
  }

  .bottle-submenu-btn{
    flex:0 0 92px!important;
  }

  .bottle-panel,
  .bottle-panels,
  .matrix-scroll{
    width:100%!important;
    max-width:100%!important;
  }

  .bottle-table.price-matrix{
    min-width:0!important;
    width:100%!important;
    table-layout:fixed!important;
  }

  .bottle-table.price-matrix th,
  .bottle-table.price-matrix td{
    padding:9px 6px!important;
  }

  .bottle-table.price-matrix th:first-child,
  .bottle-table.price-matrix td:first-child{
    width:48%!important;
  }

  .bottle-table.price-matrix th.price-col,
  .bottle-table.price-matrix td.price-col{
    width:26%!important;
    text-align:center!important;
    padding-left:2px!important;
    padding-right:2px!important;
  }

  .bottle-table.price-matrix td.price-col{
    font-size:15px!important;
    white-space:nowrap!important;
  }

  .bottle-table.price-matrix th{
    font-size:6px!important;
    white-space:normal!important;
    line-height:1.1!important;
  }

  .bottle-panel-head{
    margin-left:0!important;
  }
}

@media(max-width:380px){
  .promo-copy{
    padding-right:135px!important;
  }

  .promo-real-bottles{
    width:148px!important;
  }

  .promo-real-bottle{
    width:78px!important;
    height:180px!important;
  }

  .promo-real-repo{
    right:62px!important;
  }

  .beer-price-matrix td.price-col{
    font-size:14px!important;
  }

  .bottle-table.price-matrix td.price-col{
    font-size:14px!important;
  }
}

@media (max-width: 620px) {
  .drink-modal { padding: 6px !important; align-items: flex-end !important; overflow: hidden !important; }
  .drink-modal-card {
    box-sizing: border-box !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    min-width: 0 !important;
    max-height: 92vh !important;
    padding: 22px 12px 18px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .drink-modal-text, .bottle-panels, .bottle-panel, .matrix-scroll {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .promo-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 138px !important;
    align-items: stretch !important;
    min-height: 218px !important;
    height: 218px !important;
    overflow: hidden !important;
  }
  .promo-copy {
    grid-column: 1 !important;
    min-width: 0 !important;
    min-height: 218px !important;
    padding: 20px 4px 18px 18px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
  }
  .promo-badge { font-size: 5.8px !important; letter-spacing: .14em !important; padding: 5px 7px !important; margin-bottom: 9px !important; }
  .promo-kicker { font-size: 5.7px !important; letter-spacing: .14em !important; margin-bottom: 4px !important; white-space: nowrap !important; }
  .promo-copy h3 { font-size: 31px !important; line-height: .88 !important; max-width: none !important; white-space: nowrap !important; margin: 0 !important; }
  .promo-price { font-size: 41px !important; line-height: .9 !important; white-space: nowrap !important; margin-top: 7px !important; }
  .promo-price small { font-size: 5.7px !important; margin-right: 4px !important; }
  .promo-note { font-size: 5.7px !important; line-height: 1.35 !important; max-width: 190px !important; margin-top: 9px !important; }
  .promo-real-bottles {
    grid-column: 2 !important;
    position: relative !important;
    inset: auto !important;
    width: 138px !important;
    height: 218px !important;
    display: block !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .promo-real-bottle {
    position: absolute !important;
    bottom: 5px !important;
    width: 72px !important;
    height: 188px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
  .promo-real-repo { right: 63px !important; transform: rotate(-2deg) !important; z-index: 3 !important; }
  .promo-real-plata { right: 2px !important; transform: rotate(2deg) !important; z-index: 2 !important; }

  .beer-price-matrix { width: 100% !important; min-width: 0 !important; table-layout: fixed !important; border-spacing: 0 8px !important; }
  .beer-price-matrix col.col-product { width: 43% !important; }
  .beer-price-matrix col.col-price { width: 19% !important; }
  .beer-price-matrix thead, .beer-price-matrix tbody { display: table-row-group !important; }
  .beer-price-matrix tr { display: table-row !important; }
  .beer-price-matrix th, .beer-price-matrix td { display: table-cell !important; box-sizing: border-box !important; }
  .beer-price-matrix th { padding: 10px 2px !important; font-size: 5.8px !important; line-height: 1.15 !important; letter-spacing: .03em !important; white-space: normal !important; text-align: center !important; }
  .beer-price-matrix th:first-child { text-align: left !important; padding-left: 9px !important; }
  .beer-price-matrix td { padding: 11px 2px !important; }
  .beer-price-matrix td:first-child { text-align: left !important; padding-left: 10px !important; font-size: 9px !important; }
  .beer-price-matrix td.price-col { min-width: 0 !important; text-align: center !important; padding-left: 0 !important; padding-right: 0 !important; font-size: 15px !important; white-space: nowrap !important; }

  .bottle-submenu {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    overflow: visible !important;
    margin: 0 0 15px !important;
    padding: 0 !important;
  }
  .bottle-submenu-btn {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
    min-height: 55px !important;
    padding: 7px 4px !important;
    font-size: 6.7px !important;
    letter-spacing: .05em !important;
  }
  .bottle-table.price-matrix { width: 100% !important; min-width: 0 !important; table-layout: fixed !important; border-spacing: 0 8px !important; }
  .bottle-table.price-matrix col.col-product { width: 50% !important; }
  .bottle-table.price-matrix col.col-price { width: 25% !important; }
  .bottle-table.price-matrix thead, .bottle-table.price-matrix tbody { display: table-row-group !important; }
  .bottle-table.price-matrix tr { display: table-row !important; }
  .bottle-table.price-matrix th, .bottle-table.price-matrix td { display: table-cell !important; box-sizing: border-box !important; }
  .bottle-table.price-matrix th { padding: 9px 2px !important; font-size: 5.7px !important; letter-spacing: .025em !important; line-height: 1.1 !important; white-space: normal !important; text-align: center !important; }
  .bottle-table.price-matrix th:first-child { text-align: left !important; padding-left: 8px !important; }
  .bottle-table.price-matrix td { padding: 10px 3px !important; }
  .bottle-table.price-matrix td:first-child { text-align: left !important; padding-left: 8px !important; font-size: 8.6px !important; }
  .bottle-table.price-matrix td:first-child small { font-size: 6.2px !important; margin-top: 4px !important; }
  .bottle-table.price-matrix td.price-col { min-width: 0 !important; text-align: center !important; padding-left: 0 !important; padding-right: 0 !important; font-size: 14px !important; white-space: nowrap !important; }
}
@media (max-width: 360px) {
  .promo-card { grid-template-columns: minmax(0, 1fr) 126px !important; }
  .promo-copy h3 { font-size: 28px !important; }
  .promo-price { font-size: 38px !important; }
  .promo-real-bottles { width: 126px !important; }
  .promo-real-bottle { width: 66px !important; height: 180px !important; }
  .promo-real-repo { right: 57px !important; }
  .beer-price-matrix td.price-col, .bottle-table.price-matrix td.price-col { font-size: 13px !important; }
}

@media (max-width: 620px) {
  .beer-price-matrix col.col-product { width: 40% !important; }
  .beer-price-matrix col.col-price { width: 20% !important; }

  .beer-price-matrix th {
    font-size: 5.35px !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }

  .beer-price-matrix td:first-child {
    font-size: 8.8px !important;
  }

  .beer-price-matrix td.price-col {
    font-size: 14.5px !important;
  }

  .beer-price-matrix td.price-col[colspan="3"] {
    text-align: center !important;
  }

  .promo-copy {
    overflow: hidden !important;
  }

  .promo-copy h3,
  .promo-price {
    position: relative !important;
    z-index: 5 !important;
  }

  .bottle-submenu {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .bottle-submenu-btn {
    overflow: hidden !important;
    white-space: normal !important;
  }
}

/* =========================================================
   V38 — MOBILE UX OVERHAUL
   Consolidated final overrides. Keeps the visual identity,
   but prioritizes touch, orientation, readable density and iOS.
   ========================================================= */
:root{
  --tap:44px;
  --phone-pad:16px;
}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #ff74ed!important;
  outline-offset:3px;
}

@media(max-width:720px){
  html{scroll-behavior:auto!important;scroll-padding-top:116px!important}
  body{font-size:16px;overscroll-behavior-y:none}

  /* faster entrance on phones; content feels available sooner */
  .loader{transition-duration:.35s!important}
  .loader-box{width:min(330px,72vw)!important}
  .loader-caption{letter-spacing:.25em!important}

  /* Compact, predictable top header */
  header{position:sticky!important;top:0!important}
  .header-inner{min-height:56px!important;padding:7px 12px!important}
  .header-logo{width:118px!important;max-width:38vw!important;max-height:34px!important}
  .header-tag,.reserve-copy{display:none!important}
  .header-actions{gap:0!important}
  .social-links{gap:4px!important}
  .social-link{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important}

  /* Welcome: avoid oversized hero that feels like another page */
  .welcome-screen{min-height:calc(100svh - 56px)!important;padding:26px 18px 32px!important}
  .welcome-inner{width:min(100%,440px)!important}
  .welcome-eyebrow{margin-bottom:24px!important;font-size:6.5px!important;line-height:1.4!important}
  .welcome-menu-neon{font-size:clamp(66px,22vw,94px)!important;margin-bottom:18px!important}
  .welcome-title{font-size:clamp(42px,13vw,54px)!important;line-height:.92!important;margin-bottom:14px!important}
  .welcome-copy{font-size:10px!important;line-height:1.75!important;margin:0 auto 22px!important;max-width:340px!important}
  .welcome-cta{width:min(100%,300px)!important;min-height:54px!important}
  .welcome-foot{margin-top:20px!important}

  /* Main category landing */
  body.menu-home-active{overflow-x:hidden!important;overflow-y:auto!important}
  .menu-home{min-height:auto!important;padding:22px var(--phone-pad) 34px!important;overflow:visible!important}
  .home-shell{width:100%!important;max-width:520px!important;padding-top:0!important}
  .home-brand{font-size:7px!important;line-height:1.5!important;margin:0 0 10px!important}
  .home-title{font-size:clamp(48px,14vw,64px)!important;line-height:.9!important;margin-bottom:16px!important}
  .home-copy{font-size:9px!important;line-height:1.65!important;margin-bottom:18px!important}
  .portal-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .portal-card{min-height:124px!important;border-radius:18px!important;padding:16px 16px!important;touch-action:manipulation}
  .portal-card:hover{transform:none!important}
  .portal-index{top:14px!important;left:16px!important;font-size:6px!important}
  .portal-illustration{width:118px!important;height:118px!important;right:4px!important;top:50%!important;transform:translateY(-50%)!important}
  .portal-label{left:16px!important;bottom:45px!important;font-size:32px!important;max-width:62%!important}
  .portal-sub{left:16px!important;bottom:21px!important;font-size:7px!important;max-width:60%!important;line-height:1.35!important}
  .portal-go{right:15px!important;bottom:12px!important;min-width:40px!important;min-height:40px!important}

  /* Context bar: real breadcrumb instead of ambiguous MENÚ */
  .menu-topbar{
    position:sticky!important;
    top:56px!important;
    left:0;right:0;
    width:100%!important;
    max-width:none!important;
    min-height:52px!important;
    padding:7px 10px!important;
    gap:8px!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
  }
  .menu-back,.menu-home-btn{min-width:44px!important;min-height:44px!important;height:44px!important;border-radius:14px!important;padding:0 12px!important;font-size:8px!important}
  .menu-home-btn{width:44px!important;padding:0!important}
  .menu-back span{display:inline!important}
  .menu-current-wrap{min-width:0;flex:1;text-align:center;line-height:1}
  .menu-parent{display:block;margin-bottom:4px;color:#86798a;font-size:6px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .menu-current{display:block!important;font-size:20px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Section content starts immediately and uses the screen */
  main{padding-bottom:30px!important}
  .menu-section{width:100%!important;padding:28px var(--phone-pad) 34px!important;min-height:calc(100svh - 108px)!important;scroll-margin-top:112px!important}
  .section-head{margin-bottom:20px!important}
  .section-head small{font-size:6.5px!important}
  .section-head h2{font-size:clamp(44px,13vw,58px)!important;line-height:.9!important}
  .section-ghost{font-size:clamp(72px,24vw,110px)!important;top:12px!important;right:-6px!important;opacity:.35!important}
  .food-intro{font-size:10px!important;line-height:1.6!important;margin:-8px 0 18px!important}

  /* All actionable cards have comfortable touch targets */
  .drink-category-list,.food-subgrid{grid-template-columns:1fr!important;gap:9px!important}
  .drink-category,.food-subcard{min-height:92px!important;border-radius:16px!important;padding:15px 16px!important}
  .drink-category:hover,.food-subcard:hover{transform:none!important}
  .drink-category h3{font-size:31px!important}
  .food-subcard strong{position:static!important;display:block;margin-top:30px;font-size:34px!important}
  .food-subcard em{position:static!important;display:block;margin-top:5px;font-size:7px!important}

  .menu-list{grid-template-columns:1fr!important;gap:8px!important}
  .product-row{min-height:76px!important;padding:14px 13px!important;border-radius:15px!important;gap:10px!important}
  .product-row:hover{padding-left:13px!important;transform:none!important}
  .product-name{font-size:13px!important;line-height:1.25!important}
  .product-desc{font-size:8px!important;line-height:1.5!important;margin-top:4px!important}
  .product-price{font-size:25px!important;white-space:nowrap!important}

  /* Promo should read left-to-right without tiny copy */
  .promo-strip{margin:12px 0 18px!important}
  .promo-card{grid-template-columns:minmax(0,1fr) 126px!important;min-height:202px!important;height:202px!important;border-radius:18px!important}
  .promo-copy{min-height:202px!important;padding:17px 2px 14px 15px!important}
  .promo-copy h3{font-size:29px!important}
  .promo-price{font-size:38px!important}
  .promo-note{font-size:6.3px!important;line-height:1.45!important;max-width:175px!important}
  .promo-real-bottles{width:126px!important;height:202px!important}
  .promo-real-bottle{height:174px!important;width:66px!important}
  .promo-real-repo{right:57px!important}.promo-real-plata{right:1px!important}

  /* Modal = bottom sheet. Clear close handle, no sideways clipping. */
  .drink-modal,.product-modal{padding:8px!important;align-items:flex-end!important;overscroll-behavior:contain}
  .drink-modal-card,.product-modal-card{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100svh - 18px)!important;
    margin:0!important;
    border-radius:24px 24px 14px 14px!important;
    padding:22px 13px 18px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
  }
  .drink-modal-card::before,.product-modal-card::before{content:"";display:block;width:44px;height:4px;border-radius:99px;background:rgba(255,255,255,.18);margin:0 auto 14px}
  .drink-modal-close,.modal-close{position:sticky!important;float:right!important;top:0!important;right:0!important;width:44px!important;height:44px!important;min-width:44px!important;z-index:8!important}
  .drink-modal-title,.modal-name{font-size:38px!important;line-height:.95!important;padding-right:48px!important}
  .modal-layout{grid-template-columns:86px minmax(0,1fr)!important;gap:14px!important}
  .modal-thumb{width:86px!important;height:86px!important}
  .modal-price{font-size:28px!important}
  .modal-description,.drink-modal-text{font-size:11px!important;line-height:1.65!important}
  .modal-note{font-size:7px!important;line-height:1.5!important}

  /* Bottle tabs remain usable on narrow devices */
  .bottle-submenu{display:flex!important;overflow-x:auto!important;scroll-snap-type:x proximity;gap:7px!important;padding:0 1px 7px!important;scrollbar-width:none}
  .bottle-submenu::-webkit-scrollbar{display:none}
  .bottle-submenu-btn{flex:0 0 auto!important;width:auto!important;min-width:96px!important;min-height:48px!important;padding:8px 11px!important;scroll-snap-align:start;font-size:7px!important}

  /* Tables: readable before compact. Horizontal scroll only when necessary. */
  .matrix-scroll{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;padding-bottom:5px!important;overscroll-behavior-x:contain}
  .beer-price-matrix{min-width:500px!important;table-layout:auto!important}
  .bottle-table.price-matrix{min-width:430px!important;table-layout:auto!important}
  .beer-price-matrix th,.bottle-table.price-matrix th{font-size:7px!important;white-space:nowrap!important}
  .beer-price-matrix td,.bottle-table.price-matrix td{font-size:10px!important}
  .beer-price-matrix td.price-col,.bottle-table.price-matrix td.price-col{font-size:15px!important;min-width:82px!important}

  footer{padding:26px 16px calc(26px + env(safe-area-inset-bottom,0px))!important}
}

@media(max-width:380px){
  :root{--phone-pad:12px}
  .header-logo{width:108px!important}
  .welcome-menu-neon{font-size:68px!important}
  .portal-card{min-height:116px!important}
  .portal-illustration{width:105px!important;height:105px!important}
  .portal-label{font-size:29px!important}
  .menu-back{padding:0 9px!important}
  .menu-back span{font-size:7px!important}
  .promo-card{grid-template-columns:minmax(0,1fr) 114px!important}
  .promo-copy h3{font-size:26px!important}
  .promo-price{font-size:35px!important}
  .promo-real-bottles{width:114px!important}
  .promo-real-bottle{width:61px!important;height:166px!important}
  .promo-real-repo{right:51px!important}
}

/* Touch devices should not retain hover visuals after tap */
@media(hover:none){
  .portal-card:hover,.drink-category:hover,.food-subcard:hover,.product-row:hover,.social-link:hover{transform:none!important}
}

/* V40 — Botellas: every spirit tab keeps exactly the same footprint. */
.drink-modal.bottle-mode .drink-modal-card{
  height:min(82vh,760px)!important;
  min-height:min(82vh,760px)!important;
  max-height:min(82vh,760px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.drink-modal.bottle-mode .drink-modal-text{
  min-height:0!important;
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.drink-modal.bottle-mode .bottle-modal-intro,
.drink-modal.bottle-mode .bottle-submenu{flex:0 0 auto!important}
.drink-modal.bottle-mode .bottle-panels{
  flex:1 1 auto!important;
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
}
.drink-modal.bottle-mode .bottle-panel{
  height:100%!important;
  min-height:0!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.drink-modal.bottle-mode .bottle-panel.active{display:flex!important}
.drink-modal.bottle-mode .bottle-panel-head{flex:0 0 38px!important;margin:4px 0 8px!important}
.drink-modal.bottle-mode .matrix-scroll{
  flex:1 1 auto!important;
  min-height:0!important;
  height:100%!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
.drink-modal.bottle-mode .bottle-table.price-matrix{
  width:100%!important;
  table-layout:fixed!important;
}
.drink-modal.bottle-mode .bottle-table .col-product{width:52%!important}
.drink-modal.bottle-mode .bottle-table .col-price{width:24%!important}
.drink-modal.bottle-mode .bottle-submenu-btn{box-sizing:border-box!important}

@media(max-width:620px){
  .drink-modal.bottle-mode .drink-modal-card{
    height:calc(100svh - 18px)!important;
    min-height:calc(100svh - 18px)!important;
    max-height:calc(100svh - 18px)!important;
  }
  .drink-modal.bottle-mode .drink-modal-title{flex:0 0 auto!important}
  .drink-modal.bottle-mode .drink-modal-divider{flex:0 0 auto!important}
  .drink-modal.bottle-mode .bottle-submenu{
    min-height:56px!important;
    height:56px!important;
    margin:0 0 10px!important;
  }
  .drink-modal.bottle-mode .bottle-submenu-btn{
    flex:0 0 96px!important;
    width:96px!important;
    min-width:96px!important;
    max-width:96px!important;
    height:48px!important;
    min-height:48px!important;
  }
  .drink-modal.bottle-mode .bottle-panel-head{height:36px!important;min-height:36px!important}
  .drink-modal.bottle-mode .bottle-table.price-matrix{
    min-width:430px!important;
    width:430px!important;
    table-layout:fixed!important;
  }
}

/* Pantalla intermedia de categorías eliminada */
#menuHome{display:none!important;}

/* ===== Navegación superior simplificada + título neón/glitch ===== */
.header-logo-home{
  appearance:none;border:0;background:transparent;padding:0;margin:0;
  display:flex;align-items:center;justify-content:flex-start;cursor:pointer;
  border-radius:12px;min-width:0;touch-action:manipulation;
}
.header-logo-home:focus-visible{outline:2px solid #ff5ee7;outline-offset:6px}
.header-logo-home .header-logo{transition:filter .2s ease,transform .2s ease}
@media (hover:hover) and (pointer:fine){
  .header-logo-home:hover .header-logo{filter:drop-shadow(0 0 13px rgba(255,55,225,.58));transform:scale(1.025)}
}
.header-logo-home:active .header-logo{transform:scale(.97)}

.neon-route-bar{
  grid-template-columns:1fr!important;
  justify-items:center!important;
  padding:12px 18px 13px!important;
  min-height:84px!important;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(8,0,9,.98),rgba(6,0,8,.94))!important;
  border-bottom:1px solid rgba(255,70,227,.24)!important;
  box-shadow:0 12px 35px rgba(0,0,0,.35), inset 0 -1px rgba(255,74,228,.08);
}
.neon-route-bar .menu-back,.neon-route-bar .menu-home-btn{display:none!important}
.neon-route-bar .menu-current-wrap{width:100%;text-align:center;position:relative;isolation:isolate}
.neon-route-bar .menu-parent{
  display:block!important;color:#9f859d!important;font-size:6px!important;font-weight:800!important;
  letter-spacing:.38em!important;margin:0 0 5px!important;opacity:.72;text-transform:uppercase;
}

/* Único título principal de navegación */
.neon-route-bar{
  min-height:108px!important;
  padding:15px 14px 17px!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
}
.neon-route-bar .menu-current-wrap{
  width:100%!important;
  text-align:center!important;
}
.neon-route-bar .menu-parent{
  display:block!important;
  margin:0 0 7px!important;
  font-size:7px!important;
  letter-spacing:.42em!important;
  color:#b895b3!important;
  opacity:.72!important;
}
#menuCurrent{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:.015em!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  font-family:'Bebas Neue','Arial Narrow',Impact,sans-serif!important;
  font-size:clamp(48px,13vw,72px)!important;
  line-height:.88!important;
  letter-spacing:.035em!important;
  font-weight:900!important;
  color:#ffd7f7!important;
  text-transform:uppercase!important;
  animation:none!important;
  filter:none!important;
  transform:none!important;
  text-shadow:
    0 0 2px #fff,
    0 0 6px #ffb3f3,
    0 0 12px #ff63e3,
    0 0 23px rgba(255,24,209,.88),
    0 0 42px rgba(217,0,255,.46)!important;
}
#menuCurrent::before,#menuCurrent::after{display:none!important;content:none!important;animation:none!important}
#menuCurrent .neon-char{
  display:inline-block;
  opacity:1;
  color:inherit;
  text-shadow:inherit;
  transition:opacity 60ms linear,color 60ms linear,text-shadow 60ms linear,filter 60ms linear;
}
#menuCurrent .neon-char.neon-off{
  opacity:.08;
  color:#704568;
  text-shadow:0 0 1px rgba(255,70,215,.18)!important;
  filter:brightness(.35);
}
#menuCurrent .neon-char.neon-dim{
  opacity:.38;
  color:#c88abb;
  text-shadow:0 0 2px rgba(255,100,220,.35),0 0 7px rgba(255,20,200,.18)!important;
  filter:brightness(.6);
}
/* El título antiguo dentro de cada sección ya no se necesita */
.menu-section.route-active > .section-head{display:none!important}
/* El ghost era parte decorativa del título viejo: lo quitamos también */
.menu-section.route-active > .section-ghost{display:none!important}
.menu-section.route-active{padding-top:28px!important}
#adultos.menu-section.route-active{padding-top:30px!important}

@media(max-width:720px){
  .neon-route-bar{min-height:104px!important;padding:14px 10px 16px!important}
  #menuCurrent{font-size:clamp(48px,14.5vw,66px)!important;letter-spacing:.025em!important}
  .neon-route-bar .menu-parent{font-size:6px!important;margin-bottom:7px!important}
  .menu-section.route-active{padding-top:22px!important}
}
@media(max-width:390px){
  #menuCurrent{font-size:clamp(43px,14vw,58px)!important}
}
@media(prefers-reduced-motion:reduce){
  #menuCurrent .neon-char{transition:none!important}
}

/* Refinado visual del encabezado neón */
#menuCurrent,
.mobile-neon-title,
#mobileNeonTitle{
  font-size:clamp(3rem, 12.2vw, 4.9rem)!important;
  line-height:.94!important;
  letter-spacing:.055em!important;
  font-weight:900!important;
  color:#ffe7fb!important;
  text-shadow:
    0 0 1px rgba(255,255,255,.95),
    0 0 3px rgba(255,180,242,.98),
    0 0 7px rgba(255,72,214,.90),
    0 0 14px rgba(255,28,197,.55)!important;
  -webkit-text-stroke:.45px rgba(255,245,253,.62);
  filter:none!important;
  transform:none!important;
}

/* Cada letra conserva su propio halo y ya no invade a las demás */
#menuCurrent .neon-char,
.mobile-neon-title .neon-char,
#mobileNeonTitle .neon-char{
  position:relative;
  display:inline-block!important;
  margin:0 .012em!important;
  padding:0 .004em!important;
  min-width:0!important;
  transform:none!important;
  filter:none!important;
  opacity:1;
  color:#ffe8fb!important;
  -webkit-text-stroke:.38px rgba(255,255,255,.52);
  text-shadow:
    0 0 1px rgba(255,255,255,.98),
    0 0 3px rgba(255,181,243,.95),
    0 0 6px rgba(255,79,216,.80),
    0 0 11px rgba(255,20,193,.44)!important;
  transition:
    opacity 70ms linear,
    color 70ms linear,
    text-shadow 70ms linear!important;
}

/* El apóstrofe respira un poco más para que no se pegue a PA */
#menuCurrent .neon-char:nth-child(3),
.mobile-neon-title .neon-char:nth-child(3),
#mobileNeonTitle .neon-char:nth-child(3){
  margin-right:.055em!important;
}

/* Fallo de neón: apagado tenue, sin deformar ni "ensuciar" el título */
#menuCurrent .neon-char.is-flickering,
.mobile-neon-title .neon-char.is-flickering,
#mobileNeonTitle .neon-char.is-flickering{
  opacity:.12!important;
  color:#6f4568!important;
  -webkit-text-stroke:0 transparent!important;
  text-shadow:
    0 0 1px rgba(255,50,190,.12),
    0 0 3px rgba(255,0,180,.08)!important;
}

#menuCurrent .neon-char.is-dim,
.mobile-neon-title .neon-char.is-dim,
#mobileNeonTitle .neon-char.is-dim{
  opacity:.42!important;
  color:#c990bc!important;
  -webkit-text-stroke:.2px rgba(255,220,246,.25)!important;
  text-shadow:
    0 0 1px rgba(255,160,230,.3),
    0 0 4px rgba(255,20,190,.16)!important;
}

/* Halo general muy sutil detrás del rótulo, no detrás de cada letra */
.menu-topbar-current,
.menu-current-wrap{
  position:relative;
}

#menuCurrent::after,
.mobile-neon-title::after,
#mobileNeonTitle::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:-8px;
  height:14px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(255,35,198,.20) 0%,
    rgba(255,0,180,.08) 42%,
    rgba(255,0,180,0) 75%);
  filter:blur(8px);
  pointer-events:none;
  z-index:-1;
}

@media (max-width:480px){
  #menuCurrent,
  .mobile-neon-title,
  #mobileNeonTitle{
    font-size:clamp(2.8rem, 12.8vw, 4.05rem)!important;
    letter-spacing:.045em!important;
  }

  #menuCurrent .neon-char,
  .mobile-neon-title .neon-char,
  #mobileNeonTitle .neon-char{
    margin:0 .009em!important;
  }
}

/* Promo principal 2 Centenarios — rediseño móvil */
@media (max-width: 640px){

  /* Contenedor principal de la promo */
  .promo-card,
  .featured-promo,
  .promo-featured,
  .promo-centenario,
  .house-promo-card{
    position:relative!important;
    min-height:290px!important;
    padding:22px 18px 18px!important;
    border-radius:22px!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 78% 52%, rgba(255,0,191,.16), transparent 38%),
      radial-gradient(circle at 18% 22%, rgba(255,83,213,.08), transparent 30%),
      linear-gradient(145deg, rgba(28,5,27,.98), rgba(10,4,12,.99))!important;
    border:1px solid rgba(255,92,219,.18)!important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.015),
      0 16px 40px rgba(0,0,0,.28)!important;
  }

  /* Layout interior: texto izquierda, botellas dominantes derecha */
  .promo-card .promo-content,
  .featured-promo .promo-content,
  .promo-featured .promo-content,
  .promo-centenario .promo-content,
  .house-promo-card .promo-content{
    position:relative!important;
    z-index:2!important;
    width:54%!important;
    min-width:0!important;
    padding:0!important;
  }

  /* Etiqueta destacada */
  .promo-card .promo-badge,
  .featured-promo .promo-badge,
  .promo-featured .promo-badge,
  .promo-centenario .promo-badge,
  .house-promo-card .promo-badge{
    display:inline-flex!important;
    align-items:center!important;
    min-height:27px!important;
    padding:5px 10px!important;
    margin-bottom:14px!important;
    border-radius:999px!important;
    font-size:.58rem!important;
    letter-spacing:.12em!important;
    font-weight:900!important;
    color:#ff9be6!important;
    border:1px solid rgba(255,64,211,.46)!important;
    background:rgba(255,22,189,.065)!important;
    box-shadow:0 0 12px rgba(255,0,195,.08)!important;
  }

  /* Pretexto */
  .promo-card .promo-eyebrow,
  .featured-promo .promo-eyebrow,
  .promo-featured .promo-eyebrow,
  .promo-centenario .promo-eyebrow,
  .house-promo-card .promo-eyebrow{
    margin-bottom:5px!important;
    font-size:.62rem!important;
    letter-spacing:.11em!important;
    line-height:1.2!important;
    font-weight:800!important;
    color:rgba(255,255,255,.58)!important;
  }

  /* 2 CENTENARIOS */
  .promo-card .promo-title,
  .featured-promo .promo-title,
  .promo-featured .promo-title,
  .promo-centenario .promo-title,
  .house-promo-card .promo-title{
    max-width:190px!important;
    margin:0 0 9px!important;
    font-size:clamp(1.55rem, 7.2vw, 2.1rem)!important;
    line-height:.92!important;
    letter-spacing:-.02em!important;
    font-weight:950!important;
    text-transform:uppercase!important;
    color:#fff!important;
    text-shadow:
      0 0 1px rgba(255,255,255,.55),
      0 0 8px rgba(255,255,255,.07)!important;
  }

  .promo-card .promo-title strong,
  .featured-promo .promo-title strong,
  .promo-featured .promo-title strong,
  .promo-centenario .promo-title strong,
  .house-promo-card .promo-title strong{
    color:#ff56d5!important;
  }

  /* "POR" */
  .promo-card .promo-price-label,
  .featured-promo .promo-price-label,
  .promo-featured .promo-price-label,
  .promo-centenario .promo-price-label,
  .house-promo-card .promo-price-label{
    margin-top:8px!important;
    margin-bottom:0!important;
    font-size:.58rem!important;
    letter-spacing:.14em!important;
    font-weight:900!important;
    color:rgba(255,255,255,.48)!important;
  }

  /* PRECIO */
  .promo-card .promo-price,
  .featured-promo .promo-price,
  .promo-featured .promo-price,
  .promo-centenario .promo-price,
  .house-promo-card .promo-price{
    display:block!important;
    margin:0!important;
    font-size:clamp(2.8rem, 12.3vw, 4rem)!important;
    line-height:.92!important;
    letter-spacing:-.045em!important;
    font-weight:950!important;
    color:#ffc84a!important;
    text-shadow:
      0 0 2px rgba(255,239,178,.9),
      0 0 9px rgba(255,185,30,.34),
      0 0 18px rgba(255,142,0,.14)!important;
  }

  /* Condiciones */
  .promo-card .promo-note,
  .featured-promo .promo-note,
  .promo-featured .promo-note,
  .promo-centenario .promo-note,
  .house-promo-card .promo-note{
    max-width:170px!important;
    margin-top:12px!important;
    font-size:.57rem!important;
    line-height:1.35!important;
    color:rgba(255,255,255,.36)!important;
  }

  /* Imagen/botellas */
  .promo-card .promo-image,
  .featured-promo .promo-image,
  .promo-featured .promo-image,
  .promo-centenario .promo-image,
  .house-promo-card .promo-image,
  .promo-card img,
  .featured-promo img,
  .promo-featured img,
  .promo-centenario img,
  .house-promo-card img{
    z-index:1!important;
  }

  .promo-card .promo-image,
  .featured-promo .promo-image,
  .promo-featured .promo-image,
  .promo-centenario .promo-image,
  .house-promo-card .promo-image{
    position:absolute!important;
    right:2px!important;
    bottom:0!important;
    width:49%!important;
    height:95%!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    pointer-events:none!important;
  }

  .promo-card .promo-image img,
  .featured-promo .promo-image img,
  .promo-featured .promo-image img,
  .promo-centenario .promo-image img,
  .house-promo-card .promo-image img{
    width:auto!important;
    max-width:100%!important;
    height:92%!important;
    max-height:270px!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    filter:
      drop-shadow(0 0 8px rgba(255,214,121,.08))
      drop-shadow(0 12px 12px rgba(0,0,0,.32))!important;
    transform:none!important;
  }

  /* Si las botellas son dos imágenes separadas */
  .promo-card .promo-image img + img,
  .featured-promo .promo-image img + img,
  .promo-featured .promo-image img + img,
  .promo-centenario .promo-image img + img,
  .house-promo-card .promo-image img + img{
    margin-left:-14px!important;
  }

  /* Halo detrás de las botellas */
  .promo-card::after,
  .featured-promo::after,
  .promo-featured::after,
  .promo-centenario::after,
  .house-promo-card::after{
    content:"";
    position:absolute;
    right:-30px;
    bottom:-38px;
    width:230px;
    height:230px;
    border-radius:50%;
    background:radial-gradient(circle,
      rgba(255,29,205,.18) 0%,
      rgba(255,0,190,.08) 38%,
      transparent 70%);
    filter:blur(8px);
    pointer-events:none;
  }
}

@media (max-width: 390px){
  .promo-card,
  .featured-promo,
  .promo-featured,
  .promo-centenario,
  .house-promo-card{
    min-height:276px!important;
    padding-left:16px!important;
  }

  .promo-card .promo-content,
  .featured-promo .promo-content,
  .promo-featured .promo-content,
  .promo-centenario .promo-content,
  .house-promo-card .promo-content{
    width:57%!important;
  }

  .promo-card .promo-image,
  .featured-promo .promo-image,
  .promo-featured .promo-image,
  .promo-centenario .promo-image,
  .house-promo-card .promo-image{
    width:47%!important;
    right:-3px!important;
  }
}

/* FIX REAL: las imágenes usadas son .promo-real-bottle */
@media (max-width:620px){
  .promo-card{
    display:grid!important;
    grid-template-columns:minmax(0, 1fr) 46%!important;
    min-height:300px!important;
    height:300px!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .promo-copy{
    grid-column:1!important;
    min-height:300px!important;
    padding:25px 0 18px 18px!important;
    overflow:visible!important;
    position:relative!important;
    z-index:4!important;
  }

  .promo-copy h3{
    font-size:clamp(30px,8vw,38px)!important;
    line-height:.92!important;
    max-width:210px!important;
    margin-top:8px!important;
  }

  .promo-price{
    font-size:clamp(43px,12vw,58px)!important;
    line-height:.95!important;
    margin-top:8px!important;
    white-space:nowrap!important;
  }

  .promo-real-bottles{
    grid-column:2!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:300px!important;
    margin:0!important;
    overflow:visible!important;
    align-self:end!important;
    z-index:3!important;
  }

  .promo-real-bottle{
    position:absolute!important;
    bottom:-5px!important;
    width:auto!important;
    height:278px!important;
    max-width:none!important;
    object-fit:contain!important;
    transform:none!important;
    filter:
      drop-shadow(0 9px 10px rgba(0,0,0,.48))
      drop-shadow(0 0 10px rgba(255,44,201,.13))!important;
  }

  .promo-real-repo{
    right:42%!important;
  }

  .promo-real-plata{
    right:-3%!important;
  }
}

@media (max-width:390px){
  .promo-card{
    grid-template-columns:minmax(0,1fr) 47%!important;
    min-height:282px!important;
    height:282px!important;
  }
  .promo-copy{
    min-height:282px!important;
    padding:22px 0 15px 15px!important;
  }
  .promo-copy h3{
    font-size:29px!important;
  }
  .promo-price{
    font-size:43px!important;
  }
  .promo-real-bottles{
    height:282px!important;
  }
  .promo-real-bottle{
    height:260px!important;
  }
  .promo-real-repo{right:41%!important}
  .promo-real-plata{right:-5%!important}
}

/* ===== PROMO 2 CENTENARIOS ===== */
@media (max-width:620px){
  .promo-card{
    min-height:305px!important;
    height:305px!important;
    grid-template-columns:minmax(0,1fr) 48%!important;
  }

  .promo-copy{
    min-height:305px!important;
    padding:24px 0 18px 18px!important;
    overflow:visible!important;
  }

  .promo-badge{
    font-size:8px!important;
    line-height:1!important;
    letter-spacing:.12em!important;
    padding:6px 10px!important;
    min-height:28px!important;
    color:#ff73dd!important;
  }

  .promo-kicker{
    font-size:9px!important;
    line-height:1.2!important;
    letter-spacing:.14em!important;
    margin:3px 0 7px!important;
    color:rgba(255,255,255,.55)!important;
  }

  .promo-copy h3{
    font-size:34px!important;
    line-height:.9!important;
    letter-spacing:-.012em!important;
    margin:0!important;
    max-width:220px!important;
    font-weight:400!important;
    color:#fff!important;
    text-shadow:0 0 8px rgba(255,255,255,.06)!important;
  }

  .promo-copy h3 b{
    color:#ff4fd2!important;
    font-size:1.06em!important;
  }

  .promo-price{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:6px!important;
    margin-top:10px!important;
    font-size:53px!important;
    line-height:.88!important;
    letter-spacing:-.035em!important;
    color:#ffd36a!important;
    text-shadow:
      0 0 2px rgba(255,244,194,.85),
      0 0 8px rgba(255,189,53,.28)!important;
  }

  .promo-price small{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:24px!important;
    margin:0 2px 0 0!important;
    padding:4px 7px!important;
    border-radius:999px!important;
    font:900 10px/1 Montserrat,sans-serif!important;
    letter-spacing:.13em!important;
    color:#f7d8ef!important;
    background:rgba(255,53,207,.08)!important;
    border:1px solid rgba(255,75,213,.20)!important;
  }

  .promo-note{
    margin-top:13px!important;
    max-width:185px!important;
    font-size:8px!important;
    line-height:1.45!important;
    color:rgba(255,255,255,.42)!important;
  }

  /* Botellas grandes, inclinadas y sobrepuestas */
  .promo-real-bottles{
    width:100%!important;
    height:305px!important;
    overflow:visible!important;
    position:relative!important;
    z-index:3!important;
  }

  .promo-real-bottle{
    bottom:-8px!important;
    width:auto!important;
    height:285px!important;
    max-width:none!important;
    transform-origin:50% 86%!important;
    transition:none!important;
  }

  .promo-real-repo{
    right:33%!important;
    transform:rotate(-8deg)!important;
    z-index:4!important;
  }

  .promo-real-plata{
    right:-4%!important;
    transform:rotate(7deg)!important;
    z-index:3!important;
  }
}

/* ===== TÍTULOS NEÓN UNIFICADOS ===== */
#menuCurrent{
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
  overflow:visible!important;
  font-family:'Bebas Neue','Arial Narrow',Impact,sans-serif!important;
  font-weight:900!important;
  line-height:.9!important;
  letter-spacing:.055em!important;
  color:#ffe8fb!important;
  text-align:center!important;
  text-transform:uppercase!important;
  text-shadow:
    0 0 1px rgba(255,255,255,.98),
    0 0 3px rgba(255,187,245,.96),
    0 0 7px rgba(255,78,217,.82),
    0 0 13px rgba(255,20,194,.44)!important;
  -webkit-text-stroke:.42px rgba(255,255,255,.52)!important;
  filter:none!important;
  transform:none!important;
}

#menuCurrent[data-title="PA' TOMAR"],
#menuCurrent[data-title="PA' COMER"]{
  font-size:clamp(3rem,13vw,4.5rem)!important;
}

#menuCurrent[data-title="SIN ALCOHOL"]{
  font-size:clamp(2.55rem,10.7vw,3.8rem)!important;
  letter-spacing:.045em!important;
}

#menuCurrent .neon-char{
  display:inline-block!important;
  margin:0 .012em!important;
  padding:0!important;
  min-width:0!important;
  transform:none!important;
  filter:none!important;
  color:inherit!important;
  text-shadow:inherit!important;
  -webkit-text-stroke:inherit!important;
}

#menuCurrent .neon-char.neon-off,
#menuCurrent .neon-char.is-flickering{
  opacity:.11!important;
  color:#704568!important;
  text-shadow:0 0 2px rgba(255,50,198,.12)!important;
  -webkit-text-stroke:0 transparent!important;
}

#menuCurrent .neon-char.neon-dim,
#menuCurrent .neon-char.is-dim{
  opacity:.42!important;
  color:#c78fba!important;
  text-shadow:
    0 0 2px rgba(255,130,226,.28),
    0 0 5px rgba(255,20,194,.14)!important;
}

/* Oculta títulos antiguos SIEMPRE dentro de las rutas */
.menu-section .section-ghost,
.menu-section .section-head{
  display:none!important;
}

.food-hub,
#sin{
  padding-top:24px!important;
}

/* Homogeneizar espaciado de PA' COMER / SIN ALCOHOL con PA' TOMAR */
.food-hub .food-intro{
  margin-top:0!important;
}

@media (max-width:390px){
  .promo-card{
    min-height:292px!important;
    height:292px!important;
    grid-template-columns:minmax(0,1fr) 49%!important;
  }

  .promo-copy{
    min-height:292px!important;
    padding:21px 0 15px 15px!important;
  }

  .promo-copy h3{font-size:31px!important}
  .promo-price{font-size:47px!important}
  .promo-price small{font-size:9px!important;min-height:22px!important}

  .promo-real-bottles{height:292px!important}
  .promo-real-bottle{height:270px!important}
  .promo-real-repo{right:32%!important;transform:rotate(-8deg)!important}
  .promo-real-plata{right:-6%!important;transform:rotate(7deg)!important}

  #menuCurrent[data-title="PA' TOMAR"],
  #menuCurrent[data-title="PA' COMER"]{
    font-size:clamp(2.8rem,13.2vw,4rem)!important;
  }

  #menuCurrent[data-title="SIN ALCOHOL"]{
    font-size:clamp(2.25rem,10.5vw,3.2rem)!important;
    letter-spacing:.035em!important;
  }
}

/* PA' COMER — tarjetas móviles reconstruidas para evitar reglas heredadas */
@media (max-width: 720px){
  .food-hub .food-intro{
    margin:0 0 18px!important;
    padding:0 2px!important;
    color:rgba(255,235,251,.55)!important;
    font:500 11px/1.55 Montserrat,sans-serif!important;
    letter-spacing:.015em!important;
  }

  .food-hub .food-subgrid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .food-hub .food-subcard{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 46px!important;
    grid-template-rows:auto auto auto!important;
    grid-template-areas:
      "index arrow"
      "title arrow"
      "desc arrow"!important;
    align-items:center!important;
    column-gap:14px!important;
    row-gap:0!important;

    width:100%!important;
    min-height:132px!important;
    height:auto!important;
    margin:0!important;
    padding:18px 17px 17px!important;

    overflow:hidden!important;
    text-align:left!important;
    border-radius:20px!important;
    border:1px solid rgba(255,77,216,.18)!important;
    background:
      radial-gradient(circle at 92% 22%,rgba(219,0,255,.13),transparent 34%),
      radial-gradient(circle at 12% 100%,rgba(255,43,204,.05),transparent 34%),
      linear-gradient(145deg,rgba(28,13,27,.96),rgba(14,7,17,.99))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.02),
      0 12px 28px rgba(0,0,0,.16)!important;
    color:#fff!important;
    transform:none!important;
  }

  .food-hub .food-subcard::after{
    content:""!important;
    position:absolute!important;
    left:17px!important;
    bottom:0!important;
    width:56px!important;
    height:2px!important;
    border-radius:99px!important;
    background:linear-gradient(90deg,#ff42cf,rgba(255,66,207,0))!important;
    opacity:.72!important;
    pointer-events:none!important;
  }

  /* 01 / 02 / 03 */
  .food-hub .food-subcard > span{
    grid-area:index!important;
    position:static!important;
    display:block!important;
    margin:0 0 15px!important;
    padding:0!important;
    width:auto!important;
    height:auto!important;
    font:900 9px/1 Montserrat,sans-serif!important;
    letter-spacing:.24em!important;
    color:#ad759f!important;
    opacity:1!important;
  }

  /* Título */
  .food-hub .food-subcard > strong{
    grid-area:title!important;
    position:static!important;
    inset:auto!important;
    display:block!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    font-family:'Bebas Neue','Arial Narrow',Impact,sans-serif!important;
    font-size:clamp(31px,8.8vw,40px)!important;
    font-weight:400!important;
    line-height:.88!important;
    letter-spacing:.015em!important;
    color:#fff2fd!important;
    text-shadow:
      0 0 1px rgba(255,255,255,.6),
      0 0 7px rgba(255,69,212,.12)!important;
    white-space:normal!important;
    word-break:normal!important;
  }

  /* Descripción */
  .food-hub .food-subcard > small{
    grid-area:desc!important;
    position:static!important;
    inset:auto!important;
    display:block!important;
    width:auto!important;
    max-width:310px!important;
    margin:8px 0 0!important;
    padding:0!important;
    font:500 9px/1.4 Montserrat,sans-serif!important;
    letter-spacing:.01em!important;
    color:rgba(244,219,239,.48)!important;
    white-space:normal!important;
  }

  /* Flecha */
  .food-hub .food-subcard > b{
    grid-area:arrow!important;
    position:static!important;
    inset:auto!important;
    display:grid!important;
    place-items:center!important;
    justify-self:end!important;
    align-self:center!important;
    width:42px!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
    border-radius:50%!important;
    border:1px solid rgba(255,69,211,.28)!important;
    background:rgba(255,31,198,.045)!important;
    color:#ff52d5!important;
    font:400 25px/1 Arial,sans-serif!important;
    box-shadow:
      inset 0 0 14px rgba(255,0,193,.035),
      0 0 12px rgba(255,0,193,.03)!important;
  }

  .food-hub .food-subcard:active{
    border-color:rgba(255,84,220,.35)!important;
    background:
      radial-gradient(circle at 92% 22%,rgba(219,0,255,.17),transparent 34%),
      linear-gradient(145deg,rgba(32,14,31,.98),rgba(14,7,17,.99))!important;
  }
}

/* Extra para teléfonos muy estrechos */
@media (max-width: 380px){
  .food-hub .food-subcard{
    min-height:126px!important;
    grid-template-columns:minmax(0,1fr) 40px!important;
    padding:16px 14px!important;
  }

  .food-hub .food-subcard > strong{
    font-size:31px!important;
  }

  .food-hub .food-subcard > small{
    font-size:8.5px!important;
  }

  .food-hub .food-subcard > b{
    width:38px!important;
    height:38px!important;
    font-size:22px!important;
  }
}

/* ===== Flecha de regreso en PA' PICAR / PARA TI / PA' COMPARTIR ===== */
.subfood-back{
  display:none;
}

@media (max-width:720px){
  #picar.route-active,
  #ti.route-active,
  #compartir.route-active{
    position:relative!important;
    padding-top:74px!important;
  }

  #picar .subfood-back,
  #ti .subfood-back,
  #compartir .subfood-back{
    position:absolute!important;
    top:18px!important;
    left:16px!important;
    z-index:20!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:8px!important;
    min-height:42px!important;
    padding:0 14px!important;
    border-radius:999px!important;
    border:1px solid rgba(255,77,216,.22)!important;
    background:rgba(255,30,197,.045)!important;
    color:#ffdff8!important;
    font:800 10px/1 Montserrat,sans-serif!important;
    letter-spacing:.1em!important;
    text-transform:uppercase!important;
    box-shadow:
      inset 0 0 12px rgba(255,0,194,.035),
      0 0 12px rgba(255,0,194,.025)!important;
    cursor:pointer!important;
  }

  #picar .subfood-back svg,
  #ti .subfood-back svg,
  #compartir .subfood-back svg{
    width:17px!important;
    height:17px!important;
    fill:none!important;
    stroke:#ff63d8!important;
    stroke-width:2!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }

  #picar .subfood-back:active,
  #ti .subfood-back:active,
  #compartir .subfood-back:active{
    background:rgba(255,30,197,.09)!important;
    border-color:rgba(255,88,220,.34)!important;
  }
}

/* ===== Todos los menús internos de PA' TOMAR con MISMO tamaño ===== */
@media (max-width:720px){
  .drink-modal,
  .product-modal{
    padding:8px!important;
    align-items:flex-end!important;
  }

  .drink-modal .drink-modal-card,
  .product-modal .product-modal-card,
  .drink-modal.bottle-mode .drink-modal-card{
    width:min(100%, 620px)!important;
    height:min(78vh, 680px)!important;
    min-height:min(78vh, 680px)!important;
    max-height:min(78vh, 680px)!important;
    margin:0 auto!important;
    border-radius:22px 22px 16px 16px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  .drink-modal .drink-modal-text,
  .product-modal .product-modal-text,
  .drink-modal.bottle-mode .drink-modal-text{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }

  /* Área de contenido interna del mismo tamaño */
  .drink-modal .modal-body,
  .drink-modal .drink-modal-body,
  .drink-modal .modal-content-scroll,
  .product-modal .modal-body,
  .product-modal .product-modal-body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  /* Tablas/listas largas hacen scroll DENTRO del panel y ya no lo agrandan */
  .drink-modal .price-matrix,
  .drink-modal .bottle-table,
  .drink-modal .beer-price-matrix,
  .drink-modal .menu-list,
  .drink-modal .product-list{
    max-height:none!important;
  }

  /* Encabezado consistente */
  .drink-modal .modal-head,
  .drink-modal .drink-modal-head,
  .product-modal .modal-head,
  .product-modal .product-modal-head{
    flex:0 0 auto!important;
    min-height:58px!important;
  }

  /* Botellas: sus sub-tabs ya no cambian la altura total */
  .drink-modal.bottle-mode .bottle-panel,
  .drink-modal.bottle-mode .bottle-table-wrap{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
}

@media (max-width:390px){
  .drink-modal .drink-modal-card,
  .product-modal .product-modal-card,
  .drink-modal.bottle-mode .drink-modal-card{
    height:min(80vh, 640px)!important;
    min-height:min(80vh, 640px)!important;
    max-height:min(80vh, 640px)!important;
  }
}

/* PA' PICAR / PARA TI / PA' COMPARTIR usan exactamente el lenguaje visual de los modales de PA' TOMAR */
.food-category-modal .food-category-modal-card{
  display:flex!important;
  flex-direction:column!important;
}

.food-category-modal .food-category-modal-text{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:hidden!important;
}

.food-category-modal .food-modal-scroll{
  height:100%!important;
  min-height:0!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
  padding-right:2px!important;
}

.food-category-modal .food-modal-scroll .menu-list{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:9px!important;
  margin:0!important;
}

.food-category-modal .product-row{
  min-height:76px!important;
  padding:14px 13px!important;
  border-radius:15px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  background:linear-gradient(110deg,rgba(255,255,255,.045),rgba(255,255,255,.012))!important;
}

.food-category-modal .product-name{
  color:#fff3fc!important;
}

.food-category-modal .product-desc{
  color:rgba(239,219,236,.50)!important;
}

.food-category-modal .product-price{
  color:#ff70db!important;
}

@media (max-width:720px){
  .food-category-modal{
    padding:8px!important;
    align-items:flex-end!important;
  }

  .food-category-modal .food-category-modal-card{
    width:min(100%,620px)!important;
    height:min(78vh,680px)!important;
    min-height:min(78vh,680px)!important;
    max-height:min(78vh,680px)!important;
    margin:0 auto!important;
    padding:22px 18px 18px!important;
    border-radius:22px 22px 16px 16px!important;
    overflow:hidden!important;
  }

  .food-category-modal .drink-modal-title{
    font-size:42px!important;
    line-height:.92!important;
    padding-right:46px!important;
  }

  .food-category-modal .food-modal-scroll{
    padding-bottom:0!important;
  }
}

@media (max-width:390px){
  .food-category-modal .food-category-modal-card{
    height:min(80vh,640px)!important;
    min-height:min(80vh,640px)!important;
    max-height:min(80vh,640px)!important;
  }

  .food-category-modal .drink-modal-title{
    font-size:38px!important;
  }
}

/* Nombres de productos más legibles dentro de paneles/modales */
.drink-modal .product-name,
.product-modal .product-name,
.food-category-modal .product-name{
  font-size:15px!important;
  line-height:1.25!important;
  font-weight:850!important;
  letter-spacing:.01em!important;
}

@media (max-width:720px){
  .drink-modal .product-name,
  .product-modal .product-name,
  .food-category-modal .product-name{
    font-size:15.5px!important;
    line-height:1.22!important;
  }

  .food-category-modal .product-row{
    min-height:82px!important;
  }
}

@media (max-width:390px){
  .drink-modal .product-name,
  .product-modal .product-name,
  .food-category-modal .product-name{
    font-size:15px!important;
  }
}

/* =========================================================
   MOBILE FIX 1 — Promo: botellas nunca invaden el texto
   ========================================================= */
@media (max-width: 620px){
  .promo-card{
    display:grid!important;
    grid-template-columns:minmax(0, 58%) minmax(0, 42%)!important;
    min-height:300px!important;
    height:300px!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .promo-copy{
    grid-column:1!important;
    position:relative!important;
    z-index:5!important;
    min-width:0!important;
    min-height:300px!important;
    padding:24px 8px 18px 18px!important;
    overflow:hidden!important;
  }

  .promo-copy h3{
    max-width:100%!important;
    font-size:32px!important;
    line-height:.9!important;
    white-space:normal!important;
  }

  .promo-price{
    max-width:100%!important;
    font-size:49px!important;
    line-height:.9!important;
    flex-wrap:wrap!important;
  }

  .promo-note{
    max-width:100%!important;
    padding-right:4px!important;
  }

  .promo-real-bottles{
    grid-column:2!important;
    position:relative!important;
    z-index:3!important;
    width:100%!important;
    height:300px!important;
    margin:0!important;
    overflow:visible!important;
    pointer-events:none!important;
  }

  .promo-real-bottle{
    position:absolute!important;
    bottom:-7px!important;
    width:auto!important;
    max-width:none!important;
    height:255px!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    transform-origin:50% 88%!important;
  }

  .promo-real-repo{
    right:31%!important;
    transform:rotate(-7deg)!important;
    z-index:4!important;
  }

  .promo-real-plata{
    right:-5%!important;
    transform:rotate(6deg)!important;
    z-index:3!important;
  }
}

@media (max-width: 390px){
  .promo-card{
    grid-template-columns:minmax(0, 60%) minmax(0, 40%)!important;
    min-height:286px!important;
    height:286px!important;
  }
  .promo-copy{
    min-height:286px!important;
    padding:21px 6px 15px 15px!important;
  }
  .promo-copy h3{font-size:29px!important}
  .promo-price{font-size:44px!important}
  .promo-real-bottles{height:286px!important}
  .promo-real-bottle{height:238px!important}
  .promo-real-repo{right:30%!important}
  .promo-real-plata{right:-7%!important}
}

/* =========================================================
   MOBILE FIX 2 — Todas las columnas de precios visibles
   Sin scroll horizontal en cerveza / botellas / matrices
   ========================================================= */
@media (max-width: 720px){
  .drink-modal .matrix-scroll,
  .drink-modal .bottle-table-wrap,
  .drink-modal .beer-table-wrap,
  .drink-modal .table-scroll,
  .drink-modal .price-table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .drink-modal table,
  .drink-modal .modal-table,
  .drink-modal .price-matrix,
  .drink-modal .beer-price-matrix,
  .drink-modal .bottle-table{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
    border-collapse:separate!important;
  }

  /* primera columna producto = un poco más ancha */
  .drink-modal table th:first-child,
  .drink-modal table td:first-child,
  .drink-modal .price-matrix th:first-child,
  .drink-modal .price-matrix td:first-child,
  .drink-modal .beer-price-matrix th:first-child,
  .drink-modal .beer-price-matrix td:first-child,
  .drink-modal .bottle-table th:first-child,
  .drink-modal .bottle-table td:first-child{
    width:40%!important;
    max-width:40%!important;
    min-width:0!important;
  }

  /* columnas de precio comparten el resto */
  .drink-modal table th:not(:first-child),
  .drink-modal table td:not(:first-child),
  .drink-modal .price-matrix th:not(:first-child),
  .drink-modal .price-matrix td:not(:first-child),
  .drink-modal .beer-price-matrix th:not(:first-child),
  .drink-modal .beer-price-matrix td:not(:first-child),
  .drink-modal .bottle-table th:not(:first-child),
  .drink-modal .bottle-table td:not(:first-child){
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    text-align:center!important;
  }

  .drink-modal table th,
  .drink-modal .price-matrix th,
  .drink-modal .beer-price-matrix th,
  .drink-modal .bottle-table th{
    padding:8px 2px!important;
    font-size:9px!important;
    line-height:1.05!important;
    letter-spacing:.015em!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  .drink-modal table td,
  .drink-modal .price-matrix td,
  .drink-modal .beer-price-matrix td,
  .drink-modal .bottle-table td{
    padding:11px 3px!important;
    font-size:10px!important;
    line-height:1.15!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  .drink-modal table td:first-child,
  .drink-modal .price-matrix td:first-child,
  .drink-modal .beer-price-matrix td:first-child,
  .drink-modal .bottle-table td:first-child{
    padding-left:9px!important;
    padding-right:5px!important;
    text-align:left!important;
    font-size:10.5px!important;
  }

  .drink-modal td.price-col,
  .drink-modal .price-col{
    font-size:13px!important;
    line-height:1!important;
    white-space:nowrap!important;
    letter-spacing:-.01em!important;
  }

  /* Quita anchos mínimos heredados que generaban scroll */
  .drink-modal .beer-price-matrix,
  .drink-modal .bottle-table.price-matrix{
    min-width:0!important;
  }

  .drink-modal .matrix-scroll{
    scrollbar-width:none!important;
  }
  .drink-modal .matrix-scroll::-webkit-scrollbar{
    display:none!important;
  }
}

/* Ajuste extra para iPhone estrecho */
@media (max-width: 390px){
  .drink-modal table th,
  .drink-modal .price-matrix th,
  .drink-modal .beer-price-matrix th,
  .drink-modal .bottle-table th{
    font-size:8px!important;
    padding:7px 1px!important;
  }

  .drink-modal table td,
  .drink-modal .price-matrix td,
  .drink-modal .beer-price-matrix td,
  .drink-modal .bottle-table td{
    padding:10px 2px!important;
    font-size:9px!important;
  }

  .drink-modal table td:first-child,
  .drink-modal .price-matrix td:first-child,
  .drink-modal .beer-price-matrix td:first-child,
  .drink-modal .bottle-table td:first-child{
    width:38%!important;
    max-width:38%!important;
    font-size:9.5px!important;
    padding-left:7px!important;
  }

  .drink-modal td.price-col,
  .drink-modal .price-col{
    font-size:12px!important;
  }
}

/* Pantalla inicial: nunca mostrar el título neón de ruta ni la barra inferior */
body.welcome-active .neon-route-bar,
body.welcome-active #menuTopbar,
body.welcome-active #mobileBottomNav,
body.welcome-active .mobile-bottom-nav{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Refuerzo por si alguna clase tarda en actualizarse */
#welcome.route-active ~ .neon-route-bar,
#welcome.route-active ~ #mobileBottomNav{
  display:none!important;
}

/* Transición de entrada al menú: copy más neutral */
.route-transition .transition-name{
  text-align:center!important;
}

/* Loader inicial un poco más presente */
#loader,
.loader-screen,
.loading-screen,
.site-loader{
  transition:opacity .45s ease, visibility .45s ease!important;
}

/* =========================================================
   1) BOTELLAS: 2 OZ + BOTELLA visibles al mismo tiempo
   ========================================================= */
@media (max-width:720px){

  .drink-modal.bottle-mode .matrix-scroll,
  .drink-modal.bottle-mode .bottle-table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .drink-modal.bottle-mode .bottle-table,
  .drink-modal.bottle-mode .bottle-table.price-matrix{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:fixed!important;
    border-collapse:separate!important;
    border-spacing:0 8px!important;
  }

  /* Producto / 2 OZ / Botella */
  .drink-modal.bottle-mode .bottle-table th:nth-child(1),
  .drink-modal.bottle-mode .bottle-table td:nth-child(1){
    width:52%!important;
    max-width:52%!important;
    min-width:0!important;
    text-align:left!important;
  }

  .drink-modal.bottle-mode .bottle-table th:nth-child(2),
  .drink-modal.bottle-mode .bottle-table td:nth-child(2),
  .drink-modal.bottle-mode .bottle-table th:nth-child(3),
  .drink-modal.bottle-mode .bottle-table td:nth-child(3){
    width:24%!important;
    max-width:24%!important;
    min-width:0!important;
    text-align:center!important;
  }

  .drink-modal.bottle-mode .bottle-table th{
    padding:7px 2px!important;
    font-size:8px!important;
    line-height:1.05!important;
    letter-spacing:.02em!important;
    white-space:normal!important;
  }

  .drink-modal.bottle-mode .bottle-table td{
    padding:10px 3px!important;
    font-size:9px!important;
    line-height:1.15!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  .drink-modal.bottle-mode .bottle-table td:first-child{
    padding-left:8px!important;
    padding-right:4px!important;
    font-size:9.5px!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  .drink-modal.bottle-mode .bottle-table td.price-col{
    font-size:12.5px!important;
    white-space:nowrap!important;
    letter-spacing:-.015em!important;
    padding-left:1px!important;
    padding-right:1px!important;
  }
}

@media (max-width:390px){
  .drink-modal.bottle-mode .bottle-table th:nth-child(1),
  .drink-modal.bottle-mode .bottle-table td:nth-child(1){
    width:50%!important;
    max-width:50%!important;
  }

  .drink-modal.bottle-mode .bottle-table th:nth-child(2),
  .drink-modal.bottle-mode .bottle-table td:nth-child(2),
  .drink-modal.bottle-mode .bottle-table th:nth-child(3),
  .drink-modal.bottle-mode .bottle-table td:nth-child(3){
    width:25%!important;
    max-width:25%!important;
  }

  .drink-modal.bottle-mode .bottle-table th{font-size:7.6px!important}
  .drink-modal.bottle-mode .bottle-table td:first-child{font-size:9px!important}
  .drink-modal.bottle-mode .bottle-table td.price-col{font-size:11.5px!important}
}

/* =========================================================
   2) PROMO: botellas grandes, inclinadas, pero sin tocar texto
   ========================================================= */
@media (max-width:620px){
  .promo-card{
    grid-template-columns:minmax(0, 62%) minmax(0, 38%)!important;
    min-height:300px!important;
    height:300px!important;
    overflow:hidden!important;
  }

  .promo-copy{
    grid-column:1!important;
    min-height:300px!important;
    padding:24px 8px 18px 18px!important;
    overflow:hidden!important;
    z-index:6!important;
  }

  .promo-copy h3{
    font-size:30px!important;
    max-width:100%!important;
    white-space:normal!important;
  }

  .promo-price{
    font-size:46px!important;
    max-width:100%!important;
  }

  .promo-note{
    max-width:100%!important;
    padding-right:4px!important;
  }

  .promo-real-bottles{
    grid-column:2!important;
    width:100%!important;
    height:300px!important;
    position:relative!important;
    overflow:visible!important;
    z-index:3!important;
  }

  .promo-real-bottle{
    height:248px!important;
    width:auto!important;
    max-width:none!important;
    bottom:-8px!important;
    transform-origin:50% 90%!important;
  }

  .promo-real-repo{
    right:28%!important;
    transform:rotate(-8deg)!important;
    z-index:4!important;
  }

  .promo-real-plata{
    right:-10%!important;
    transform:rotate(7deg)!important;
    z-index:3!important;
  }
}

@media (max-width:390px){
  .promo-card{
    grid-template-columns:minmax(0, 64%) minmax(0, 36%)!important;
    min-height:288px!important;
    height:288px!important;
  }
  .promo-copy{
    min-height:288px!important;
    padding:21px 6px 15px 15px!important;
  }
  .promo-copy h3{font-size:28px!important}
  .promo-price{font-size:42px!important}
  .promo-real-bottles{height:288px!important}
  .promo-real-bottle{height:228px!important}
  .promo-real-repo{right:25%!important}
  .promo-real-plata{right:-13%!important}
}

/* =========================================================
   3) Quitar hueco enorme alrededor del logo/footer inferior
   ========================================================= */
@media (max-width:720px){
  footer{
    margin-top:18px!important;
    padding:18px 16px 96px!important;
    min-height:0!important;
  }

  footer .footer-inner,
  footer .footer-brand,
  footer .footer-logo,
  footer .brand-footer{
    margin-top:0!important;
    margin-bottom:0!important;
  }

  footer img,
  footer .footer-logo img,
  footer .brand-footer img{
    max-height:54px!important;
    width:auto!important;
    margin:0 auto!important;
  }

  .menu-section{
    padding-bottom:18px!important;
    min-height:0!important;
  }

  .menu-section.route-active{
    min-height:0!important;
  }
}

/* =========================================================
   4) Pantalla inicial totalmente fija, sin scroll
   ========================================================= */
body.welcome-active{
  overflow:hidden!important;
  height:100%!important;
  overscroll-behavior:none!important;
  touch-action:manipulation!important;
}

body.welcome-active html{
  overflow:hidden!important;
}

body.welcome-active .welcome-screen,
body.welcome-active #welcome{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

body.welcome-active main,
body.welcome-active footer{
  overflow:hidden!important;
}

/* iPhone: evita arrastre elástico del fondo en welcome */
@supports (-webkit-touch-callout:none){
  body.welcome-active{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
  }
}

/* =========================================================
   1) PROMO: botellas con composición más natural
   ========================================================= */
@media (max-width:620px){
  .promo-card{
    grid-template-columns:minmax(0, 60%) minmax(0, 40%)!important;
    min-height:300px!important;
    height:300px!important;
    overflow:hidden!important;
  }

  .promo-copy{
    grid-column:1!important;
    min-height:300px!important;
    padding:24px 8px 18px 18px!important;
    z-index:6!important;
    overflow:hidden!important;
  }

  .promo-real-bottles{
    grid-column:2!important;
    position:relative!important;
    width:100%!important;
    height:300px!important;
    margin:0!important;
    overflow:visible!important;
    z-index:3!important;
  }

  .promo-real-bottle{
    position:absolute!important;
    bottom:-5px!important;
    width:auto!important;
    max-width:none!important;
    height:246px!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    transform-origin:50% 92%!important;
    filter:
      drop-shadow(0 12px 10px rgba(0,0,0,.42))
      drop-shadow(0 0 8px rgba(255,52,205,.08))!important;
  }

  /* Reposado al frente, ligeramente más bajo */
  .promo-real-repo{
    right:29%!important;
    bottom:-7px!important;
    transform:rotate(-6deg)!important;
    z-index:4!important;
  }

  /* Plata detrás, un poco más alta */
  .promo-real-plata{
    right:-3%!important;
    bottom:1px!important;
    transform:rotate(5deg)!important;
    z-index:3!important;
  }

  .promo-real-bottles::after{
    content:""!important;
    position:absolute!important;
    left:12%!important;
    right:4%!important;
    bottom:5px!important;
    height:1px!important;
    background:linear-gradient(90deg,transparent,rgba(255,212,107,.42),rgba(255,74,214,.32),transparent)!important;
    box-shadow:0 0 12px rgba(255,62,210,.12)!important;
    pointer-events:none!important;
  }
}

@media (max-width:390px){
  .promo-card{
    grid-template-columns:minmax(0, 62%) minmax(0, 38%)!important;
    min-height:288px!important;
    height:288px!important;
  }

  .promo-copy{
    min-height:288px!important;
    padding:21px 6px 15px 15px!important;
  }

  .promo-real-bottles{height:288px!important}
  .promo-real-bottle{height:228px!important}
  .promo-real-repo{right:28%!important;transform:rotate(-6deg)!important}
  .promo-real-plata{right:-5%!important;transform:rotate(5deg)!important}
}

/* =========================================================
   2) MODALES / PANELES pegados arriba
   ========================================================= */
@media (max-width:720px){
  .drink-modal,
  .product-modal,
  .food-category-modal{
    align-items:flex-start!important;
    justify-content:center!important;
    padding:
      calc(env(safe-area-inset-top) + 60px)
      8px
      8px!important;
    overflow:hidden!important;
  }

  .drink-modal .drink-modal-card,
  .product-modal .product-modal-card,
  .food-category-modal .food-category-modal-card,
  .drink-modal.bottle-mode .drink-modal-card{
    margin:0 auto!important;
    width:min(100%,620px)!important;
    height:min(82vh,700px)!important;
    min-height:min(82vh,700px)!important;
    max-height:min(82vh,700px)!important;
    border-radius:18px!important;
  }
}

@media (max-width:390px){
  .drink-modal .drink-modal-card,
  .product-modal .product-modal-card,
  .food-category-modal .food-category-modal-card,
  .drink-modal.bottle-mode .drink-modal-card{
    height:min(84vh,660px)!important;
    min-height:min(84vh,660px)!important;
    max-height:min(84vh,660px)!important;
  }
}

/* =========================================================
   3) Footer y cierre de secciones más compactos
   ========================================================= */
@media (max-width:720px){
  body.menu-route-active main{
    padding-bottom:calc(76px + env(safe-area-inset-bottom))!important;
  }

  body.menu-route-active footer{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    margin-top:0!important;
    padding:
      12px 16px
      calc(72px + env(safe-area-inset-bottom))!important;
    min-height:0!important;
    border-top:1px solid rgba(255,255,255,.055)!important;
  }

  footer .footer-logo{
    width:205px!important;
    max-width:62vw!important;
    margin:0 auto 3px!important;
  }

  footer p{
    margin:0!important;
    font-size:7px!important;
    line-height:1.2!important;
    letter-spacing:.15em!important;
  }

  .menu-section{
    min-height:0!important;
    padding-bottom:8px!important;
  }

  .menu-section.route-active{
    min-height:0!important;
  }

  .drink-category-list,
  .food-subgrid,
  .menu-list{
    margin-bottom:8px!important;
  }
}

/* =========================================================
   PROMO 2 CENTENARIOS — composición final móvil
   Este bloque va al FINAL para ganar sobre ajustes anteriores.
   ========================================================= */
@media (max-width: 620px){

  .promo-card{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0, 56%) minmax(0, 44%)!important;
    min-height:318px!important;
    height:318px!important;
    overflow:hidden!important;
  }

  .promo-copy{
    position:relative!important;
    grid-column:1!important;
    z-index:10!important;
    min-width:0!important;
    min-height:318px!important;
    padding:25px 0 18px 18px!important;
    overflow:visible!important;
  }

  /* Contenedor exclusivo de las botellas */
  .promo-real-bottles{
    position:absolute!important;
    z-index:5!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    width:46%!important;
    height:100%!important;
    margin:0!important;
    transform:none!important;
    overflow:visible!important;
    pointer-events:none!important;
  }

  .promo-real-bottle{
    position:absolute!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    transform-origin:50% 92%!important;
    filter:
      drop-shadow(0 13px 10px rgba(0,0,0,.46))
      drop-shadow(0 0 7px rgba(255,70,220,.08))!important;
  }

  /* Dorada: izquierda y ligeramente al frente */
  .promo-real-repo{
    height:244px!important;
    right:31%!important;
    bottom:-3px!important;
    transform:rotate(-5deg)!important;
    z-index:7!important;
  }

  /* Plata: derecha, un poco detrás */
  .promo-real-plata{
    height:238px!important;
    right:0!important;
    bottom:0!important;
    transform:rotate(4deg)!important;
    z-index:6!important;
  }

  /* Quitamos adornos que puedan parecer una tercera línea/objeto */
  .promo-real-bottles::after{
    display:none!important;
  }
}

/* iPhone / teléfonos angostos */
@media (max-width: 390px){

  .promo-card{
    grid-template-columns:minmax(0, 57%) minmax(0, 43%)!important;
    min-height:304px!important;
    height:304px!important;
  }

  .promo-copy{
    min-height:304px!important;
    padding:22px 0 16px 15px!important;
  }

  .promo-real-bottles{
    width:45%!important;
  }

  .promo-real-repo{
    height:225px!important;
    right:29%!important;
    bottom:-2px!important;
    transform:rotate(-5deg)!important;
  }

  .promo-real-plata{
    height:220px!important;
    right:-2%!important;
    bottom:1px!important;
    transform:rotate(4deg)!important;
  }
}

/* Muy angostos: conservamos separación del texto */
@media (max-width: 350px){
  .promo-real-bottles{
    width:43%!important;
  }

  .promo-real-repo{
    height:207px!important;
    right:28%!important;
  }

  .promo-real-plata{
    height:202px!important;
    right:-3%!important;
  }
}

/* =========================================================
   V37 — SUBMENÚS UNIFICADOS + PROMO CENTENARIO MÁS COMPACTA
   Micheladas / Coctelería / Shots / Litros / Especiales /
   Paquetes adoptan proporciones de Cerveza/Botellas.
   ========================================================= */

/* ---------- SUBMENÚS SIMPLES: MISMA LÓGICA DE MATRIZ ---------- */
.uniform-drink-scroll{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.uniform-drink-scroll::-webkit-scrollbar{display:none}

.uniform-drink-table{
  width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}

.uniform-drink-table th,
.uniform-drink-table td{
  vertical-align:middle!important;
}

.uniform-drink-table th:first-child,
.uniform-drink-table td:first-child{
  width:72%!important;
  text-align:left!important;
}

.uniform-drink-table th.price-col,
.uniform-drink-table td.price-col{
  width:28%!important;
  min-width:0!important;
  padding-left:8px!important;
  padding-right:8px!important;
  text-align:center!important;
  white-space:nowrap!important;
}

.uniform-drink-table th{
  font-size:13px!important;
  letter-spacing:.045em!important;
}

.uniform-drink-table td{
  font-size:10px!important;
  line-height:1.35!important;
}

.uniform-drink-table td:first-child{
  font-weight:750!important;
}

.uniform-drink-table td small{
  margin-top:4px!important;
  font-size:8px!important;
  line-height:1.42!important;
}

.uniform-drink-table td.price-col{
  font-family:'Bebas Neue',sans-serif!important;
  font-size:19px!important;
  color:#ffd4fb!important;
}

/* ---------- MÓVIL: MISMO ACOMODO COMPACTO DE CERVEZA/BOTELLAS ---------- */
@media(max-width:620px){
  .uniform-drink-scroll{
    margin:0!important;
    padding:0!important;
  }

  .uniform-drink-table{
    display:table!important;
    width:100%!important;
    max-width:100%!important;
  }

  .uniform-drink-table thead,
  .uniform-drink-table tbody{
    display:table-row-group!important;
  }

  .uniform-drink-table tr{
    display:table-row!important;
  }

  .uniform-drink-table th,
  .uniform-drink-table td{
    display:table-cell!important;
    padding:10px 8px!important;
  }

  .uniform-drink-table th:first-child,
  .uniform-drink-table td:first-child{
    width:72%!important;
  }

  .uniform-drink-table th.price-col,
  .uniform-drink-table td.price-col{
    width:28%!important;
    text-align:center!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }

  .uniform-drink-table th{
    font-size:7px!important;
    line-height:1.15!important;
    white-space:normal!important;
  }

  .uniform-drink-table td{
    font-size:9.5px!important;
  }

  .uniform-drink-table td small{
    font-size:7.4px!important;
    line-height:1.35!important;
  }

  .uniform-drink-table td.price-col{
    font-size:15px!important;
  }

  /* El modal de estas tablas aprovecha el ancho igual que Botellas */
  .drink-modal{
    padding:4px!important;
  }
  .drink-modal-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* ---------- PROMO CENTENARIO: MENOS AIRE ARRIBA ---------- */
  .promo-card{
    grid-template-columns:minmax(0,1fr) 46%!important;
    min-height:276px!important;
    height:276px!important;
    padding:0!important;
  }

  .promo-copy{
    min-height:276px!important;
    padding:14px 0 15px 18px!important;
    justify-content:flex-start!important;
  }

  .promo-copy .promo-badge{
    margin-bottom:8px!important;
  }

  .promo-copy h3{
    margin-top:4px!important;
  }

  .promo-real-bottles{
    height:276px!important;
  }

  .promo-real-bottle{
    height:258px!important;
    bottom:-4px!important;
  }
}

@media(max-width:390px){
  .uniform-drink-table th{
    font-size:6.2px!important;
  }
  .uniform-drink-table td{
    font-size:8.8px!important;
  }
  .uniform-drink-table td.price-col{
    font-size:13px!important;
  }

  .promo-card{
    grid-template-columns:minmax(0,1fr) 47%!important;
    min-height:266px!important;
    height:266px!important;
  }

  .promo-copy{
    min-height:266px!important;
    padding:12px 0 13px 15px!important;
  }

  .promo-real-bottles{
    height:266px!important;
  }

  .promo-real-bottle{
    height:248px!important;
  }
}

/* =========================================================
   V38 — PA' COMER UNIFICADO
   PA' PICAR / PARA TI / PA' COMPARTIR con la misma
   disposición, proporciones y alineación.
   ========================================================= */

#foodHub .food-intro{
  margin:-10px 0 22px!important;
}

#foodHub .food-subgrid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}

#foodHub .food-subcard{
  position:relative!important;
  min-height:150px!important;
  height:150px!important;
  padding:22px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:18px!important;
  overflow:hidden!important;
  border-radius:22px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:
    radial-gradient(circle at 88% 12%,rgba(190,0,239,.12),transparent 32%),
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
    #0b050d!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 18px 45px rgba(0,0,0,.15)!important;
}

#foodHub .food-subcard::before{
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  right:-35px;
  top:-35px;
  border-radius:50%;
  background:var(--purple);
  filter:blur(55px);
  opacity:.08;
  pointer-events:none;
}

#foodHub .food-subcard::after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,var(--pink),rgba(255,255,255,.08),transparent);
  opacity:.35;
}

#foodHub .food-subcard > span{
  position:absolute!important;
  left:22px!important;
  top:20px!important;
  color:var(--pink)!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.18em!important;
}

#foodHub .food-subcard > strong{
  position:static!important;
  display:block!important;
  max-width:75%!important;
  margin:0!important;
  font-family:'Bebas Neue',sans-serif!important;
  font-size:39px!important;
  line-height:.92!important;
  font-weight:400!important;
}

#foodHub .food-subcard > small{
  position:absolute!important;
  left:22px!important;
  right:66px!important;
  bottom:18px!important;
  color:#9f91a5!important;
  font-size:8.5px!important;
  line-height:1.3!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#foodHub .food-subcard > b{
  position:absolute!important;
  right:20px!important;
  bottom:18px!important;
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.035)!important;
  color:#ffd4fb!important;
  font-size:23px!important;
  line-height:1!important;
}

#foodHub .food-subcard:hover{
  transform:translateY(-6px) scale(1.012)!important;
  border-color:rgba(255,90,239,.34)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.32),0 0 42px rgba(178,0,219,.11)!important;
}

@media(max-width:980px){
  #foodHub .food-subgrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:760px){
  #foodHub .food-subgrid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  #foodHub .food-subcard{
    min-height:104px!important;
    height:104px!important;
    padding:18px!important;
    border-radius:16px!important;
  }

  #foodHub .food-subcard > span{
    left:18px!important;
    top:15px!important;
  }

  #foodHub .food-subcard > strong{
    max-width:72%!important;
    font-size:34px!important;
  }

  #foodHub .food-subcard > small{
    left:18px!important;
    right:62px!important;
    bottom:13px!important;
    font-size:8px!important;
  }

  #foodHub .food-subcard > b{
    width:34px!important;
    height:34px!important;
    right:16px!important;
    bottom:13px!important;
    font-size:20px!important;
  }
}

/* ==========================================================
   V39 — UNIFICACIÓN GLOBAL
   PA' TOMAR + PA' COMER + SIN ALCOHOL
   Una sola familia de dimensiones, espacios y componentes.
   ========================================================== */

:root{
  --menu-shell-max: 1180px;
  --menu-card-radius: 20px;
  --menu-card-min-h: 138px;
  --menu-gap: 12px;
  --menu-row-radius: 15px;
  --menu-modal-radius: 24px;
}

/* ---------- TODAS LAS SECCIONES ---------- */
.menu-section{
  width:min(var(--menu-shell-max), calc(100% - 32px)) !important;
  max-width:var(--menu-shell-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.section-head{
  margin-bottom:18px !important;
}
.food-intro{
  margin:-8px 0 18px !important;
}

/* ---------- HUBS / SUBMENÚS PRINCIPALES ----------
   Pa' Tomar y Pa' Comer usan exactamente la misma retícula.
*/
.drink-category-list,
#foodHub .food-subgrid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:var(--menu-gap) !important;
  align-items:stretch !important;
}

/* Misma tarjeta base para Cerveza/Botellas/etc y Pa' Picar/Para Ti/Compartir */
.drink-category,
#foodHub .food-subcard{
  position:relative !important;
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  min-height:var(--menu-card-min-h) !important;
  height:var(--menu-card-min-h) !important;
  padding:20px 20px 18px !important;
  border-radius:var(--menu-card-radius) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  background:
    radial-gradient(circle at 88% 12%,rgba(190,0,239,.12),transparent 32%),
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
    #0b050d !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    0 18px 45px rgba(0,0,0,.15) !important;
  overflow:hidden !important;
}

/* Pa' Tomar */
.drink-category{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:12px !important;
}
.drink-category > div{
  min-width:0 !important;
}
.drink-category .drink-kicker{
  display:block !important;
  margin-bottom:7px !important;
  font-size:8px !important;
  line-height:1 !important;
  letter-spacing:.18em !important;
}
.drink-category h3{
  margin:0 !important;
  font-size:36px !important;
  line-height:.92 !important;
}
.drink-arrow{
  flex:0 0 auto !important;
  width:36px !important;
  height:36px !important;
  margin:0 !important;
}

/* Pa' Comer: forzamos la misma composición sin tocar HTML */
#foodHub .food-subcard{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 36px !important;
  grid-template-rows:auto 1fr auto !important;
  column-gap:12px !important;
  text-align:left !important;
  align-items:end !important;
}
#foodHub .food-subcard::before{
  opacity:.10 !important;
}
#foodHub .food-subcard > span{
  position:static !important;
  grid-column:1 !important;
  grid-row:1 !important;
  align-self:start !important;
  margin:0 !important;
  font-size:8px !important;
  line-height:1 !important;
  letter-spacing:.18em !important;
  color:#8c7d91 !important;
}
#foodHub .food-subcard > strong{
  position:static !important;
  grid-column:1 !important;
  grid-row:3 !important;
  align-self:end !important;
  margin:0 0 21px !important;
  font-family:'Bebas Neue',sans-serif !important;
  font-size:36px !important;
  line-height:.92 !important;
}
#foodHub .food-subcard > small{
  position:absolute !important;
  left:20px !important;
  right:62px !important;
  bottom:16px !important;
  margin:0 !important;
  font-size:8px !important;
  line-height:1.25 !important;
  color:#9f91a5 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#foodHub .food-subcard > b{
  position:static !important;
  grid-column:2 !important;
  grid-row:3 !important;
  align-self:end !important;
  display:grid !important;
  place-items:center !important;
  width:36px !important;
  height:36px !important;
  margin:0 !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.1) !important;
  background:rgba(255,255,255,.035) !important;
  color:var(--pink) !important;
  font-size:18px !important;
  line-height:1 !important;
}

/* ---------- LISTAS DE PRODUCTO ----------
   Pa' Picar / Para Ti / Pa' Compartir / Sin Alcohol.
   Misma anchura, separación, radios, nombre y precio.
*/
#picar .menu-list,
#ti .menu-list,
#compartir .menu-list,
#sin .menu-list,
.food-category-modal .menu-list{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:9px !important;
  width:100% !important;
}

#picar .product-row,
#ti .product-row,
#compartir .product-row,
#sin .product-row,
.food-category-modal .product-row{
  box-sizing:border-box !important;
  width:100% !important;
  min-height:70px !important;
  margin:0 !important;
  padding:13px 14px !important;
  border-radius:var(--menu-row-radius) !important;
  border:1px solid rgba(255,255,255,.075) !important;
  background:
    linear-gradient(110deg,rgba(255,255,255,.055),rgba(255,255,255,.018)) !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:12px !important;
  box-shadow:none !important;
}
#picar .product-name,
#ti .product-name,
#compartir .product-name,
#sin .product-name,
.food-category-modal .product-name{
  margin:0 !important;
  font-size:12px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  color:#f7eff7 !important;
}
#picar .product-desc,
#ti .product-desc,
#compartir .product-desc,
#sin .product-desc,
.food-category-modal .product-desc{
  margin-top:5px !important;
  font-size:8px !important;
  line-height:1.45 !important;
  color:#a99dab !important;
}
#picar .product-price,
#ti .product-price,
#compartir .product-price,
#sin .product-price,
.food-category-modal .product-price{
  min-width:74px !important;
  text-align:center !important;
  font-size:19px !important;
  line-height:1 !important;
  color:#ffd8fa !important;
  white-space:nowrap !important;
}

/* Sin alcohol ahora visualmente pertenece al mismo sistema que comida */
#sin .menu-list{
  margin-top:4px !important;
}

/* ---------- MODALES ----------
   Pa' Tomar y Pa' Comer: mismo contenedor, título, padding y alto.
*/
.drink-modal,
.food-category-modal{
  padding:12px !important;
}
.drink-modal-card,
.food-category-modal .food-category-modal-card{
  box-sizing:border-box !important;
  width:min(720px,100%) !important;
  max-width:720px !important;
  max-height:88vh !important;
  padding:24px 20px 20px !important;
  border-radius:var(--menu-modal-radius) !important;
}
.drink-modal.bottle-mode .drink-modal-card{
  width:min(820px,100%) !important;
  max-width:820px !important;
}
.drink-modal-label,
.food-category-modal .drink-modal-label{
  font-size:8px !important;
  letter-spacing:.18em !important;
}
.drink-modal-title,
.food-category-modal .drink-modal-title{
  margin-top:3px !important;
  font-size:43px !important;
  line-height:.95 !important;
}
.drink-modal-divider,
.food-category-modal .drink-modal-divider{
  margin:14px 0 !important;
}
.drink-modal-text,
.food-category-modal .food-category-modal-text{
  width:100% !important;
  min-width:0 !important;
}
.food-category-modal .food-modal-scroll{
  width:100% !important;
  max-height:62vh !important;
  padding:0 !important;
}

/* ---------- TABLAS DE PA' TOMAR ----------
   Todas las tablas de 2 columnas se comportan igual.
*/
.drink-modal .uniform-drink-scroll{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}
.drink-modal .uniform-drink-table{
  width:100% !important;
  min-width:0 !important;
  table-layout:fixed !important;
  border-spacing:0 9px !important;
}
.drink-modal .uniform-drink-table th:first-child,
.drink-modal .uniform-drink-table td:first-child{
  width:72% !important;
  text-align:left !important;
}
.drink-modal .uniform-drink-table th.price-col,
.drink-modal .uniform-drink-table td.price-col{
  width:28% !important;
  min-width:0 !important;
  text-align:center !important;
}
.drink-modal .uniform-drink-table td{
  min-height:70px !important;
  padding:13px 14px !important;
}
.drink-modal .uniform-drink-table td:first-child{
  font-size:12px !important;
  line-height:1.25 !important;
}
.drink-modal .uniform-drink-table td:first-child small{
  margin-top:5px !important;
  font-size:8px !important;
  line-height:1.45 !important;
}
.drink-modal .uniform-drink-table td.price-col{
  font-size:19px !important;
}

/* Beer/Bottle mantienen sus columnas propias pero comparten acabado */
.drink-modal .beer-price-matrix,
.drink-modal .bottle-table.price-matrix{
  border-spacing:0 9px !important;
}
.drink-modal .beer-price-matrix tbody tr,
.drink-modal .bottle-table.price-matrix tbody tr,
.drink-modal .uniform-drink-table tbody tr{
  border-radius:var(--menu-row-radius) !important;
}

/* Submenú de Botellas: mismas dimensiones entre pestañas */
.bottle-submenu{
  gap:7px !important;
  margin-bottom:12px !important;
}
.bottle-submenu-btn{
  min-height:42px !important;
  border-radius:12px !important;
  padding:8px 10px !important;
}
.bottle-panel-head{
  margin:4px 0 9px !important;
}

/* ---------- MODAL DE DETALLE (comida/sin alcohol) ----------
   Lo acercamos al mismo lenguaje que los otros modales.
*/
.product-modal-card{
  border-radius:var(--menu-modal-radius) !important;
  border:1px solid rgba(255,255,255,.09) !important;
}
.modal-close,
.drink-modal-close{
  width:40px !important;
  height:40px !important;
}

/* ---------- TABLET ---------- */
@media (max-width:980px){
  .drink-category-list,
  #foodHub .food-subgrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* ---------- MÓVIL ---------- */
@media (max-width:620px){
  :root{
    --menu-card-radius:16px;
    --menu-card-min-h:96px;
    --menu-gap:9px;
    --menu-modal-radius:22px;
  }

  .menu-section{
    width:calc(100% - 20px) !important;
    padding-top:30px !important;
  }

  .section-head{
    margin-bottom:13px !important;
  }

  .drink-category-list,
  #foodHub .food-subgrid{
    grid-template-columns:1fr !important;
    gap:var(--menu-gap) !important;
  }

  .drink-category,
  #foodHub .food-subcard{
    min-height:var(--menu-card-min-h) !important;
    height:var(--menu-card-min-h) !important;
    padding:14px 15px !important;
    border-radius:var(--menu-card-radius) !important;
  }

  .drink-category .drink-kicker,
  #foodHub .food-subcard > span{
    font-size:7px !important;
  }

  .drink-category h3,
  #foodHub .food-subcard > strong{
    font-size:31px !important;
  }

  #foodHub .food-subcard > strong{
    margin-bottom:17px !important;
  }

  #foodHub .food-subcard > small{
    left:15px !important;
    right:56px !important;
    bottom:12px !important;
    font-size:7px !important;
  }

  .drink-arrow,
  #foodHub .food-subcard > b{
    width:34px !important;
    height:34px !important;
  }

  #picar .product-row,
  #ti .product-row,
  #compartir .product-row,
  #sin .product-row,
  .food-category-modal .product-row{
    min-height:62px !important;
    padding:11px 11px !important;
    gap:8px !important;
    border-radius:14px !important;
  }

  #picar .product-name,
  #ti .product-name,
  #compartir .product-name,
  #sin .product-name,
  .food-category-modal .product-name{
    font-size:10px !important;
  }

  #picar .product-desc,
  #ti .product-desc,
  #compartir .product-desc,
  #sin .product-desc,
  .food-category-modal .product-desc{
    font-size:7px !important;
  }

  #picar .product-price,
  #ti .product-price,
  #compartir .product-price,
  #sin .product-price,
  .food-category-modal .product-price{
    min-width:62px !important;
    font-size:17px !important;
  }

  .drink-modal,
  .food-category-modal{
    padding:6px !important;
    align-items:flex-end !important;
  }

  .drink-modal-card,
  .food-category-modal .food-category-modal-card,
  .drink-modal.bottle-mode .drink-modal-card{
    width:100% !important;
    max-width:100% !important;
    max-height:91vh !important;
    padding:22px 12px 15px !important;
    border-radius:22px 22px 16px 16px !important;
  }

  .drink-modal-title,
  .food-category-modal .drink-modal-title{
    font-size:37px !important;
  }

  .drink-modal-divider,
  .food-category-modal .drink-modal-divider{
    margin:11px 0 !important;
  }

  .drink-modal .uniform-drink-table{
    border-spacing:0 7px !important;
  }

  .drink-modal .uniform-drink-table td{
    padding:11px 9px !important;
  }

  .drink-modal .uniform-drink-table td:first-child{
    font-size:9.5px !important;
  }

  .drink-modal .uniform-drink-table td:first-child small{
    font-size:7px !important;
  }

  .drink-modal .uniform-drink-table td.price-col{
    font-size:16px !important;
  }

  .bottle-submenu{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .bottle-submenu-btn{
    min-height:38px !important;
    padding:7px 5px !important;
    font-size:7px !important;
  }
}

/* ---------- TELÉFONOS MUY CHICOS ---------- */
@media (max-width:390px){
  .menu-section{
    width:calc(100% - 16px) !important;
  }

  .drink-category,
  #foodHub .food-subcard{
    padding-left:13px !important;
    padding-right:13px !important;
  }

  .drink-category h3,
  #foodHub .food-subcard > strong{
    font-size:29px !important;
  }

  #foodHub .food-subcard > small{
    left:13px !important;
  }

  .drink-modal-card,
  .food-category-modal .food-category-modal-card{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

/* ==========================================================
   V41 — AJUSTES BASADOS EN CAPTURAS
   1) Promo equilibrada
   2) Tarjetas Pa' Comer con textos más arriba
   3) Modal comida uniforme + scroll ligero + anti ghost-click
   ========================================================== */

/* ---------- 1. PROMO CENTENARIO ---------- */
@media (max-width:620px){
  .promo-card{
    align-items:stretch!important;
  }

  .promo-copy{
    /* El contenido estaba visualmente demasiado arriba.
       Conservamos el tamaño del marco y desplazamos sólo el bloque. */
    justify-content:center!important;
    padding-top:24px!important;
    padding-bottom:8px!important;
    transform:translateY(7px)!important;
  }

  .promo-badge{
    margin-bottom:9px!important;
  }

  .promo-kicker{
    margin-bottom:7px!important;
  }

  .promo-copy h3{
    margin-top:0!important;
    margin-bottom:2px!important;
  }

  .promo-price{
    margin-top:7px!important;
  }

  .promo-note{
    margin-top:12px!important;
  }
}

@media (max-width:390px){
  .promo-copy{
    padding-top:21px!important;
    padding-bottom:7px!important;
    transform:translateY(6px)!important;
  }
}

/* ---------- 2. PA' COMER: textos menos pegados abajo ---------- */
@media (max-width:620px){
  #foodHub .food-subcard > strong{
    margin-bottom:27px!important;
  }

  #foodHub .food-subcard > small{
    bottom:19px!important;
  }

  #foodHub .food-subcard > b{
    align-self:center!important;
    transform:translateY(-3px)!important;
  }
}

@media (max-width:390px){
  #foodHub .food-subcard > strong{
    margin-bottom:25px!important;
  }

  #foodHub .food-subcard > small{
    bottom:18px!important;
  }
}

/* ---------- 3. MODAL PA' COMER ----------
   Misma caja para Pa' Picar / Para Ti / Pa' Compartir.
   Las listas largas hacen scroll dentro en vez de hacer crecer el panel.
*/
.food-category-modal{
  overscroll-behavior:contain!important;
  touch-action:manipulation!important;
}

.food-category-modal .food-category-modal-card{
  contain:layout paint!important;
}

.food-category-modal .food-category-modal-text{
  min-height:0!important;
  overflow:hidden!important;
}

.food-category-modal .food-modal-scroll{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  scrollbar-gutter:stable!important;
}

.food-category-modal .product-row{
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  cursor:pointer!important;
}

@media (max-width:720px){
  .food-category-modal .food-category-modal-card{
    /* Altura uniforme: Para Ti ya no se estira distinto por tener más productos */
    height:min(68dvh,610px)!important;
    min-height:min(68dvh,610px)!important;
    max-height:min(68dvh,610px)!important;
    padding:20px 16px 16px!important;
  }

  .food-category-modal .drink-modal-title{
    font-size:40px!important;
    margin-top:3px!important;
  }

  .food-category-modal .drink-modal-divider{
    margin:12px 0!important;
  }

  .food-category-modal .food-modal-scroll{
    padding:0 1px 4px 0!important;
  }

  .food-category-modal .food-modal-scroll .menu-list{
    gap:8px!important;
  }

  .food-category-modal .product-row{
    min-height:70px!important;
    padding:12px 13px!important;
    border-radius:15px!important;
  }

  .food-category-modal .product-name{
    font-size:13px!important;
    line-height:1.18!important;
  }

  .food-category-modal .product-desc{
    margin-top:5px!important;
    font-size:7.5px!important;
    line-height:1.35!important;
  }

  .food-category-modal .product-price{
    min-width:58px!important;
    font-size:20px!important;
  }
}

@media (max-width:390px){
  .food-category-modal .food-category-modal-card{
    height:min(66dvh,570px)!important;
    min-height:min(66dvh,570px)!important;
    max-height:min(66dvh,570px)!important;
    padding:19px 14px 14px!important;
  }

  .food-category-modal .drink-modal-title{
    font-size:37px!important;
  }

  .food-category-modal .product-row{
    min-height:67px!important;
    padding:11px 12px!important;
  }
}

/* V43 — ajuste sencillo: sólo subir un poco el bloque de texto */
@media (max-width:620px){
  #foodHub .food-subcard > strong{
    margin-bottom:32px!important; /* v41 = 27px; sube título ~5px */
  }

  #foodHub .food-subcard > small{
    bottom:24px!important; /* v41 = 19px; sube descripción ~5px */
  }

  #foodHub .food-subcard > b{
    align-self:center!important;
    transform:translateY(-3px)!important;
  }
}

@media (max-width:390px){
  #foodHub .food-subcard > strong{
    margin-bottom:30px!important;
  }

  #foodHub .food-subcard > small{
    bottom:23px!important;
  }
}

/* Los tres paneles de comida comparten EXACTAMENTE la misma caja.
   Para Ti sólo hace scroll por tener más productos. */
.food-category-modal .food-category-modal-card{
  display:flex!important;
  flex-direction:column!important;
}

.food-category-modal .food-category-modal-text{
  flex:1 1 auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
}

.food-category-modal .food-modal-scroll{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}

@media (max-width:720px){
  .food-category-modal .food-category-modal-card{
    width:calc(100% - 24px)!important;
    height:68dvh!important;
    min-height:68dvh!important;
    max-height:68dvh!important;
    margin:0 auto!important;
  }

  /* Mismas filas en los tres submenús */
  .food-category-modal .menu-list{
    gap:8px!important;
  }

  .food-category-modal .product-row{
    box-sizing:border-box!important;
    width:100%!important;
    min-height:76px!important;
    height:76px!important;
    padding:12px 13px!important;
    margin:0!important;
  }
}

@media (max-width:390px){
  .food-category-modal .food-category-modal-card{
    width:calc(100% - 18px)!important;
    height:66dvh!important;
    min-height:66dvh!important;
    max-height:66dvh!important;
  }

  .food-category-modal .product-row{
    min-height:72px!important;
    height:72px!important;
  }
}

/* ==========================================================
   V45 — PA' COMER, GEOMETRÍA FINAL EN TELÉFONO
   Referencia directa: tarjeta CERVEZA.
   Se evita depender de flex/grid heredados.
   ========================================================== */

@media(max-width:760px){

  /* Las tres tarjetas, misma caja exacta */
  body #foodHub .food-subgrid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    width:100%!important;
    align-items:stretch!important;
  }

  body #foodHub .food-subgrid > .food-subcard{
    position:relative!important;
    display:block!important;

    box-sizing:border-box!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;

    height:96px!important;
    min-height:96px!important;
    max-height:96px!important;

    margin:0!important;
    padding:0!important;

    overflow:hidden!important;
    text-align:left!important;

    border-radius:16px!important;
    border:1px solid rgba(255,255,255,.09)!important;
    background:
      radial-gradient(circle at 88% 12%,rgba(190,0,239,.12),transparent 32%),
      linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
      #0b050d!important;
    box-shadow:
      inset 0 1px rgba(255,255,255,.035),
      0 18px 45px rgba(0,0,0,.15)!important;

    transform:none!important;
  }

  /* Línea inferior */
  body #foodHub .food-subgrid > .food-subcard::after{
    content:""!important;
    position:absolute!important;
    left:16px!important;
    right:auto!important;
    bottom:0!important;
    width:74px!important;
    height:2px!important;
    background:var(--pink)!important;
    opacity:.95!important;
  }

  /* 01 / 02 / 03 */
  body #foodHub .food-subgrid > .food-subcard > span{
    position:absolute!important;
    inset:auto!important;
    left:16px!important;
    top:14px!important;

    display:block!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;

    color:#8c7d91!important;
    font-size:7px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.18em!important;

    transform:none!important;
  }

  /* Título:
     la posición ya NO depende de bottom, margin-bottom,
     align-items ni grid-row. Los tres usan el mismo top. */
  body #foodHub .food-subgrid > .food-subcard > strong{
    position:absolute!important;
    inset:auto!important;

    left:16px!important;
    top:38px!important;
    right:62px!important;
    bottom:auto!important;

    display:block!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;

    margin:0!important;
    padding:0!important;

    font-family:'Bebas Neue',sans-serif!important;
    font-size:31px!important;
    line-height:.92!important;
    font-weight:400!important;
    white-space:nowrap!important;

    transform:none!important;
  }

  /* Descripción colocada inmediatamente debajo del título.
     Ya no está anclada al fondo de la tarjeta. */
  body #foodHub .food-subgrid > .food-subcard > small{
    position:absolute!important;
    inset:auto!important;

    left:17px!important;
    top:68px!important;
    right:62px!important;
    bottom:auto!important;

    display:block!important;
    width:auto!important;
    max-width:none!important;
    height:11px!important;

    margin:0!important;
    padding:0!important;

    color:#9f91a5!important;
    font-size:7.5px!important;
    line-height:11px!important;
    font-weight:400!important;

    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;

    transform:none!important;
  }

  /* Flecha igual que Cerveza: centrada en el costado derecho */
  body #foodHub .food-subgrid > .food-subcard > b{
    position:absolute!important;
    inset:auto!important;

    right:15px!important;
    top:50%!important;
    bottom:auto!important;

    display:grid!important;
    place-items:center!important;

    width:34px!important;
    height:34px!important;
    margin:0!important;
    padding:0!important;

    border-radius:50%!important;
    border:1px solid rgba(255,255,255,.10)!important;
    background:rgba(255,255,255,.035)!important;

    color:#ffd4fb!important;
    font-size:20px!important;
    line-height:1!important;

    transform:translateY(-50%)!important;
  }

  body #foodHub .food-subgrid > .food-subcard:hover,
  body #foodHub .food-subgrid > .food-subcard:active{
    transform:none!important;
  }

  /* ========================================================
     MODAL:
     Las tres categorías usan literalmente la misma ventana.
     ======================================================== */
  body .food-category-modal .food-category-modal-card{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;

    width:calc(100% - 24px)!important;
    max-width:620px!important;

    height:68dvh!important;
    min-height:68dvh!important;
    max-height:68dvh!important;

    margin:0 auto!important;
    padding:20px 16px 16px!important;
    overflow:hidden!important;
  }

  body .food-category-modal .food-category-modal-text{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  body .food-category-modal .food-modal-scroll{
    box-sizing:border-box!important;
    flex:1 1 auto!important;

    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    margin:0!important;
    padding:0 1px 4px 0!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-gutter:auto!important;
  }

  /* Las filas son idénticas aunque falte descripción */
  body .food-category-modal .food-modal-scroll .product-row{
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 62px!important;
    align-items:center!important;
    gap:8px!important;

    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;

    height:76px!important;
    min-height:76px!important;
    max-height:76px!important;

    margin:0 0 8px!important;
    padding:11px 13px!important;

    border-radius:15px!important;
  }

  body .food-category-modal .food-modal-scroll .product-row > div:first-child{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;

    min-width:0!important;
    height:42px!important;
  }

  body .food-category-modal .product-name{
    margin:0!important;
    font-size:13px!important;
    line-height:16px!important;
  }

  body .food-category-modal .product-desc{
    box-sizing:border-box!important;
    display:block!important;

    height:11px!important;
    min-height:11px!important;
    max-height:11px!important;

    margin:4px 0 0!important;

    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;

    font-size:7.5px!important;
    line-height:11px!important;
  }

  body .food-category-modal .product-desc-placeholder{
    visibility:hidden!important;
  }

  body .food-category-modal .product-price{
    width:62px!important;
    min-width:62px!important;
    max-width:62px!important;

    margin:0!important;
    text-align:center!important;

    font-size:20px!important;
    line-height:1!important;
  }
}

@media(max-width:390px){
  body #foodHub .food-subgrid > .food-subcard{
    height:94px!important;
    min-height:94px!important;
    max-height:94px!important;
  }

  body #foodHub .food-subgrid > .food-subcard > strong{
    left:14px!important;
    top:37px!important;
    right:58px!important;
    font-size:30px!important;
  }

  body #foodHub .food-subgrid > .food-subcard > span{
    left:14px!important;
  }

  body #foodHub .food-subgrid > .food-subcard > small{
    left:15px!important;
    top:67px!important;
    right:58px!important;
  }

  body #foodHub .food-subgrid > .food-subcard > b{
    right:13px!important;
    width:32px!important;
    height:32px!important;
  }

  body .food-category-modal .food-category-modal-card{
    width:calc(100% - 18px)!important;
    height:66dvh!important;
    min-height:66dvh!important;
    max-height:66dvh!important;
    padding:19px 13px 13px!important;
  }

  body .food-category-modal .food-modal-scroll .product-row{
    grid-template-columns:minmax(0,1fr) 58px!important;
    height:72px!important;
    min-height:72px!important;
    max-height:72px!important;
    padding:10px 11px!important;
  }

  body .food-category-modal .product-price{
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    font-size:19px!important;
  }
}

.promo-card.promo-card-image-only{
  padding:0!important;
  overflow:hidden!important;
  display:block!important;
  aspect-ratio:1200 / 980!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  background:#12000f!important;
}
.promo-card.promo-card-image-only::before,
.promo-card.promo-card-image-only::after{display:none!important;content:none!important;}
.promo-card.promo-card-image-only .promo-full-image{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:inherit!important;
}

@media(max-width:720px){
  header .header-inner,
  header .header-logo,
  header .social-link{
    transition:height .22s ease,min-height .22s ease,width .22s ease,opacity .22s ease,padding .22s ease,background .22s ease;
  }
  header.is-scrolled{
    box-shadow:0 10px 28px rgba(0,0,0,.44),0 1px 0 rgba(255,63,229,.08)!important;
  }
  header.is-scrolled .header-logo{
    width:112px!important;
  }
  header.is-scrolled .social-link{
    width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important;
  }
}


/* ===== MOBILE BOTTOM MENU NAV ===== */
.mobile-bottom-nav{
  display:none;
}
@media (max-width:720px){
  body.menu-route-active main{
    padding-bottom:calc(106px + env(safe-area-inset-bottom))!important;
  }
  body.menu-route-active footer{
    padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;
  }
  .mobile-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1600;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    padding:8px 7px calc(8px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(8,2,9,.82),rgba(8,2,9,.98) 35%);
    border-top:1px solid rgba(255,255,255,.10);
    box-shadow:0 -12px 36px rgba(0,0,0,.42);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    transform:translateY(115%);
    opacity:0;
    pointer-events:none;
    transition:transform .28s ease,opacity .22s ease;
  }
  body.menu-route-active .mobile-bottom-nav{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .mobile-nav-item{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    color:#7f7482;
    min-width:0;
    min-height:58px;
    padding:5px 2px 3px;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    font:inherit;
    cursor:pointer;
    touch-action:manipulation;
    position:relative;
  }
  .mobile-nav-item::before{
    content:"";
    position:absolute;
    top:-8px;
    left:22%;
    right:22%;
    height:2px;
    border-radius:99px;
    background:var(--pink);
    box-shadow:0 0 12px rgba(255,77,232,.75);
    opacity:0;
    transform:scaleX(.35);
    transition:.2s ease;
  }
  .mobile-nav-item svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .18s ease,color .18s ease,filter .18s ease;
  }
  .mobile-nav-item span{
    display:block;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:7.5px;
    font-weight:900;
    letter-spacing:.06em;
    line-height:1;
  }
  .mobile-nav-item.active{
    color:var(--pink2,#ff64e8);
    background:linear-gradient(180deg,rgba(255,72,225,.07),transparent);
  }
  .mobile-nav-item.active::before{opacity:1;transform:scaleX(1)}
  .mobile-nav-item.active svg{
    transform:translateY(-1px);
    filter:drop-shadow(0 0 7px rgba(255,77,232,.55));
  }
  .mobile-nav-item:active{transform:scale(.96)}
}
@media (min-width:721px){
  .mobile-bottom-nav{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .mobile-bottom-nav,.mobile-nav-item,.mobile-nav-item::before,.mobile-nav-item svg{transition:none!important}
}

/* ===== ICONO TARRO DE CERVEZA — PA' TOMAR ===== */
@media (max-width:720px){
  .mobile-nav-item .beer-mug-icon{
    width:25px!important;
    height:25px!important;
    stroke-width:1.7!important;
  }

  .mobile-nav-item.active .beer-mug-icon{
    filter:
      drop-shadow(0 0 4px rgba(255,77,232,.65))
      drop-shadow(0 0 8px rgba(255,77,232,.30))!important;
  }
}

/* Fondo definitivo de la pantalla principal. Conserva textos y botones existentes. */
#welcomeScreen.welcome-screen{
  background:#050106 url("fondo-portada-kprichosa.png") center center / cover no-repeat !important;
  isolation:isolate;
}
#welcomeScreen.welcome-screen::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  opacity:1 !important;
  background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.22) 42%,rgba(0,0,0,.48) 100%) !important;
  mask-image:none !important;
}
#welcomeScreen.welcome-screen::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  transform:none !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:radial-gradient(ellipse at 50% 58%,rgba(0,0,0,.06),rgba(0,0,0,.30) 78%,rgba(0,0,0,.44) 100%) !important;
  filter:none !important;
}
#welcomeScreen .welcome-orb{display:none !important;}
@media(max-width:720px){
  #welcomeScreen.welcome-screen{
    background-position:center top !important;
    background-size:cover !important;
  }
}

/* ===== CORRECCIÓN PORTADA + CONTORNO BRONCE MENÚ ===== */
/* La ruta parte desde /styles/, por eso subimos un nivel hacia la imagen. */
#welcomeScreen.welcome-screen{
  background-image:url("../fondo-portada-kprichosa.png") !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

#welcomeScreen .welcome-menu-neon{
  /* Letras blancas + halo neón oro amarillo alrededor */
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  -webkit-text-stroke:0 !important;
  text-shadow:
    0 0 2px #ffffff,
    0 0 5px #f3c34f,
    0 0 10px rgba(243,195,79,.95),
    0 0 18px rgba(243,195,79,.72),
    0 0 30px rgba(243,195,79,.42) !important;
}

/* =========================================================
   FIX MOBILE: evita flash/rectángulo blanco en logo del loader
   ========================================================= */
.loader-box,
.loader-logo,
.loader-box img{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

.loader-logo{
  /* Evita artefactos de composición de PNG transparente en móviles */
  filter:none!important;
  -webkit-filter:none!important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translate3d(0,24px,0) scale(.92);
  -webkit-transform:translate3d(0,24px,0) scale(.92);
  will-change:opacity,transform;
  animation:loaderLogoSafe 1s .06s cubic-bezier(.16,.9,.22,1) forwards!important;
}

@keyframes loaderLogoSafe{
  0%{
    opacity:0;
    transform:translate3d(0,24px,0) scale(.92);
  }
  55%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1.015);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}

/* La salida del loader se hace sin filtros sobre el PNG */
.loader.hide .loader-logo{
  opacity:0!important;
  filter:none!important;
  -webkit-filter:none!important;
  transition:opacity .22s ease!important;
}

@media (max-width:720px){
  .loader-logo{
    image-rendering:auto;
    -webkit-transform:translate3d(0,24px,0) scale(.92);
  }
}