/* ==========================================================================
   Menú público · plantilla v2
   Se carga sólo cuando la cuenta tiene encendida la plantilla nueva
   (lib/menu-v2.php) y todas las reglas cuelgan de body.gm-menu-v2: el marcado
   es el mismo de la plantilla original. Colores y fuentes siguen saliendo del
   Customizer; aquí van la composición, los espacios, los tamaños y las formas.

   Radios: una sola familia. --gmv2-r (16 px) para lo que es una caja (cabecera,
   barra de categorías, cabecera del local, tarjetas); --gmv2-r-in (10 px) para
   lo que va dentro de una caja con 6 px de aire (foto de la tarjeta, video de
   la cabecera, el selector de idioma); píldora para fichas y botones chicos.
   Los grises con alfa (--gmv2-line, --gmv2-surface) se leen igual sobre menús
   claros y oscuros.
   ========================================================================== */

@property --pop-bg {
    syntax: '<color>';
    inherits: true;
    initial-value: #1c1c1e;
}

body.gm-menu-v2 {
    --gmv2-r: 14px;
    --gmv2-r-in: 8px;
    --gmv2-inset: 6px;
    --gmv2-card-inset: 4px;
    --gmv2-hdr-h: 72px;
    --gmv2-nav-h: 46px;
    --gmv2-top: 12px;
    --gmv2-max: 1240px;
    --gmv2-pad: 12px;
    --gmv2-stack: calc(var(--gmv2-top) + var(--gmv2-hdr-h));
    --gmv2-gris: #6b6b6b;
    --gmv2-line: rgba(127, 127, 127, .24);
    --gmv2-surface: rgba(127, 127, 127, .14);
    --gmv2-surface-hi: rgba(127, 127, 127, .22);
    --gmv2-ease: cubic-bezier(.2, .7, .2, 1);
    --gmv2-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
    --gmv2-heart-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
    --gmv2-like-on: #eb4649;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

@media (min-width: 900px) {
    body.gm-menu-v2 {
        --gmv2-top: 16px;
        --gmv2-pad: max(40px, calc((100vw - var(--gmv2-max)) / 2));
    }
}

/* íconos del panel (menu-v2.js): 1em, heredan el color */
body.gm-menu-v2 .gmv2-ic {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    vertical-align: -.14em;
    overflow: visible;
}

body.gm-menu-v2 i.gmv2-fa::before,
body.gm-menu-v2 i.gmv2-fa::after {
    content: none !important;
    display: none !important;
}

body.gm-menu-v2 i.gmv2-fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    line-height: 1;
}

/* ───────────────────────── 1 · Cabecera ───────────────────────── */

/* Flota: despegada del borde, en cápsula de vidrio con el color de la cuenta
   (menu-v2.js lo deja en --gmv2-hdr con alfa). Sin línea abajo. */
body.gm-menu-v2 .ast-container > header {
    top: var(--gmv2-top);
    left: var(--gmv2-pad);
    right: var(--gmv2-pad);
    width: auto;
    height: var(--gmv2-hdr-h);
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    border-radius: var(--gmv2-r);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

body.gm-menu-v2 .ast-container > header > div:first-child {
    flex: none;
    height: var(--gmv2-hdr-h);
}

body.gm-menu-v2.gmv2-hdr-dark {
    --gmv2-gris: #afafaf;
}

/* En los menús, la cabecera, la cabecera del local y la barra de categorías
   son una sola pieza fija con el mismo vidrio: menu-v2.js mete la del local
   (en .gmv2-marca-caja) y la barra dentro de la cabecera. La del local se
   pliega por gesto, no por cuánto se bajó: bajar la cierra y llegar arriba
   subiendo la abre (.gmv2-plegada en el body), rápido, como en una app. #main
   cambia su padding de una vez y menu-v2.js desliza lo que está a la vista
   con transform, así el contenido sube y baja con ella sin mover toda la
   carta en cada cuadro. --gmv2-marca-h es su alto abierta (lo mide
   menu-v2.js). */
body.gm-menu-v2 {
    --gmv2-filo: transparent;
    --gmv2-suave: cubic-bezier(.2, .9, .3, 1);
    --gmv2-pliegue: .15s;
    /* abrir va más despacio y con una curva más pareja: se siente más suave */
    --gmv2-suave-abrir: cubic-bezier(.22, .61, .36, 1);
    --gmv2-pliegue-abrir: .28s;
}

body.gm-menu-v2.gmv2-hdr-dark {
    --gmv2-filo: rgba(255, 255, 255, .07);
}

body.gm-menu-v2.gmv2-con-barra {
    --gmv2-stack: calc(var(--gmv2-top) + var(--gmv2-hdr-h) + var(--gmv2-nav-h) + var(--gmv2-marca-h, 0px));
    --gmv2-stack-plegada: calc(var(--gmv2-top) + var(--gmv2-hdr-h) + var(--gmv2-nav-h));
}

/* plegada cambian sólo #main y el aviso de la búsqueda (si cambiara la
   variable del body, el navegador recalcularía la página entera), y al final
   del pliegue: menu-v2.js pone .gmv2-plegada-carta cuando la cabecera ya
   terminó, mientras tanto la carta se desliza con transform */
body.gm-menu-v2.gmv2-con-barra.gmv2-plegada-carta #main {
    padding-top: calc(var(--gmv2-stack-plegada) + 8px);
}

body.gm-menu-v2.gmv2-con-barra.gmv2-plegada-carta .gmv2-vacio {
    min-height: calc(100vh - var(--gmv2-stack-plegada) - 8px);
    min-height: calc(100dvh - var(--gmv2-stack-plegada) - 8px);
}

body.gm-menu-v2.gmv2-con-barra .ast-container > header {
    height: auto;
    justify-content: flex-start;
    padding-bottom: 0;
}

body.gm-menu-v2.gmv2-con-barra #main {
    padding-top: calc(var(--gmv2-stack) + 8px);
}

body.gm-menu-v2 .gmv2-marca-caja {
    display: grid;
    flex: none;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--gmv2-pliegue) var(--gmv2-suave);
    will-change: grid-template-rows;
}

body.gm-menu-v2 .gmv2-marca-caja > #header-marca {
    min-height: 0;
    overflow: hidden;
    /* todo a la vez y con la misma curva: el contenido se va mientras la caja
       se cierra (antes se apagaba primero y la caja quedaba vacía un rato) */
    transition: opacity var(--gmv2-pliegue) var(--gmv2-suave), transform var(--gmv2-pliegue) var(--gmv2-suave), padding var(--gmv2-pliegue) var(--gmv2-suave);
}

body.gm-menu-v2.gmv2-plegada .gmv2-marca-caja {
    grid-template-rows: 0fr;
}

/* el padding no se pliega con la fila: también va a cero */
body.gm-menu-v2.gmv2-plegada .gmv2-marca-caja > #header-marca {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
}

/* ── el pliegue en la GPU ──
   Con el pliegue, el vidrio de la cabecera (color, desenfoque, contorno y
   sombra) va en piezas propias detrás del contenido (menu-v2.js las pone en
   .gmv2-vidrio): plegar y abrir se hace sólo con transform y opacidad, sin
   recalcular estilos ni diseño en cada cuadro. Quieta se ve igual que antes. */
body.gm-menu-v2 .ast-container > header.gmv2-con-vidrio[style*="--gmv2-hdr"] {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

body.gm-menu-v2 .ast-container > header:not([style*="--gmv2-hdr"]) > .gmv2-vidrio {
    display: none;
}

body.gm-menu-v2 .gmv2-vidrio,
body.gm-menu-v2 .gmv2-vidrio > *,
body.gm-menu-v2 .gmv2-vidrio-fondo {
    position: absolute;
    inset: 0;
    border-radius: var(--gmv2-r);
    pointer-events: none;
}

body.gm-menu-v2 .gmv2-vidrio {
    z-index: -1;
}

body.gm-menu-v2 .gmv2-vidrio-sombra {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    transform-origin: 50% 0;
}

body.gm-menu-v2.gmv2-hdr-dark .gmv2-vidrio-sombra {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

body.gm-menu-v2 .gmv2-vidrio-ventana {
    overflow: hidden;
}

body.gm-menu-v2 .gmv2-vidrio-fondo {
    background-color: var(--gmv2-hdr);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: inset 0 0 0 1px var(--gmv2-filo);
}

/* el contorno de abajo mientras sube (quieta lo dibuja el vidrio) */
body.gm-menu-v2 .gmv2-vidrio-borde {
    top: auto;
    height: var(--gmv2-r);
    border: 1px solid var(--gmv2-filo);
    border-top: 0;
    border-radius: 0 0 var(--gmv2-r) var(--gmv2-r);
    opacity: 0;
}

/* la caja es la ventana de la cabecera del local; sin transiciones de CSS:
   el movimiento lo hace menu-v2.js */
body.gm-menu-v2 header.gmv2-con-vidrio .gmv2-marca-caja {
    overflow: hidden;
}

body.gm-menu-v2 header.gmv2-con-vidrio .gmv2-marca-caja,
body.gm-menu-v2 header.gmv2-con-vidrio .gmv2-marca-caja > #header-marca {
    transition: none !important;
}

/* al tocar una categoría el pliegue es instantáneo: frontend.js calcula
   adónde bajar con la cabecera ya plegada */
body.gm-menu-v2.gmv2-sin-transicion #main,
body.gm-menu-v2.gmv2-sin-transicion .gmv2-marca-caja,
body.gm-menu-v2.gmv2-sin-transicion .gmv2-marca-caja > #header-marca {
    transition: none !important;
}

/* La franja sobre la cabecera: lo que sube no se ve por encima de ella ni
   asoma en sus esquinas. Es el fondo de la página copiado (color e imagen, en
   la misma posición: menu-v2.js deja --gmv2-pagina*), sólido hasta pasar las
   esquinas de la cabecera y desvanecido hacia abajo, sin línea recta. */
body.gm-menu-v2.gmv2-con-barra > .gmv2-franja {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8;
    height: calc(var(--gmv2-top) + var(--gmv2-r) + 26px);
    background-color: var(--gmv2-pagina, transparent);
    background-image: var(--gmv2-pagina-img, none);
    background-size: var(--gmv2-pagina-tam, auto);
    background-repeat: var(--gmv2-pagina-rep, repeat);
    background-position: var(--gmv2-pagina-pos, 0 0);
    -webkit-mask-image: linear-gradient(#000 0, #000 calc(var(--gmv2-top) + var(--gmv2-r)), transparent 100%);
    mask-image: linear-gradient(#000 0, #000 calc(var(--gmv2-top) + var(--gmv2-r)), transparent 100%);
    pointer-events: none;
}

body.gm-menu-v2 .ast-container > header[style*="--gmv2-hdr"] {
    background-color: var(--gmv2-hdr) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
}

body.gm-menu-v2.gmv2-hdr-dark .ast-container > header {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .07);
}

body.gm-menu-v2 .ast-container > header > div {
    gap: 12px;
}

body.gm-menu-v2 .ast-container > header .site-logo,
body.gm-menu-v2 .ast-container > header .brand-logo {
    height: auto;
}

/* Gourmedia, como en el panel: el PNG blanco a #cbcbcb */
body.gm-menu-v2 .ast-container > header .site-logo img {
    max-width: 96px;
    max-height: 26px;
}

body.gm-menu-v2.gmv2-hdr-dark .ast-container > header .site-logo img {
    filter: brightness(.796);
}

/* logo propio del sitio en vez del par Gourmedia + marca: es el único, va más grande */
body.gm-menu-v2 .ast-container > header:not(:has(.brand-logo)) .site-logo img {
    max-width: 150px;
    max-height: 44px;
    filter: none;
}

/* el logo de la marca es lo que más importa de la cabecera */
body.gm-menu-v2 .ast-container > header .brand-logo img {
    max-width: 160px;
    max-height: 60px;
    border-radius: var(--gmv2-r-in);
}

body.gm-menu-v2 .ast-container > header .tools {
    gap: 6px;
}

/* idioma: ficha con la bandera en círculo y un chevron; la lista baja pegada a
   la ficha, como una sola pieza, con el fondo de la cabecera */
body.gm-menu-v2 #lang-menu,
body.gm-menu-v2 #lang-menu.active {
    --gmv2-lang-line: rgba(0, 0, 0, .14);
    position: relative;
    margin-right: 10px;
    border: 1px solid var(--gmv2-lang-line);
    border-radius: var(--gmv2-r-in);
    background-color: transparent !important;
    transition: border-radius .15s var(--gmv2-ease);
}

body.gm-menu-v2.gmv2-hdr-dark #lang-menu,
body.gm-menu-v2.gmv2-hdr-dark #lang-menu.active {
    --gmv2-lang-line: rgba(255, 255, 255, .16);
}

body.gm-menu-v2 #lang-menu.active {
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: var(--gmv2-hdr-visto, var(--gmv2-glass-solid, #000)) !important;
}

/* el gris secundario del panel y su tipografía de sistema */
body.gm-menu-v2 #lang-menu .lang-opt {
    width: auto;
    height: 32px;
    padding: 0 11px 0 9px;
    align-items: center;
    grid-gap: 6px;
    color: var(--gmv2-gris);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
}

body.gm-menu-v2 #lang-menu img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

body.gm-menu-v2 #lang-switcher {
    top: 100%;
    left: -1px;
    right: -1px;
    margin: 0;
    min-width: 0;
    border: 1px solid var(--gmv2-lang-line);
    border-top: 0;
    border-radius: 0 0 var(--gmv2-r-in) var(--gmv2-r-in);
    background-color: var(--gmv2-hdr-visto, var(--gmv2-glass-solid, #000)) !important;
    overflow: hidden;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .28);
    z-index: 1001;
}

/* las opciones, con el mismo aire que la ficha; sin el chevron */
body.gm-menu-v2 #lang-switcher .lang-opt {
    height: 34px;
    padding-right: 9px;
}

body.gm-menu-v2 #lang-switcher .lang-opt:hover {
    background-color: var(--gmv2-surface);
}

/* Idioma: el globo y el código; al tocarlo, un menú suelto con el nombre de
   cada idioma (menu-v2.js, iniciarIdiomas). Reemplaza la ficha original. */
body.gm-menu-v2.gmv2-idiomas-on #lang-menu {
    display: none;
}

body.gm-menu-v2 .gmv2-idi {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
}

body.gm-menu-v2 .gmv2-idi button {
    margin: 0;
    border: 0;
    background: none;
    color: var(--gmv2-gris);
    font: inherit;
    cursor: pointer;
}

body.gm-menu-v2 .gmv2-idi-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--gmv2-r-in);
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
    transition: background-color .15s var(--gmv2-ease);
}

body.gm-menu-v2 .gmv2-idi-btn .gmv2-ic {
    font-size: 16px;
}

body.gm-menu-v2 .gmv2-idi-btn:hover,
body.gm-menu-v2 .gmv2-idi.is-open .gmv2-idi-btn {
    background-color: var(--gmv2-surface);
}

/* el menú: suelto, con el color con que se ve la cabecera */
body.gm-menu-v2 .gmv2-idi-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1001;
    display: none;
    flex-direction: column;
    min-width: 172px;
    padding: 5px;
    border-radius: var(--gmv2-r);
    background-color: var(--gmv2-hdr-visto, #161616);
    box-shadow: 0 0 0 1px var(--gmv2-line), 0 18px 40px rgba(0, 0, 0, .35);
}

body.gm-menu-v2 .gmv2-idi.is-open .gmv2-idi-menu {
    display: flex;
    animation: gmv2-velo .15s ease;
}

body.gm-menu-v2 .gmv2-idi-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 10px;
    border-radius: calc(var(--gmv2-r) - 5px);
    color: inherit;
    font-size: 13.5px;
    text-align: left;
    white-space: nowrap;
}

body.gm-menu-v2 .gmv2-idi-menu button {
    color: #1c1c1e !important;
}

body.gm-menu-v2.gmv2-hdr-dark .gmv2-idi-menu button {
    color: #fff !important;
}

body.gm-menu-v2:not(.gmv2-hdr-dark) .gmv2-idi-menu button:hover {
    background-color: rgba(0, 0, 0, .05);
}

body.gm-menu-v2:not(.gmv2-hdr-dark) .gmv2-idi-menu .gmv2-idi-cod {
    color: #8a8a8e;
}

body.gm-menu-v2 .gmv2-idi-menu button:hover {
    background-color: var(--gmv2-surface);
}

body.gm-menu-v2 .gmv2-idi-menu button > span:not(.gmv2-idi-cod) {
    flex: 1 1 auto;
    opacity: .9;
}

body.gm-menu-v2 .gmv2-idi-menu .gmv2-idi-cod {
    width: 22px;
    color: var(--gmv2-gris);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
}

body.gm-menu-v2 .gmv2-idi-menu .gmv2-idi-ok {
    font-size: 15px;
    opacity: .7;
}

/* favoritos: el corazón solo, sin círculo; el contador, un globo */
body.gm-menu-v2:not(.gmv2-cart).page-template-landing-page #like-toggle {
    position: relative;
    top: auto;
    right: auto;
    width: 40px;
    height: 40px;
    border: 0;
    background-image: none !important;
    color: #111;
    cursor: pointer;
}

body.gm-menu-v2.gmv2-hdr-dark:not(.gmv2-cart).page-template-landing-page #like-toggle {
    color: #fff;
}

body.gm-menu-v2:not(.gmv2-cart).page-template-landing-page #like-toggle::before {
    content: '';
    position: absolute;
    inset: 8px;
    background-color: currentColor;
    -webkit-mask: var(--gmv2-heart) center / contain no-repeat;
    mask: var(--gmv2-heart) center / contain no-repeat;
}

body.gm-menu-v2:not(.gmv2-cart).page-template-landing-page #like-toggle.active::before {
    background-color: var(--gmv2-like-on);
    -webkit-mask-image: var(--gmv2-heart-fill);
    mask-image: var(--gmv2-heart-fill);
}

body.gm-menu-v2.page-template-landing-page #like-toggle .counter {
    position: absolute;
    top: 3px;
    left: auto;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--gmv2-like-on);
    color: #fff !important;
    font-size: 10px;
    line-height: 17px;
    text-align: center;
}

body.gm-menu-v2 #main {
    padding-top: calc(var(--gmv2-stack) + 8px);
}

/* ───────────────────────── 2 · Pantalla principal ───────────────────────── */

body.gm-menu-v2.page-template-landing-home #main {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: calc(var(--gmv2-stack) + 18px);
    padding-bottom: 0;
}

body.gm-menu-v2.page-template-landing-home #main > .max-w-md {
    max-width: 372px;
    min-height: 0;
    /* #main es flex en fila: estirada, la caja tomaba el alto del marco y los
       últimos widgets se salían por debajo de su padding (pegados al final) */
    align-self: flex-start;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
}

body.gm-menu-v2.page-template-landing-home #main > .max-w-md > * + * {
    margin-top: 10px;
}

body.gm-menu-v2.page-template-landing-home #main > .max-w-md > img[data-img-src="logo-marca"] {
    margin-bottom: 12px;
}

body.gm-menu-v2.page-template-landing-home .menu-block,
body.gm-menu-v2.page-template-landing-home .link-block {
    min-height: 52px;
    padding: 14px 20px;
    align-items: center;
    border-width: 1px !important;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: .03em;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    transition: transform .18s var(--gmv2-ease), opacity .18s var(--gmv2-ease), background-color .2s var(--gmv2-ease);
}

body.gm-menu-v2.page-template-landing-home .menu-block:active,
body.gm-menu-v2.page-template-landing-home .link-block:active {
    transform: scale(.985);
    opacity: .85;
}

@media (hover: hover) {
    body.gm-menu-v2.page-template-landing-home .menu-block:hover,
    body.gm-menu-v2.page-template-landing-home .link-block:hover {
        background-image: linear-gradient(var(--gmv2-surface), var(--gmv2-surface));
    }
}

body.gm-menu-v2.page-template-landing-home #main .nombre_marca_rrss {
    gap: 8px;
    margin-top: 20px;
}

body.gm-menu-v2.page-template-landing-home #main .nombre_marca_rrss a {
    width: 42px;
    height: 42px;
    border-width: 1px !important;
    font-size: 18px;
}

body.gm-menu-v2.page-template-landing-home .text-block {
    font-size: 15px;
    line-height: 1.5;
}

/* Escritorio: la pantalla principal se ve como en el teléfono, centrada sobre un
   fondo que sale de su propio color (menu-v2.js deja --gmv2-stage*). El
   transform del marco hace que la cabecera fija quede dentro. Las pantallas
   legacy (contenido de Elementor) siguen a todo el ancho. */
@media (min-width: 900px) and (min-height: 560px) {
    body.gm-menu-v2.page-template-landing-home:has(#main > .max-w-md) {
        --gmv2-dev-w: 412px;
        --gmv2-dev-h: min(880px, calc(100vh - 64px));
        --gmv2-top: 12px;
        --gmv2-pad: 12px;
        overflow: hidden;
        background-color: var(--gmv2-stage, #0c0d0e);
        background-image: radial-gradient(1100px 620px at 50% -8%, var(--gmv2-stage-glow, rgba(127, 127, 127, .22)), transparent 72%);
        background-attachment: fixed;
    }

    body.gm-menu-v2.page-template-landing-home:has(#main > .max-w-md)::before {
        content: '';
        position: fixed;
        inset: -80px;
        z-index: 0;
        background-image: var(--gmv2-stage-img, none);
        background-size: cover;
        background-position: center;
        filter: blur(56px) brightness(.5) saturate(1.2);
        pointer-events: none;
    }

    body.gm-menu-v2.page-template-landing-home:has(#main > .max-w-md) #page {
        position: relative;
        z-index: 1;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
    }

    body.gm-menu-v2.page-template-landing-home:has(#main > .max-w-md) #content {
        flex: 0 0 auto;
    }

    body.gm-menu-v2.page-template-landing-home:has(#main > .max-w-md) #content > .ast-container {
        display: block;
        width: var(--gmv2-dev-w);
        max-width: none;
        height: var(--gmv2-dev-h);
        margin: 0;
        padding: 0;
        /* concéntrico con la cabecera: su radio + los 12 px de aire */
        border-radius: calc(var(--gmv2-r) + 12px);
        overflow: hidden;
        transform: translateZ(0);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 120px rgba(0, 0, 0, .5);
    }

    body.gm-menu-v2.page-template-landing-home:has(#main > .max-w-md) #main {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: none;
    }

    body.gm-menu-v2.page-template-landing-home:has(#main > .max-w-md) #main::-webkit-scrollbar {
        display: none;
    }


    body.gm-menu-v2.page-template-landing-home:has(#main > .max-w-md) .back-button {
        left: calc(50% - var(--gmv2-dev-w) / 2 + 14px) !important;
        bottom: calc((100vh - var(--gmv2-dev-h)) / 2 + 14px) !important;
    }
}

/* ───────────────────────── 4 · Menú: cabecera del local ───────────────────────── */

/* Una caja con el color de la cabecera: la foto (o el video) con su proporción
   16:9 y 6 px de aire; al lado, en escritorio, la ficha del local. menu-v2.js
   arma las migas, los datos rotulados (HORARIO, DIRECCIÓN, MODALIDAD, DELIVERY)
   y los botones, los mismos del pie. */
body.gm-menu-v2 #header-marca {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0 var(--gmv2-pad);
    padding: var(--gmv2-inset);
    border-radius: var(--gmv2-r);
}

body.gm-menu-v2.gmv2-hdr-dark #header-marca {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

body.gm-menu-v2 #header-marca > .col-6 {
    display: block;
    min-width: 0;
}

body.gm-menu-v2 #intro-video {
    height: auto;
    padding-bottom: 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--gmv2-r-in);
}

/* pantalla sin imagen ni video de portada: no queda la caja negra */
body.gm-menu-v2 #intro-video[style*="url('')"] {
    display: none;
}

body.gm-menu-v2 #header-marca:has(#intro-video[style*="url('')"]) > .col-6:first-child {
    display: none;
}

body.gm-menu-v2 #intro-video .video-overlay img {
    width: 52px;
}

body.gm-menu-v2 #marca-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px 10px 12px;
}

body.gm-menu-v2 #marca-info .nombre_marca_rrss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 0;
}

body.gm-menu-v2 #marca-info h1 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-align: left;
    text-wrap: balance;
}

/* el título en formato de migas (menu-v2.js): «La marca › el menú»; la marca
   apagada, el menú claro */
body.gm-menu-v2 #marca-info h1.gmv2-tit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
}

body.gm-menu-v2 #marca-info h1 .gmv2-tit-marca {
    color: inherit;
    text-decoration: none;
    opacity: .5;
    transition: opacity .2s var(--gmv2-ease);
}

body.gm-menu-v2 #marca-info h1 a.gmv2-tit-marca:hover {
    opacity: .75;
}

body.gm-menu-v2 #marca-info h1 .gmv2-tit-sep {
    font-size: .72em;
    opacity: .4;
}

body.gm-menu-v2 #marca-info h1 .gmv2-tit-menu {
    opacity: .94;
}

/* redes: círculos con filete, como en el pie */
body.gm-menu-v2 #marca-info .rrss,
body.gm-menu-v2 #footer-marca .rrss-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 6px;
    margin: 0;
    justify-content: flex-start;
}

body.gm-menu-v2 #marca-info .rrss:empty {
    display: none;
}

body.gm-menu-v2 #marca-info .rrss a,
body.gm-menu-v2 #footer-marca .rrss-wrapper a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--gmv2-line);
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    transition: background-color .2s var(--gmv2-ease);
}

body.gm-menu-v2 #marca-info .rrss a i,
body.gm-menu-v2 #footer-marca .rrss-wrapper a i {
    margin: 0;
    font-size: 16px;
}

body.gm-menu-v2 #header-marca .separator {
    display: none;
}

body.gm-menu-v2 #marca-info .marca-info-content {
    display: block;
    width: auto;
    margin: 0;
}

body.gm-menu-v2 #marca-info .marca-info-content:empty,
body.gm-menu-v2 #marca-info .header-bottom > div:empty,
body.gm-menu-v2 #marca-info .header-bottom:empty {
    display: none;
}

/* un dato con su rótulo chico arriba: el mismo bloque en la cabecera del local y en el pie */
body.gm-menu-v2 .gmv2-datos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px 24px;
}

body.gm-menu-v2 .gmv2-dato {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Contraste medido: el blanco puro sobre negro se sentía duro (y de la
   plantilla vieja). Los valores van al 72 %, los rótulos al 45 %. */
body.gm-menu-v2 .gmv2-dato__k {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .45;
}

body.gm-menu-v2 .gmv2-dato__v {
    font-size: 14px;
    line-height: 1.45;
    opacity: .72;
}

body.gm-menu-v2 #marca-info .gmv2-dato__v {
    display: block;
}

body.gm-menu-v2 .gmv2-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.gm-menu-v2 .gmv2-chip,
body.gm-menu-v2 .gmv2-chip span {
    color: inherit !important;
}

body.gm-menu-v2 #marca-info .gmv2-chip span {
    display: inline;
    line-height: 1;
}

body.gm-menu-v2 .gmv2-chip,
body.gm-menu-v2 #marca-info .gmv2-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border: 1px solid var(--gmv2-line);
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1;
    white-space: nowrap;
}

body.gm-menu-v2 .gmv2-chip .gmv2-ic {
    font-size: 14px;
    opacity: .85;
}

/* las fichas van dentro de un valor (ya al 72 %): sin apagarlas otra vez */
body.gm-menu-v2 .gmv2-dato__v:has(.gmv2-chips, .gmv2-logos) {
    opacity: 1;
}

body.gm-menu-v2 .gmv2-chip {
    opacity: .78;
}

/* delivery: los logos de las apps, del alto de las fichas */
body.gm-menu-v2 .gmv2-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.gm-menu-v2 .gmv2-logos a {
    display: block;
    margin: 0;
}

body.gm-menu-v2 .gmv2-logos img {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

body.gm-menu-v2 #marca-info .header-bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
}

body.gm-menu-v2 #marca-info .servicios-delivery {
    display: none;
}

/* Botones de la cabecera y del pie: la misma píldora. «Reserva aquí» es la
   acción y va rellena; el mapa, con filete. */
body.gm-menu-v2 #header-marca .reserva-geo,
body.gm-menu-v2 #footer-marca .gmv2-btns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

body.gm-menu-v2 #header-marca .reserva-geo:empty {
    display: none;
}

body.gm-menu-v2 #header-marca .reserva-geo a.gmv2-btn,
body.gm-menu-v2 #footer-marca .reserva-geo a.gmv2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid var(--gmv2-line);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s var(--gmv2-ease), opacity .2s var(--gmv2-ease);
}

body.gm-menu-v2 #header-marca .reserva-geo a.gmv2-btn .gmv2-ic,
body.gm-menu-v2 #footer-marca .reserva-geo a.gmv2-btn .gmv2-ic {
    font-size: 14px;
}

body.gm-menu-v2 #header-marca .reserva-geo a.gmv2-btn.reserva_aqui,
body.gm-menu-v2 #footer-marca .reserva-geo a.gmv2-btn.reserva_aqui {
    border-color: transparent;
    background-color: #111;
    color: #fff !important;
}

body.gm-menu-v2.gmv2-hdr-dark #header-marca .reserva-geo a.gmv2-btn.reserva_aqui,
body.gm-menu-v2.gmv2-hdr-dark #footer-marca .reserva-geo a.gmv2-btn.reserva_aqui {
    background-color: rgba(255, 255, 255, .86);
    color: #161616 !important;
}

body.gm-menu-v2.gmv2-hdr-dark #header-marca .reserva-geo a.gmv2-btn:not(.reserva_aqui),
body.gm-menu-v2.gmv2-hdr-dark #footer-marca .reserva-geo a.gmv2-btn:not(.reserva_aqui),
body.gm-menu-v2.gmv2-hdr-dark #marca-info .rrss a,
body.gm-menu-v2.gmv2-hdr-dark #footer-marca .rrss-wrapper a {
    color: rgba(255, 255, 255, .8) !important;
}

@media (min-width: 520px) {
    body.gm-menu-v2 .gmv2-datos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* dentro de la pieza: sin caja propia, sobre el vidrio de la cabecera */
body.gm-menu-v2 .gmv2-marca-caja > #header-marca {
    margin: 0;
    padding: 0 0 12px;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
}

/* En el teléfono la cabecera del local es sólo la foto o el trailer: lo que
   se busca primero son los productos. Los datos del local van en el pie. */
@media (max-width: 899px) {
    body.gm-menu-v2 #marca-info {
        display: none;
    }

    body.gm-menu-v2 #header-marca > .col-6:last-child {
        display: none;
    }

    body.gm-menu-v2 #header-marca:has(#intro-video[style*="url('')"]) {
        display: none;
    }
}

@keyframes gmv2-velo {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (min-width: 900px) {
    /* La foto nunca deja aire arriba ni abajo: llena el alto de la fila, que
       es por lo menos su 16:9 (100cqw de su columna) y crece si la ficha es
       más alta. La ficha es compacta para que eso casi no pase. */
    body.gm-menu-v2 #header-marca {
        grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
        column-gap: 32px;
        align-items: stretch;
        padding: var(--gmv2-inset);
    }

    /* dentro de la pieza */
    body.gm-menu-v2 .gmv2-marca-caja > #header-marca {
        padding: 2px 0 16px;
    }

    /* la ficha centrada en el alto de la foto (sin delivery quedaba aire abajo) */
    body.gm-menu-v2 #header-marca > .col-6:last-child {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    body.gm-menu-v2 #header-marca > .col-6:first-child {
        container-type: inline-size;
    }

    body.gm-menu-v2 #header-marca > .col-6:first-child #intro-video {
        height: 100%;
        min-height: calc(100cqw * 9 / 16);
        aspect-ratio: auto;
    }

    body.gm-menu-v2 #header-marca:has(#intro-video[style*="url('')"]) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.gm-menu-v2 #marca-info {
        justify-content: center;
        gap: 16px;
        padding: 16px 18px 16px 0;
    }

    body.gm-menu-v2 #header-marca:has(#intro-video[style*="url('')"]) #marca-info {
        padding-left: 18px;
    }

    /* los textos no corren hasta el borde: columnas de 260 px como máximo */
    body.gm-menu-v2 #marca-info .gmv2-datos {
        grid-template-columns: repeat(2, minmax(0, 260px));
        gap: 14px 32px;
    }

    body.gm-menu-v2 #marca-info .gmv2-dato {
        gap: 5px;
    }

    body.gm-menu-v2 #marca-info .gmv2-chips {
        gap: 5px;
    }

    body.gm-menu-v2 #marca-info .gmv2-chip {
        height: 26px;
        padding: 0 10px;
        font-size: 12px;
    }

    body.gm-menu-v2 #marca-info .rrss a {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    body.gm-menu-v2 #marca-info h1 {
        font-size: 21px;
    }

    body.gm-menu-v2 #header-marca .reserva-geo a.gmv2-btn:hover,
    body.gm-menu-v2 #footer-marca .reserva-geo a.gmv2-btn:hover,
    body.gm-menu-v2 #marca-info .rrss a:hover,
    body.gm-menu-v2 #footer-marca .rrss-wrapper a:hover {
        background-color: var(--gmv2-surface);
    }

    body.gm-menu-v2 #header-marca .reserva-geo a.gmv2-btn.reserva_aqui:hover,
    body.gm-menu-v2 #footer-marca .reserva-geo a.gmv2-btn.reserva_aqui:hover {
        opacity: .86;
    }
}

/* ───────────────────────── 4 · Menú: barra de categorías ───────────────────────── */

/* El cierre de la pieza (ver .gmv2-con-barra): la segunda fila de la
   cabecera, de borde a borde, con su vidrio detrás. frontend.js le sigue
   poniendo y sacando .fixed al bajar: aquí no cambia nada. */
body.gm-menu-v2.gmv2-con-barra #cart-menu-wrapper,
body.gm-menu-v2.gmv2-con-barra #cart-menu-wrapper.fixed {
    position: relative !important;
    top: auto !important;
    left: auto;
    right: auto;
    z-index: 1;
    flex: none;
    width: auto;
    height: var(--gmv2-nav-h);
    margin: 0 -16px;
    padding: 0;
    overflow: hidden;
    border-radius: 0 0 var(--gmv2-r) var(--gmv2-r);
    background: transparent !important;
    box-shadow: none;
}

/* el filete entre las dos filas llega a los bordes de la cápsula (1 px
   adentro: no pisa su contorno) */
body.gm-menu-v2.gmv2-con-barra #cart-menu-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1px;
    right: 1px;
    z-index: 3;
    height: 1px;
    background: var(--gmv2-line);
    opacity: .7;
    pointer-events: none;
}

body.gm-menu-v2.gmv2-con-barra #cart-menu {
    position: relative;
    z-index: 1;
    width: auto;
    height: 100%;
    margin: 0 46px 0 0;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent !important;
    /* las categorías se desvanecen en el borde sólo si hay más para ese lado
       (menu-v2.js pone .gmv2-izq / .gmv2-der): al principio, la primera
       categoría queda entera, con el mismo aire a la izquierda que abajo */
    --gmv2-m-izq: 0px;
    --gmv2-m-der: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--gmv2-m-izq), #000 calc(100% - var(--gmv2-m-der)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--gmv2-m-izq), #000 calc(100% - var(--gmv2-m-der)), transparent 100%);
    transition: opacity .2s var(--gmv2-ease);
}

body.gm-menu-v2.gmv2-con-barra #cart-menu.gmv2-izq {
    --gmv2-m-izq: 18px;
}

body.gm-menu-v2.gmv2-con-barra #cart-menu.gmv2-der {
    --gmv2-m-der: 22px;
}

/* el aire de la píldora: el mismo a la izquierda que abajo (la esquina
   redondeada de la cápsula hacía ver más el de la izquierda) */
body.gm-menu-v2.gmv2-con-barra #cart-menu .container {
    width: max-content;
    min-width: 100%;
    max-width: none;
    height: 100%;
    padding: 0 12px 0 6px;
    column-gap: 2px;
    background: transparent !important;
}

/* la píldora activa, con el radio de lo que va dentro de la cápsula */
body.gm-menu-v2.gmv2-con-barra #cart-menu a,
body.gm-menu-v2.gmv2-con-barra #cart-menu a:last-child {
    padding: 8px 12px;
    border-radius: var(--gmv2-r-in);
    font-size: calc(15px * var(--gmv2-k-nav, 1));
    line-height: 1;
    white-space: nowrap;
    opacity: .62;
    transition: background-color .2s var(--gmv2-ease), opacity .2s var(--gmv2-ease);
}

body.gm-menu-v2.gmv2-con-barra #cart-menu a:hover,
body.gm-menu-v2.gmv2-con-barra #cart-menu a.active {
    opacity: 1;
}

body.gm-menu-v2.gmv2-con-barra #cart-menu a.active {
    background-color: var(--gmv2-surface-hi);
}

/* La lupa es el final de la fila, en móvil y en escritorio: cerrada, un botón
   de 46 px con un filete a la izquierda; abierta, el campo ocupa la fila y las
   categorías se apagan. frontend.js sólo pone y saca .active en .searchbar. */
body.gm-menu-v2.gmv2-con-barra .searchbar-wrapper {
    position: absolute;
    display: block;
    inset: 0;
    z-index: 2;
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: visible !important;
    pointer-events: none;
}

body.gm-menu-v2.gmv2-con-barra .searchbar,
body.gm-menu-v2.gmv2-con-barra .searchbar.active {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    display: flex;
    align-items: center;
    width: 46px;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    color: #111;
    pointer-events: auto;
    transition: width .28s var(--gmv2-ease);
}

/* el filete vertical de la lupa: del filete de arriba hasta 1 px antes del
   contorno de abajo, sin pasarle por encima */
body.gm-menu-v2.gmv2-con-barra .searchbar::before {
    content: '';
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 0;
    width: 1px;
    background: var(--gmv2-line);
    opacity: .7;
    transition: opacity .2s var(--gmv2-ease);
}

body.gm-menu-v2.gmv2-con-barra .searchbar.active::before {
    opacity: 0;
}

body.gm-menu-v2.gmv2-hdr-dark header .searchbar {
    color: #fff;
}

body.gm-menu-v2.gmv2-con-barra .searchbar.active {
    width: 100%;
}

body.gm-menu-v2.gmv2-con-barra #cart-menu-wrapper:has(.searchbar.active) #cart-menu {
    opacity: 0;
    pointer-events: none;
}

body.gm-menu-v2.gmv2-con-barra .searchbar .open,
body.gm-menu-v2.gmv2-con-barra .searchbar .close {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 46px;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--gmv2-gris);
    font-size: 19px !important;
    line-height: 1 !important;
    cursor: pointer;
}

body.gm-menu-v2.gmv2-con-barra .searchbar .gmv2-ic {
    display: block;
    vertical-align: 0;
}

body.gm-menu-v2.gmv2-con-barra .searchbar .close {
    font-size: 20px !important;
}

body.gm-menu-v2.gmv2-con-barra .searchbar:not(.active) .close,
body.gm-menu-v2.gmv2-con-barra .searchbar:not(.active) input#search-items {
    display: none;
}

body.gm-menu-v2.gmv2-con-barra .searchbar.active .open {
    display: none;
}

body.gm-menu-v2.gmv2-con-barra .searchbar input#search-items {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 4px;
    border: 0;
    outline: none;
    background: transparent !important;
    box-shadow: none;
    color: #3b3b3b !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    font-size: 16px !important;
    font-weight: 400;
}

body.gm-menu-v2.gmv2-con-barra .searchbar.active input#search-items {
    padding-left: 16px;
}

body.gm-menu-v2.gmv2-hdr-dark.gmv2-con-barra .searchbar input#search-items {
    color: #e6e6e6 !important;
}

body.gm-menu-v2.gmv2-con-barra .searchbar input#search-items::placeholder {
    color: var(--gmv2-gris);
    opacity: 1;
}

/* ───────────────────────── 4 · Menú: categorías e ítems ───────────────────────── */

body.gm-menu-v2 .section-title {
    padding: 30px var(--gmv2-pad) 2px;
}

/* frontend.js compensa con .pt-20 la barra que pasó a fija; dentro de la cabecera nunca sale del flujo */
body.gm-menu-v2 #main .section-title.pt-20 {
    padding-top: 30px;
}

body.gm-menu-v2 .section-title h2 {
    font-size: calc(24px * var(--gmv2-k-cat, 1));
    line-height: 1.05;
}

/* Categorías colapsadas (Pantallas › editar menú › Estilo): cada categoría es
   una cápsula que se abre al tocarla; la imagen de la categoría (Categorías ›
   Media) va de miniatura a la izquierda, la cuenta de ítems y el chevron a la
   derecha. menu-v2.js pone .gmv2-colapsadas en el body y mueve la imagen. */
body.gm-menu-v2.gmv2-colapsadas #main .section-title,
body.gm-menu-v2.gmv2-colapsadas #main .section-title.pt-20 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
    min-height: 64px;
    margin: 8px var(--gmv2-pad) 0;
    padding: var(--gmv2-inset) 10px var(--gmv2-inset) 16px;
    border: 1px solid var(--gmv2-line);
    border-radius: var(--gmv2-r);
    cursor: pointer;
    transition: background-color .2s var(--gmv2-ease), border-color .2s var(--gmv2-ease);
}

body.gm-menu-v2.gmv2-colapsadas #main .section-title:has(.gmv2-cat-thumb) {
    padding-left: var(--gmv2-inset);
}

body.gm-menu-v2.gmv2-colapsadas #main #like-title + .section-title,
body.gm-menu-v2.gmv2-colapsadas #main .gmv2-vacio + .section-title {
    margin-top: 16px;
}

body.gm-menu-v2.gmv2-colapsadas #main .section-title.expanded {
    background-color: var(--gmv2-surface);
    border-color: transparent;
}

@media (hover: hover) {
    body.gm-menu-v2.gmv2-colapsadas #main .section-title:hover {
        border-color: rgba(127, 127, 127, .48);
    }
}

body.gm-menu-v2.gmv2-colapsadas .gmv2-cat-thumb {
    flex: none;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: calc(var(--gmv2-r) - var(--gmv2-inset));
    background-color: var(--gmv2-surface);
}

body.gm-menu-v2.gmv2-colapsadas .gmv2-cat-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.gm-menu-v2.gmv2-colapsadas #main .section-title h2 {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-size: 18px;
    line-height: 1.15;
}

/* la cuenta («4», sin paréntesis) y el chevron en un círculo */
body.gm-menu-v2.gmv2-colapsadas #main .section-title > span {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
    padding: 0;
}

body.gm-menu-v2.gmv2-colapsadas #main .section-title .post-count {
    color: var(--gmv2-gris);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    opacity: 1;
}

body.gm-menu-v2.gmv2-colapsadas #main .section-title .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--gmv2-surface);
    color: var(--gmv2-gris);
    font-size: 16px;
    transform: none;
    transition: transform .25s var(--gmv2-ease);
}

body.gm-menu-v2.gmv2-colapsadas #main .section-title.expanded .arrow {
    transform: rotate(180deg);
}

/* la descripción de la categoría, sólo con la cápsula abierta */
body.gm-menu-v2.gmv2-colapsadas #main .section-title .category-info-grid {
    flex-basis: 100%;
    display: none;
    padding: 4px 10px 8px;
}

body.gm-menu-v2.gmv2-colapsadas #main .section-title.expanded .category-info-grid {
    display: block;
}

body.gm-menu-v2.gmv2-colapsadas .section-category {
    padding-top: 10px;
    padding-bottom: 8px;
}

body.gm-menu-v2 .category-info-grid {
    display: block;
    padding-top: 8px;
}

body.gm-menu-v2 .category-info {
    max-width: 62ch;
    padding-bottom: 4px;
    font-size: 14.5px;
    line-height: 1.5;
    opacity: .82;
}

/* imágenes que el código propio de una cuenta pone sueltas en el menú
   (p. ej. Cassis, img.cassis-banner): con el mismo margen que las categorías */
body.gm-menu-v2 #main > img {
    display: block;
    margin-left: var(--gmv2-pad) !important;
    margin-right: var(--gmv2-pad) !important;
}

body.gm-menu-v2 .category-banner {
    margin-top: 28px;
    padding: 0 var(--gmv2-pad);
}

body.gm-menu-v2 .category-banner img {
    display: block;
    width: 100%;
    border-radius: var(--gmv2-r);
}

body.gm-menu-v2 #like-title {
    padding: 26px var(--gmv2-pad) 6px;
    font-size: 24px;
}

body.gm-menu-v2 .section-category,
body.gm-menu-v2 .ver-mas-wrapper {
    grid-template-columns: minmax(0, 1fr);
    grid-gap: 10px;
    padding: 12px var(--gmv2-pad) 6px;
}

/* La tarjeta: 8 px de aire alrededor de la foto, en los tres lados por igual;
   la foto acompaña el alto del texto. */
body.gm-menu-v2 .section-category .post-gourmedia,
body.gm-menu-v2 .section-category .post-single,
body.gm-menu-v2 .ver-mas-wrapper .post-single {
    align-items: stretch;
    min-height: 0;
    padding: var(--gmv2-card-inset) !important;
    border: 1px solid var(--gmv2-line) !important;
    border-radius: var(--gmv2-r) !important;
    transition: transform .25s var(--gmv2-ease), border-color .25s var(--gmv2-ease), opacity .35s ease;
}

/* Todas del mismo alto: título y descripción suman cuatro líneas (con título
   de una línea, la descripción baja a tres; con dos, a dos; con una fuente
   grande, las que quepan: --gmv2-lineas lo
   pone menu-v2.js) y el precio una. */
body.gm-menu-v2 .section-category .post-gourmedia.foto,
body.gm-menu-v2 .section-category .post-gourmedia.video {
    height: calc(126px + 2 * var(--gmv2-card-inset));
}

body.gm-menu-v2 .section-category .info-post,
body.gm-menu-v2 .section-category .post-gourmedia.foto .info-post,
body.gm-menu-v2 .section-category .post-gourmedia.video .info-post {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 6px 12px 6px 10px;
    justify-content: center;
    overflow: hidden;
    background-color: transparent !important;
}

body.gm-menu-v2 .section-category .post-gourmedia:not(.foto):not(.video) .info-post {
    min-height: 0;
    padding-right: 10px;
}

body.gm-menu-v2 .section-category .info-post h2,
body.gm-menu-v2 .ver-mas-wrapper .post-single h2 {
    max-height: none;
    margin-bottom: 5px;
    font-size: calc(16px * var(--gmv2-k-tit, 1));
    line-height: 1.2;
}

/* sin foto, el me gusta va abajo a la derecha: el precio y las simbologías le dejan lugar */
body.gm-menu-v2 .section-category .post-gourmedia:not(.foto):not(.video):has(.like-wrapper) .price {
    padding-right: 40px;
}

/* sin foto, la etiqueta va sobre el texto: el título le deja lugar */
body.gm-menu-v2 .section-category .post-gourmedia:not(.foto):not(.video):has(> .recomend-badge, > .new-badge) h2 {
    padding-right: 100px;
}

body.gm-menu-v2 .section-category .info-post-content,
body.gm-menu-v2 .ver-mas-wrapper .info-post-content {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    max-height: calc(1.4em * 3);
    margin-bottom: 7px !important;
    font-size: 13.5px;
    line-height: 1.4;
    opacity: .74;
}

body.gm-menu-v2 .section-category .post-gourmedia[style*="--gmv2-lineas"] .info-post-content,
body.gm-menu-v2 .ver-mas-wrapper .post-gourmedia[style*="--gmv2-lineas"] .info-post-content {
    -webkit-line-clamp: var(--gmv2-lineas);
    line-clamp: var(--gmv2-lineas);
    max-height: calc(1.4em * var(--gmv2-lineas));
}

body.gm-menu-v2 .section-category .info-post h2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

body.gm-menu-v2 .section-category .price,
body.gm-menu-v2 .ver-mas-wrapper .price {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding-top: 0;
    font-size: 15px;
}

body.gm-menu-v2 .section-category .price .icons {
    margin: 0 0 0 auto;
    padding: 0;
    align-items: center;
    gap: 4px;
}

body.gm-menu-v2 .section-category .price .icons > span {
    display: inline-flex;
    margin: 0;
}

body.gm-menu-v2 .section-category .price .icons img {
    width: 22px;
    height: 22px;
    margin: 0;
}

/* el enlace va sólo en la vista del ítem: afuera hacía las tarjetas más altas */
body.gm-menu-v2 .section-category .price .icons .link {
    display: none;
}

/* «Desde» y el precio en una línea (menu-v2.js saca el salto) */
body.gm-menu-v2 .section-category .price .text-sm {
    margin-right: 4px;
    font-size: 12px;
    opacity: .7;
}

body.gm-menu-v2 .section-category .price .icons-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 9.5px;
    font-weight: 600;
    opacity: .8;
}

body.gm-menu-v2 .section-category .price .link a.popup-link {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--gmv2-line);
    border-radius: 999px;
    font-size: 12.5px !important;
    line-height: 1;
    text-transform: none !important;
    letter-spacing: 0;
    pointer-events: auto;
    white-space: nowrap;
    overflow: hidden;
}

body.gm-menu-v2 .section-category .price .link a.popup-link i {
    flex: none;
    font-size: 12px !important;
    transform: none !important;
}

body.gm-menu-v2 .section-category .img-wrapper {
    align-self: stretch;
    width: 126px;
    height: auto;
    min-height: 0;
    margin: 0;
    border-radius: calc(var(--gmv2-r) - var(--gmv2-card-inset));
    background-color: var(--gmv2-surface);
}

/* ícono de video o galería: ficha de vidrio abajo a la izquierda (arriba va la etiqueta, a la derecha el me gusta) */
body.gm-menu-v2 .section-category .gmv2-media {
    position: absolute;
    bottom: 6px;
    left: 6px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .44);
    color: #fff;
    font-size: 16px;
}

/* las etiquetas, como las fichas del panel: oscuro, borde fino, 11.5 px. Sin
   backdrop-filter, como el me gusta y el ícono de video: en una carta de 70
   ítems eran casi cien capas que la GPU volvía a desenfocar en cada cuadro (el
   navegador no alcanzaba a pintar al saltar o bajar rápido) */
body.gm-menu-v2 .section-category .recomend-badge,
body.gm-menu-v2 .section-category .new-badge,
body.gm-menu-v2 .gmv2-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background-color: rgba(10, 10, 10, .68);
    color: #fff !important;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1 !important;
    letter-spacing: .01em;
    white-space: nowrap;
}

body.gm-menu-v2 .section-category .recomend-badge,
body.gm-menu-v2 .section-category .new-badge {
    top: calc(var(--gmv2-card-inset) + 6px);
    right: calc(var(--gmv2-card-inset) + 6px);
    /* del ancho de la foto menos su aire («Productos locales» entra entera) */
    max-width: calc(var(--gmv2-foto-w, 126px) - 12px);
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.gm-menu-v2 .section-category .recomend-badge span,
body.gm-menu-v2 .section-category .new-badge span {
    overflow: hidden;
    text-overflow: ellipsis;
}

body.gm-menu-v2 .section-category .post-gourmedia.sin_stock {
    filter: none;
    cursor: default;
}

body.gm-menu-v2 .section-category .post-gourmedia.sin_stock > :is(.recomend-badge, .new-badge):not(:last-of-type) {
    display: none;
}

body.gm-menu-v2 .section-category .post-gourmedia.sin_stock .img-wrapper {
    filter: grayscale(1);
    opacity: .6;
}

body.gm-menu-v2 .section-category .post-gourmedia.sin_stock .info-post {
    opacity: .55;
}

body.gm-menu-v2 .section-category .post-gourmedia.sin_stock .info-post h2 {
    text-transform: var(--gmv2-card-tt, none);
    letter-spacing: var(--gmv2-card-ls, normal);
}

/* el aviso del primer me gusta (frontend.js, tippy 5; el tema se lo pone menu-v2.js):
   como una etiqueta, con la esquina de abajo en punta sobre el corazón */
body.gm-menu-v2 .tippy-tooltip.gmv2-etiqueta-theme {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px 12px 2px 12px;
    background-color: rgba(10, 10, 10, .72);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

body.gm-menu-v2 .tippy-tooltip.gmv2-etiqueta-theme > .tippy-content {
    padding: 7px 11px;
    letter-spacing: 0 !important;
}

/* 8 · me gusta de la tarjeta: en círculo de vidrio, como el del ítem */
body.gm-menu-v2 .section-category .like-wrapper {
    right: calc(var(--gmv2-card-inset) + 6px);
    bottom: calc(var(--gmv2-card-inset) + 6px);
}

body.gm-menu-v2:not(.gmv2-cart) .like-wrapper :is(.like-button, .gmv2-like) {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .44);
    background-image: none !important;
    color: #fff;
}

body.gm-menu-v2:not(.gmv2-cart) .section-category .post-gourmedia:not(.foto):not(.video) :is(.like-button, .gmv2-like) {
    background-color: var(--gmv2-surface);
    color: currentColor;
}

body.gm-menu-v2:not(.gmv2-cart) .like-wrapper :is(.like-button, .gmv2-like)::before {
    content: '';
    position: absolute;
    inset: 6px;
    background-color: currentColor;
    -webkit-mask: var(--gmv2-heart) center / contain no-repeat;
    mask: var(--gmv2-heart) center / contain no-repeat;
    transition: transform .2s var(--gmv2-ease);
}

body.gm-menu-v2:not(.gmv2-cart) .like-wrapper :is(.like-button, .gmv2-like).active {
    opacity: 1;
}

body.gm-menu-v2:not(.gmv2-cart) .like-wrapper :is(.like-button, .gmv2-like).active::before {
    background-color: var(--gmv2-like-on);
    -webkit-mask-image: var(--gmv2-heart-fill);
    mask-image: var(--gmv2-heart-fill);
    animation: gmv2-late .32s var(--gmv2-ease);
}

/* al buscar (menu-v2.js pone .gmv2-buscando): sólo los ítems, sin la
   cabecera del local ni las imágenes de las categorías */
body.gm-menu-v2.gmv2-buscando #header-marca,
body.gm-menu-v2.gmv2-buscando .category-banner,
body.gm-menu-v2:has(#like-toggle.active) #header-marca,
body.gm-menu-v2:has(#like-toggle.active) .category-banner {
    display: none !important;
}

/* búsqueda sin resultados (menu-v2.js): el aviso con la letra de las
   categorías y el alto de la pantalla, para que el pie no suba */
body.gm-menu-v2 .gmv2-vacio {
    min-height: calc(100vh - var(--gmv2-stack) - 8px);
    min-height: calc(100dvh - var(--gmv2-stack) - 8px);
    padding: 30px var(--gmv2-pad) 0;
}

body.gm-menu-v2 .gmv2-vacio[hidden] {
    display: none;
}

body.gm-menu-v2 .gmv2-vacio h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.05;
}

@media (min-width: 900px) {
    body.gm-menu-v2 .gmv2-vacio {
        padding-top: 44px;
    }

    body.gm-menu-v2 .gmv2-vacio h2 {
        font-size: 28px;
    }
}

/* Fuentes muy espaciadas (tracking de más de .08em, típico en mayúsculas):
   se acota a .06em en la barra, los títulos de categoría y de las tarjetas y
   el de la vista del ítem (menu-v2.js pone las clases al medir). */
body.gm-menu-v2.gmv2-ls-nav.gmv2-con-barra #cart-menu a { letter-spacing: .06em !important; }
body.gm-menu-v2.gmv2-ls-cat .section-title h2 { letter-spacing: .06em !important; }
body.gm-menu-v2.gmv2-ls-tit .section-category .info-post h2 { letter-spacing: .06em !important; }
body.gm-menu-v2.gmv2-ls-pop #popup #drawer-content > h1 { letter-spacing: .06em !important; }

/* búsqueda: los resultados en una sola grilla (menu-v2.js junta las tarjetas
   en .gmv2-resultados); las secciones quedan vacías y no se muestran */
body.gm-menu-v2 #main .gmv2-resultados.section-category {
    padding: 16px var(--gmv2-pad) 24px !important;
    grid-gap: 10px !important;
}

body.gm-menu-v2 #main .gmv2-resultados .post-gourmedia {
    width: auto;
    margin: 0;
}

body.gm-menu-v2.gmv2-buscando #main .section-category:not(.gmv2-resultados):not(.gmv2-recs),
body.gm-menu-v2.gmv2-buscando #main .ver-mas-wrapper {
    display: none !important;
}

@media (min-width: 720px) {
    body.gm-menu-v2 #main .gmv2-resultados.section-category {
        grid-gap: 14px !important;
    }
}

/* búsqueda y favoritos: las secciones sin resultados no dejan hueco */
body.gm-menu-v2 .search-on .section-category,
body.gm-menu-v2 .search-on .ver-mas-wrapper {
    padding: 0 var(--gmv2-pad) !important;
    grid-row-gap: 0;
    grid-column-gap: 16px;
}

body.gm-menu-v2 .search-on .post-gourmedia,
body.gm-menu-v2 .search-on .post-single {
    width: 100%;
    margin: 5px 0;
}

@media (min-width: 720px) {
    body.gm-menu-v2 .section-category,
    body.gm-menu-v2 .ver-mas-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-gap: 14px;
        padding-top: 14px;
    }

    body.gm-menu-v2 .search-on .section-category,
    body.gm-menu-v2 .search-on .ver-mas-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 900px) {
    body.gm-menu-v2 .section-title {
        padding-top: 44px;
    }

    body.gm-menu-v2 #main .section-title.pt-20 {
        padding-top: 44px;
    }

    body.gm-menu-v2 .section-title h2,
    body.gm-menu-v2 #like-title {
        font-size: calc(28px * var(--gmv2-k-cat, 1));
    }

    body.gm-menu-v2 .section-category .post-gourmedia.foto,
    body.gm-menu-v2 .section-category .post-gourmedia.video {
        height: calc(136px + 2 * var(--gmv2-card-inset));
    }

    body.gm-menu-v2 {
        --gmv2-foto-w: 136px;
    }

    body.gm-menu-v2 .section-category .img-wrapper {
        width: 136px;
    }

    body.gm-menu-v2 .section-category .info-post,
    body.gm-menu-v2 .section-category .post-gourmedia.foto .info-post,
    body.gm-menu-v2 .section-category .post-gourmedia.video .info-post {
        padding: 8px 14px 8px 12px;
    }

    body.gm-menu-v2 .section-category .info-post h2,
    body.gm-menu-v2 .ver-mas-wrapper .post-single h2 {
        font-size: calc(17px * var(--gmv2-k-tit, 1));
    }
}

@media (min-width: 1180px) {
    body.gm-menu-v2 .section-category,
    body.gm-menu-v2 .ver-mas-wrapper {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.gm-menu-v2 .search-on .section-category,
    body.gm-menu-v2 .search-on .ver-mas-wrapper {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (hover: hover) {
    body.gm-menu-v2 .section-category .post-gourmedia.itempopup_open:hover {
        transform: translateY(-2px);
        border-color: rgba(127, 127, 127, .48) !important;
    }
}

/* botones flotantes */
body.gm-menu-v2 #floating-menu-button,
body.gm-menu-v2 #toggle-collapsed-btn {
    width: 48px;
    height: 48px;
    bottom: 20px;
    font-size: 20px;
}

/* volver y colapsar: su color (el del Customizer, al 60 %) con filete claro y
   una sombra suave detrás; la sombra de Tailwind (shadow-lg) no se generaba */
body.gm-menu-v2 #floating-menu-button,
body.gm-menu-v2 #toggle-collapsed-btn {
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28) !important;
}

/* «Volver»: todas las pantallas (sin el tope de 6 de la plantilla original),
   en una lista que se desplaza si no cabe sobre el botón; los bordes se
   desvanecen para que se note que hay más */
body.gm-menu-v2 #floating-menu-options {
    left: 0;
    right: 0;
    width: auto;
    max-height: calc(100vh - var(--gmv2-top) - var(--gmv2-hdr-h) - 9rem);
    max-height: calc(100dvh - var(--gmv2-top) - var(--gmv2-hdr-h) - 9rem);
    justify-content: flex-start;
    gap: 8px !important;
    padding: 14px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

body.gm-menu-v2 #floating-menu-options::-webkit-scrollbar {
    display: none;
}

body.gm-menu-v2 #floating-menu-options > * {
    flex: none;
}

/* el vidrio de los atajos: desenfoque propio (sin máscara en la lista, que lo
   apagaba); el fondo, un punto más tupido, lo pone menu-v2.js con el color
   de cada estilo */
body.gm-menu-v2 #floating-menu-options .option-btn {
    max-width: 360px;
    height: 52px;
    padding: 0 20px;
    font-size: 16px;
    line-height: 1.2;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

body.gm-menu-v2 #floating-menu-button {
    left: 16px;
    font-size: 23px;
}

body.gm-menu-v2 #toggle-collapsed-btn {
    right: 16px;
}

/* ───────────────────────── 4 · Menú: pie ───────────────────────── */

/* Los datos del local con su rótulo chico (HORARIO, DIRECCIÓN, SÍGUENOS), igual
   que en la cabecera del local; menu-v2.js arma los bloques. El borde
   transparente deja ver el fondo del menú: separa el pie del último ítem. */
body.gm-menu-v2 #footer-marca {
    display: block;
    padding: 30px var(--gmv2-pad) calc(36px + env(safe-area-inset-bottom));
    border-top: 44px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 1px 0 rgba(127, 127, 127, .26);
    text-align: left;
}

body.gm-menu-v2 #main:has(#floating-menu-button) #footer-marca {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

body.gm-menu-v2 #footer-marca > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    max-width: none;
    padding: 0;
    align-items: start;
}

body.gm-menu-v2 #footer-marca .col-3,
body.gm-menu-v2 #footer-marca .col-3:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    margin: 0;
    text-align: left;
}

body.gm-menu-v2 #footer-marca .col-3 * {
    text-align: left;
}

body.gm-menu-v2 #footer-marca .col-3:empty,
body.gm-menu-v2 #footer-marca .col-3[hidden] {
    display: none;
}

/* El logo de la marca va siempre: el CSS propio de las landings de algunas
   cuentas lo escondía (.logo-footer { display: none }) por cómo se veía en la
   plantilla original. */
body.gm-menu-v2 #footer-marca .logo-footer {
    display: block !important;
    flex: none;
    width: auto;
    min-width: 0;
    max-width: 160px;
    max-height: 64px;
    height: auto;
    border-radius: var(--gmv2-r-in);
}

/* style.css da tamaño, aire y display a todo span del pie (con id): aquí se gana con el id */
body.gm-menu-v2 #footer-marca .gmv2-dato,
body.gm-menu-v2 #footer-marca .gmv2-dato__k,
body.gm-menu-v2 #footer-marca .gmv2-dato__v {
    padding: 0;
}

body.gm-menu-v2 #footer-marca .gmv2-dato__k {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .45;
}

body.gm-menu-v2 #footer-marca .gmv2-dato__v {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    opacity: .72;
}

body.gm-menu-v2 #footer-marca .gmv2-dato__v:has(.gmv2-chips) {
    opacity: 1;
}

/* los textos no corren hasta el borde, como en la cabecera del local */
body.gm-menu-v2 #footer-marca .gmv2-dato__v:not(:has(.gmv2-chips)) {
    max-width: 300px;
}

body.gm-menu-v2 #footer-marca .gmv2-chips {
    margin-top: 2px;
}

body.gm-menu-v2 #footer-marca .gmv2-chip {
    display: inline-flex;
    padding: 0 11px;
    font-size: 12.5px;
    opacity: 1;
}

body.gm-menu-v2 #footer-marca .gmv2-chip span {
    display: inline;
    padding: 0;
    font-size: 12.5px;
    line-height: 1;
}

body.gm-menu-v2 #footer-marca .col-3:last-child {
    gap: 8px;
}

body.gm-menu-v2 #footer-marca .col-3:first-child {
    justify-content: flex-start;
}

body.gm-menu-v2 #footer-marca .rrss-wrapper {
    margin-bottom: 10px;
}

body.gm-menu-v2 #footer-marca .deli-wrapper {
    display: flex;
    gap: 6px;
    margin: 0;
    justify-content: flex-start;
}

body.gm-menu-v2 #footer-marca .deli-wrapper:empty {
    display: none;
}

body.gm-menu-v2 #footer-marca .deli-wrapper a {
    margin: 0;
}

body.gm-menu-v2 #footer-marca .deli-wrapper img {
    width: 28px;
    border-radius: 8px;
}

@media (min-width: 769px) {
    body.gm-menu-v2 #footer-marca {
        padding-top: 36px;
    }

    /* todo a la izquierda: las columnas se reparten desde el borde izquierdo, sin la última empujada a la derecha */
    body.gm-menu-v2 #footer-marca > .container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 48px;
    }

    body.gm-menu-v2 #footer-marca .col-3:first-child { flex: none; }
    body.gm-menu-v2 #footer-marca .col-3.info-local { flex: 1.4 1 0; min-width: 0; }
    body.gm-menu-v2 #footer-marca .col-3.reserva-geo { flex: 1 1 0; min-width: 0; }
    body.gm-menu-v2 #footer-marca .col-3:last-child { flex: .9 1 0; min-width: 0; }
}

/* ───────────────────────── 2 · Pop-ups de la pantalla principal ───────────────────────── */

/* Banner (#local-popup) y Registro (#clients-popup), con popupoverlay. Velo
   más liviano con desenfoque; tarjetas con el radio de la familia, cerrar en
   círculo de vidrio (menu-v2.js cambia la imagen por el ícono). El registro
   toma el color con que se ve la cabecera: oscuro con texto claro o claro con
   texto oscuro. */
body.gm-menu-v2 .popup_background {
    background-color: rgba(0, 0, 0, .55) !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

body.gm-menu-v2 :is(#local-popup, #clients-popup) .close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .42);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    filter: none;
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    transition: background-color .2s var(--gmv2-ease), transform .2s var(--gmv2-ease);
}

body.gm-menu-v2 :is(#local-popup, #clients-popup) .close:active {
    transform: scale(.94);
}

body.gm-menu-v2 :is(#local-popup, #clients-popup) .close img {
    display: none;
}

/* banner: la imagen o el video en una tarjeta */
body.gm-menu-v2 #local-popup {
    position: relative;
    width: min(420px, calc(100vw - 32px));
    max-width: none;
    overflow: hidden;
    border-radius: calc(var(--gmv2-r) + 8px);
    background-color: #000;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 90px rgba(0, 0, 0, .5);
    animation: gmv2-entra .45s var(--gmv2-suave, ease) both;
}

body.gm-menu-v2 #local-popup > img,
body.gm-menu-v2 #local-popup > a > img,
body.gm-menu-v2 #local-popup > video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 78vh;
    max-height: 78dvh;
    object-fit: cover;
}

/* registro: tarjeta con el color con que se ve la cabecera; el ícono de
   arriba y su color salen de Pop-ups › Registro › Estilo (por defecto el
   corazón del me gusta en #eb4649), con un latido suave. Los campos van en
   columna con el mismo aire entre todos; el calendario es flatpickr. */
body.gm-menu-v2 #clients-popup {
    --gmv2-reg-bg: #fff;
    --gmv2-reg-ink: #1c1c1e;
    --gmv2-reg-campo: #f2f2f4;
    --gmv2-reg-linea: rgba(0, 0, 0, .1);
    --gmv2-reg-gris: #8a8a8e;
    --gmv2-reg-icono: var(--gmv2-like-on);
    position: relative;
    width: min(400px, calc(100vw - 32px));
    max-width: none;
    min-height: 0;
    padding: 34px 22px 22px;
    border-radius: calc(var(--gmv2-r) + 8px);
    background-color: var(--gmv2-reg-bg);
    color: var(--gmv2-reg-ink);
    box-shadow: 0 0 0 1px var(--gmv2-reg-linea), 0 30px 90px rgba(0, 0, 0, .45);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    animation: gmv2-entra .45s var(--gmv2-suave, ease) both;
}

body.gm-menu-v2.gmv2-hdr-dark #clients-popup {
    --gmv2-reg-bg: var(--gmv2-hdr-visto, #161616);
    --gmv2-reg-ink: #fff;
    --gmv2-reg-campo: rgba(255, 255, 255, .06);
    --gmv2-reg-linea: rgba(255, 255, 255, .12);
    --gmv2-reg-gris: #9a9a9f;
}

/* cerrar: la X blanca, en un círculo que se lee sobre fondo claro u oscuro */
body.gm-menu-v2 #clients-popup .close {
    background-color: rgba(255, 255, 255, .1);
    color: #fff !important;
    filter: none !important;   /* el tema le pone invert(1): la X blanca salía negra */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.gm-menu-v2:not(.gmv2-hdr-dark) #clients-popup .close {
    background-color: rgba(0, 0, 0, .5);
}

body.gm-menu-v2 #clients-popup h3.title_form {
    margin: 0 0 24px;
    padding: 0 20px;
    color: var(--gmv2-reg-ink);
    font-family: inherit;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-align: center;
    text-wrap: balance;
}

body.gm-menu-v2 #clients-popup h3.title_form > img,
body.gm-menu-v2 #clients-popup h3.title_form > br {
    display: none;
}

/* el ícono, sin círculo: latido suave y un halo de su color */
body.gm-menu-v2 #clients-popup .gmv2-reg-icono {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 auto 14px;
    color: var(--gmv2-reg-icono);
    font-size: 36px;
    filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--gmv2-reg-icono) 40%, transparent));
    animation: gmv2-latido 2.4s ease-in-out infinite;
}

body.gm-menu-v2 #clients-popup .gmv2-reg-icono .gmv2-ic {
    display: block;
    width: 100%;
    height: 100%;
}

/* un ícono de Iconify (Pop-ups › Estilo): su SVG como máscara, en el color elegido */
body.gm-menu-v2 #clients-popup .gmv2-reg-icono.es-iconify {
    background-color: currentColor;
    -webkit-mask: var(--gmv2-reg-mask) center / contain no-repeat;
    mask: var(--gmv2-reg-mask) center / contain no-repeat;
}

@keyframes gmv2-latido {
    0%, 60%, 100% { transform: scale(1); }
    15% { transform: scale(1.14); }
    30% { transform: scale(.98); }
    45% { transform: scale(1.08); }
}

body.gm-menu-v2 #clients-popup #customerForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.gm-menu-v2 #clients-popup #customerForm > *,
body.gm-menu-v2 #clients-popup #customerForm input {
    margin: 0 !important;
}

/* los campos: el texto que se escribe se lee (style.css lo forzaba a #1f1f1f) */
body.gm-menu-v2 #clients-popup #customerForm input:not([type="checkbox"]):not([type="hidden"]) {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid var(--gmv2-reg-linea);
    border-radius: 14px;
    outline: none;
    background: var(--gmv2-reg-campo) !important;
    color: var(--gmv2-reg-ink) !important;
    -webkit-text-fill-color: var(--gmv2-reg-ink);
    font-family: inherit;
    font-size: 16px;
    transition: border-color .2s var(--gmv2-ease), box-shadow .2s var(--gmv2-ease);
}

body.gm-menu-v2 #clients-popup #customerForm input:not([type="checkbox"]):focus {
    border-color: var(--gmv2-reg-gris);
    box-shadow: 0 0 0 3px var(--gmv2-reg-linea);
    color: var(--gmv2-reg-ink) !important;
}

body.gm-menu-v2 #clients-popup #customerForm input::placeholder {
    color: var(--gmv2-reg-gris);
    -webkit-text-fill-color: var(--gmv2-reg-gris);
    opacity: 1;
}

/* cumpleaños: flatpickr deja el campo original oculto (con la fecha AAAA-MM-DD
   que se guarda) y muestra uno de texto; fuera los parches viejos */
body.gm-menu-v2 #clients-popup .dateinput {
    position: relative;
    display: block;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

body.gm-menu-v2 #clients-popup .dateinput::before,
body.gm-menu-v2 #clients-popup .dateinput::after,
body.gm-menu-v2 #clients-popup #customerForm input[name=customer_fnac]::before {
    content: none !important;
    display: none !important;
}

body.gm-menu-v2 #clients-popup .dateinput .gmv2-reg-cal {
    position: absolute;
    top: 50%;
    right: 16px;
    color: var(--gmv2-reg-gris);
    font-size: 18px;
    transform: translateY(-50%);
    pointer-events: none;
}

body.gm-menu-v2 #clients-popup .checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: none;
    margin: 4px 2px 0 !important;
    text-align: left;
}

body.gm-menu-v2 #clients-popup .checkbox input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--gmv2-reg-ink);
}

body.gm-menu-v2 #clients-popup .checkbox label {
    color: var(--gmv2-reg-gris);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
}

/* Enviar: la píldora con relieve de la referencia (el «Yearly»): gris
   grafito, filete claro arriba, sombra corta */
/* Enviar: del ancho de su texto, centrado */
body.gm-menu-v2 #clients-popup #customerForm button[type="submit"] {
    align-self: center;
    width: auto;
    min-width: 168px;
    height: 50px;
    margin: 12px 0 2px !important;
    padding: 0 40px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: linear-gradient(180deg, #474747 0%, #383838 100%);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .005em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 4px rgba(0, 0, 0, .18), 0 6px 18px rgba(0, 0, 0, .35);
    transition: opacity .2s var(--gmv2-ease), transform .15s var(--gmv2-ease), filter .2s var(--gmv2-ease);
}

body.gm-menu-v2 #clients-popup #customerForm button[type="submit"]:hover {
    filter: brightness(1.08);
}

body.gm-menu-v2 #clients-popup #customerForm button[type="submit"]:active {
    transform: scale(.985);
}

body.gm-menu-v2 #clients-popup #customerForm button[type="submit"]:disabled {
    opacity: .5;
}

body.gm-menu-v2 #clients-popup .thanks_form {
    margin: 10px 0 6px;
    color: var(--gmv2-reg-ink);
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

/* el calendario (flatpickr), con la misma paleta que el pop-up */
body.gm-menu-v2 .flatpickr-calendar.gmv2-cal {
    z-index: 100000;
    border: 0;
    border-radius: 16px;
    background: #1c1c1e;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 60px rgba(0, 0, 0, .5);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
}

body.gm-menu-v2 .flatpickr-calendar.gmv2-cal::before,
body.gm-menu-v2 .flatpickr-calendar.gmv2-cal::after {
    display: none;
}

body.gm-menu-v2 .gmv2-cal .flatpickr-months,
body.gm-menu-v2 .gmv2-cal .flatpickr-month,
body.gm-menu-v2 .gmv2-cal .flatpickr-weekdays,
body.gm-menu-v2 .gmv2-cal span.flatpickr-weekday,
body.gm-menu-v2 .gmv2-cal .flatpickr-monthDropdown-months {
    background: transparent;
    color: #fff;
    fill: #fff;
}

body.gm-menu-v2 .gmv2-cal .flatpickr-monthDropdown-months option {
    background: #1c1c1e;
}

body.gm-menu-v2 .gmv2-cal .flatpickr-current-month input.cur-year {
    color: #fff;
}

body.gm-menu-v2 .gmv2-cal .flatpickr-prev-month svg,
body.gm-menu-v2 .gmv2-cal .flatpickr-next-month svg {
    fill: #fff;
}

body.gm-menu-v2 .gmv2-cal span.flatpickr-weekday {
    color: #8a8a8e;
}

/* mes y año: dos menús lado a lado (el año, un select de menu-v2.js en vez
   del número con flechas: para un cumpleaños hay que ir décadas atrás) */
/* la franja del mes y el año, con alto para los dos menús (flatpickr la deja
   en 34 px y los cortaba) */
body.gm-menu-v2 .gmv2-cal .flatpickr-months,
body.gm-menu-v2 .gmv2-cal .flatpickr-months .flatpickr-month {
    height: 48px;
    overflow: visible;
}

body.gm-menu-v2 .gmv2-cal .flatpickr-months {
    position: relative;
    align-items: center;
    padding: 0 4px;
}

body.gm-menu-v2 .gmv2-cal .flatpickr-current-month {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 48px;
    left: 0;
    padding: 0;
    font-size: 15px;
}

body.gm-menu-v2 .gmv2-cal .flatpickr-current-month .numInputWrapper {
    display: none;
}

body.gm-menu-v2 .gmv2-cal .flatpickr-monthDropdown-months,
body.gm-menu-v2 .gmv2-cal .gmv2-cal-anio {
    height: 32px;
    margin: 0;
    padding: 0 26px 0 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 12px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

body.gm-menu-v2 .gmv2-cal .gmv2-cal-anio option {
    background: #1c1c1e;
}

body.gm-menu-v2 .gmv2-cal .flatpickr-prev-month,
body.gm-menu-v2 .gmv2-cal .flatpickr-next-month {
    top: 50%;
    height: 34px;
    padding: 9px 10px;
    transform: translateY(-50%);
}

body.gm-menu-v2 .gmv2-cal .flatpickr-innerContainer {
    padding: 2px 4px 6px;
}

body.gm-menu-v2 .gmv2-cal .flatpickr-day {
    border-radius: 10px;
    color: #e6e6e6;
}

body.gm-menu-v2 .gmv2-cal .flatpickr-day:hover {
    border-color: transparent;
    background: rgba(255, 255, 255, .1);
}

body.gm-menu-v2 .gmv2-cal .flatpickr-day.prevMonthDay,
body.gm-menu-v2 .gmv2-cal .flatpickr-day.nextMonthDay,
body.gm-menu-v2 .gmv2-cal .flatpickr-day.flatpickr-disabled {
    color: rgba(255, 255, 255, .25);
}

body.gm-menu-v2 .gmv2-cal .flatpickr-day.selected {
    border-color: #fff;
    background: #fff;
    color: #111;
}

body.gm-menu-v2 .gmv2-cal .flatpickr-day.today {
    border-color: rgba(255, 255, 255, .35);
}

@keyframes gmv2-entra {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: none; }
}

/* ───────────────────────── 3 · Vista del ítem ───────────────────────── */

/* Una sola página con scroll. La foto queda pegada arriba (sticky) fundida en
   el color del fondo; al bajar, el texto sube sobre ella y la foto se aleja,
   se oscurece y se difumina (menu-v2.js deja el avance en --pp, de 0 a 1).
   Con .gmv2-tinted el fondo y la tinta salen de la foto; sin eso valen los
   colores del Customizer. frontend sigue moviendo el drawer y la foto con
   estilos en línea: aquí se anulan. */
body.gm-menu-v2 #popup {
    --pop-img-h: min(52vh, 460px);
    --pop-band: 112px;
    --pop-line: rgba(127, 127, 127, .26);
    --pop-line-soft: rgba(127, 127, 127, .14);
    --pop-surface: rgba(127, 127, 127, .14);
    --pp: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    background-color: var(--pop-bg);
    transition-property: transform, opacity, --pop-bg;
}

@supports (height: 1dvh) {
    body.gm-menu-v2 #popup {
        --pop-img-h: min(52dvh, 460px);
    }
}

body.gm-menu-v2 #popup::-webkit-scrollbar {
    display: none;
}

/* cerrar y me gusta: siempre a la vista */
body.gm-menu-v2 #popup .gmv2-pop-bar {
    position: sticky;
    top: 0;
    z-index: 60;
    height: 0;
}

body.gm-menu-v2 #popup .gmv2-pop-btn {
    position: absolute;
    top: 12px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .42) !important;
    color: #fff !important;
    font-size: 21px !important;
    cursor: pointer;
    transform: none !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    transition: background-color .2s var(--gmv2-ease);
}

body.gm-menu-v2 #popup .gmv2-pop-btn.hidden {
    display: none !important;
}

body.gm-menu-v2 #popup .gmv2-pop-close {
    left: 12px;
}

body.gm-menu-v2 #popup #like-button.gmv2-pop-btn {
    left: auto;
    right: 12px;
}

body.gm-menu-v2 #popup #like-button .gmv2-ic--on,
body.gm-menu-v2 #popup #like-button.active .gmv2-ic--off {
    display: none;
}

body.gm-menu-v2 #popup #like-button.active .gmv2-ic--on {
    display: inline-block;
    color: var(--gmv2-like-on);
}

body.gm-menu-v2 #popup #like-button img {
    width: 36px;
}

body.gm-menu-v2 #popup #like-button.gmv2-pulse .gmv2-ic--on {
    animation: gmv2-late .32s var(--gmv2-ease);
}

@keyframes gmv2-late {
    0% { transform: scale(.7); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

body.gm-menu-v2 #popup #image-container {
    position: sticky;
    top: calc(var(--pop-band) - var(--pop-img-h));
    z-index: 2;
    width: 100%;
    max-width: none;
    height: var(--pop-img-h) !important;
    overflow: hidden;
    touch-action: manipulation;
}

/* al bajar, la foto o el video se oscurecen y se difuminan: el filtro va en
   el propio elemento (el velo con backdrop-filter no se aplicaba dentro del
   contenedor sticky y la foto quedaba igual) */
body.gm-menu-v2 #popup #image-container #item-img,
body.gm-menu-v2 #popup #image-container #video-container,
body.gm-menu-v2 #popup #image-container .popup-item-gallery {
    filter: brightness(calc(1 - var(--pp) * .55)) blur(calc(var(--pp) * 8px)) !important;
    transform: none !important;
    transform-origin: 50% 50%;
    transition: none !important;
}

body.gm-menu-v2 #popup #item-img,
body.gm-menu-v2 #popup #item-video,
body.gm-menu-v2 #popup .popup-item-gallery img {
    border-radius: 0;
}

body.gm-menu-v2 #popup #image-container::before {
    content: none;
}

/* El fundido hacia el fondo acompaña a la franja: arranca a media foto y, al
   compactarse, queda en sus últimos 44 px. Va encima del velo oscuro para que
   el borde de abajo sea siempre el color del fondo, sin filete. */
body.gm-menu-v2 #popup #image-container::after {
    --fade: calc(46% + var(--pp) * (54% - 44px));
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, calc(.28 * (1 - var(--pp)))) 0, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) var(--fade), var(--pop-bg) 100%);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
    body.gm-menu-v2 #popup #image-container::after {
        background-image: linear-gradient(to bottom,
            rgba(0, 0, 0, calc(.28 * (1 - var(--pp)))) 0,
            rgba(0, 0, 0, 0) 20%,
            color-mix(in srgb, var(--pop-bg) 0%, transparent) var(--fade),
            color-mix(in srgb, var(--pop-bg) 45%, transparent) calc(var(--fade) + (100% - var(--fade)) * .45),
            color-mix(in srgb, var(--pop-bg) 88%, transparent) calc(var(--fade) + (100% - var(--fade)) * .8),
            var(--pop-bg) 100%);
    }
}

/* la etiqueta y las simbologías van en la fila de datos */
body.gm-menu-v2 #popup #tag,
body.gm-menu-v2 #popup #simbologias {
    display: none !important;
}

/* galería: los puntos en una cápsula de vidrio a la derecha (las rayitas
   blancas sueltas casi no se veían sobre fotos claras); el activo se alarga */
body.gm-menu-v2 #popup .popup-item-gallery .slick-dots-vertical {
    z-index: 5;
    right: 12px;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
}

body.gm-menu-v2 #popup .popup-item-gallery .slick-dots-vertical li,
body.gm-menu-v2 #popup .popup-item-gallery .slick-dots-vertical li button {
    width: 6px;
    height: 6px;
    margin: 0;
    padding: 0;
    border-radius: 3px;
}

body.gm-menu-v2 #popup .popup-item-gallery .slick-dots-vertical li button {
    background: rgba(255, 255, 255, .45);
    box-shadow: none;
    font-size: 0;
    transition: height .25s var(--gmv2-ease), background-color .2s var(--gmv2-ease);
}

body.gm-menu-v2 #popup .popup-item-gallery .slick-dots-vertical li.slick-active,
body.gm-menu-v2 #popup .popup-item-gallery .slick-dots-vertical li.slick-active button {
    height: 18px;
}

body.gm-menu-v2 #popup .popup-item-gallery .slick-dots-vertical li.slick-active button,
body.gm-menu-v2 #popup .popup-item-gallery .slick-dots-vertical li button:hover {
    background: #fff;
}

/* Doble toque: el corazón aparece grande donde se tocó, con el rojo del me
   gusta. Entra con un rebote, deja una onda y sube mientras se apaga. */
body.gm-menu-v2 .gmv2-burst {
    position: absolute;
    z-index: 6;
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
    color: var(--gmv2-like-on);
    font-size: 96px;
    pointer-events: none;
}

body.gm-menu-v2 .gmv2-burst .gmv2-ic {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .35));
    transform-origin: 50% 60%;
    animation: gmv2-burst .95s cubic-bezier(.2, .8, .25, 1) forwards;
}

body.gm-menu-v2 .gmv2-burst::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 3px solid var(--gmv2-like-on);
    border-radius: 50%;
    opacity: 0;
    animation: gmv2-onda .6s ease-out .05s forwards;
}

@keyframes gmv2-burst {
    0% { opacity: 0; transform: rotate(var(--gmv2-rot, 0deg)) scale(.2); }
    16% { opacity: 1; transform: rotate(var(--gmv2-rot, 0deg)) scale(1.22); }
    30% { transform: rotate(var(--gmv2-rot, 0deg)) scale(.9); }
    44% { transform: rotate(var(--gmv2-rot, 0deg)) scale(1.06); }
    58% { opacity: 1; transform: rotate(var(--gmv2-rot, 0deg)) scale(1); }
    100% { opacity: 0; transform: translateY(-56px) rotate(0deg) scale(.72); }
}

@keyframes gmv2-onda {
    0% { opacity: .7; transform: scale(.4); }
    100% { opacity: 0; transform: scale(1.7); }
}

body.gm-menu-v2 #popup #drawer {
    position: relative;
    z-index: 1;
    bottom: auto !important;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: calc(100% - var(--pop-img-h));
    margin-top: -1px;
    padding-bottom: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* en el flujo (helpers.css fuerza .absolute con !important): así la hoja
   mide lo que tiene */
body.gm-menu-v2 #popup #image-container.hidden ~ #drawer {
    position: relative !important;
    min-height: 0;
    margin-top: 0;
    padding-top: 60px;
}

/* Sin foto, el pop-up es una hoja del alto de lo que tiene: sube desde abajo
   y no llega arriba (la carta se ve detrás, con el velo); si hay mucho (las
   recomendaciones), crece hasta dejar 64 px arriba y tiene scroll. Abrir y
   cerrar sigue igual: translate-y-full la baja su propio alto. */
body.gm-menu-v2 #popup:has(#image-container.hidden) {
    top: auto;
    height: auto;
    min-height: 50%;
    max-height: calc(100% - 64px);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 -20px 60px rgba(0, 0, 0, .4);
}

@supports (height: 1dvh) {
    body.gm-menu-v2 #popup:has(#image-container.hidden) {
        min-height: 50dvh;
        max-height: calc(100dvh - 64px);
    }
}

/* el velo oscurece la carta detrás y tocarlo cierra (menu-v2.js); con foto el
   pop-up lo tapa entero */
body.gm-menu-v2 #popup_bg.bg-black\/50 {
    z-index: 49;
    pointer-events: auto;
    cursor: pointer;
    background-color: rgba(0, 0, 0, .64);
}

body.gm-menu-v2 #popup #drawer-flap,
body.gm-menu-v2 #popup #drawer .close-popup {
    display: none;
}

body.gm-menu-v2 #popup #drawer-content {
    padding: 16px 16px calc(40px + env(safe-area-inset-bottom));
}

body.gm-menu-v2 #popup #drawer-content > * {
    margin-top: 0;
    margin-bottom: 0;
}

body.gm-menu-v2 #popup #item-category {
    font-size: 12px !important;
    line-height: 1.3;
    letter-spacing: .1em;
    text-align: left;
    opacity: .66;
}

body.gm-menu-v2 #popup #drawer-content > h1 {
    margin-top: 6px;
    font-size: calc(24px * var(--gmv2-k-pop, 1));
    line-height: 1.12;
    text-align: left;
    text-wrap: balance;
}

/* 10a · la fila de datos: etiqueta y simbologías por grupo, separadas por un filete */
body.gm-menu-v2 #popup #drawer-content > .gmv2-meta {
    display: flex;
    margin-top: 16px;
    font-family: var(--gmv2-body, inherit);
}

body.gm-menu-v2 #popup #drawer-content > .gmv2-meta[hidden] {
    display: none;
}

body.gm-menu-v2 #popup .gmv2-meta::-webkit-scrollbar {
    display: none;
}

body.gm-menu-v2 #popup .gmv2-meta__col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 0 18px;
    border-left: 1px solid var(--pop-line);
}

body.gm-menu-v2 #popup .gmv2-meta__col:first-child {
    padding-left: 0;
    border-left: 0;
}

body.gm-menu-v2 #popup .gmv2-meta__col--tag {
    flex: none;
    max-width: 40%;
}

body.gm-menu-v2 #popup .gmv2-meta__col--simb {
    flex: 1 1 auto;
}

body.gm-menu-v2 #popup .gmv2-meta__k {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .6;
}

body.gm-menu-v2 #popup .gmv2-meta__v {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: 14px;
    line-height: 1.3;
}

body.gm-menu-v2 #popup .gmv2-simb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

body.gm-menu-v2 #popup .gmv2-simb > img {
    flex: none;
    width: 16px;
    height: 16px;
}

body.gm-menu-v2 #popup #content {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
    text-wrap: pretty;
    opacity: .84;
}

body.gm-menu-v2 #popup #drawer-content > .gmv2-precio-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 12px;
    margin-top: 22px;
}

body.gm-menu-v2 #popup #drawer-content > .gmv2-precio-fila:not(:has(#prices:not(.hidden), #external-link:not(.hidden))) {
    display: none;
}

body.gm-menu-v2 #popup #prices {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding-top: 0;
    font-size: 15px;
    line-height: 1.3;
}

/* precio con variaciones: la lista ocupa todo el ancho y el botón baja */
body.gm-menu-v2 #popup #prices:has(> div + div) {
    flex-basis: 100%;
}

body.gm-menu-v2 #popup #prices > div {
    margin: 0;
    padding: 11px 0;
    border-top: 1px solid var(--pop-line-soft);
    align-items: baseline;
}

body.gm-menu-v2 #popup #prices > div:first-child {
    border-top: 0;
    padding-top: 0;
}

/* precio único o con descuento: grande, a la izquierda, sin filas */
body.gm-menu-v2 #popup #prices > div.justify-center {
    justify-content: flex-start;
    padding: 0;
    border: 0;
    font-size: 22px;
    line-height: 1.1;
}

body.gm-menu-v2 #popup #prices > div.justify-center .line-through {
    font-size: inherit;
}

/* 10d · el enlace: una píldora compacta, en la tipografía del texto */
body.gm-menu-v2 #popup #prices:has(> div + div) ~ #external-link,
body.gm-menu-v2 #popup #prices.hidden ~ #external-link {
    margin-left: 0;
}

body.gm-menu-v2 #popup #external-link {
    display: inline-flex;
    flex: none;
    align-self: center;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    height: 38px;
    margin: 0 0 0 auto;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    background-color: var(--pop-surface);
    font-family: var(--gmv2-body, inherit) !important;
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none !important;
    white-space: nowrap;
}

body.gm-menu-v2 #popup #external-link.hidden {
    display: none;
}

body.gm-menu-v2 #popup #external-link i {
    font-size: 14px;
    opacity: .8;
}

body.gm-menu-v2 #popup #toppings {
    margin-top: 4px;
}

body.gm-menu-v2 #popup #toppings > h3,
body.gm-menu-v2 #popup #recomendaciones > h3,
body.gm-menu-v2 #popup #maridajes > h3,
body.gm-menu-v2 #popup #promociones > h3 {
    margin: 30px 0 4px;
    padding: 0;
    font-size: 13.5px !important;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .66;
}

body.gm-menu-v2 #popup #toppings > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.gm-menu-v2 #popup #toppings > ul > li:first-child {
    border-top: 0;
}

body.gm-menu-v2 #popup #toppings > ul > li {
    margin: 0;
    padding: 11px 0;
    border-top: 1px solid var(--pop-line-soft);
    font-size: 15px;
    line-height: 1.3;
}

body.gm-menu-v2 #popup #recomendaciones,
body.gm-menu-v2 #popup #maridajes,
body.gm-menu-v2 #popup #promociones {
    margin-top: 4px;
}

body.gm-menu-v2 #popup #recomendaciones > h3,
body.gm-menu-v2 #popup #maridajes > h3,
body.gm-menu-v2 #popup #promociones > h3 {
    margin-bottom: 10px;
}

/* Recomendaciones y maridajes: las tarjetas del menú, tal cual (menu-v2.js
   clona la del menú o, si el ítem es de otro menú, la arma igual). Van en un
   .section-category propio para heredar las mismas reglas y los colores del
   Customizer. */
body.gm-menu-v2 #popup .gmv2-recs.section-category {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-gap: 10px;
    margin: 0;
    padding: 0;
    background: none !important;
}

body.gm-menu-v2 #popup .gmv2-recs .post-gourmedia {
    cursor: pointer;
}

body.gm-menu-v2 #popup .gmv2-recs .post-gourmedia:not(.foto):not(.video) {
    min-height: 96px;
}

/* color sacado de la foto */
body.gm-menu-v2 #popup.gmv2-tinted {
    --pop-line: rgba(255, 255, 255, .16);
    --pop-line-soft: rgba(255, 255, 255, .09);
    --pop-surface: rgba(255, 255, 255, .1);
}

body.gm-menu-v2 #popup.gmv2-tinted #drawer {
    background-color: var(--pop-bg) !important;
    background-image: none !important;
    color: var(--pop-ink);
}

body.gm-menu-v2 #popup.gmv2-tinted #drawer-content > h1,
body.gm-menu-v2 #popup.gmv2-tinted #content,
body.gm-menu-v2 #popup.gmv2-tinted .gmv2-meta,
body.gm-menu-v2 #popup.gmv2-tinted #prices span,
body.gm-menu-v2 #popup.gmv2-tinted #prices > div,
body.gm-menu-v2 #popup.gmv2-tinted #external-link,
body.gm-menu-v2 #popup.gmv2-tinted #toppings li,
body.gm-menu-v2 #popup.gmv2-tinted #toppings li span,
body.gm-menu-v2 #popup.gmv2-tinted .gmv2-recs .info-post h2,
body.gm-menu-v2 #popup.gmv2-tinted .gmv2-recs .info-post-content,
body.gm-menu-v2 #popup.gmv2-tinted .gmv2-recs .price,
body.gm-menu-v2 #popup.gmv2-tinted .gmv2-recs .price span,
body.gm-menu-v2 #popup.gmv2-tinted #promociones p {
    color: var(--pop-ink) !important;
}

body.gm-menu-v2 #popup.gmv2-tinted #item-category,
body.gm-menu-v2 #popup.gmv2-tinted .gmv2-meta__k,
body.gm-menu-v2 #popup.gmv2-tinted #drawer h3 {
    color: var(--pop-accent) !important;
    opacity: 1;
}

body.gm-menu-v2 #popup.gmv2-tinted .gmv2-recs .post-gourmedia {
    border-color: var(--pop-line) !important;
    background-color: transparent !important;
}

@media (min-width: 640px) {
    body.gm-menu-v2 #popup {
        --pop-w: 440px;
        --pop-h: min(860px, calc(100vh - 48px));
        --pop-img-h: 380px;
        --pop-band: 100px;
        inset: auto;
        top: 50%;
        left: 50%;
        width: var(--pop-w);
        height: var(--pop-h);
        margin: calc(var(--pop-h) / -2) 0 0 calc(var(--pop-w) / -2);
        border-radius: 28px;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 120px rgba(0, 0, 0, .55);
    }

    body.gm-menu-v2 #popup.translate-y-0 {
        --tw-translate-y: 0px !important;
    }

    body.gm-menu-v2 #popup.translate-y-full {
        --tw-translate-y: 100vh !important;
    }

    /* sin foto, la tarjeta mide lo que tiene y queda centrada */
    body.gm-menu-v2 #popup:has(#image-container.hidden) {
        top: 0;
        bottom: 0;
        height: -webkit-fit-content;
        height: fit-content;
        max-height: var(--pop-h);
        margin: auto 0 auto calc(var(--pop-w) / -2);
        border-radius: 28px;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 120px rgba(0, 0, 0, .55);
    }

    body.gm-menu-v2 #popup #drawer-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    body.gm-menu-v2 #popup #drawer-content > h1 {
        font-size: calc(26px * var(--gmv2-k-pop, 1));
    }

    /* cerrado espera abajo de la pantalla: su sombra grande asomaba como una
       neblina al pie de la página */
    body.gm-menu-v2 #popup:not(.active),
    body.gm-menu-v2 #popup:not(.active):has(#image-container.hidden) {
        box-shadow: none;
    }

    @media (hover: hover) {
        body.gm-menu-v2 #popup .gmv2-pop-btn:hover {
            background-color: rgba(0, 0, 0, .5) !important;
        }

        body.gm-menu-v2 #popup.gmv2-tinted .gmv2-recs .post-gourmedia:hover {
            border-color: rgba(255, 255, 255, .32) !important;
        }
    }
}

/* ───────────────────────── Esqueletos ───────────────────────── */

/* Mientras algo carga. Todo en la GPU: antes el brillo movía el fondo
   (background-position) y el navegador repintaba cada foto en cada cuadro;
   con 70 fotos cargando no alcanzaba a pintar la página al saltar o bajar
   (quedaban zonas en blanco). Ahora el fondo queda quieto y el brillo es una
   capa que se desliza con transform; las tarjetas que todavía arma
   menu-v2.js (.gmv2-listo en el body; si el JS fallara, a los 3 s se muestran
   igual) laten con la opacidad. Las fotos entran con un fundido. */
@keyframes gmv2-brillo {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

@keyframes gmv2-latir {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

@keyframes gmv2-mostrar {
    to { visibility: visible; }
}

body.gm-menu-v2:not(.gmv2-listo) .section-category .post-gourmedia {
    background-image: linear-gradient(var(--gmv2-surface), var(--gmv2-surface)) !important;
    animation: gmv2-latir 1.4s ease-in-out infinite;
}

body.gm-menu-v2:not(.gmv2-listo) .section-category .post-gourmedia > * {
    visibility: hidden;
    animation: gmv2-mostrar 0s 3s forwards;
}

/* la foto que carga: la superficie de la tarjeta y un brillo tenue que cruza */
body.gm-menu-v2 .section-category .img-wrapper:not(.gmv2-cargada)::after,
body.gm-menu-v2 .gmv2-cat-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, transparent 20%, var(--gmv2-surface-hi) 50%, transparent 80%);
    animation: gmv2-brillo 1.6s cubic-bezier(.4, 0, .2, 1) infinite;
    pointer-events: none;
}

/* en la miniatura de la categoría el brillo va detrás: la foto lo tapa al llegar */
body.gm-menu-v2 .gmv2-cat-thumb {
    position: relative;
    overflow: hidden;
}

body.gm-menu-v2 .gmv2-cat-thumb::after {
    z-index: 0;
}

body.gm-menu-v2 .gmv2-cat-thumb img {
    position: relative;
    z-index: 1;
}

body.gm-menu-v2 .section-category .img-wrapper img.thumbnail {
    transition: opacity .35s ease;
}

body.gm-menu-v2 .section-category .img-wrapper.gmv2-esperando img.thumbnail {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    body.gm-menu-v2 .section-category .post-gourmedia,
    body.gm-menu-v2 .section-category .img-wrapper::after,
    body.gm-menu-v2 .gmv2-cat-thumb::after {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.gm-menu-v2 .section-category .post-gourmedia,
    body.gm-menu-v2 #popup,
    body.gm-menu-v2 .gmv2-burst .gmv2-ic,
    body.gm-menu-v2 .gmv2-burst::before,
    body.gm-menu-v2 .like-wrapper :is(.like-button, .gmv2-like)::before {
        transition-duration: .01s;
        animation-duration: .01s;
    }
}