/**
 * Diseño "Escaparate" — la foto del producto manda: cabecera de perfil,
 * cartas en mosaicos de color, carrusel grande de recomendaciones y platos
 * en cuadrícula. El primario rellena (mosaicos, precios); el secundario tiñe
 * fondos y alterna en los mosaicos. Siempre en claro, para que las fotos
 * luzcan igual en cualquier móvil. Clases propias: e-*.
 */

.p-escaparate {
    color-scheme: light;
    /* reserva neutra para navegadores sin color-mix(); abajo, todo sale de --c1 / --c2 */
    --fondo: #fff;
    --fondo-2: #f4f4f4;
    --texto: #18171a;
    --tenue: #6a676e;
    --linea: #e6e4e8;
    --radio: 18px;
    --fuente: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fuente-titulo: var(--fuente);
    --c1-tinta: inherit;
    --c2-tinta: inherit;
    --c1-suave: var(--fondo-2);
    --c2-suave: var(--fondo-2);
    --sombra: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .08);
    background: var(--fondo);
    color: var(--texto);
}
@supports (color: color-mix(in srgb, #000, #fff)) {
    .p-escaparate {
        --fondo-2: color-mix(in srgb, var(--c2) 10%, #fff);
        --texto: color-mix(in srgb, var(--c1-tinta) 14%, #161518);
        --tenue: color-mix(in srgb, var(--c1-tinta) 22%, #6a676e);
        --linea: color-mix(in srgb, var(--c2) 18%, #ebe9ed);
        --c1-suave: color-mix(in srgb, var(--c1) 14%, #fff);
        --c2-suave: color-mix(in srgb, var(--c2) 10%, #fff);
    }
}

html:has(> .p-escaparate) { background: var(--c2-suave); }
.p-escaparate .carta { background: var(--c2-suave); }

/* piezas comunes: base.css las oscurece con el modo del sistema; aquí, siempre claro */
.p-escaparate .c-ficha-desc { color: var(--texto); }
.p-escaparate .c-toast { background: var(--texto); color: #fff; }
.p-escaparate .c-nota--aviso { background: #fdecea; color: #9b1c13; }
.p-escaparate .c-dieta--vegano, .p-escaparate .c-dieta--vegetariano, .p-escaparate .c-dieta--singluten { color: #3f7a2f; }
.p-escaparate .c-dieta--picante, .p-escaparate .c-form-msg.es-error { color: #c8261b; }
/* sellos en los colores del local (agotado sigue en rojo) */
.p-escaparate .c-etq { background: var(--c2); color: var(--sobre-c2); }
.p-escaparate .c-etq--agotado { background: #c8261b; color: #fff; }
.p-escaparate .c-ficha-nombre { font-weight: 800; }
.p-escaparate .c-ficha-precio { padding: 4px 12px; border-radius: 999px; background: var(--c1); color: var(--sobre-c1); font-size: 1.125rem; }
.p-escaparate .c-boton { border-radius: 999px; }
.p-escaparate .c-edad-op { border-radius: var(--radio); }

/* pastilla de precio */
.e-pastilla {
    display: inline-block;
    padding: 3px 11px; border-radius: 999px;
    background: var(--c1); color: var(--sobre-c1);
    font-weight: 800; font-size: .9375rem; line-height: 1.3;
}
/* plato sin foto en una carta con fotos: su inicial en grande */
.e-inicial {
    display: grid; place-items: center;
    background: var(--c1-suave); color: var(--c1-tinta);
    font: 800 2.75rem/1 var(--fuente-titulo);
}
/* plato numerado sin foto: el número en vez de la inicial, y no se repite junto al nombre */
.e-plato:has(> .e-inicial--num) .c-num { display: none; }

/* ---- portada: cabecera de perfil ---- */

.e-portada { position: relative; height: 180px; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.e-perfil--sinfoto .e-portada { height: calc(110px + env(safe-area-inset-top)); }
.e-portada img { width: 100%; height: 100%; object-fit: cover; }
.e-idioma {
    position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px;
    background: #fff; color: #18171a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.e-identidad {
    position: relative;
    display: flex; align-items: flex-end; gap: 14px;
    margin-top: -26px; padding: 0 16px 0 18px;
}
.e-logo {
    display: grid; place-items: center; flex: none;
    width: 96px; height: 96px; margin-top: -24px; padding: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px var(--c1), var(--sombra);
}
.e-logo img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.e-identidad-txt {
    flex: 1; min-width: 0;
    padding: 34px 0 2px;
}
.e-identidad:not(:has(.e-logo)) .e-identidad-txt {
    margin-top: 0; padding: 16px 18px 14px;
    border-radius: var(--radio); background: var(--fondo); box-shadow: var(--sombra);
}
.e-identidad h1 { font-size: 1.5rem; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.e-identidad p { display: flex; gap: 5px; margin-top: 4px; font-size: .8125rem; color: var(--tenue); line-height: 1.3; }
.e-identidad p .ic { width: 15px; height: 15px; margin-top: 1px; color: var(--c1-tinta); }

/* ---- cartas: mosaicos de los dos colores ---- */

.e-menus { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 22px 16px 4px; }
.e-menus a {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
    min-height: 96px; padding: 14px 40px 14px 16px;
    border-radius: var(--radio);
    background: var(--c1); color: var(--sobre-c1);
    box-shadow: var(--sombra);
    transition: transform .15s;
}
.e-menus a:nth-child(4n + 2), .e-menus a:nth-child(4n + 3) { background: var(--c2); color: var(--sobre-c2); }
.e-menus a:only-child, .e-menus a:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 76px; }
.e-menus a:active { transform: scale(.97); }
.e-menus-nombre { font-size: 1.1875rem; font-weight: 800; line-height: 1.12; text-wrap: balance; }
.e-menus .c-precio { font-size: .875rem; opacity: .9; }
.e-menus .ic { position: absolute; right: 12px; bottom: 14px; width: 22px; height: 22px; }

/* ---- recomendaciones: carrusel grande ---- */

.e-recos { padding: 26px 0 4px; }
.e-recos h2 { padding: 0 18px 12px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.e-carrusel {
    display: flex; gap: 12px;
    padding: 0 16px 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px;
    scrollbar-width: none;
}
.e-carrusel::-webkit-scrollbar { display: none; }
.e-reco {
    flex: none; width: 80%;
    display: flex; flex-direction: column;
    border-radius: var(--radio); overflow: hidden;
    background: var(--fondo); box-shadow: var(--sombra);
    scroll-snap-align: start;
    transition: transform .15s;
}
.e-reco:only-child { width: 100%; }
.e-reco:active { transform: scale(.98); }
.e-reco-foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fondo-2); }
.e-reco-info { display: flex; align-items: center; gap: 10px; padding: 12px 14px 14px; }
.e-reco-txt { flex: 1; min-width: 0; display: grid; }
.e-reco-nombre { font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-reco-grupo { font-size: .8125rem; color: var(--tenue); }

/* ---- pie ---- */

.e-pie { margin-top: 18px; padding: 26px 16px calc(28px + env(safe-area-inset-bottom)); background: var(--fondo); border-radius: 26px 26px 0 0; text-align: center; }
.e-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 6px; }
.e-accion {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 76px; font-size: .75rem; font-weight: 700; line-height: 1.2;
}
.e-accion .ic {
    width: 54px; height: 54px; padding: 15px;
    border-radius: 50%;
    background: var(--c2-suave); color: var(--c2-tinta);
    transition: transform .15s;
}
.e-accion:first-child .ic { background: var(--c1); color: var(--sobre-c1); }
.e-accion:active .ic { transform: scale(.92); }
.e-redes { margin-top: 18px; color: var(--c1-tinta); }

/* ---- una carta ---- */

.e-barra { background: var(--fondo); border-bottom: 0; box-shadow: 0 1px 0 var(--linea); }
.e-barra h1 { text-align: center; font-weight: 800; }
.e-barra h1:last-child { padding-right: 44px; }
.e-barra .c-idioma { background: var(--fondo-2); }

.e-carta .c-indice { background: var(--fondo); }
.e-carta .c-indice a { background: var(--c2-suave); font-weight: 700; }
.e-carta .c-indice a[aria-current] { background: var(--c2); color: var(--sobre-c2); }

.e-grupos { padding: 2px 12px calc(40px + env(safe-area-inset-bottom)); }
.e-grupo h2 {
    display: flex; align-items: center; gap: 8px;
    padding: 24px 4px 12px;
    font-size: 1.375rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
}
.e-grupo-n {
    padding: 2px 9px; border-radius: 999px;
    background: var(--fondo); color: var(--c2-tinta);
    font-size: .8125rem; font-weight: 700; letter-spacing: 0;
}
.e-grupo:first-child:not(:has(h2)) { padding-top: 14px; }

.e-platos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.e-plato {
    display: flex; flex-direction: column;
    height: 100%;
    border-radius: var(--radio); overflow: hidden;
    background: var(--fondo); box-shadow: var(--sombra);
    transition: transform .15s;
}
.e-plato:active { transform: scale(.97); }
.e-plato-foto { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--fondo-2); }
.e-plato-txt { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 10px 12px 12px; }
.e-plato-nombre { font-weight: 800; line-height: 1.22; }
.e-plato-extra {
    margin-top: 3px; font-size: .8125rem; color: var(--tenue); line-height: 1.32;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.e-plato .c-algs img { width: 16px; height: 16px; }
.e-plato .c-trazas { font-size: .6875rem; }
.e-plato .c-formatos { width: 100%; }
.e-plato .c-formato { font-size: .8125rem; gap: 8px; }
/* el precio, abajo del todo: las tarjetas de una fila quedan alineadas */
.e-plato-txt > .e-plato-pie { margin-top: auto; }
.e-plato-txt > :nth-last-child(2) { margin-bottom: 10px; }

/* carta sin ninguna foto: tarjetas de texto, una por fila */
.e-platos--sinfotos { grid-template-columns: 1fr; gap: 8px; }
.e-platos--sinfotos .e-plato-txt { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: start; }
.e-platos--sinfotos .e-plato-txt > * { grid-column: 1; }
.e-platos--sinfotos .e-plato-txt > .e-plato-pie { grid-column: 2; grid-row: 1 / span 9; margin: 0; align-self: center; }
.e-platos--sinfotos .e-plato-txt > :nth-last-child(2) { margin-bottom: 0; }

/* el pie blanco llega hasta abajo aunque la portada sea corta */
.e-inicio { display: flex; flex-direction: column; }
.e-pie { flex: 1; }

/* pie de la tarjeta: el precio y, a su derecha en la misma línea, el botón "+" */
.e-plato-pie { display: flex; align-items: center; gap: 8px; align-self: stretch; }
.e-plato-pie .c-mas { margin-left: auto; }