/**
 * Diseño "Mediterránea" — verano: olas, cantos rodados y fotos con formas
 * orgánicas. Mucho blanco; el secundario hace de agua / arena en fondos y
 * olas, el primario va en títulos y precios. Siempre en claro.
 * Clases propias: me-*.
 */

.p-mediterranea {
    color-scheme: light;
    /* reserva neutra para navegadores sin color-mix(); abajo, todo sale de --c1 / --c2 */
    --fondo: #fff;
    --fondo-2: #f3f3f1;
    --texto: #1d2224;
    --tenue: #687174;
    --linea: #e4e6e6;
    --radio: 24px;
    --c1-tinta: inherit;
    --c2-tinta: inherit;
    --c1-suave: var(--fondo-2);
    --c2-suave: var(--fondo-2);
    --agua: var(--fondo-2);
    --sombra: 0 2px 4px rgba(0, 0, 0, .04), 0 10px 26px rgba(0, 0, 0, .07);
    background: var(--fondo);
    color: var(--texto);
}
@supports (color: color-mix(in srgb, #000, #fff)) {
    .p-mediterranea {
        --fondo-2: color-mix(in srgb, var(--c2) 9%, #fff);
        --texto: color-mix(in srgb, var(--c1-tinta) 14%, #1b1f21);
        --tenue: color-mix(in srgb, var(--c1-tinta) 22%, #6b7376);
        --linea: color-mix(in srgb, var(--c2) 16%, #e9eaea);
        --c1-suave: color-mix(in srgb, var(--c1) 12%, #fff);
        --c2-suave: color-mix(in srgb, var(--c2) 14%, #fff);
        --agua: color-mix(in srgb, var(--c2) 18%, #fff);
    }
    html:has(> .p-mediterranea) { background: color-mix(in srgb, var(--c2) 26%, #f4f4f4); }
}
.p-mediterranea .carta { background: var(--fondo); }

/* piezas comunes: base.css las oscurece con el modo del sistema; aquí, siempre claro */
.p-mediterranea .c-ficha-desc { color: var(--texto); }
.p-mediterranea .c-toast { background: var(--texto); color: #fff; }
.p-mediterranea .c-nota--aviso { background: #fdecea; color: #9b1c13; }
.p-mediterranea .c-dieta--vegano, .p-mediterranea .c-dieta--vegetariano, .p-mediterranea .c-dieta--singluten { color: #3f7a2f; }
.p-mediterranea .c-dieta--picante, .p-mediterranea .c-form-msg.es-error { color: #c8261b; }
.p-mediterranea .c-etq { background: var(--c2-suave); color: var(--c2-tinta); }
.p-mediterranea .c-etq--agotado { background: #c8261b; color: #fff; }
.p-mediterranea .c-ficha-nombre { font-weight: 300; font-size: 1.75rem; color: var(--c1-tinta); }
.p-mediterranea .c-boton, .p-mediterranea .c-edad-op { border-radius: 999px; }
.p-mediterranea dialog.c-hoja { border-radius: 30px 30px 0 0; }

/* formas orgánicas para las fotos (se alternan) */
.me-forma-0 { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
.me-forma-1 { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; }
.me-forma-2 { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; }

.me-ola { display: block; width: 100%; height: 34px; }
.me-ondita { display: block; width: 54px; height: 8px; margin: 6px auto 0; fill: none; stroke: var(--c2); stroke-width: 2.4; stroke-linecap: round; }

/* ---- portada ---- */

.me-portada { position: relative; height: 290px; background: var(--agua); }
.me-portada--sinfoto { height: calc(120px + env(safe-area-inset-top)); }
.me-portada-foto { width: 100%; height: 100%; object-fit: cover; }
.me-ola--portada { position: absolute; left: 0; right: 0; bottom: -1px; fill: var(--fondo); }
.me-idioma {
    position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px;
    background: #fff; color: #1d2224;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}

.me-identidad {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    margin-top: -40px; padding: 0 24px;
    text-align: center;
}
.me-logo {
    display: grid; place-items: center;
    width: 104px; height: 104px; padding: 16px;
    border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 5px var(--agua), var(--sombra);
}
.me-logo img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.me-portada--sinfoto + .me-identidad { margin-top: -20px; }
.me-identidad h1 { font-size: 2.125rem; font-weight: 300; line-height: 1.08; letter-spacing: -.02em; color: var(--c1-tinta); text-wrap: balance; }
.me-identidad p { display: flex; gap: 5px; font-size: .875rem; color: var(--tenue); }
.me-identidad p .ic { width: 15px; height: 15px; margin-top: 2px; color: var(--c2-tinta); }

/* ---- cartas: cantos rodados ---- */

.me-menus { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 28px 16px 4px; }
.me-menus a {
    flex: 1 1 140px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 104px; padding: 18px 16px;
    border-radius: 48% 52% 46% 54% / 58% 50% 50% 42%;
    background: var(--agua);
    text-align: center;
    transition: transform .2s, border-radius .4s;
}
.me-menus a:nth-child(even) { border-radius: 54% 46% 52% 48% / 46% 56% 44% 54%; }
.me-menus a:active { transform: scale(.96); }
.me-menus-nombre { font-size: 1.25rem; font-weight: 600; line-height: 1.15; color: var(--c1-tinta); text-wrap: balance; }
.me-menus .c-precio { font-size: .875rem; color: var(--tenue); }

/* ---- recomendaciones ---- */

.me-recos { padding: 36px 0 4px; text-align: center; }
.me-recos h2 { font-size: 1.25rem; font-weight: 300; letter-spacing: .02em; color: var(--c1-tinta); }
.me-carrusel {
    display: flex; gap: 14px;
    padding: 18px 18px 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 18px;
    scrollbar-width: none;
}
.me-carrusel::-webkit-scrollbar { display: none; }
.me-reco {
    flex: none; width: 148px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-align: center;
    scroll-snap-align: start;
}
.me-reco:only-child { margin: 0 auto; }
.me-reco-marco { display: block; width: 136px; height: 136px; margin-bottom: 8px; overflow: hidden; background: var(--agua); box-shadow: var(--sombra); transition: transform .2s; }
.me-reco:active .me-reco-marco { transform: scale(.96); }
.me-reco-foto { width: 100%; height: 100%; object-fit: cover; }
.me-reco-nombre { font-weight: 600; font-size: .9375rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.me-reco .c-precio { font-size: .875rem; color: var(--c1-tinta); }

/* ---- pie: la ola sube del color del agua ---- */

.me-inicio { display: flex; flex-direction: column; }
.me-pie { flex: 1; display: flex; flex-direction: column; margin-top: 30px; }
.me-ola--pie { fill: var(--agua); transform: scaleX(-1); margin-bottom: -1px; }
.me-pie-cont { flex: 1; padding: 14px 16px calc(28px + env(safe-area-inset-bottom)); background: var(--agua); text-align: center; }
.me-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.me-accion {
    display: flex; align-items: center; gap: 8px;
    min-height: 46px; padding: 0 18px;
    border-radius: 999px;
    background: var(--fondo);
    font-size: .875rem; font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.me-accion .ic { width: 18px; height: 18px; color: var(--c1-tinta); }
.me-accion:first-child { background: var(--c1); color: var(--sobre-c1); }
.me-accion:first-child .ic { color: inherit; }
.me-accion:active { transform: scale(.96); }
.me-redes { margin-top: 12px; color: var(--c2-tinta); }

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

.me-barra { border-bottom: 0; box-shadow: 0 1px 0 var(--linea); }
.me-barra h1 { text-align: center; font-weight: 400; font-size: 1.1875rem; color: var(--c1-tinta); }
.me-barra h1:last-child { padding-right: 44px; }
.me-barra .c-idioma { background: var(--agua); }
.me-carta .c-indice { border-bottom: 0; }
.me-carta .c-indice a { background: var(--agua); }
.me-carta .c-indice a[aria-current] { background: var(--c2); color: var(--sobre-c2); }

.me-grupos { padding: 0 14px calc(40px + env(safe-area-inset-bottom)); }
.me-grupo-cab { padding: 30px 0 14px; text-align: center; }
.me-grupo h2 { font-size: 1.625rem; font-weight: 300; line-height: 1.15; letter-spacing: -.01em; color: var(--c1-tinta); text-wrap: balance; }
.me-grupo:first-child:not(:has(h2)) { padding-top: 14px; }

.me-platos { display: grid; gap: 10px; }
.me-plato {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radio);
    background: var(--fondo);
    box-shadow: 0 0 0 1px var(--linea), var(--sombra);
}
.me-plato:active { background: var(--fondo-2); }
.me-plato-marco { flex: none; width: 80px; height: 80px; overflow: hidden; background: var(--agua); }
.me-plato-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.me-plato-txt { flex: 1; min-width: 0; }
.me-plato-nombre { display: block; font-weight: 600; line-height: 1.3; }
.me-plato-extra { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.35; color: var(--tenue); }
.me-plato-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; margin-top: 6px; }
.me-plato-pie .c-precio { font-size: 1.0625rem; color: var(--c1-tinta); }
.me-plato-pie .c-mas { margin-left: auto; background: var(--agua); box-shadow: none; }
.me-plato-pie .c-mas[aria-pressed="true"] { background: var(--c1); }