/* EDDIE BURGERS · iPad y compu. Se enlaza con media="(min-width: 700px) and (min-height: 500px)": un teléfono
   (parado o acostado) no la lee. La app ocupa toda la ventana con la estética de agosto: cabecera de vidrio de
   borde a borde, contenido a dos columnas, píldora de pestañas abajo al medio y hojas como diálogo centrado.
   En iPad parado (744 a 834 px) nada de tres columnas finitas. */
body { padding-bottom: 170px; }
#app { max-width: 1120px; padding: 0 24px; overflow-x: visible; }
.cab { margin: 0 calc(50% - 50vw); padding-left: max(24px, calc(50vw - 536px)); padding-right: max(24px, calc(50vw - 536px)); }
.cab-in { max-width: none; }
.cab-local, .cab-pts { display: inline-flex; }
.cab-marca img { width: 44px; height: 44px; }

#barra { width: 520px; height: 68px; bottom: 18px; }
.regalo-bar { width: 520px; bottom: 96px; }

/* inicio: dos columnas */
.inicio { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 22px; align-items: start; grid-auto-flow: row dense; }
.inicio > * { grid-column: 1 / -1; min-width: 0; }
.saludo { padding: 22px 2px 0; }
.saludo p { font-size: 28px; }
.anuncio { margin: 14px 0 0; }
.esp-hero { grid-column: 1; margin: 16px 0 0; min-height: 640px; }
.sin-mesa .esp-hero { grid-row: span 3; }
.sin-mesa #vivo-dl { grid-column: 2; margin-top: 16px; }
.sin-mesa #vivo-dl .pedi { margin: 0; }
.sin-mesa #vivo-dl .pedi-t { min-height: 190px; }
.sin-mesa #vivo-dl .dl-sigue { width: 100%; margin: 0; }
.inicio .mierc { grid-column: 2; margin: 14px 0 0; }
.con-mesa #vivo-mesa { grid-column: 2; grid-row: 1 / span 3; margin-top: 16px; }
.con-mesa #vivo-mesa .mesa-b { margin: 0; }
.con-mesa .esp-hero { grid-row: 1 / span 3; }
.con-mesa #vivo-anuncio { grid-column: 2; }
.con-mesa .mierc { grid-column: 1 / -1; }
.hist-riel .tit-fila, .tickets-b .tit-fila, #vivo-top .tit-fila { padding: 0 2px; }
.aros { padding: 4px 2px 8px; gap: 18px; }
.aro { width: 96px; }
.aro-c { width: 92px; height: 92px; }
.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; overflow: visible; padding: 4px 0 10px; }
.ticket-c { max-width: none; flex: none; }
#vivo-top .top4 { grid-template-columns: repeat(4, 1fr); padding: 0; gap: 14px; }
.local { margin: 30px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: start; }
.local > .placa, .local > .lo-dir, .local > .lo-est, .local > .lo-botones { grid-column: 1; }
.local > .horas { grid-column: 2; grid-row: 1 / span 4; margin: 0; }

/* carta: lista a dos columnas */
.carta-top { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 6px 28px; padding: 26px 2px 10px; }
.carta-top .placa { grid-row: 1 / span 2; font-size: 40px; }
.carta-sub { margin: 0; }
.chips-cat { margin: 0 calc(50% - 50vw); padding: 10px max(26px, calc(50vw - 534px)); top: 65px; }
.sec { padding: 0 2px; }
.prods { grid-template-columns: 1fr 1fr; gap: 12px; }
.prod { grid-template-columns: 104px 1fr; }
.prod-foto { width: 104px; height: 104px; }

/* hoja como diálogo */
.hoja { align-items: center; padding: 24px; }
.hoja-caja { border-radius: 24px; max-height: min(88vh, 900px); transform: translateY(24px) scale(.97); opacity: 0; transition: transform .28s cubic-bezier(.2,.9,.25,1), opacity .2s; box-shadow: 0 30px 60px rgba(0,0,0,.3); }
.hoja.abierta .hoja-caja { transform: none; opacity: 1; }
.hoja.chica .hoja-caja { max-width: 480px; }

.hi { max-width: 560px; }

/* especial, club, pedido: columna central en iPad parado */
.especial, .club, .pedido, .seguir { max-width: 680px; margin: 0 auto; }
.es-hero, .album, .detras { margin-left: 0; margin-right: 0; }
.especial .bloque { padding: 0; }
.figus { grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* compu e iPad acostado */
@media (min-width: 1000px) {
  .esp-hero { min-height: 660px; }
  .eh-nombre { font-size: 88px; }
  .eh-burger { width: min(76%, 470px); margin-left: calc(min(76%, 470px) / -2); top: 64px; }
  .especial { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 26px; align-items: start; }
  .es-hero { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: 84px; }
  .album, .detras, .especial .bloque { grid-column: 2; }
  .album { margin-top: 14px; }
  .figus { grid-template-columns: repeat(2, 1fr); }
  .club { max-width: none; display: grid; grid-template-columns: 400px minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .club > * { grid-column: 2; }
  .club > .credencial { grid-column: 1; grid-row: 1 / span 6; position: sticky; top: 84px; }
  .club > .pie { grid-column: 1 / -1; }
  .club > .bloque:first-of-type { margin-top: 0; }
  .canjes { grid-template-columns: 1fr 1fr; }
  .pedido { max-width: none; }
  .ck-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 24px; align-items: start; }
  .ck-grid > .ck-sec { grid-column: 1; }
  .ck-grid > #ck-resumen { grid-column: 2; grid-row: 1; }
  .ck-grid > .ck-final { grid-column: 2; grid-row: 2 / span 5; position: sticky; top: 84px; }
  .pm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .seguir { max-width: none; }
  .seg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
}
@media (min-width: 1200px) {
  .prods { grid-template-columns: repeat(3, 1fr); }
}
/* iPad parado: la especial a lo ancho; delivery y el miércoles al lado */
@media (max-width: 999px) {
  .sin-mesa .esp-hero { grid-column: 1 / -1; grid-row: auto; min-height: 600px; }
  .sin-mesa #vivo-dl { grid-column: 1; }
  .inicio .mierc { grid-column: 2; margin-top: 16px; }
  .sin-mesa #vivo-dl .pedi { grid-template-columns: 1fr; }
  .sin-mesa #vivo-dl .pedi-t { min-height: 140px; }
  .con-mesa #vivo-mesa { grid-column: 1 / -1; grid-row: auto; }
  .con-mesa .esp-hero { grid-column: 1 / -1; grid-row: auto; min-height: 600px; }
  .ticket-c { padding-left: 52px; }
  .ticket-c h3 { font-size: 21px; }
  .ticket-c p { font-size: 13.5px; }
}
/* ventanas bajas (notebook con el navegador sin maximizar) */
@media (max-height: 720px) {
  .esp-hero { min-height: 560px; }
  .eh-burger { width: min(60%, 340px); margin-left: calc(min(60%, 340px) / -2); }
}