/*
 * Asador Vistas al Río — hoja de estilo única.
 *
 * Sin framework ni compilación: este fichero se sirve tal cual.
 *
 * El ritmo de la página lo marcan tres anchos: bloques a sangre (100vw),
 * bloques a sangre con el contenido recentrado, y bloques en caja de 1200px.
 * La pieza que se repite es el "bloque partido": pantalla completa dividida en
 * dos mitades, foto y texto, alternando el lado.
 */

@font-face {
    font-family: 'Inria Serif';
    src: url('/fonts/inria-serif-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC;
}

@font-face {
    font-family: 'Inria Serif';
    src: url('/fonts/inria-serif-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC;
}

@font-face {
    font-family: 'Outfit';
    src: url('/fonts/outfit-300-600.woff2') format('woff2-variations'),
         url('/fonts/outfit-300-600.woff2') format('woff2');
    font-weight: 300 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC;
}

:root {
    --negro: #0a0a0a;
    --tinta: #000000;
    --texto: #1a1a1a;
    --texto-suave: #4a4a4a;
    --blanco: #ffffff;
    --hueso: #fafafa;
    --nieve: #f8fcff;
    /* El dorado de la referencia sobre fondo oscuro; sobre fondo claro daría
       2,1:1, así que ahí se usa una variante oscurecida que sí se lee. */
    --oro: #d4af37;
    --oro-tinta: #7a6420;   /* 5,2:1 sobre crema; el de antes no llegaba a 4,5 */
    --linea: #dcd8d2;

    /* Las fichas de vino: el papel y el granate de la maqueta de Alonso, y
       los cuatro colores de las etiquetas de la bodega. */
    --crema: #f7f3ec;
    --granate: #7b1f2c;
    --etiqueta-rojo: #d42a20;
    --etiqueta-amarillo: #f2c400;
    --etiqueta-azul: #2b2d83;

    /* La huerta: el verde de la hoja del tomate y un fondo de brote, como las
       fruterías que Alonso puso de referencia. */
    --huerta: #2f5d34;
    --huerta-claro: #eef3e4;

    --serif: 'Inria Serif', 'Iowan Old Style', Georgia, serif;
    --sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --lado: 6.25vw;
    --caja: 1200px;

    /* Los extremos son los de la referencia: móvil y escritorio. */
    --t-bloque: clamp(3.75rem, 2.6rem + 4.8vw, 6.25rem);     /* 60 → 100 px */
    --t-interior: clamp(3.3125rem, 2.8rem + 2.2vw, 4.375rem);/* 53 → 70 px */
    --t-medio: clamp(2.625rem, 1.9rem + 3vw, 3.6875rem);     /* 42 → 59 px */
    --t-antetitulo: 1.25rem;                                  /* 20 px */
    --t-cuerpo: 1.375rem;                                     /* 22 px */
    --t-boton: 1rem;                                          /* 16 px */
    --t-boton-hero: clamp(1.5625rem, 1.1rem + 1.9vw, 2.125rem); /* 25 → 34 px */

    --alto-cabecera: 64px;
    --alto-sticky: 64px;

    color-scheme: light;
}

@media (max-width: 1024px) {
    :root { --lado: 8vw; }
}

*,
*::before,
*::after { box-sizing: border-box; }

/* El display de la hoja del navegador para [hidden] lo gana cualquier regla de
   autor: sin esto, ocultar un .plato (display: grid) desde el buscador no
   surtiría ningún efecto. */
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--alto-sticky);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--blanco);
    color: var(--texto);
    font-family: var(--sans);
    font-size: var(--t-cuerpo);
    font-weight: 300;
    line-height: 1.2;
    /* Nada de overflow-x aquí: rompería el position:sticky del índice de la
       carta. El panel lateral es position:fixed, así que fuera de pantalla no
       genera scroll. */
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 400;
    color: var(--tinta);
    line-height: 1.15;
    margin: 0;
    text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: .2em; }
a:hover { color: var(--oro-tinta); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--oro-tinta); outline-offset: 3px; }

/* ------------------------------------------------------------------ anchos */

.caja {
    width: min(100% - 2 * var(--lado), var(--caja));
    margin-inline: auto;
}

.oculto-visual {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--negro);
    color: #fff;
    padding: .85rem 1.5rem;
    font-size: var(--t-boton);
    z-index: 100;
}
.saltar:focus { left: 0; }

/* -------------------------------------------------------------- tipografía */

.antetitulo {
    display: block;
    font-family: var(--sans);
    font-size: var(--t-antetitulo);
    font-weight: 600;
    line-height: 1.35;
    color: var(--tinta);
    margin: 0;
}

.titular {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    line-height: 1.15;
    /* El titular monta sobre el antetítulo: es la firma tipográfica de este
       diseño. En la referencia son -2.5em sobre 100px; aquí se ajusta para que
       no se salga de la columna en pantallas pequeñas. */
    margin: -.12em 0 .28em -.03em;
}

.entradilla {
    font-size: var(--t-cuerpo);
    font-weight: 300;
    line-height: 1.2;
    color: var(--texto);
}

/* ---------------------------------------------------------------- cabecera */

.cabecera {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--negro);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .24);
}

/* Como en la maqueta: el menú a la izquierda, el logo centrado en el hueco
   que queda y Reservas a la derecha. */
.cabecera__interior {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    width: min(100% - 2 * var(--lado), 1600px);
    margin-inline: auto;
    padding-block: 10px;
    min-height: 62px;
}

.cabecera__logo { justify-self: center; }
/* Altura fija: es lo que mantiene la cabecera en 64px. */
.cabecera__logo img { height: 44px; width: auto; }

.cabecera__accion { justify-self: end; }

.menu {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu a {
    font-size: .8125rem;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    padding-block: .2rem;
}

.menu a:hover,
.menu a[aria-current='page'] { color: var(--oro); border-bottom-color: currentColor; }

/* Desplegable de menús. Ocupa todo el alto de la cabecera (se come su
   relleno de 10px) para que la lista cuelgue justo de su borde y el ratón no
   pierda el :hover al bajar hasta ella. */
.cabecera__menu { align-self: stretch; }
.menu { height: 100%; }
/* Sin esto, la línea de cada <li> se mide con el cuerpo de 22px y los
   enlaces quedan unos píxeles más bajos que el botón del desplegable. */
.menu > li { display: flex; }

.desplegable {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    margin-block: -10px;
}

.desplegable__boton {
    display: flex;
    align-items: center;
    gap: .45rem;
    font: inherit;
    font-size: .8125rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    padding: .2rem 0;
    cursor: pointer;
}

/* Flecha hacia abajo; se da la vuelta al abrir. */
.desplegable__boton::after {
    content: '';
    width: .4em;
    height: .4em;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-.15em) rotate(45deg);
    transition: transform .2s ease;
}

.desplegable__boton:hover,
.desplegable__boton[data-actual],
.desplegable:hover .desplegable__boton { color: var(--oro); }
.desplegable__boton[data-actual] { border-bottom-color: currentColor; }

.desplegable__lista {
    position: absolute;
    top: 100%;
    left: -1.25rem;
    display: none;
    min-width: 14rem;
    list-style: none;
    margin: 0;
    padding: .5rem 0 .9rem;
    background: var(--negro);
    border-top: 1px solid var(--oro);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .3);
}

.desplegable:hover .desplegable__lista,
.desplegable__boton[aria-expanded='true'] + .desplegable__lista { display: block; }

.desplegable:hover .desplegable__boton::after,
.desplegable__boton[aria-expanded='true']::after { transform: translateY(.1em) rotate(-135deg); }

.desplegable__lista a {
    display: inline-block;
    margin: .55rem 1.25rem 0;
}

.hamburguesa {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
}

.hamburguesa span:not(.oculto-visual) {
    display: block;
    width: 26px;
    height: 1px;
    margin: 6px 0;
    background: currentColor;
}

.hamburguesa:hover { color: var(--oro); }

/* Panel lateral: solo en móvil, donde el menú horizontal no cabe. */
.panel {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(85vw, 475px);
    max-width: 100%;
    background: var(--nieve);
    color: var(--tinta);
    padding: 3.5rem 2rem 2rem;
    z-index: 60;
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .3s ease, visibility .3s ease;
}

/* visibility lo saca del orden de tabulación y del árbol de accesibilidad
   mientras está cerrado; solo con transform seguiría siendo navegable. */
.panel[data-abierto] { transform: translateX(0); visibility: visible; }

.panel__cerrar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: 0;
    font: inherit;
    font-size: var(--t-boton);
    color: var(--tinta);
    cursor: pointer;
    padding: .5rem;
}

.panel ul { list-style: none; margin: 0 0 2rem; padding: 0; }
.panel li { border-bottom: 1px solid var(--linea); }

.panel li a {
    display: block;
    padding: .9rem 0;
    font-size: var(--t-boton);
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
}

/* Los menús, abiertos y sangrados bajo su título. */
.panel__titulo {
    display: block;
    padding: .9rem 0 .2rem;
    font-size: var(--t-boton);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.panel .panel__grupo ul { margin: 0 0 .5rem; }
.panel .panel__grupo li { border-bottom: 0; }
.panel .panel__grupo a { padding: .55rem 0 .55rem 1rem; font-weight: 400; }

.velo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 50;
}

/* Nueve entradas en una línea: por debajo de 1400px se aprietan un poco para
   seguir cabiendo. */
@media (max-width: 1399.98px) {
    .menu { gap: .9rem; }
    .menu a, .desplegable__boton { font-size: .75rem; }
}

/* Por debajo de 1280px el menú ya no cabe en una línea: manda el panel lateral. */
@media (max-width: 1279.98px) {
    .cabecera__interior { gap: 1rem; }
    .cabecera__menu { display: none; }
    .hamburguesa { display: block; }
    .cabecera__logo { justify-self: start; }
}

@media (min-width: 1280px) {
    .panel, .velo { display: none; }
}

/* En pantallas estrechas el botón no cabe junto al logo y la hamburguesa. */
@media (max-width: 560px) {
    :root { --alto-cabecera: 58px; }
    .cabecera__interior { grid-template-columns: auto 1fr; }
    .cabecera__accion { display: none; }
    .cabecera__logo img { height: 38px; }
}

/* ----------------------------------------------------------------- botones */

.boton {
    display: inline-block;
    font-family: var(--sans);
    font-size: var(--t-boton);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1em 2em;
    border: 2px solid currentColor;
    border-radius: 1px;
    background: transparent;
    color: var(--tinta);
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.boton:hover { background: var(--tinta); color: #fff; }

.boton--solido { background: var(--tinta); color: #fff; }
.boton--solido:hover { background: transparent; color: var(--tinta); }

.boton--claro { color: #fff; }
.boton--claro:hover { background: #fff; color: var(--tinta); }

.boton--solido-claro { background: #fff; color: var(--tinta); border-color: #fff; }
.boton--solido-claro:hover { background: transparent; color: #fff; }

.boton--cabecera { font-weight: 500; padding: .5em 1.5em; }

.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.75rem;
}

.acciones--centro { justify-content: center; }

/* -------------------------------------------------------------------- hero */

/* Hero apilado: el vídeo va arriba a sangre y el titular debajo sobre negro.
   El vídeo trae el logo del restaurante incrustado, así que no admite nada
   encima: ni texto ni velo. En escritorio conserva el alto que tenía el hero
   anterior y pierde un poco por arriba y por abajo; el cartel y el logo del
   final siguen entrando enteros. */
.hero {
    background: var(--negro);
    color: #fff;
    text-align: center;
}

.hero__video {
    position: relative;
    min-height: 75vh;
}

.hero__video video,
.hero__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lo que se mueve solo más de cinco segundos tiene que poder pararse
   (WCAG 2.2.2): el vídeo de la portada. Sin JavaScript el botón no haría
   nada, así que nace oculto. */
.pausa {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgb(10 10 10 / .6);
    border: 1px solid rgb(255 255 255 / .7);
    color: #fff;
    cursor: pointer;
}

.pausa:hover { color: var(--oro); }
.pausa:focus-visible { outline-color: var(--oro); }

/* Dos barras: pausar. */
.pausa::before {
    content: '';
    box-sizing: border-box;
    width: 12px;
    height: 14px;
    border-left: 4px solid;
    border-right: 4px solid;
}

/* Triángulo: reproducir. El margen lo lleva a su centro óptico. */
.pausa[data-pausado]::before {
    width: 0;
    height: 0;
    margin-left: 3px;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent currentColor;
}

.hero__pausa { position: absolute; right: 1rem; bottom: 1rem; }

.hero a:hover,
.banner a:hover { color: var(--oro); }

.hero__contenido {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4% 12.5%;
}

.hero h1 {
    font-size: var(--t-interior);
    font-weight: 400;
    line-height: 1;
    color: #fff;
    margin: 0;
}

.hero__lema {
    margin: .9rem 0 0;
    font-size: clamp(1.125rem, .95rem + .6vw, 1.5rem);
    font-weight: 300;
    color: rgb(255 255 255 / .85);
}

/* En escritorio, el titular a la izquierda y los botones a la derecha, en una
   franja bajo el vídeo: así «Reservar mesa» entra en el primer pantallazo sin
   recortar más el vídeo (análisis del 9/10). */
@media (min-width: 1024px) {
    .hero__contenido {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: 'titulo acciones' 'lema acciones';
        align-items: center;
        column-gap: 3rem;
        padding: 1.75rem var(--lado);
        text-align: left;
    }

    .hero h1 { grid-area: titulo; font-size: clamp(2.25rem, 1rem + 1.6vw, 3rem); }
    .hero__lema { grid-area: lema; margin-top: .4rem; }
    .hero .acciones { grid-area: acciones; margin-top: 0; }
    .hero .boton { font-size: clamp(1.125rem, .8rem + .5vw, 1.375rem); }
}

/* Con sitio, el titular en una sola línea. */
@media (min-width: 1200px) {
    .hero h1 br { display: none; }
}

/* En pantallas bajas (portátiles de 768 o 720 px), un poco menos de vídeo. */
@media (min-width: 1024px) and (max-height: 820px) {
    .hero__video { min-height: 66vh; }
}

.hero .boton {
    font-size: var(--t-boton-hero);
    font-weight: 500;
    padding: .5em 1.5em;
}

/* En el móvil de pie, el vídeo vertical (13/10), con su proporción y sin
   pasar de la pantalla: el titular asoma en el primer pantallazo. */
@media (max-width: 900px) and (orientation: portrait) {
    .hero__video {
        /* Con el ancho fijo: si no, Chrome pasa el tope de alto al ancho
           por la proporción y deja una franja a la derecha. */
        width: 100%;
        min-height: 0;
        aspect-ratio: 9 / 16;
        max-height: max(18rem, calc(100svh - var(--alto-cabecera) - 11rem));
    }
}

/* Tumbado, el horizontal entero, sin recorte. */
@media (max-width: 900px) and (orientation: landscape) {
    .hero__video {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 900px) {

    .hero__pausa { right: .5rem; bottom: .5rem; }

    .hero__contenido { padding: 14% 8%; }
}

/* ------------------------------------------------------- banner de página */

.banner {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 560px;
    text-align: center;
    color: #fff;
    isolation: isolate;
}

.banner__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: -1;
}

.banner h1 {
    font-size: var(--t-interior);
    font-style: italic;
    color: #fff;
}

.banner .antetitulo { color: rgba(255, 255, 255, .85); margin-bottom: .5rem; }
.banner p { color: rgba(255, 255, 255, .85); margin-top: 1rem; }

@media (max-width: 767px) {
    .banner { min-height: 400px; }
}

/* ---------------------------------------------------------- bloque partido */

.bloque {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--blanco);
}

.bloque--medio { min-height: 50vh; }
.bloque--nieve { background: var(--nieve); }

.bloque__foto {
    position: relative;
    min-height: 300px;
}

.bloque__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bloque__texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--hueso);
    padding: 12.5%;
}

/* Alterna el lado de la foto sin tocar el orden del HTML, que siempre lee
   texto → foto. La foto es el segundo hijo, así que para pasarla a la
   izquierda hay que adelantarla, no retrasarla. */
.bloque--invertido .bloque__foto { order: -1; }

.bloque__texto .titular { font-size: var(--t-bloque); }
.bloque--medio .bloque__texto .titular { font-size: var(--t-interior); }
.bloque__texto p { max-width: 34ch; }

@media (max-width: 900px) {
    .bloque,
    .bloque--medio {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    /* Al apilar, la foto siempre va arriba. */
    .bloque__foto { order: -1; min-height: 58vw; }
    .bloque--invertido .bloque__foto { order: -1; }
    .bloque__texto { padding: 16% 8%; }
}

/* ------------------------------------------------------ sección de entrada */

.intro {
    padding-block: 100px 36px;
    text-align: center;
}

.intro h2 {
    font-size: var(--t-medio);
    font-weight: 400;
    margin-bottom: 20px;
}

.intro p { max-width: 46rem; margin-inline: auto; }

@media (max-width: 1024px) { .intro { padding-block: 60px 36px; } }
@media (max-width: 767px) { .intro { padding-block: 60px 36px; } .intro h2 { line-height: 1; } }

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

/* Medidas tomadas de la maqueta del desarrollador, dibujada a 1906px. */

.franja-titulo {
    font-family: var(--sans);
    font-size: clamp(1.25rem, .55rem + 1.45vw, 2.125rem);   /* 20 → 34 px */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    margin: 0;
}

.pastilla {
    display: inline-block;
    font-family: var(--sans);
    font-size: clamp(1.25rem, .7rem + 1.5vw, 2.375rem);      /* 20 → 38 px */
    font-weight: 400;
    line-height: 1.3;
    text-transform: uppercase;
    text-decoration: none;
    padding: .05em .6em;
    border-radius: 999px;
    background: #fff;
    color: var(--tinta);
    transition: background-color .3s ease;
}

.pastilla:hover { background: var(--oro); color: var(--tinta); }

/* Plato con foto: carrusel de destacados y menú del día. */
.tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f7f7f7;
    text-align: center;
}

/* El fondo es lo que se ve mientras la foto carga: claro, para que no parezca
   una foto que falta (análisis del 9/10). */
.tarjeta__foto {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #e9e4dc;
}

.tarjeta__foto--hueco { display: grid; place-items: center; }
.tarjeta__foto--hueco img { width: 40%; opacity: .6; }

.tarjeta__texto { flex: 1; padding: 1.6rem 1rem 1.5rem; }

.tarjeta__nombre {
    font-family: var(--serif);
    font-size: clamp(1rem, .8rem + .45vw, 1.375rem);         /* 16 → 22 px */
    font-weight: 400;
    line-height: 1.1;
    color: var(--tinta);
    margin: 0;
}

.tarjeta__nombre a { color: inherit; text-decoration: none; }

/* Toda la tarjeta es el enlace, sin anidar nada dentro del <a>. */
.tarjeta__nombre a::after { content: ''; position: absolute; inset: 0; }
.tarjeta--enlace:hover .tarjeta__nombre a { text-decoration: underline; text-underline-offset: .15em; }
.tarjeta--enlace:focus-within { outline: 3px solid var(--oro); outline-offset: -3px; }
.tarjeta__nombre a:focus-visible { outline: none; }

.tarjeta__descripcion {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: .5rem 0 0;
    font-size: .9375rem;
    line-height: 1.3;
    color: var(--texto-suave);
}

.tarjeta__detalle {
    margin: .35rem 0 0;
    font-size: clamp(.9375rem, .85rem + .2vw, 1.125rem);     /* 15 → 18 px */
    font-weight: 300;
    color: var(--texto);
}

/* Platos más demandados: cinco fichas grandes a sangre que no caben enteras,
   para que se vea que hay más. Se mueven a mano (arrastrando, deslizando o con
   las flechas) y nunca solas. */
.destacados {
    background: var(--tinta);
    padding: clamp(2.5rem, 3vw, 3.5rem) 0 1.4rem;
}

.destacados .franja-titulo { margin: 0 var(--lado) clamp(2rem, 3.2vw, 3.75rem); }

.destacados__ventana {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
}

.destacados__ventana::-webkit-scrollbar { display: none; }
.destacados__ventana:focus-visible { outline-color: var(--oro); outline-offset: -3px; }

/* Mientras se arrastra, sin imán: si no, cada movimiento salta de ficha. */
.destacados__ventana[data-arrastrando] {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.destacados__lista {
    display: flex;
    gap: 3px;
    width: max-content;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.destacados__lista li { scroll-snap-align: center; }

.destacados .tarjeta {
    /* Las cinco caben enteras en un escritorio: el nombre y el precio no
       dependen de deslizar. En pantallas menores, se deslizan. */
    width: clamp(16rem, 18.5vw, 30rem);
    border-radius: 20px;
    overflow: hidden;
}

/* Vistas: foto a la derecha y, a la izquierda, el texto en una tarjeta clara
   que flota sobre el negro. */
.vistas {
    display: grid;
    grid-template-columns: 35.2fr 64.8fr;
    min-height: clamp(32rem, 45.5vw, 56rem);
    background: var(--tinta);
}

.vistas__texto {
    align-self: start;
    margin: 6.7vw 0 3rem 2.5vw;
    padding: clamp(2.5rem, 4.25vw, 5rem) clamp(1.5rem, 2.6vw, 3.25rem);
    background: var(--hueso);
}

.vistas__texto .titular { font-size: var(--t-bloque); }
.vistas__texto p { max-width: 34ch; }

.vistas__foto { position: relative; }

.vistas__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Banner de la carta: la imagen trae ya los platos a los lados. */
.descubre { position: relative; background: var(--tinta); }

.descubre__fondo {
    width: 100%;
    min-height: 13.75rem;
    object-fit: cover;
}

.descubre__contenido {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2.3vw, 2.75rem);
    padding: 1rem var(--lado);
}

.descubre .franja-titulo { max-width: 24em; }

.descubre__pastillas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ¿Dónde comer en Alcalá del Júcar?: el texto y, al lado, los datos. */
.donde {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

.donde__titulo { font-size: var(--t-medio); }
.donde__pregunta { margin: 1.75rem 0 .5rem; font-size: 1rem; font-weight: 600; text-transform: uppercase; color: var(--texto-suave); }

.donde__ocasiones {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.donde__datos { margin-top: 0; }

@media (max-width: 900px) {
    .donde { grid-template-columns: 1fr; }
}

/* Menú del día: el de hoy, con los primeros y los segundos en fichas como las
   de los platos más demandados, una fila por paso. Si no caben, la fila se
   desliza. */
.menu-portada {
    background: var(--tinta);
    color: var(--blanco);
    text-align: center;
    padding: clamp(2.5rem, 3vw, 3.5rem) 0 clamp(2.5rem, 3.5vw, 4rem);
}

.menu-portada .franja-titulo { margin: 0 var(--lado); }

.menu-portada__dia {
    margin: .5rem var(--lado) 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--oro);
}

.menu-portada__nota {
    margin: 1rem var(--lado) 0;
    font-size: 1.0625rem;
    color: rgb(255 255 255 / .8);
}

.menu-portada__paso {
    margin: clamp(2rem, 3vw, 2.75rem) var(--lado) 1rem;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    color: var(--oro);
}

.menu-portada__platos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(11rem, 16vw, 15rem);
    gap: 1rem;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--lado);
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.menu-portada__platos::-webkit-scrollbar { display: none; }
.menu-portada__platos:focus-visible { outline: 3px solid var(--oro); outline-offset: 4px; }
.galeria:focus-visible { outline: 3px solid var(--oro); outline-offset: -3px; }

.menu-portada .tarjeta { border-radius: 16px; overflow: hidden; }
.menu-portada .tarjeta__texto { padding: 1rem .75rem; }
.menu-portada .tarjeta__nombre { font-size: clamp(.9375rem, .75rem + .35vw, 1.1875rem); }   /* 15 → 19 px */
.menu-portada .tarjeta__detalle { margin-top: .2rem; font-size: clamp(.875rem, .8rem + .2vw, 1.0625rem); }

.menu-portada__ver { margin-top: clamp(2rem, 3vw, 2.75rem); }

/* Galería a sangre: cinco fotos del local. */
.galeria {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: var(--tinta);
}

.galeria img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

@media (max-width: 900px) {
    .vistas { grid-template-columns: 1fr; min-height: 0; }
    .vistas__foto { order: -1; aspect-ratio: 16 / 10; }
    .vistas__texto { margin: 0; padding: 12% 8%; }

    .menu-portada__platos { grid-auto-columns: 62vw; scroll-snap-type: x mandatory; }
    .menu-portada__platos li { scroll-snap-align: center; }

    .galeria {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 70vw;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .galeria img { scroll-snap-align: start; }
}

/* ------------------------------------------------------------------ avisos */

.aviso {
    border: 1px solid var(--linea);
    border-left: 2px solid var(--tinta);
    padding: 1.1rem 1.4rem;
    margin-bottom: 2.5rem;
    font-size: 1rem;
}

.aviso p { margin: 0; }

/* El caso grave (no hay datos) no puede verse igual que el informativo. */
.aviso--error {
    border-left-color: #a11;
    background: #fdf6f6;
}

/* ------------------------------------------------- barra de secciones y busca */

/* Segunda barra de la carta, las bebidas y los vinos: pegada bajo la cabecera,
   en una sola fila que se desliza. Las flechas solo salen cuando no cabe. */
.secciones {
    position: sticky;
    top: var(--alto-cabecera);
    z-index: 10;
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
}

/* El relleno alinea los atajos con la caja; los márgenes automáticos los
   centran cuando caben y se anulan solos cuando no. */
.secciones__ventana {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 1.05rem max(var(--lado), (100% - var(--caja)) / 2);
}

.secciones__ventana::-webkit-scrollbar { display: none; }
.secciones__ventana > :first-child { margin-left: auto; }
.secciones__ventana > :last-child { margin-right: auto; }

.secciones__flecha {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 4.5rem;
    padding: 0;
    border: 0;
    color: var(--tinta);
    cursor: pointer;
}

/* El degradado avisa de que la fila sigue por ese lado. */
.secciones__flecha--atras { left: 0; justify-items: start; padding-left: .75rem; background: linear-gradient(to right, var(--blanco) 55%, rgba(255, 255, 255, 0)); }
.secciones__flecha--adelante { right: 0; justify-items: end; padding-right: .75rem; background: linear-gradient(to left, var(--blanco) 55%, rgba(255, 255, 255, 0)); }

.secciones__flecha svg {
    box-sizing: content-box;
    padding: .45rem;
    border: 1px solid var(--linea);
    border-radius: 50%;
    background: var(--blanco);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.secciones__flecha:hover svg { color: var(--blanco); background: var(--tinta); border-color: var(--tinta); }

.chip {
    flex: 0 0 auto;
    font-size: .8125rem;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--texto-suave);
    white-space: nowrap;
    padding-block: .2rem;
    border-bottom: 1px solid transparent;
}

.chip:hover { color: var(--oro-tinta); border-bottom-color: currentColor; }
.chip[aria-current] { color: var(--tinta); border-bottom-color: var(--oro-tinta); }

/* Solo se ve en los vinos, que no tienen barra. */
.carta__titulo {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-medio);
    line-height: 1.1;
    text-align: center;
    margin-bottom: 1.5rem;
}

.buscador input {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--tinta);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tinta);
    padding: .8rem .2rem;
}

.buscador input::placeholder { color: var(--texto-suave); }
.buscador input:focus { outline: 0; border-bottom-color: var(--oro-tinta); }

.buscador__vacio {
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--texto-suave);
    padding: 3rem 0;
}

/* ------------------------------------------------------------------ platos */

.categoria { margin-top: clamp(3rem, 6vw, 5rem); }

.categoria__titulo {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: .9rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--tinta);
}

.categoria__titulo h2,
.categoria__titulo h3 {
    font-family: var(--serif);
    font-style: italic;
    font-size: 2.25rem;
}

.categoria__cuenta {
    margin-left: auto;
    font-size: .875rem;
    font-weight: 500;
    color: var(--texto-suave);
}

.plato {
    display: grid;
    gap: .35rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--linea);
}

.plato__linea { display: flex; align-items: baseline; gap: .6rem; }

.plato__nombre {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--tinta);
    margin: 0;
}

.plato__puntos {
    flex: 1 1 auto;
    min-width: 1.5rem;
    border-bottom: 1px dotted var(--linea);
    transform: translateY(-.3rem);
}

.plato__precio {
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--tinta);
    white-space: nowrap;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.plato__precio small {
    display: block;
    font-family: var(--sans);
    font-size: .75rem;
    text-transform: uppercase;
    color: var(--texto-suave);
    text-align: right;
}

.plato__descripcion {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--texto-suave);
    max-width: 42rem;
}

.plato__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }

.etiqueta {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--texto-suave);
    border: 1px solid var(--linea);
    padding: .15rem .6rem;
}

/* ------------------------------------------------------------------ fichas */

/* Como en la carta anterior: en las categorías con fotos, cada plato es una
   ficha con la foto grande encima. Las fotos del cliente son cuadradas, así
   que van enteras. */
.fichas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem 2rem;
    padding-top: 1.5rem;
}

.ficha {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}

.ficha__foto,
.ficha__hueco {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: .5rem;
}

.ficha__foto { object-fit: cover; background: var(--hueso); }

/* Ficha con vídeo: el botón de pausa, en su esquina. */
.ficha__video { position: relative; width: 100%; }
/* A las <img> ya les quita la altura del atributo la regla general; al
   <video>, no, y sin esto mide 600 px de alto y deja de ser cuadrado. */
.ficha__video .ficha__foto { display: block; height: auto; }
.ficha__pausa { position: absolute; right: .75rem; bottom: 1.25rem; }

/* Plato sin foto: negro con el logo, como la cabecera. */
.ficha__hueco {
    display: grid;
    place-items: center;
    background: var(--negro);
}

.ficha__hueco img { width: 40%; opacity: .6; }

/* Como en la carta anterior: el nombre en negrita y en mayúsculas. */
.ficha__nombre {
    font-family: var(--sans);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--tinta);
    margin: 0;
}

.ficha__descripcion {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--texto-suave);
}

/* Al pie de la ficha, para que los precios de una fila queden alineados
   aunque las descripciones midan distinto. */
.ficha__precio {
    margin: auto 0 0;
    padding-top: .25rem;
    font-family: var(--serif);
    font-size: 1.625rem;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.ficha__precio small {
    margin-left: .5rem;
    font-family: var(--sans);
    font-size: .75rem;
    text-transform: uppercase;
    color: var(--texto-suave);
}

@media (max-width: 1024px) {
    .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .fichas { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ------------------------------------------------------------------- vinos */

/* Tantas columnas como quepan sin que la ficha baje de 330 px: menos, y las
   tres columnas de datos ya no caben. */
.fichas--vinos {
    container: vinos / inline-size;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap: 2.5rem 2rem;
}

/* La ficha de la maqueta de Alonso: la foto del vino con su plato, vertical,
   y debajo los datos sobre papel crema. Los precios, al pie, quedan
   alineados en toda la fila aunque las catas midan distinto. */
.vino {
    display: flex;
    flex-direction: column;
    background: var(--crema);
}

/* Una sola ficha por fila en una tableta: en vertical, la foto ocuparía
   toda la pantalla. Se pone al lado. */
@container vinos (min-width: 540px) and (max-width: 699px) {
    .vino { flex-direction: row; align-items: flex-start; }
    .vino > .vino__foto,
    .vino > .vino__video { width: 42%; flex: none; }
}

.vino__foto {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background: var(--blanco);
}

.vino__video { position: relative; }
.vino__pausa { position: absolute; right: .75rem; bottom: .75rem; }

.vino__ficha {
    container: ficha / inline-size;
    flex: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

.vino__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.vino__tipo {
    margin: 0;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.marca { display: inline-flex; gap: 3px; flex: none; }
.marca i { width: 9px; height: 9px; }
.marca i:nth-child(1) { background: var(--etiqueta-rojo); }
.marca i:nth-child(2) { background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
.marca i:nth-child(3) { background: var(--etiqueta-amarillo); }
.marca i:nth-child(4) { background: var(--etiqueta-azul); }

.vino__nombre {
    margin: .6rem 0 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
    line-height: 1.05;
    color: var(--tinta);
}

.vino__cosecha {
    margin: .2rem 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.375rem;
    color: var(--granate);
}

.vino__premio {
    margin: .7rem 0 0;
    padding-left: .7rem;
    border-left: 2px solid var(--oro);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--oro-tinta);
}

.vino__datos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min-content, 1fr);
    margin: 1.1rem 0 0;
    padding-block: .9rem;
    border-block: 1px solid var(--linea);
}

.vino__datos div + div { padding-left: .7rem; margin-left: .7rem; border-left: 1px solid var(--linea); }

.vino__datos dt,
.vino__notas dt,
.vino__precios dt {
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

/* El valor no se parte («14,5 % | vol»); la nota de debajo, sí. */
.vino__datos dd {
    margin: .3rem 0 0;
    font-size: .9375rem;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--tinta);
}

.vino__datos small {
    display: block;
    margin-top: .2rem;
    font-size: .8125rem;
    white-space: normal;
    color: var(--texto-suave);
}

/* En un móvil estrecho las tres columnas no caben: un dato por fila. */
@container ficha (max-width: 289px) {
    .vino__datos { grid-auto-flow: row; padding-block: .35rem; }

    .vino__datos div {
        display: grid;
        grid-template-columns: 6.5rem 1fr;
        align-items: baseline;
        padding-block: .45rem;
    }

    .vino__datos div + div { padding-left: 0; margin-left: 0; border-left: 0; border-top: 1px solid var(--linea); }
    .vino__datos dd { margin: 0; }
}

.vino__notas { margin: 1.1rem 0 0; }
.vino__notas dt { color: var(--granate); }
.vino__notas dt + dd { margin: .3rem 0 0; }
.vino__notas dd + dt { margin-top: 1rem; }

.vino__notas dd {
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--texto);
}

.vino__pie {
    margin-top: auto;
    padding-top: 1.4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.vino__alergenos { list-style: none; margin: 0; padding: 0; }

.vino__alergenos li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: var(--texto-suave);
}

/* Del mismo tamaño que los de la carta (Alonso, 13/10). */
.vino__alergenos img { height: 68px; width: auto; mix-blend-mode: multiply; }

.vino__precios { display: flex; margin: 0 0 0 auto; }
.vino__precios div { text-align: center; }
.vino__precios div + div { margin-left: 1.1rem; padding-left: 1.1rem; border-left: 1px solid var(--linea); }

.vino__precios dd {
    margin: .15rem 0 0;
    font-family: var(--serif);
    font-size: 1.75rem;
    line-height: 1;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.vino__botella dd { color: var(--granate); }


/* Los filtros de los vinos, en lugar de la barra y el buscador. La opción
   elegida, rellena: tiene que verse bien cuál está marcada. Las que no
   dejarían ningún vino, apagadas. */
.filtros {
    display: grid;
    gap: .75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--linea);
}

.filtros__grupo {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    align-items: baseline;
}

/* Si no caben en una línea, la segunda empieza bajo el primer botón. */
.filtros__opciones { display: flex; flex-wrap: wrap; gap: .5rem; }

.filtros__etiqueta {
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.filtro {
    font: inherit;
    font-size: .8125rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--texto);
    background: var(--blanco);
    border: 1px solid var(--linea);
    padding: .5rem .85rem;
    cursor: pointer;
}

.filtro:hover:not(:disabled) { border-color: var(--tinta); }
.filtro[aria-pressed="true"] { color: var(--blanco); background: var(--tinta); border-color: var(--tinta); }
.filtro:disabled { opacity: .35; cursor: default; }

.filtros__cuenta {
    margin: 0;
    font-size: .8125rem;
    color: var(--texto-suave);
}

/* ------------------------------------------------------ visita a la bodega */

.experiencias__titulo {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-medio);
    line-height: 1.1;
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.entradas {
    container: entradas / inline-size;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
    gap: 2rem;
}

/* Las entradas que diseñó Alonso: el cuerpo con lo que incluye y el talón,
   del color de la entrada, con el precio. Entre los dos, el troquel: una
   línea de puntos y dos muescas del color de la página. */
.entrada {
    --color: var(--etiqueta-azul);
    --acento: var(--etiqueta-amarillo);
    display: grid;
    grid-template-columns: 1fr minmax(9.5rem, 32%);
    background: var(--crema);
}

.entrada--rojo { --color: var(--etiqueta-rojo); --acento: var(--blanco); }

.entrada__cuerpo {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 6px solid var(--color);
}

.entrada__bodega {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.entrada__nombre {
    margin: .7rem 0 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.875rem, 1.5rem + 1vw, 2.375rem);
    line-height: 1.05;
    color: var(--tinta);
}

.entrada__resumen { margin: .6rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--texto); }

.entrada__incluye {
    margin: 1rem 0 0;
    padding: .9rem 0 0;
    border-top: 1px solid var(--linea);
    list-style: none;
    display: grid;
    gap: .35rem;
    font-size: .9375rem;
}

/* Un cuadradito del color de la entrada en lugar de la viñeta. */
.entrada__incluye li { display: flex; align-items: baseline; gap: .6rem; }
.entrada__incluye li::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--color); transform: translateY(-.1em); }

.entrada__ventaja {
    margin: 1rem 0 0;
    padding-left: .7rem;
    border-left: 2px solid var(--oro);
    font-size: .875rem;
    font-weight: 500;
    color: var(--oro-tinta);
}

.entrada__talon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--blanco);
    background: var(--color);
    border-left: 2px dashed rgb(255 255 255 / .55);
}

.entrada__talon::before,
.entrada__talon::after {
    content: '';
    position: absolute;
    left: -13px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--blanco);
}

.entrada__talon::before { top: -12px; }
.entrada__talon::after { bottom: -12px; }

.entrada__talon p { margin: 0; }

.entrada__etiqueta {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--acento);
}

.entrada__precio {
    font-family: var(--serif);
    font-size: clamp(2.5rem, 2rem + 1.5vw, 3.25rem);
    line-height: 1;
}

.entrada__tachado { font-size: .9375rem; opacity: .8; }
.entrada__nota { font-size: .8125rem; line-height: 1.3; max-width: 11rem; }

.entrada__boton {
    margin-top: .8rem;
    padding: .65rem 1.2rem;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tinta);
    background: var(--acento);
    border: 2px solid var(--acento);
    transition: background-color .3s ease, color .3s ease;
}

.entrada__boton:hover { background: transparent; color: var(--blanco); }
.entrada__talon .entrada__boton:focus-visible { outline-color: var(--blanco); }

/* Si la entrada se queda estrecha, el talón baja y el troquel se pone en
   horizontal. */
@container entradas (max-width: 520px) {
    .entrada { grid-template-columns: 1fr; }

    .entrada__talon {
        border-left: 0;
        border-top: 2px dashed rgb(255 255 255 / .55);
    }

    .entrada__talon::before,
    .entrada__talon::after { top: -13px; bottom: auto; }

    .entrada__talon::before { left: -12px; }
    .entrada__talon::after { left: auto; right: -12px; }
}

.experiencias__condiciones {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1.5rem;
    font-size: .8125rem;
    color: var(--texto-suave);
}

/* El maridaje: los cinco vinos en fila, de menos a más, como en la mesa. */
.maridaje {
    padding-block: clamp(3.5rem, 7vw, 6rem);
    background: var(--crema);
}

.maridaje__titulo { font-size: var(--t-medio); }

.maridaje__intro {
    max-width: 38rem;
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--texto);
}

.maridaje__lista {
    counter-reset: vino;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
    list-style: none;
}

.maridaje__lista li {
    counter-increment: vino;
    display: grid;
    align-content: start;
    gap: .4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tinta);
}

.maridaje__lista li::before {
    content: counter(vino);
    font-family: var(--serif);
    font-style: italic;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--granate);
}

.maridaje__vino {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta);
}

.maridaje__bocado { font-size: 1rem; line-height: 1.45; color: var(--texto); }

@media (max-width: 900px) {
    .maridaje__lista { grid-template-columns: 1fr; gap: 0; }

    .maridaje__lista li {
        grid-template-columns: 2.75rem 1fr;
        column-gap: 1rem;
        padding-block: 1rem;
    }

    .maridaje__lista li::before { grid-row: span 2; font-size: 2rem; }
}

/* La reserva, en negro: es la parte que pide hacer algo. */
.reservar {
    padding-block: clamp(3.5rem, 7vw, 6rem);
    color: var(--blanco);
    background: var(--negro);
    scroll-margin-top: var(--alto-cabecera);
}

.reservar__interior {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

.reservar .antetitulo { color: var(--oro); }
.reservar .titular { font-size: var(--t-medio); color: var(--blanco); }

.pasos {
    counter-reset: paso;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
}

.pasos li {
    counter-increment: paso;
    display: grid;
    grid-template-columns: 2rem 1fr;
    font-size: 1.0625rem;
    line-height: 1.45;
    color: rgb(255 255 255 / .8);
}

.pasos li::before {
    content: counter(paso);
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--oro);
}

.pasos strong { font-weight: 600; color: var(--blanco); }

/* Los mismos pasos sobre fondo claro (la página de reservas). */
.pasos--claro li { color: var(--texto); }
.pasos--claro li::before { color: var(--oro-tinta); }
.pasos--claro strong { color: var(--tinta); }

.reservar__llamar { margin: 1.75rem 0 0; color: rgb(255 255 255 / .8); }
.reservar__llamar a { color: var(--blanco); font-weight: 600; }

.reserva {
    display: grid;
    gap: 1.25rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--texto);
    background: var(--crema);
}

.reserva__grupo { margin: 0; padding: 0; border: 0; min-width: 0; }

.reserva legend,
.campo label {
    display: block;
    margin-bottom: .45rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.reserva__experiencias { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .6rem; }
.reserva__horas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }

.reserva__fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1.25rem;
}

/* Cada opción es una tarjeta: el botón de radio va dentro, a la vista. */
.opcion {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .65rem;
    align-items: baseline;
    padding: .85rem 1rem;
    background: var(--blanco);
    border: 1px solid var(--linea);
    cursor: pointer;
}

.opcion--hora { padding: .6rem .7rem; }
.opcion:has(:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.opcion input { grid-row: span 2; accent-color: var(--tinta); }
.opcion__nombre { font-size: 1rem; font-weight: 600; color: var(--tinta); }
.opcion__precio { font-size: .8125rem; color: var(--texto-suave); }

.campo input {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--tinta);
    background: var(--blanco);
    border: 1px solid var(--linea);
    padding: .8rem .9rem;
}

.campo input:focus { outline: 2px solid var(--oro-tinta); outline-offset: 0; border-color: var(--tinta); }

.reserva__error {
    margin: 0;
    padding: .7rem .9rem;
    font-size: .9375rem;
    color: var(--granate);
    background: var(--blanco);
    border-left: 3px solid var(--granate);
}

.reserva__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linea);
}

.reserva__total { margin: 0; font-size: .875rem; color: var(--texto-suave); }
.reserva__total strong { margin-left: .4rem; font-family: var(--serif); font-size: 2rem; font-weight: 400; color: var(--tinta); }
.reserva__nota { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--texto-suave); }
.reserva__sin-js { margin: 0; }

@media (max-width: 900px) {
    .reservar__interior { grid-template-columns: 1fr; }
}

/* La bodega: la fachada y lo práctico. */
.bodega {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.bodega__foto { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.bodega .titular { font-size: var(--t-medio); }
.bodega__intro { margin: 0; font-size: 1.125rem; line-height: 1.5; color: var(--texto); }

.bodega__recorrido-titulo {
    margin: 1.5rem 0 .5rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.bodega__recorrido { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; font-size: 1.0625rem; color: var(--texto); }
.bodega__recorrido li { display: flex; align-items: baseline; gap: .6rem; }
.bodega__recorrido li::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--etiqueta-rojo); transform: translateY(-.1em); }

.bodega__datos { margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.bodega__datos div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linea); }
.bodega__datos dt { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
.bodega__datos dd { margin: 0; font-size: 1.0625rem; color: var(--tinta); overflow-wrap: anywhere; }
.bodega__datos a { color: inherit; }

@media (max-width: 900px) {
    /* minmax: con 1fr a secas, la dirección web larga ensanchaba la columna. */
    .bodega { grid-template-columns: minmax(0, 1fr); }
    .bodega__foto { max-width: 26rem; }
}

/* ------------------------------------------------------------------ huerta */

/* De la huerta al plato, en tres pasos con su número en un círculo, como la
   referencia de Alonso. */
.huerta-pasos {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    background: var(--huerta-claro);
}

.huerta-pasos__lista {
    counter-reset: paso;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.huerta-pasos__lista li {
    counter-increment: paso;
    display: grid;
    grid-template-columns: 3rem 1fr;
    column-gap: 1rem;
    align-items: start;
}

.huerta-pasos__lista li::before {
    content: counter(paso);
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-family: var(--serif);
    font-size: 1.375rem;
    color: var(--blanco);
    background: var(--huerta);
}

.huerta-pasos__titulo {
    margin: .2rem 0 .35rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.15;
    color: var(--tinta);
}

.huerta-pasos__lista p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--texto); }

@media (max-width: 800px) {
    .huerta-pasos__lista { grid-template-columns: 1fr; }
}

/* Lo que da la huerta: cada producto, una ficha cuadrada con la foto a
   sangre y el nombre encima, como «Naranjas ecológicas». Sin foto, el nombre
   sobre el color del producto. */
.productos__titulo { font-size: var(--t-medio); }

.productos__lista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
    padding: 0;
    list-style: none;
}

.producto {
    --fondo: var(--huerta);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 1 / 1;
    padding: 1rem 1.1rem;
    overflow: hidden;
    color: var(--blanco);
    background: var(--fondo);
}

.producto--rojo { --fondo: #b8322a; }
.producto--morado { --fondo: #4a2a4f; }
.producto--verde { --fondo: var(--huerta); }
.producto--crema { --fondo: #8a7a5a; }
.producto--ocre { --fondo: #9a6a2c; }

.producto__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Un velo abajo para que el nombre se lea sobre cualquier foto. */
.producto:not(.producto--sin-foto)::after {
    content: '';
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(to top, rgb(0 0 0 / .6), transparent);
}

.producto__etiqueta,
.producto__nombre,
.producto__temporada { position: relative; z-index: 1; }

.producto__temporada { font-size: .8125rem; font-weight: 400; color: rgb(255 255 255 / .9); }

.producto__etiqueta {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgb(255 255 255 / .85);
}

.producto__nombre {
    font-family: var(--serif);
    font-size: clamp(1.125rem, .9rem + 1.2vw, 2rem);
    line-height: 1.1;
}

@media (max-width: 900px) {
    .productos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Los platos de la carta con producto de la huerta. */
.huerta-platos {
    padding-block: clamp(3.5rem, 7vw, 6rem);
    background: var(--huerta-claro);
}

.huerta-platos__titulo { font-size: var(--t-medio); }

/* --------------------------------------------------------------- alérgenos */

.alergenos { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

/* En color, como en la carta anterior. Vienen con fondo blanco opaco: el
   multiply los funde con el papel. En la ficha van a un tamaño en el que se
   lee el nombre que llevan debajo. */
.alergenos img { height: 40px; width: auto; mix-blend-mode: multiply; }
.ficha .alergenos { gap: .6rem; margin-block: .35rem .15rem; }
.ficha .alergenos img { height: 68px; }

.alergenos__texto {
    font-size: .75rem;
    text-transform: uppercase;
    color: var(--texto-suave);
    border: 1px solid var(--linea);
    padding: .1rem .45rem;
}

.leyenda {
    margin-top: clamp(3.5rem, 7vw, 5.5rem);
    border-top: 1px solid var(--tinta);
    padding-top: 2.5rem;
}

.leyenda h2 { font-family: var(--serif); font-style: italic; font-size: 2.25rem; }
.leyenda > p { max-width: 46rem; color: var(--texto-suave); font-size: 1rem; }

.leyenda__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 1rem 1.5rem;
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
}

.leyenda__lista li { display: flex; align-items: center; gap: .7rem; font-size: 1rem; color: var(--texto-suave); }
.leyenda__lista img { height: 26px; width: auto; mix-blend-mode: multiply; }

/* ------------------------------------------------------------ menú del día */

/* Los siete días como pestañas: hoy, marcado; los demás, apagados hasta que
   la API dé el menú de cada día. */
.dias { margin-bottom: clamp(2rem, 4vw, 3rem); text-align: center; }

.dias__lista {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--linea);
}

.dia {
    flex: 1;
    margin-bottom: -1px;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.125rem, .9rem + .6vw, 1.5rem);
    border-bottom: 2px solid transparent;
}

/* Cada día es un enlace a su menú (13/10). Apagado pero legible (5,4:1); el
   elegido, en negro y subrayado; el de hoy lleva además su marca. */
.dia__enlace {
    display: block;
    position: relative;
    padding: .9rem 0;
    color: #6e6a63;
    text-decoration: none;
}

.dia__enlace:hover { color: var(--tinta); }
.dia__enlace:focus-visible { outline: 2px solid var(--oro-tinta); outline-offset: -2px; }
.dia--elegido { border-bottom-color: var(--oro-tinta); }
.dia--elegido .dia__enlace { color: var(--tinta); }

.dia__marca {
    position: absolute;
    left: 50%;
    bottom: .1rem;
    transform: translateX(-50%);
    font-family: var(--sans);
    font-style: normal;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--oro-tinta);
}

.dia__corto { display: none; }

.dias__nota { margin-top: 1rem; font-size: 1rem; color: var(--texto-suave); }

@media (max-width: 767px) {
    .dia__corto { display: inline; }
    .dia__largo {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.menu-dia__cabecera {
    text-align: center;
    border-block: 1px solid var(--linea);
    padding-block: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
}

.menu-dia__precio {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-medio);
    line-height: 1;
    color: var(--tinta);
    margin: 0;
}

.menu-dia__precio span {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: var(--t-boton);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-top: 1rem;
}

.menu-dia__info { max-width: 46rem; margin: 1.75rem auto 0; font-size: 1rem; color: var(--texto-suave); }
.menu-dia__nota { margin: 1.5rem 0 0; text-align: center; font-size: 1rem; color: var(--texto-suave); }

/* ------------------------------------------------------- menús para grupos */

/* Una tarjeta por menú para elegir; la elegida, rellena, como los filtros de
   los vinos. Son enlaces: cada menú tiene su dirección. */
.menus-grupo__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 1rem;
}

/* Seis menús especiales (13/10): en escritorio, dos filas de tres, sin
   ninguno suelto en la segunda. */
@media (min-width: 1024px) {
    .menus-grupo__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.menu-opcion {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 100%;
    padding: 1.25rem 1.25rem 1.1rem;
    color: var(--texto);
    text-decoration: none;
    background: var(--blanco);
    border: 1px solid var(--linea);
    transition: border-color .2s ease;
}

.menu-opcion:hover { border-color: var(--tinta); }
.menu-opcion[aria-current] { color: var(--blanco); background: var(--tinta); border-color: var(--tinta); }

.menu-opcion__nombre {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.75rem;
    line-height: 1.1;
}

.menu-opcion__resumen { font-size: .9375rem; line-height: 1.4; color: var(--texto-suave); }
.menu-opcion[aria-current] .menu-opcion__resumen { color: rgb(255 255 255 / .75); }

.menu-opcion__precio {
    margin-top: auto;
    padding-top: .5rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--oro-tinta);
}

.menu-opcion[aria-current] .menu-opcion__precio { color: var(--oro); }

.menu-grupo { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* Los pasos de un menú van más juntos que las secciones de la carta. */
.menu-grupo .categoria { margin-top: clamp(2rem, 4vw, 3rem); }

.menu-grupo__titulo {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-medio);
    line-height: 1.1;
    text-align: center;
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}

/* Varios precios (entre semana y fin de semana), uno junto a otro. */
.menu-grupo__precios {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem clamp(3rem, 8vw, 6rem);
}

.menu-dia__precio small { font-size: .5em; }

.menu-grupo__platos { list-style: none; margin: 0; padding: 0; }

.menu-grupo__platos li {
    padding: 1rem 0;
    font-family: var(--serif);
    font-size: 1.35rem;
    line-height: 1.35;
    color: var(--tinta);
    border-bottom: 1px solid var(--linea);
}

.menu-grupo__condiciones {
    display: grid;
    gap: .35rem;
    margin: 2rem 0 0;
    padding-left: 1.1rem;
    font-size: 1rem;
    color: var(--texto-suave);
}

.menu-grupo__reservar { margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center; scroll-margin-top: var(--alto-sticky); }
.menu-grupo__reservar > p { max-width: 36rem; margin: 0 auto; font-size: 1.0625rem; }
.reserva--grupo { max-width: 46rem; margin: 1.75rem auto 0; text-align: left; }
.menu-grupo__reservar > .menu-grupo__llamar { margin: 1.25rem auto 0; }
.menu-grupo__llamar a { color: var(--tinta); font-weight: 600; }

/* Las condiciones, en un recuadro: es lo que se acepta al reservar. */
.menu-grupo__condiciones-caja {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--hueso);
    border-left: 3px solid var(--oro-tinta);
}

.menu-grupo__condiciones-caja .menu-grupo__condiciones { margin-top: .5rem; }
.menu-grupo__condiciones-titulo { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Los grupos: varios menús en la misma página, cada uno en su bloque, y el
   menú a medida al final. */
.menu-grupo__menu { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--linea); scroll-margin-top: var(--alto-sticky); }
.menu-grupo__nombre {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.1;
    text-align: center;
    margin: 0 0 1.25rem;
}
.menu-grupo .categoria__titulo h4 { font-family: var(--serif); font-style: italic; font-size: 1.75rem; font-weight: 400; margin: 0; }
.menu-grupo__propuesta {
    max-width: 36rem;
    margin: -.5rem auto 1.5rem;
    padding: .5rem .9rem;
    font-size: .875rem;
    text-align: center;
    color: var(--texto-suave);
    background: var(--hueso);
    border-left: 3px solid var(--oro-tinta);
}
.menu-grupo__elegir { margin-top: 2rem; }
.menu-grupo__a-medida-texto { max-width: 40rem; margin: 0 auto; font-size: 1.0625rem; text-align: center; }
.menu-grupo__relacionado { text-align: center; margin: 2rem 0 0; }
.reserva--grupo select {
    width: 100%;
    font: inherit;
    padding: .7rem .8rem;
    color: var(--tinta);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 0;
}

/* Autobuses: la comida y el día completo, cada uno en su tarjeta. */
.menu-grupo__vias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.menu-via {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.5rem;
    border: 1px solid var(--linea);
}

.menu-via p { margin: 0; }
.menu-via__nombre { font-family: var(--serif); font-style: italic; font-size: 1.75rem; line-height: 1.1; }
.menu-via__precio { font-size: 1.5rem; font-weight: 600; }
.menu-via__precio span { font-size: .9375rem; font-weight: 300; color: var(--texto-suave); }
.menu-via__texto { font-size: 1rem; color: var(--texto-suave); }
.menu-via .boton { align-self: flex-start; margin-top: auto; }
.menu-grupo__carteles + .menu-grupo__vias { margin-top: clamp(2rem, 4vw, 3rem); }

/* Un menú que aún no tiene platos (Navidad, empresas). */
.menu-grupo__aviso { max-width: 40rem; margin: 1.5rem auto 0; text-align: center; font-size: 1.125rem; line-height: 1.5; }

.excursion { scroll-margin-top: var(--alto-cabecera); }

/* El día en autobús de los jubilados, en negro como la reserva de la bodega. */
.excursion {
    padding-block: clamp(3.5rem, 7vw, 6rem);
    color: var(--blanco);
    background: var(--negro);
}

.excursion .antetitulo { color: var(--oro); }
.excursion__titulo { font-size: var(--t-medio); color: var(--blanco); }
.excursion__intro { max-width: 40rem; margin: 0; font-size: 1.0625rem; color: rgb(255 255 255 / .8); }

.excursion__dia {
    counter-reset: parada;
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1.5rem 2rem;
}

.excursion__dia li {
    counter-increment: parada;
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    align-content: start;
    row-gap: .25rem;
    font-size: 1rem;
    line-height: 1.45;
    color: rgb(255 255 255 / .75);
}

.excursion__dia li::before {
    content: counter(parada);
    grid-row: span 2;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--oro);
}

.excursion__dia strong { font-weight: 600; color: var(--blanco); }
.excursion__dia span { grid-column: 2; }

.excursion__tabla { margin-top: clamp(2.5rem, 5vw, 3.5rem); overflow-x: auto; }
.excursion__tabla table { width: 100%; border-collapse: collapse; font-size: 1rem; }

.excursion__tabla caption {
    padding-bottom: 1rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.5rem;
    text-align: left;
    color: var(--blanco);
}

.excursion__tabla th,
.excursion__tabla td {
    padding: .8rem .75rem .8rem 0;
    text-align: left;
    border-bottom: 1px solid rgb(255 255 255 / .18);
}

.excursion__tabla thead th {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: bottom;
    color: rgb(255 255 255 / .7);
}

.excursion__tabla tbody th { font-weight: 500; }
.excursion__tabla td { white-space: nowrap; font-variant-numeric: tabular-nums; }

.excursion__notas {
    margin: 1.25rem 0 0;
    padding-left: 1.1rem;
    font-size: .9375rem;
    color: rgb(255 255 255 / .7);
}

.excursion__contacto { margin-top: 2.5rem; }
.excursion__contacto p { max-width: 40rem; margin: 0; font-size: 1.0625rem; color: rgb(255 255 255 / .85); }

/* --------------------------------------------------------------- contenido */

.contenido { padding-block: clamp(3rem, 6vw, 5rem); }

/* Carta, bebidas y vinos: sin banner, la página empieza casi pegada a la
   barra y la primera sección va justo debajo del buscador. */
.contenido--carta { padding-top: clamp(1rem, 2vw, 1.5rem); }
.contenido--carta .categoria:first-of-type { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Al acabar la carta, la reserva. */
/* La entradilla de bebidas y vinos, bajo el título. */
.carta__intro {
    max-width: 46rem;
    margin: .75rem auto 0;
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--texto-suave);
}

.carta__reservar {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    text-align: center;
    border-top: 1px solid var(--linea);
}

.carta__reservar p { margin: 0; font-size: 1.0625rem; color: var(--texto-suave); }

.carta__reservar .carta__reservar-titulo {
    margin-bottom: .5rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 2.25rem;
    line-height: 1.15;
    color: var(--tinta);
}

.datos { list-style: none; margin: 1.75rem 0 0; padding: 0; }

.datos li {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 1rem;
    padding: .85rem 0;
    border-top: 1px solid var(--linea);
    font-size: 1rem;
}

.datos strong { font-weight: 600; text-transform: uppercase; color: var(--texto-suave); }

@media (max-width: 600px) {
    .datos li { grid-template-columns: 1fr; gap: .25rem; }
}

/* Cómo llegar: las distancias en coche, una por línea. */
.llegar__titulo { font-size: var(--t-medio); }

.llegar__distancias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .5rem 2rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 1.0625rem;
}

.llegar__distancias li { padding: .6rem 0; border-top: 1px solid var(--linea); }
.llegar__distancias strong { display: block; font-weight: 600; }
.llegar__dormir { margin: 2rem 0 0; font-size: 1.0625rem; }

/* ------------------------------------------------------- páginas legales */

/* Aviso legal, privacidad y cookies: texto corrido en una columna legible. */
.legal { max-width: 46rem; }
.legal .titular { font-size: var(--t-medio); margin-top: .25rem; }

.legal h2 {
    margin: 2.5rem 0 .75rem;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 1.2;
    color: var(--tinta);
}

.legal p,
.legal li { font-size: 1.0625rem; line-height: 1.6; color: var(--texto); }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .5rem; }
.legal a { color: var(--oro-tinta); }

.legal__datos { margin: 0 0 1rem; border-top: 1px solid var(--linea); }

.legal__datos div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--linea);
}

.legal__datos dt { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.legal__datos dd { margin: 0; font-size: 1.0625rem; }

.legal__tabla { margin: 0 0 1rem; overflow-x: auto; }
.legal__tabla table { width: 100%; border-collapse: collapse; font-size: 1rem; }

.legal__tabla th,
.legal__tabla td { padding: .7rem .75rem .7rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }

.legal__tabla thead th { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.legal__tabla td:last-child { white-space: nowrap; }

.legal .legal__actualizado { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); font-size: 1rem; color: var(--texto-suave); }

@media (max-width: 767px) {
    .legal__datos div { grid-template-columns: 1fr; gap: .15rem; }
}

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

.pie {
    position: relative;
    isolation: isolate;
    background: var(--negro);
    color: #fff;
    padding: 180px 0 0;
    overflow: hidden;
}

.pie__fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.pie::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .8);
    z-index: -1;
}

.pie__rejilla {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding-bottom: 80px;
}

.pie__rejilla > * + * { padding-left: 60px; }

.pie__logo img { width: 100%; max-width: 240px; margin-bottom: 1.25rem; }

.pie h2 {
    font-family: var(--sans);
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1rem;
}

.pie p, .pie li { font-size: 1.125rem; line-height: 1.2; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { padding: .3rem 0; }
/* Los botones llevan sus propios colores: con `.pie a` a secas, «Hacer
   reserva» salía en blanco sobre blanco. */
.pie a:not(.boton) { color: #fff; text-decoration: none; }
.pie a:not(.boton):hover { color: var(--oro); }

.pie__botones { display: grid; gap: .75rem; }
.pie__botones .boton { text-align: center; }

.pie__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .13);
    padding-block: 50px;
}

.pie__barra p { font-size: .9375rem; font-weight: 300; margin: 0; }

.pie__menu { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.pie__menu a { font-size: .875rem; font-weight: 400; text-transform: uppercase; }

/* El titular y, a su lado, las páginas legales. */
.pie__legal { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.pie__legal ul { display: flex; flex-wrap: wrap; gap: .5rem 1rem; list-style: none; margin: 0; padding: 0; }
.pie__legal a { font-size: .875rem; font-weight: 300; }

@media (max-width: 1024px) {
    .pie { padding-top: 150px; }
    .pie__rejilla { grid-template-columns: 1fr 1fr; }
    .pie__rejilla > * + * { padding-left: 30px; }
    .pie__rejilla > *:nth-child(n+3) { padding-top: 60px; }
    .pie__rejilla > *:nth-child(odd) { padding-left: 0; }
    .pie__barra { flex-direction: column-reverse; text-align: center; }
    .pie__menu,
    .pie__legal,
    .pie__legal ul { justify-content: center; }
}

@media (max-width: 767px) {
    .pie { padding-top: 90px; }
    .pie__rejilla { grid-template-columns: 1fr; }
    .pie__rejilla > * + * { padding-left: 0; padding-top: 60px; }
    /* Hueco para el WhatsApp flotante (54 px a 16 px de la barra), que si no
       tapa la última línea de enlaces al llegar al final. */
    .pie__barra { padding-bottom: 90px; }
}

/* ------------------------------------------------- preguntas frecuentes */

/* Pregunta y respuesta siempre a la vista, una debajo de otra. */
.preguntas { max-width: 52rem; }

.pregunta { padding: 1.75rem 0; border-top: 1px solid var(--linea); }
.pregunta:first-child { border-top: 0; padding-top: 0; }

.pregunta__titulo {
    font-family: var(--serif);
    font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem);
    font-weight: 400;
    line-height: 1.15;
    margin: 0;
}

.pregunta__respuesta { margin: .75rem 0 0; font-size: 1.0625rem; line-height: 1.5; }

.pregunta__enlace {
    display: inline-block;
    margin-top: .75rem;
    font-size: .9375rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--oro-tinta);
}

/* ------------------------------------------------------ para cada ocasión */

.ocasiones__indice {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
    padding-block: 1.75rem;
}

.ocasion { padding-block: clamp(3rem, 6vw, 5rem); scroll-margin-top: var(--alto-cabecera); }
.ocasion:nth-of-type(even) { background: var(--hueso); }
.ocasion__interior { max-width: 52rem; }
.ocasion__titulo { font-size: var(--t-medio); }
.ocasion .entradilla { max-width: none; }

.ocasion__puntos {
    display: grid;
    gap: .5rem;
    margin: 1.25rem 0 0;
    padding-left: 1.1rem;
    font-size: 1.0625rem;
    line-height: 1.45;
}

.ocasion__puntos a { color: var(--tinta); font-weight: 600; }

/* El teléfono, a la vista y no solo en un botón: es lo que se busca en el pie. */
.pie .pie__telefono { font-size: 1.5rem; font-weight: 400; margin: 0 0 1rem; }

/* ------------------------------------------------------- barra del móvil */

/* Llamar y reservar siempre a mano en el móvil, donde la cabecera no tiene
   sitio para el botón. Queda por debajo del panel y su velo. */
.barra-movil { display: none; }

@media (max-width: 767px) {
    .barra-movil {
        position: fixed;
        inset: auto 0 0;
        z-index: 45;
        display: flex;
        gap: 1px;
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--negro);
        box-shadow: 0 -2px 12px rgb(0 0 0 / .25);
    }

    .barra-movil__boton {
        flex: 1;
        display: grid;
        place-items: center;
        min-height: 52px;
        font-family: var(--sans);
        font-size: 1rem;
        font-weight: 600;
        text-transform: uppercase;
        text-decoration: none;
        color: #fff;
        background: var(--negro);
    }

    .barra-movil__boton--principal { background: #fff; color: var(--tinta); }
    .barra-movil__boton:focus-visible { outline: 3px solid var(--oro); outline-offset: -3px; }

    /* Que la barra no tape el final del pie. */
    body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
}

/* -------------------------------------------------- WhatsApp flotante */

/* Siempre a mano, abajo a la derecha; en el móvil, encima de la barra de
   llamar y reservar. El verde es algo más oscuro que el de la marca
   (#25d366, 2:1): así el logo blanco y el botón se distinguen (3,5:1). Por
   debajo del panel y su velo. */
.whatsapp-flotante {
    position: fixed;
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 44;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    color: #fff;
    background: #189d4b;
    box-shadow: 0 4px 14px rgb(0 0 0 / .3);
    transition: transform .2s ease, background-color .2s ease;
}

.whatsapp-flotante svg { fill: currentColor; }
.whatsapp-flotante:hover { background: #128a40; transform: scale(1.06); }
/* El dorado oscuro: el contorno cae sobre el fondo de la página, casi siempre
   claro (5,7:1 sobre blanco y 3,5:1 sobre el pie negro). */
.whatsapp-flotante:focus-visible { outline: 3px solid var(--oro-tinta); outline-offset: 3px; }

@media (max-width: 767px) {
    .whatsapp-flotante {
        right: 16px;
        bottom: calc(52px + 16px + env(safe-area-inset-bottom));
        width: 54px;
        height: 54px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-flotante { transition: none; }
}

/* --------------------------------------------------------------- impresión */

@media print {
    .cabecera, .secciones, .buscador, .pie, .hero, .banner, .acciones, .boton, .panel, .velo, .pausa, .barra-movil, .whatsapp-flotante { display: none !important; }
    body { font-size: 10.5pt; color: #000; }
    .categoria { break-inside: avoid; margin-top: 1.5rem; }
    .plato { break-inside: avoid; padding: .3rem 0; }
    /* En papel, la carta en fichas sin fotos: si no, serían decenas de páginas. */
    .ficha, .vino { break-inside: avoid; }
    .ficha__foto, .ficha__hueco, .vino__foto, .vino__video { display: none; }
    .alergenos img { mix-blend-mode: normal; }
}

/* A qué hora (Nochevieja). */
.menu-grupo__horario { max-width: 40rem; margin: 1rem auto 0; text-align: center; font-size: 1.0625rem; line-height: 1.5; }

/* Los carteles de los menús: lo primero que se ve (Alonso, 19/10). El
   ancla de las tarjetas (#menu) deja el título bajo la cabecera fija. */
.menu-grupo { scroll-margin-top: var(--alto-cabecera); }
.menu-grupo__carteles { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.menu-grupo__cartel { display: block; width: 100%; max-width: 40rem; height: auto; margin: 1.5rem auto 0; box-shadow: 0 .5rem 2rem rgb(0 0 0 / .18); }
.menu-grupo__carteles .menu-grupo__cartel { margin-top: 0; }
.menu-grupo__carteles .menu-grupo__cartel[width="1600"] { max-width: 60rem; }

/* El menú en texto, plegado bajo el cartel. */
.menu-grupo__texto { margin-top: 1.5rem; }
.menu-grupo__texto > summary { cursor: pointer; width: fit-content; margin: 0 auto; padding: .5rem 0; font-weight: 600; color: var(--tinta); text-decoration: underline; text-underline-offset: .2em; }
.menu-grupo__texto[open] > summary { margin-bottom: 1rem; }

/* Las tarjetas después del menú, en la página de cada uno. */
.menus-grupo--despues { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--linea, rgb(0 0 0 / .12)); }
.menus-grupo__titulo { margin: 0 0 1.5rem; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.25rem); text-align: center; }
.menu-grupo__cartel-enlace { display: block; }