/* flat&white · pantallas anchas
   Se carga después de style.css sólo desde 700px de ancho y 500px de alto.
   El contenido se centra; los fondos y las capas siguen ocupando la ventana. */
:root {
  --ancho-col: min(1080px, calc(100vw - 48px));
  --ancho-gut: max(24px, calc((100vw - 1080px) / 2));
}

/* La app deja de comportarse como una pantalla de teléfono. */
body { display: block; min-height: 100dvh; background: var(--humo); }
main { padding-bottom: calc(66px + var(--seguro) + 64px); }

/* Cabecera fija y portada a sangre: el texto queda alineado con la columna. */
.top { padding-inline: var(--ancho-gut); }
.hd {
  min-height: 430px;
  padding: 94px var(--ancho-gut) 220px;
  margin-top: -60px;
}
.saludo, .hd .mesa-acciones, .hd .wifi { width: var(--ancho-col); max-width: 100%; margin-left: auto; margin-right: auto; }
.saludo { z-index: 3; }
.hd-acc { gap: 12px; }

/* Riel de tarjetas: conserva el tamaño de las tarjetas y muestra dos o tres. */
.rail {
  margin: -246px 0 0;
  padding: 120px var(--ancho-gut) 34px;
  scroll-padding-inline: var(--ancho-gut);
  gap: 14px;
}
.hc { flex: 0 0 min(360px, 46vw); max-width: 360px; }
.under, #v-inicio > .cinta-caja, #v-inicio > .seccion-tit, #v-inicio > .seccion-sub,
#v-inicio > .casa, #v-inicio > .vitrina, #v-inicio > .diferencia, #v-inicio > .de-carta,
#v-inicio > .sucursales, #v-inicio > .pie-app {
  width: var(--ancho-col);
  max-width: calc(100% - 48px);
  margin-left: auto;
  margin-right: auto;
}
.under { padding-inline: 0; }
#v-inicio > .cinta-caja { width: 100%; max-width: none; }
#v-inicio > .cinta-caja .cinta { width: var(--ancho-col); max-width: calc(100% - 48px); margin: 0 auto; }
.seccion-tit { margin-top: 46px; }
.seccion-sub { margin-top: 10px; }

/* Fotos del local más grandes sin perder el riel horizontal. */
#v-inicio > .casa { padding: 18px 0 6px; gap: 14px; }
#v-inicio > .casa.foco .casa-f,
#v-inicio > .casa.foco .casa-f:first-child {
  flex-basis: clamp(250px, 28vw, 360px);
  max-width: 360px;
}

/* La vitrina conserva tabs y paneles, pero el panel usa datos | bolsa. */
#v-inicio > .vitrina { margin-top: 18px; }
.vitrina .vt-tabs { margin-inline: 0; padding-inline: 0; }
.vitrina .vt-panel { padding: 28px 32px 24px; }
.vitrina .vt-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(220px, 30%); gap: 24px; }
.vitrina .vt-foto { width: 100%; }

/* La diferencia: las tres tazas no crecen más que en un iPad. */
#v-inicio > .diferencia .dif-fotos { max-width: 720px; margin-inline: auto; gap: 28px; }

/* El DOM deja estos bloques separados por la vitrina; quedan centrados y legibles. */
#v-inicio > .b-club, #v-inicio > .b-juego {
  width: min(720px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}
#v-inicio > .b-club { padding: 30px 28px 24px; grid-template-columns: minmax(0, 1fr) 180px; }
#v-inicio > .b-club .mini-torre { height: 220px; }
#v-inicio > .b-juego { min-height: 280px; padding: 28px 28px 24px; }
#v-inicio > .b-juego .escena { width: 190px; height: 250px; }

/* Inicio: mosaico y sucursales dentro de la misma columna. */
#v-inicio > .de-carta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 18px 0 0; }
#v-inicio > .de-carta .dc:first-child { grid-column: span 2; }
#v-inicio > .sucursales { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 42px; margin-top: 12px; }
#v-inicio > .sucursales .suc-card { width: 100%; }
#v-inicio > .pie-app { margin-top: 52px; }

/* Carta: cabecera, chips y cada sección comparten ancho; la onda sigue midiendo la sección real. */
#v-carta .carta-cab, #v-carta .chips-sec, #v-carta > .sec, #v-carta > .leches {
  width: var(--ancho-col);
  max-width: calc(100% - 48px);
  margin-left: auto;
  margin-right: auto;
}
#v-carta .carta-cab { padding: 24px 0 8px; }
#v-carta .chips-sec { padding: 12px 0; }
#v-carta > .sec { padding: 34px 0 6px; }
#v-carta > .leches { margin-top: 22px; margin-bottom: 0; }
#v-carta .items { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 5vw, 72px); }
#v-carta .cafes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#v-carta .cafe-card { min-height: 242px; padding: 14px 16px 16px; }
#v-carta .cafe-card .ct { height: 132px; }

/* Tus tazas: una pieza central de lectura cómoda. */
#v-tazas .club-cab, #v-tazas > .mi-torre, #v-tazas > .qr-card,
#v-tazas > .seccion-tit, #v-tazas > .beneficios, #v-tazas > .historial {
  width: min(720px, calc(100% - 48px));
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#v-tazas .club-cab { padding: 24px 0 0; }
#v-tazas > .mi-torre { min-height: 380px; margin-top: 24px; padding: 28px 30px; }
#v-tazas .mi-torre .pila { height: 340px; }
#v-tazas > .qr-card { margin-top: 14px; padding: 20px; }
#v-tazas > .seccion-tit { margin-top: 46px; }
#v-tazas > .beneficios, #v-tazas > .historial { margin-top: 12px; }

/* Tienda: la foto queda a sangre; títulos y productos se alinean a la columna. */
#v-tienda .tienda-cab { min-height: 360px; padding: 132px var(--ancho-gut) 34px; }
#v-tienda .tienda-cab > * { width: var(--ancho-col); max-width: 100%; margin-left: auto; margin-right: auto; }
#v-tienda > .seccion-tit, #v-tienda > .grilla, #v-tienda > .pie-nota {
  width: var(--ancho-col);
  max-width: calc(100% - 48px);
  margin-left: auto;
  margin-right: auto;
}
#v-tienda > .seccion-tit { margin-top: 42px; }
#v-tienda > .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; padding: 18px 0 0; }
#v-tienda > .pie-nota { margin-top: 28px; }

/* Dock flotante y pedido, con una separación segura también en notebooks bajas. */
.barra {
  left: 50%; right: auto; bottom: calc(18px + var(--seguro));
  width: min(520px, calc(100% - 48px)); max-width: none; height: 66px;
  margin: 0; transform: translateX(-50%); border-radius: 30px;
}
.barra .b-taza { top: -24px; }
.pedido-flota {
  bottom: calc(118px + var(--seguro));
  max-width: calc(100% - 48px);
}

/* Las hojas conservan subir/bajar del original, pero pasan a ser diálogos. */
.hoja {
  left: 50%; right: auto; top: 50%; bottom: auto;
  width: min(600px, calc(100% - 48px)); max-height: 88dvh;
  border-radius: 30px; translate: -50% -50%;
  padding-bottom: calc(22px + var(--seguro));
}
.hoja-in { padding-inline: 28px; }

/* El juego mantiene el fondo a pantalla completa y centra su tablero lógico. */
.j-cab, .j-pista {
  left: 50%; right: auto; width: var(--ancho-col); max-width: calc(100% - 48px);
  transform: translateX(-50%);
}
.j-cab { padding-inline: 0; }
.j-mundo { left: 0; right: 0; width: auto; max-width: none; transform: none; }
.j-pista { left: 50%; }
.j-panel { left: 16px; right: 16px; width: auto; transform: none; }
.aviso { max-width: min(520px, calc(100% - 48px)); }

@media (min-width: 1100px) {
  #v-inicio > .casa.foco .casa-f,
  #v-inicio > .casa.foco .casa-f:first-child { flex-basis: 330px; max-width: 400px; }
  #v-inicio > .sucursales { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
  #v-carta .cafes-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  #v-carta .cafe-card .ct { height: 142px; }
  #v-tienda > .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  #v-carta .cafes-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #v-carta .cafe-card { min-height: 236px; padding-inline: 14px; }
  #v-carta .cafe-card .ct { height: 132px; }
}