/**
 * Diseño "Grande" — legibilidad ante todo: todo un 25 % más grande (la raíz
 * pasa a 20 px, así que también crecen hojas, ficha y botonera), contraste
 * muy alto, nada de grises claros ni letra fina, botones a todo el ancho.
 * El color del local se usa oscurecido (--fuerte) para que el texto blanco
 * encima y el propio color como texto se lean siempre. Siempre en claro.
 * Clases propias: g-*.
 */

html:has(> .p-grande) { font-size: 125%; }

.p-grande {
    color-scheme: light;
    /* reserva neutra para navegadores sin color-mix(); abajo, todo sale de --c1 / --c2 */
    --fondo: #fff;
    --fondo-2: #f1f1f1;
    --texto: #111;
    --tenue: #3b3b3b;
    --linea: #9a9a9a;
    --radio: 14px;
    --fuerte: var(--c1-tinta);
    --c1-tinta: inherit;
    --c2-tinta: inherit;
    --c1-suave: var(--fondo-2);
    --c2-suave: var(--fondo-2);
    --sombra: none;
    font-size: 1rem;
    background: var(--fondo);
    color: var(--texto);
}
@supports (color: color-mix(in srgb, #000, #fff)) {
    .p-grande {
        --fondo-2: color-mix(in srgb, var(--c2) 10%, #fff);
        --linea: color-mix(in srgb, var(--c2) 25%, #8f8f8f);
        --fuerte: color-mix(in srgb, var(--c1-tinta) 72%, #000);
        --c1-suave: color-mix(in srgb, var(--c1) 12%, #fff);
        --c2-suave: color-mix(in srgb, var(--c2) 12%, #fff);
    }
    html:has(> .p-grande) { background: color-mix(in srgb, var(--c2) 18%, #e6e6e6); }
}
.p-grande .carta { background: var(--fondo); }

/* piezas comunes: siempre en claro y con más contraste */
.p-grande .c-ficha-desc { color: var(--texto); }
.p-grande .c-ficha-extra, .p-grande .c-trazas, .p-grande .c-intro-fecha { color: var(--tenue); }
.p-grande .c-toast { background: var(--texto); color: #fff; }
.p-grande .c-nota--aviso { background: #fdecea; color: #7d140c; }
.p-grande .c-dieta--vegano, .p-grande .c-dieta--vegetariano, .p-grande .c-dieta--singluten { color: #2a5a1e; }
.p-grande .c-dieta--picante, .p-grande .c-form-msg.es-error { color: #a3180f; }
.p-grande .c-etq { font-size: .75rem; padding: 4px 10px; }
.p-grande .c-precio, .p-grande .c-ficha-precio, .p-grande .c-formato .c-precio, .p-grande .c-intro-precio { color: var(--fuerte); }
.p-grande .c-boton { background: var(--fuerte); color: #fff; min-height: 56px; }
.p-grande .c-barra--color { background: var(--fuerte); color: #fff; }
.p-grande .c-indice a { border: 2px solid var(--linea); background: var(--fondo); font-weight: 700; color: var(--texto); }
.p-grande .c-indice a[aria-current] { border-color: var(--fuerte); background: var(--fuerte); color: #fff; }
.p-grande .c-nav { color: var(--texto); }
.p-grande .c-nav a[aria-current] .ic { background: var(--fuerte); color: #fff; }
.p-grande .c-mas { width: 44px; height: 44px; color: var(--fuerte); box-shadow: 0 0 0 2px var(--fuerte); }
.p-grande .c-mas .ic { width: 24px; height: 24px; }
.p-grande .c-mas[aria-pressed="true"] { background: var(--fuerte); color: #fff; }
.p-grande .c-edad-op--si { background: var(--fuerte); color: #fff; }
.p-grande :focus-visible { outline: 3px solid var(--fuerte); outline-offset: 3px; }

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

.g-cab { padding: calc(10px + env(safe-area-inset-top)) 20px 18px; text-align: center; }
.g-tira { display: flex; justify-content: flex-end; min-height: 44px; }
.g-idioma { border: 2px solid var(--linea); color: var(--texto); }
.g-logo { width: auto; max-width: 70%; max-height: 100px; margin: 4px auto 12px; }
.g-cab h1 { font-size: 1.75rem; font-weight: 800; line-height: 1.15; text-wrap: balance; }
.g-cab p { margin-top: 6px; font-size: .9375rem; color: var(--tenue); }

.g-foto { width: 100%; height: 170px; object-fit: cover; }

.g-menus { display: grid; gap: 12px; padding: 22px 16px 4px; }
.g-menus a {
    display: flex; align-items: center; gap: 12px;
    min-height: 76px; padding: 14px 18px;
    border-radius: var(--radio);
    background: var(--fuerte); color: #fff;
}
.g-menus a:active { transform: scale(.98); }
.g-menus-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.g-menus-nombre { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.g-menus .c-precio { font-size: 1rem; color: inherit; }
.g-menus .ic { width: 30px; height: 30px; }

/* ---- recomendaciones: lista, sin carrusel ---- */

.g-recos { padding: 28px 16px 4px; }
.g-recos h2 { padding-bottom: 8px; font-size: 1.25rem; font-weight: 800; }
.g-recos li + li { border-top: 2px solid var(--fondo-2); }
.g-reco { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 10px 0; }
.g-reco:active { background: var(--fondo-2); }
.g-reco-foto { width: 72px; height: 72px; flex: none; object-fit: cover; border-radius: 10px; background: var(--fondo-2); }
.g-reco-nombre { flex: 1; min-width: 0; font-weight: 700; line-height: 1.25; }
.g-reco .c-precio { font-weight: 800; }

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

.g-pie { padding: 26px 16px calc(28px + env(safe-area-inset-bottom)); }
.g-acciones { display: grid; gap: 10px; }
.g-accion {
    display: flex; align-items: center; gap: 14px;
    min-height: 60px; padding: 0 18px;
    border: 2px solid var(--fuerte); border-radius: var(--radio);
    font-size: 1rem; font-weight: 700;
}
.g-accion .ic { width: 26px; height: 26px; color: var(--fuerte); }
.g-accion:active { background: var(--c1-suave); }
.g-redes { margin-top: 14px; color: var(--texto); }
.g-pie .c-creditos { color: var(--tenue); }

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

.g-barra h1 { font-size: 1.125rem; font-weight: 800; }
.g-grupos { padding: 0 16px calc(40px + env(safe-area-inset-bottom)); }
.g-grupo h2 {
    margin: 28px 0 4px; padding-bottom: 8px;
    border-bottom: 4px solid var(--fuerte);
    font-size: 1.5rem; font-weight: 800; line-height: 1.15;
}
.g-grupo:first-child:not(:has(h2)) { padding-top: 12px; }

.g-platos li + li { border-top: 2px solid var(--linea); }
.g-plato { display: block; padding: 16px 0; }
.g-plato:active { background: var(--fondo-2); }
.g-plato-cab { display: flex; align-items: center; gap: 12px; }
.g-plato-nombre { flex: 1; min-width: 0; font-size: 1.0625rem; font-weight: 800; line-height: 1.25; }
.g-plato-precio { font-size: 1.0625rem; font-weight: 800; }
.g-plato-extra { display: block; margin-top: 4px; font-size: .875rem; line-height: 1.4; color: var(--tenue); }
.g-plato-dieta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: .8125rem; font-weight: 600; }
.g-algs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.g-alg { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; }
.g-alg img { width: 22px; height: 22px; flex: none; }
.g-plato .c-trazas { margin-top: 6px; font-size: .75rem; }
.g-plato .c-formato { font-size: .875rem; font-weight: 600; }