/* Carta viva: el inicio de la tienda con el comal (antojitos) y la barra de bebidas.
   Fondo negro rojizo mate, papel picado, piezas que se voltean y bebidas que se sirven.
   Lo de la carta lleva el prefijo cv- para no chocar con los estilos de la tienda. */
.cv,.cv-detalle,.cv-aviso,.pedido-vivo,.view--home,.lista-sheet{
  --cv-fondo:#160a08;--cv-fondo2:#3d1611;--cv-rojo:#c0392b;--cv-negro:#151210;--cv-papel:#f6f1e7;
  --cv-texto:#efe9dc;--cv-tenue:#c7b3a9;--cv-madera:#c9a06a;
  --cv-rotulo:"Alfa Slab One",Rockwell,"Roboto Slab",Georgia,serif;
  --cv-curva:cubic-bezier(.2,.8,.2,1);
}

/* ---------- inicio: presentación con fondo negro rojizo ---------- */
.view--home{background:radial-gradient(120% 55% at 50% 0%,var(--cv-fondo2) 0%,transparent 70%),var(--cv-fondo);color:var(--cv-texto)}
.home.home--vivo{min-height:0;background:transparent;overflow:clip}
.cv:has(.arma){overflow:clip}
.home.home--vivo::after,.home--vivo .home__garden{display:none}
@media (max-width:600px){.header .logo__name{display:none}}
.home--vivo .home__inner{display:block;max-width:880px;margin:0 auto;padding:30px 16px 4px;text-align:center}
.home--vivo .home__copy{align-items:center}
.home--vivo .home__kicker{color:var(--cv-tenue);letter-spacing:.14em;text-transform:uppercase;font-size:.82rem}
.home--vivo .home__kicker::before{display:none}
.home--vivo .home__title{font-family:var(--cv-rotulo);font-weight:400;color:var(--cv-papel);line-height:1.05;font-size:clamp(34px,6.4vw,58px);text-wrap:balance}
.home--vivo .home__title span{color:var(--cv-rojo);text-shadow:0 1px 0 rgba(0,0,0,.4)}
.home__ubicacion{display:inline-flex;align-items:center;gap:6px;color:var(--cv-tenue);text-decoration:none;font-size:.95rem;font-weight:500}
.home__ubicacion svg{width:16px;height:16px;color:var(--cv-rojo)}
.home__ubicacion:hover{color:var(--cv-papel)}

/* abierto / cerrado junto a "Ver la carta" */
.header .estado-tienda{padding:5px 10px;gap:6px;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;backdrop-filter:none}
.header .estado-tienda .status-dot{width:8px;height:8px}
@media (max-width:420px){
  .header .header__nav{gap:4px}
  .header .btn-track-pedido{padding:6px 7px!important;font-size:.56rem;letter-spacing:.02em}
  .header .estado-tienda{padding:4px 7px;gap:5px;font-size:.56rem;letter-spacing:.02em}
}
@media (max-width:380px){
  .header .header__inner{gap:6px;padding-inline:8px}
  .header .header__nav{flex-shrink:1}
  .header .btn-track-pedido{white-space:normal;text-align:center}
}

/* redes: un botón flotante arriba de Bruno que las despliega */
.redes{position:fixed;right:13px;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:899;display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:bottom .3s var(--ease-out,ease)}
body:has(.cart-bar.show) .redes{bottom:calc(138px + env(safe-area-inset-bottom,0px))}
body:has(.cart-bar.show):not(.en-pedir) .asis-fab{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
body.hoja-abierta .redes,body:has(.modal-overlay.show) .redes,body:has(.modal-overlay.show) .asis-fab,body:has(.cv-detalle:not([hidden])) .redes{display:none}
.redes__btn{all:unset;box-sizing:border-box;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(22,10,8,.88);border:1.5px solid rgba(239,233,220,.45);color:#f6f1e7;box-shadow:0 8px 22px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .3s,background .2s,border-color .2s}
.redes__btn svg{width:20px;height:20px}
.redes.is-open .redes__btn{background:#c0392b;border-color:#c0392b;transform:rotate(90deg)}
.redes__btn:focus-visible{outline:3px solid #f6f1e7;outline-offset:3px}
.redes__lista{display:flex;flex-direction:column;gap:10px}
.redes__lista[hidden]{display:none}
.redes__lista .soc{width:44px;height:44px;animation:redes-in .3s cubic-bezier(.34,1.56,.64,1) backwards}
.redes__lista .soc:nth-last-child(1){animation-delay:0s}
.redes__lista .soc:nth-last-child(2){animation-delay:.05s}
.redes__lista .soc:nth-last-child(3){animation-delay:.1s}
@keyframes redes-in{from{opacity:0;transform:translateY(16px) scale(.6)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.redes__lista .soc{animation:none}.redes__btn{transition:none}}

/* ¿No sabes qué pedir? — botón de estrella y su cuadro */
.redes .top-btn[hidden]{display:none}
.top-btn{color:#f4c430;border-color:rgba(244,196,48,.6)}
.top-btn.is-open{background:#c0392b;border-color:#c0392b;color:#fff}
.top-btn.llama{animation:top-llama 1s cubic-bezier(.3,1.5,.5,1) 2}
@keyframes top-llama{30%{transform:scale(1.18) rotate(-12deg)}60%{transform:scale(.95) rotate(8deg)}}
.top-card{position:fixed;right:68px;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:899;width:min(320px,calc(100vw - 84px));
  padding:14px 14px 10px;border-radius:16px;color:#efe9dc;font-family:Inter,system-ui,sans-serif;
  background:radial-gradient(120% 60% at 50% 0%,#3d1611 0%,transparent 75%),#160a08;border:1.5px solid rgba(192,57,43,.55);
  box-shadow:0 18px 40px -10px rgba(0,0,0,.8);transform-origin:100% 100%;animation:top-entra .35s cubic-bezier(.3,1.3,.5,1)}
.top-card[hidden]{display:none}
@keyframes top-entra{from{opacity:0;transform:translateY(10px) scale(.9)}}
body:has(.cart-bar.show) .top-card{bottom:calc(138px + env(safe-area-inset-bottom,0px))}
body.hoja-abierta .top-card,body:has(.modal-overlay.show) .top-card,body:has(.cv-detalle:not([hidden])) .top-card{display:none}
.top-card h3{margin:0 26px 0 0;font:400 1.25rem/1.1 "Alfa Slab One",Rockwell,Georgia,serif;color:#f6f1e7}
.top-card h3 span{color:#e2574a}
.top-card > p{margin:3px 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#93c06f}
.top-card__cerrar{all:unset;cursor:pointer;position:absolute;top:8px;right:10px;width:30px;height:30px;border-radius:50%;text-align:center;line-height:28px;font-size:1.2rem;color:#efe9dc;background:rgba(255,255,255,.08)}
.top-card__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:min(52vh,360px);overflow-y:auto}
.top-card__lista li{animation:top-fila .4s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i) * 55ms + 120ms)}
@keyframes top-fila{from{opacity:0;transform:translateX(12px)}}
.top-card__lista button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:20px 40px minmax(0,1fr) auto;align-items:center;gap:8px;
  padding:5px 6px;border-radius:12px;transition:background .2s}
.top-card__lista button:hover,.top-card__lista button:focus-visible{background:rgba(239,233,220,.08);outline:none}
.top-n{font:400 1.1rem/1 "Alfa Slab One",Georgia,serif;color:#e2574a;text-align:center}
.top-foto{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#2a1714;box-shadow:0 0 0 2px #f6f1e7;font-size:1.1rem}
.top-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.top-nom{min-width:0;font-size:.86rem;font-weight:600;line-height:1.2}
.top-nom small{display:block;margin-top:2px;font-size:.72rem;font-weight:700;color:#ff8a7d}
.top-pre{font-weight:800;font-size:.9rem;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.top-card,.top-card__lista li,.top-btn.llama{animation:none}}

/* comer aquí o para llevar */
.pedido-vivo{padding-top:14px}
.pedido-vivo .closed-banner{max-width:640px;margin:0 auto 12px;border-radius:12px}
.donde{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px;margin:0 auto;padding:0 16px}
.donde__op{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;text-align:left;
  padding:12px 14px;border-radius:14px;border:1.5px solid rgba(239,233,220,.22);background:rgba(239,233,220,.05);color:var(--cv-texto);transition:border-color .2s,background .2s,box-shadow .2s}
.donde__op svg{grid-row:span 2;width:26px;height:26px;color:var(--cv-papel)}
.donde__op strong{font-size:1rem}
.donde__op small{font-size:.78rem;color:var(--cv-tenue)}
.donde__op[aria-checked="true"]{border-color:var(--cv-rojo);background:rgba(192,57,43,.2);box-shadow:0 0 0 1px var(--cv-rojo)}
.donde__op:disabled{opacity:.4;cursor:not-allowed}
.donde__op:focus-visible{outline:3px solid var(--cv-papel);outline-offset:2px}
.donde__info:empty{display:none}
.donde__info{text-align:center;max-width:52ch;margin:10px auto 0;padding:0 16px;font-size:.88rem;line-height:1.45;color:var(--cv-tenue)}

/* la carta (lista con precios) en su hoja, con el mismo fondo */
.sheet__panel.lista-sheet{min-height:0;background:radial-gradient(120% 40% at 50% 0%,var(--cv-fondo2) 0%,transparent 70%),var(--cv-fondo)}
.lista-sheet .sheet__grip{background:rgba(255,255,255,.25)}
.lista-sheet .lista-sheet__head{justify-content:flex-end;border-bottom:0;padding:4px 10px 6px}
.lista-sheet__titulo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lista-sheet .sheet__close{background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(255,255,255,.35)}
.lista-sheet #cartaHint{margin:0 16px 8px}
.lista-sheet #cartaHint:empty{display:none}

/* ---------- la carta informativa: el formato del menú que manda Bruno ---------- */
.cm{--cm-rojo:#d7202c;--cm-verde:#33572a;--cm-verde2:#4a7639;--cm-crema:#f1e6cc;--cm-pad:clamp(12px,3vw,34px);
  position:relative;margin:0 10px 18px;padding-top:28px;color:var(--cm-crema);border-radius:4px;overflow:hidden;
  background:radial-gradient(70% 40% at 50% 26%,#2a1d17 0%,#0b0908 70%);
  border:2px solid var(--cm-rojo);box-shadow:inset 0 0 0 8px #0b0908,inset 0 0 0 9px rgba(215,32,44,.7)}
.cm::before,.cm::after{content:"";position:absolute;top:20px;width:40px;height:40px;border:2px solid var(--cm-crema)}
.cm::before{left:20px;border-right:0;border-bottom:0}
.cm::after{right:20px;border-left:0;border-bottom:0}
.cm-cab{text-align:center;padding:0 var(--cm-pad)}
.cm-cab p{margin:0;font:700 clamp(22px,4.4vw,44px)/1 "Cormorant Garamond",Georgia,serif;letter-spacing:.05em;text-transform:uppercase}
.cm-cab h2{margin:0;font:700 clamp(46px,10vw,100px)/.95 "Cormorant Garamond",Georgia,serif;letter-spacing:.01em;text-transform:uppercase;color:var(--cm-crema)}
.cm-medallon{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 6px}
.cm-medallon img{width:clamp(84px,14vw,130px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.cm-medallon span{position:relative;flex:1;max-width:240px;height:2px;background:linear-gradient(90deg,var(--cm-rojo),var(--cm-crema))}
.cm-medallon span:last-child{background:linear-gradient(90deg,var(--cm-crema),var(--cm-rojo))}
.cm-medallon span::after{content:"";position:absolute;top:-4px;width:9px;height:9px;background:var(--cm-rojo);transform:rotate(45deg)}
.cm-medallon span:first-child::after{left:-4px}
.cm-medallon span:last-child::after{right:-4px}
.cm-menu{display:flex;justify-content:center;margin:4px 0 18px}
.cm-menu span{padding:4px 46px;font:700 clamp(26px,4vw,40px)/1.15 "Cormorant Garamond",Georgia,serif;text-transform:uppercase;letter-spacing:.06em;
  background:linear-gradient(var(--cm-verde2),var(--cm-verde));clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%)}
.cm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0 var(--cm-pad)}
.cm-panel{position:relative;min-width:0;padding:0 14px 12px;border:1.5px solid var(--cm-rojo);border-radius:8px;background:rgba(11,9,8,.72)}
.cm-ancho{grid-column:1/-1}
.cm-cinta{margin:10px -6px 8px;padding:7px clamp(60px,9vw,90px) 7px 26px;font:700 clamp(19px,2.6vw,30px)/1.1 "Cormorant Garamond",Georgia,serif;
  text-transform:uppercase;letter-spacing:.05em;color:var(--cm-crema);
  background:linear-gradient(var(--cm-verde2),var(--cm-verde));clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%)}
.cm-cinta small{font-size:.55em;letter-spacing:.04em;white-space:nowrap}
.cm-cinta.roja{padding:6px 20px;text-align:center;background:var(--cm-rojo);font-size:clamp(28px,4.4vw,48px)}
.cm-dos .cm-cinta{text-align:center;padding-right:26px}
.cm-foto{position:absolute;top:0;right:4px;z-index:1;width:clamp(56px,8vw,84px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:3px solid var(--cm-rojo);box-shadow:0 6px 14px rgba(0,0,0,.6);background:#1a1310}
.cm-foto img{width:100%;height:100%;object-fit:cover;display:block}
.cm-lista{list-style:none;margin:0;padding:0}
.cm-dos .cm-lista{columns:2;column-gap:28px;column-rule:1px solid rgba(241,230,204,.15)}
.cm-r{display:flex;align-items:baseline;gap:6px;padding:2px 0;break-inside:avoid;
  font:500 clamp(15px,1.9vw,20px)/1.3 Oswald,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.02em}
.cm-r::before{content:"★";flex:0 0 auto;color:var(--cm-rojo);font-size:.8em}
.cm-n{min-width:0}
.cm-n em{margin-left:6px;font-style:normal;font-size:.62em;color:#93c06f}
.cm-r i{flex:1;min-width:10px;border-bottom:2px dotted rgba(241,230,204,.3);transform:translateY(-5px)}
.cm-r b{font:700 clamp(17px,2.2vw,24px)/1 Oswald,"Arial Narrow",sans-serif;white-space:nowrap}
.cm-r .like-btn{flex:0 0 auto;align-self:center;min-width:0;min-height:26px;margin-left:6px;padding:0 7px;gap:3px;font:600 11px/1 Inter,system-ui,sans-serif;
  text-transform:none;color:#d9d2c6;border-color:rgba(241,230,204,.25);background:transparent}
.cm-r .like-btn svg{width:12px;height:12px}
.cm-r .like-btn.liked{color:#ff8a7d;border-color:rgba(224,87,74,.65);background:rgba(192,57,43,.22)}
.cm-r.agotado,.cm-r.tenue{opacity:.45}
.cm-r.agotado b{font-size:.8em}
.cm-pozole{display:flex;align-items:center;gap:14px}
.cm-foto.grande{position:static;flex:0 0 auto;width:clamp(78px,14vw,150px)}
.cm-pozole__precios{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));text-align:center}
.cm-poz{display:flex;flex-direction:column;gap:4px;padding:4px 6px}
.cm-poz + .cm-poz{border-left:1px solid rgba(241,230,204,.2)}
.cm-poz span{font:500 clamp(13px,1.8vw,22px)/1.2 Oswald,sans-serif}
.cm-poz b{font:700 clamp(28px,5vw,58px)/1 Oswald,sans-serif}
.cm-poz.agotado{opacity:.45}
.cm-pie{display:flex;flex-direction:column;gap:4px;margin-top:22px;padding:12px 16px 14px;text-align:center;font-family:Oswald,"Arial Narrow",sans-serif;font-weight:500;
  background:var(--cm-verde);border-top:2px solid var(--cm-rojo)}
.cm-pie strong{font-weight:500;font-size:clamp(16px,2.4vw,28px)}
.cm-pie span{font-size:clamp(12px,1.6vw,17px)}
@media (max-width:640px){
  .cm{margin:0 6px 14px}
  .cm-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .cm-dos .cm-lista{columns:1}
  .cm::before,.cm::after{width:26px;height:26px;top:14px}
  .cm::before{left:14px}.cm::after{right:14px}
}
.sheet.is-open .cm-panel{animation:cm-entra .5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--k,0) * 70ms + 150ms)}
.sheet.is-open .cm-medallon img{animation:cm-medallon .8s cubic-bezier(.3,1.4,.5,1) backwards .1s}
@keyframes cm-entra{from{opacity:0;transform:translateY(16px)}}
@keyframes cm-medallon{from{opacity:0;transform:scale(.6) rotate(-10deg)}}
@media (prefers-reduced-motion:reduce){.sheet.is-open .cm-panel,.sheet.is-open .cm-medallon img{animation:none}}

/* ---------- contenedor de la carta viva ---------- */
.cv{position:relative;max-width:1040px;margin:14px auto 28px;overflow:hidden;color:var(--cv-texto);padding-bottom:22px}
.cv [hidden]{display:none!important}

/* papel picado */
.cv-picado{position:relative;height:74px;overflow:hidden}
.cv-picado::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:#d9cfb8;opacity:.7}
.cv-picado-fila{display:flex;gap:5px;position:absolute;top:8px;left:50%;width:max-content;transform:translateX(-50%)}
.cv-bandera{display:block;flex:0 0 auto;transform-origin:50% 0;animation:cv-ondear 4.5s ease-in-out infinite;animation-delay:calc(var(--k) * -.37s)}
.cv-bandera svg{display:block;width:44px;height:58px;filter:drop-shadow(0 5px 5px rgba(0,0,0,.35))}
@keyframes cv-ondear{0%,100%{transform:rotateX(0) rotate(0)}40%{transform:rotateX(18deg) rotate(.8deg)}70%{transform:rotateX(6deg) rotate(-.6deg)}}

.cv-vistas{display:flex;gap:4px;width:max-content;margin:2px auto 0;padding:4px;border-radius:999px;background:rgba(239,233,220,.08)}
.cv-vistas button{all:unset;cursor:pointer;padding:7px 18px;border-radius:999px;font-weight:700;font-size:.88rem;color:var(--cv-tenue);transition:background .25s,color .25s}
.cv-vistas button[aria-pressed="true"]{background:var(--cv-papel);color:var(--cv-negro)}
.cv-vistas button:focus-visible{outline:3px solid var(--cv-papel);outline-offset:2px}

/* contador en piezas y botellas */
.cv-cuenta{position:absolute;z-index:9;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--cv-rojo);color:#fff;
  font:700 12px/22px Inter,system-ui,sans-serif;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.5);pointer-events:none}
.cv-agotado{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-10deg);padding:3px 8px;border-radius:4px;
  background:var(--cv-negro);color:var(--cv-papel);font:700 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.04em;white-space:nowrap;pointer-events:none}

/* ---------- comal ---------- */
.cv-cocina{--comal:min(80vw,440px);margin-top:36px;padding-bottom:30px}
.cv-estufa{position:relative;width:var(--comal);margin:0 auto}
.cv-comal{position:relative;width:100%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 42% 38%,#3d3a37 0%,#262321 42%,#161413 72%);
  box-shadow:0 0 0 9px #1d1b19,0 0 0 11px #34302c,0 40px 70px -18px rgba(0,0,0,.85),0 30px 90px -10px rgba(226,87,74,.3)}
.cv-brasa{position:absolute;left:50%;top:50%;width:34%;height:34%;margin:-17% 0 0 -17%;border-radius:50%;
  background:radial-gradient(circle,rgba(232,98,60,.3),rgba(232,98,60,0) 70%);animation:cv-brasa 3.2s ease-in-out infinite}
@keyframes cv-brasa{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
.cv-pieza{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;width:28%;aspect-ratio:1;margin:-14% 0 0 -14%;border-radius:50%}
.cv-pieza .cv-cuenta{right:2%;top:2%}
.cv-voltea{position:absolute;inset:0;transform:perspective(700px) rotateY(0);transform-style:preserve-3d;transition:transform .75s var(--cv-curva)}
.cv-pieza.activa .cv-voltea{transform:perspective(700px) rotateY(180deg)}
.cv-cruda,.cv-cocida{position:absolute;inset:0;border-radius:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.cv-cruda{display:grid;place-items:center;text-align:center;overflow:hidden;box-shadow:inset 0 -6px 12px rgba(0,0,0,.25),0 10px 16px -6px rgba(0,0,0,.7);
  background:
    radial-gradient(circle at 28% 34%,var(--tostado) 0 5%,transparent 6%),
    radial-gradient(circle at 66% 62%,var(--tostado) 0 4%,transparent 5%),
    radial-gradient(circle at 58% 24%,var(--tostado) 0 3%,transparent 4%),
    radial-gradient(circle at 36% 72%,var(--tostado) 0 3.5%,transparent 4.5%),
    radial-gradient(circle at 50% 48%,var(--masa-1),var(--masa-2) 72%,var(--masa-3))}
.cv-cruda b{font-family:var(--cv-rotulo);font-weight:400;font-size:calc(var(--comal) * .042);line-height:1.05;color:var(--masa-tinta);padding:0 10%}
.cv-cocida{transform:rotateY(180deg);box-shadow:0 0 0 4px var(--cv-papel),0 14px 20px -6px rgba(0,0,0,.8)}
.cv-cocida img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.cv-cocida small{position:absolute;left:50%;bottom:-7%;transform:translateX(-50%);white-space:nowrap;background:var(--cv-negro);color:var(--cv-papel);
  font:700 12px/1.4 Inter,system-ui,sans-serif;padding:2px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.cv-masa-azul{--masa-1:#7a7c9c;--masa-2:#585b7b;--masa-3:#3f4160;--tostado:rgba(25,20,30,.45);--masa-tinta:var(--cv-papel)}
.cv-masa-amarilla{--masa-1:#efd59c;--masa-2:#dcb877;--masa-3:#c39957;--tostado:rgba(92,55,22,.38);--masa-tinta:#3a2414}
.cv-masa-naranja{--masa-1:#e58a4c;--masa-2:#c7612c;--masa-3:#9f461c;--tostado:rgba(70,25,8,.4);--masa-tinta:#fff3e6}
.cv-pieza:focus-visible .cv-voltea,.cv-olla:focus-visible .cv-olla-boca{outline:3px solid var(--cv-papel);outline-offset:5px;border-radius:50%}

.cv-olla{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;width:36%;aspect-ratio:1;right:-31%;bottom:-2%}
.cv-olla .cv-cuenta{right:4%;top:4%}
.cv-olla-boca{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:calc(var(--comal) * .026) solid #a9512b;
  box-shadow:0 0 0 3px #6f3318,0 24px 34px -12px rgba(0,0,0,.8);transition:transform .5s var(--cv-curva),box-shadow .5s}
.cv-olla-boca img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.45)}
.cv-olla.activa .cv-olla-boca{transform:translateY(-4%) scale(1.05);box-shadow:0 0 0 3px #6f3318,0 0 0 9px rgba(239,233,220,.22),0 30px 40px -12px rgba(0,0,0,.85)}
.cv-etiqueta{position:absolute;z-index:6;white-space:nowrap;pointer-events:none;background:var(--cv-negro);color:var(--cv-papel);
  font:700 11px/1.3 Inter,system-ui,sans-serif;letter-spacing:.04em;padding:3px 7px;border-radius:3px;box-shadow:0 3px 6px rgba(0,0,0,.4)}
.cv-etiqueta.roja{background:var(--cv-rojo)}
.cv-olla .cv-etiqueta{bottom:-10%;left:50%;transform:translateX(-50%) rotate(-4deg)}
@media (max-width:640px){
  .cv-cocina{--comal:min(76vw,440px);padding-bottom:76px}
  .cv-olla{width:34%;right:-12%;bottom:-17%}
}

/* vapor */
.cv-vapor{position:absolute;left:50%;bottom:60%;width:70%;height:90%;margin-left:-35%;pointer-events:none;z-index:3}
.cv-vapor i{position:absolute;bottom:0;width:34%;height:50%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.42),rgba(255,255,255,0) 70%);filter:blur(5px);opacity:0}
.cv-vapor i:nth-child(1){left:8%}.cv-vapor i:nth-child(2){left:34%}.cv-vapor i:nth-child(3){left:60%}
.cv-pieza.activa .cv-vapor i,.cv-olla .cv-vapor i,.cv-olla-acero .cv-vapor i,.cv-vapor.siempre i{animation:cv-vapor 2.4s ease-out infinite}
.cv-pieza.activa .cv-vapor i:nth-child(2),.cv-olla .cv-vapor i:nth-child(2),.cv-olla-acero .cv-vapor i:nth-child(2),.cv-vapor.siempre i:nth-child(2){animation-delay:.8s}
.cv-pieza.activa .cv-vapor i:nth-child(3),.cv-olla .cv-vapor i:nth-child(3),.cv-olla-acero .cv-vapor i:nth-child(3),.cv-vapor.siempre i:nth-child(3){animation-delay:1.6s}
@keyframes cv-vapor{0%{transform:translateY(20%) scale(.6);opacity:0}30%{opacity:.85}100%{transform:translateY(-110%) translateX(12%) scale(1.5);opacity:0}}

/* ---------- bebidas: escena de frente ---------- */
.cv-bebidas{margin-top:24px}
.cv-barra-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:4px 16px 8px}
.cv-barra-scroll::-webkit-scrollbar{display:none}
.cv-barra{position:relative;width:min(980px,100%);min-width:720px;margin:0 auto;aspect-ratio:100/60;container-type:inline-size;
  border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.85)}
.cv-hiedra{position:absolute;inset:0;width:100%;height:100%;display:block}
.cv-pared-roja{position:absolute;left:0;top:0;bottom:0;width:5%;background:linear-gradient(90deg,#7e2117,#a8342a 60%,#8b2a20);box-shadow:inset -.6cqw 0 1cqw rgba(0,0,0,.35)}
.cv-piso{position:absolute;left:0;right:0;bottom:0;height:6%;background:linear-gradient(#3b3532,#1d1917)}
.cv-barra .cv-etiqueta{font-size:1.15cqw}

.cv-refri{position:absolute;left:6.5%;width:25%;top:4%;bottom:6%;border-radius:1.2cqw 1.2cqw .4cqw .4cqw;padding:1cqw;
  background:linear-gradient(90deg,#7d8388,#d6dadd 28%,#a3a8ac 58%,#cdd1d4 85%,#8a9095);box-shadow:0 2cqw 3cqw -1cqw rgba(0,0,0,.7)}
.cv-refri-dentro{position:relative;height:100%;border-radius:.6cqw;background:linear-gradient(180deg,#f3fafe,#d7e6ee);box-shadow:inset 0 0 3cqw rgba(120,175,215,.55);overflow:hidden}
.cv-luz{position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.95),transparent 60%);opacity:.8;pointer-events:none}
.cv-repisa{position:absolute;left:5%;right:5%;height:27%;display:flex;align-items:flex-end;justify-content:center;gap:4%}
.cv-repisa::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;border-radius:0 0 .5cqw .5cqw;pointer-events:none;z-index:4;
  background:linear-gradient(rgba(215,235,245,.3),rgba(190,220,236,.7));border:1px solid rgba(255,255,255,.9)}
.cv-repisa.r1{top:3%}.cv-repisa.r2{top:35%}.cv-repisa.r3{top:67%}
.cv-puerta{position:absolute;inset:0;border-radius:inherit;z-index:6;pointer-events:none;transform-origin:0 50%;transform:perspective(1400px) rotateY(-104deg);
  background:linear-gradient(90deg,#8a9095,#dfe2e4 30%,#aeb3b7 62%,#d3d6d9);box-shadow:inset 0 0 0 .25cqw rgba(0,0,0,.15)}
.cv-puerta::after{content:"";position:absolute;right:8%;top:32%;width:3%;height:28%;border-radius:999px;background:#5d6266}
.cv-vaho{position:absolute;left:8%;top:12%;width:30%;height:70%;border-radius:50%;opacity:0;pointer-events:none;z-index:7;
  background:radial-gradient(ellipse at 40% 50%,rgba(255,255,255,.6),transparent 65%);filter:blur(1cqw)}
.cv-refri .cv-letrero{bottom:-1.2cqw;left:50%;transform:translateX(-50%) rotate(-3deg);background:#1f6fae}

.cv-botella{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:block;flex:0 0 auto;width:20%;transition:transform .45s var(--cv-curva);z-index:1}
.cv-botella.ancha{width:25%}
.cv-botella svg{display:block;width:100%;height:auto;filter:drop-shadow(0 .3cqw .3cqw rgba(0,0,0,.25))}
.cv-botella.activa{transform:translateY(-22%);z-index:5}
.cv-botella.adorno{cursor:default;pointer-events:none;filter:brightness(.82) saturate(.85);width:17%}
.cv-botella.adorno.ancha{width:21%}
.cv-botella.agotada{filter:grayscale(.9) brightness(.7)}
.cv-botella .cv-cuenta{top:-6%;right:-18%;transform:scale(.8)}
.cv-botella.activa::after{content:"";position:absolute;left:28%;top:48%;width:.5cqw;height:.8cqw;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:rgba(255,255,255,.9);animation:cv-gota 1.4s ease-in infinite}
@keyframes cv-gota{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(4cqw);opacity:0}}
.cv-botella:focus-visible{outline:.25cqw solid var(--cv-rojo);outline-offset:.3cqw;border-radius:.4cqw}

.cv-mesa{position:absolute;left:35%;right:2%;top:64%;bottom:6%}
.cv-cubierta{position:absolute;left:0;right:0;top:0;height:7%;border-radius:.3cqw;z-index:2;background:linear-gradient(#f1f3f4,#aab0b4 60%,#7d8388);box-shadow:0 .8cqw 1cqw rgba(0,0,0,.45)}
.cv-pata{position:absolute;top:5%;bottom:0;width:1.6%;background:linear-gradient(90deg,#7d8388,#d9dcde,#8a9095)}
.cv-pata.p1{left:2%}.cv-pata.p2{right:2%}
.cv-entrepano{position:absolute;left:1%;right:1%;top:74%;height:6%;z-index:3;background:linear-gradient(#e2e5e7,#8f959a)}
.cv-estante{position:absolute;left:5%;right:5%;bottom:26%;display:flex;align-items:flex-end;justify-content:center;gap:2.2%;z-index:4}
.cv-estante .cv-botella{width:5.4%}
.cv-estante .cv-botella.ancha{width:6.6%}
.cv-mesa .cv-letrero{bottom:6%;right:6%;transform:rotate(-4deg);background:var(--cv-rojo)}

.cv-dispensador{position:absolute;left:38%;width:29%;top:12%;height:52.5%}
.cv-tanques{position:absolute;left:3%;right:3%;top:0;height:66%;display:flex;gap:4%;z-index:2}
.cv-tanque{all:unset;box-sizing:border-box;cursor:pointer;position:relative;flex:1}
.cv-tanque.proximo{cursor:default}
.cv-tanque .cv-cuenta{top:-5%;right:-6%;transform:scale(.85)}
.cv-vidrio{position:absolute;inset:0;border-radius:1.6cqw 1.6cqw .5cqw .5cqw;border:.22cqw solid rgba(255,255,255,.6);overflow:hidden;
  background:rgba(230,240,245,.13);box-shadow:inset .6cqw 0 1cqw rgba(255,255,255,.18);transition:border-color .3s,box-shadow .3s}
.cv-vidrio::before{content:"";position:absolute;left:0;right:0;top:0;height:11%;z-index:3;background:linear-gradient(#eceef0,#b5babd)}
.cv-liquido{position:absolute;left:0;right:0;bottom:0;height:74%;background:var(--liq)}
.cv-liquido::before{content:"";position:absolute;left:0;right:0;top:0;height:5%;background:rgba(255,255,255,.35)}
.cv-liquido::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.25) 48%,transparent 60%);
  background-size:260% 100%;animation:cv-brillo 4.5s linear infinite}
@keyframes cv-brillo{from{background-position:120% 0}to{background-position:-120% 0}}
.cv-paleta{position:absolute;left:43%;width:14%;top:13%;bottom:4%;border-radius:999px;z-index:2;
  background:linear-gradient(160deg,rgba(255,255,255,.9) 0 32%,rgba(255,255,255,.18) 32% 100%) 0 0/100% 1.4cqw repeat-y;animation:cv-girar 1.6s linear infinite}
@keyframes cv-girar{to{background-position:0 1.4cqw}}
.cv-paleta.quieta{animation:none;opacity:.6}
.cv-tanque.activa .cv-paleta{animation-duration:.45s}
.cv-tanque.activa .cv-vidrio{border-color:#fff;box-shadow:0 0 0 .35cqw rgba(255,255,255,.22),inset .6cqw 0 1cqw rgba(255,255,255,.25)}
.cv-etiq-tanque{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);z-index:3;white-space:nowrap;
  font-family:var(--cv-rotulo);font-size:1.2cqw;color:var(--cv-negro);background:var(--cv-papel);padding:.3cqw .7cqw;border-radius:.3cqw}
.cv-tanque.proximo .cv-vidrio{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 .8cqw,rgba(255,255,255,.15) .8cqw 1.6cqw)}
.cv-tanque.proximo .cv-etiq-tanque{bottom:36%;transform:translateX(-50%) rotate(-8deg);background:var(--cv-rojo);color:#fff;text-align:center;line-height:1.15;font-size:1.05cqw}
.cv-llave{position:absolute;left:50%;top:100%;width:18%;height:13%;margin-left:-9%;z-index:3;border-radius:0 0 .4cqw .4cqw;
  background:linear-gradient(#fafafa,#c3c7ca);transform-origin:50% 0;transition:transform .3s}
.cv-tanque.activa .cv-llave{transform:rotate(-20deg)}
.cv-chorro{position:absolute;left:50%;top:113%;width:7%;height:14%;margin-left:-3.5%;z-index:2;border-radius:999px;opacity:.92;
  background:var(--liq);transform-origin:50% 0;transform:scaleY(0);transition:transform .35s ease-in}
.cv-tanque.activa .cv-chorro{transform:scaleY(1)}
.cv-tanque:focus-visible .cv-vidrio{outline:.25cqw solid var(--cv-rojo);outline-offset:.3cqw}
.cv-base-disp{position:absolute;left:0;right:0;top:64%;bottom:0;border-radius:.5cqw;background:linear-gradient(#dcdfe1,#9aa0a4);box-shadow:0 1cqw 1.4cqw -.4cqw rgba(0,0,0,.6)}
.cv-bandeja{position:absolute;left:4%;right:4%;bottom:7%;height:13%;border-radius:.3cqw;background:repeating-linear-gradient(90deg,#3b3f42 0 .4cqw,#5d6367 .4cqw .8cqw)}

.cv-vasos{position:absolute;left:68.6%;width:6.6%;bottom:35.6%;height:22%;display:flex;gap:8%;align-items:flex-end}
.cv-pila{flex:1;height:100%;clip-path:polygon(6% 0,94% 0,80% 100%,20% 100%);background:repeating-linear-gradient(#f6f3ec 0 .9cqw,#d9d3c8 .9cqw 1.05cqw)}
.cv-pila.clara{height:58%;background:repeating-linear-gradient(rgba(255,255,255,.3) 0 .7cqw,rgba(255,255,255,.65) .7cqw .82cqw)}
.cv-pila.negra{height:78%;background:repeating-linear-gradient(#1d1d1d 0 .9cqw,#3a3a3a .9cqw 1.05cqw)}

.cv-olla-acero{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;left:77.5%;width:15.5%;bottom:35.6%;aspect-ratio:1/.95}
.cv-olla-acero .cv-cuenta{top:6%;right:-6%;transform:scale(.85)}
.cv-olla-cuerpo{position:absolute;left:0;right:0;bottom:0;height:76%;border-radius:.6cqw .6cqw 22% 22%/.6cqw .6cqw 30% 30%;
  background:linear-gradient(90deg,#6b7175,#e6e9eb 32%,#9da3a7 58%,#d4d8da 84%,#767c80);box-shadow:0 1.4cqw 1.6cqw -.6cqw rgba(0,0,0,.7)}
.cv-olla-cuerpo::before,.cv-olla-cuerpo::after{content:"";position:absolute;top:16%;width:10%;height:13%;border:.35cqw solid #9aa0a4;border-radius:.6cqw}
.cv-olla-cuerpo::before{left:-9%}.cv-olla-cuerpo::after{right:-9%}
.cv-olla-tapa{position:absolute;left:-3%;right:-3%;top:14%;height:13%;z-index:2;border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%,#f2f4f5,#9da3a7 72%);transform-origin:8% 100%;transform:rotate(-5deg) translateY(-6%);transition:transform .5s var(--cv-curva)}
.cv-olla-tapa::after{content:"";position:absolute;left:46%;top:-34%;width:8%;height:52%;border-radius:.4cqw;background:#3a3d40}
.cv-olla-acero.activa .cv-olla-tapa{transform:rotate(-22deg) translateY(-40%)}
.cv-olla-acero .cv-vapor{bottom:74%}
.cv-olla-acero .cv-etiqueta{bottom:-15%;left:50%;transform:translateX(-50%) rotate(-3deg)}
.cv-olla-acero:focus-visible .cv-olla-cuerpo{outline:.25cqw solid var(--cv-rojo);outline-offset:.3cqw}

/* ---------- nombre del producto activo ---------- */
.cv-rotulo{text-align:center;min-height:120px;padding:0 16px}
.cv-rotulo h3{margin:0;font-family:var(--cv-rotulo);font-weight:400;font-size:clamp(28px,6vw,46px);line-height:1.05;color:var(--cv-papel)}
.cv-rotulo .cv-desde{margin:4px 0 0;font-size:1rem;color:var(--cv-tenue);font-variant-numeric:tabular-nums}
.cv-rotulo .cv-desde b{color:var(--cv-papel)}
.cv-entra{animation:cv-entra .45s var(--cv-curva)}
@keyframes cv-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cv-btn-ver{all:unset;cursor:pointer;display:inline-block;margin-top:12px;padding:10px 22px;border-radius:999px;background:var(--cv-rojo);color:#fff;
  font-weight:700;font-size:.95rem;box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
.cv-btn-ver:focus-visible{outline:3px solid var(--cv-papel);outline-offset:3px}
.cv-pista{margin:12px auto 0;font-size:.88rem;color:var(--cv-tenue)}

/* ---------- vista de detalle ---------- */
.cv-detalle{position:fixed;inset:0;z-index:1000;overflow-y:auto;overscroll-behavior:contain;color:var(--cv-texto);font-family:Inter,system-ui,sans-serif}
.cv-detalle[hidden],.cv-detalle [hidden]{display:none!important}
.cv-detalle-fondo{position:fixed;inset:0;background:rgba(20,8,6,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cv-detalle-caja{position:relative;min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,5vw,60px);
  align-items:center;max-width:960px;margin:0 auto;
  padding:calc(70px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.cv-detalle-caja:focus{outline:none}
.cv-cerrar{all:unset;cursor:pointer;position:absolute;top:calc(18px + env(safe-area-inset-top,0px));left:max(16px,env(safe-area-inset-left,0px));
  font-weight:700;font-size:.95rem;color:var(--cv-papel);padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08)}
.cv-cerrar:focus-visible,.cv-pedir:focus-visible{outline:3px solid var(--cv-papel);outline-offset:3px}
.cv-colgado{position:relative;justify-self:center;width:min(340px,100%);padding-top:22px;transform-origin:50% 0}
.cv-pinza{position:absolute;left:50%;top:0;width:18px;height:44px;margin-left:-9px;z-index:3;border-radius:3px 3px 4px 4px;
  background:linear-gradient(90deg,#a97f4a,var(--cv-madera) 45%,#e0bd88 55%,#a97f4a);box-shadow:0 2px 3px rgba(0,0,0,.5)}
.cv-pinza::after{content:"";position:absolute;left:-2px;right:-2px;top:16px;height:5px;border-radius:2px;background:#7d7a76}
.cv-marco{position:relative;background:var(--cv-papel);padding:12px 12px 14px;border-radius:5px;box-shadow:0 40px 60px -20px rgba(0,0,0,.8);transform-origin:0 0}
.cv-marco img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.cv-sello{position:absolute;right:-10px;bottom:34px;transform:rotate(-7deg);background:var(--cv-rojo);color:#fff;font-family:var(--cv-rotulo);font-size:19px;line-height:1.05;
  padding:10px 14px 9px;border-radius:4px;box-shadow:0 8px 16px -6px rgba(0,0,0,.6);max-width:85%}
.cv-info{min-width:0}
.cv-contador{margin:0;font-size:.8rem;letter-spacing:.18em;color:var(--cv-tenue);font-variant-numeric:tabular-nums}
.cv-info h2{margin:6px 0 0;font-family:var(--cv-rotulo);font-weight:400;font-size:clamp(32px,5.5vw,52px);line-height:1;color:var(--cv-papel)}
.cv-like-fila{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:.85rem;color:var(--cv-tenue)}
.cv-like-fila:empty{display:none}
.cv-like-fila .like-btn{min-height:38px;color:var(--cv-papel);border-color:rgba(239,233,220,.35);background:transparent}
.cv-like-fila .like-btn.liked{color:#ff8a7d;border-color:rgba(224,87,74,.65);background:rgba(192,57,43,.22)}
.cv-likes{color:#ff8a7d;font-weight:700}
.exito-likes{margin:16px auto 0;max-width:340px;text-align:left}
.exito-likes p{margin:0 0 8px;font-size:.85rem;line-height:1.4;color:var(--text2,#d8c9c0)}
.exito-likes ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.exito-likes li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 6px 6px 12px;border-radius:12px;background:rgba(239,233,220,.06);font-size:.88rem;font-weight:600}
.exito-likes .like-btn{min-height:36px}
.cv-info .cv-desc{margin:10px 0 0;max-width:42ch;color:var(--cv-tenue);line-height:1.5}
.cv-info fieldset{border:0;margin:20px 0 0;padding:0;min-width:0}
.cv-info legend{padding:0;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cv-tenue)}
.cv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cv-chip{position:relative;cursor:pointer}
.cv-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cv-chip span{display:inline-flex;gap:8px;align-items:baseline;padding:8px 13px;border-radius:999px;font-weight:600;font-size:.93rem;
  border:1.5px solid rgba(239,233,220,.28);color:var(--cv-texto);transition:background .2s,border-color .2s,color .2s,transform .2s}
.cv-chip span em{font-style:normal;font-weight:400;font-size:.8rem;color:var(--cv-tenue);font-variant-numeric:tabular-nums}
.cv-chip:hover span{border-color:rgba(239,233,220,.6)}
.cv-chip input:checked + span{background:var(--cv-papel);border-color:var(--cv-papel);color:var(--cv-negro);transform:translateY(-1px)}
.cv-chip input:checked + span em{color:#5f5a55}
.cv-chip input:focus-visible + span{outline:3px solid var(--cv-rojo);outline-offset:2px}
.cv-chip input:disabled + span{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.cv-extra{display:flex;align-items:center;gap:10px;margin-top:16px;font-weight:600;cursor:pointer;width:max-content;max-width:100%}
.cv-extra input{width:20px;height:20px;accent-color:var(--cv-rojo);margin:0}
.cv-extra span{color:var(--cv-tenue);font-weight:400}
.cv-total{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(239,233,220,.18)}
.cv-total > span{min-width:0;color:var(--cv-tenue)}
.cv-total strong{font-family:var(--cv-rotulo);font-weight:400;font-size:32px;color:var(--cv-papel);font-variant-numeric:tabular-nums}
.cv-cantidad{display:flex;align-items:center;gap:6px;margin-top:14px}
.cv-cantidad button{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;text-align:center;font-size:1.3rem;line-height:40px;border:1.5px solid rgba(239,233,220,.4);color:var(--cv-papel)}
.cv-cantidad button:focus-visible{outline:3px solid var(--cv-papel);outline-offset:2px}
.cv-cantidad output{min-width:34px;text-align:center;font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums}
.cv-cantidad small{color:var(--cv-tenue);margin-left:6px}
.cv-pedir{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;text-align:center;margin-top:16px;padding:14px 20px;border-radius:10px;
  background:var(--cv-rojo);color:#fff;font-weight:700;font-size:1rem;box-shadow:0 10px 24px -10px rgba(0,0,0,.7)}
.cv-pedir:disabled,.cv-pedir[aria-disabled="true"]{background:#3a2a28;color:#a59a94;cursor:not-allowed;box-shadow:none}
/* Las bebidas se ven más chicas: el vaso o la botella no necesita tanto marco. */
.cv-detalle.es-bebida .cv-colgado{width:min(260px,100%)}
.cv-detalle.es-bebida .cv-sello{font-size:16px;padding:8px 11px 7px;bottom:24px}
@media (max-width:720px){
  .cv-detalle-caja{grid-template-columns:minmax(0,1fr);align-items:start;gap:16px;padding-top:calc(62px + env(safe-area-inset-top,0px))}
  .cv-colgado{width:min(210px,58vw)}
  .cv-detalle.es-bebida .cv-colgado{width:min(150px,42vw);padding-top:16px}
  .cv-detalle.es-bebida .cv-pinza{width:14px;height:34px;margin-left:-7px}
  .cv-detalle.es-bebida .cv-marco{padding:8px 8px 10px}
  .cv-detalle.es-bebida .cv-sello{font-size:13px;right:-14px;bottom:16px}
  .cv-info h2{font-size:32px}
  .cv-info .cv-desc{font-size:.88rem;margin-top:6px}
  .cv-info fieldset{margin-top:14px}
  .cv-chip span{padding:7px 11px;font-size:.88rem}
  .cv-total{margin-top:16px;padding-top:12px}
  .cv-total strong{font-size:28px}
}

/* lo que se sirve en el detalle */
.cv-vaso{position:relative;width:100%;aspect-ratio:4/5;border-radius:2px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#2d5232,#122614 72%)}
.cv-vaso::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10%;background:linear-gradient(#eef0f1,#9aa0a4)}
.cv-vaso.fria{background:radial-gradient(circle at 50% 35%,#2f5560,#122230 72%)}
.cv-vaso svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.cv-vaso .cv-vapor{top:2%;bottom:auto;height:36%;width:46%;margin-left:-23%;z-index:2}
.cv-vaso .cv-vapor.frio{top:auto;bottom:10%;height:30%;width:70%;margin-left:-35%;opacity:.7}
.cv-vaso .cv-sup,.cv-vaso .cv-tapa-b{transform-box:fill-box;transform-origin:50% 50%}
.cv-ola{animation:cv-ola 2.2s linear infinite}
@keyframes cv-ola{to{transform:translateX(-50px)}}
.cv-burbuja{animation:cv-sube 2.8s ease-in infinite;transform-box:fill-box}
@keyframes cv-sube{0%{transform:translateY(0);opacity:0}20%{opacity:.8}100%{transform:translateY(-90px);opacity:0}}
.cv-gota{animation:cv-resbala 3s ease-in infinite;transform-box:fill-box}
@keyframes cv-resbala{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(26px);opacity:0}}

/* ---------- resumen de la orden (paso 1 y 2), con el mismo fondo ---------- */
#orderModal .modal-box{
  --bg:#160a08;--surface:#1f0f0c;--surface2:#261411;--surface3:#311b17;
  --text:#f4efe6;--text2:#d8c9c0;--muted:#a99a92;--border:rgba(255,255,255,.1);--border2:rgba(255,255,255,.2);
  background:radial-gradient(120% 40% at 50% 0%,#3d1611 0%,transparent 70%),#160a08;border-color:rgba(192,57,43,.4);color:var(--text)}
#orderModal .step-header{background:transparent;border-bottom:1px solid rgba(192,57,43,.3)}
#orderModal .step-header h3{font-family:"Alfa Slab One",Rockwell,Georgia,serif!important;font-weight:400;font-size:1.4rem!important;color:#f6f1e7!important}
#orderModal .step-header p{color:#c7b3a9!important;font-style:normal!important}
.resumen-titulo{margin:0;font-family:"Alfa Slab One",Rockwell,Georgia,serif;font-weight:400;font-size:1.5rem;line-height:1.1;color:#f6f1e7}
.resumen-titulo span{color:#c0392b}
.resumen-sub{margin:6px 0 0;font-size:.78rem;line-height:1.4;color:#c7b3a9}
.resumen-sub strong{color:#f6f1e7}
#orderModal .order-items{margin-top:12px}
.oi{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px;margin-bottom:8px;
  border-radius:14px;background:rgba(239,233,220,.05);border:1px solid rgba(239,233,220,.1)}
.oi--pieza{margin-top:-4px;padding-top:6px;background:rgba(239,233,220,.025);border-style:dashed}
.oi__foto{position:relative;width:44px;height:44px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:1.3rem;background:#2a1714;box-shadow:0 0 0 2px #f6f1e7}
.oi__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.oi__foto--vacia{visibility:hidden;height:0}
.oi__info{min-width:0}
.oi__nombre{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-weight:700;font-size:.9rem;line-height:1.25;color:#f6f1e7}
.oi__pieza{font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#e2574a}
.oi__prep{margin-top:3px;font-size:.78rem;line-height:1.35;color:#d8c9c0}
.oi__acciones{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.oi__chip{all:unset;cursor:pointer;padding:4px 10px;border-radius:999px;font-size:.7rem;font-weight:700;line-height:1.4;
  border:1px solid rgba(239,233,220,.25);color:#efe9dc;transition:background .2s,border-color .2s,transform .15s}
.oi__chip:hover{border-color:rgba(239,233,220,.55)}
.oi__chip:active{transform:scale(.94)}
.oi__chip.on{background:#c0392b;border-color:#c0392b;color:#fff;animation:oi-pop .3s ease-out}
.oi__chip--editar::before{content:"✎ "}
.oi__chip:focus-visible{outline:2px solid #f6f1e7;outline-offset:2px}
.oi__lado{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.oi__precio{font-weight:800;font-size:.92rem;color:#f6f1e7;font-variant-numeric:tabular-nums;white-space:nowrap}
.oi__qty{display:flex;align-items:center;gap:6px}
.oi__qty .qty-btn{width:30px;height:30px;padding:0;border-radius:50%;background:transparent;border:1px solid rgba(239,233,220,.35);color:#f6f1e7;line-height:1}
.oi__qty .qty-btn:active{transform:scale(.9)}
.oi__qty span{min-width:16px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
#orderItemsList.entrando .oi{animation:oi-entra .45s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i) * 60ms)}
@keyframes oi-entra{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes oi-pop{50%{transform:scale(1.1)}}
#orderModal .order-total-row{background:rgba(239,233,220,.06);border-color:rgba(239,233,220,.14)}
#orderModal .order-total-amount{display:inline-block;font-family:"Alfa Slab One",Rockwell,Georgia,serif;font-weight:400;color:#f6f1e7}
#orderModal .order-total-amount.pop{animation:oi-pop .35s ease-out}
#orderModal .pickup-note{background:rgba(239,233,220,.05);border-color:rgba(239,233,220,.12);color:#d8c9c0}
#orderModal .btn-close-summary{background:transparent;color:#efe9dc;border-color:rgba(239,233,220,.2)}
@media (prefers-reduced-motion:reduce){#orderItemsList.entrando .oi,.oi__chip.on,#orderModal .order-total-amount.pop{animation:none}}

.cv-aviso{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:1100;
  background:var(--cv-papel);color:var(--cv-negro);padding:11px 18px;border-radius:10px;font:600 .9rem/1.35 Inter,system-ui,sans-serif;
  box-shadow:0 10px 30px rgba(0,0,0,.5);transition:opacity .3s,transform .3s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.cv-aviso.ver{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .cv-bandera,.cv-brasa,.cv-vapor i,.cv-paleta,.cv-liquido::after,.cv-ola,.cv-burbuja,.cv-gota,.cv-botella.activa::after{animation:none!important}
  .cv-voltea,.cv-botella,.cv-olla-tapa,.cv-llave,.cv-chorro{transition-duration:.01s}
}

/* ── Navegación discreta: flechita arriba/abajo y flechitas de lado (carta-viva/navega.js) ── */
.navega-v{position:fixed;left:50%;bottom:calc(14px + var(--sobre,0px) + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:290;
  width:34px;height:34px;padding:0;border-radius:50%;border:1px solid rgba(239,233,220,.18);background:rgba(20,8,6,.5);color:#efe9dc;
  display:grid;place-items:center;cursor:pointer;opacity:.7;transition:opacity .3s;}
.navega-v[hidden]{display:none}
.navega-v.moviendo{opacity:0;pointer-events:none}
.navega-v:hover,.navega-v:focus-visible{opacity:1}
.navega-v svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.navega-v.arriba svg{transform:rotate(180deg)}
.navega-v:not(.arriba) svg{animation:navega-bota 1.8s ease-in-out infinite}
@keyframes navega-bota{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3px)}}

.desliza{position:relative;min-width:0}
.desliza__f{position:absolute;top:50%;translate:0 -50%;z-index:4;width:26px;height:26px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;background:rgba(20,8,6,.6);color:#efe9dc;opacity:0;pointer-events:none;transition:opacity .25s;cursor:pointer}
.desliza__f.izq{left:2px}
.desliza__f.der{right:2px}
.desliza__f svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.desliza.hay-izq>.izq,.desliza.hay-der>.der{opacity:.75;pointer-events:auto}
.desliza:not(.usado).hay-der>.der svg{animation:desliza-pica 1.4s ease-in-out 3}
@keyframes desliza-pica{0%,100%{transform:none}50%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.navega-v svg,.desliza__f svg{animation:none!important}}

/* ── Celular compacto: lo mismo, en menos alto ── */
@media (max-width:600px){
  .home--vivo .home__inner{padding:14px 16px 0}
  .home--vivo .home__kicker{font-size:.68rem;margin:0}
  .home--vivo .home__title{font-size:28px;margin:4px 0 2px}
  .home__ubicacion{font-size:.8rem}
  .donde{gap:8px}
  .donde__op{padding:8px 10px;border-radius:12px;column-gap:8px}
  .donde__op svg{width:20px;height:20px}
  .donde__op strong{font-size:.9rem}
  .donde__op small{font-size:.68rem}
  .donde__info{margin-top:6px;font-size:.8rem}
  .cv-picado{height:44px}
  .cv-picado-fila{transform:translateX(-50%) scale(.6);transform-origin:50% 0}
  .cv-vistas button{padding:6px 16px;font-size:.84rem}

  .cv .arma .envoltura{padding-block:6px 20px}
  .cv .arma .cabeza h2{font-size:24px}
  .cv .arma .bases{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:8px;padding-bottom:2px}
  .cv .arma .bases::-webkit-scrollbar{display:none}
  .cv .arma .bases button{flex:0 0 auto;padding:6px 14px;font-size:.84rem}
  .cv .arma .mesa{gap:12px;margin-top:8px}
  .cv .arma .centro{padding:4px 0 6px}
  .cv .arma .comal{max-width:min(200px,54vw)}
  .cv .arma .acciones{margin-top:6px}
  .cv .arma .pista-arrastre{font-size:0;margin-top:2px}
  .cv .arma .pista-arrastre::after{content:"Tócalo, o mantén el dedo y arrástralo al comal";font-size:.68rem}
  .cv .arma .rejilla{display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:6px;gap:2px;padding:6px}
  .cv .arma .rejilla::-webkit-scrollbar{display:none}
  .cv .arma .rejilla>.ing{flex:0 0 82px;scroll-snap-align:start;padding:6px 2px}
  .cv .arma .ing svg{width:54px;height:48px}
  .cv .arma .botellas{margin-top:6px;gap:12px}
  .cv .arma .botella svg{width:56px;height:56px}
  .cv .arma #ar-bloqueSalsa h2{margin-top:10px!important}
  .cv .arma .comanda{margin-top:12px}
}

/* ── Fluidez: sin desenfoques que se recalculan al hacer scroll, sin resaltado azul al tocar ── */
*{-webkit-tap-highlight-color:transparent}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),[role="button"]:focus:not(:focus-visible){outline:none}
.header{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(8,8,8,.97)!important}
.redes__btn,.soc{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.navega-v{background:rgba(20,8,6,.78)}
/* desvanecido de las tiras con una capa encima (la máscara obligaba a repintar en cada movimiento) */
.desliza::before,.desliza::after{content:"";position:absolute;top:0;bottom:0;width:30px;z-index:3;pointer-events:none;opacity:0;transition:opacity .25s}
.desliza::before{left:0;background:linear-gradient(90deg,var(--cv-fondo,#1a0b08),transparent)}
.desliza::after{right:0;background:linear-gradient(270deg,var(--cv-fondo,#1a0b08),transparent)}
.desliza.hay-izq::before,.desliza.hay-der::after{opacity:.9}
.cv-barra-scroll,.arma .rejilla,.arma .bases{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cv .arma .centro{will-change:transform}
/* respuesta al tocar: se hunde un poquito */
.cv .arma .ing,.cv .arma .botella,.cv .arma .bases button,.cv .arma .chip,.cv-vistas button,.donde__op,.cv .arma .pedir{transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .2s,box-shadow .2s,color .2s,opacity .2s}
.cv .arma .ing:active,.cv .arma .bases button:active,.cv .arma .chip:active,.cv-vistas button:active,.donde__op:active{transform:scale(.95)}
.cv .arma .pedir:active{transform:scale(.98)}
/* cambio Alimentos | Bebidas con entrada suave */
.cv-alimentos,#cvBebidas{animation:cv-aparece .34s cubic-bezier(.2,.8,.2,1)}
@keyframes cv-aparece{from{opacity:0;transform:translateY(10px)}}

/* ── Al agregar al pedido ── */
.pedido-vuela{position:fixed;z-index:9999;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.pedido-vuela svg{width:100%;height:100%;display:block}
.pedido-mas{position:fixed;z-index:9999;pointer-events:none;padding:3px 10px;border-radius:999px;background:#f6f1e7;color:#c0392b;font:800 .95rem/1.2 system-ui,sans-serif;box-shadow:0 6px 16px rgba(0,0,0,.35);will-change:transform,opacity}
.cv .arma .pedir.hecho{background:#2f7d4a!important;color:#fff!important}
.cv .arma .comanda .ar-sello{position:absolute;right:14px;top:14px;padding:4px 10px;border:2.5px solid #c0392b;border-radius:6px;color:#c0392b;
  font:400 1rem/1.1 "Alfa Slab One",Georgia,serif;letter-spacing:.02em;transform:rotate(-9deg);opacity:0;pointer-events:none}
.cv .arma .comanda .ar-sello.ver{animation:ar-sella 1.9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ar-sella{0%{opacity:0;transform:rotate(-9deg) scale(1.8)}14%{opacity:.95;transform:rotate(-9deg) scale(.94)}22%{transform:rotate(-9deg) scale(1)}80%{opacity:.95}100%{opacity:0;transform:rotate(-9deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.cv-alimentos,#cvBebidas,.cv .arma .comanda .ar-sello.ver{animation:none}.cv .arma .comanda .ar-sello.ver{opacity:.95}}
/* la barra del pedido entra subiendo, no de golpe */
.cart-bar.show{animation:barra-sube .38s cubic-bezier(.2,.8,.2,1)}
@keyframes barra-sube{from{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.cart-bar.show{animation:none}}