/**
 * Diseño "Bodega" — oscuro y cálido, con serifa: la penumbra de una vinoteca.
 * El fondo es casi negro teñido del primario; el secundario, aclarado, es el
 * acento (títulos, precios, filetes). Siempre oscuro, como Nocturna.
 * Los grupos con formatos iguales se pintan en tabla. Clases propias: bo-*.
 */

.p-bodega {
    color-scheme: dark;
    /* reserva neutra para navegadores sin color-mix(); abajo, todo sale de --c1 / --c2 */
    --fondo: #141210;
    --fondo-2: #1f1c19;
    --texto: #f1ebe3;
    --tenue: #a49b90;
    --linea: #3a342e;
    --acento: var(--c2);
    --radio: 6px;
    --fuente-titulo: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Noto Serif", Georgia, serif;
    --c1-tinta: var(--acento);
    --c2-tinta: var(--acento);
    --c1-suave: var(--fondo-2);
    --c2-suave: var(--fondo-2);
    --c1-oscuro: #000;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 26px rgba(0, 0, 0, .45);
    --col: 4.25rem;
    background: var(--fondo);
    color: var(--texto);
}
@supports (color: color-mix(in srgb, #000, #fff)) {
    .p-bodega {
        --fondo: color-mix(in srgb, var(--c1) 14%, #100d0b);
        --fondo-2: color-mix(in srgb, var(--c1) 20%, #1a1613);
        --texto: color-mix(in srgb, var(--c2) 8%, #f4eee6);
        --tenue: color-mix(in srgb, var(--c2) 22%, #a39a8f);
        --linea: color-mix(in srgb, var(--c2) 22%, #332d28);
        --acento: color-mix(in srgb, var(--c2) 62%, #fff);
        --c1-suave: color-mix(in srgb, var(--c1) 24%, var(--fondo));
        --c2-suave: color-mix(in srgb, var(--c2) 18%, var(--fondo));
        --c1-oscuro: color-mix(in srgb, var(--c1) 35%, #000);
    }
    html:has(> .p-bodega) { background: color-mix(in srgb, var(--c1) 10%, #080605); }
}
.p-bodega .carta { background: var(--fondo); }

/* piezas comunes, a oscuras (base.css solo las oscurece con el modo del sistema) */
.p-bodega .c-nota--aviso { background: #3b1613; color: #ffb4ab; }
.p-bodega .c-dieta--vegano, .p-bodega .c-dieta--vegetariano, .p-bodega .c-dieta--singluten { color: #84c770; }
.p-bodega .c-dieta--picante, .p-bodega .c-form-msg.es-error { color: #ff7a6e; }
.p-bodega .c-ficha-desc { color: var(--texto); opacity: .86; }
.p-bodega .c-toast { background: var(--texto); color: var(--fondo); }
.p-bodega .c-etq { background: none; border: 1px solid var(--acento); color: var(--acento); }
.p-bodega .c-etq--agotado { border-color: #ff7a6e; color: #ff7a6e; }
.p-bodega .c-ficha-nombre { font-weight: 400; }
.p-bodega .c-alergenos h3, .p-bodega .c-hoja-cab h2 { font-family: var(--fuente-titulo); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); }
.p-bodega .c-boton { background: var(--acento); color: var(--fondo); }
.p-bodega .c-anadir[aria-pressed="true"] { background: var(--fondo-2); color: var(--texto); }
.p-bodega .c-mas { background: var(--fondo-2); }
.p-bodega .c-mas[aria-pressed="true"] { background: var(--acento); color: var(--fondo); }
.p-bodega .c-nav { background: var(--fondo-2); }
.p-bodega .c-nav a[aria-current] .ic { background: var(--acento); color: var(--fondo); }
.p-bodega .c-nav-n { box-shadow: 0 0 0 2px var(--fondo-2); }
.p-bodega .c-edad-op--si { background: var(--acento); color: var(--fondo); }

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

.bo-cab { position: relative; height: 240px; background: var(--c1-oscuro); }
.bo-cab--sinfoto { height: calc(64px + env(safe-area-inset-top)); }
.bo-cab-foto { width: 100%; height: 100%; object-fit: cover; }
.bo-cab::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(transparent 35%, var(--fondo));
}
.bo-idioma {
    position: absolute; z-index: 1; top: calc(12px + env(safe-area-inset-top)); right: 12px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(0, 0, 0, .35); color: #fff;
}

.bo-identidad {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    margin-top: -46px; padding: 0 24px;
    text-align: center;
}
.bo-cab--sinfoto + .bo-identidad { margin-top: 0; }
.bo-logo { width: auto; max-width: 60%; max-height: 92px; filter: drop-shadow(0 3px 14px rgba(0, 0, 0, .6)); }
.bo-identidad h1 {
    font: 400 2.25rem/1.08 var(--fuente-titulo);
    letter-spacing: .02em; text-wrap: balance;
}
.bo-identidad p { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }
/* filete doble con un rombo en medio */
.bo-filete {
    position: relative; width: 150px; height: 5px; margin-top: 6px;
    border-top: 1px solid var(--acento); border-bottom: 1px solid var(--acento);
    opacity: .75;
}
.bo-filete::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 9px; height: 9px; margin: -5px 0 0 -5px;
    background: var(--fondo); border: 1px solid var(--acento);
    transform: rotate(45deg);
}

/* ---- secciones de la bodega ---- */

.bo-menus { margin: 28px 18px 0; }
.bo-menus a {
    display: flex; align-items: center; gap: 12px;
    min-height: 64px; padding: 14px 4px;
    border-bottom: 1px solid var(--linea);
}
.bo-menus a:first-child { border-top: 1px solid var(--linea); }
.bo-menus a:active { background: var(--fondo-2); }
.bo-menus-nombre { flex: 1; min-width: 0; font: 400 1.375rem/1.15 var(--fuente-titulo); letter-spacing: .08em; text-transform: uppercase; }
.bo-menus .c-precio { color: var(--acento); }
.bo-menus .ic { width: 20px; height: 20px; color: var(--acento); }

/* ---- recomendaciones: tarjetas anchas, foto vertical a la izquierda ---- */

.bo-recos { padding: 34px 0 4px; }
.bo-recos h2 {
    padding: 0 22px 12px;
    font: 400 .875rem/1 var(--fuente-titulo); letter-spacing: .2em; text-transform: uppercase;
    color: var(--acento);
}
.bo-carrusel {
    display: flex; gap: 12px;
    padding: 0 18px 6px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 18px;
    scrollbar-width: none;
}
.bo-carrusel::-webkit-scrollbar { display: none; }
.bo-reco {
    flex: none; width: 86%;
    display: flex; min-height: 150px;
    border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
    background: var(--fondo-2);
    scroll-snap-align: start;
}
.bo-reco:only-child { width: 100%; }
.bo-reco:active { border-color: var(--acento); }
.bo-reco-foto { width: 38%; height: auto; flex: none; object-fit: cover; }
.bo-reco-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.bo-reco-grupo { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.bo-reco-nombre { font: 400 1.3125rem/1.15 var(--fuente-titulo); }
.bo-reco-extra { font-size: .8125rem; font-style: italic; color: var(--tenue); line-height: 1.35; }
.bo-reco .c-precio { margin-top: auto; padding-top: 6px; color: var(--acento); }

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

.bo-pie { padding: 36px 18px calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.bo-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bo-accion {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 6px 10px;
    border: 1px solid var(--linea); border-radius: var(--radio);
    font: 400 .9375rem/1.15 var(--fuente-titulo); letter-spacing: .06em;
}
.bo-accion:only-child, .bo-accion:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bo-accion .ic { width: 18px; height: 18px; color: var(--acento); }
.bo-accion:active { border-color: var(--acento); }
.bo-redes { margin-top: 14px; color: var(--acento); }

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

.bo-barra { background: var(--fondo); }
.bo-barra h1 { text-align: center; font-weight: 400; font-size: 1.1875rem; letter-spacing: .1em; text-transform: uppercase; }
.bo-barra h1:last-child { padding-right: 44px; }
.bo-barra .c-idioma { border: 1px solid var(--linea); }

.bo-carta .c-indice a { border-radius: 0; background: none; border-bottom: 1px solid transparent; font-family: var(--fuente-titulo); letter-spacing: .06em; color: var(--tenue); }
.bo-carta .c-indice a[aria-current] { background: none; color: var(--acento); border-bottom-color: currentColor; }

.bo-grupos { padding: 4px 18px calc(40px + env(safe-area-inset-bottom)); }
.bo-grupo-cab { display: flex; align-items: flex-end; gap: 8px; padding: 32px 0 10px; border-bottom: 1px solid var(--acento); }
.bo-grupo h2 {
    flex: 1; min-width: 0;
    font: 400 1.375rem/1.15 var(--fuente-titulo); letter-spacing: .1em; text-transform: uppercase;
    color: var(--acento);
}
.bo-grupo:first-child:not(:has(.bo-grupo-cab)) { padding-top: 14px; }

.bo-platos li + li { border-top: 1px solid var(--linea); }
.bo-plato { display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 14px 0; }
.bo-plato:active { background: var(--fondo-2); }
.bo-plato-txt { flex: 1; min-width: 0; }
.bo-plato-nombre { display: block; font: 400 1.125rem/1.25 var(--fuente-titulo); }
.bo-plato-extra { display: block; margin-top: 2px; font-size: .8125rem; font-style: italic; line-height: 1.35; color: var(--tenue); }
.bo-plato-precio { color: var(--acento); }
.bo-plato .c-mas { margin-left: 6px; }

/* formatos en línea: "Copa 4 €   Botella 18 €" */
.bo-formatos { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 6px; }
.bo-formato { font-size: .8125rem; color: var(--tenue); white-space: nowrap; }
.bo-formato .c-precio { color: var(--acento); }

/* tabla: el nombre ocupa toda la fila y debajo van los precios, uno por columna,
   alineados con los nombres de formato de la cabecera del grupo */
.bo-grupo--tabla { --tpl: 1fr repeat(2, var(--col)); --mas: 42px; }
.bo-cols-3 { --tpl: 1fr repeat(3, var(--col)); }
.bo-carta:not(:has(.c-mas)) .bo-grupo--tabla { --mas: 0px; }
.bo-grupo--tabla .bo-grupo-cab,
.bo-grupo--tabla .bo-plato { display: grid; grid-template-columns: var(--tpl) var(--mas); column-gap: 8px; align-items: center; }
.bo-grupo--tabla .bo-plato-txt { grid-column: 1 / -1; }
.bo-grupo--tabla .bo-col--1 { grid-column-start: 2; }
.bo-grupo--tabla .bo-plato > .bo-col, .bo-grupo--tabla .bo-plato > .c-mas { margin-top: 2px; }
.bo-grupo--tabla .bo-plato > .c-mas { margin-left: 0; justify-self: end; }
.bo-col { text-align: right; white-space: nowrap; }
.bo-grupo-cab .bo-col { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); line-height: 1.2; }
.bo-plato .bo-col { color: var(--acento); }
/* en la cabecera, igual: el título arriba y los nombres de formato debajo */
.bo-grupo--tabla .bo-grupo-cab h2 { grid-column: 1 / -1; margin-bottom: 6px; }
.bo-grupo--tabla .bo-grupo-cab > .bo-col:first-of-type { grid-column-start: 2; }