/* Carta pública (ver carta.js). Los colores y la tipografía de los títulos salen del
   Diseño que cada restaurante eligió en su app — acá solo hay valores por defecto. */

:root {
    --primario: #6B5B95;
    --sobre-primario: #FFFFFF;
    --contraste: #1B1B1F;
    --titulos: system-ui, -apple-system, 'Segoe UI', sans-serif;
    --texto: system-ui, -apple-system, 'Segoe UI', sans-serif;
    --nombre-local: #FFFFFF;
    --nombre-plato: #1B1B1F;
    --precio: #6B5B95;
    --precio-oferta: #C62828;
    --redes: #6B5B95;
    --col-movil: 1;
    --col-escritorio: 2;
    --fondo: #F6F4F9;
    --tarjeta: #FFFFFF;
    --tinta: #1B1B1F;
    --suave: #6E6A78;
    --borde: #E6E1EE;
    --radio: 14px;
    --sombra: 0 1px 2px rgba(20, 16, 30, 0.06), 0 4px 14px rgba(20, 16, 30, 0.06);
    --salida: cubic-bezier(0.22, 1, 0.36, 1);
    --cajon: cubic-bezier(0.32, 0.72, 0, 1);
    --resorte: cubic-bezier(0.34, 1.4, 0.64, 1);
    --barra-alto: calc(56px + env(safe-area-inset-top));
    --vidrio: color-mix(in srgb, var(--tarjeta) 74%, transparent);
    --acento: var(--primario);
    --sobre-acento: #FFFFFF;
    --cta-fondo: #FFFFFF;
    --cta-texto: #1B1B1F;
    --vivo-abierto: #5BD873;
    --vivo-cerrado: #FF6B5E;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--fondo);
    color: var(--tinta);
    font-family: var(--texto);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    --vidrio: color-mix(in srgb, var(--tarjeta) 74%, transparent);
}

body.sin-scroll { overflow: hidden; }

/* Una imagen sin fondo que se sale de su tarjeta no corre la página de lado. */
.app { overflow-x: clip; }

button { font: inherit; color: inherit; }

.hidden { display: none !important; }

/* Íconos propios de ReserApp (estilos-carta.js): SVG de trazo, toman el color del texto. */
.ic {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
}

.icono-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

/* ---------- Cargando y avisos ---------- */

/* Mientras carga: la silueta de la portada (o de la página de enlaces) en gris sobre un
   fondo oscuro neutro — el mismo de la portada mientras baja su foto. Todavía no se sabe
   de qué restaurante es, así que no lleva colores de nadie (tampoco los de ReserApp).
   Al llegar la carta, el logo, el nombre y los botones ocupan esos mismos lugares con su
   propia entrada. Aparece tras un instante: si la carta llega enseguida, ni se ve. */
.cargando {
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;  /* como .portada-contenido: las piezas caen donde irá lo real */
    gap: 16px;
    padding: calc(48px + env(safe-area-inset-top)) 16px calc(72px + env(safe-area-inset-bottom));
    background: #16131C;
    animation: esq-aparece 300ms ease-out 150ms both;
}

.esq {
    position: relative;
    overflow: hidden;
    display: block;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
}

/* Brillo que cruza cada pieza (movimiento constante: lineal). */
.esq::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.07) 50%, transparent 75%);
    transform: translateX(-100%);
    animation: esq-brillo 1.5s linear infinite;
}

.esq-logo { width: 124px; height: 124px; border-radius: 50%; }
.esq-nombre { width: min(220px, 60%); height: 30px; margin-top: 2px; }
.esq-linea { width: min(300px, 80%); height: 12px; border-radius: 6px; margin-top: -4px; }
.esq-linea.corta { width: min(190px, 52%); }

.esq-grupo {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.esq-boton { width: 100%; height: 56px; border-radius: 16px; }
.esq-boton.alto { height: 74px; border-radius: 20px; }

.esq-redes { display: flex; gap: 10px; }
.esq-red { width: 46px; height: 46px; border-radius: 50%; }

/* Portada: botón de entrada, botones propios y redes. Enlaces: redes y botones parejos. */
.esq-enlaces { display: none; }
.ruta-enlaces .esq-portada { display: none; }
.ruta-enlaces .esq-enlaces { display: flex; }

@keyframes esq-aparece {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes esq-brillo {
    to { transform: translateX(100%); }
}

.estado {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: #FFFFFF;
    /* Pantallas de ReserApp (no del restaurante): marca 1.1, morado #44197F. */
    background: linear-gradient(160deg, #44197F 0%, #36136A 100%);
}

.estado-logo {
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
}

.estado h1 {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 800;
}

.estado p {
    margin: 0;
    max-width: 320px;
    line-height: 1.5;
    opacity: 0.9;
}

.firma {
    display: inline-block;
    margin-top: 28px;
    font-size: 12px;
    color: inherit;
    opacity: 0.7;
    text-decoration: none;
}

.firma:hover { opacity: 1; }

/* App Check usa reCAPTCHA v3: su sello flotante se oculta y en su lugar va este aviso,
   como lo permite Google. */
.grecaptcha-badge { visibility: hidden; }

.aviso-recaptcha {
    margin: 10px 0 0;
    font-size: 10px;
    line-height: 1.4;
    opacity: 0.55;
}

.aviso-recaptcha a { color: inherit; }

.franja-previa {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 6px 12px;
    background: #FFF4DC;
    color: #8A5A00;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    text-align: center;
}

/* En la vista previa la barra del menú se queda debajo de la franja (antes se pegaba
   arriba encima de ella y la franja se transparentaba detrás). */
body:has(.franja-previa) .menu-fija { top: 28px; }

.aviso-flotante {
    position: fixed;
    left: 50%;
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 80;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(27, 27, 31, 0.92);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    animation: subir 0.2s ease-out;
}

@keyframes subir {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Portada ---------- */

.portada {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(40px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
    color: var(--nombre-local);
    text-align: center;
    background-color: var(--primario);
    background-image: linear-gradient(165deg, var(--primario) 0%, color-mix(in srgb, var(--primario) 55%, var(--contraste)) 100%);
}

.portada-contenido {
    width: 100%;
    max-width: 420px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.portada-logo {

    object-fit: cover;
    border-radius: 50%;
    background: #FFFFFF;
    
}

.portada-nombre {
    margin: 0;
    font-family: var(--titulos);
    font-size: clamp(28px, 8vw, 38px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--nombre-local);
}

.portada-descripcion {
    max-width: 340px;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.92;
}

.pronto-sede {
    max-width: 320px;
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: balance;
    opacity: 0.9;
}

.pronto-sede strong,
.pronto-sede span { display: block; }

.pronto-sede strong { font-weight: 600; }

.portada-pronto {
    max-width: 300px;
    margin: 24px 0 0;
    font-size: 15px;
    line-height: 1.5;
    text-wrap: balance;
    opacity: 0.85;
}

.portada-descripcion p,
.detalle-descripcion p,
.banner-texto p { margin: 0 0 6px; }

.portada-descripcion ul,
.detalle-descripcion ul,
.banner-texto ul {
    margin: 0 0 6px;
    padding-left: 18px;
    text-align: left;
}

.sede-unica {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    
    font-size: 13px;
    font-weight: 600;
}

.sedes-portada {
    width: 100%;
    display: flex;
    flex-direction: column;
    
}

.ver-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 200px;
    margin-top: 6px;
    padding: 13px 28px;
    border: none;
    border-radius: 999px;
    font-family: var(--titulos);
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: transform 0.15s;
}

.botones {
    width: 100%;
    display: flex;
    flex-direction: column;
    
}

.redes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.red {
    display: grid;
    place-items: center;

    border-radius: 50%;

    text-decoration: none;
    
}

/* Logo de marca (simple-icons) pintado con el color elegido. Los logos llenan todo su
   cuadro y los íconos propios (de línea) cerca del 70 %: al 76 % se ven del mismo tamaño. */
.red-marca {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--icono) center / 76% no-repeat;
    mask: var(--icono) center / 76% no-repeat;
}

.portada .firma { margin-top: 24px; }

/* ---------- Menú ---------- */

/* Capa propia (will-change): sin ella, cada tarjeta que entra animada al bajar obligaba a
   volver a pintar esta foto de pantalla completa, y la lista se trababa (~0,4 s en gama
   media). */
.fondo-lista {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-position: center;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
}

.menu-cabecera {
    padding: calc(8px + env(safe-area-inset-top)) 12px 12px;
    background-color: var(--primario);
    color: var(--sobre-primario);
}

.menu-cabecera.con-foto {
    color: #FFFFFF;
    background-size: cover;
    background-position: center;
    padding-bottom: 18px;
}

.menu-barra {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 1080px;
    margin: 0 auto;
}

.menu-barra .icono-btn { color: inherit; }
.menu-barra .icono-btn:hover { background: rgba(255, 255, 255, 0.15); }

.menu-marca {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.menu-marca img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: #FFFFFF;
}

.menu-nombre {
    font-family: var(--titulos);
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-sede {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1080px;
    width: 100%;
    margin: 10px auto 0;
    padding: 7px 10px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--tinta);
    text-align: left;
    cursor: pointer;
}

.menu-sede:disabled { cursor: default; }

.menu-sede-nombre {
    font-weight: 700;
    font-size: 13px;
}

.menu-sede-horario {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buscador {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1080px;
    margin: 10px auto 0;
    padding: 0 12px;
}

.buscador .ic {
    position: absolute;
    margin-left: 12px;
    color: var(--suave);
}

.buscador input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 40px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--tarjeta);
    font: inherit;
    font-size: 14px;
    outline: none;
}

.buscador input:focus { border-color: var(--primario); }

.cat-chip {
    flex-shrink: 0;
    padding: 6px 13px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--tarjeta);
    font-family: var(--titulos);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.cat-chip.is-on {
    background: var(--primario);
    border-color: var(--primario);
    color: var(--sobre-primario);
}

.slider {
    display: flex;
    gap: 10px;
    max-width: 1080px;
    margin: 12px auto 0;
    padding: 0 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.slider::-webkit-scrollbar { display: none; }

.slide {
    flex: 0 0 82%;
    max-width: 380px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: none;
    border-radius: var(--radio);
    background-color: var(--primario);
    background-image: linear-gradient(135deg, var(--primario), color-mix(in srgb, var(--primario) 60%, var(--contraste)));
    color: var(--sobre-primario);
    text-align: left;
    cursor: pointer;
}

.slide-titulo {
    font-family: var(--titulos);
    font-size: 16px;
    font-weight: 700;
}

.slide-texto {
    font-size: 13px;
    opacity: 0.9;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.menu {
    max-width: 1080px;
    margin: 0 auto;
    padding: 12px 12px calc(96px + env(safe-area-inset-bottom));
}

.categoria {
    margin-bottom: 18px;
    scroll-margin-top: 64px;
}

.categoria-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radio);
    margin-bottom: 10px;
}

.categoria-cabecera-texto {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

/* Ícono de comida propio de la categoría (lo elige el restaurante). */
.ic.categoria-icono {
    width: 40px;
    height: 40px;
    stroke-width: 1.5;
    opacity: 0.9;
}

.categoria-nombre {
    margin: 0;
    font-family: var(--titulos);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.categoria-frase {
    margin: 3px 0 0;
    font-size: 13px;
    opacity: 0.9;
}

.platos {
    display: grid;
    grid-template-columns: repeat(var(--col-movil), minmax(0, 1fr));
    gap: 10px;
}

.plato {
    display: flex;

    border: 1px solid var(--borde);
    
    background: var(--tarjeta);
    box-shadow: var(--sombra);
    text-align: left;
    cursor: pointer;
    
}

.plato.is-apagado { opacity: 0.6; }

.plato-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    
}

.plato-nombre {
    font-family: var(--titulos);

    line-height: 1.25;
    color: var(--nombre-plato);
}

.plato-frase {
    
    color: var(--suave);
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plato-horario {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--suave);
}

.plato-horario .ic { width: 14px; height: 14px; }

.plato-mas {
    flex-shrink: 0;
    display: grid;
    place-items: center;

    font-size: 20px;
}

.plato.is-apagado .plato-mas { background: var(--borde); color: var(--suave); box-shadow: none; }

.etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.etiqueta {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.etiqueta-agotado {
    background: #ECEAF0;
    color: var(--suave);
}

.precio {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
}

.precio-desde {
    font-size: 11px;
    font-weight: 600;
    color: var(--suave);
}

.precio-actual,
.precio-oferta {
    
    font-weight: 800;
    color: var(--precio);
}

.precio-oferta { color: var(--precio-oferta); }

.precio-antes {
    font-size: 12px;
    color: var(--suave);
    text-decoration: line-through;
}

.vacio {
    padding: 40px 12px;
    text-align: center;
    color: var(--suave);
}


/* ---------- Hoja inferior ---------- */

.hoja-fondo {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(8, 6, 12, 0.62);
    animation: aparecer 300ms ease both;
    touch-action: none;
}

@keyframes aparecer {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hoja {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    max-height: 88vh;
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 560px;
    overflow: hidden;
    border-radius: 26px 26px 0 0;
    background: var(--fondo);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
    animation: hoja-cajon 420ms var(--cajon) both;
    /* Quieta bajo el dedo: solo se desplaza su cuerpo (y la galería de fotos, de lado). */
    touch-action: none;
}

@keyframes hoja-subir {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.hoja-cabecera {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 12px 8px 16px;
}

.hoja-cabecera h2 {
    flex: 1;
    margin: 4px 0 0;
    font-family: var(--titulos);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.hoja-cerrar,
.hoja-accion { background: var(--tarjeta); }

.hoja-cuerpo {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    /* Sin el rebote del iPhone: aunque el contenido quepa entero, no se mueve. */
    overscroll-behavior: none;
    touch-action: pan-y;
    padding: 0 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hoja-pie {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--borde);
    background: var(--tarjeta);
}

.detalle-frase {
    margin: 0;
    color: var(--suave);
    font-size: 14px;
}

.grupo {
    padding: 10px 12px;
    border-radius: var(--radio);
    background: var(--tarjeta);
    border: 1px solid var(--borde);
}

.grupo-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.grupo-nombre {
    font-family: var(--titulos);
    font-weight: 700;
    font-size: 14px;
}

.grupo-regla {
    font-size: 11px;
    font-weight: 600;
    color: var(--suave);
}

.grupo-regla.is-obligatoria { color: var(--primario); }

.opcion,
.sugerido {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 0;
    border: none;
    border-top: 1px solid var(--borde);
    background: none;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.grupo-cabecera + .opcion,
.grupo-cabecera + .sugerido { border-top: none; }

.opcion input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primario);
}

.opcion-nombre { flex: 1; }

.opcion-precio {
    font-size: 13px;
    font-weight: 700;
    color: var(--suave);
}

.sugerido .ic { color: var(--primario); }

.campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
}

.campo em {
    font-style: normal;
    font-weight: 500;
    color: var(--suave);
}

.campo input,
.campo textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: var(--tarjeta);
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    outline: none;
    resize: vertical;
}

.campo input:focus,
.campo textarea:focus { border-color: var(--primario); }

.segmentos {
    display: flex;
    gap: 8px;
}

/* El elegido: borde, ícono y fondo teñido en el color del precio (en tema oscuro ya viene
   aclarado, ver aplicarTema) y la letra en tinta; el otro queda en gris. */
.segmento {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px;
    border: 2px solid var(--borde);
    border-radius: 12px;
    background: var(--tarjeta);
    color: var(--suave);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 160ms var(--salida), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.segmento:active { transform: scale(0.97); }

/* Medios de pago y motivos de la reserva: pueden ser varios, de a dos por fila como
   Domicilio y Recoger; si sobra uno, ocupa la fila entera. */
.segmentos-rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.segmentos-rejilla .segmento:last-child:nth-child(odd) { grid-column: 1 / -1; }

.segmento.is-on {
    border-color: var(--precio);
    color: var(--tinta);
    background: color-mix(in srgb, var(--precio) 18%, var(--tarjeta));
}

.segmento.is-on .ic { color: var(--precio); }

.cantidad {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    background: var(--fondo);
    font-weight: 800;
}

.cantidad span {
    min-width: 22px;
    text-align: center;
}

.cantidad .icono-btn {
    width: 32px;
    height: 32px;
    background: var(--tarjeta);
}

.cantidad-chica .icono-btn {
    width: 28px;
    height: 28px;
}

.cantidad-chica .ic { width: 17px; height: 17px; }

.boton-principal {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    border-radius: 999px;
    background: var(--primario);
    color: var(--sobre-primario);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.boton-whatsapp {
    background: #25D366;
    color: #FFFFFF;
}

.no-pedible {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--suave);
}

.nota-suave {
    margin: 0;
    font-size: 12px;
    color: var(--suave);
}

/* La sede del pedido y su estado en vivo debajo (el mismo punto de la portada, sin cápsula). */
.pedido-sede {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    font-weight: 700;
    font-size: 15px;
}

.items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radio);
    background: var(--tarjeta);
    border: 1px solid var(--borde);
}

.item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-nombre {
    font-weight: 700;
    font-size: 14px;
}

.item-detalle {
    font-size: 12px;
    color: var(--suave);
}

.item-precio {
    font-size: 13px;
    font-weight: 800;
    color: var(--precio);
}

.total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 2px;
    font-size: 16px;
}

.total strong { font-size: 18px; }

/* ---------- Banner emergente ---------- */

.banner-capa {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 12, 22, 0.55);
    animation: aparecer 0.2s ease-out;
}

.banner-popup {
    position: relative;
    width: 100%;
    max-width: 360px;
    overflow: hidden;
    border-radius: 20px;
    background: var(--tarjeta);
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: hoja-subir 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cabecera con el color principal y la textura del restaurante. */
.banner-cabecera {
    
    min-height: 64px;
    padding: 22px 44px 18px;
    background-color: var(--primario);
    color: var(--sobre-primario);
}

.banner-popup h2 {
    margin: 0;
    font-family: var(--titulos);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
}

.banner-cuerpo { padding: 16px 18px 18px; }

.banner-cuerpo:empty { display: none; }

.banner-texto {
    font-size: 14px;
    line-height: 1.5;
    color: var(--tinta);
}

.banner-cerrar {
    position: absolute;
    top: 8px;
    right: 8px;
    color: inherit;
    background: rgba(255, 255, 255, 0.18);
}

.banner-accion {
    width: 100%;
    margin-top: 12px;
}

/* ---------- Vista de tarjetas de categoría ---------- */

.categoria-tarjeta {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 84px;
    padding: 16px;
    border: none;
    border-radius: var(--radio);
    text-align: left;
    box-shadow: var(--sombra);
    cursor: pointer;
}

.categoria-tarjeta .ic.categoria-icono {
    width: 48px;
    height: 48px;
}

.categoria-tarjeta-texto {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.categoria-tarjeta .categoria-nombre { font-size: 22px; }

.categoria-tarjeta .categoria-frase { margin: 0; }

/* ---------- Cabecera completa del menú ---------- */

.menu-portadita {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    margin: 12px auto 0;
    text-align: center;
}

.menu-portadita-logo {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    background: #FFFFFF;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.menu-portadita-texto {
    font-size: 13px;
    line-height: 1.45;
    opacity: 0.95;
}

.menu-portadita-texto p { margin: 0 0 4px; }

.menu-portadita .redes { margin-top: 0; }

.menu-portadita .red {
    width: 34px;
    height: 34px;
}

/* ---------- Sede en el menú y su ficha ---------- */

.menu-sede-fila {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 1080px;
    margin: 10px auto 0;
}

.menu-sede-fila .menu-sede {
    flex: 1;
    min-width: 0;
    width: auto;
    margin: 0;
}

.menu-sede-info {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.95);
    color: var(--tinta);
    border-radius: 12px;
}

.sede-info-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.sede-info-link .ic { width: 16px; height: 16px; }

.sedes-portada .sede-info-link { align-self: center; }

.info-bloque {
    display: flex;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.info-sub {
    margin-top: 4px;
    font-size: 13px;
    color: var(--suave);
}

.info-sub p { margin: 0 0 4px; }

.acciones-sede {
    display: flex;
    flex-wrap: wrap;
    
}

.accion-sede {
    flex: 1;
    min-width: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--tarjeta);
    color: var(--tinta);
    
    font-weight: 700;
    text-decoration: none;
}

.horario-fila {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-top: 1px solid var(--borde);
    font-size: 13px;
}

.grupo-cabecera + .horario-fila { border-top: none; }

.horario-fila.is-hoy {
    font-weight: 800;
    color: var(--primario);
}

/* ---------- Varios ---------- */

.precio-ver {
    font-size: 13px;
    font-weight: 800;
    color: var(--precio);
}

.opcion-info { cursor: default; }

.hoja-cabecera .hoja-accion + .hoja-cerrar { margin-left: 0; }

/* ---------- Textura propia (Diseño → Textura) ----------
   Va en una capa aparte (::before), con su propia opacidad, para que:
   - se vea IGUAL de intensa sobre cualquier color (el trazo es blanco puro sobre fondos
     oscuros o negro puro sobre claros, y la intensidad la da --textura-opacidad);
   - se desvanezca donde va el texto (a la izquierda en tarjetas y banners, al centro en
     la portada) y no le quite claridad. */

.portada:not(.con-foto),
.menu-cabecera:not(.con-foto),
.slide,
.categoria-tarjeta,
.categoria-cabecera,
.banner-cabecera {
    position: relative;
    isolation: isolate;
}

.portada:not(.con-foto)::before,
.menu-cabecera:not(.con-foto)::before,
.slide::before,
.categoria-tarjeta::before,
.categoria-cabecera::before,
.banner-cabecera::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: var(--textura-clara);
    opacity: var(--textura-opacidad);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 72%);
    mask-image: linear-gradient(90deg, transparent 18%, #000 72%);
}

/* Sobre colores claros el trazo va en negro, un poco más tenue para verse parejo. */
.categoria-tarjeta.fondo-claro::before,
.categoria-cabecera.fondo-claro::before {
    background-image: var(--textura-oscura);
    opacity: calc(var(--textura-opacidad) * 0.7);
}

.primario-claro .portada:not(.con-foto)::before,
.primario-claro .menu-cabecera:not(.con-foto)::before,
.primario-claro .slide::before,
.primario-claro .banner-cabecera::before {
    background-image: var(--textura-oscura);
    opacity: calc(var(--textura-opacidad) * 0.7);
}

/* Portada: despejado el centro (logo, nombre, botones); la textura en los bordes. */
.portada:not(.con-foto)::before {
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, transparent 35%, #000 100%);
    mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, transparent 35%, #000 100%);
}

/* Cabecera del menú y del banner: de fondo parejo pero suave (el texto va centrado). */
.menu-cabecera:not(.con-foto)::before,
.banner-cabecera::before {
    -webkit-mask-image: none;
    mask-image: none;
    opacity: calc(var(--textura-opacidad) * 0.75);
}

/* ---------- Pantallas grandes ---------- */

@media (min-width: 720px) {
    .platos { grid-template-columns: repeat(var(--col-escritorio), minmax(0, 1fr)); }
    .categoria-nombre { font-size: 22px; }

}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Descripción de la categoría ---------- */

.categoria-descripcion {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    opacity: 0.92;
}

.categoria-descripcion p { margin: 0 0 4px; }

.categoria-descripcion ul {
    margin: 0 0 4px;
    padding-left: 18px;
}

/* En tarjetas va debajo de la tarjeta abierta, sobre el fondo de la carta. */
.categoria-descripcion-suelta {
    margin: 10px 4px 0;
    color: var(--tinta);
    opacity: 1;
}

/* ---------- Modo TV ---------- */

body.modo-tv {
    cursor: none;
    overflow: hidden;
}

.tv {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 2vh;
    padding: 3vh 4vw;
    background: var(--fondo);
}

.tv-cabecera {
    display: flex;
    align-items: center;
    gap: 1.5vw;
}

.tv-cabecera img {
    width: 7vh;
    height: 7vh;
    border-radius: 50%;
    object-fit: cover;
    background: #FFFFFF;
}

.tv-nombre {
    font-family: var(--titulos);
    font-size: 4.5vh;
    font-weight: 700;
    color: var(--primario);
}

.tv-sede {
    margin-left: auto;
    padding: 0.8vh 1.6vw;
    border-radius: 999px;
    background: var(--primario);
    color: var(--sobre-primario);
    font-size: 2.2vh;
    font-weight: 700;
}

.tv-slide {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2.5vh;
    animation: tv-entrar 0.6s ease-out;
}

@keyframes tv-entrar {
    from { opacity: 0; transform: translateY(2vh); }
    to { opacity: 1; transform: translateY(0); }
}

.tv-categoria {
    padding: 2.5vh 2.5vw;
    margin: 0;
}

.tv-categoria .categoria-nombre { font-size: 5vh; }

.tv-categoria .categoria-frase { font-size: 2.4vh; }

.tv-categoria .ic.categoria-icono {
    width: 9vh;
    height: 9vh;
}

.tv-platos {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 2vh 2vw;
}

.tv-plato {
    display: flex;
    align-items: center;
    gap: 2vw;
    padding: 2vh 2vw;
    border-radius: 2vh;
    background: var(--tarjeta);
    box-shadow: var(--sombra);
}

.tv-plato.is-agotado { opacity: 0.5; }

.tv-plato-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6vh;
}

.tv-plato-nombre {
    font-family: var(--titulos);
    font-size: 3.4vh;
    font-weight: 700;
    color: var(--nombre-plato);
}

.tv-plato-frase {
    font-size: 2vh;
    color: var(--suave);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tv-plato .etiqueta { font-size: 1.5vh; }

.tv-plato .precio { flex-direction: column; align-items: flex-end; }

.tv-plato .precio-actual,
.tv-plato .precio-oferta { font-size: 3.6vh; }

.tv-plato .precio-antes,
.tv-plato .precio-desde,
.tv-plato .precio-ver { font-size: 2vh; }

.tv-banner {
    position: relative;
    isolation: isolate;
    justify-content: center;
    align-items: center;
    padding: 6vh 6vw;
    border-radius: 3vh;
    background-color: var(--primario);
    color: var(--sobre-primario);
    text-align: center;
}

.tv-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: var(--textura-clara);
    opacity: var(--textura-opacidad);
}

.primario-claro .tv-banner::before { background-image: var(--textura-oscura); }

.tv-banner h2 {
    margin: 0;
    font-family: var(--titulos);
    font-size: 8vh;
    line-height: 1.1;
}

.tv-banner-texto {
    font-size: 3.6vh;
    line-height: 1.4;
}

.tv-banner-texto p { margin: 0 0 1vh; }

.tv-pie {
    display: flex;
    justify-content: center;
    gap: 0.8vw;
}

.tv-punto {
    width: 1vh;
    height: 1vh;
    border-radius: 50%;
    background: var(--borde);
}

.tv-punto.is-on { background: var(--primario); }

/* ---------- Tema oscuro (Diseño → Fondo de la carta) ---------- */

body.tema-oscuro {
    --fondo: #121015;
    --tarjeta: #1E1A24;
    --tinta: #F2EFF7;
    --suave: #A9A3B5;
    --borde: #2F2938;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
}

.tema-oscuro .menu-sede,
.tema-oscuro .menu-sede-info {
    background: var(--tarjeta);
    color: var(--tinta);
}

.tema-oscuro .buscador input,
.tema-oscuro .campo input,
.tema-oscuro .campo textarea {
    color: var(--tinta);
}

.tema-oscuro .etiqueta-agotado {
    background: #2F2938;
    color: var(--suave);
}

.tema-oscuro .categoria-descripcion-suelta { color: var(--tinta); }

.tema-oscuro .hoja-pie { border-top-color: var(--borde); }

/* ---------- Forma del logo (Diseño → Identidad) ---------- */

.logo-cuadrado .portada-logo,
.logo-cuadrado .menu-portadita-logo { border-radius: 22%; }

.logo-cuadrado .menu-marca img,
.logo-cuadrado .tv-cabecera img { border-radius: 8px; }

/* Libre: el logo completo, sin recorte ni fondo (logos alargados o un póster). */
.logo-libre .portada-logo {
    width: auto;
    height: auto;
    max-width: min(260px, 80%);
    max-height: 200px;
    border-radius: 12px;
    object-fit: contain;
    background: none;
    box-shadow: none;
}

.logo-libre .menu-portadita-logo {
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 90px;
    border-radius: 8px;
    object-fit: contain;
    background: none;
    box-shadow: none;
}

.logo-libre .menu-marca img,
.logo-libre .tv-cabecera img {
    width: auto;
    max-width: 90px;
    border-radius: 4px;
    object-fit: contain;
    background: none;
}

/* ---------- Fotos (biblioteca de la carta) ---------- */

/* Portada con la foto desenfocada: el logo y los botones resaltan más. */
.portada.con-foto {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.portada-desenfoque {
    position: absolute;
    inset: -40px;
    z-index: -1;
    background-size: cover;
    background-position: center;
    filter: blur(18px) brightness(0.62);
    transform: scale(1.04);
}

.plato-foto-caja {
    position: relative;
    flex: 0 0 auto;
    
    aspect-ratio: 1;
}

.plato-foto {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

}

.plato-foto-caja .plato-mas {
    position: absolute;

}

/* Dos platos por fila en el celular: la foto arriba, a lo ancho. */
@media (max-width: 719px) {
    .movil-2 .plato.con-foto {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .movil-2 .plato-foto-caja { width: 100%; }
}

/* Categoría con banner: la foto reemplaza el color, la textura y el ícono. */
.categoria-cabecera.con-banner,
.categoria-tarjeta.con-banner {
    aspect-ratio: 3 / 1;
    background-size: cover;
    background-position: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.categoria-cabecera.con-banner::before,
.categoria-tarjeta.con-banner::before { display: none; }

.categoria-cabecera.con-banner { align-items: flex-end; }

/* ---------- Estilo de las categorías (Diseño → Categorías) ----------
   Cada opción entra solo si el negocio la eligió (clase en el body, ver
   aplicarEstiloCategorias). La forma, el borde y la sombra también van en los banners. */
.cat-forma-recta :is(.portada-cat-arte, .categoria-vista > .categoria-cabecera) { border-radius: 0; }
.cat-forma-capsula :is(.portada-cat-arte, .categoria-vista > .categoria-cabecera) { border-radius: 999px; }
.cat-forma-arco :is(.portada-cat-arte, .categoria-vista > .categoria-cabecera) { border-radius: 50% 50% 16px 16px / 34% 34% 16px 16px; }
/* Boleto: muescas a los lados (la máscara se come el box-shadow: la sombra va en el botón). */
.cat-forma-boleto :is(.portada-cat-arte, .categoria-vista > .categoria-cabecera) {
    -webkit-mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
    box-shadow: none;
}
.cat-forma-boleto:not(.cat-sin-sombra) .portada-cat { filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.28)); }
.cat-alto :is(.portada-cat-arte, .categoria-vista > .categoria-cabecera):not(.con-banner) { aspect-ratio: var(--cat-alto); min-height: 0; }
.cat-margen :is(.portada-cat-arte, .categoria-vista > .categoria-cabecera):not(.con-banner) { padding: var(--cat-margen); }
.cat-alinear-centro :is(.portada-cat-arte, .categoria-vista > .categoria-cabecera):not(.con-banner) { text-align: center; }
.cat-alinear-centro .categoria-tarjeta-texto { align-items: center; }
.cat-alinear-der :is(.portada-cat-arte, .categoria-vista > .categoria-cabecera):not(.con-banner) { flex-direction: row-reverse; text-align: right; }
.cat-alinear-der .categoria-tarjeta-texto { align-items: flex-end; }
.cat-alinear-der .categoria-vista > .categoria-cabecera:not(.con-banner) { padding-right: 56px; }
.cat-vertical-arriba :is(.portada-cat-arte, .categoria-vista > .categoria-cabecera):not(.con-banner) { align-items: flex-start; }
.cat-vertical-abajo :is(.portada-cat-arte, .categoria-vista > .categoria-cabecera):not(.con-banner) { align-items: flex-end; }
.cat-tamano :is(.portada-cat-arte, .categoria-vista > .categoria-cabecera) .categoria-nombre { font-size: var(--cat-tamano); }
.cat-letra :is(.portada-cat-arte, .categoria-vista > .categoria-cabecera) .categoria-nombre { font-family: var(--cat-letra); }
.cat-mayusculas :is(.portada-cat-arte, .categoria-vista > .categoria-cabecera) .categoria-nombre { text-transform: uppercase; letter-spacing: 0.02em; }
.cat-borde-fino :is(.portada-cat-arte, .categoria-vista > .categoria-cabecera) { outline: 2px solid var(--cat-borde); outline-offset: -7px; }
.cat-borde-doble :is(.portada-cat-arte, .categoria-vista > .categoria-cabecera) { outline: 5px double var(--cat-borde); outline-offset: -9px; }
.cat-sin-sombra .portada-cat-arte { box-shadow: none; }

/* Imágenes sin fondo de la categoría (detrás o delante del texto, que va en la capa 1). */
.cat-recorte {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 2;
    width: auto;
    max-width: none;
    height: var(--alto);
    pointer-events: none;
    transform: rotate(var(--giro));
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.3));
}
.cat-recorte.es-detras { z-index: 0; }

/* Slider con imagen: la foto es el banner (vertical u horizontal, como se diseñó). */
.slide.con-imagen {
    position: relative;
    flex: 0 0 auto;
    width: auto;
    max-width: 82%;
    padding: 0;
    overflow: hidden;
    background: var(--borde);
}

.slide.con-imagen::before { display: none; }

.slide-imagen {
    height: 190px;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: cover;
}

.slide.con-imagen .slide-titulo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 12px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    color: #FFFFFF;
}

/* Detalle del plato y hoja de la sede: foto arriba. */
.sede-foto {
    width: 100%;
    display: block;
    margin-bottom: 12px;
    object-fit: cover;
    border-radius: 14px;
    background: var(--borde);
    aspect-ratio: 16 / 9;
}

/* Banner emergente con imagen: la foto manda, la X flota encima. */
.banner-popup.con-imagen .banner-cerrar {
    z-index: 1;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.45);
}

.banner-imagen {
    width: 100%;
    max-height: 68vh;
    display: block;
    object-fit: contain;
    background: #000;
}

.banner-popup.con-imagen .banner-cuerpo:not(:has(*)) { display: none; }

.banner-popup.con-imagen .banner-cuerpo h2 {
    margin-bottom: 6px;
    color: var(--tinta);
}

/* Modo TV */
.tv-banner.con-imagen {
    padding: 0;
    overflow: hidden;
    background: #000;
}

.tv-banner.con-imagen::before { display: none; }

.tv-banner-imagen {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tv-banner.con-imagen h2 {
    margin-top: auto;
    align-self: stretch;
    padding: 4vh 4vw;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #FFFFFF;
}

.tv-plato-foto {
    flex: 0 0 auto;
    width: 9vh;
    height: 9vh;
    border-radius: 1.4vh;
    object-fit: cover;
}

/* Sin zoom al escribir en el celular: con letra menor a 16px, iOS/Android acercan la
   pantalla al tocar el buscador o los campos del pedido. */
@media (max-width: 719px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Texto solo para lectores de pantalla y buscadores (ej. categoría con el título ya dibujado en su banner). */
.solo-lector {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================================
   Rediseño 2026-10 (v2). Entrada con botones de sede, cabecera que se retrae al bajar,
   inicio con portadas de categoría, vista por categoría con "Sigue con", tarjetas de
   plato y hojas nuevas. Movimiento: solo transform, opacidad, filtro y recorte; cada
   animación tiene un porqué (llegar, orientar, confirmar) y todo se apaga si el
   celular pide menos movimiento.
   ===================================================================================== */

/* ---------- Coreografía de entrada (solo al navegar, ver consumirAnimacion) ---------- */

@keyframes caer {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes logo-entra {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: none; }
}

@keyframes fondo-respira {
    from { opacity: 0.3; transform: scale(1.14); }
    to { opacity: 1; transform: none; }
}

@keyframes brillo {
    from { transform: translateX(-120%); }
    to { transform: translateX(120%); }
}

/* Cortas y sin esperas largas: la carta responde de una (se siente liviana). */
.entra .cae,
.entra.cae {
    animation: caer 460ms var(--salida) both;
    animation-delay: calc(90ms + var(--i, 0) * 50ms);
}

.portada.entra .portada-logo,
.menu-hero.entra .menu-hero-logo {
    animation: logo-entra 620ms var(--resorte) both;
    animation-delay: 40ms;
}

/* Aparecer al entrar en pantalla (revelar): suben un poco mientras aparecen. */
.rv {
    transition: opacity 300ms var(--salida), transform 360ms var(--salida);
}

.rv.rv-oculto {
    opacity: 0;
    transform: translateY(16px);
}

.portada-cat.rv.rv-oculto { transform: translateY(20px) scale(0.98); }
.plato.rv.rv-oculto { transform: translateY(12px); }

/* ---------- Estado en vivo de la sede ---------- */

.vivo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}

.vivo-punto {
    position: relative;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vivo-cerrado);
}

.vivo.is-abierta .vivo-punto { background: var(--vivo-abierto); }

/* Latido: solo cuando está abierto (dice "en vivo"). */
.vivo.is-abierta .vivo-punto::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--vivo-abierto);
    animation: latido 2.2s var(--salida) infinite;
}

@keyframes latido {
    from { transform: scale(1); opacity: 0.7; }
    to { transform: scale(3); opacity: 0; }
}

/* ---------- Entrada (portada) ---------- */

.portada {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: calc(48px + env(safe-area-inset-top));
}

.portada-fondo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
}

.portada.entra .portada-fondo { animation: fondo-respira 1300ms var(--salida) both; }

.portada-contenido {
    justify-content: center;
    gap: 16px;
}

.portada-logo {
    width: 124px;
    height: 124px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12), 0 20px 50px rgba(0, 0, 0, 0.45);
}

.portada-nombre {
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.sedes-portada {
    gap: 10px;
    margin-top: 10px;
}

.sedes-titulo {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.75;
}

/* Cada sede es un botón de vidrio con borde de luz; al llegar, un brillo lo cruza una vez. */
.sede-boton {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;

    min-height: 74px;
    
    border: 1px solid transparent;
    border-radius: 20px;
    background:
        linear-gradient(rgba(22, 19, 28, 0.8), rgba(22, 19, 28, 0.8)) padding-box,
        linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.2)) border-box;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    text-align: left;
    cursor: pointer;
    transition: transform 180ms var(--salida);
}

.sede-boton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
    transform: translateX(-120%);
    pointer-events: none;
}

.portada.entra .sede-boton::after {
    animation: brillo 1100ms var(--salida) both;
    animation-delay: calc(700ms + var(--i, 0) * 70ms);
}

.sede-boton:active { transform: scale(0.98); }

.sede-boton-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sede-boton-nombre {
    font-family: var(--titulos);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.sede-boton .vivo { color: rgba(255, 255, 255, 0.8); }

.sede-unica {
    flex-direction: column;
    gap: 8px;
}

.ver-menu:active { transform: scale(0.97); }

.redes { gap: 12px; margin-top: 8px; }

.red {

    transition: transform 200ms var(--resorte);
}

.red:active { transform: scale(0.9); }

/* ---------- Barra fija del menú ---------- */

.menu-fija {
    position: sticky;
    top: 0;
    z-index: 30;
    padding-top: env(safe-area-inset-top);
    transition: background-color 220ms ease, box-shadow 220ms ease;
    view-transition-name: barra;
}

.menu-fija.is-solida,
.menu-fija.con-buscador {
    background: color-mix(in srgb, var(--fondo) 95%, transparent);
    box-shadow: 0 1px 0 var(--borde);
}

.menu-fija .menu-barra {
    height: 56px;
    padding: 0 10px;
}

.menu-fija .menu-marca {
    color: var(--tinta);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 300ms var(--salida);
}

.menu-fija.is-solida .menu-marca { opacity: 1; transform: none; }

.menu-fija .menu-nombre { font-size: 17px; }

.barra-btn,
.menu-barra .barra-btn:hover {
    width: 40px;
    height: 40px;

    transition: transform 200ms var(--resorte);
}

.barra-btn:active { transform: scale(0.88); }

/* ---------- Cabecera del inicio del menú ----------
   "Postal" (2026-10-14): arriba la foto del restaurante como una tarjeta de bordes
   redondos con margen (más baja que antes); el logo como un sello montado en su esquina de
   abajo, con el nombre a su lado; debajo, a lo ancho, la sede (un boleto) y la barra de
   atajos. Colores, letra y forma del logo son los de cada restaurante. Solo se anima
   transform y opacity. */

.menu-hero {
    --hero-lado: 16px;
    --postal-margen: 10px;
    --logo-hero: clamp(84px, 24vw, 112px);
    position: relative;
    isolation: isolate;
    margin-top: calc(-1 * var(--barra-alto));
    padding: 0 var(--hero-lado) 22px;
    color: var(--tinta);
    text-align: left;
}

.hero-portada {
    position: relative;
    z-index: -1;
    
    margin: var(--postal-margen) calc(var(--postal-margen) - var(--hero-lado)) 0;
    overflow: hidden;
    border-radius: 26px;
    background: var(--tarjeta);
}

/* Velo arriba para que los botones de la barra se lean sobre cualquier foto. */
.menu-hero.con-foto .hero-portada::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.32), transparent 42%);
    pointer-events: none;
}

.hero-portada-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center top;
}

/* Sin foto: el color de la marca con su textura. */
.menu-hero.sin-foto .hero-portada { background-color: var(--primario); }

.menu-hero.sin-foto .hero-portada::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--textura-clara);
    opacity: calc(var(--textura-opacidad) * 0.75);
}

.primario-claro .menu-hero.sin-foto .hero-portada::before { background-image: var(--textura-oscura); }

.menu-hero-fila {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    max-width: 560px;
    margin: calc(var(--logo-hero) * -0.5) auto 0;
}

.menu-hero.sin-logo .menu-hero-fila { margin-top: 16px; }

/* El sello y el nombre en una fila, pegados a la izquierda. */
.hero-identidad {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    min-width: 0;
    padding-left: 6px;
}

/* Logo: un sello con un aro fino del color de acento, separado por el fondo de la carta. */
.hero-logo {
    display: block;
    flex-shrink: 0;
    width: var(--logo-hero);
    height: var(--logo-hero);
    transform-origin: left bottom;
}

.menu-hero-logo {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--tarjeta);
    box-shadow:
        0 0 0 4px var(--fondo),
        0 0 0 6px var(--acento),
        0 14px 30px -10px rgba(0, 0, 0, 0.55);
}

.logo-cuadrado .menu-hero-logo { border-radius: 24%; }

.logo-libre .hero-logo {
    width: auto;
    height: auto;
}

.logo-libre .menu-hero-logo {
    width: auto;
    height: auto;
    max-width: min(46vw, 200px);
    max-height: var(--logo-hero);
    border-radius: 0;
    object-fit: contain;
    background: none;
    box-shadow: none;
}

.menu-hero-nombre {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding-bottom: 6px;
    font-family: var(--titulos);
    font-size: clamp(24px, 7vw, 36px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* Sin logo, el nombre solo (más grande) debajo de la postal. */
.menu-hero.sin-logo .hero-identidad { padding-left: 2px; }
.menu-hero.sin-logo .menu-hero-nombre { font-size: clamp(28px, 8.4vw, 44px); padding-bottom: 0; }

/* La sede: boleto con muescas, datos a la izquierda y la pestaña del acento. */
.hero-sede {
    --muesca: 54px;
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 64px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 18px;
    background:
        linear-gradient(var(--tarjeta), var(--tarjeta)) padding-box,
        linear-gradient(135deg, var(--borde), var(--borde)) border-box;
    color: var(--tinta);
    text-align: left;
    cursor: pointer;
    -webkit-mask:
        radial-gradient(circle 7px at calc(100% - var(--muesca)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 7px at calc(100% - var(--muesca)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    mask:
        radial-gradient(circle 7px at calc(100% - var(--muesca)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 7px at calc(100% - var(--muesca)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    transition: transform 160ms var(--salida);
}

.tema-oscuro .hero-sede,
.web.es-oscura .hero-sede {
    background:
        linear-gradient(rgba(22, 19, 28, 0.86), rgba(22, 19, 28, 0.86)) padding-box,
        linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.2)) border-box;
    color: #FFFFFF;
}

.hero-sede:active { transform: scale(0.97); }

/* Dos columnas: el pin a la izquierda, centrado con todo el bloque, y a su derecha el
   nombre y el estado empezando en la misma línea. */
.hero-sede-texto {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    padding: 10px 14px;
}

.hero-sede-pin {
    grid-row: 1 / span 2;
    width: 22px;
    height: 22px;
    color: var(--acento);
}

/* Un nombre largo baja a una segunda línea (y un poco más pequeño) en vez de cortarse. */
.hero-sede-nombre {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-wrap: balance;
    font-family: var(--titulos);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
}

.hero-sede-nombre.es-largo { font-size: 16px; line-height: 1.2; }

.hero-sede .vivo { opacity: 0.85; }

.hero-sede-ir {
    flex-shrink: 0;
    width: var(--muesca);
    display: grid;
    place-items: center;
    border-left: 2px dashed color-mix(in srgb, var(--sobre-acento) 30%, transparent);
    background: var(--acento);
    color: var(--sobre-acento);
}

.hero-sede-ir .ic { transition: transform 260ms var(--resorte); }
.hero-sede:active .hero-sede-ir .ic { transform: translateY(3px); }

/* Atajos: una sola barra del color de las redes; cada atajo con su nombre debajo. */
.hero-acciones {
    display: flex;
    width: 100%;
    padding: 5px;
    border-radius: 18px;
    background: var(--redes);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 30px rgba(0, 0, 0, 0.22);
}

.hero-accion {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 48px;
    padding: 7px 4px 6px;
    border: none;
    border-radius: 13px;
    background: none;
    font: inherit;
    color: var(--hero-icono, var(--sobre-redes));
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 160ms var(--salida), background-color 160ms ease;
}

/* Separador fino entre atajos. */
.hero-accion + .hero-accion::before {
    content: "";
    position: absolute;
    left: 0;
    top: 26%;
    bottom: 26%;
    width: 1px;
    background: color-mix(in srgb, var(--sobre-redes) 14%, transparent);
}

.hero-accion .ic,
.hero-accion .red-marca {
    width: 24px;
    height: 24px;
}

.hero-accion-texto {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.1;
    color: color-mix(in srgb, var(--sobre-redes) 78%, transparent);
}

.hero-accion:active {
    transform: scale(0.93);
    background: color-mix(in srgb, var(--sobre-redes) 10%, transparent);
}

@media (hover: hover) and (pointer: fine) {
    .hero-accion:hover { background: color-mix(in srgb, var(--sobre-redes) 8%, transparent); }
    .hero-sede:hover .hero-sede-ir .ic { transform: translateY(2px); }
}

.hero-descripcion {
    max-width: 38ch;
    font-size: 14px;
    color: var(--suave);
}

/* Entrada (solo al llegar al menú): la foto aparece, el logo se asienta con un pequeño
   rebote y lo demás cae en cascada (ver .entra .cae). */
@keyframes hero-foto-entra {
    from { opacity: 0; }
    to { opacity: 1; }
}

.menu-hero.entra .hero-portada { animation: hero-foto-entra 600ms var(--salida) both; }

/* Al bajar (atado al scroll, sin JavaScript): la foto se queda atrás y el logo se aleja
   mientras la barra de arriba toma el logo pequeño. */
@supports (animation-timeline: scroll()) {
    /* La foto baja más lento que la página dentro de su postal, y el sello se achica
       hacia su esquina mientras la barra de arriba toma el logo pequeño. */
    @keyframes hero-parallax {
        to { transform: translateY(22%) scale(1.06); }
    }

    @keyframes hero-logo-aleja {
        to { opacity: 0; transform: translateY(10px) scale(0.72); }
    }

    .hero-portada-img {
        animation: hero-parallax linear both;
        animation-timeline: scroll(root);
        animation-range: 0 280px;
    }

    .hero-logo {
        animation: hero-logo-aleja linear both;
        animation-timeline: scroll(root);
        animation-range: 20px 200px;
    }
}

@media (min-width: 720px) {
    .menu-hero { --hero-lado: 24px; --postal-margen: 16px; padding-bottom: 30px; }
    .menu-hero-fila { gap: 16px; }
}

/* ---------- Portadas de categoría ---------- */

.portadas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.portada-cat.con-banner { min-height: 0; }

/* ---------- Vista de una categoría ---------- */

.categoria-vista { margin-top: 4px; }

.categoria-vista .categoria-cabecera {
    border-radius: 20px;
    margin-bottom: 16px;
}

.categoria-vista .categoria-descripcion-suelta { margin: -4px 2px 16px; }

.siguiente { margin-top: 32px; }

.siguiente-titulo {
    margin: 0 2px 10px;
    font-family: var(--titulos);
    font-size: 15px;
    font-weight: 700;
    color: var(--suave);
}

.resultado-titulo {
    margin: 14px 2px 10px;
    font-family: var(--titulos);
    font-size: 18px;
    font-weight: 800;
}

/* ---------- Tarjetas de plato ---------- */

.plato {
    position: relative;
    align-items: stretch;
    gap: 14px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--tinta) 8%, transparent);
    border-radius: 20px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--tarjeta) 90%, var(--tinta)) 0%, var(--tarjeta) 55%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tinta) 6%, transparent), 0 8px 24px rgba(0, 0, 0, 0.16);
    transition: transform 180ms var(--salida), border-color 200ms ease;
}

/* Las tarjetas grandes (plato, portada, espacio, sede, web) se encogen un instante después
   de tocarlas: el dedo que cae sobre ellas para bajar la carta ya no las hace temblar. */
.plato:active { transform: scale(0.98); transition-delay: 60ms; }

.plato-info { gap: 6px; }

.plato-nombre {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.plato-frase {
    font-size: 13px;
    line-height: 1.4;
}

.plato-pie {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.plato-pie .precio { margin: 0; }

.precio-actual,
.precio-oferta {
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Agregar: un cuadrado suave en el color de acento; al tocar, el "+" gira. */
.plato-mas {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: var(--acento);
    color: var(--sobre-acento);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--acento) 35%, transparent);
    transition: transform 320ms var(--resorte);
}

.plato-mas .ic { width: 20px; height: 20px; }
.plato:active .plato-mas { transform: scale(0.86) rotate(90deg); }

.plato.con-foto { align-items: stretch; }

.plato-foto-caja {
    align-self: center;
    width: 112px;
}

/* El marco recorta la foto y su luz de carga (el "+" queda afuera y sobresale). */
.plato-foto-marco {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: var(--borde);
}

.plato-foto-caja .plato-mas {
    right: -6px;
    bottom: -6px;
    box-shadow: 0 0 0 4px var(--tarjeta), 0 8px 18px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
    .sede-boton:hover .sede-boton-ir .ic { transform: translateX(4px); }
    
    .portada-cat:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.34); }
    .plato:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
    .plato:hover .plato-mas { transform: rotate(90deg); }
}

/* ---------- Pedido ---------- */

.hoja .boton-principal {
    background: var(--acento);
    color: var(--sobre-acento);
}

/* La bolsa de la barra del menú: el número va montado en su esquina, en el color del
   restaurante. */
.bolsa-btn { position: relative; }

.bolsa-cant {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--acento);
    color: var(--sobre-acento);
    box-shadow: 0 0 0 2px var(--fondo);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.bolsa-cant.salta { animation: salta 650ms var(--resorte); }

/* Lo agregado volando al pedido (ver volarAlPedido): encima de la hoja que se cierra,
   debajo de los anuncios. */
.vuelo {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 65;
    pointer-events: none;
}

.vuelo-bola {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--acento);
    color: var(--sobre-acento);
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 0 0 3px var(--tarjeta), 0 10px 24px rgba(0, 0, 0, 0.3);
}

.vuelo-bola img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes salta {
    0% { transform: scale(1); }
    35% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* ---------- Hojas (plato y sede) ---------- */

@keyframes desaparecer {
    to { opacity: 0; }
}

@keyframes hoja-cajon {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@keyframes hoja-baja {
    to { transform: translateY(calc(100% + 40px)); }
}

@keyframes foto-entra {
    from { transform: scale(1.14); }
    to { transform: none; }
}

.hoja-fondo.is-saliendo { animation: desaparecer 240ms ease both; }

.hoja.sin-entrada { animation: none; }
.hoja.is-saliendo { animation: hoja-baja 240ms cubic-bezier(0.4, 0, 1, 1) both; }

.hoja-asa {
    display: block;
    flex-shrink: 0;
    width: 40px;
    height: 5px;
    margin: 10px auto 4px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--tinta) 22%, transparent);
}

/* Ancho fijo a todo el borde: sin él, en el iPhone el marco (con su forma y su alto máximo)
   se encogía a lo ancho y la foto quedaba corrida a la izquierda con una franja vacía. */
.hoja-foto {
    flex-shrink: 0;
    width: calc(100% + 32px);
    margin: 0 -16px 4px;
    aspect-ratio: 4 / 3;
    max-height: 46vh;
    overflow: hidden;
    background: var(--borde);
}

.hoja-foto img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hoja:not(.sin-entrada) .hoja-foto img { animation: foto-entra 700ms var(--salida) both; }

.hoja-flotantes {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    gap: 8px;
}

.hoja-flotantes .icono-btn {
    width: 38px;
    height: 38px;
    background: var(--tarjeta);
    color: var(--tinta);
    transition: transform 200ms var(--resorte);
}

.hoja-flotantes .icono-btn:active { transform: scale(0.88); }

.hoja.con-foto .hoja-flotantes .icono-btn {
    background: rgba(12, 10, 16, 0.62);
    color: #FFFFFF;
}

.hoja .hoja-cuerpo { gap: 14px; }
.hoja.con-foto .hoja-cuerpo { padding-top: 0; }

/* El contenido de la hoja entra escalonado detrás del cajón. */
.hoja:not(.sin-entrada) .hoja-cuerpo > * {
    animation: caer 420ms var(--salida) both;
    animation-delay: calc(90ms + var(--j, 0) * 40ms);
}

.hoja-cuerpo > :nth-child(2) { --j: 1; }
.hoja-cuerpo > :nth-child(3) { --j: 2; }
.hoja-cuerpo > :nth-child(4) { --j: 3; }
.hoja-cuerpo > :nth-child(5) { --j: 4; }
.hoja-cuerpo > :nth-child(n + 6) { --j: 5; }
.hoja:not(.sin-entrada) .hoja-cuerpo > .hoja-foto { animation: none; }

.detalle-cabeza {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 8px;
}

.hoja-plato:not(.con-foto) .detalle-cabeza { padding-right: 92px; }

.detalle-nombre {
    margin: 0;
    font-family: var(--titulos);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.detalle-precio .precio-actual,
.detalle-precio .precio-oferta { font-size: 22px; }

.detalle-descripcion {
    font-size: 15px;
    line-height: 1.55;
    color: color-mix(in srgb, var(--tinta) 86%, transparent);
}

.detalle-descripcion .nota-destacada {
    margin: 10px 0;
    padding: 11px 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--acento) 15%, transparent);
    color: var(--tinta);
}

.detalle-dato {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--suave);
}

.detalle-dato .ic { width: 18px; height: 18px; color: var(--acento); }

/* Hoja de la sede */
.sede-hoja-cabeza {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 8px;
}

.hoja-sede:not(.con-foto) .sede-hoja-cabeza { padding-right: 52px; }

.sede-hoja-cabeza h2 {
    margin: 0;
    font-family: var(--titulos);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.info-bloque > .ic { color: var(--acento); }

.acciones-sede { gap: 8px; }

.accion-sede {
    flex-direction: column;
    gap: 6px;
    padding: 12px 8px;
    border: none;
    border-radius: 16px;
    font-size: 12.5px;
    transition: transform 200ms var(--resorte);
}

.accion-sede:active { transform: scale(0.95); }

.accion-sede .ic,
.accion-sede .red-marca { color: var(--acento); }

/* La semana en una tira de 7 días; hoy, en el color de acento. */
.semana {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.semana-dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 2px;
    border-radius: 14px;
    background: var(--tarjeta);
    color: var(--suave);
    font-size: 10.5px;
    line-height: 1.15;
    text-align: center;
}

.semana-letra {
    margin-bottom: 2px;
    color: var(--tinta);
    font-size: 12px;
    font-weight: 800;
}

.semana-hora { text-align: center; }

.semana-sufijo {
    font-size: 9.5px;
    white-space: nowrap;
    opacity: 0.85;
}

.semana-dia.is-hoy {
    background: var(--acento);
    color: color-mix(in srgb, var(--sobre-acento) 80%, transparent);
}

.semana-dia.is-hoy .semana-letra { color: var(--sobre-acento); }
.semana-dia.is-cerrado { opacity: 0.5; }

.hoja:not(.sin-entrada) .semana-dia {
    animation: caer 480ms var(--salida) both;
    animation-delay: calc(260ms + var(--k, 0) * 40ms);
}

.semana-dia:nth-child(2) { --k: 1; }
.semana-dia:nth-child(3) { --k: 2; }
.semana-dia:nth-child(4) { --k: 3; }
.semana-dia:nth-child(5) { --k: 4; }
.semana-dia:nth-child(6) { --k: 5; }
.semana-dia:nth-child(7) { --k: 6; }

.otras-sedes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.otras-sedes-titulo {
    margin: 6px 0 0;
    font-family: var(--titulos);
    font-size: 16px;
    font-weight: 800;
}

.otra-sede {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: none;
    border-radius: 16px;
    background: var(--tarjeta);
    color: var(--tinta);
    text-align: left;
    cursor: pointer;
    transition: transform 180ms var(--salida);
}

.otra-sede:active { transform: scale(0.98); transition-delay: 60ms; }

.otra-sede-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.otra-sede-nombre { font-size: 16px; font-weight: 800; }
.otra-sede > .ic { color: var(--acento); }

@media (min-width: 720px) {
    .portadas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    @keyframes hoja-baja { to { transform: translateY(calc(100% + 60px)); } }
}

/* ---------- Cambio de pantalla (View Transitions) ---------- */

/* Portada <-> menú: de lado, como pasar de página. */
/* Rápidas (menos de medio segundo) y con recorridos cortos: se siente ágil, no pesado. */
html[data-dir="adelante"]::view-transition-old(root) { animation: vt-sale-izq 180ms cubic-bezier(0.4, 0, 1, 1) both; }
html[data-dir="adelante"]::view-transition-new(root) { animation: vt-entra-der 360ms var(--cajon) both; }
html[data-dir="atras"]::view-transition-old(root) { animation: vt-sale-der 180ms cubic-bezier(0.4, 0, 1, 1) both; }
html[data-dir="atras"]::view-transition-new(root) { animation: vt-entra-izq 360ms var(--cajon) both; }

/* Entrar a una categoría: lo de atrás se hunde y lo nuevo aparece en su lugar, sin subir
   (los platos ya suben uno a uno, ver revelar: dos subidas juntas se veían trabadas); el
   movimiento grande es el de la portada que crece. Salir, al revés. */
html[data-dir="entrar"]::view-transition-old(root) { animation: vt-hundir 160ms ease-out both; }
html[data-dir="entrar"]::view-transition-new(root) { animation: vt-aparecer 220ms ease-out both; }
html[data-dir="salir"]::view-transition-old(root) { animation: vt-bajar 160ms ease-out both; }
html[data-dir="salir"]::view-transition-new(root) { animation: vt-emerger 300ms var(--cajon) both; }

::view-transition-group(cat-activa) { animation-duration: 340ms; animation-timing-function: var(--cajon); }
::view-transition-group(barra) { animation-duration: 240ms; }

@keyframes vt-sale-izq { to { opacity: 0; transform: translateX(-8%); } }
@keyframes vt-entra-der { from { opacity: 0; transform: translateX(12%); } }
@keyframes vt-sale-der { to { opacity: 0; transform: translateX(8%); } }
@keyframes vt-entra-izq { from { opacity: 0; transform: translateX(-12%); } }
@keyframes vt-hundir { to { opacity: 0; transform: scale(0.97); } }
@keyframes vt-aparecer { from { opacity: 0; } }
@keyframes vt-bajar { to { opacity: 0; transform: translateY(24px); } }
@keyframes vt-emerger { from { opacity: 0; transform: scale(0.97); } }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Ajustes v3 ---------- */

/* Botones de la barra con el mismo vidrio y borde de luz de las tarjetas de sede. */
.barra-btn,
.menu-barra .barra-btn:hover {
    border: 1px solid transparent;
    background:
        linear-gradient(rgba(22, 19, 28, 0.8), rgba(22, 19, 28, 0.8)) padding-box,
        linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.2)) border-box;
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Lupa que gira y se vuelve X. */
.buscar-btn .ic {
    grid-area: 1 / 1;
    transition: transform 420ms var(--resorte), opacity 200ms ease;
}

.buscar-btn .ic-cerrar { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.con-buscador .buscar-btn .ic-buscar { opacity: 0; transform: rotate(90deg) scale(0.5); }
.con-buscador .buscar-btn .ic-cerrar { opacity: 1; transform: none; }

/* El buscador se despliega desde la barra (la altura se abre y el campo baja y crece). */
.menu-fija .buscador {
    display: grid;
    grid-template-rows: 0fr;
    max-width: none;
    margin: 0;
    padding: 0;
    transition: grid-template-rows 320ms var(--cajon);
}

.menu-fija.con-buscador .buscador { grid-template-rows: 1fr; }

.buscador-in {
    position: relative;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 12px;
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
    transform-origin: right top;
    transition: opacity 200ms ease, transform 320ms var(--cajon), padding 320ms var(--cajon);
}

.con-buscador .buscador-in {
    opacity: 1;
    transform: none;
    padding-bottom: 12px;
}

.buscador-in .ic {
    position: absolute;
    left: 26px;
    top: 11px;
    margin: 0;
    color: var(--suave);
}

.buscador-in input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 44px;
    border: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent);
    border-radius: 14px;
    background: var(--vidrio);
    color: var(--tinta);
    font: inherit;
    font-size: 16px;
    outline: none;
    transition: border-color 200ms ease, box-shadow 300ms ease;
}

.buscador-in input:focus {
    border-color: var(--acento);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 22%, transparent);
}

/* Resultados: entran en cascada cada vez que cambian. */
.anim-resultados > *,
.anim-resultados .plato {
    animation: caer 420ms var(--salida) both;
}

.anim-resultados > :nth-child(2) { animation-delay: 70ms; }
.anim-resultados > :nth-child(n + 3) { animation-delay: 140ms; }
.anim-resultados .plato:nth-child(2) { animation-delay: 110ms; }
.anim-resultados .plato:nth-child(3) { animation-delay: 160ms; }
.anim-resultados .plato:nth-child(n + 4) { animation-delay: 210ms; }

/* Sede como boleto: datos a la izquierda y una pestaña de color (la del editor,
   "Botones de entrada") separada por una línea punteada con muescas. */
.sede-boton {
    --muesca: 66px;
    align-items: stretch;
    gap: 0;
    padding: 0;
    -webkit-mask:
        radial-gradient(circle 8px at calc(100% - var(--muesca)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 8px at calc(100% - var(--muesca)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    mask:
        radial-gradient(circle 8px at calc(100% - var(--muesca)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 8px at calc(100% - var(--muesca)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}

.sede-boton-texto { padding: 15px 18px; }

.sede-boton-ir {
    flex-shrink: 0;
    width: var(--muesca);
    display: grid;
    place-items: center;
    border-left: 2px dashed color-mix(in srgb, var(--cta-texto) 28%, transparent);
    background: var(--cta-fondo);
    color: var(--cta-texto);
    transition: filter 200ms ease;
}

/* La flecha llega con su tarjeta (con animación propia parecía que cargaba tarde). */
.sede-boton-ir .ic {
    width: 24px;
    height: 24px;
    transition: transform 300ms var(--resorte);
}

.sede-boton:active .sede-boton-ir .ic { transform: translateX(6px); }

/* Firma de ReserApp al final de cada pantalla. */
.menu { padding-bottom: 8px; }

.pie-carta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px calc(100px + env(safe-area-inset-bottom));
    color: var(--tinta);
    text-align: center;
}

.portada .pie-carta {
    padding: 24px 0 0;
    color: inherit;
}

.pie-carta .firma {
    display: inline-flex;
    align-items: center;
    
    margin: 0;

    font-size: 12.5px;
    opacity: 0.85;
    transition: transform 220ms var(--resorte), opacity 200ms ease;
}

.pie-carta .firma-isotipo { flex: none; width: 18px; height: 18px; }
.firma-punto { fill: #E9B949; }
.pie-carta .firma:active { transform: scale(0.94); }
.pie-carta .aviso-recaptcha { margin: 0; max-width: 300px; }

/* Revelado: cada tarjeta entra entera (una sola capa en movimiento, no cuatro). */
.rv { transition-delay: var(--rv-delay, 0ms); }

/* La cabecera de la categoría se aleja al bajar (atada al scroll). */
@supports (animation-timeline: scroll()) {
    @keyframes cabecera-aleja {
        to { opacity: 0.3; transform: scale(0.92) translateY(14px); }
    }

    .categoria-vista > .categoria-cabecera {
        transform-origin: center top;
        animation: cabecera-aleja linear both;
        animation-timeline: scroll(root);
        animation-range: 0 280px;
    }
}

.cantidad span.salta { animation: salta 420ms var(--resorte); }

/* El vidrio se calcula en body, donde el tema oscuro cambia --tarjeta. */

/* Botones propios de la portada: el vidrio de las sedes, más bajos, con su pestaña de
   color (los del editor) y la flecha en diagonal (abre un enlace). */
.botones { gap: 10px; }

/* Redes: círculos del color elegido, con el ícono en blanco o negro según se lea mejor;
   entran uno por uno con un pequeño rebote. */
.red {
    width: 46px;
    height: 46px;
    background: var(--redes);
    color: var(--sobre-redes, #FFFFFF);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 8px 20px rgba(0, 0, 0, 0.3);
}

.red .ic,
.red .red-marca { width: 20px; height: 20px; }

@keyframes red-pop {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: none; }
}

.entra .redes .red {
    animation: red-pop 600ms var(--resorte) both;
    animation-delay: calc(760ms + var(--n, 0) * 60ms);
}

.redes .red:nth-child(2) { --n: 1; }
.redes .red:nth-child(3) { --n: 2; }
.redes .red:nth-child(4) { --n: 3; }
.redes .red:nth-child(5) { --n: 4; }
.redes .red:nth-child(n + 6) { --n: 5; }

@media (hover: hover) and (pointer: fine) {
    .red:hover { transform: translateY(-3px); }
    
}

/* Dentro de una categoría la barra lleva solo el logo (la portada ya dice la categoría). */
.menu-marca .menu-logo-solo {
    width: 38px;
    height: 38px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12), 0 6px 14px rgba(0, 0, 0, 0.3);
}

.logo-libre .menu-marca .menu-logo-solo { width: auto; height: 34px; max-width: 120px; box-shadow: none; }

/* Botón propio sin ícono reconocido: flecha en diagonal (abre un enlace). */
.red .ic-externo { transform: rotate(-45deg); }

/* Fluidez: solo lo grande que se mueve seguido lleva su propia capa (muchas capas
   gastan memoria del celular y la carta se pone lenta). */
.portada.entra .portada-fondo,
.hoja { will-change: transform, opacity; }

/* Toques sin la espera del doble toque (zoom) en el celular. */
button,
a { touch-action: manipulation; }

/* En computador el logo y el nombre crecen (en el celular quedan como están). */
@media (min-width: 720px) {
    .portada-logo { width: 168px; height: 168px; }
    .logo-libre .portada-logo { max-width: 340px; max-height: 260px; }
}

/* En computador la hoja (plato, sede, pedido) es una ventana centrada: aparece creciendo
   un poco desde el centro, así nunca queda escondida bajo el borde de la pantalla. En el
   celular sigue subiendo desde abajo. */
@keyframes hoja-modal {
    from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes hoja-modal-sale {
    to { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
}

@media (min-width: 720px) {
    .hoja {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: min(560px, calc(100% - 48px));
        max-height: 86vh;
        max-height: 86dvh;
        margin: 0;
        border-radius: 24px;
        transform: translate(-50%, -50%);
        animation: hoja-modal 420ms var(--cajon) both;
    }

    .hoja.is-saliendo { animation: hoja-modal-sale 200ms cubic-bezier(0.4, 0, 1, 1) both; }
    .hoja .hoja-pie { padding-bottom: 14px; }
}

/* En el celular la hoja mide lo que su contenido (hasta el 88% de la pantalla visible),
   con espacio abajo para la barra del teléfono. */
@media (max-width: 719px) {
    .hoja {
        max-height: 88vh;
        max-height: 88dvh;
    }

    .hoja .hoja-cuerpo { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
    .hoja .hoja-foto { aspect-ratio: 1; max-height: 52vh; max-height: 52dvh; }
}

/* Plato sin foto: el banner de su categoría, en su proporción (3 a 1). */
.hoja .hoja-foto.hoja-foto-cat { aspect-ratio: 3 / 1; }

/* Foto del plato: vertical 3 a 4 (o cuadrada, las de antes; la forma la pone carta.js al
   cargar), más alta para que se luzca. */
.hoja .hoja-foto.hoja-foto-plato { aspect-ratio: 3 / 4; max-height: 64vh; max-height: 64dvh; }

@media (min-width: 720px) {
    .hoja .hoja-foto.hoja-foto-plato { max-height: 56vh; max-height: 56dvh; }
}

/* Aire al final de la hoja: el último texto nunca queda pegado al borde. */
@media (min-width: 720px) {
    .hoja .hoja-cuerpo { padding-bottom: 32px; }
}

/* ---------- Página de enlaces (link en la bio): .../enlaces ----------
   Mismo fondo, logo y colores que la portada; los botones toman los colores del botón
   "Ver menú" del Diseño, todos iguales, con el ícono de a dónde llevan a la izquierda. */
.enlaces {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 420px;
    margin-top: 18px;
}

.enlace {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 14px 54px;
    border-radius: 16px;
    background: var(--cta-fondo);
    color: var(--cta-texto);
    font-family: var(--titulos);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    transition: transform 160ms var(--salida);
}

.enlace > .ic,
.enlace > .red-marca {
    position: absolute;
    top: 50%;
    left: 18px;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
}

.enlace:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
    .enlace:hover { transform: translateY(-2px); }
}

.pagina-enlaces .redes { margin-top: 12px; }

/* ---------- Mientras carga ----------
   Portada con foto: mientras la foto baja, un fondo oscuro neutro (antes se veía el color
   del restaurante, vacío); al llegar, la foto aparece suave (y "respira" si es la entrada).
   Ver vigilarFotoPortada en carta.js. */
.portada.con-foto { background: #16131C; }

.portada-fondo,
.portada-desenfoque { transition: opacity 600ms var(--salida); }

.portada.foto-pendiente .portada-fondo,
.portada.foto-pendiente .portada-desenfoque {
    opacity: 0;
    animation: none;
}

/* La primera vez (carta pintada con la copia del servidor): la foto en miniatura,
   desenfocada y oscurecida como queda con el velo, mientras baja la real; la real aparece
   encima con el mismo fundido de arriba. Ver portadaFondoHTML en carta.js. */
.portada-mini {
    position: absolute;
    inset: -40px;
    z-index: -2;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.55) saturate(1.1);
    transform: scale(1.06);
}

/* ---------- Plantilla propia (2026-10-14) ----------
   Lo que se parecía a otras cartas del mercado, rehecho a la manera de ReserApp:
   - Categorías como fichas de índice: el arte del restaurante arriba y una línea propia
     abajo (número de sección, cuántos platos, flecha), en vez de banners sueltos apilados.
   - Barra: botones de esquinas suaves (no círculos) y "Buscar" con su nombre.
   - Firma: una línea con hilos a los lados, sin caja. */

/* Categorías: el banner del restaurante limpio, sin nada encima. Al tocarlo se hunde un
   poco (respuesta inmediata) antes de abrirse. */
.portada-cat {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 16px;
    overflow: visible;
    background: none;
    box-shadow: none;
    color: var(--tinta);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 160ms var(--salida);
}

.portada-cat:active { transform: scale(0.97); transition-delay: 60ms; }

.portada-cat-arte {
    min-height: 104px;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.portada-cat-arte.con-banner { min-height: 0; }

/* ---------- Selector "Carta · Espacios" ----------
   Un riel de tarjeta (se lee sobre cualquier fondo de la lista, también fotos) con las
   dos opciones en gris; la elegida se llena del color del negocio (aclarado en tema
   oscuro si se perdía, ver aplicarTema) y ese fondo se desliza al cambiar. */
.selector-menu {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 16px 18px;
    padding: 4px;
    border: 1px solid var(--borde);
    border-radius: 14px;
    background: var(--tarjeta);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.menu-hero + .selector-menu { margin-top: -4px; }

@media (min-width: 720px) {
    .selector-menu { max-width: 520px; margin-left: auto; margin-right: auto; }
}

.selector-marca {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 10px;
    background: var(--selector-relleno);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--selector-relleno) 35%, transparent);
    transition: transform 260ms var(--salida);
}

.selector-menu.a-la-derecha .selector-marca { transform: translateX(100%); }

.selector-op {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 8px;
    border: none;
    background: none;
    color: var(--suave);
    font: inherit;
    font-family: var(--titulos);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: color 200ms ease, transform 160ms var(--salida);
}

.selector-op .ic { width: 18px; height: 18px; flex-shrink: 0; }
.selector-op span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-op.activa { color: var(--selector-texto); font-weight: 800; }
.selector-op:active { transform: scale(0.96); }

/* Al cambiar de pestaña, la lista entra suave (solo opacidad y un poco de subida). */
.anim-pestana > * { animation: pestana-entra 320ms var(--salida) both; }

@keyframes pestana-entra {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Pestaña "Espacios" ---------- */
.lugar { display: grid; gap: 28px; }

.lugar-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 2px 12px;
    font-family: var(--titulos);
    font-size: 19px;
    font-weight: 800;
    color: var(--tinta);
}

.lugar-titulo::after {
    content: "";
    flex: 1;
    height: 2px;
    border-radius: 1px;
    background: var(--acento);
    opacity: 0.45;
}

.lugar-intro {
    margin: -4px 2px 14px;
    color: var(--suave);
    font-size: 14px;
    line-height: 1.5;
}

.lugar-intro p { margin: 0 0 6px; }

.espacios { display: grid; gap: 12px; }

.espacios-par {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

/* Tarjeta de un espacio: la foto arriba, ancha; debajo el texto. */
.espacio {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tinta) 9%, transparent);
    border-radius: 18px;
    background: var(--tarjeta);
    color: var(--tinta);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    transition: transform 160ms var(--salida);
}

.espacio:active { transform: scale(0.98); transition-delay: 60ms; }

/* Con forma fija, el iPhone necesita el ancho escrito: si no, la encoge y la corre a la
   izquierda (igual en la galería y en la foto del plato). */
.espacio-foto {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: color-mix(in srgb, var(--tinta) 6%, var(--tarjeta));
    overflow: hidden;
}

.espacio.grande .espacio-foto { aspect-ratio: 16 / 9; }

.espacio-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.espacio-sin-foto { width: 34px; height: 34px; color: var(--suave); opacity: 0.6; }

.espacio-cuantas {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
}

.espacio-cuantas .ic { width: 14px; height: 14px; }

.espacio-info {
    display: grid;
    gap: 5px;
    padding: 11px 13px 13px;
}

.espacio-nombre {
    font-family: var(--titulos);
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.15;
}

.espacio.grande .espacio-nombre { font-size: 17.5px; }

.espacio-frase {
    color: var(--suave);
    font-size: 13px;
    line-height: 1.35;
}

.espacio-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
}

.espacio-datos span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tinta) 7%, transparent);
    font-size: 12px;
    font-weight: 600;
}

.espacio-datos .ic { width: 14px; height: 14px; }

.espacio-reserva {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}

.espacio-desde {
    display: grid;
    color: var(--suave);
    font-size: 12px;
    line-height: 1.3;
}

.espacio-desde b {
    color: var(--precio);
    font-family: var(--titulos);
    font-size: 17px;
    font-weight: 900;
}

.espacio-consultar {
    flex-shrink: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--acento);
    color: var(--sobre-acento);
    font-family: var(--titulos);
    font-size: 13.5px;
    font-weight: 800;
}

/* Tarifas: una lista limpia, el valor a la derecha. */
.tarifas {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tinta) 9%, transparent);
    border-radius: 18px;
    background: var(--tarjeta);
}

.tarifa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
}

.tarifa + .tarifa { border-top: 1px solid var(--borde); }

.tarifa-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }

.tarifa-nombre {
    font-family: var(--titulos);
    font-size: 15px;
    font-weight: 800;
    color: var(--tinta);
}

.tarifa-detalle { color: var(--suave); font-size: 12.5px; line-height: 1.35; }

.tarifa-valor {
    flex-shrink: 0;
    display: grid;
    justify-items: end;
    color: var(--precio);
    font-family: var(--titulos);
    font-size: 16px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.tarifa-valor em {
    color: var(--suave);
    font-family: inherit;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.tarifas-notas {
    margin: 14px 2px 0;
    color: var(--suave);
    font-size: 13.5px;
    line-height: 1.55;
}

.tarifas-notas p { margin: 0 0 6px; }
.tarifas-notas strong { color: var(--tinta); }

.boton-consulta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 14px 16px;
    border: none;
    border-radius: 14px;
    background: #25D366;
    color: #0B2E17;
    font: inherit;
    font-family: var(--titulos);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 160ms var(--salida);
}

.boton-consulta .ic { width: 19px; height: 19px; }
.boton-consulta:active { transform: scale(0.97); }

/* ---------- Hoja de un espacio ---------- */
.galeria {
    position: relative;
    flex-shrink: 0;
    margin: 0 -16px 4px;
}

.galeria-pista {
    display: flex;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 50vh;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background: var(--borde);
    outline: none;
}

.galeria-pista::-webkit-scrollbar { display: none; }

.galeria-pista img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: center;
}

.galeria-cuenta {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 5px 10px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.55);
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.galeria-cuenta b { font-weight: 800; }

.espacio-precio {
    margin: 4px 0 0;
    color: var(--suave);
    font-size: 14px;
}

.espacio-precio b {
    color: var(--precio);
    font-family: var(--titulos);
    font-size: 19px;
    font-weight: 900;
}

.espacio-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.espacio-rejilla span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 11px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tinta) 6%, transparent);
    font-size: 13px;
    font-weight: 600;
}

.espacio-rejilla .ic { flex-shrink: 0; width: 17px; height: 17px; color: var(--acento); }

/* minmax(0, …) y min-width: 0: los campos de fecha traen un ancho propio y empujaban la
   hoja de lado (se movía con el dedo). */
.consulta-fechas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

/* El último campo, si queda solo en su fila, la ocupa entera. */
.consulta-fechas .campo:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* 16 px: en el iPhone un campo más pequeño hace zoom al tocarlo. */
.consulta-fechas input,
.reserva-motivo input {
    min-width: 0;
    min-height: 46px;
    font-size: 16px;
    color: var(--tinta);
    color-scheme: light dark;
}

/* Solo en el iPhone: le da a la fecha y la hora su propio ancho y se pegaban. Sin la
   apariencia del sistema toman el de su columna (en el computador perderían el calendario). */
@supports (-webkit-touch-callout: none) {
    .consulta-fechas input {
        display: block;
        -webkit-appearance: none;
        appearance: none;
    }

    .consulta-fechas input::-webkit-date-and-time-value { text-align: left; }
}

.reserva-motivo { margin-top: 14px; }

#reserva-nota { margin-top: 5px; }

#reserva-nota[hidden] { display: none; }

/* El botón de la consulta (y el de la reserva) va del verde de WhatsApp (a donde lleva),
   como el de Tarifas. */
:is(.hoja-espacio, .hoja-reserva) .boton-principal.boton-whatsapp { background: #25D366; color: #0B2E17; }
:is(.hoja-espacio, .hoja-reserva) .boton-whatsapp .red-marca { background: currentColor; }

@media (min-width: 720px) {
    .espacios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .espacios .espacio.grande:first-child { grid-column: 1 / -1; }
    .espacios-par { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .selector-marca,
    .selector-op,
    .espacio,
    .portada-cat { transition: none; }
    .anim-pestana > * { animation: none; }
}

/* Barra del menú: esquinas suaves y la búsqueda con su nombre. */
.barra-btn { border-radius: 13px; }

.buscar-btn,
.menu-barra .buscar-btn:hover {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 0 14px 0 11px;
}

.buscar-iconos,
.buscar-etiquetas { display: inline-grid; }

.buscar-iconos .ic { width: 20px; height: 20px; }

.buscar-etiquetas > span {
    grid-area: 1 / 1;
    font-size: 14px;
    font-weight: 700;
    transition: opacity 200ms ease, transform 300ms var(--salida);
}

.buscar-etiquetas .e-cerrar { opacity: 0; transform: translateY(6px); }
.con-buscador .buscar-etiquetas .e-buscar { opacity: 0; transform: translateY(-6px); }
.con-buscador .buscar-etiquetas .e-cerrar { opacity: 1; transform: none; }

/* Firma: una línea entre dos hilos, sin caja. */
.pie-carta .firma {
    gap: 10px;
    padding: 4px 0;
    border-radius: 0;
    background: none;
}

.pie-carta .firma::before,
.pie-carta .firma::after {
    content: '';
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.35;
}

/* Categoría abierta: su cabecera se toca para cerrarla (y la X lo dice). */
.categoria-vista > .categoria-cabecera {
    position: relative;
    cursor: pointer;
}

.categoria-cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 11px;
    background: rgba(16, 13, 22, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    cursor: pointer;
    transition: transform 160ms var(--salida);
}

.categoria-cerrar .ic { width: 18px; height: 18px; }
.categoria-vista > .categoria-cabecera:active .categoria-cerrar { transform: scale(0.9); }
.categoria-vista > .categoria-cabecera:not(.con-banner) .ic.categoria-icono { margin-right: 36px; }

/* Cabecera del menú sin nombre visible (el logo ya lo trae): el sello y el boleto de la
   sede en la misma fila, los dos montados sobre el borde de la foto. Antes el logo quedaba
   solo a la izquierda con un hueco al lado y el boleto suelto debajo. */
.menu-hero.sello-y-boleto .menu-hero-fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
}

.menu-hero.sello-y-boleto .menu-hero-fila > * { grid-column: 1 / -1; }
.menu-hero.sello-y-boleto .hero-identidad { grid-column: 1; padding-left: 0; }
.menu-hero.sello-y-boleto .hero-sede { grid-column: 2; --muesca: 46px; }
.menu-hero.sello-y-boleto .hero-sede-texto { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; }
.menu-hero.sello-y-boleto .hero-sede-pin { display: none; }
.menu-hero.sello-y-boleto .hero-sede-nombre { font-size: 17px; }
.menu-hero.sello-y-boleto .hero-sede .vivo { font-size: 12.5px; gap: 6px; }

/* Cabecera compacta y centrada (2026-10-14, V1 elegida por el dueño): foto más baja y el
   sello y el boleto juntos, como un solo bloque centrado; nada de aire de sobra. */
.hero-portada { height: calc(var(--barra-alto) + clamp(96px, 26vw, 180px)); }

/* Celular primero (2026-10-15): la foto en su forma (5:2 la recomendada, 2000×800, desde
   2026-10-16; 3:1 las de antes; --foto-prop lo pone carta.js al cargarla) para que se vea
   entera; la barra de arriba flota encima. Las de 16:9 se recortan arriba y abajo. */
@media (max-width: 959px) {
    .hero-portada {
        height: calc((100vw - 2 * var(--postal-margen)) / var(--foto-prop, 2.5) + env(safe-area-inset-top));
        transition: height 300ms var(--salida);
    }
}

/* Computador: la foto con el mismo ancho que la lista; el sello (140 px) y el boleto juntos
   en el centro, montados sobre el borde de la foto. */
@media (min-width: 960px) {
    .menu-hero { --logo-hero: 140px; }
    .hero-portada {
        max-width: 1080px;
        height: calc(var(--barra-alto) + 175px);
        margin-left: auto;
        margin-right: auto;
        border-radius: 28px;
    }
    .menu-hero-fila {
        display: grid;
        grid-template-columns: auto minmax(0, 400px);
        justify-content: center;
        align-items: center;
        column-gap: 22px;
        max-width: 1032px;
    }
    .menu-hero-fila > * { grid-column: 1 / -1; }
    .menu-hero-fila > .hero-identidad { grid-column: 1; }
    .menu-hero-fila > .hero-sede { grid-column: 2; }
    .menu-hero.sello-y-boleto .menu-hero-fila { grid-template-columns: auto minmax(0, 400px); column-gap: 22px; }
    .menu-hero.sello-y-boleto .hero-sede-texto { grid-template-columns: auto minmax(0, 1fr); padding: 10px 14px; }
    .menu-hero.sello-y-boleto .hero-sede-pin { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .categoria-cerrar,
    .buscar-etiquetas > span { transition: none; }
}

/* ---------- Fotos mientras cargan (2026-10-15): "luz de vitrina" ----------
   En vez del cuadro gris quieto, un destello suave en el color de acento del restaurante
   cruza la foto en diagonal, como la luz sobre un vidrio, y descansa un momento antes de
   volver a pasar. Al llegar la foto (clase foto-lista, ver carta.js) el destello se apaga
   y la foto queda encima. */
.plato-foto-marco::before,
.hoja-foto::before,
.web-foto-caja::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    transition: opacity 300ms var(--salida);
    pointer-events: none;
}

/* Cada foto va recortada (el plato en su marco): la luz es una franja que cruza moviéndose
   entera (transform), sin volver a pintar la caja en cada cuadro; el gris es el fondo de la
   caja. Antes el plato movía su fondo y se repintaba en cada cuadro justo al abrir una
   categoría, cuando todas sus fotos están bajando: el cambio de pantalla se trababa. */
.plato-foto-marco::before,
.hoja-foto::before,
.web-foto-caja::before {
    width: 260%;
    background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--acento) 22%, transparent) 50%, transparent 62%);
    animation: vitrina-cruza 2.2s linear infinite;
}

.hoja-foto { position: relative; }
.plato-foto,
.hoja-foto img { position: relative; background: transparent; }

.foto-lista::before {
    opacity: 0;
    animation: none;
}

/* Un plato con fondo transparente no queda sobre el gris de carga. */
.plato-foto-marco.foto-lista { background: transparent; }

@keyframes vitrina-cruza {
    0% { transform: translateX(-80%); }
    70%, 100% { transform: translateX(18.5%); }
}

@media (prefers-reduced-motion: reduce) {
    .plato-foto-marco::before,
    .hoja-foto::before,
    .web-foto-caja::before { animation: none; }
}

/* ---------- Mi web (2026-10-23) ----------
   La web del negocio en su dominio propio (renderWeb en carta.js). Comparte las variables y
   piezas de la carta (boletos de sede, hojas, pie, luz de vitrina) con su propia portada,
   el boleto de los tres botones (opción "Talón") y bloques. Su tema (claro u oscuro) sale
   de su fondo, o del de la carta, sin tocar el del menú. */
.web {
    --web-fondo: var(--fondo);
    min-height: 100dvh;
    background: var(--web-fondo);
    color: var(--tinta);
}
.web.es-clara {
    --fondo: #F6F4F9;
    --tarjeta: #FFFFFF;
    --tinta: #1B1B1F;
    --suave: #6E6A78;
    --borde: #E6E1EE;
    --sombra: 0 1px 2px rgba(20, 16, 30, 0.06), 0 4px 14px rgba(20, 16, 30, 0.06);
    --web-icono: var(--primario);
    color-scheme: light;
}
.web.es-oscura {
    --fondo: #121015;
    --tarjeta: #1E1A24;
    --tinta: #F2EFF7;
    --suave: #A9A3B5;
    --borde: #2F2938;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
    --web-icono: color-mix(in srgb, var(--primario) 45%, #FFFFFF);
    color-scheme: dark;
}

/* Portada: llena la pantalla (celular y computador) con la foto, el nombre grande abajo (a la
   izquierda en el celular, centrado en el computador) y el boleto al pie. En el celular usa su
   foto vertical si la tiene. */
.web-portada {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100vh;
    min-height: var(--alto-portada, 100svh);
    padding: calc(88px + env(safe-area-inset-top)) 16px 16px;
    background: #16131C;
    color: var(--nombre-local);
}
.web-portada.sin-foto { background: linear-gradient(165deg, var(--primario) 0%, color-mix(in srgb, var(--primario) 55%, var(--contraste)) 100%); }
.web-portada-foto { position: absolute; inset: 0; z-index: -1; background: var(--foto-movil, var(--foto)) center / cover no-repeat; transition: opacity 600ms var(--salida); }
.web-portada-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, transparent 26%, transparent 42%, rgba(0, 0, 0, 0.78) 100%); }
.web-portada-foto.foto-pendiente { opacity: 0; }
.entra .web-portada-foto { animation: fondo-respira 1300ms var(--salida) both; }
.entra .web-portada-foto.foto-pendiente { animation: none; }

/* Barra fija: transparente sobre la portada; al pasarla se vuelve sólida y saca el botón
   destacado (antes estaría repetido con el del boleto). */
.web-barra { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px; height: 72px; margin-bottom: -72px; padding: 0 16px; color: #FFFFFF; transition: background-color 240ms ease, box-shadow 240ms ease, color 240ms ease; }
.web-barra.solida { background: var(--tarjeta); color: var(--tinta); box-shadow: 0 1px 0 var(--borde), 0 8px 24px rgba(20, 16, 30, 0.08); }
.web-barra-marca { display: flex; align-items: center; min-width: 0; margin-right: auto; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.web-barra-nombre { overflow: hidden; font: 700 17px/1.1 var(--titulos); white-space: nowrap; text-overflow: ellipsis; opacity: 0; transition: opacity 240ms ease; }
.solida .web-barra-nombre { opacity: 1; }
.web-barra-logo,
.web-pie-logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16), 0 8px 20px rgba(0, 0, 0, 0.3); }
.logo-cuadrado .web-barra-logo,
.logo-cuadrado .web-pie-logo { border-radius: 12px; }
.logo-libre .web-barra-logo,
.logo-libre .web-pie-logo { width: auto; max-width: 140px; border-radius: 0; background: none; box-shadow: none; object-fit: contain; }
.web-barra-enlaces { display: none; }
.web-barra-cta { flex: none; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--cta-fondo); color: var(--cta-texto); font: 700 14px/1 var(--texto); white-space: nowrap; cursor: pointer; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 240ms var(--salida), transform 240ms var(--salida); }
.con-boton .web-barra-cta { opacity: 1; transform: none; pointer-events: auto; }
.web-barra-cta:active { transform: scale(0.96); }
.web-barra-mas { flex: none; width: 44px; height: 44px; color: inherit; }
.web-barra-mas .ic { width: 26px; height: 26px; }

.web-portada-texto { position: relative; z-index: 1; }
.web-nombre { margin: 0; font-family: var(--titulos); font-size: clamp(48px, 14vw, 128px); font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; overflow-wrap: anywhere; text-wrap: balance; }
.web-frase { margin-top: 12px; max-width: 34ch; font-size: 17px; line-height: 1.4; color: rgba(255, 255, 255, 0.9); text-wrap: pretty; }

/* Imágenes sin fondo: fija = pegada a un punto; libre = donde la soltó el dueño. */
.web-recorte {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 0;
    width: min(calc(var(--ancho) * 1%), calc(var(--ancho) * 9px));
    height: auto;
    pointer-events: none;
    transform: translate(var(--mover-x, 0), var(--mover-y, 0)) rotate(var(--giro, 0deg));
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.35));
}
.web-recorte.es-delante { z-index: 2; }

/* El boleto: una sola tarjeta con las muescas de la carta y la perforación de puntos;
   "Ver menú" va sellado en el centro. La sombra va en el contenedor (filter) porque la
   máscara de las muescas recortaría un box-shadow. */
.web-boleto { position: relative; z-index: 4; margin-top: 28px; filter: drop-shadow(0 2px 3px rgba(20, 16, 30, 0.16)) drop-shadow(0 18px 32px rgba(20, 16, 30, 0.28)); }
.web-boleto-cuerpo {
    position: relative;
    display: grid;
    min-height: 84px;
    padding: 6px;
    border-radius: 20px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tarjeta) 92%, #FFFFFF) 0%, var(--tarjeta) 55%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    -webkit-mask:
        radial-gradient(circle 9px at var(--m1) 0, #0000 98%, #000),
        radial-gradient(circle 9px at var(--m2) 0, #0000 98%, #000),
        radial-gradient(circle 9px at var(--m3) 0, #0000 98%, #000),
        radial-gradient(circle 9px at var(--m1) 100%, #0000 98%, #000),
        radial-gradient(circle 9px at var(--m2) 100%, #0000 98%, #000),
        radial-gradient(circle 9px at var(--m3) 100%, #0000 98%, #000);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 9px at var(--m1) 0, #0000 98%, #000),
        radial-gradient(circle 9px at var(--m2) 0, #0000 98%, #000),
        radial-gradient(circle 9px at var(--m3) 0, #0000 98%, #000),
        radial-gradient(circle 9px at var(--m1) 100%, #0000 98%, #000),
        radial-gradient(circle 9px at var(--m2) 100%, #0000 98%, #000),
        radial-gradient(circle 9px at var(--m3) 100%, #0000 98%, #000);
    mask-composite: intersect;
}
.web-boleto-corte {
    position: absolute;
    top: 12px;
    bottom: 12px;
    width: 2px;
    margin-left: -1px;
    background: radial-gradient(circle, var(--borde) 1px, transparent 1.4px) center top / 2px 6px repeat-y;
}
.web-boleto-boton {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 7px;
    padding: 13px 4px 10px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--tinta);
    font: 600 13px/1.15 var(--texto);
    text-align: center;
    overflow-wrap: anywhere;
    min-width: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 160ms var(--salida), background-color 160ms ease;
}
.web-boleto-boton .ic { width: 24px; height: 24px; color: var(--web-icono); transition: transform 220ms var(--salida); }
.web-boleto-boton:active { transform: scale(0.95); background: color-mix(in srgb, var(--primario) 8%, transparent); }
/* El destacado: con luz arriba, un borde fino y su propio brillo que lo cruza una vez al
   entrar (el de la luz de vitrina). */
.web-boleto-boton.es-destacado {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0 6px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cta-fondo) 84%, #FFFFFF) 0%, var(--cta-fondo) 62%);
    color: var(--cta-texto);
    font: 700 16px/1.1 var(--titulos);
    letter-spacing: 0.01em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 1px color-mix(in srgb, var(--cta-texto) 10%, transparent), 0 8px 16px -8px color-mix(in srgb, var(--cta-fondo) 70%, #000000);
}
.web-boleto-boton.es-destacado::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.web-boleto-boton.es-destacado .ic { width: 26px; height: 26px; color: inherit; }
.web-boleto-boton.es-destacado:active { background: color-mix(in srgb, var(--cta-fondo) 88%, #000000); }
@media (hover: hover) and (pointer: fine) {
    .web-boleto-boton:hover { background: color-mix(in srgb, var(--primario) 7%, transparent); }
    .web-boleto-boton:hover .ic { transform: translateY(-2px); }
    .web-boleto-boton.es-destacado:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--cta-fondo) 76%, #FFFFFF) 0%, var(--cta-fondo) 70%); }
}
.web-boleto-boton.es-destacado:only-of-type { margin: 0; }

/* Bloques */
.web-bloque { padding-top: 44px; }
.web-bloque-adentro { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.web-bloque.con-fondo { margin-top: 44px; padding: 36px 0 40px; background: var(--bloque-fondo); }
.web-bloque.con-foto { background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), var(--bloque-fondo) center / cover no-repeat; }
/* Con fondo oscuro, su letra, sus íconos y sus tarjetas pasan a claros. */
.web-bloque.es-oscuro { --tinta: #F2EFF7; --suave: #C9C2D4; --borde: rgba(255, 255, 255, 0.16); --tarjeta: rgba(255, 255, 255, 0.08); --web-icono: color-mix(in srgb, var(--primario) 45%, #FFFFFF); color: var(--tinta); }
.web-titulo { margin: 0 0 14px; font-family: var(--titulos); font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; color: var(--tinta); overflow-wrap: anywhere; text-wrap: balance; }

.web-foto-caja { position: relative; display: block; overflow: hidden; background: var(--borde); }
.web-foto-caja img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }

/* Banners a todo lo ancho, uno a la vez: pasan solos y con el dedo. */
.web-banners-bloque .web-bloque-adentro { max-width: none; padding: 0; }
.web-banners-bloque .web-titulo { max-width: 1080px; margin: 0 auto 14px; padding: 0 16px; }
.web-banners { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.web-banners::-webkit-scrollbar { display: none; }
.web-banner { min-width: 0; scroll-snap-align: start; }
.web-banner-foto { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 0; background: none; color: #FFFFFF; text-align: left; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.web-banner-foto .web-foto-caja { position: absolute; inset: 0; }
/* El banner se ve completo (los afiches traen letra en los bordes); lo que sobra lo llena la
   misma foto, desenfocada y oscura. */
.web-banner-foto .web-foto-caja::after { content: ""; position: absolute; inset: -40px; background: var(--banner) center / cover; filter: blur(28px) brightness(0.55); }
.web-banner-foto .web-foto-caja img { z-index: 1; object-fit: contain; }
.web-banner-foto.con-texto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, 0.72)); }
.web-banner-texto { position: absolute; left: 16px; right: 16px; bottom: 20px; z-index: 1; display: grid; gap: 6px; }
.web-banner-texto strong { font-family: var(--titulos); font-size: 30px; font-weight: 700; line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
.web-banner-texto span { font-size: 15px; color: rgba(255, 255, 255, 0.9); }
.web-condiciones { margin: 8px 16px 0; font-size: 12px; line-height: 1.4; color: var(--suave); }
.web-puntos { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.web-puntos i { width: 6px; height: 6px; border-radius: 999px; background: var(--borde); transition: width 300ms var(--salida), background-color 300ms ease; }
.web-puntos i.si { width: 18px; background: var(--tinta); }

/* Lo que ofrece: ventanas con su foto; la primera grande y las demás de a dos (si sobra una,
   va a lo ancho). Abren su hoja con las fotos. */
.web-ventanas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.web-ventana { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; aspect-ratio: 3 / 4; padding: 14px; overflow: hidden; border: 0; border-radius: var(--radio); background: var(--borde); color: #FFFFFF; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--salida); }
.web-ventana:first-child { grid-column: span 2; aspect-ratio: 4 / 5; max-height: min(540px, 72svh); padding: 20px; }
.es-par .web-ventana:last-child { grid-column: span 2; aspect-ratio: 16 / 10; }
.web-ventana:active { transform: scale(0.98); transition-delay: 60ms; }
.web-ventana .web-foto-caja,
.web-categoria .web-foto-caja { position: absolute; inset: 0; z-index: -2; }
.web-ventana .web-foto-caja,
.web-categoria .web-foto-caja img { transition: transform 700ms var(--salida); }
/* Varias fotos: una encima de otra, la que se ve entra fundiéndose y acercándose despacio. */
.web-foto-caja:has(+ .web-ventana-pasos) img { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 600ms ease, transform 4s var(--salida); }
.web-foto-caja:has(+ .web-ventana-pasos) img.es-actual { opacity: 1; transform: scale(1); }
/* Una barrita por foto: la que se ve se llena en 3 s y entonces pasa a la siguiente. */
.web-ventana-pasos { position: absolute; top: 14px; left: 14px; display: flex; gap: 4px; }
.web-ventana-pasos i { position: relative; width: 18px; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.38); }
.web-ventana-pasos i.visto { background: #FFFFFF; }
.web-ventana-pasos i.es-actual::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #FFFFFF; transform-origin: left; animation: web-paso 3s linear var(--retraso, 0s) both; }
.web-ventana-pasos i.es-actual:not(:first-child)::after { animation-delay: 0s; }
.web-ventana.en-pausa .web-ventana-pasos i::after { animation-play-state: paused; }
@keyframes web-paso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
    .web-ventana-pasos { display: none; }
}
.web-ventana::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, transparent 30%, transparent 45%, rgba(0, 0, 0, 0.78) 100%); }
.web-ventana-texto { display: grid; gap: 4px; }
.web-ventana-texto strong { font: 700 19px/1.08 var(--titulos); letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
.web-ventana:first-child strong { font-size: 24px; }
.web-ventana-frase { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, 0.88); }
.web-ventana:first-child .web-ventana-frase { font-size: 15px; }
.web-ventana-ir { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); transition: transform 220ms var(--salida); }
.web-ventana:first-child .web-ventana-ir { background: var(--cta-fondo); color: var(--cta-texto); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); -webkit-backdrop-filter: none; backdrop-filter: none; }
.web-ventana-ir .ic { width: 18px; height: 18px; }
.web-ventana-ir-texto { display: none; }

/* La carta por categorías: franjas con su banner, como en el menú; llevan a esa categoría. */
.web-categorias { display: grid; gap: 8px; }
.web-categoria { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; aspect-ratio: 3 / 1; padding: 0 18px; overflow: hidden; border: 0; border-radius: var(--radio); background: var(--borde); color: #FFFFFF; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--salida); }
.web-categoria::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.18) 70%); }
.web-categoria:active { transform: scale(0.98); transition-delay: 60ms; }
.web-categoria strong { flex: 1; min-width: 0; font: 700 24px/1.05 var(--titulos); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.web-categoria .ic { flex: none; width: 22px; height: 22px; transition: transform 220ms var(--salida); }

/* Platos de la carta: un riel que se desliza con el dedo; se asoma el siguiente. */
.web-platos { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
.web-platos::-webkit-scrollbar { display: none; }
.web-plato { display: grid; gap: 4px; min-width: 0; padding: 0; border: 0; background: none; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--salida); }
.web-plato:active { transform: scale(0.98); transition-delay: 60ms; }
.web-plato-foto { aspect-ratio: 3 / 4; margin-bottom: 6px; border-radius: var(--radio); }
.web-plato-nombre { font-size: 16px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.web-plato-precio { font-size: 15px; font-weight: 700; color: var(--precio); font-variant-numeric: tabular-nums; }

/* Eventos: la fecha en un sello con los colores del botón Ver menú. */
.web-eventos { display: grid; gap: 10px; }
.web-evento { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--radio); background: var(--tarjeta); }
.web-evento-fecha { flex: none; display: grid; justify-items: center; align-content: center; width: 58px; height: 62px; border-radius: 12px; background: var(--cta-fondo); color: var(--cta-texto); font-size: 13px; font-weight: 600; }
.web-evento-fecha b { font-family: var(--titulos); font-size: 24px; line-height: 1; }
.web-evento-texto { display: grid; gap: 3px; min-width: 0; }
.web-evento-texto strong { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.web-evento-texto span { font-size: 14px; color: var(--suave); }

/* Texto libre (con foto y botón opcionales). */
.web-texto { display: grid; gap: 16px; }
.web-texto-foto { aspect-ratio: 16 / 10; border-radius: var(--radio); }
.web-parrafo { max-width: 60ch; font-size: 16px; line-height: 1.55; color: var(--suave); text-wrap: pretty; overflow-wrap: anywhere; }
.web-texto-boton { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 16px; padding: 0 18px; border-radius: 999px; background: var(--cta-fondo); color: var(--cta-texto); font-weight: 700; text-decoration: none; transition: transform 160ms var(--salida); }
.web-texto-boton:active { transform: scale(0.97); }
.web-texto-boton .ic,
.web-texto-boton .red-marca { width: 20px; height: 20px; }

/* Galería: una grande y las demás de a dos (tantas celdas como fotos). */
.web-fotos { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; gap: 6px; }
.web-foto { border-radius: 10px; }
.web-foto:first-child { grid-column: span 2; grid-row: span 2; }
.web-foto:last-child:nth-child(even) { grid-column: span 2; }

/* Video de YouTube: la imagen primero; el video se carga al tocarla. */
.web-video { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radio); background: #000000 center / cover no-repeat; cursor: pointer; }
.web-video-play { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); transition: transform 160ms var(--salida); }
.web-video-play::before { content: ""; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #FFFFFF; }
.web-video:active .web-video-play { transform: scale(0.94); }
.web-video-marco { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radio); }

/* Botones propios: una lista agrupada (el ícono sale de a dónde lleva, como en la carta). */
.web-botones { overflow: hidden; border-radius: var(--radio); background: var(--tarjeta); box-shadow: var(--sombra); }
.web-boton { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; color: var(--tinta); font-size: 16px; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color 160ms ease; }
.web-boton:active { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.web-boton + .web-boton::before { content: ""; position: absolute; top: 0; left: 48px; right: 0; height: 1px; background: var(--borde); }
.web-boton > .ic:first-child,
.web-boton > .red-marca { width: 22px; height: 22px; color: var(--web-icono); }
.web-boton-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.web-boton-ir { color: var(--suave); }

/* Sedes: tarjeta con foto, dirección, estado en vivo, Cómo llegar y Horario. */
.web-sedes { display: grid; gap: 14px; }
.web-sede { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radio); background: var(--tarjeta); box-shadow: var(--sombra); }
.web-sede-foto { aspect-ratio: 16 / 9; }
.web-sede-texto { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; }
.web-sede-nombre { margin: 0; font: 700 20px/1.15 var(--titulos); color: var(--tinta); overflow-wrap: anywhere; }
.web-sede-dir { margin: 0; font-size: 14px; line-height: 1.4; color: var(--suave); overflow-wrap: anywhere; }
.web-sede-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.web-sede-boton { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1.5px solid var(--borde); border-radius: 999px; background: none; color: var(--tinta); font: 600 14px/1 var(--texto); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--salida); }
.web-sede-boton:active { transform: scale(0.96); }
.web-sede-boton .ic { width: 18px; height: 18px; color: var(--web-icono); }

/* Pie de la web: logo, redes y derechos; debajo, la firma de ReserApp. */
.web-pie { display: grid; justify-items: center; gap: 14px; margin-top: 64px; padding: 40px 16px 0; border-top: 1px solid var(--borde); text-align: center; }
.web-pie .redes { margin: 0; }
.web-pie-derechos { margin: 0; font-size: 13px; color: var(--suave); }
.web .pie-carta { padding-top: 24px; }
.hoja-titulo-simple { margin: 4px 0 14px; font-family: var(--titulos); font-size: 22px; }

/* Movimiento: la portada y su cascada son las de la carta (.entra); las imágenes sin fondo
   caen a su lugar y las que "flotan" se mecen; al bajar, cada bloque sube al aparecer.
   Con "reducir movimiento", nada se mueve. */
@media (prefers-reduced-motion: no-preference) {
    .entra .web-recorte { animation: recorte-entra 900ms var(--salida) both; animation-delay: calc(260ms + var(--i, 0) * 90ms); }
    .web-recorte.mueve-flota { animation: recorte-entra 900ms var(--salida) both, recorte-flota 6s ease-in-out 1.2s infinite alternate; }
    .web-revela { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--salida), transform 600ms var(--salida); }
    .web-revela.visto { opacity: 1; transform: none; }
    .entra .web-boleto-boton.es-destacado::after { animation: brillo 1100ms var(--salida) 760ms both; }
}
@keyframes recorte-entra {
    from { opacity: 0; transform: translate(var(--mover-x, 0), calc(var(--mover-y, 0px) - 28px)) rotate(calc(var(--giro, 0deg) - 14deg)) scale(0.92); }
    to { opacity: 1; transform: translate(var(--mover-x, 0), var(--mover-y, 0)) rotate(var(--giro, 0deg)); }
}
@keyframes recorte-flota {
    from { transform: translate(var(--mover-x, 0), var(--mover-y, 0)) rotate(var(--giro, 0deg)); }
    to { transform: translate(var(--mover-x, 0), calc(var(--mover-y, 0px) - 8px)) rotate(calc(var(--giro, 0deg) + 3deg)); }
}

@media (min-width: 960px) {
    /* Portada, barra y boleto empiezan en el mismo borde que los bloques. */
    .web-portada { padding: 120px max(40px, calc((100% - 1000px) / 2)) 48px; }
    .web-portada-foto { background-image: var(--foto); }
    /* Imágenes sin fondo con su lugar y tamaño del computador (en % de la portada, igual en
       cualquier ancho). Sin ellos: el mismo tamaño frente al alto de la portada que en el
       celular (0,37 = WEB_ANCHO_PC del editor) y el mismo centro de lado a lado. */
    .web-recorte { left: var(--x-pc, calc(var(--x) + var(--ancho) * (1 - 0.37) / 2 * 1%)); top: var(--y-pc, var(--y)); width: calc(var(--ancho-pc, var(--ancho) * 0.37) * 1%); }
    .web-barra { gap: 16px; height: 88px; margin-bottom: -88px; padding: 0 max(40px, calc((100% - 1000px) / 2)); }
    .web-barra-logo { width: 52px; height: 52px; }
    .web-barra-enlaces { display: flex; gap: 4px; }
    .web-barra-enlaces button { padding: 8px 12px; border: 0; border-radius: 999px; background: none; color: inherit; font: 600 15px/1 var(--texto); cursor: pointer; transition: background-color 160ms ease; }
    .web-barra-enlaces button:active { background: color-mix(in srgb, currentColor 12%, transparent); }
    @media (hover: hover) and (pointer: fine) {
        .web-barra-enlaces button:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
    }
    .web-barra-mas.solo-celular { display: none; }
    /* Nombre, frase y boleto centrados, como se ven en el celular. */
    .web-portada-texto { text-align: center; }
    .web-frase { margin-inline: auto; font-size: 21px; }
    .web-boleto { width: 100%; max-width: 640px; margin: 36px auto 0; }
    .web-boleto-cuerpo { min-height: 92px; }
    .web-boleto-boton { padding-top: 16px; font-size: 15px; }
    .web-boleto-boton.es-destacado { font-size: 18px; }
    .web-bloque { padding-top: 80px; }
    .web-bloque.con-fondo { margin-top: 80px; padding: 64px 0 72px; }
    /* En el computador los banners van dentro del mismo ancho que los demás bloques. */
    .web-bloque-adentro,
    .web-banners-bloque .web-bloque-adentro { max-width: 1080px; padding: 0 40px; }
    .web-banners-bloque .web-titulo { padding: 0; }
    .web-banners { border-radius: var(--radio); }
    .web-titulo { margin-bottom: 24px; font-size: 44px; letter-spacing: -0.02em; }
    .web-banner-foto { aspect-ratio: 16 / 9; }
    .web-banner-texto { left: 36px; right: 36px; bottom: 32px; }
    .web-banner-texto strong { font-size: 48px; }
    .web-banner-texto span { font-size: 19px; }
    .web-condiciones { margin: 10px 0 0; font-size: 13px; }
    /* Ventanas en mosaico: la primera ocupa dos tercios y dos filas; las otras, de a tres
       (las que sobran se reparten la última fila). */
    .web-ventanas { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 230px; gap: 16px; }
    .web-ventana { grid-column: span 2; aspect-ratio: auto; padding: 22px; }
    .web-ventana:first-child { grid-column: span 4; grid-row: span 2; aspect-ratio: auto; padding: 32px; }
    .web-ventana:first-child:last-child,
    .web-ventana:nth-child(3n+4):last-child { grid-column: span 6; }
    /* Una sola ventana con título: el título grande a un lado y la foto vertical al otro,
       cambiando de lado de un bloque al siguiente. Debajo del título van el texto de la
       ventana y "Ver más"; toda la franja abre la ventana. */
    .web-bloque-adentro:has(> .web-titulo + .web-ventanas > .web-ventana:only-child) { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 72px; }
    .web-bloque-adentro:has(> .web-titulo + .web-ventanas > .web-ventana:only-child) > .web-titulo { grid-area: 2 / 1; margin: 0; font-size: 56px; line-height: 1.02; letter-spacing: -0.025em; }
    .web-titulo + .web-ventanas:has(> .web-ventana:only-child) { display: contents; }
    .web-titulo + .web-ventanas > .web-ventana:only-child { grid-area: 1 / 1 / -1 / -1; display: grid; grid-template: subgrid / subgrid; aspect-ratio: auto; max-height: none; padding: 0; overflow: visible; border-radius: 0; background: none; }
    .web-ventana:only-child .web-foto-caja,
    .web-ventana:only-child::after { position: relative; grid-area: 1 / 2 / -1; aspect-ratio: 4 / 5; border-radius: var(--radio); }
    .web-ventana:only-child::after { z-index: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent 22%); pointer-events: none; }
    .web-ventana:only-child .web-ventana-pasos { position: relative; z-index: 1; grid-area: 1 / 2; align-self: start; top: 0; left: 0; margin: 18px; }
    .web-ventana:only-child .web-ventana-texto { grid-area: 3 / 1; margin-top: 18px; }
    .web-titulo + .web-ventanas > .web-ventana:only-child strong { font: 500 22px/1.3 var(--texto); letter-spacing: 0; color: var(--suave); }
    .web-ventana:only-child .web-ventana-ir { position: static; grid-area: 4 / 1; justify-self: start; display: inline-flex; gap: 8px; width: auto; height: 44px; margin-top: 28px; padding: 0 18px 0 22px; border-radius: 999px; background: var(--cta-fondo); color: var(--cta-texto); font-size: 15px; font-weight: 700; box-shadow: none; }
    .web-ventana:only-child .web-ventana-ir-texto { display: inline; }
    .web-bloque:nth-child(even) .web-ventana:only-child .web-foto-caja,
    .web-bloque:nth-child(even) .web-ventana:only-child::after,
    .web-bloque:nth-child(even) .web-ventana:only-child .web-ventana-pasos { grid-column: 1; }
    .web-bloque:nth-child(even) > .web-bloque-adentro:has(> .web-titulo + .web-ventanas > .web-ventana:only-child) > .web-titulo,
    .web-bloque:nth-child(even) .web-ventana:only-child .web-ventana-texto,
    .web-bloque:nth-child(even) .web-ventana:only-child .web-ventana-ir { grid-column: 2; }
    .web-ventana:nth-child(2):last-child { grid-row: span 2; }
    .es-par .web-ventana:last-child { aspect-ratio: auto; }
    .web-ventana:nth-child(3n+4):nth-last-child(2),
    .web-ventana:nth-child(3n+5):last-child { grid-column: span 3; }
    .web-ventana:nth-child(2):last-child { grid-column: span 2; }
    .web-ventana-texto strong { font-size: 24px; }
    .web-ventana:first-child strong { font-size: 36px; }
    .web-ventana-frase { font-size: 15px; }
    .web-ventana:first-child .web-ventana-frase { max-width: 44ch; font-size: 18px; }
    .web-categorias { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
    .web-categoria { aspect-ratio: 2 / 1; padding: 0 24px; }
    .web-categoria strong { font-size: 30px; }
    @media (hover: hover) and (pointer: fine) {
        .web-ventana:hover .web-foto-caja,
        .web-categoria:hover .web-foto-caja img { transform: scale(1.04); }
        .web-ventana:hover .web-ventana-pasos i::after { animation-play-state: paused; }
        .web-ventana:hover .web-ventana-ir { transform: translateX(2px); }
        .web-ventana:only-child:hover .web-foto-caja { transform: scale(1.02); }
        .web-plato-foto img { transition: transform 700ms var(--salida); }
        .web-plato:hover .web-plato-foto img { transform: scale(1.04); }
        .web-categoria:hover .ic { transform: translateX(4px); }
    }
    /* De a 4; con 3, 6 o 9 platos de a 3 y con 5 de a 5, para que ninguna fila quede a medias. */
    .web-platos { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; overflow: visible; }
    .web-platos:has(> :last-child:nth-child(3n)):not(:has(> :last-child:nth-child(4n))) { grid-template-columns: repeat(3, 1fr); }
    .web-platos:has(> :last-child:nth-child(5)) { grid-template-columns: repeat(5, 1fr); }
    .web-eventos { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
    .web-evento { padding: 16px; }
    .web-texto.con-foto { grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
    .web-parrafo { font-size: 18px; }
    .web-fotos { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; gap: 10px; }
    .web-foto:first-child { grid-column: span 1; }
    .web-foto:last-child:nth-child(even) { grid-column: auto; }
    .web-botones { display: grid; grid-template-columns: 1fr 1fr; }
    .web-boton { min-height: 72px; padding: 0 22px; }
    .web-boton + .web-boton::before { top: 18px; bottom: 18px; left: 0; right: auto; width: 1px; height: auto; }
    .web-sedes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
}