/* ============================================================
   ESTILOS DE PÁGINAS Y FLUJOS — Cabañas La J
   Depende de tema.css y estilos.css.
   Reúne páginas interiores, consulta y pedido de reservas.
   ============================================================ */

/* ============================================================
   18. PÁGINAS INTERIORES — paleta clara con ritmo (como el inicio)
   El inicio alterna oscuro/claro para dar aire y calidez. Aquí
   llevamos ese mismo pulso a las páginas internas, que antes eran
   negro plano: banner oscuro con textura → contenido sobre blanco
   cálido → bandas oscuras de acento → pie oscuro.
   Todo va limitado a .pagina-interior (no toca el inicio).
   ============================================================ */

/* ---------- 18.1 Banner con textura oscura (ya no negro plano) ---------- */
body.pagina-interior .pagina-banner {
    position: relative;
    overflow: hidden;
    padding: 168px 0 66px;
    background-color: var(--negro);
    background-image: url('../img/main-bg.webp');
    background-size: cover;
    background-position: center;
}

body.pagina-interior .pagina-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 74% at 50% 0%, rgba(var(--naranja-rgb), 0.22), transparent 64%),
        linear-gradient(180deg, rgba(5, 5, 5, 0.68) 0%, rgba(5, 5, 5, 0.84) 100%);
}

/* Firma naranja al pie del banner: cose el banner con el contenido claro */
body.pagina-interior .pagina-banner::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(82%, 1000px);
    height: 3px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(90deg, transparent 0%, var(--naranja) 50%, transparent 100%);
}

body.pagina-interior .pagina-banner .contenedor {
    position: relative;
    z-index: 1;
}

/* ---------- 18.2 Superficies de contenido: BLANCO puro ---------- */
/* Identidad de la marca = NEGRO + NARANJA + BLANCO. Las secciones van
   en blanco puro; las tarjetas se despegan por sombra, borde y
   la insignia naranja, NO por un fondo de otro color. */
body.pagina-interior .menu-completo,
body.pagina-interior .nosotros,
body.pagina-interior .seccion-pagina,
body.pagina-interior .galeria,
body.pagina-interior .ubicacion,
body.pagina-interior .reserva {
    background: var(--color-blanco);
    color: var(--texto-oscuro);
    color-scheme: light;
}

/* Párrafos secundarios sobre claro (antes gris claro, ilegible) */
body.pagina-interior .menu-completo .seccion-parrafo,
body.pagina-interior .nosotros .seccion-parrafo,
body.pagina-interior .seccion-pagina .seccion-parrafo,
body.pagina-interior .ubicacion .seccion-parrafo,
body.pagina-interior .reserva .seccion-parrafo {
    color: var(--texto-suave);
}

/* ---------- 18.3 Tarjetas: blancas y planas, como las del inicio ---------- */
/* Mismo lenguaje que .plato-card del home: blanco + borde fino, SIN
   sombra y SIN elevación al hover. Solo se marca el borde en naranja. */
body.pagina-interior .tarjeta-info,
body.pagina-interior .ubicacion-info {
    background: var(--color-blanco);
    border: 1px solid var(--color-borde-claro);
}

body.pagina-interior .tarjeta-info:hover {
    transform: none;
    border-color: var(--borde-naranja);
}

/* Tarjetas de servicios/contacto: más aire, jerarquía y un icono con foco */
body.pagina-interior .tarjeta-info {
    border-radius: 20px;
    padding: 40px 28px 34px;
}

body.pagina-interior .tarjeta-info-icono {
    width: 66px;
    height: 66px;
    background: var(--naranja);
    border: none;
    color: var(--color-blanco);
    margin-bottom: 20px;
}

body.pagina-interior .tarjeta-info h3 {
    color: var(--tinta);
    font-size: var(--texto-subtitulo);
    margin-bottom: 10px;
}

/* Textos secundarios legibles sobre claro */
body.pagina-interior .tarjeta-info p,
body.pagina-interior .tarjeta-plato-descripcion,
body.pagina-interior .ubicacion-lista span,
body.pagina-interior .nosotros-lista li {
    color: var(--texto-suave);
    line-height: 1.6;
}

/* ---------- 18.4 Menú: filtros, títulos y nota sobre claro ---------- */

body.pagina-interior .menu-filtro {
    color: var(--texto-oscuro);
    border-color: rgba(29, 37, 38, 0.18);
}

body.pagina-interior .menu-filtro:hover {
    color: var(--naranja);
    border-color: var(--borde-naranja);
}

body.pagina-interior .menu-filtro.activo {
    color: var(--blanco);
    border-color: transparent;
}

body.pagina-interior .menu-grupo-titulo {
    border-bottom-color: rgba(29, 37, 38, 0.12);
}

body.pagina-interior .menu-nota {
    color: #8b857c;
}

/* ---------- 18.5 Galería y mapa sobre claro ---------- */
body.pagina-interior .galeria-item {
    border-color: rgba(29, 37, 38, 0.10);
}

body.pagina-interior .galeria-item:hover {
    border-color: var(--borde-naranja);
}

body.pagina-interior .ubicacion-mapa {
    border-color: rgba(5, 5, 5, 0.08);
}

/* El mapa recupera su color normal (sin el filtro oscuro del tema negro) */
body.pagina-interior .ubicacion-mapa iframe {
    filter: none;
}

/* Íconos de la lista de ubicación: chip cálido sobre la tarjeta blanca */
body.pagina-interior .ubicacion-lista .icono {
    background: rgba(var(--naranja-rgb), 0.10);
}

/* ---------- 18.6 Nosotros: marco de foto claro ---------- */
body.pagina-interior .nosotros-imagen-2 {
    border-color: var(--blanco);
}

/* ---------- 18.7 Formulario de reserva claro (contacto) ---------- */
body.pagina-interior .reserva {
    position: relative;
    overflow: hidden;
}

body.pagina-interior .reserva-tarjeta {
    background: var(--color-blanco);
    border-color: var(--color-borde-claro);
    border-top-color: transparent;
}

body.pagina-interior .reserva-titulo {
    color: var(--tinta);
}

body.pagina-interior .reserva .campo label {
    color: #555e5b;
}

body.pagina-interior .reserva .campo label .icono {
    color: var(--naranja);
}

body.pagina-interior .reserva .campo input {
    background: var(--blanco);
    border-color: var(--color-borde-calido);
    color: var(--texto-oscuro);
}

body.pagina-interior .reserva .campo input::placeholder {
    color: #938A80;
}

body.pagina-interior .reserva .campo input:focus {
    border-color: var(--naranja);
}

body.pagina-interior .reserva-garantias {
    border-top-color: rgba(29, 37, 38, 0.12);
}

body.pagina-interior .reserva-garantias li {
    color: var(--texto-suave);
}

/* ---------- 18.8 CTA oscura dentro de sección clara: texto claro ---------- */
body.pagina-interior .menu-cta {
    color: var(--crema-suave);
}

body.pagina-interior .menu-cta .seccion-titulo {
    color: var(--blanco);
}

body.pagina-interior .menu-cta .seccion-parrafo {
    color: var(--gris);
}

/* ---------- 18.9 Ajustes responsive ---------- */
@media (max-width: 576px) {
    body.pagina-interior .pagina-banner {
        padding: 128px 0 52px;
    }

    body.pagina-interior .tarjeta-info {
        padding: 32px 22px 28px;
    }
}

/* ---------- 18.10 Menú: tarjetas IDÉNTICAS al inicio (.plato-card) ---------- */
/* Reutiliza .plato-card del inicio tal cual: foto + nombre subrayado en
   naranja, tarjeta blanca, SIN sombra, SIN animaciones, SIN precio ni
   descripción (igual que el home). Grilla unificada que se llena; el
   filtro por categoría oculta tarjetas. */
body.pagina-interior .menu-lista {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 24px;
}

/* Ocultar tarjetas que no son de la categoría filtrada */
body.pagina-interior .menu-lista .plato-card.oculto {
    display: none;
}

/* ---------- Precio en la esquina de la foto ---------- */
/* La imagen es el ancla; el precio va montado abajo a la derecha.
   Solo en el menú: el carrusel del inicio sigue sin precios. */
body.pagina-interior .menu-lista .plato-card-media {
    position: relative;
}

body.pagina-interior .menu-lista .plato-card-precio {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 7px 14px;
    border-radius: 10px;
    background: var(--naranja);
    color: var(--color-blanco);
    font-family: var(--fuente-titulos);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 576px) {
    body.pagina-interior .menu-lista .plato-card-precio {
        right: 6px;
        bottom: 6px;
        padding: 5px 11px;
        font-size: 0.9rem;
        border-radius: 8px;
    }
}

/* Botones sin "salto" al pasar el mouse (queda el cambio de color) */
body.pagina-interior .boton:hover,
body.pagina-interior .menu-filtro:hover {
    transform: none;
}

/* ---------- 18.11 Servicios: 3 fotos panorámicas del mismo tamaño ---------- */
/* Usa las fotos panorámicas optimizadas (hero3/4/5, 1916x821 = 2.33:1)
   en vez de las miniaturas de antes (voleibol era 672x349 a solo 31 KB).
   Las 3 van del MISMO tamaño, una debajo de otra y a todo el ancho de su
   columna, así se ven completas: se quitó el recorte en diagonal, el
   desfase de la 2ª y todas las animaciones. */
body.pagina-interior .experiencia-tarjeta {
    clip-path: none;
    border-radius: 16px;
    height: auto;
    aspect-ratio: 2 / 1;
}

body.pagina-interior .experiencia-tarjeta,
body.pagina-interior .experiencia-tarjeta:nth-child(2),
body.pagina-interior .experiencia-tarjeta:hover,
body.pagina-interior .experiencia-tarjeta:nth-child(2):hover {
    transform: none;
}

body.pagina-interior .experiencia-tarjeta img,
body.pagina-interior .experiencia-tarjeta:hover img {
    display: block;
    width: 100%;
    height: 100%;
    transform: none;
}

body.pagina-interior .experiencia-tarjeta figcaption {
    padding: 44px 0 16px;
}

/* Jerarquía tipográfica coherente para el bloque textual de Servicios. */
body.pagina-interior .experiencia-texto .kicker {
    margin-bottom: 12px;
    font-size: var(--texto-kicker);
    font-weight: 600;
}

body.pagina-interior .experiencia-texto .seccion-titulo {
    max-width: 19ch;
    font-size: var(--texto-titulo-seccion);
}

body.pagina-interior .experiencia-texto .seccion-parrafo {
    max-width: 46ch;
    color: rgba(var(--color-blanco-rgb), 0.78);
    font-size: var(--texto-cuerpo);
    line-height: var(--interlineado-cuerpo);
}

body.pagina-interior .experiencia-texto .experiencia-detalles {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 460px;
    margin-top: 26px;
}

body.pagina-interior .experiencia-texto .experiencia-detalles li {
    align-items: flex-start;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(var(--color-blanco-rgb), 0.1);
    color: var(--blanco);
    font-size: var(--texto-lista);
    line-height: 1.45;
}

body.pagina-interior .experiencia-texto .experiencia-detalles li:last-child {
    border-bottom: 0;
}

body.pagina-interior .experiencia-texto .experiencia-detalles .icono {
    margin-top: 3px;
}

.experiencia-detalle-texto {
    display: grid;
    gap: 2px;
}

.experiencia-detalle-texto strong {
    color: var(--blanco);
    font-weight: 600;
}

.experiencia-detalle-texto small {
    color: rgba(var(--color-blanco-rgb), 0.68);
    font-size: 0.95rem;
    line-height: 1.45;
}

@media (min-width: 769px) {
    body.pagina-interior .experiencia-tarjetas {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* 2.5:1, casi el 2.33:1 nativo de las fotos (recorte mínimo) */
    body.pagina-interior .experiencia-tarjeta {
        aspect-ratio: 5 / 2;
    }
}

/* ---------- 18.12 Galería: mosaico natural (sin recortar las fotos) ---------- */
/* Antes TODAS iban en cajas 4:3: las verticales (960x1280) y la panorámica
   (764x319) perdían ~44% de la imagen. Ahora cada foto conserva su
   proporción real en un mosaico por columnas, que además rellena parejo
   (sin la fila final a medias). Sin zoom ni elevación al pasar el mouse. */
body.pagina-interior .galeria-cuadricula {
    display: block;
    column-count: 3;
    column-gap: 18px;
}

body.pagina-interior .galeria-item {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    margin: 0 0 18px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    border-color: var(--color-borde-claro);
    transition: border-color var(--transicion);
}

body.pagina-interior .galeria-item:hover {
    transform: none;
    border-color: var(--borde-naranja);
}

body.pagina-interior .galeria-item img {
    display: block;
    width: 100%;
    height: auto;
}

body.pagina-interior .galeria-item:hover img {
    transform: none;
}

@media (max-width: 992px) {
    body.pagina-interior .galeria-cuadricula {
        column-count: 2;
    }
}

@media (max-width: 576px) {
    body.pagina-interior .galeria-cuadricula {
        column-count: 1;
    }
}

/* ---------- 18.13 Nosotros: historia clara y una sola foto ---------- */
body.pagina-interior .nosotros {
    padding: 84px 0 96px;
}

@media (min-width: 993px) {
    body.pagina-interior .nosotros-interior {
        grid-template-columns: minmax(360px, 460px) minmax(0, 1fr);
        gap: clamp(58px, 7vw, 96px);
    }
}

body.pagina-interior .nosotros-imagenes {
    position: relative;
    min-height: 0;
    width: min(100%, 460px);
    margin-inline: auto;
}

body.pagina-interior .nosotros-foto {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
    border: 1px solid rgba(16, 16, 16, 0.1);
}

body.pagina-interior .nosotros-texto {
    max-width: 640px;
}

body.pagina-interior .nosotros-texto .kicker {
    margin-bottom: 12px;
    font-size: var(--texto-kicker);
    font-weight: 600;
}

body.pagina-interior .nosotros-texto .seccion-titulo {
    max-width: 18ch;
    font-size: var(--texto-titulo-seccion);
}

body.pagina-interior .nosotros-texto .seccion-parrafo {
    max-width: 58ch;
    color: var(--texto-suave);
    font-size: var(--texto-cuerpo);
    line-height: 1.72;
}

body.pagina-interior .nosotros .nosotros-lista {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 600px;
    margin-top: 28px;
}

body.pagina-interior .nosotros .nosotros-lista li {
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-borde-claro);
    color: var(--texto-oscuro);
    font-size: var(--texto-lista);
    line-height: 1.45;
}

body.pagina-interior .nosotros .nosotros-lista li:last-child {
    border-bottom: 0;
}

body.pagina-interior .nosotros .nosotros-lista .icono {
    margin-top: 3px;
}

@media (max-width: 576px) {
    body.pagina-interior .nosotros {
        padding: 56px 0 72px;
    }

    body.pagina-interior .nosotros-interior {
        gap: 44px;
    }

    body.pagina-interior .nosotros-foto {
        border-radius: 20px;
    }
}

/* ---------- 18.14 CTA final ("Ven a conocernos" / "¿Se te antojó?") ---------- */
/* Antes: tarjeta #111 sobre fondo NEGRO #050505 = mancha oscura sin
   contraste, más un degradado naranja difuso que parecía una sombra sucia.
   Ahora: la sección va en BLANCO y la tarjeta en NEGRO SÓLIDO, contraste
   limpio negro/blanco con el naranja como único acento. Sin sombras. */
body.pagina-interior .pagina-cta {
    background: var(--color-blanco);
    padding: 0 0 90px;
}

/* Sin margen superior aquí: como la sección no tiene padding-top, ese
   margen se "escapaba" fuera de ella (colapso de márgenes) y dejaba una
   franja negra del body entre la historia y la tarjeta. El aire ya lo da
   el padding inferior de la sección de arriba. */
body.pagina-interior .pagina-cta .menu-cta {
    margin-top: 0;
}

body.pagina-interior .menu-cta {
    background-color: var(--negro);
    background-image: none;
    border: none;
    border-radius: 20px;
    padding: 46px 50px;
    gap: 34px;
}

body.pagina-interior .menu-cta .seccion-titulo {
    color: var(--color-blanco);
}

body.pagina-interior .menu-cta .seccion-parrafo {
    color: rgba(var(--color-blanco-rgb), 0.72);
    margin-top: 10px;
}

/* El botón de contorno se lee mejor en blanco sobre el negro */
body.pagina-interior .menu-cta .boton-borde {
    border-color: rgba(var(--color-blanco-rgb), 0.35);
    color: var(--color-blanco);
}

body.pagina-interior .menu-cta .boton-borde:hover {
    border-color: var(--naranja);
    color: var(--naranja);
    background: transparent;
}

@media (max-width: 768px) {
    body.pagina-interior .menu-cta {
        padding: 34px 24px;
    }
}

/* ---------- 18.17 Página de calificación por QR ---------- */
/* Pensada para el celular: estrellas grandes, fáciles de tocar. */
body.pagina-interior .calificar {
    background: var(--color-blanco);
    color: var(--texto-oscuro);
    color-scheme: light;
    padding: 40px 0 90px;
}

body.pagina-interior .calificar-tarjeta {
    width: min(100%, 560px);
    margin-inline: auto;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde-claro);
    border-radius: 20px;
    padding: 40px 32px 34px;
    text-align: center;
}

body.pagina-interior .calificar-estrellas {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
}

body.pagina-interior .calificar-estrella {
    font-size: 3rem;
    line-height: 1;
    padding: 6px 4px;
    color: #DCD6CC;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

body.pagina-interior .calificar-estrella.activa {
    color: var(--naranja);
}

body.pagina-interior .calificar-etiqueta {
    min-height: 1.6em;
    font-family: var(--fuente-titulos);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--texto-suave);
    margin-bottom: 24px;
}

body.pagina-interior .calificar-enviar {
    width: 100%;
    padding: 16px 28px;
}

body.pagina-interior .calificar-enviar:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

body.pagina-interior .calificar-aviso {
    min-height: 1.3em;
    margin-top: 12px;
    font-size: 0.9rem;
    color: #c0392b;
}

/* --- Pantalla de agradecimiento --- */
body.pagina-interior .calificar-gracias-icono {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--naranja);
    color: var(--color-blanco);
    margin-bottom: 18px;
}

body.pagina-interior .calificar-gracias-titulo {
    font-family: var(--fuente-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--tinta);
    margin-bottom: 10px;
}

body.pagina-interior .calificar-gracias-texto {
    color: var(--texto-suave);
    line-height: 1.6;
    max-width: 42ch;
    margin: 0 auto 26px;
}

body.pagina-interior .calificar-gracias-botones {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 576px) {
    body.pagina-interior .calificar-tarjeta {
        padding: 32px 20px 28px;
    }

    body.pagina-interior .calificar-estrella {
        font-size: 2.6rem;
    }
}

/* ---------- 18.16 Página /reserva: formulario en dos pasos ---------- */
body.pagina-interior .reserva-tarjeta {
    grid-template-columns: 340px 1fr;
    gap: 48px;
    padding: 44px;
    align-items: start;
}

/* --- Panel de información (izquierda) --- */
body.pagina-interior .reserva-info {
    border-right: 1px solid var(--color-borde-claro);
    padding-right: 44px;
}

body.pagina-interior .reserva-intro {
    margin-top: 14px;
    color: var(--texto-suave);
    font-size: 0.98rem;
    line-height: 1.6;
}

body.pagina-interior .reserva-datos {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 26px;
}

body.pagina-interior .reserva-datos li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

body.pagina-interior .reserva-datos .icono {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 10px;
    color: var(--naranja);
    background: rgba(var(--naranja-rgb), 0.10);
}

body.pagina-interior .reserva-datos strong {
    display: block;
    font-family: var(--fuente-titulos);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tinta);
}

body.pagina-interior .reserva-datos span {
    font-size: 0.92rem;
    color: var(--texto-suave);
    line-height: 1.5;
}

body.pagina-interior .reserva-ayuda {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--color-borde-claro);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--texto-suave);
}

body.pagina-interior .reserva-ayuda a {
    color: var(--naranja);
    font-weight: 600;
}

/* --- Formulario por pasos (derecha) --- */
body.pagina-interior .reserva-formulario {
    display: block;
}

body.pagina-interior .reserva-paso {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: var(--fuente-titulos);
    font-size: 1rem;
    font-weight: 600;
    color: var(--tinta);
}

body.pagina-interior .reserva-paso + .reserva-fila + .reserva-paso,
body.pagina-interior .reserva-fila + .reserva-paso {
    margin-top: 28px;
}

body.pagina-interior .reserva-paso span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--naranja);
    color: var(--color-blanco);
    font-size: 0.85rem;
    font-weight: 700;
}

body.pagina-interior .reserva-fila {
    display: grid;
    gap: 14px 18px;
}

body.pagina-interior .reserva-fila-3 {
    grid-template-columns: repeat(3, 1fr);
}

body.pagina-interior .reserva-fila-2 {
    grid-template-columns: repeat(2, 1fr);
}

body.pagina-interior .reserva-boton {
    width: 100%;
    margin: 28px 0 0;
    padding: 16px 28px;
    align-self: auto;
}

body.pagina-interior .reserva-garantias {
    margin-top: 20px;
    padding-top: 20px;
    gap: 12px 26px;
}

/* --- Contacto: encabezado del bloque "Cómo llegar" --- */
body.pagina-interior .ubicacion-encabezado {
    max-width: 62ch;
    margin-bottom: 34px;
}

@media (max-width: 992px) {
    body.pagina-interior .reserva-tarjeta {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    body.pagina-interior .reserva-info {
        border-right: none;
        padding-right: 0;
        padding-bottom: 28px;
        border-bottom: 1px solid var(--color-borde-claro);
    }
}

@media (max-width: 576px) {
    body.pagina-interior .reserva-tarjeta {
        padding: 28px 20px;
    }

    body.pagina-interior .reserva-fila-3,
    body.pagina-interior .reserva-fila-2 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   18.20 AJUSTES RESPONSIVE PARA MÓVIL (auditoría a 375px)
   Corrige lo detectado midiendo cada página en un viewport
   de celular: menú a 2 columnas, listas apretadas a 1 columna
   y botones de los CTA a ancho completo (antes envolvían
   desparejos porque no cabían en la fila).
   ============================================================ */
@media (max-width: 576px) {

    /* ---- Menú: 2 columnas compactas (antes 1 tarjeta gigante
       de 343px por fila = scroll eterno con 9 platos) ---- */
    body.pagina-interior .menu-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    body.pagina-interior .menu-lista .plato-card {
        min-width: 0;
        padding: 8px 8px 14px;
    }

    body.pagina-interior .menu-lista .plato-card-media {
        border-radius: 10px;
        margin-bottom: 10px;
    }

    body.pagina-interior .menu-lista .plato-card-nombre {
        max-width: 100%;
        overflow-wrap: break-word;
        font-size: 1.02rem;
        padding-bottom: 5px;
        border-bottom-width: 1.5px;
    }

    /* Filtros más compactos: la fila de 5 pastillas ocupaba 153px de alto */
    body.pagina-interior .menu-filtro {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    body.pagina-interior .menu-filtros {
        gap: 8px;
        margin-bottom: 32px;
    }

    /* ---- Nosotros: la lista de valores a 1 columna (a 2 columnas
       cada frase quedaba en ~165px y se partía en 3 líneas) ---- */
    body.pagina-interior .nosotros .nosotros-lista {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* ---- CTA y ficha de ubicación: botones a ancho completo
       (216px + 168px no caben en una fila de 343px) ---- */
    body.pagina-interior .menu-cta .ubicacion-botones,
    body.pagina-interior .ubicacion-info .ubicacion-botones {
        width: 100%;
        flex-direction: column;
    }

    body.pagina-interior .menu-cta .boton,
    body.pagina-interior .ubicacion-info .ubicacion-botones .boton {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   18.21 CONSULTAR MI RESERVA (página pública)
   El cliente escribe su código y ve el estado en lenguaje claro.
   ============================================================ */
body.pagina-interior .consulta {
    background: var(--color-blanco);
    color: var(--texto-oscuro);
    color-scheme: light;
    padding: 40px 0 90px;
}

body.pagina-interior .consulta-tarjeta {
    width: min(100%, 620px);
    margin-inline: auto;
}

body.pagina-interior .consulta-etiqueta {
    display: block;
    margin-bottom: 8px;
    font-family: var(--fuente-titulos);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tinta);
}

body.pagina-interior .consulta-fila {
    display: flex;
    gap: 10px;
}

body.pagina-interior .consulta-campos {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 14px;
}

body.pagina-interior .consulta-campos input {
    width: 100%;
    flex: 1;
    min-width: 0;
    padding: 15px 18px;
    border: 1px solid var(--color-borde-calido);
    border-radius: 12px;
    background: var(--color-blanco);
    color: var(--texto-oscuro);
    font-family: var(--fuente-titulos);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

body.pagina-interior .consulta-campos input:focus {
    outline: 2px solid var(--naranja);
    outline-offset: -2px;
    border-color: var(--naranja);
}

body.pagina-interior .consulta-campos input::placeholder {
    color: #B9AFA3;
    letter-spacing: 1px;
}

body.pagina-interior .consulta-ayuda {
    margin-top: 10px;
    font-size: 0.88rem;
    color: var(--texto-suave);
}

body.pagina-interior .consulta-accion {
    justify-content: flex-end;
    margin-top: 14px;
}

.campo-trampa {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

@media (max-width: 576px) {
    body.pagina-interior .consulta-campos {
        grid-template-columns: 1fr;
    }

    body.pagina-interior .consulta-accion .boton {
        width: 100%;
        justify-content: center;
    }
}

body.pagina-interior .consulta-error {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 12px;
    background: #FDECEA;
    border: 1px solid #F5C6C0;
    color: #9B2C1E;
    font-size: 0.95rem;
}

/* ---------- Resultado ---------- */
body.pagina-interior .consulta-resultado {
    margin-top: 26px;
    padding: 32px 28px;
    border-radius: 20px;
    border: 1px solid var(--color-borde-claro);
    text-align: center;
}

body.pagina-interior .consulta-icono {
    display: inline-grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--naranja);
    color: var(--color-blanco);
    margin-bottom: 16px;
}

/* Cada estado tiñe el icono para que se entienda de un vistazo */
body.pagina-interior .consulta-resultado.estado-confirmada .consulta-icono,
body.pagina-interior .consulta-resultado.estado-atendida .consulta-icono {
    background: linear-gradient(135deg, #1E9E62, #24B872);
}

body.pagina-interior .consulta-resultado.estado-cancelada .consulta-icono {
    background: linear-gradient(135deg, var(--estado-error), #E05A45);
}

body.pagina-interior .consulta-titulo {
    font-family: var(--fuente-display);
    font-size: clamp(1.5rem, 3vw, 1.85rem);
    font-weight: 600;
    color: var(--tinta);
    margin-bottom: 10px;
}

body.pagina-interior .consulta-detalle {
    color: var(--texto-suave);
    line-height: 1.6;
    max-width: 46ch;
    margin: 0 auto 26px;
}

body.pagina-interior .consulta-datos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    text-align: left;
    padding-top: 24px;
    border-top: 1px solid var(--color-borde-claro);
}

body.pagina-interior .consulta-datos li {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.pagina-interior .consulta-datos .icono {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 10px;
    color: var(--naranja);
    background: rgba(var(--naranja-rgb), 0.10);
}

body.pagina-interior .consulta-datos small {
    display: block;
    font-size: 0.8rem;
    color: var(--texto-suave);
}

body.pagina-interior .consulta-datos strong {
    font-family: var(--fuente-titulos);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--tinta);
}

body.pagina-interior .consulta-botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
}

@media (max-width: 576px) {
    body.pagina-interior .consulta-fila {
        flex-direction: column;
    }

    body.pagina-interior .consulta-fila .boton {
        width: 100%;
    }

    body.pagina-interior .consulta-datos {
        grid-template-columns: 1fr;
    }

    body.pagina-interior .consulta-botones .boton {
        width: 100%;
    }
}

/* ============================================================
   18.22 PEDIDO EN LA RESERVA
   La página queda corta: solo un resumen compacto. El menú se
   elige en una ventana aparte, como en las apps de comida.
   ============================================================ */

/* ---------- Caja del pedido en el formulario ---------- */
body.pagina-interior .pedido-caja {
    border: 1px solid var(--color-borde-claro);
    border-radius: 14px;
    background: var(--color-blanco);
    overflow: hidden;
}

/* Estado vacío: invita a elegir */
body.pagina-interior .pedido-caja-vacia {
    padding: 28px 22px;
    text-align: center;
}

body.pagina-interior .pedido-caja-icono {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: rgba(var(--naranja-rgb), 0.10);
    color: var(--naranja);
}

body.pagina-interior .pedido-caja-vacia p {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tinta);
    margin-bottom: 16px;
}

body.pagina-interior .pedido-caja-vacia small {
    display: block;
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--texto-suave);
}

/* Estado con platos: resumen + total */
body.pagina-interior .pedido-caja-lleno {
    padding: 18px 20px;
}

body.pagina-interior .pedido-linea {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 0;
    font-size: 0.95rem;
    color: var(--texto-suave);
}

body.pagina-interior .pedido-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-borde-claro);
}

body.pagina-interior .pedido-total span {
    font-size: 0.95rem;
    color: var(--texto-suave);
}

body.pagina-interior .pedido-total strong {
    font-family: var(--fuente-titulos);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--naranja);
}

body.pagina-interior .pedido-editar {
    width: 100%;
    margin-top: 16px;
}

/* ============================================================
   VENTANA PARA ELEGIR PLATOS
   ============================================================ */
.menu-modal {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(5, 5, 5, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.menu-modal-caja {
    display: flex;
    flex-direction: column;
    width: min(100%, 560px);
    max-height: min(88vh, 780px);
    border-radius: 18px;
    background: var(--color-blanco);
    overflow: hidden;
}

/* ---------- Cabecera ---------- */
.menu-modal-cabecera {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--color-borde-claro);
}

.menu-modal-cabecera h3 {
    font-family: var(--fuente-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--tinta);
    line-height: 1.2;
}

.menu-modal-cabecera p {
    margin-top: 3px;
    font-size: 0.88rem;
    color: var(--texto-suave);
}

.menu-modal-cerrar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #F4F1EC;
    color: var(--tinta);
    cursor: pointer;
    transition: background 0.16s ease;
}

.menu-modal-cerrar:hover {
    background: #E9E4DC;
}

/* ---------- Lista de platos ---------- */
/* min-height: 0 permite que la lista sí se encoja; sin esto el navegador
   se lo cobra a la cabecera y al pie. */
.menu-modal-lista {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 22px;
}

body.pagina-interior .menu-modal-lista .pedido-plato {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 0;
    border-bottom: 1px solid #F2EEE8;
}

body.pagina-interior .menu-modal-lista .pedido-plato:last-child {
    border-bottom: none;
}

body.pagina-interior .pedido-plato-foto {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 10px;
    object-fit: cover;
    background: #F3EFE8;
}

body.pagina-interior .pedido-plato-info {
    flex: 1;
    min-width: 0;
}

body.pagina-interior .pedido-plato-info strong {
    display: block;
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--tinta);
    line-height: 1.3;
}

body.pagina-interior .pedido-plato-info small {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--naranja);
}

/* El plato elegido se resalta */
body.pagina-interior .pedido-plato.elegido .pedido-plato-info strong {
    color: var(--naranja);
}

/* ---------- Contador ---------- */
body.pagina-interior .pedido-contador {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

body.pagina-interior .pedido-boton {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-borde-calido);
    border-radius: 9px;
    background: var(--color-blanco);
    color: var(--tinta);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

body.pagina-interior .pedido-boton:hover {
    border-color: var(--naranja);
    background: var(--naranja);
    color: var(--color-blanco);
}

body.pagina-interior .pedido-cantidad {
    width: 42px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--color-borde-calido);
    border-radius: 9px;
    background: var(--color-blanco);
    color: var(--texto-oscuro);
    font-family: var(--fuente-titulos);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
}

body.pagina-interior .pedido-cantidad::-webkit-outer-spin-button,
body.pagina-interior .pedido-cantidad::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.pagina-interior .pedido-cantidad:focus {
    outline: 2px solid var(--naranja);
    outline-offset: -2px;
    border-color: var(--naranja);
}

/* ---------- Pie con el total ---------- */
.menu-modal-pie {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    border-top: 1px solid var(--color-borde-claro);
    background: #FAF8F5;
}

.menu-modal-total {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.menu-modal-total span {
    font-size: 0.85rem;
    color: var(--texto-suave);
}

.menu-modal-total strong {
    font-family: var(--fuente-titulos);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--naranja);
}

/* ---------- Pedido dentro del modal de confirmación ---------- */
.modal-pedido {
    margin: 16px 0 4px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(var(--color-blanco-rgb), 0.05);
    border: 1px solid rgba(var(--color-blanco-rgb), 0.12);
    text-align: left;
}

.modal-pedido-linea {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--gris);
    padding: 2px 0;
}

.modal-pedido-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--color-blanco-rgb), 0.14);
    font-size: 0.95rem;
    color: var(--gris);
}

.modal-pedido-total strong {
    font-family: var(--fuente-titulos);
    font-size: 1.3rem;
    color: var(--naranja);
}

/* ---------- Móvil: la ventana ocupa toda la pantalla ---------- */
@media (max-width: 576px) {
    .menu-modal {
        padding: 0;
    }

    .menu-modal-caja {
        width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }

    .menu-modal-cabecera,
    .menu-modal-lista,
    .menu-modal-pie {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.pagina-interior .pedido-plato-foto {
        width: 46px;
        height: 46px;
    }

    body.pagina-interior .pedido-plato-info strong {
        font-size: 0.92rem;
    }

    body.pagina-interior .pedido-boton {
        width: 32px;
        height: 32px;
    }

    body.pagina-interior .pedido-cantidad {
        width: 38px;
        height: 32px;
    }

    body.pagina-interior .pedido-total strong {
        font-size: 1.3rem;
    }
}


/* Pedido en la página de consultar reserva */
body.pagina-interior .consulta-pedido {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--color-borde-claro);
    text-align: left;
}

body.pagina-interior .consulta-pedido-titulo {
    font-family: var(--fuente-titulos);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--naranja);
    margin-bottom: 10px;
}

body.pagina-interior .consulta-pedido-linea {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
    font-size: 0.95rem;
    color: var(--texto-suave);
}

body.pagina-interior .consulta-pedido-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-borde-claro);
    color: var(--texto-suave);
}

body.pagina-interior .consulta-pedido-total strong {
    font-family: var(--fuente-titulos);
    font-size: 1.4rem;
    color: var(--naranja);
}