/**
 * Diseño "Editorial" — como una revista gastronómica: titulares grandes con
 * serifa alineados a la izquierda, mucho aire, foto descentrada sobre un
 * bloque del color primario y capítulos numerados. El secundario tiñe el
 * papel y los filetes. Siempre en claro (es una página impresa).
 * Clases propias: ed-*.
 */

.p-editorial {
    color-scheme: light;
    /* reserva neutra para navegadores sin color-mix(); abajo, todo sale de --c1 / --c2 */
    --fondo: #fff;
    --fondo-2: #f4f3f1;
    --texto: #161514;
    --tenue: #6b6863;
    --linea: #e3e0db;
    --radio: 0;
    --fuente-titulo: "Didot", "Bodoni 72", "Bodoni MT", "Iowan Old Style", "Palatino Linotype", Palatino, "Noto Serif", Georgia, serif;
    --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 20px rgba(0, 0, 0, .06);
    background: var(--fondo);
    color: var(--texto);
}
@supports (color: color-mix(in srgb, #000, #fff)) {
    .p-editorial {
        --fondo: color-mix(in srgb, var(--c2) 4%, #fff);
        --fondo-2: color-mix(in srgb, var(--c2) 10%, #fafafa);
        --texto: color-mix(in srgb, var(--c1-tinta) 10%, #141414);
        --tenue: color-mix(in srgb, var(--c1-tinta) 18%, #6d6d6d);
        --linea: color-mix(in srgb, var(--c2) 22%, #e2e2e2);
        --c1-suave: color-mix(in srgb, var(--c1) 12%, var(--fondo));
        --c2-suave: color-mix(in srgb, var(--c2) 12%, var(--fondo));
    }
    html:has(> .p-editorial) { background: color-mix(in srgb, var(--c2) 14%, #ececec); }
}
.p-editorial .carta { background: var(--fondo); }

/* piezas comunes: base.css las oscurece con el modo del sistema; aquí, siempre claro */
.p-editorial .c-ficha-desc { color: var(--texto); }
.p-editorial .c-toast { background: var(--texto); color: var(--fondo); }
.p-editorial .c-nota--aviso { background: #fdecea; color: #9b1c13; }
.p-editorial .c-dieta--vegano, .p-editorial .c-dieta--vegetariano, .p-editorial .c-dieta--singluten { color: #3f7a2f; }
.p-editorial .c-dieta--picante, .p-editorial .c-form-msg.es-error { color: #c8261b; }
.p-editorial .c-etq { border-radius: 0; background: var(--texto); color: var(--fondo); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; }
.p-editorial .c-etq--agotado { background: #c8261b; color: #fff; }
.p-editorial .c-ficha-nombre { font-weight: 400; font-size: 1.75rem; line-height: 1.1; }
.p-editorial .c-ficha-precio { font-weight: 400; color: var(--texto); }
.p-editorial .c-boton { border-radius: 0; text-transform: uppercase; letter-spacing: .1em; font-size: .875rem; }
.p-editorial .c-edad-cab h1 { font-weight: 400; font-size: 2.25rem; }
.p-editorial .c-edad-op { border-radius: 0; }

/* antetítulo: versalitas pequeñas con un filete del primario delante */
.ed-antetitulo {
    display: flex; align-items: center; gap: 10px;
    font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--tenue);
}
.ed-antetitulo::before { content: ""; width: 26px; height: 2px; flex: none; background: var(--c1); }

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

.ed-tira {
    display: flex; align-items: center; gap: 12px;
    min-height: 56px; padding: calc(10px + env(safe-area-inset-top)) 12px 0 22px;
}
.ed-tira .ed-antetitulo { flex: 1; min-width: 0; line-height: 1.4; }
.ed-idioma { margin-left: auto; border: 1px solid var(--linea); border-radius: 0; }

.ed-portada { padding: 22px 22px 0; }
.ed-logo { width: auto; max-width: 52%; max-height: 64px; margin-bottom: 18px; }
.ed-portada h1 {
    font: 400 3.25rem/.98 var(--fuente-titulo);
    letter-spacing: -.02em; text-wrap: balance; hyphens: auto;
}
/* la foto a todo el ancho, con una franja del color del local debajo */
.ed-foto { margin: 30px -22px 0; }
.ed-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ed-foto::after { content: ""; display: block; width: 38%; height: 8px; margin-left: 22px; background: var(--c1); }

/* ---- índice de cartas ---- */

.ed-menus { margin: 48px 22px 0; border-top: 2px solid var(--texto); }
.ed-menus a {
    display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--linea);
}
.ed-menus a:active { background: var(--fondo-2); }
.ed-num { font: 400 1.25rem/1 var(--fuente-titulo); color: var(--c1-tinta); font-variant-numeric: lining-nums tabular-nums; }
.ed-menus-nombre { font: 400 1.875rem/1.05 var(--fuente-titulo); letter-spacing: -.01em; text-wrap: balance; }
.ed-menus .c-precio { grid-column: 2; margin-top: 4px; font-size: .875rem; font-weight: 500; color: var(--tenue); }

/* ---- recomendaciones: una a toda página y las demás en lista ---- */

.ed-recos { padding: 54px 0 8px; }
.ed-recos > h2 { padding: 0 22px 16px; }
.ed-destacado { display: block; }
.ed-destacado-foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--fondo-2); }
.ed-destacado-grupo { display: block; padding: 18px 22px 0; font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c1-tinta); }
.ed-destacado-nombre { display: block; padding: 6px 22px 0; font: 400 2.25rem/1.02 var(--fuente-titulo); letter-spacing: -.015em; text-wrap: balance; }
.ed-destacado-extra { display: block; padding: 10px 22px 0; font-size: 1.0625rem; line-height: 1.5; color: var(--tenue); }
.ed-destacado .c-precio { display: block; padding: 10px 22px 0; font-size: 1.0625rem; }
.ed-mas { margin: 26px 22px 0; border-top: 1px solid var(--linea); }
.ed-mas a { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.ed-mas a:active { background: var(--fondo-2); }
.ed-mas-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ed-mas-nombre { font: 400 1.25rem/1.2 var(--fuente-titulo); }
.ed-mas-grupo { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.ed-mas .c-precio { font-weight: 500; }

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

.ed-pie { margin-top: 40px; padding: 30px 22px calc(28px + env(safe-area-inset-bottom)); border-top: 2px solid var(--texto); }
.ed-acciones { display: grid; }
.ed-accion {
    display: flex; align-items: center; gap: 12px;
    min-height: 52px;
    border-bottom: 1px solid var(--linea);
    font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.ed-accion .ic { width: 18px; height: 18px; color: var(--c1-tinta); }
.ed-accion:active { background: var(--fondo-2); }
.ed-pie-nombre { margin-top: 30px; font: 400 1.75rem/1.05 var(--fuente-titulo); }
.ed-redes { justify-content: flex-start; margin: 8px 0 0 -10px; color: var(--texto); }
.ed-pie .c-creditos { text-align: left; }
.ed-pie .c-creditos-enlaces { justify-content: flex-start; }

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

.ed-barra { border-bottom-color: var(--texto); }
.ed-barra h1 { font-weight: 400; font-size: 1.25rem; }
.ed-barra .c-idioma { border: 1px solid var(--linea); border-radius: 0; }

.ed-carta .c-indice { gap: 18px; padding: 0 22px; }
.ed-carta .c-indice a {
    display: flex; align-items: center;
    min-height: 46px; padding: 0;
    border-radius: 0; background: none;
    border-bottom: 2px solid transparent;
    font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--tenue);
}
.ed-carta .c-indice a[aria-current] { background: none; color: var(--texto); border-bottom-color: var(--c1); }

.ed-grupos { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }

/* apertura de capítulo: número grande perfilado + título; debajo, una foto a todo el ancho */
.ed-capitulo { display: flex; align-items: flex-end; gap: 14px; padding: 46px 22px 18px; }
.ed-capitulo-n {
    font: 400 4.5rem/.8 var(--fuente-titulo);
    color: transparent; -webkit-text-stroke: 1.5px var(--c1-tinta);
    font-variant-numeric: lining-nums;
}
@supports not (-webkit-text-stroke: 1px #000) { .ed-capitulo-n { color: var(--c1-tinta); } }
.ed-capitulo h2 { flex: 1; min-width: 0; padding-bottom: 2px; font: 400 2.125rem/1 var(--fuente-titulo); letter-spacing: -.015em; text-wrap: balance; }
.ed-grupo:first-child:not(:has(h2)) { padding-top: 14px; }

.ed-platos { padding: 0 22px; }
.ed-platos li + li { border-top: 1px solid var(--linea); }
.ed-plato { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; }
.ed-plato-txt { flex: 1; min-width: 0; }
.ed-plato-foto { width: 104px; height: 130px; flex: none; object-fit: cover; background: var(--fondo-2); }
.ed-plato:active { background: var(--fondo-2); }
.ed-plato-nombre { display: block; font: 400 1.375rem/1.15 var(--fuente-titulo); text-wrap: balance; }
.ed-plato-precio { font-size: .9375rem; font-weight: 500; }
.ed-plato-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; margin-top: 8px; }
.ed-plato-pie .c-mas { margin-left: auto; }
.ed-plato-extra { display: block; margin-top: 6px; font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.ed-plato-desc {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 4px; font-size: .9375rem; line-height: 1.55; color: var(--tenue);
}