/* La Rústica · pantallas anchas: iPad y escritorio.
   Se enlaza con media="(min-width: 700px) and (min-height: 500px)": el teléfono, parado o acostado, ni la lee.
   Es la misma app reacomodada: sin marco de teléfono, la barra hecha dock flotante, las hojas como diálogo
   centrado y cada pantalla usando el ancho. Nada de contenido nuevo. */
:root{--gut:max(28px,calc(50cqw - 600px));--dock:66px}

/* ---------- sin marco: la app ocupa toda la ventana ---------- */
body{display:block;background:var(--negro)}
#marco{max-width:none;height:100dvh;border-radius:0;box-shadow:none}
#app{padding-bottom:calc(170px + env(safe-area-inset-bottom))}
#rescoldo{left:-5%;right:-5%;height:240px}
#aviso{max-width:min(560px,86%);top:calc(20px + env(safe-area-inset-top));font-size:14px;padding:12px 20px}
.riel{margin:0 calc(-1*var(--gut));padding-left:var(--gut);padding-right:var(--gut)}
.tarjetas{margin:0} /* ya trae su propio relleno: con el margen negativo del riel desbordaba */
.bloque{padding-left:var(--gut);padding-right:var(--gut)} /* el mismo borde que las cabeceras */

/* ---------- dock flotante con el carbón al medio ---------- */
#barra{left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));width:min(540px,calc(100% - 56px));margin:0 auto;padding:10px 14px 10px;grid-template-columns:1fr 1fr 96px 1fr 1fr;border-radius:30px;background:rgba(13,10,9,.96);box-shadow:inset 0 0 0 1px rgba(242,101,34,.28),0 24px 50px -14px rgba(0,0,0,.85),0 0 40px rgba(242,101,34,.08)}
#barra button{padding:4px 0 2px}
#barra small{font-size:10px}
.carboncito{margin-top:-36px}
/* los flotantes (pedido en curso, mozo) van arriba del dock, centrados; desde 1180 px, abajo a la derecha, uno sobre otro */
#flotantes{left:0;right:0;bottom:calc(18px + var(--dock) + 14px + env(safe-area-inset-bottom));width:min(540px,calc(100% - 56px));margin:0 auto;justify-content:center}
.flo-pedido{flex:0 1 auto;min-width:270px}
.flo-mozo.activo{flex:0 1 auto}
@media (min-width:1180px){
  #flotantes{left:auto;right:var(--gut);bottom:calc(18px + env(safe-area-inset-bottom));width:auto;margin:0;flex-direction:column;align-items:flex-end;justify-content:flex-end}
  .flo-pedido,.flo-mozo.activo{min-height:56px}
}
/* en 1180 justos (iPad acostado) el pedido con un total largo quedaba a un pelo del dock: se corre al borde */
@media (min-width:1180px) and (max-width:1279px){
  #flotantes{right:16px}
}
/* la campana sola acompaña al dock, pegada a su derecha y a su altura: centrada arriba tocaba el carbón y flotaba sobre el contenido.
   Hasta 800 px (iPad mini) va del lado izquierdo: a la derecha quedaba justo sobre el carril de los «+» de la carta.
   Con un pedido en curso, desde 1180 px va con la píldora (abajo a la derecha, sobre su punta izquierda para no pisar los «+»):
   al lado del dock no entran las dos */
.flo-mozo.solo{position:fixed;left:calc(50% + 280px);bottom:calc(24px + env(safe-area-inset-bottom))}
@media (max-width:799px){
  .flo-mozo.solo{left:calc(50% - 332px)}
}
@media (min-width:1180px){
  #flotantes:has(.flo-pedido) .flo-mozo.solo{position:static}
  #flotantes:has(.flo-pedido):has(.flo-mozo.solo){align-items:flex-start}
}

/* ---------- entrada ---------- */
.en-caja{width:min(520px,60cqw,72dvh);max-width:none}

/* ---------- inicio ---------- */
.tope{padding:calc(16px + env(safe-area-inset-top)) 0 0}
.tope .logo{width:150px}
.estado{padding:12px 16px;font-size:12px}
.hola{padding:22px 0 0}
.hola h1{font-size:clamp(36px,3.6cqw,50px);max-width:24ch;margin-top:10px}
.vende{margin-top:18px}
/* las tarjetas se alinean al borde izquierdo, no al centro: en iPad entran dos y la primera no queda cortada */
.tarjetas{gap:16px;padding:8px var(--gut) 24px;scroll-padding:0 var(--gut)}
.tar{width:364px;scroll-snap-align:start}
@media (max-width:799px){
  .tar{width:calc((100cqw - 2*var(--gut) - 16px)/2)} /* iPad mini: entran dos justas en vez de cortarse la segunda */
}
.vende-pie{padding:0 calc(var(--gut) + 4px)}
.cinta{padding:12px 0 11px;transform:rotate(-1deg)}
.cinta > div{font-size:17px}
/* los tres accesos: ícono a la izquierda y el texto al lado, para no quedar como tres cajas altas y vacías */
.rapido{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.rapido button{grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:3px;align-items:center;align-content:center;padding:16px 20px;border-radius:20px}
.rapido .ico{grid-row:1/3;width:32px;height:32px;margin:0}
.rapido b,.rapido em{grid-column:2}
.rapido b{font-size:19px}
.rapido em{font:500 12px/1.3 var(--f)}
.prox{padding:18px 22px}
.siempre{padding:16px 18px;grid-template-columns:auto 1fr;grid-template-rows:auto auto;row-gap:12px} /* fotos y texto arriba, el botón abajo */
.siempre .btn{grid-column:1/-1;justify-self:start}
.siempre .mano{font-size:19px}
.siempre b{font-size:14.5px}
.juego{padding:22px 20px 20px}
.cabeza h2{font-size:38px}
.cabeza .mano{font-size:22px}
.pcard{width:172px}
.momento{width:280px}
.local img{height:300px}
.local::before{height:303px}
.local-in{padding:0 var(--gut) 12px}
.local-in h3{font-size:48px}
/* el inicio es una grilla de dos columnas: «lo de siempre» y el juego van juntos (con la próxima reserva y la mesa, de a dos);
   lo demás ocupa el ancho. Las filas van a max-content: #app tiene alto fijo y, si no, el local (overflow hidden) se aplasta. */
#app:has(> .tope){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;grid-auto-flow:row dense;column-gap:16px;align-content:start;padding-left:var(--gut);padding-right:var(--gut)}
#app:has(> .tope) > *{grid-column:1/-1;min-width:0}
#app:has(> .tope) > .bloque{padding-left:0;padding-right:0}
#app:has(> .tope) > .vende,#app:has(> .tope) > .local{margin-left:calc(-1*var(--gut));margin-right:calc(-1*var(--gut))}
#app:has(> .tope) > .cinta{margin:22px calc(2px - var(--gut)) 0}
#app:has(> .tope) > .bloque:has(> .siempre),#app:has(> .tope) > .bloque:has(> .juego){grid-column:span 1}
/* (la mesa va arriba, a todo el ancho; la próxima reserva, sin mesa, también a todo el ancho) */
.siempre,.juego,.salon,.prox{height:100%}

/* ---------- carta ---------- */
.cab{padding:calc(18px + env(safe-area-inset-top)) var(--gut) 6px}
.cab .logo{width:120px}
.cab p{font-size:15px;max-width:60ch}
.cab.con-foto{min-height:300px}
.cats{flex-wrap:wrap;padding:12px var(--gut)} /* los rubros entran todos, en dos renglones si hace falta, en vez de cortarse */
.cats button{padding:11px 16px;font-size:13px}
.platos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.plato{padding:14px 16px}
/* el plato grande se acuesta: la foto a la izquierda en vez de una franja de un metro */
.plato.grande{grid-column:1/-1;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) auto;align-items:center;column-gap:22px;padding:0 20px 0 0}
.plato.grande .pl-foto{grid-row:1;grid-column:1;width:auto;height:100%;min-height:200px;margin:0;border-radius:0;align-self:stretch}
.plato.grande .pl-txt{padding:18px 0}
.nota-carta{margin:26px var(--gut) 0}
/* el menú del día, apaisado: placa a la izquierda, opciones al medio, precios y botones a la derecha */
.mdd.compacto{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1fr) minmax(240px,auto);grid-template-rows:auto auto;column-gap:30px;align-items:center;text-align:left;padding:28px 30px}
.mdd.compacto header{grid-row:1/3}
.mdd.compacto .mdd-ops{grid-row:1/3;margin:0;gap:14px}
.mdd.compacto .mdd-precios{grid-column:3;justify-items:start;margin:0 0 6px;gap:12px}
.mdd.compacto .dos{grid-column:3;align-self:start}
/* en iPad parado no entran las tres columnas: la placa y el precio arriba, las opciones y los botones abajo */
@media (max-width:999px){
  .mdd.compacto{grid-template-columns:minmax(0,1fr) minmax(240px,auto);row-gap:18px}
  .mdd.compacto header{grid-row:1;grid-column:1}
  .mdd.compacto .mdd-ops{grid-row:2;grid-column:1}
  .mdd.compacto .mdd-precios{grid-row:1;grid-column:2;align-self:center;margin:0}
  .mdd.compacto .dos{grid-row:2;grid-column:2;align-self:end}
}

/* ---------- reservar: el formulario a un ancho de lectura, las opciones de a tres ---------- */
.form{max-width:calc(760px + 2*var(--gut));margin-left:auto;margin-right:auto}
.form .opciones{grid-template-columns:repeat(3,minmax(0,1fr))}
.form .opciones button{padding:14px}
.dias{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.resumen{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:18px;padding:20px 22px}

/* ---------- club: la credencial a la izquierda, premios, beneficios e historial a la derecha ---------- */
#app:has(> .bloque > .socio){display:grid;grid-template-columns:minmax(300px,40%) minmax(0,1fr);grid-auto-rows:max-content;column-gap:28px;align-content:start;padding-left:var(--gut);padding-right:var(--gut)}
#app:has(> .bloque > .socio) > *{min-width:0;padding-left:0;padding-right:0}
#app:has(> .bloque > .socio) > .cab{grid-column:1/-1}
#app:has(> .bloque > .socio) > .bloque:has(> .socio){grid-column:1;grid-row:2/span 8;position:sticky;top:20px;align-self:start}
#app:has(> .bloque > .socio) > .bloque:not(:has(> .socio)),#app:has(> .bloque > .socio) > .nota-carta{grid-column:2;margin-left:0;margin-right:0}
#app:has(> .bloque > .socio) > .bloque:has(> .socio) + .bloque{margin-top:34px}
.socio header img{width:104px}
.qr{width:100px;height:100px}

/* ---------- hojas: de cajón que sube a diálogo centrado ---------- */
#hoja .hoja-panel{left:50%;right:auto;top:50%;bottom:auto;width:min(600px,calc(100% - 56px));max-height:88%;border-radius:30px;border:1px solid rgba(242,101,34,.35);transform:translate(-50%,-50%) translateY(40px) scale(.96);opacity:0;transition:transform .34s cubic-bezier(.2,.85,.2,1),opacity .25s;box-shadow:0 40px 100px -20px rgba(0,0,0,.8),0 0 60px rgba(242,101,34,.1)}
#hoja.ver .hoja-panel{transform:translate(-50%,-50%);opacity:1}
.hoja-panel.alta{height:auto}
.hoja-cuerpo{border-radius:30px;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.hoja-x{right:16px;top:16px}
.it{padding:30px 28px 6px}
.it-foto{height:260px}
.it-foto.alto{height:300px}
.it-desc{max-width:62ch}
.listo .ticket{margin:22px 0 6px}
/* el pie de acción queda fijo abajo de la hoja: si el contenido no entra (notebook, 1024×768) el botón igual se ve
   y lo demás corre por detrás. Cuando entra todo, queda donde estaba (el fijo se mide desde adentro del relleno del cuerpo:
   6 px ahí es el mismo lugar que ocupa suelto). */
.it-pie{position:sticky;bottom:6px;z-index:2;margin-top:10px;padding-top:14px;background:#110e0c;box-shadow:0 40px 0 #110e0c,0 -12px 14px -4px #110e0c}
.it:has(> [data-a="confirmar-pedido"]) > .total{position:sticky;bottom:80px;z-index:2;background:#110e0c;box-shadow:0 -12px 14px -4px #110e0c}
.btn.llama[data-a="confirmar-pedido"]{position:sticky;bottom:6px;z-index:2;box-shadow:0 5px 0 #8a2407,0 18px 28px -8px rgba(194,54,15,.6),0 0 0 20px #110e0c,0 26px 0 14px #110e0c}
.btn.llama[data-a="confirmar-pedido"]:active{box-shadow:0 1px 0 #8a2407,0 0 0 20px #110e0c,0 26px 0 14px #110e0c}

/* ---------- soplá la brasa: carbón más grande y el vale a un ancho sensato ---------- */
.br-tope{margin-top:calc(40px + env(safe-area-inset-top))}
.br-anillo{width:300px;height:300px}
.br-carbon{width:270px}
.br-fin{padding:70px 28px calc(28px + env(safe-area-inset-bottom))}
.br-fin > *,.br-fin .dos,.br-fin .btn.ancho,.vale{width:min(520px,100%)}
.br-fin .dos .btn{font-size:13px}
@media (min-height:1000px){
  .br-anillo{width:360px;height:360px}
  .br-carbon{width:324px}
}
@media (max-height:760px){
  .br-tope{margin-top:calc(22px + env(safe-area-inset-top))}
  .br-anillo{width:230px;height:230px}
  .br-carbon{width:206px}
  .fin .br-escena{transform:translateY(-18%)}
}
@media (min-height:761px) and (max-height:840px){
  .fin .br-escena{transform:translateY(-14%)}
}
@media (max-height:640px){
  .br-tope{margin-top:calc(14px + env(safe-area-inset-top))}
  .br-anillo{width:172px;height:172px}
  .br-carbon{width:154px}
  .fin .br-escena{transform:translateY(-22%)}
}

/* ---------- desde 1000 px: cada pantalla se arma en columnas ---------- */
@media (min-width:1000px){
  /* INICIO: seis columnas; lo de siempre, el juego y la mesa van de a tres (de a dos con la próxima reserva), los rieles a lo ancho */
  #app:has(> .tope){grid-template-columns:repeat(6,minmax(0,1fr));column-gap:24px}
  #app:has(> .tope) > .tope,#app:has(> .tope) > .hola{padding-left:0;padding-right:0}
  #app:has(> .tope) > .bloque:has(> .siempre),#app:has(> .tope) > .bloque:has(> .juego){grid-column:span 3}
  .juego-txt small{max-width:40ch}
  #app:has(> .tope) .riel:has(.pcard){display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin:0;padding:4px 0 14px;overflow:visible;cursor:auto}
  #app:has(> .tope) .riel:has(.momento){margin:0;padding:4px 0 14px}
  .pcard{width:auto}
  .pcard strong{font-size:14px}
  /* el local: el cartel a la izquierda, dirección y horarios a la derecha */
  .local{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;column-gap:48px;margin-top:60px;padding:44px var(--gut) 24px;overflow:visible}
  .local::before{content:none}
  .local img{height:min(420px,32cqw);border-radius:28px;filter:brightness(.95) contrast(1.04)}
  .local-in{margin-top:0;padding:0;gap:8px}
  .local-in h3{font-size:52px}
  .local-in p{font-size:15px}

  /* RESERVAR: la foto del salón como panel fijo a la izquierda, el formulario a la derecha */
  #app:has(> .cab.con-foto){display:grid;grid-template-columns:calc(var(--gut) + clamp(380px,36cqw,520px)) minmax(0,1fr);grid-auto-rows:max-content;align-content:start;padding:0 var(--gut) 0 0}
  #app:has(> .cab.con-foto) > .cab.con-foto{grid-column:1;grid-row:1;position:sticky;top:0;align-self:start;height:100dvh;min-height:0;padding:calc(24px + env(safe-area-inset-top)) 36px 56px var(--gut);background-position:center}
  #app:has(> .cab.con-foto) > .cab.con-foto::before{background:linear-gradient(180deg,rgba(10,8,7,.55) 0,rgba(10,8,7,.08) 40%,rgba(10,8,7,.9) 100%),linear-gradient(90deg,transparent 72%,var(--negro))}
  .cab.con-foto .cartel b{font-size:72px}
  .cab.con-foto .cartel i{font-size:44px}
  #app:has(> .cab.con-foto) > .form{grid-column:2;grid-row:1;max-width:640px;margin:0;padding:calc(26px + env(safe-area-inset-top)) 0 calc(170px + env(safe-area-inset-bottom)) 44px}
  .form .riel{margin:0;padding:4px 0 14px}

  /* CLUB: con más ancho, la credencial crece */
  #app:has(> .bloque > .socio){grid-template-columns:clamp(340px,40%,460px) minmax(0,1fr);column-gap:36px}
  .socio{padding:24px;gap:26px}
  .socio header img{width:120px}
  .socio-medio strong{font-size:40px}
  .qr{width:120px;height:120px;padding:11px}
  .vales{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* ficha con foto, a dos columnas: la foto a la izquierda, armado y precio a la derecha */
  @media (min-height:640px){
    #hoja .hoja-panel.con-foto{width:min(920px,calc(100% - 80px))}
    .hoja-panel.con-foto .hoja-cuerpo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);align-items:stretch;padding-bottom:0}
    .hoja-panel.con-foto .it-foto{height:auto;min-height:440px;margin:0;-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
    .hoja-panel.con-foto .it{padding:34px 30px 34px 6px}
    .hoja-panel.con-foto .it-pie{bottom:34px} /* acá el cuerpo no tiene relleno abajo */
  }
}
/* hasta 1280 px el dock llega cerca del panel de la foto: el cartel «Reservá tu mesa» se queda por encima */
@media (min-width:1000px) and (max-width:1279px){
  #app:has(> .cab.con-foto) > .cab.con-foto{padding-bottom:calc(18px + var(--dock) + 30px + env(safe-area-inset-bottom))}
}
/* entre 1000 y 1180 px las tres piezas del inicio quedan angostas (y en el iPad mini, las dos): el juego se achica un poco */
@media (max-width:799px),(min-width:1000px) and (max-width:1179px){
  .juego{padding:18px 14px 16px;gap:10px}
  .juego-carbon{width:88px}
  .juego-txt b{font-size:27px}
}
/* ventana baja: el menú del día no queda fijo (no entraría entero) */
@media (min-width:1180px) and (max-height:700px){
  #app:has(> .cats) > #c-dia{position:static}
}

/* ---------- desde 1180 px: las tres tarjetas entran juntas y dejan de ser riel; la carta se arma en dos columnas ---------- */
@media (min-width:1180px){
  #app:has(> .tope) > .vende{margin-left:0;margin-right:0}
  .tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:8px 0 10px;overflow:visible}
  .tar{width:auto}
  .vende-pie{display:none}
  .hola h1{max-width:none} /* el saludo entra en un renglón */

  /* CARTA: el menú del día queda fijo a la izquierda y los platos corren a la derecha, de a dos
     (con menos de 1180 px los platos quedaban flacos: ahí sigue la placa apaisada arriba).
     La columna de la placa termina 12 px antes de donde empieza el dock: así sus botones nunca quedan debajo */
  #app:has(> .cats){display:grid;grid-template-columns:min(314px,calc(50cqw - 310px)) minmax(0,1fr);grid-auto-rows:max-content;column-gap:32px;align-content:start;padding-left:var(--gut);padding-right:var(--gut)}
  #app:has(> .cats) > *{grid-column:1/-1;min-width:0}
  #app:has(> .cats) > .cab,#app:has(> .cats) > .bloque{padding-left:0;padding-right:0}
  #app:has(> .cats) > .cats{margin-left:calc(-1*var(--gut));margin-right:calc(-1*var(--gut))}
  #app:has(> .cats) > #c-dia{grid-column:1;grid-row:3/span 12;align-self:start;position:sticky;top:76px;margin-top:6px}
  #app:has(> .cats) > .bloque:not(#c-dia){grid-column:2}
  #app:has(> .cats) > .nota-carta{grid-column:2;margin-left:0;margin-right:0}
  .mdd.compacto{display:block;text-align:center;padding:24px 16px 20px}
  .mdd.compacto .mdd-ops{margin:16px 0;gap:12px}
  .mdd.compacto .mdd-precios{justify-items:center;margin-bottom:18px;gap:12px}
  .mdd.compacto .dos .btn{font-size:12px;padding:0 6px}
}
/* ---------- desde 1180 px: los cuatro momentos en fila (de 280 px fijos, el cuarto se cortaba hasta 1240) ---------- */
@media (min-width:1180px){
  #app:has(> .tope) .riel:has(.momento){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;overflow:visible;cursor:auto}
  .momento{width:auto}
}

/* ventana baja (notebook 1366×650): la cabecera y las tarjetas del inicio se aprietan para que la fila de botones
   de las tarjetas quede por encima del dock al abrir; las hojas aprovechan un poco más del alto */
@media (max-height:720px){
  .tope{padding-top:calc(10px + env(safe-area-inset-top))}
  .tope .logo{width:104px}
  .hola{padding-top:6px}
  .hola h1{font-size:clamp(32px,3cqw,40px);margin-top:6px;max-width:none}
  .vende{margin-top:10px}
  .tarjetas{padding-top:4px}
  .tar{padding:14px 16px 16px}
  .tar .cartel{margin-top:8px}
  .tar .cartel b{font-size:46px}
  .tar .cartel i{font-size:26px}
  .tar-medio{grid-template-columns:1fr 36%;margin-bottom:22px}
  .tar-nota{margin-bottom:10px}
  .tar .btn{min-height:44px}
  #hoja .hoja-panel{max-height:calc(100% - 36px)}
}
@media (max-height:640px){
  .tope .logo{width:92px}
  .hola h1{font-size:34px}
  .tar{padding:12px 16px 14px}
  .tar .cartel b{font-size:40px}
  .tar .cartel i{font-size:23px}
  .tar-medio{grid-template-columns:1fr 31%;margin-bottom:16px}
}

/* RESERVAR en pantalla ancha y alta: el resumen con «Confirmar reserva» queda fijo arriba del dock mientras se arma la reserva
   (suelto, caía justo a la altura del dock en 1920×1080 y en el iPad Pro). Con dos flotantes apilados a la derecha, sube un escalón */
@media (min-width:1180px) and (min-height:760px){
  .form .resumen{position:sticky;bottom:calc(18px + var(--dock) + 16px + env(safe-area-inset-bottom));z-index:3;box-shadow:0 -18px 26px -6px var(--negro),0 30px 22px 12px var(--negro)}
  #marco:has(#flotantes > :nth-child(2)) .form .resumen{bottom:calc(18px + var(--dock) + 78px + env(safe-area-inset-bottom))}
}

/* CLUB en escritorio: beneficios, reservas y pedidos de a dos, en vez de renglones de 700 px */
@media (min-width:1280px){
  #app:has(> .bloque > .socio) .lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* lo que ya no se desliza (los rubros entran todos; las tarjetas y los momentos pasan a grilla) no muestra la manito de arrastrar */
.cats,.cats.arrastra{cursor:auto}
@media (min-width:1180px){
  .riel.tarjetas,.riel.tarjetas.arrastra{cursor:auto}
}

/* ---------- con mouse: las piezas responden al pasar ---------- */
@media (hover:hover){
  #barra button:not(.on):hover{color:var(--hueso)}
  .btn:hover,.pl-mas:hover,.pc-pie i:hover,.juego-ir:hover{filter:brightness(1.08)}
  .plato:hover,.pcard:hover,.fila:hover,.rapido button:hover{border-color:rgba(242,101,34,.5)}
  .tar:hover,.momento:hover{transform:translateY(-3px);transition:transform .2s}
  .cats button:not(.on):hover,.chips button:not(.on):hover{border-color:rgba(242,101,34,.5);color:var(--hueso)}
}

/* notebook (1366×650): el anuncio del local va al lado del saludo, así no suma un renglón y la fila de botones de las
   tarjetas («Pedila ya», «Reservar») sigue arriba del dock */
@media (min-width:1180px) and (max-height:720px){
  .hola{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:24px}
  .hola .rotulo{grid-column:1/-1}
  .hola .anuncio{margin:0}
}