/* 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);
}

* { 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;
}

body.sin-scroll { overflow: hidden; }

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.con-foto {
    background-size: cover;
    background-position: center;
}

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

.portada-logo {
    width: 104px;
    height: 104px;
    object-fit: cover;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.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;
}

.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;
    gap: 6px 10px;
    font-size: 13px;
    font-weight: 600;
}

.sede-unica-dir {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    opacity: 0.9;
}

.sede-unica-dir .ic { width: 16px; height: 16px; }

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

.sedes-titulo {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.85;
}

.sede-opcion {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 2px solid transparent;
    border-radius: var(--radio);
    background: rgba(255, 255, 255, 0.95);
    color: var(--tinta);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sede-opcion.is-on {
    border-color: #FFFFFF;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45), 0 6px 18px rgba(0, 0, 0, 0.18);
}

.sede-check {
    flex-shrink: 0;
    color: var(--borde);
}

.sede-opcion.is-on .sede-check { color: var(--primario); }

.hoja .sede-opcion {
    background: var(--tarjeta);
    border-color: var(--borde);
    margin-bottom: 8px;
}

.hoja .sede-opcion.is-on { border-color: var(--primario); }

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

.sede-opcion-nombre {
    font-weight: 700;
    font-size: 15px;
}

.sede-opcion-dir {
    font-size: 12px;
    color: var(--suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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;
}

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

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

.boton-portada {
    display: block;
    padding: 11px 16px;
    border-radius: var(--radio);
    font-family: var(--titulos);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.redes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}

.red {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--redes);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 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); }

.categorias-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--fondo);
    box-shadow: 0 1px 0 var(--borde);
}

.categorias-nav::-webkit-scrollbar { display: none; }

.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 {
    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;
    align-items: flex-end;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--tarjeta);
    box-shadow: var(--sombra);
    text-align: left;
    cursor: pointer;
    transition: transform 0.12s;
}

.plato:active { transform: scale(0.99); }

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

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

.plato-nombre {
    font-family: var(--titulos);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--nombre-plato);
}

.plato-frase {
    font-size: 13px;
    color: var(--suave);
    line-height: 1.35;
    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;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primario);
    color: var(--sobre-primario);
    font-size: 20px;
}

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

.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-size: 15px;
    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);
}

.barra-pedido {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 40;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 480px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: none;
    border-radius: 999px;
    background: var(--primario);
    color: var(--sobre-primario);
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    animation: subir-barra 0.2s ease-out;
}

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

.barra-pedido-cant {
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    font-size: 13px;
}

.barra-pedido-total { margin-left: auto; }

/* ---------- 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;
}

.detalle-descripcion {
    font-size: 14px;
    line-height: 1.5;
}

.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); }

.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 {
    position: relative;
    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-modo-tarjeta { margin-bottom: 10px; }

.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 {
    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; }

.categoria-cuenta {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.75;
}

.ic.categoria-flecha {
    width: 24px;
    height: 24px;
    transition: transform 0.2s;
}

.categoria-modo-tarjeta.is-abierta .categoria-flecha { transform: rotate(180deg); }

.categoria-modo-tarjeta.is-abierta .platos {
    margin-top: 10px;
    animation: aparecer 0.2s ease-out;
}

/* ---------- 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-bloque > .ic { color: var(--primario); }

.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;
    gap: 8px;
}

.accion-sede {
    flex: 1;
    min-width: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border: 1.5px solid var(--borde);
    border-radius: 12px;
    background: var(--tarjeta);
    color: var(--tinta);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

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

.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; }
    .hoja { bottom: 24px; border-radius: 20px; }
}

@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 .sede-opcion,
.tema-oscuro .sede-opcion.is-on,
.tema-oscuro .menu-sede,
.tema-oscuro .menu-sede-info {
    background: var(--tarjeta);
    color: var(--tinta);
}

.tema-oscuro .sede-opcion.is-on { border-color: var(--primario); }

.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 con foto: la foto a la derecha y el "+" montado en su esquina. */
.plato.con-foto { align-items: center; }

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

.plato-foto {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: calc(var(--radio) - 4px);
    background: var(--borde);
}

.plato-foto-caja .plato-mas {
    position: absolute;
    right: -6px;
    bottom: -6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* 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; }

/* 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. */
.detalle-foto,
.sede-foto {
    width: 100%;
    display: block;
    margin-bottom: 12px;
    object-fit: cover;
    border-radius: 14px;
    background: var(--borde);
}

.detalle-foto {
    aspect-ratio: 1;
    max-height: 42vh;
}

.sede-foto { 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.
   ===================================================================================== */

:root {
    --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;
}

/* ---------- 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 360ms var(--salida), transform 420ms 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;
    align-items: center;
    gap: 14px;
    min-height: 74px;
    padding: 14px 18px;
    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;
}

.boton-portada {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 16px;
    transition: transform 160ms var(--salida);
}

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

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

.red {
    width: 44px;
    height: 44px;
    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;
    background: var(--vidrio);
    color: var(--tinta);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 10%, transparent);
    transition: transform 200ms var(--resorte);
}

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

.menu-fija .buscador {
    margin: 0 auto;
    padding: 0 12px 10px;
}

/* ---------- 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;
    height: calc(var(--barra-alto) + clamp(110px, 32vw, 220px));
    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 {
    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 {
    position: relative;
    min-height: 108px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 30px rgba(0, 0, 0, 0.28);
    transition: transform 240ms var(--salida), box-shadow 240ms ease;
}

.portada-cat:active { transform: scale(0.975); }

.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;
}

.plato:active { transform: scale(0.98); }

.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;
}

.plato-foto { border-radius: 16px; }

.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);
}

.plato.is-apagado .plato-mas { box-shadow: none; }

@media (hover: hover) and (pointer: fine) {
    .sede-boton:hover .sede-boton-ir .ic { transform: translateX(4px); }
    .sede-linea:hover .sede-linea-nombre { background-size: 100% 1.5px; }
    .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 ---------- */

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

.barra-pedido .barra-pedido-cant {
    background: var(--sobre-acento);
    color: var(--acento);
}

.barra-pedido-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); }

.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 sube; salir, al revés. */
html[data-dir="entrar"]::view-transition-old(root) { animation: vt-hundir 180ms ease both; }
html[data-dir="entrar"]::view-transition-new(root) { animation: vt-subir 380ms var(--cajon) both; }
html[data-dir="salir"]::view-transition-old(root) { animation: vt-bajar 180ms ease both; }
html[data-dir="salir"]::view-transition-new(root) { animation: vt-emerger 360ms var(--cajon) both; }

::view-transition-group(cat-activa) { animation-duration: 420ms; 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-subir { from { opacity: 0; transform: translateY(28px); } }
@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; }
    .hero-portada-img,
    .hero-logo,
    .categoria-vista > .categoria-cabecera { 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;
    gap: 8px;
    margin: 0;
    padding: 7px 14px 7px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    font-size: 12.5px;
    opacity: 0.85;
    transition: transform 220ms var(--resorte), opacity 200ms ease;
}

.pie-carta .firma img { width: 18px; height: 18px; border-radius: 5px; }
.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. */
body { --vidrio: color-mix(in srgb, var(--tarjeta) 74%, transparent); }

/* 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; }

.boton-portada {
    display: flex;
    align-items: stretch;
    min-height: 52px;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 16px;
    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 10px 26px rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
    font-family: var(--titulos);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.boton-portada-texto {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 16px;
    text-align: left;
}

.boton-portada-ir {
    flex-shrink: 0;
    width: 52px;
    display: grid;
    place-items: center;
    background: var(--btn-fondo);
    color: var(--btn-texto);
}

.boton-portada-ir .ic {
    transform: rotate(-45deg);
    transition: transform 300ms var(--resorte);
}

.boton-portada:active .boton-portada-ir .ic { transform: rotate(-45deg) translateX(5px); }

/* 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); }
    .boton-portada:hover .boton-portada-ir .ic { transform: rotate(-45deg) translateX(4px); }
}

/* 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; }

/* Pestaña de los botones propios: ícono de lo que abre (marca o propio). */
.boton-portada-ir .ic,
.boton-portada-ir .red-marca { width: 22px; height: 22px; }

.boton-portada-ir .ic,
.boton-portada-ir .red-marca { transition: transform 300ms var(--resorte); }
.boton-portada-ir .ic { transform: none; }
.boton-portada-ir .ic-externo { transform: rotate(-45deg); }
.boton-portada:active .boton-portada-ir .ic,
.boton-portada:active .boton-portada-ir .red-marca { transform: scale(0.86); }
.boton-portada:active .boton-portada-ir .ic-externo { transform: rotate(-45deg) translateX(5px); }

@media (hover: hover) and (pointer: fine) {
    .boton-portada:hover .boton-portada-ir .ic,
    .boton-portada:hover .boton-portada-ir .red-marca { transform: scale(1.12); }
    .boton-portada:hover .boton-portada-ir .ic-externo { transform: rotate(-45deg) translateX(4px); }
}

/* 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); }

.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); }

/* 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: 10px;
}

.consulta-fechas .campo:last-child { grid-column: 1 / -1; }

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

/* 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;
    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-caja::before,
.hoja-foto::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--acento) 22%, transparent) 50%, transparent 62%) no-repeat,
        var(--borde);
    background-size: 260% 100%, auto;
    background-position: 130% 0, 0 0;
    animation: vitrina 2.2s linear infinite;
    transition: opacity 300ms var(--salida);
    pointer-events: none;
}

.plato-foto-caja::before { border-radius: 16px; }

.hoja-foto { position: relative; }
.plato-foto,
.hoja-foto img { position: relative; background: transparent; }
.plato-foto-caja .plato-mas { z-index: 1; }

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

@keyframes vitrina {
    0% { background-position: 130% 0, 0 0; }
    70%, 100% { background-position: -30% 0, 0 0; }
}

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