/* Descarga las dos fuentes de Google: DM Sans para el texto y Playfair Display para los títulos. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

/* Define los colores comunes con variables --. var(--gold), por ejemplo, reutiliza el dorado sin repetir su código. */
:root {
    --bg: #0c0c0b;
    --surface: #151513;
    --gold: #d1a35f;
    --cream: #f3ead9;
    --muted: #b5b0a7;
    --line: #383126;
    color-scheme: dark;
    font-family: 'DM Sans', sans-serif;
    color: var(--cream);
    background: var(--bg)
}

/* Aplica a todos los elementos: el ancho indicado incluye el relleno y el borde, lo que facilita calcular tamaños. */
* {
    box-sizing: border-box
}

/* El desplazamiento entre secciones es suave y deja espacio arriba para que la cabecera no tape el destino. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px
}

/* Quita el margen que el navegador añade alrededor de la página por defecto. */
body {
    margin: 0;
    font-size: 18px;
    line-height: 1.6
}

/* Los enlaces usan el color del texto que los rodea y no llevan el subrayado predeterminado. */
a {
    color: inherit;
    text-decoration: none
}

/* Los botones y campos usan la misma fuente que el resto de la página. */
button, input {
    font: inherit
}

/* Evita el destello de color que algunos navegadores móviles añaden al tocar estos elementos. */
button, a, input {
    -webkit-tap-highlight-color: transparent
}

/* El cursor con forma de mano indica que el botón se puede pulsar. */
button {
    cursor: pointer
}

/* Un botón desactivado se ve más tenue y muestra un cursor que indica que no se puede usar. */
button:disabled {
    opacity: .45;
    cursor: not-allowed
}

/* Dibuja un contorno dorado al navegar con teclado para señalar el elemento que recibirá la siguiente acción. */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 5px
}

/* La imagen llena su espacio; cover la recorta si hace falta para no deformarla. */
img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* Elimina el margen superior automático de títulos y párrafos para controlar mejor la separación. */
h1, h2, h3, p {
    margin-top: 0
}

/* Usa un color secundario y más espacio entre líneas para facilitar la lectura de los párrafos. */
p {
    color: var(--muted);
    line-height: 1.8
}

/* Los títulos grandes usan la fuente de marca. Georgia y serif sirven de alternativa si no se descarga. */
h1, h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -.04em
}

/* clamp hace crecer el título según el ancho de pantalla sin bajar del mínimo ni superar el máximo. */
h1 {
    font-size: clamp(3.2rem, 6.5vw, 6.8rem);
    margin-bottom: 28px
}

/* Los títulos de sección también tienen un tamaño adaptable y separación debajo. */
h2 {
    font-size: clamp(2.1rem, 3.4vw, 3.8rem);
    margin-bottom: 26px
}

/* Los títulos pequeños usan un grosor intermedio para no competir con los grandes. */
h3 {
    font-weight: 500
}

/* Resalta en dorado las palabras destacadas dentro de un título o texto. */
em {
    color: var(--gold);
    font-weight: 500
}

/* Deja espacio sobre cada sección al llegar mediante un enlace con # para que la cabecera no la oculte. */
section {
    scroll-margin-top: 100px
}

/* Da aire a las secciones: separación vertical y márgenes interiores laterales que crecen con la pantalla. */
.section {
    padding: 90px max(6.5vw, 24px)
}

/* Estilo del pequeño texto introductorio que aparece encima de los títulos. */
.eyebrow {
    display: block;
    font-size: 14px;
    letter-spacing: .27em;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 24px
}

/* Distribuye marca, menú y carrito en una fila. sticky mantiene la cabecera arriba al bajar por la página; z-index la sitúa sobre el contenido. */
.header {
    height: 100px;
    padding: 0 6.5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-bottom: 1px solid var(--line);
    background: #0c0c0bf5;
    position: sticky;
    top: 0;
    z-index: 20
}

/* Coloca el nombre y el subtítulo de la marca uno debajo del otro, centrados y sin encoger. */
.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    position: relative;
    flex-shrink: 0
}

/* Tamaño y grosor del nombre principal de la marca. */
.brand strong {
    font-size: 38px;
    letter-spacing: .035em;
    font-weight: 700
}

/* Subtítulo pequeño y dorado con separación entre letras. */
.brand small {
    font-size: 12px;
    letter-spacing: .3em;
    color: var(--gold);
    padding-left: 5px;
    margin-top: 8px
}

/* Coloca la estrella decorativa sobre la marca usando su contenedor como referencia. */
.star {
    position: absolute;
    top: -17px;
    left: 49%;
    font-size: 19px;
    color: var(--gold)
}

/* Muestra los enlaces de navegación en una fila con separación entre ellos. */
.header nav {
    display: flex;
    gap: 24px;
    font-size: 16px
}

/* Reserva espacio para el borde de los enlaces, evitando saltos de tamaño al pasar el ratón. */
.header nav a {
    padding: 12px 0;
    border-bottom: 1px solid transparent
}

/* Al pasar el ratón, el enlace y su borde inferior se vuelven dorados. */
.header nav a:hover {
    color: var(--gold);
    border-bottom-color: var(--gold)
}

/* Enmarca el acceso al carrito para distinguirlo de los enlaces de navegación. */
.basket-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
    white-space: nowrap;
    text-align: center;
    border: 1px solid #706044;
    padding: 11px 16px;
    font-size: 16px
}

/* Dibuja el círculo dorado del contador y centra dentro el número de unidades. */
.basket-link .basket-count {
    display: inline-grid;
    place-items: center;
    background: var(--gold);
    color: #111;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    flex-shrink: 0
}

/* Oculta el botón del menú en pantallas grandes; las reglas de móvil lo muestran más abajo. */
.menu-toggle {
    display: none
}

/* Reserva altura para la presentación principal y centra su contenido verticalmente. */
.hero {
    min-height: 635px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center
}

/* Llena la presentación con una foto y capas oscuras, de modo que el texto se lea sobre ella. */
.hero-image {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0b0b0b 4%, #0b0b0bf0 24%, #0b0b0b69 60%, #0b0b0b11), linear-gradient(0deg, #0b0b0b99, transparent 30%), url('https://images.unsplash.com/photo-1555939594-58d7cb561ad1?auto=format&fit=crop&w=2000&q=90') center 52%/cover
}

/* Da márgenes al texto de portada y lo coloca por encima del fondo. */
.hero-content {
    position: relative;
    padding: 78px 6.5%;
    width: 100%
}

/* Limita el ancho del título para controlar sus saltos de línea. */
.hero h1 {
    max-width: 760px
}

/* Limita el ancho del texto introductorio para que las líneas no sean demasiado largas. */
.hero p {
    font-size: 18px;
    max-width: 440px
}

/* Agrupa los enlaces principales en una fila con espacio entre ellos. */
.hero-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 32px
}

/* Aspecto común de los botones principales: fondo dorado, texto oscuro y altura cómoda para pulsarlos. */
.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    background: var(--gold);
    color: #14110b;
    border: 1px solid var(--gold);
    padding: 17px 25px;
    font-size: 16px;
    font-weight: 700;
    min-height: 48px;
    transition: background .2s
}

/* Aclara el fondo al pasar el ratón para indicar que el botón responde. */
.button:hover {
    background: #e7bf80
}

/* Reduce el relleno para los botones pequeños de las tarjetas de producto. */
.button.small {
    padding: 10px 17px;
    gap: 8px
}

/* Da un aspecto discreto a los enlaces secundarios, con un borde debajo del texto. */
.text-link {
    font-size: 16px;
    border-bottom: 1px solid #6d604c;
    padding-bottom: 8px;
    display: inline-block;
    line-height: 1.6
}

/* El enlace secundario se vuelve dorado al pasar el ratón. */
.text-link:hover {
    color: var(--gold)
}

/* Distribuye la estrella y el mensaje breve situado debajo de las acciones de portada. */
.hero-note {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    letter-spacing: .18em;
    color: var(--muted);
    margin-top: 45px
}

/* Hace más grande y dorada la estrella del mensaje de portada. */
.hero-note span {
    font-size: 23px;
    color: var(--gold)
}

/* Coloca un texto decorativo vertical en la esquina de la imagen principal. */
.hero-caption {
    position: absolute;
    right: 30px;
    bottom: 35px;
    writing-mode: vertical-rl;
    font-size: 14px;
    letter-spacing: .23em
}

/* Crea la franja de palabras decorativas en una sola línea y oculta lo que no cabe. */
.ticker {
    padding: 22px 0;
    display: flex;
    gap: 45px;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    font-size: 16px;
    letter-spacing: .24em;
    border-block: 1px solid var(--line);
    color: #c3b697;
    background: #11110f
}

/* Colorea de dorado las estrellas que separan las palabras de la franja. */
.ticker span {
    color: var(--gold)
}

/* Organiza la presentación del local en dos columnas: foto y texto. */
.about {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 9%;
    align-items: center
}

/* Reserva el tamaño de la foto y espacio para el marco y el sello. */
.about-photo {
    height: 390px;
    position: relative;
    padding: 0 25px 20px 0
}

/* Crea un marco decorativo con CSS detrás de la foto, sin añadir otra etiqueta HTML. */
.about-photo:after {
    content: '';
    position: absolute;
    inset: 25px 0 0 25px;
    border: 1px solid #665235;
    z-index: -1
}

/* Sitúa un pequeño sello dorado en la esquina inferior de la fotografía. */
.photo-seal {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--gold);
    color: #15120d;
    padding: 24px;
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: .17em
}

/* Ajusta tamaño y ancho del texto de presentación del local. */
.about p {
    font-size: 18px;
    max-width: 490px
}

/* Clase reutilizable para aplicar el color dorado a cualquier texto. */
.gold {
    color: var(--gold)
}

/* Distingue la zona de categorías con un fondo ligeramente diferente y bordes. */
.flavours {
    background: #121210;
    border-block: 1px solid #26231c
}

/* Coloca el título de categorías y sus controles uno al lado del otro. */
.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 35px
}

/* Quita la separación inferior del título porque el bloque ya controla el espacio. */
.section-heading h2 {
    margin-bottom: 0
}

/* Usa un texto auxiliar más pequeño junto a los controles del carrusel. */
.section-heading p {
    font-size: 16px
}

/* Agrupa las dos flechas y las alinea a la derecha. */
.carousel-controls {
    display: flex;
    gap: 10px;
    justify-content: flex-end
}

/* Da el mismo tamaño cuadrado y borde a las flechas del carrusel. */
.carousel-controls button {
    border: 1px solid #605039;
    background: transparent;
    color: var(--cream);
    height: 44px;
    width: 44px;
    font-size: 20px
}

/* Resalta la flecha con fondo dorado al pasar el ratón. */
.carousel-controls button:hover {
    background: var(--gold);
    color: #111
}

/* Coloca tres tarjetas visibles en una fila que se puede desplazar horizontalmente. scroll-snap ayuda a detenerse al inicio de una tarjeta. */
.carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 48px) / 3);
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) #28241f;
    padding-bottom: 18px
}

/* Reserva el tamaño de cada tarjeta y oculta los trozos de imagen que sobresalgan. */
.category-card {
    height: 355px;
    position: relative;
    scroll-snap-align: start;
    overflow: hidden;
    background: #2b251b
}

/* Añade una capa oscura sobre la foto para que el nombre de la categoría se lea bien. */
.category-card:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #000e, transparent 75%)
}

/* Prepara una transición suave cuando cambie el tamaño visual de la foto. */
.category-card img {
    transition: transform .4s
}

/* Amplía un poco la foto al pasar el ratón sobre la tarjeta. */
.category-card:hover img {
    transform: scale(1.04)
}

/* Sitúa el texto abajo y por encima de la capa oscura de la tarjeta. */
.category-card > div {
    position: absolute;
    bottom: 24px;
    left: 25px;
    right: 25px;
    z-index: 1
}

/* Da formato al precio o al mensaje breve que acompaña a la categoría. */
.category-card small {
    color: #efc88e;
    font-size: 14px;
    letter-spacing: .17em
}

/* Muestra el nombre de la categoría y la flecha separados dentro de la tarjeta. */
.category-card h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 31px;
    margin: 12px 0 0;
    display: flex;
    justify-content: space-between
}

/* Da a la flecha una fuente y un tamaño independientes del título. */
.category-card h3 span {
    font-family: Arial;
    font-size: 25px
}

/* Separa el texto decorativo y el enlace a toda la carta debajo de las tarjetas. */
.under-carousel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px
}

/* Hace discreto el texto auxiliar que aparece debajo del carrusel. */
.under-carousel > span {
    font-size: 14px;
    letter-spacing: .16em;
    color: var(--muted)
}

/* Crea el fondo de la promoción de menús y recorta la decoración que sobresale. */
.menu-banner {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 80% 60%, #3b2d182e, transparent 65%)
}

/* Limita el ancho del mensaje promocional y lo coloca por encima de la estrella. */
.menu-banner h2 {
    max-width: 780px;
    position: relative;
    z-index: 1
}

/* Dibuja una estrella grande y tenue. pointer-events evita que la decoración intercepte clics. */
.banner-star {
    font-size: 340px;
    position: absolute;
    right: 6%;
    top: 15px;
    color: #a57b3526;
    z-index: 0;
    pointer-events: none
}

/* Mantiene el enlace de la promoción por encima de su decoración. */
.menu-banner .button {
    position: relative;
    z-index: 1
}

/* Divide la sección de horarios en texto introductorio y lista de horas. */
.hours {
    border-block: 1px solid var(--line);
    display: grid;
    grid-template-columns:1.2fr 1fr;
    gap: 9%;
    background: var(--surface)
}

/* Adapta el tamaño del título de horarios al ancho disponible. */
.hours h2 {
    font-size: clamp(2rem, 3vw, 3rem)
}

/* Fija un tamaño de lectura para el texto que acompaña los horarios. */
.hours p {
    font-size: 18px
}

/* Elimina el margen de la lista de horarios y la centra verticalmente en su columna. */
.hours dl {
    margin: 0;
    align-self: center
}

/* Cada fila coloca los días a la izquierda y sus horas a la derecha, con una línea divisoria. */
.hours dl div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #4a3b27;
    padding: 24px 0;
    font-size: 18px
}

/* Resalta las horas en dorado y evita dividir una hora entre dos líneas. */
.hours dd {
    color: var(--gold);
    margin: 0;
    white-space: nowrap
}

/* Distribuye los elementos del pie y permite que pasen a otra línea si falta espacio. */
.footer {
    padding: 45px 6.5% 25px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 25px
}

/* Da al lema del pie un aspecto diferente con cursiva y color dorado. */
.footer p {
    font-family: Georgia, serif;
    font-style: italic;
    color: var(--gold);
    margin: 0
}

/* Ajusta el enlace de contacto sin cambiar el logotipo del pie. */
.footer > a:not(.brand) {
    font-size: 16px
}

/* El copyright ocupa una fila completa y conserva un tamaño cómodo de lectura. */
.footer > small {
    width: 100%;
    border-top: 1px solid var(--line);
    padding-top: 24px;
    margin-top: 15px;
    color: var(--muted);
    font-size: 18px
}

/* Sitúa el aviso de prueba a la derecha en pantallas grandes. */
.footer > small span {
    float: right
}

/* Da a las páginas interiores una altura mínima y espacio bajo la cabecera. */
.page {
    min-height: 65vh;
    padding-top: 65px
}

/* Adapta el título principal de las páginas de carta, carrito y pago. */
.page > h1 {
    font-size: clamp(3rem, 5vw, 5rem)
}

/* Agrupa los filtros de categoría y permite que formen varias filas si no caben. */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 35px 0 25px
}

/* Cada categoría se presenta como un enlace con borde y espacio para pulsarlo. */
.filters a {
    padding: 12px 18px;
    border: 1px solid var(--line);
    font-size: 16px
}

/* Resalta tanto la categoría seleccionada como aquella sobre la que está el ratón. */
.filters a:hover, .filters a.active {
    background: var(--gold);
    color: #111
}

/* Estilo discreto para notas y avisos secundarios. */
.muted {
    font-size: 16px;
    color: var(--muted)
}

/* Organiza los platos en tres columnas iguales; minmax evita que una tarjeta fuerce un ancho excesivo. */
.dish-grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 25px;
    margin-top: 25px
}

/* Da fondo y borde a cada producto y deja margen al navegar directamente a su id. */
.dish-card {
    background: var(--surface);
    border: 1px solid var(--line);
    scroll-margin-top: 120px
}

/* Reserva una altura común para las fotografías de productos. */
.dish-image {
    height: 225px;
    position: relative;
    background: #29251d
}

/* Superpone una etiqueta con la categoría en la esquina inferior de la foto. */
.dish-image span {
    position: absolute;
    bottom: 12px;
    left: 15px;
    background: #0b0b0be0;
    padding: 7px 12px;
    font-size: 14px;
    letter-spacing: .1em;
    color: var(--gold)
}

/* Añade espacio interior alrededor de los datos del plato. */
.dish-body {
    padding: 24px
}

/* Reserva altura para el nombre, ayudando a alinear tarjetas con títulos de distinta longitud. */
.dish-body h3 {
    font-family: Georgia, serif;
    font-size: 23px;
    line-height: 1.3;
    min-height: 60px
}

/* Reserva altura para las descripciones y mantiene un tamaño de texto cómodo. */
.dish-body p {
    font-size: 16px;
    min-height: 65px
}

/* Coloca el precio y el botón Añadir a ambos extremos de la misma fila. */
.dish-body form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 22px
}

/* Destaca el precio del producto en dorado. */
.dish-body form strong {
    color: var(--gold);
    font-weight: 500;
    font-size: 20px
}

/* Da un aspecto discreto al bloque desplegable de ingredientes y alérgenos. */
details {
    font-size: 15px;
    color: var(--muted)
}

/* La mano del cursor indica que se puede abrir el desplegable. */
summary {
    cursor: pointer
}

/* El aviso de alérgenos no necesita la altura mínima reservada para la descripción del plato. */
details p {
    margin: 12px 0;
    min-height: 0 !important
}

/* Enmarca los avisos de actualización del carrito, errores y estado del pago. */
.notice {
    background: #272218;
    border: 1px solid #6a5536;
    padding: 18px;
    margin: 20px 0;
    font-size: 16px;
    color: var(--cream);
    line-height: 1.6
}

/* Centra los mensajes del carrito vacío y del resultado del pago. */
.empty {
    text-align: center;
    padding-block: 90px
}

/* Hace grande la estrella decorativa de las pantallas de estado. */
.empty > .gold {
    font-size: 55px;
    display: block;
    margin-bottom: 25px
}

/* Limita y centra el ancho del mensaje para facilitar su lectura. */
.empty p {
    max-width: 600px;
    margin: 0 auto 30px
}

/* Separa el detalle del pedido y el resumen en dos columnas, dando más ancho al detalle. */
.checkout-grid {
    display: grid;
    grid-template-columns:minmax(0, 1.8fr) minmax(0, 1fr);
    gap: 55px;
    margin-top: 35px
}
.checkout-grid > section, .checkout-grid > .summary { min-width: 0; }

/* Dibuja el panel de resumen con borde y relleno; empieza en la parte superior de su columna. */
.summary {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 30px;
    align-self: start
}

/* Usa un título más pequeño dentro del panel de resumen. */
.summary h2 {
    font-size: 30px
}

/* Cada línea del resumen alinea la descripción y el importe y añade una separación inferior. */
.summary > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 0;
    border-bottom: 1px solid var(--line);
    font-size: 16px
}

/* Mantiene cada importe completo en una sola línea. */
.summary > div strong {
    white-space: nowrap
}

/* Aumenta el tamaño de la fila del total y deja espacio para la siguiente acción. */
.summary .total {
    font-size: 21px;
    margin-bottom: 25px
}

/* Destaca el total del pedido en dorado. */
.summary .total strong {
    color: var(--gold)
}

/* El botón del resumen ocupa todo el ancho disponible. */
.summary .button {
    width: 100%
}

/* El cálculo del envío se muestra junto al total, sin una tarjeta adicional. */
.checkout-shipping-status { font-size: 16px; line-height: 1.5; margin: 12px 0; overflow-wrap: anywhere; }
.checkout-shipping-error { color: #ffb5a7; }
.checkout-shipping-credits { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 16px 0 0; overflow-wrap: anywhere; }
.summary [hidden] { display: none !important; }
.checkout-field-error { color: #ffb5a7; font-size: 15px; line-height: 1.5; margin: -4px 0 8px; overflow-wrap: anywhere; }
.payment-form .checkout-field-invalid { border-color: #ffb5a7; box-shadow: 0 0 0 1px #ffb5a7; }
.checkout-errors { padding: 18px; border: 1px solid #ffb5a7; background: #281c19; margin: 20px 0; line-height: 1.6; }
.checkout-errors[hidden] { display: none; }
.checkout-errors h2 { font-size: 20px; margin: 0 0 10px; }
.checkout-errors ul { margin: 0; padding-left: 22px; }
.checkout-errors li { margin: 6px 0; font-size: 16px; overflow-wrap: anywhere; }
.checkout-errors a { color: #ffcfbf; text-decoration: underline; text-underline-offset: 3px; }
.checkout-shipping-line small { display: block; font-size: 14px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.checkout-shipping-line[hidden] { display: none; }
.order-shipping-breakdown { margin: 24px auto; width: min(100%, 480px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }
.order-shipping-breakdown div { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; text-align: left; }
.order-shipping-breakdown strong { white-space: nowrap; }
.order-shipping-breakdown small { color: var(--muted); display: block; font-size: 14px; }
.order-shipping-breakdown .total strong { color: var(--gold); }

/* Agrupa nombre, cantidad, subtotal y acción de eliminar; permite varias filas si falta espacio. */
.cart-row {
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center
}

/* El bloque del nombre aprovecha el espacio sobrante sin hacerse demasiado estrecho. */
.cart-row > div {
    flex: 1;
    min-width: 170px
}

/* Ajusta el nombre del producto dentro de la fila del carrito. */
.cart-row h3 {
    font-size: 18px;
    margin: 0 0 6px
}

/* Da al precio unitario un tamaño menor que al nombre del plato. */
.cart-row p {
    font-size: 16px;
    margin: 0
}

/* Coloca etiqueta, campo y botón del carrito uno debajo del otro. */
.cart-row form {
    display: flex;
    flex-direction: column;
    gap: 6px
}

/* Hace discreta la etiqueta Unidades del campo de cantidad. */
.cart-row label {
    font-size: 14px;
    color: var(--muted)
}

/* Los campos usan el tema oscuro y no pueden superar el ancho de su contenedor. */
input {
    background: #0c0c0b;
    border: 1px solid #615439;
    color: var(--cream);
    padding: 13px;
    min-width: 0;
    max-width: 100%;
    border-radius: 0
}

/* Da al campo de cantidad un ancho corto, suficiente para números de hasta dos cifras. */
.cart-row input[type=number] {
    width: 75px;
    padding: 8px
}

/* Actualizar y Eliminar se ven como acciones de texto, aunque siguen siendo botones de formulario. */
.text-button {
    border: 0;
    background: none;
    color: var(--gold);
    font-size: 15px;
    padding: 6px 0;
    text-align: left
}

/* Separa el enlace Seguir eligiendo de las filas de productos que aparecen antes. */
.cart-row ~ .text-link {
    margin-top: 30px
}

/* Los extras se eligen en el carrito con tarjetas compactas que se adaptan al ancho disponible. */
.cart-recommendations {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid var(--line)
}

.cart-recommendations h2 {
    font-size: 27px;
    line-height: 1.25;
    margin-bottom: 10px
}

.cart-recommendations .dish-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 16px;
    margin-top: 20px
}

.cart-recommendations .dish-card {
    display: flex;
    flex-direction: column
}

.cart-recommendations .dish-image {
    height: 160px;
    flex-shrink: 0
}

.cart-recommendations .dish-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.cart-recommendations .dish-body h3 {
    font-size: 21px;
    min-height: 0
}

.cart-recommendations .dish-body p {
    min-height: 0
}

.cart-recommendations .dish-body form {
    margin-top: auto;
    padding-top: 18px;
    flex-wrap: wrap
}

/* Organiza el formulario de correo en columna y limita su ancho para facilitar la lectura. */
.payment-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 520px;
    margin: 25px 0
}

/* Fija el tamaño de la etiqueta del correo electrónico. */
.payment-form label {
    font-size: 16px
}

/* Contenido editable: texto y fotografías mantienen el ancho de la web. */
.cms-socials, .cms-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.contact .cms-socials { justify-content: flex-end; }
.cms-content-block { padding-top: 45px; padding-bottom: 45px; overflow-wrap: anywhere; }
.cms-content-block img { display: block; max-width: 100%; max-height: 650px; width: auto; object-fit: contain; margin: 25px 0; border-radius: 10px; }
.cms-prose { white-space: pre-wrap; line-height: 1.85; max-width: 85ch; }
.cms-callout { background: var(--surface); border-left: 4px solid var(--gold); }
.cms-page > .page { padding-bottom: 20px; }
.cms-preview { background: var(--surface); color: var(--gold); padding-top: 20px; padding-bottom: 20px; }
.footer { flex-wrap: wrap; }
.header nav { flex-wrap: wrap; }
.brand > img { width: 110px; height: 60px; object-fit: contain; }
@media (max-width: 650px) { .contact .cms-socials { justify-content: flex-start; } }
.payment-form [hidden] { display: none !important; }

/* Las opciones de entrega usan el mismo tamaño y separación que los datos de contacto. */
.payment-form select,
.payment-form textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font: inherit;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--bg);
    color: var(--cream);
}

.payment-form [data-delivery-address]:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-form [data-delivery-address][hidden] {
    display: none;
}

/* Coloca los datos cortos de la dirección de dos en dos, con espacio para leerlos. */
.delivery-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.delivery-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.payment-form .delivery-field input {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
}

.payment-form [data-delivery-address] .muted {
    margin: 0;
    font-size: 16px;
}

/* Reduce el margen de los avisos dentro del formulario. */
.payment-form .notice {
    margin: 10px 0
}

/* Separa el botón de pago del contenido que tiene encima. */
.payment-form .button {
    margin-top: 10px
}

/* Mantiene fuera de la vista el enlace Saltar al contenido hasta que se usa el teclado. */
.skip {
    position: absolute;
    left: 15px;
    top: -100px;
    background: var(--gold);
    color: #111;
    padding: 15px
}

/* Al recibir foco, muestra el enlace por encima de la cabecera para poder pulsarlo. */
.skip:focus {
    top: 10px;
    z-index: 100
}

/* Solo en pantallas de 1600 píxeles o más: aumenta los márgenes laterales para mantener el contenido centrado. */
@media (min-width: 1600px) {
    .section {
        padding-inline: max(6.5vw, calc((100vw - 1400px) / 2))
    }

    .hero-content {
        padding-inline: max(6.5vw, calc((100vw - 1400px) / 2))
    }
}

/* Hasta 1000 píxeles: reduce espacios, muestra dos columnas de platos y dos tarjetas visibles del carrusel. */
@media (max-width: 1000px) {
    .header {
        padding-inline: 24px;
        gap: 15px
    }

    .header nav {
        gap: 20px
    }

    .hero {
        min-height: 580px
    }

    .about {
        gap: 40px
    }

    .dish-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .carousel {
        grid-auto-columns: calc((100% - 24px) / 2)
    }

    .checkout-grid {
        gap: 25px;
        grid-template-columns:1.4fr 1fr
    }

    .section {
        padding-block: 65px
    }

    .hours {
        gap: 30px
    }
}

/* Hasta 680 píxeles: adapta tamaños y espacios al móvil. Estas reglas sustituyen las anteriores para los mismos elementos. */
@media (max-width: 680px) {
    .header {
        height: 84px;
        padding: 0 12px;
        gap: 8px
    }

    .brand strong {
        font-size: 29px
    }

    .brand small {
        font-size: 11px
    }

    .star {
        font-size: 18px;
        top: -15px
    }

    .basket-link {
        gap: 5px;
        padding: 8px 10px;
        font-size: 14px;
        margin-left: auto
    }

    .basket-link .basket-count {
        width: 20px;
        height: 20px
    }

    .menu-toggle {
        display: block;
        background: none;
        border: 0;
        color: var(--cream);
        font-size: 14px;
        padding: 12px 8px;
        order: 3
    }

    .header nav {
        display: none;
        position: absolute;
        top: 84px;
        left: 0;
        right: 0;
        background: #11110f;
        padding: 20px 25px;
        border-bottom: 1px solid var(--line);
        flex-direction: column;
        gap: 5px
    }

    /* En móvil, app.js añade open para mostrar los enlaces que normalmente están ocultos. */
    .header nav.open {
        display: flex
    }

    .hero {
        min-height: 610px
    }

    .hero-content {
        padding: 70px 24px
    }

    .hero-image {
        background-position: 65% center
    }

    .hero h1 {
        font-size: 4.2rem
    }

    .hero p {
        font-size: 18px
    }

    .hero-actions {
        align-items: start;
        flex-direction: column;
        gap: 22px
    }

    .hero-caption {
        display: none
    }

    .hero-note {
        font-size: 13px;
        letter-spacing: .13em
    }

    .eyebrow {
        font-size: 14px;
        letter-spacing: .2em
    }

    .section {
        padding: 55px 24px
    }

    .about {
        grid-template-columns:1fr;
        gap: 45px
    }

    .about-photo {
        height: 300px
    }

    /* En móvil, order=-1 coloca el texto antes de la fotografía. */
    .about > div:last-child {
        order: -1
    }

    .section-heading {
        align-items: start;
        gap: 20px
    }

    .section-heading > div:last-child {
        max-width: 135px
    }

    .section-heading p {
        font-size: 15px
    }

    .section-heading h2 {
        font-size: 2.1rem
    }

    .carousel {
        grid-auto-columns: 85%;
        gap: 16px
    }

    .category-card {
        height: 330px
    }

    .under-carousel > span {
        font-size: 14px;
        max-width: 130px;
        line-height: 1.8
    }

    .under-carousel .text-link {
        font-size: 15px
    }

    .banner-star {
        font-size: 250px;
        right: -50px;
        top: 60px
    }

    .menu-banner h2 {
        font-size: 2.65rem
    }

    .hours {
        grid-template-columns:1fr
    }

    .hours dl div {
        font-size: 16px
    }

    .footer {
        padding: 35px 24px;
        gap: 25px
    }

    .footer p {
        font-size: 16px
    }

    .footer > a:not(.brand) {
        width: 100%
    }

    .footer > small span {
        float: none;
        display: block;
        margin-top: 10px
    }

    .dish-grid {
        grid-template-columns:1fr
    }

    .dish-image {
        height: 250px
    }

    .dish-body h3, .dish-body p {
        min-height: 0
    }

    .filters {
        gap: 7px
    }

    .filters a {
        padding: 10px 13px;
        font-size: 15px
    }

    .checkout-grid {
        grid-template-columns:1fr
    }

    /* En móviles cada dato de entrega ocupa una fila para escribir con comodidad. */
    .delivery-address-grid {
        grid-template-columns: 1fr;
    }

    .summary {
        padding: 24px
    }

    .page > p {
        font-size: 18px
    }

    .empty {
        padding-block: 70px
    }

    .cart-row {
        gap: 15px
    }

    .cart-row > div {
        min-width: 140px
    }

    .cart-row > strong {
        font-size: 18px
    }

    .ticker {
        font-size: 14px;
        gap: 25px
    }
}

/* Si el usuario pide menos movimiento, quita animaciones y desplazamientos suaves para respetar esa preferencia. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto
    }

    /* Quita las transiciones y animaciones también de las decoraciones creadas con before y after. */
    *, *:before, *:after {
        transition: none !important;
        animation: none !important
    }
}

/* Coloca el texto de contacto y el enlace a Instagram en una fila. */
.contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px
}

/* Reduce la separación debajo del título de contacto. */
.contact h2 {
    margin-bottom: 15px
}

/* Quita el margen final del párrafo de contacto. */
.contact p {
    margin-bottom: 0
}

/* Evita que el enlace a Instagram se estreche al compartir fila con el texto. */
.contact .button {
    flex-shrink: 0
}

/* Hasta 680 píxeles: adapta tamaños y espacios al móvil. Estas reglas sustituyen las anteriores para los mismos elementos. */
@media (max-width: 680px) {
    .contact {
        align-items: flex-start;
        flex-direction: column
    }

    .header nav {
        gap: 2px
    }
}
/* Estado de las lecturas automáticas compartidas por todas las pantallas. */
.app-live-status { position: fixed; right: 1rem; bottom: .6rem; z-index: 20; padding: .25rem .5rem; font-size: .875rem; line-height: 1.4; color: var(--cream, #f6eedf); background: var(--bg, #0b0b09); opacity: .78; pointer-events: none; }
.app-live-status.app-live-error { opacity: 1; color: var(--gold, #d0a45a); }