/* ============================================================
   HOJA DE ESTILOS — Restaurante Cabañas La J
   ------------------------------------------------------------
   ÍNDICE
   01. Base (los tokens viven en tema.css)
   02. Utilidades (contenedor, botones, títulos, alertas)
   03. Cabecera y navegación
   04. Hero principal
   05. Reserva rápida
   06. Platos destacados (carrusel)
   07. Experiencia
   08. Nosotros
   09. Galería
   10. Ubicación
   11. Página del menú
   12. Página de error 404
   13. Pie de página
   14. WhatsApp flotante
   15. Modales y visor de imágenes
   16. Animaciones
   17. Responsive
   ============================================================ */

/* ============================================================
   01. BASE
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    color-scheme: dark;
    scroll-behavior: smooth;
}

/* El atributo hidden debe ganarle al display de cualquier componente.
   Sin esto, un .boton[hidden] se seguía viendo (display:inline-flex pisa
   la regla del navegador) y quedaban botones visibles con href="#". */
[hidden] {
    display: none !important;
}

body {
    background: var(--negro);
    color: var(--blanco);
    font-family: var(--fuente-texto);
    font-size: var(--texto-cuerpo);
    line-height: var(--interlineado-cuerpo);
    overflow-x: hidden;
}

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

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

ul {
    list-style: none;
}

button {
    font-family: inherit;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
}

/* Evita el rectángulo azul que WebKit/Android superpone al tocar.
   El foco real de teclado se conserva con las reglas :focus-visible. */
:where(a, button, summary, [role="button"]) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

input,
select,
textarea {
    font-family: inherit;
}

/* Foco visible para quien navega con teclado.
   En enlaces y botones el anillo va por fuera, que es lo natural.
   En los campos de formulario va con desplazamiento NEGATIVO: se dibuja
   encima de su propio borde en vez de separado, así se ve un único
   borde naranja y no una doble línea con un hueco en medio. */
:where(a, button):focus-visible {
    outline: 3px solid var(--naranja);
    outline-offset: 3px;
}

:where(input, select, textarea):focus-visible {
    outline: 2px solid var(--naranja);
    outline-offset: -2px;
}

/* Los botones que ya tienen borde propio siguen el mismo criterio que
   los campos: el anillo encima del borde, para no ver dos líneas. */
.boton-borde:focus-visible {
    outline-width: 2px;
    outline-offset: -2px;
}

::selection {
    background: var(--naranja);
    color: var(--blanco);
}

/* Barra de desplazamiento discreta */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--carbon);
}

::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--naranja);
}

/* Las secciones ancladas no quedan tapadas por la cabecera fija */
section[id] {
    scroll-margin-top: 150px;
}

/* ============================================================
   02. UTILIDADES
   ============================================================ */
.contenedor {
    width: min(100% - 44px, 1200px);
    margin-inline: auto;
}

.fuente-script {
    font-family: var(--fuente-script);
    font-weight: 600;
}

/* Antetítulo naranja de cada sección (estilo MomoInn: 18px sin mayúsculas) */
.kicker {
    font-family: var(--fuente-titulos);
    font-size: var(--texto-kicker);
    font-weight: 500;
    color: var(--naranja);
    margin-bottom: 10px;
}

.seccion-titulo {
    font-family: var(--fuente-display);
    font-size: var(--texto-titulo-seccion);
    font-weight: 600;
    line-height: 1.15;
}

.seccion-parrafo {
    color: var(--gris);
    margin-top: 16px;
    max-width: 60ch;
    font-size: var(--texto-cuerpo);
    line-height: var(--interlineado-cuerpo);
}

.seccion-encabezado {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.texto-vacio {
    text-align: center;
    color: var(--gris-oscuro);
    padding: 50px 0;
    font-style: italic;
}

/* Secciones de páginas interiores */
.seccion-pagina {
    padding: 60px 0 90px;
}

.seccion-tras-banner {
    padding-top: 30px;
}

.pagina-cta {
    padding: 0 0 100px;
}

/* Cuadrícula de tarjetas con icono (Servicios y Contacto) */
.tarjetas-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
}

.tarjeta-info {
    background: var(--tarjeta);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    padding: 32px 26px;
    text-align: center;
    transition: transform var(--transicion), border-color var(--transicion);
}

.tarjeta-info:hover {
    transform: translateY(-6px);
    border-color: var(--borde-naranja);
}

.tarjeta-info-icono {
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(var(--naranja-rgb), 0.13);
    border: 1px solid var(--borde-naranja);
    color: var(--naranja);
    margin-bottom: 16px;
}

.tarjeta-info h3 {
    font-family: var(--fuente-display);
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.tarjeta-info p {
    color: var(--gris);
    font-size: 0.95rem;
    line-height: 1.55;
}

.tarjeta-info a {
    display: inline-block;
    margin-top: 10px;
    color: var(--naranja);
    font-weight: 500;
    transition: color var(--transicion);
}

.tarjeta-info a:hover {
    color: var(--naranja);
}

/* ---------- Botones ---------- */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 28px;
    border-radius: 12px;
    font-family: var(--fuente-titulos);
    font-size: var(--texto-boton);
    font-weight: 500;
    line-height: 1;
    transition: transform var(--transicion), background var(--transicion),
                color var(--transicion);
    white-space: nowrap;
}

.boton-naranja {
    background: var(--naranja);
    color: var(--color-sobre-naranja);
}

.boton-naranja:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.boton-borde {
    border: 1.5px solid var(--borde-naranja);
    color: var(--naranja);
    background: transparent;
}

.boton-borde:hover {
    background: rgba(var(--naranja-rgb), 0.12);
    border-color: var(--naranja);
    transform: translateY(-2px);
}

/* Botón claro translúcido (legible sobre fotos) */
.boton-claro {
    border: 1.5px solid rgba(var(--color-blanco-rgb), 0.6);
    color: var(--blanco);
    background: rgba(var(--color-blanco-rgb), 0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.boton-claro:hover {
    background: rgba(var(--color-blanco-rgb), 0.16);
    border-color: var(--blanco);
    transform: translateY(-2px);
}

/* ---------- Alertas ---------- */
.alerta {
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 0.9rem;
    margin-bottom: 18px;
    border: 1px solid transparent;
}

.alerta-exito {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.4);
    color: #7ee2ab;
}

.alerta-error {
    background: rgba(255, 82, 82, 0.1);
    border-color: rgba(255, 82, 82, 0.4);
    color: #ff9d9d;
}

.alerta-aviso {
    background: rgba(255, 138, 0, 0.1);
    border-color: var(--borde-naranja);
    color: var(--naranja);
}

/* ============================================================
   03. CABECERA Y NAVEGACIÓN
   ============================================================ */
.cabecera {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 12px 0;
    border-bottom: 1px solid transparent;
    transition: background var(--transicion), padding var(--transicion),
                border-color var(--transicion);
}

/* Estado al hacer scroll: la cabecera se separa con una línea naranja */
.cabecera.desplazada {
    background: rgba(5, 5, 5, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 8px 0;
    border-bottom-color: rgba(var(--naranja-rgb), 0.22);
}

/* Rejilla: menú izquierdo | logo central | menú derecho.
   align-items: center + logo sin margen = menús centrados con el logo. */
.cabecera-interior {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.navegacion-zona {
    display: flex;
    align-items: center;
    gap: 5px;
}

.navegacion-izquierda {
    justify-content: flex-end;
}

.navegacion-derecha {
    justify-content: flex-start;
}

/* Logo limpio y transparente: sin círculo, borde, arco ni placa de fondo. */
.logo {
    display: block;
    justify-self: center;
    line-height: 0;
}

.logo-circulo {
    display: grid;
    place-items: center;
    width: 162px;
    height: 162px;
    margin: -20px 0;
    background: transparent;
    transition: width var(--transicion), height var(--transicion), margin var(--transicion);
}

.logo-imagen {
    height: 122px;
    width: auto;
    display: block;
    transition: height var(--transicion);
}

.cabecera.desplazada .logo-circulo {
    width: 104px;
    height: 104px;
    margin: -11px 0;
}

.cabecera.desplazada .logo-imagen {
    height: 78px;
}

/* Navegación */
.navegacion-lista {
    display: flex;
    align-items: center;
    gap: 2px;
}

.navegacion-enlace {
    position: relative;
    display: block;
    padding: 10px 13px;
    font-family: var(--fuente-titulos);
    font-size: 1.125rem;   /* 18px, como el menú de MomoInn */
    font-weight: 500;
    color: var(--blanco);
    transition: color var(--transicion);
}

.navegacion-enlace::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--naranja);
    transform: translateX(-50%);
    transition: width var(--transicion);
}

.navegacion-enlace:hover,
.navegacion-enlace.activo {
    color: var(--naranja);
}

.navegacion-enlace:hover::after,
.navegacion-enlace.activo::after {
    width: calc(100% - 26px);
}

/* Botón Reservar del escritorio */
.boton-cabecera {
    font-size: 1rem;
    padding: 11px 18px;
    margin-left: 8px;
}

/* Botón Reservar compacto (visible solo en pantallas pequeñas) */
.boton-reservar-movil {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
}

/* Botón hamburguesa (visible solo en pantallas pequeñas) */
.boton-menu {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    border: 2px solid rgba(var(--naranja-rgb), 0.72);
    background: rgba(5, 5, 5, 0.42);
    color: var(--naranja);
    place-items: center;
    box-shadow:
        inset 0 0 0 1px rgba(var(--color-blanco-rgb), 0.035),
        0 6px 18px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition:
        transform 0.16s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .boton-menu:hover {
        border-color: var(--naranja);
        background: rgba(var(--naranja-rgb), 0.10);
        box-shadow:
            inset 0 0 0 1px rgba(var(--color-blanco-rgb), 0.04),
            0 8px 20px rgba(0, 0, 0, 0.28);
    }
}

.boton-menu:active {
    transform: scale(0.94);
    border-color: var(--naranja);
    background: rgba(var(--naranja-rgb), 0.16);
    box-shadow: inset 0 0 0 1px rgba(var(--naranja-rgb), 0.12);
}

.boton-menu[aria-expanded="true"] {
    border-color: var(--naranja);
    background: rgba(var(--naranja-rgb), 0.13);
}

.boton-menu .boton-menu-cerrar {
    display: none;
}

.boton-menu[aria-expanded="true"] .boton-menu-abrir {
    display: none;
}

.boton-menu[aria-expanded="true"] .boton-menu-cerrar {
    display: block;
}

.boton-menu span {
    display: grid;
    place-items: center;
}

/* Panel desplegable móvil (oculto en escritorio) */
.navegacion-movil {
    display: none;
}

/* Pantallas medianas: compactar la navegación para que quepa */
@media (max-width: 1250px) {
    .navegacion-enlace {
        font-size: 1rem;
        padding: 10px 9px;
    }

    .boton-cabecera {
        font-size: 0.92rem;
        padding: 10px 14px;
    }

    .logo-circulo {
        width: 144px;
        height: 144px;
        margin: -16px 0;
    }

    .logo-imagen {
        height: 108px;
    }
}

/* ============================================================
   04. HERO PRINCIPAL (slider de fotos a pantalla completa)
   ============================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 175px 0 120px;
    overflow: hidden;
    background-color: var(--negro);
}

/* Slider de fotos de fondo */
.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    will-change: opacity;
}

/* La imagen activa queda por encima y visible */
.hero-slide.activa {
    z-index: 1;
    opacity: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    will-change: transform;
}

/* Velo oscuro: intenso a la izquierda (texto), arriba (header) y abajo */
.hero-velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to right,
            rgba(5, 5, 5, 0.9) 0%,
            rgba(5, 5, 5, 0.72) 34%,
            rgba(5, 5, 5, 0.4) 66%,
            rgba(5, 5, 5, 0.5) 100%),
        linear-gradient(to bottom,
            rgba(5, 5, 5, 0.68) 0%,
            transparent 26%,
            transparent 55%,
            rgba(5, 5, 5, 0.92) 100%);
}

/* Contenido: texto a la izquierda */
.hero-interior {
    position: relative;
    z-index: 2;
}

.hero-texto {
    max-width: 700px;
}

/* Antetítulo con línea decorativa naranja */
.hero-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    color: var(--naranja);
}

.hero-kicker::before {
    content: '';
    width: 46px;
    height: 2px;
    border-radius: 2px;
    background: var(--naranja);
    flex-shrink: 0;
}

.hero-titulo {
    font-family: var(--fuente-display);
    font-size: clamp(3.1rem, 6.6vw, 5.2rem);   /* Grande y con mucha presencia */
    font-weight: 600;
    line-height: 1.03;
    margin: 16px 0 22px;
}

.hero-titulo span {
    color: var(--naranja);
}

.hero-sub {
    font-size: clamp(1.12rem, 1.5vw, 1.3rem);
    line-height: 1.65;
    color: var(--crema-suave);
    max-width: 52ch;
    margin-bottom: 36px;
}

.hero-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Puntos de navegación del slider */
.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 12px;
}

.hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--color-blanco-rgb), 0.6);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background var(--transicion), border-color var(--transicion),
                transform var(--transicion), width var(--transicion);
}

.hero-dot:hover {
    border-color: var(--naranja);
}

.hero-dot.activa {
    width: 30px;
    border-radius: 8px;
    background: var(--naranja);
    border-color: transparent;
}

/* Indicador "bajar" al pie del hero */
.hero-bajar {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--borde-naranja);
    background: rgba(5, 5, 5, 0.35);
    color: var(--naranja);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: rebote 2.2s ease-in-out infinite;
}

.hero-bajar .icono {
    transform: rotate(180deg);
}

.hero-bajar:hover {
    background: var(--naranja);
    color: var(--blanco);
}

@keyframes rebote {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(7px); }
}

/* Flotación suave (la usa también el icono de la página 404) */
@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}

/* ============================================================
   05. RESERVA RÁPIDA
   ============================================================ */
.reserva {
    padding: 30px 0 90px;
}

.reserva-tarjeta {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 40px;
    background: linear-gradient(160deg, var(--tarjeta) 0%, var(--negro) 100%);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio-grande);
    padding: 44px;
}

.reserva-titulo {
    font-family: var(--fuente-display);
    font-size: 2rem;   /* 32px, escala H2 de MomoInn */
    font-weight: 600;
    line-height: 1.2;
}

/* Formulario */
.reserva-formulario {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 20px;
    align-items: end;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.campo label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--fuente-titulos);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gris);
}

.campo label .icono {
    color: var(--naranja);
}

.campo input {
    width: 100%;
    background: var(--negro);
    border: 1px solid rgba(var(--color-blanco-rgb), 0.13);
    border-radius: 12px;
    padding: 13px 15px;
    color: var(--blanco);
    font-size: 1rem;
    transition: border-color var(--transicion);
}

.campo input::placeholder {
    color: #5c5c5c;
}

/* Foco: un solo borde naranja de 2px. El contorno se dibuja sobre el
   borde del campo (offset negativo), no fuera, para que no se vea doble. */
.campo input:focus {
    outline: 2px solid var(--naranja);
    outline-offset: -2px;
    border-color: var(--naranja);
}

.campo-error {
    min-height: 1.05em;
    font-size: 0.76rem;
    line-height: 1.4;
    color: #ff8f8f;
}

.campo.invalido input {
    border-color: rgba(255, 82, 82, 0.65);
}

.reserva-boton {
    align-self: end;
    margin-bottom: 1.45em; /* Alineado con los inputs (compensa el mensaje de error) */
}

/* Garantías */
.reserva-garantias {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 34px;
    margin-top: 14px;
    padding-top: 22px;
    border-top: 1px solid var(--borde-suave);
}

.reserva-garantias li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.98rem;
    color: var(--gris);
}

.reserva-garantias .icono {
    flex-shrink: 0;
    color: var(--naranja);
    background: rgba(var(--naranja-rgb), 0.14);
    border: 1px solid var(--borde-naranja);
    border-radius: 50%;
    padding: 4px;
}

/* ============================================================
   06. PLATOS DESTACADOS (CARRUSEL)
   ============================================================ */
.platos {
    padding: 60px 0 90px;
}

/* Cabecera de la sección: título a la izquierda, flechas a la derecha */
.platos-cabecera {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}

.platos-nav {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.platos-flecha {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1.5px solid rgba(29, 37, 38, 0.16);
    background: transparent;
    color: var(--tinta);
    transition: background var(--transicion), color var(--transicion),
                border-color var(--transicion), transform var(--transicion);
}

.platos-flecha:hover {
    transform: translateY(-2px);
    border-color: var(--naranja);
    color: var(--naranja);
}

.platos-flecha-activa,
.platos-flecha-activa:hover {
    border-color: transparent;
    background: var(--naranja);
    color: var(--blanco);
}

/* Slider automático (muestra 4, avanza uno a uno; sin precio) */
.platos-slider {
    overflow: hidden;
    padding: 8px 2px 12px;
}

.platos-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 26px) / 4);
    gap: 26px;
    will-change: transform;
}

.plato-card {
    display: block;
    text-align: center;
    color: inherit;
    background: var(--blanco);
    border: 1px solid var(--color-borde-claro);
    border-radius: 18px;
    padding: 12px 12px 18px;
}

/* Imagen vertical (tarjeta más alta que ancha, no cuadrada) */
.plato-card-media {
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: 13px;
    overflow: hidden;
    margin-bottom: 15px;
    background: #F3EFE8;
}

.plato-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.plato-card-nombre {
    display: inline-block;
    font-family: var(--fuente-display);
    font-size: 1.32rem;
    font-weight: 600;
    color: var(--tinta);
    padding-bottom: 7px;
    border-bottom: 2px solid var(--naranja);
}

.carrusel {
    position: relative;
}

.carrusel-pista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 72px) / 4);
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px;
    scrollbar-width: none;
}

.carrusel-pista::-webkit-scrollbar {
    display: none;
}

.carrusel-pista:focus-visible {
    outline: 2px solid var(--naranja);
    outline-offset: 4px;
    border-radius: var(--radio);
}

/* Tarjeta de plato (premium: precio en píldora montada sobre la imagen) */
.tarjeta-plato {
    scroll-snap-align: start;
    position: relative;
    background: var(--tarjeta);
    border: 1px solid var(--borde-suave);
    border-radius: 22px;
    overflow: hidden;
    text-align: center;
    transition: transform var(--transicion), border-color var(--transicion);
}

.tarjeta-plato:hover {
    transform: translateY(-8px);
    border-color: var(--borde-naranja);
}

.tarjeta-plato-imagen {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.tarjeta-plato-imagen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.24), transparent 40%);
}

.tarjeta-plato-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.tarjeta-plato:hover .tarjeta-plato-imagen img {
    transform: scale(1.08);
}

/* Cuerpo con la píldora de precio montada en el borde superior */
.tarjeta-plato-cuerpo {
    position: relative;
    padding: 40px 20px 26px;
}

.tarjeta-plato-precio {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    background: var(--naranja);
    color: var(--blanco);
    font-family: var(--fuente-titulos);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 9px 22px;
    border-radius: 50px;
    white-space: nowrap;
}

.tarjeta-plato-nombre {
    font-family: var(--fuente-display);
    font-size: clamp(1.35rem, 1.8vw, 1.6rem);
    font-weight: 600;
    line-height: 1.15;
}

.tarjeta-plato-descripcion {
    margin-top: 8px;
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--gris);
    line-height: 1.55;
    max-width: 32ch;
    margin-inline: auto;
}

/* Flechas */
.carrusel-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--naranja);
    color: var(--blanco);
    transition: transform var(--transicion), filter var(--transicion), opacity var(--transicion);
}

.carrusel-anterior {
    left: -14px;
}

.carrusel-siguiente {
    right: -14px;
}

.carrusel-flecha:hover {
    transform: translateY(-50%) scale(1.08);
    filter: brightness(1.08);
}

.carrusel-flecha[disabled] {
    opacity: 0.35;
    pointer-events: none;
}

/* Puntos de posición */
.carrusel-puntos {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 26px;
}

.carrusel-punto {
    width: 9px;
    height: 9px;
    border-radius: 20px;
    background: #3a3a3a;
    transition: background var(--transicion), width var(--transicion);
}

.carrusel-punto.activo {
    width: 26px;
    background: var(--naranja);
}

/* ============================================================
   PALETA DEL INICIO — negro + naranja + blanco
   Alto contraste, más superficies claras y una sola identidad naranja.
   Estos estilos se limitan al home para renovar el sitio por etapas.
   ============================================================ */

/* El hero del inicio muestra la foto de la piscina (ver el bloque .hero).
   El resto de esta sección aclara las secciones siguientes del home. */
.pagina-inicio .hero-bienvenida {
    color: var(--naranja);
}

/* Reserva clara: primer descanso visual después del hero */
.pagina-inicio .reserva {
    position: relative;
    padding: 84px 0 92px;
    overflow: hidden;
    color-scheme: light;
    color: var(--texto-oscuro);
    background:
        radial-gradient(circle at 4% 0%, rgba(var(--naranja-rgb), 0.11), transparent 25%),
        linear-gradient(180deg, var(--crema) 0%, var(--crema-suave) 100%);
}

.pagina-inicio .reserva::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: min(78%, 940px);
    height: 4px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, transparent, var(--naranja), var(--naranja), transparent);
    transform: translateX(-50%);
}

.pagina-inicio .reserva::after {
    content: '';
    position: absolute;
    right: -110px;
    bottom: -150px;
    width: 360px;
    height: 360px;
    border: 48px solid rgba(var(--naranja-rgb), 0.055);
    border-radius: 50%;
    pointer-events: none;
}

.pagina-inicio .reserva-tarjeta {
    position: relative;
    z-index: 1;
    background: rgba(var(--color-blanco-rgb), 0.88);
    border-color: rgba(var(--naranja-rgb), 0.18);
}

.pagina-inicio .reserva-encabezado {
    padding-right: 32px;
    border-right: 1px solid rgba(var(--naranja-rgb), 0.16);
}

.pagina-inicio .reserva .kicker {
    color: var(--naranja);
}

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

.pagina-inicio .campo label {
    color: #555e5b;
}

.pagina-inicio .campo label .icono {
    color: var(--naranja);
}

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

.pagina-inicio .campo input::placeholder {
    color: #938A80;
}

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

.pagina-inicio .reserva-garantias {
    border-top-color: rgba(29, 37, 38, 0.1);
}

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

.pagina-inicio .reserva-garantias .icono {
    color: var(--naranja);
    background: rgba(var(--naranja-rgb), 0.1);
    border-color: rgba(var(--naranja-rgb), 0.35);
}

/* Platos sobre blanco cálido: más luz y protagonismo para las fotos */
.pagina-inicio .platos {
    position: relative;
    padding: 60px 0 68px;
    overflow: hidden;
    color: var(--texto-oscuro);
    background: var(--color-blanco);
}

.pagina-inicio .platos .contenedor {
    position: relative;
    z-index: 1;
}

.pagina-inicio .platos .kicker {
    color: var(--naranja);
}

.pagina-inicio .platos .seccion-titulo {
    color: var(--tinta);
}

/* En el home la parte superior de la ola conserva el fondo de la sección
   anterior; el negro comienza exactamente debajo de la curva. */
.pagina-inicio .pie-ondas {
    background: transparent;
}

.pagina-inicio .pie-ondas .pie-onda-relleno {
    fill: var(--negro);
}

.pagina-inicio .pie-ondas .pie-onda-linea {
    stroke: var(--naranja);
}

.pagina-inicio .pie {
    background: var(--negro);
}

/* ============================================================
   07. EXPERIENCIA
   ============================================================ */
.experiencia {
    padding: 90px 0;
    background:
        radial-gradient(ellipse 60% 50% at 8% 50%, rgba(var(--naranja-rgb), 0.07), transparent 70%),
        var(--carbon);
}

.experiencia-interior {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 56px;
    align-items: center;
}

.experiencia-texto .boton {
    margin-top: 28px;
}

/* Datos puntuales (costo de piscina, canchas gratis) */
.experiencia-detalles {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 22px;
}

.experiencia-tarjetas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.experiencia-tarjeta {
    position: relative;
    height: 340px;
    clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
    overflow: hidden;
    transition: transform var(--transicion);
}

.experiencia-tarjeta:nth-child(2) {
    transform: translateY(20px);
}

.experiencia-tarjeta:hover {
    transform: translateY(-8px);
}

.experiencia-tarjeta:nth-child(2):hover {
    transform: translateY(12px);
}

.experiencia-tarjeta img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.experiencia-tarjeta:hover img {
    transform: scale(1.08);
}

.experiencia-tarjeta figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 20%, transparent);
    font-family: var(--fuente-display);
    font-size: 1.3rem;
    font-weight: 600;
}

.experiencia-tarjeta figcaption .icono {
    color: var(--naranja);
}

/* ============================================================
   08. NOSOTROS
   ============================================================ */
.nosotros {
    padding: 100px 0;
}

.nosotros-interior {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.nosotros-imagenes {
    position: relative;
    min-height: 440px;
}

.nosotros-imagen-1,
.nosotros-imagen-2 {
    position: absolute;
    object-fit: cover;
    border-radius: 22px;
    border: 1px solid var(--borde-suave);
}

.nosotros-imagen-1 {
    top: 0;
    left: 0;
    width: 72%;
    height: 78%;
}

.nosotros-imagen-2 {
    right: 0;
    bottom: 0;
    width: 52%;
    height: 55%;
    border: 5px solid var(--negro);
}

.nosotros-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin-top: 26px;
}

.nosotros-lista li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--texto-lista);
    color: var(--gris);
}

/* Palomita: círculo naranja lleno y check blanco de trazo grueso.
   El SVG trae stroke-width="1.7" como atributo; el CSS le gana y lo
   engrosa para que el check se lea bien a este tamaño. */
.nosotros-lista .icono {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 3px;
    border-radius: 50%;
    background: var(--naranja);
    color: var(--blanco);
    stroke-width: 2.8;
}

/* ============================================================
   09. GALERÍA
   ============================================================ */
.galeria {
    padding: 40px 0 100px;
}

.galeria-cuadricula {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.galeria-item {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radio);
    overflow: hidden;
    border: 1px solid var(--borde-suave);
    transition: border-color var(--transicion), transform var(--transicion);
}

.galeria-item:hover {
    border-color: var(--borde-naranja);
    transform: translateY(-5px);
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.galeria-item:hover img {
    transform: scale(1.08);
}

.galeria-item-detalle {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(5, 5, 5, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--transicion);
    color: var(--blanco);
    font-family: var(--fuente-display);
    font-size: 1.15rem;
    font-weight: 600;
    text-align: center;
    padding: 10px;
}

.galeria-item-detalle .icono {
    color: var(--naranja);
}

.galeria-item:hover .galeria-item-detalle,
.galeria-item:focus-visible .galeria-item-detalle {
    opacity: 1;
}

/* ============================================================
   10. UBICACIÓN
   ============================================================ */
.ubicacion {
    padding: 0 0 100px;
}

.ubicacion-interior {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 26px;
}

.ubicacion-mapa {
    border-radius: var(--radio-grande);
    overflow: hidden;
    border: 1px solid var(--borde-suave);
    min-height: 400px;
}

.ubicacion-mapa iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: 0;
    display: block;
    filter: invert(0.9) hue-rotate(180deg) saturate(0.55) brightness(0.92) contrast(1.05);
}

.ubicacion-info {
    background: var(--tarjeta);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio-grande);
    padding: 36px;
    display: flex;
    flex-direction: column;
}

.ubicacion-info h3 {
    font-family: var(--fuente-display);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 22px;
}

.ubicacion-lista {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.ubicacion-lista li {
    display: flex;
    gap: 14px;
}

.ubicacion-lista .icono {
    flex-shrink: 0;
    color: var(--naranja);
    background: rgba(var(--naranja-rgb), 0.12);
    border: 1px solid var(--borde-naranja);
    border-radius: 12px;
    padding: 9px;
    width: 40px;
    height: 40px;
}

.ubicacion-lista strong {
    display: block;
    font-family: var(--fuente-titulos);
    font-size: 1rem;
    font-weight: 600;
}

.ubicacion-lista span {
    color: var(--gris);
    font-size: 0.98rem;
}

.ubicacion-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

/* ============================================================
   11. PÁGINA DEL MENÚ
   ============================================================ */
.pagina-banner {
    padding: 170px 0 60px;
    text-align: center;
    background:
        radial-gradient(ellipse 55% 60% at 50% 0%, rgba(var(--naranja-rgb), 0.14), transparent 70%);
}

.pagina-banner-kicker {
    font-size: var(--texto-kicker-pagina);
    line-height: 1.15;
    color: var(--naranja);
}

.pagina-banner-titulo {
    font-family: var(--fuente-display);
    font-size: var(--texto-titulo-pagina);
    font-weight: 600;
    line-height: 1.1;
    margin: 4px 0 14px;
}

.pagina-banner-texto {
    color: var(--gris);
    max-width: 52ch;
    margin-inline: auto;
    font-size: var(--texto-cuerpo);
    line-height: var(--interlineado-cuerpo);
}

.menu-completo {
    padding: 30px 0 100px;
}

/* Filtros */
.menu-filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 50px;
}

.menu-filtro {
    padding: 11px 24px;
    border-radius: 40px;
    border: 1.5px solid var(--borde-naranja);
    color: var(--gris);
    font-family: var(--fuente-titulos);
    font-size: 1rem;
    font-weight: 500;
    transition: background var(--transicion), color var(--transicion),
                border-color var(--transicion), transform var(--transicion);
}

.menu-filtro:hover {
    color: var(--naranja);
    transform: translateY(-2px);
}

.menu-filtro.activo {
    background: var(--naranja);
    border-color: transparent;
    color: var(--blanco);
}

/* Grupos */
.menu-grupo {
    margin-bottom: 56px;
}

.menu-grupo.oculto {
    display: none;
}

.menu-grupo-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--fuente-display);
    font-size: 2rem;
    font-weight: 600;
    padding-bottom: 14px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--borde-suave);
    position: relative;
}

.menu-grupo-titulo::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 74px;
    height: 2.5px;
    border-radius: 3px;
    background: var(--naranja);
}

.menu-grupo-titulo .icono {
    color: var(--naranja);
}

.menu-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 24px;
}

.menu-nota {
    color: var(--gris-oscuro);
    font-size: 0.82rem;
    font-style: italic;
}

/* Llamado a reservar */
.menu-cta {
    margin-top: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    background:
        radial-gradient(ellipse 50% 90% at 90% 50%, rgba(var(--naranja-rgb), 0.14), transparent 70%),
        var(--tarjeta);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio-grande);
    padding: 46px;
}

/* ============================================================
   12. PÁGINA DE ERROR 404
   ============================================================ */
.pagina-error {
    padding: 200px 0 130px;
    text-align: center;
}

.pagina-error-icono {
    display: inline-block;
    color: var(--naranja);
    opacity: 0.9;
    animation: flotar 5s ease-in-out infinite;
}

.pagina-error-titulo {
    font-family: var(--fuente-display);
    font-size: clamp(5rem, 14vw, 9rem);
    line-height: 1;
    background: var(--naranja);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pagina-error-texto {
    color: var(--gris);
    margin: 18px 0 32px;
}

/* ============================================================
   13. PIE DE PÁGINA
   ============================================================ */
.pie-ondas {
    position: relative;
    z-index: 2;
    margin-top: -50px;
    line-height: 0;
    padding: 24px 0 0;
    color: var(--naranja);
    background: transparent;
}

.pie-ondas svg {
    display: block;
    width: 100%;
    height: 26px;
}

.pie-onda-relleno {
    fill: var(--carbon);
}

.pie-onda-linea {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0.85;
}

.pie {
    background: var(--carbon);
}

.pie-columnas {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr 1.15fr;
    gap: 48px;
    padding: 64px 0 46px;
}

.pie-marca .logo-imagen {
    height: 116px;
}

.pie-eslogan {
    margin: 14px 0 18px;
    font-size: 1.45rem;
    color: var(--gris);
}

.pie-redes {
    display: flex;
    gap: 12px;
}

.pie-redes a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--borde-naranja);
    color: var(--naranja);
    transition: background var(--transicion), color var(--transicion),
                transform var(--transicion);
}

.pie-redes a:hover {
    background: var(--naranja);
    color: var(--blanco);
    transform: translateY(-3px);
}

.pie-titulo {
    font-family: var(--fuente-display);
    font-size: 1.4rem;   /* Como los títulos del pie de MomoInn */
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.pie-titulo::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2.5px;
    border-radius: 3px;
    background: var(--naranja);
}

.pie-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pie-lista a {
    color: var(--gris);
    font-size: 1rem;
    transition: color var(--transicion), padding-left var(--transicion);
}

.pie-lista a:hover {
    color: var(--naranja);
    padding-left: 5px;
}

.pie-contacto .pie-lista li {
    display: flex;
    gap: 11px;
    color: var(--gris);
    font-size: 0.98rem;
}

.pie-contacto .icono {
    flex-shrink: 0;
    color: var(--naranja);
    margin-top: 3px;
}

.boton-pie {
    margin-top: 22px;
    align-self: flex-start;
}

.pie-final {
    border-top: 1px solid var(--borde-suave);
    padding: 18px 0;
}

.pie-final .contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pie-final p {
    color: var(--gris-oscuro);
    font-size: 0.82rem;
}

.pie-despedida {
    font-size: 1.35rem !important;
    color: var(--naranja) !important;
}

/* ============================================================
   14. WHATSAPP FLOTANTE
   ============================================================ */
.whatsapp-flotante {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 95;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--verde-wsp);
    color: var(--blanco);
    transition: transform var(--transicion);
}

.whatsapp-flotante::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--verde-wsp);
    opacity: 0.5;
    z-index: -1;
    animation: pulso 2.2s ease-out infinite;
}

.whatsapp-flotante:hover {
    transform: scale(1.09);
}

@keyframes pulso {
    0%   { transform: scale(1);   opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ============================================================
   15. MODALES Y VISOR DE IMÁGENES
   ============================================================ */
.modal-fondo {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: aparecer 0.25s ease;
}

.modal-fondo[hidden] {
    display: none;
}

@keyframes aparecer {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal {
    position: relative;
    width: min(100%, 470px);
    background: var(--tarjeta);
    border: 1px solid var(--borde-naranja);
    border-radius: var(--radio-grande);
    padding: 46px 36px 36px;
    text-align: center;
    animation: subir 0.3s ease;
}

@keyframes subir {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal-cerrar {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--borde-suave);
    color: var(--gris);
    transition: color var(--transicion), border-color var(--transicion);
    z-index: 5;
}

.modal-cerrar:hover {
    color: var(--naranja);
    border-color: var(--borde-naranja);
}

.modal-icono {
    display: inline-grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--naranja);
    color: var(--blanco);
    margin-bottom: 18px;
}

.modal-titulo {
    font-family: var(--fuente-display);
    font-size: 1.75rem;
    font-weight: 600;
}

.modal-texto {
    color: var(--gris);
    font-size: 0.9rem;
    margin-top: 8px;
}

.modal-codigo {
    font-family: var(--fuente-display);
    font-size: 2rem;
    letter-spacing: 4px;
    color: var(--naranja);
    background: var(--negro);
    border: 1.5px dashed var(--borde-naranja);
    border-radius: 14px;
    padding: 12px;
    margin: 20px 0 10px;
}

.modal-detalle {
    color: var(--gris);
    font-size: 0.9rem;
}

.modal-botones {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
}

/* Visor de galería */
.visor {
    flex-direction: column;
    padding: 64px 96px 42px;
}

.visor .modal-cerrar {
    position: fixed;
    top: 22px;
    right: 22px;
}

.visor-figura {
    position: relative;
    width: min(100%, 1100px);
    max-width: calc(100vw - 192px);
    text-align: center;
    animation: subir 0.3s ease;
}

.visor-figura img {
    margin-inline: auto;
    max-width: 100%;
    max-height: 74vh;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid var(--borde-suave);
}

.visor-figura figcaption {
    margin-top: 14px;
    color: var(--gris);
    font-family: var(--fuente-titulos);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.visor-contador {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-top: 10px;
    padding: 4px 11px;
    border: 1px solid rgba(var(--color-blanco-rgb), 0.12);
    border-radius: 999px;
    background: rgba(5, 5, 5, 0.56);
    color: rgba(var(--color-blanco-rgb), 0.72);
    font-family: var(--fuente-titulos);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.visor-flecha {
    position: fixed;
    z-index: 6;
    top: 50%;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(var(--color-blanco-rgb), 0.24);
    border-radius: 50%;
    background: rgba(5, 5, 5, 0.72);
    color: var(--blanco);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateY(-50%);
    transition:
        transform var(--transicion),
        border-color var(--transicion),
        background var(--transicion),
        color var(--transicion);
}

.visor-flecha:hover {
    border-color: var(--naranja);
    background: rgba(5, 5, 5, 0.9);
    color: var(--naranja);
    transform: translateY(-50%) scale(1.05);
}

.visor-flecha:focus-visible {
    outline: 2px solid var(--naranja);
    outline-offset: 4px;
}

.visor-flecha-anterior {
    left: 26px;
}

.visor-flecha-siguiente {
    right: 26px;
}

@media (max-width: 576px) {
    .visor {
        padding: 62px 12px 28px;
    }

    .visor-figura {
        width: 100%;
        max-width: 100%;
    }

    .visor-figura img {
        max-height: 70vh;
        border-radius: 11px;
    }

    .visor-flecha {
        width: 44px;
        height: 44px;
        background: rgba(5, 5, 5, 0.82);
    }

    .visor-flecha-anterior {
        left: 8px;
    }

    .visor-flecha-siguiente {
        right: 8px;
    }
}

/* ============================================================
   15a. CATEGORÍAS (galería de tarjetas verticales escalonadas)
   ============================================================ */
.categorias {
    position: relative;
    isolation: isolate;
    /* Cubre la costura subpíxel que puede dejar el fondo `cover` de
       `.menu-dia` al quedar centrado. No modifica la posición de la foto. */
    margin-top: -1px;
    padding: 24px 0 90px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(var(--color-blanco-rgb), 0.055), transparent 48%),
        linear-gradient(180deg, #090909 0%, var(--negro) 18%, var(--negro) 82%, #080808 100%);
}

.categorias::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 8% 5% 10%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(92, 61, 39, 0.18), transparent 70%);
    filter: blur(34px);
    pointer-events: none;
}

.categorias-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: start;
}

.categoria-card {
    position: relative;
    isolation: isolate;
    display: block;
    border-radius: 20px;
    overflow: visible;
    aspect-ratio: 9 / 16;
    background: var(--tarjeta);
    border: 0;
    transition: transform var(--transicion);
    transform: translateZ(0);
}

/* La tarjeta conserva overflow visible para mostrar el marco exterior.
   Esta capa interna recorta la foto y mantiene su zoom dentro del card. */
.categoria-media {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    border-radius: inherit;
    background: #080808;
    contain: paint;
}

.categoria-card img {
    display: block;
    width: 100%;
    height: 100%;
}

.categoria-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -3px;
    padding: 3px;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(var(--color-blanco-rgb), 0.18) 0%,
        rgba(34, 34, 34, 0.92) 18%,
        rgba(8, 8, 8, 0.78) 43%,
        rgba(5, 5, 5, 0.28) 59%,
        transparent 72%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.96;
    pointer-events: none;
}

.categoria-card::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(var(--color-blanco-rgb), 0.09) 0%,
        transparent 20%,
        transparent 58%,
        rgba(5, 5, 5, 0.2) 72%,
        rgba(5, 5, 5, 0.78) 100%
    );
    pointer-events: none;
}

/* Escalonado: las tarjetas pares bajan un poco */
.categoria-card:nth-child(2n) {
    margin-top: 56px;
}

.categoria-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.96) contrast(1.025);
    transition:
        transform 0.6s ease,
        filter 0.45s ease;
}

.categorias .categoria-card:hover img {
    transform: scale(1.06);
    filter: saturate(1.03) contrast(1.035) brightness(1.02);
}

.categorias .categoria-card:focus-visible {
    outline: 3px solid var(--naranja);
    outline-offset: 3px;
    transform: translateY(-4px);
}

.categorias .categoria-card:focus-visible::before {
    opacity: 1;
}

/* Etiqueta de categoría */
.categoria-label {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 54px 16px 21px;
    background: linear-gradient(
        to top,
        rgba(5, 5, 5, 0.94) 8%,
        rgba(5, 5, 5, 0.62) 48%,
        transparent 100%
    );
    color: var(--blanco);
    font-family: var(--fuente-display);
    font-size: clamp(1.14rem, 1.45vw, 1.32rem);
    font-weight: 600;
    line-height: 1.18;
    text-align: center;
    text-wrap: balance;
}

.categoria-label::before {
    content: '';
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: var(--naranja);
    margin: 0 auto 10px;
    transition: width var(--transicion);
}

.categorias .categoria-card:hover .categoria-label::before {
    width: 48px;
}

/* ============================================================
   15a. MENÚ DEL DÍA (lista de precios + horarios, fondo oscuro)
   ============================================================ */
.menu-dia {
    position: relative;
    padding: 92px 0;
    background-color: var(--negro);
    background-image:
        linear-gradient(rgba(22, 14, 9, 0.88), rgba(20, 13, 8, 0.93)),
        /* Copia propia del sitio, no de uploads: así el fondo no depende
           de que el cliente conserve esa foto en el panel. */
        url('../img/platos/tambaqui-parrilla.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--blanco);
}

.menu-dia-grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 54px;
    align-items: center;
}

/* Columna izquierda: intro + horarios */
.menu-dia-info .kicker {
    color: var(--naranja);
}

.menu-dia-titulo {
    margin-top: 10px;
    font-family: var(--fuente-display);
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 600;
    line-height: 1.08;
    color: var(--blanco);
}

.menu-dia-lead {
    margin-top: 18px;
    max-width: 46ch;
    color: rgba(var(--color-blanco-rgb), 0.82);
    line-height: 1.7;
}

.menu-dia-horario {
    margin-top: 32px;
    max-width: 450px;
    padding: 26px 28px;
    border: 1px solid rgba(var(--color-blanco-rgb), 0.18);
    border-radius: 18px;
    background: rgba(5, 5, 5, 0.34);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.menu-dia-horario-titulo {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    font-family: var(--fuente-titulos);
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--naranja);
}

.menu-dia-horario-titulo svg {
    flex-shrink: 0;
}

.menu-dia-horario-lista {
    list-style: none;
    display: grid;
    gap: 14px;
}

.menu-dia-horario-lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(var(--color-blanco-rgb), 0.12);
    font-size: 1.06rem;
}

.menu-dia-horario-lista li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.menu-dia-horario-lista .dia {
    font-weight: 600;
    color: rgba(var(--color-blanco-rgb), 0.94);
}

.menu-dia-horario-lista .hora {
    font-size: 1.04rem;
    font-weight: 700;
    color: rgba(var(--color-blanco-rgb), 0.86);
    white-space: nowrap;
}

.menu-dia-horario-lista .menu-dia-cerrado {
    color: rgba(var(--color-blanco-rgb), 0.68);
}

.menu-dia-horario-lista .menu-dia-abierto {
    color: var(--naranja);
}

.menu-dia-info .boton {
    margin-top: 28px;
}

/* Columna derecha: tarjeta con la lista de platos */
.menu-dia-card {
    padding: 34px 36px;
    background: var(--blanco);
    border-radius: 22px;
}

.menu-dia-lista {
    list-style: none;
    display: grid;
    gap: 21px;
}

.menu-dia-fila {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.menu-dia-nombre {
    flex-shrink: 0;
    max-width: 68%;
    font-family: var(--fuente-titulos);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--tinta);
}

/* Encabezados de grupo dentro de la tarjeta (Martes a Domingo / Fin de semana) */
.menu-dia-grupo-titulo {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    font-family: var(--fuente-titulos);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--naranja);
}

.menu-dia-grupo-titulo::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(var(--naranja-rgb), 0.32), rgba(var(--naranja-rgb), 0));
}

.menu-dia-grupo-titulo svg {
    flex-shrink: 0;
}

.menu-dia-grupo-2 {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid #efe8dc;
}

.menu-dia-guia {
    flex: 1 1 auto;
    min-width: 18px;
    border-bottom: 2px dotted #d6ccbe;
    transform: translateY(-5px);
}

.menu-dia-precio {
    flex-shrink: 0;
    font-family: var(--fuente-titulos);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--naranja);
    white-space: nowrap;
}

.menu-dia-desc {
    margin-top: 5px;
    max-width: 92%;
    font-size: 0.9rem;
    color: var(--texto-suave);
    line-height: 1.5;
}

@media (max-width: 900px) {
    .menu-dia {
        padding: 68px 0;
    }
    .menu-dia-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }
    .menu-dia-horario {
        max-width: none;
    }
}

@media (max-width: 576px) {
    .menu-dia {
        padding: 54px 0;
    }
    .menu-dia-card {
        padding: 24px 20px;
    }
    .menu-dia-horario {
        padding: 21px 19px;
        border-radius: 16px;
    }
    .menu-dia-horario-titulo {
        margin-bottom: 16px;
        font-size: 1.08rem;
    }
    .menu-dia-horario-lista li {
        gap: 12px;
        padding-bottom: 12px;
        font-size: 1rem;
    }
    .menu-dia-horario-lista .hora {
        font-size: 0.98rem;
    }
    .menu-dia-nombre,
    .menu-dia-precio {
        font-size: 1rem;
    }
}

/* ============================================================
   15b. NUESTRA ESENCIA (sección con textura oscura de pizarra)
   ============================================================ */
.esencia {
    position: relative;
    overflow: hidden;
    color: var(--crema-suave);
    padding: 104px 0 112px;
    background-color: var(--negro);
    background-image: url('../img/main-bg.webp');
    background-size: cover;
    background-position: center;
}

/* Velo sutil: un poco más oscuro a la izquierda (texto) + leve brillo cálido */
.esencia::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(5, 5, 5, 0.62) 0%,
            rgba(5, 5, 5, 0.28) 46%,
            transparent 72%),
        radial-gradient(ellipse at 72% 52%, rgba(var(--naranja-rgb), 0.06) 0%, transparent 46%);
}

.esencia-interior {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.86fr 1.14fr;
    align-items: center;
    gap: 40px;
}

.esencia .kicker {
    color: var(--naranja);
}

.esencia-titulo {
    font-family: var(--fuente-display);
    font-size: clamp(2.4rem, 5vw, 3.9rem);
    font-weight: 600;
    line-height: 1.04;
    color: var(--blanco);
    margin-bottom: 22px;
}

.esencia-cita {
    font-size: clamp(1.1rem, 1.5vw, 1.28rem);
    line-height: 1.7;
    font-style: italic;
    color: rgba(244, 240, 232, 0.9);
    max-width: 48ch;
}

/* Sello profesional: años de experiencia (sin íconos de personas) */
.esencia-sello {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 34px;
    padding: 11px 24px 11px 11px;
    border-radius: 50px;
    background: rgba(var(--color-blanco-rgb), 0.08);
    border: 1px solid rgba(var(--color-blanco-rgb), 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.esencia-sello-icono {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--naranja);
    color: var(--blanco);
    flex-shrink: 0;
}

.esencia-sello-texto strong {
    display: block;
    font-family: var(--fuente-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--blanco);
    line-height: 1.1;
}

.esencia-sello-texto span {
    font-size: 0.92rem;
    color: rgba(244, 240, 232, 0.75);
}

/* Plato sobre la mesa (más grande, con sombra de contacto) */
.esencia-plato {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 500px;
}

/* Resplandor cálido detrás del plato para que resalte sobre el fondo oscuro */
.esencia-plato::before {
    content: '';
    position: absolute;
    width: 84%;
    height: 84%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 138, 0, 0.12) 0%,
        rgba(var(--naranja-rgb), 0.05) 42%,
        transparent 68%);
    filter: blur(10px);
}

.esencia-plato img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 700px;
    height: auto;
}


/* ============================================================
   CALIFICACIONES DEL SITIO
   Componentes compartidos por el hero y el pie de página.
   ============================================================ */
/* ---------- Calificación en el hero ---------- */
/* Solo aparece si hay votos reales; el HTML lo controla con un if. */
/* Sin tarjeta: solo texto e iconos sobre la foto del hero.
   La sombra del texto reemplaza al fondo para que se lea igual. */
.hero-calificacion {
    display: inline-flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 30px;
}

/* Título pequeño que da contexto: dice de qué es la calificación */
.hero-calificacion-titulo {
    font-family: var(--fuente-titulos);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: rgba(var(--color-blanco-rgb), 0.78);
}

.hero-calificacion-fila {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.hero-calificacion-estrellas {
    display: inline-flex;
    gap: 4px;
}

/* Cada caja se rellena de naranja según el promedio: permite medias estrellas */
.hero-calificacion-caja {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1;
    color: var(--color-blanco);
    background: linear-gradient(90deg,
        var(--naranja) var(--relleno, 0%),
        rgba(var(--color-blanco-rgb), 0.22) var(--relleno, 0%));
}

.hero-calificacion-nota {
    font-family: var(--fuente-titulos);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--blanco);
}

.hero-calificacion-total {
    font-size: 0.9rem;
    color: rgba(var(--color-blanco-rgb), 0.8);
}

@media (max-width: 576px) {
    .hero-calificacion {
        gap: 8px;
    }

    .hero-calificacion-titulo {
        font-size: 0.72rem;
        letter-spacing: 1px;
    }

    .hero-calificacion-fila {
        gap: 10px;
    }

    .hero-calificacion-caja {
        width: 21px;
        height: 21px;
        font-size: 12px;
    }

    .hero-calificacion-total {
        font-size: 0.84rem;
    }
}

/* ---------- Calificación en el pie ---------- */
/* Mismo lenguaje que el widget del hero: sin píldora ni borde,
   solo las estrellas y el promedio. Aparece si hay votos reales. */
/* Todo en UNA línea (estrellas + promedio) y alineada a la izquierda como
   el resto de la columna. El margen inferior la separa de los iconos. */
.pie-calificacion {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 2px 0 22px;
}

.pie-calificacion-estrellas {
    display: inline-flex;
    gap: 3px;
}

/* Cada caja se rellena según el promedio (permite medias estrellas) */
.pie-calificacion-caja {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1;
    color: var(--color-blanco);
    background: linear-gradient(90deg,
        var(--naranja) var(--relleno, 0%),
        rgba(var(--color-blanco-rgb), 0.18) var(--relleno, 0%));
}

.pie-calificacion-texto {
    font-size: 0.88rem;
    color: var(--gris);
}

.pie-calificacion-texto strong {
    font-family: var(--fuente-titulos);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--blanco);
}

/* ============================================================
   16. ANIMACIONES (aparición al hacer scroll)
   ============================================================ */
.revelar {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.revelar.visible {
    opacity: 1;
    transform: translateY(0);
}

/* El contenido principal del hero participa en el primer pintado. No debe
   esperar JavaScript ni IntersectionObserver para ser legible. */
.hero-texto .revelar {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Pequeño escalonado en el hero */
.hero-texto .revelar:nth-child(2) { transition-delay: 0.08s; }
.hero-texto .revelar:nth-child(3) { transition-delay: 0.16s; }
.hero-texto .revelar:nth-child(4) { transition-delay: 0.24s; }
.hero-texto .revelar:nth-child(5) { transition-delay: 0.32s; }
.hero-texto .revelar:nth-child(6) { transition-delay: 0.4s; }

/* Respetar la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .revelar {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   17. RESPONSIVE
   ============================================================ */

/* ---------- Pantallas medianas (laptops pequeñas) ---------- */
@media (max-width: 1100px) {
    .carrusel-pista {
        grid-auto-columns: calc((100% - 48px) / 3);
    }

    /* Platos slider: 3 visibles */
    .platos-track {
        grid-auto-columns: calc((100% - 2 * 24px) / 3);
        gap: 24px;
    }
}

/* ---------- Tablets ---------- */
@media (max-width: 992px) {
    /* Cabecera: hamburguesa | logo | reservar */
    .boton-menu,
    .boton-reservar-movil {
        display: grid;
        place-items: center;
    }

    .navegacion-zona {
        display: none;
    }

    .cabecera {
        padding: 10px 0;
    }

    .cabecera-interior {
        grid-template-columns: 44px 1fr 44px;
        gap: 10px;
    }

    .logo {
        justify-self: center;
    }

    .logo-circulo {
        width: 116px;
        height: 116px;
        margin: -13px 0;
    }

    .logo-imagen {
        height: 88px;
    }

    .cabecera.desplazada .logo-circulo {
        width: 94px;
        height: 94px;
        margin: -9px 0;
    }

    .cabecera.desplazada .logo-imagen {
        height: 71px;
    }

    /* Panel desplegable */
    .navegacion-movil {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        padding-top: 100px;
        background: rgba(7, 7, 7, 0.97);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--borde-naranja);
        transform: translateY(-100%);
        transition: transform 0.35s ease;
        max-height: 100vh;
        overflow-y: auto;
    }

    .navegacion-movil.abierta {
        transform: translateY(0);
    }

    .navegacion-movil-lista {
        display: flex;
        flex-direction: column;
        padding: 10px 24px 26px;
    }

    .navegacion-movil .navegacion-enlace {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 6px;
        font-size: 1.06rem;
        border-bottom: 1px solid var(--borde-suave);
    }

    .navegacion-movil .navegacion-enlace::after {
        display: none;
    }

    .navegacion-movil-lista li:last-child .navegacion-enlace {
        border-bottom: none;
    }

    .navegacion-reservar {
        color: var(--naranja);
        font-weight: 600;
    }

    /* Hero slider en móvil: foto a pantalla casi completa, texto a la izquierda */
    .hero {
        padding: 130px 0 96px;
        min-height: 90vh;
    }

    /* Velo más oscuro de arriba a abajo para legibilidad */
    .hero-velo {
        background:
            linear-gradient(to bottom,
                rgba(5, 5, 5, 0.72) 0%,
                rgba(5, 5, 5, 0.44) 30%,
                rgba(5, 5, 5, 0.56) 62%,
                rgba(5, 5, 5, 0.92) 100%);
    }

    .hero-texto {
        max-width: 100%;
    }

    .hero-dots {
        bottom: 22px;
    }

    /* Reserva en una columna */
    .reserva-tarjeta {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 34px 28px;
    }

    .pagina-inicio .reserva-encabezado {
        padding-right: 0;
        padding-bottom: 24px;
        border-right: 0;
        border-bottom: 1px solid rgba(var(--naranja-rgb), 0.16);
    }

    .reserva-formulario {
        grid-template-columns: repeat(2, 1fr);
    }

    .reserva-boton {
        grid-column: 1 / -1;
        margin-bottom: 0;
        width: 100%;
    }

    /* Carrusel: 2 tarjetas visibles */
    .carrusel-pista {
        grid-auto-columns: calc((100% - 24px) / 2);
    }

    .carrusel-anterior {
        left: -6px;
    }

    .carrusel-siguiente {
        right: -6px;
    }

    /* Secciones a una columna */
    .experiencia-interior,
    .nosotros-interior,
    .ubicacion-interior {
        grid-template-columns: 1fr;
    }

    /* Platos slider: 2 visibles en tablet */
    .platos-track {
        grid-auto-columns: calc((100% - 20px) / 2);
        gap: 20px;
    }

    /* Categorías: 2 columnas, escalón más suave */
    .categorias-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .categoria-card:nth-child(2n) {
        margin-top: 34px;
    }

    /* Esencia: una columna, texto arriba y plato debajo */
    .esencia {
        padding: 74px 0 82px;
    }

    /* En móvil el velo apenas oscurece (el fondo ya es oscuro) */
    .esencia::before {
        background: linear-gradient(180deg,
            rgba(5, 5, 5, 0.35) 0%,
            rgba(5, 5, 5, 0.15) 45%,
            rgba(5, 5, 5, 0.4) 100%);
    }

    .esencia-interior {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .esencia-cita {
        margin-inline: auto;
    }

    .esencia-plato {
        order: 2;
        min-height: 360px;
        width: min(100%, 480px);
        margin-inline: auto;
    }

    .experiencia-tarjeta {
        height: 300px;
    }

    .nosotros-imagenes {
        min-height: 380px;
        width: min(100%, 560px); /* width explícito: con max-width el elemento colapsaría a 0 */
        margin-inline: auto;
    }

    .galeria-cuadricula {
        grid-template-columns: repeat(2, 1fr);
    }

    .pie-columnas {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

/* ---------- Móviles grandes ---------- */
@media (max-width: 768px) {
    .reserva-formulario {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .campo-error {
        min-height: 0;
    }

    .campo-error:empty {
        display: none;
    }

    /* Carrusel: una tarjeta y media */
    .carrusel-pista {
        grid-auto-columns: 72%;
    }

    .experiencia-tarjetas {
        grid-template-columns: 1fr;
        gap: 16px;
        width: min(100%, 420px); /* width explícito: con max-width el elemento colapsaría a 0 */
        margin-inline: auto;
    }

    .experiencia-tarjeta,
    .experiencia-tarjeta:nth-child(2) {
        transform: none;
        height: 240px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        border-radius: var(--radio);
    }

    .experiencia-tarjeta:hover,
    .experiencia-tarjeta:nth-child(2):hover {
        transform: translateY(-6px);
    }

    .seccion-encabezado {
        flex-direction: column;
        align-items: flex-start;
    }

    .menu-cta {
        padding: 34px 26px;
    }

    .pie-final .contenedor {
        justify-content: center;
        text-align: center;
    }
}

/* ---------- Móviles ---------- */
@media (max-width: 576px) {
    .contenedor {
        width: min(100% - 32px, 1200px);
    }

    /* El saludo del hero debe permanecer completo incluso en móviles angostos. */
    .hero-kicker {
        gap: clamp(6px, 2.4vw, 12px);
        font-size: clamp(0.9rem, 5.1vw, 1.5rem);
        white-space: nowrap;
    }

    .hero-kicker::before {
        width: clamp(16px, 7vw, 34px);
    }

    /* Platos slider: 1 visible con vistazo del siguiente */
    .platos-track {
        grid-auto-columns: 84%;
        gap: 16px;
    }

    .logo-circulo {
        width: 102px;
        height: 102px;
    }

    .logo-imagen {
        height: 80px;
    }

    .pagina-inicio .reserva {
        padding: 66px 0 72px;
    }

    .pagina-inicio .reserva-tarjeta {
        padding: 28px 20px;
        border-radius: 20px;
    }

    .pagina-inicio .platos {
        padding: 70px 0 82px;
    }

    .hero-servicio {
        padding: 4px 12px;
        max-width: 108px;
    }

    .hero-botones .boton {
        flex: 1 1 100%;
    }

    .carrusel-pista {
        grid-auto-columns: 86%;
    }

    .carrusel-flecha {
        width: 40px;
        height: 40px;
    }

    .galeria-cuadricula {
        grid-template-columns: 1fr;
    }

    .pie-columnas {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 50px 0 36px;
    }

    .whatsapp-flotante {
        width: 52px;
        height: 52px;
        right: 16px;
        bottom: 16px;
    }

    .modal {
        padding: 40px 22px 28px;
    }

    .modal-botones .boton {
        flex: 1 1 100%;
    }
}

/* ============================================================
   18.23 MENÚ DEL DÍA — jerarquía más clara, misma altura
   Se agrandan precios, nombres y títulos de día, y se compensa
   ajustando los espacios para no alargar la sección.
   ============================================================ */

/* Título de la sección, un punto más grande */
.pagina-inicio .menu-dia-titulo {
    font-size: clamp(2.1rem, 3.6vw, 3.2rem);
}

/* Los días: de 0.8rem a 0.95rem y con más presencia */
.pagina-inicio .menu-dia-grupo-titulo {
    margin-bottom: 14px;
    font-size: 0.95rem;
    letter-spacing: 1.5px;
}

/* Nombre del plato */
.pagina-inicio .menu-dia-nombre {
    font-size: 1.2rem;
}

/* EL PRECIO es el dato que se busca: el más grande de la fila */
.pagina-inicio .menu-dia-precio {
    font-size: 1.45rem;
    letter-spacing: -0.2px;
}

/* La descripción cede protagonismo (y altura) */
.pagina-inicio .menu-dia-desc {
    margin-top: 3px;
    font-size: 0.86rem;
    line-height: 1.45;
}

/* Espacios más compactos para absorber el aumento de texto */
.pagina-inicio .menu-dia-lista {
    gap: 15px;
}

.pagina-inicio .menu-dia-card {
    padding: 28px 32px;
}

.pagina-inicio .menu-dia-grupo-2 {
    margin-top: 20px;
    padding-top: 18px;
}

/* La guía punteada acompaña al precio más grande */
.pagina-inicio .menu-dia-guia {
    transform: translateY(-6px);
}

@media (max-width: 576px) {
    .pagina-inicio .menu-dia-card {
        padding: 22px 18px;
    }

    .pagina-inicio .menu-dia-nombre {
        font-size: 1.06rem;
    }

    .pagina-inicio .menu-dia-precio {
        font-size: 1.25rem;
    }

    .pagina-inicio .menu-dia-grupo-titulo {
        font-size: 0.88rem;
    }
}