/* ══════════════════════════════════════════════════════════════════════════════
 * CASA RURAL EL ÁLAMO — includes/web/css/layout.css
 * ══════════════════════════════════════════════════════════════════════════════
 *
 * Estilos de layout: header, navegación (desktop + móvil), selector de idioma,
 * footer con columnas, elementos flotantes.
 *
 * Requiere: base.css cargado antes (variables CSS).
 * ══════════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
 * 1. HEADER STICKY
 * ══════════════════════════════════════════════════════════════════════════ */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    /* od 25/05/2026: --header-bg-opacity y --header-blur las emite head.php
       desde los ajustes BD `cabecera.fondo_opacidad` y
       `cabecera.efecto_cristal_intensidad`. Los fallbacks son los defaults
       de los nuevos ajustes (Suave + 85%). */
    background: rgba(250, 248, 243, var(--header-bg-opacity, 0.85));
    backdrop-filter: saturate(180%) blur(var(--header-blur, 4px));
    -webkit-backdrop-filter: saturate(180%) blur(var(--header-blur, 4px));
    border-bottom: 1px solid var(--color-crema-muy-oscuro);
    transition: height var(--t-normal), background var(--t-normal), box-shadow var(--t-normal),
                transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* hg3 (06/05/2026): cuando el header está marcado para auto-ocultarse y el JS le añade
   la clase .is-hidden, sale por arriba con una transición suave.
   nk 19/05/2026: además del transform, ocultamos también su border-bottom
   y su backdrop-filter. Sin esto, algunos navegadores dejan visible una
   raya de 1px (el border-bottom) por sub-pixel rendering cuando el
   header se desliza fuera de pantalla. */
.site-header--auto-hide.is-hidden {
    transform: translateY(-100%);
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    height: var(--header-height);
    max-width: var(--container-wide);
}


/* ── Logo ──────────────────────────────────────────────────────────────── */

.site-header__logo {
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.4rem);
    font-weight: var(--fw-normal);
    color: var(--color-primary);
    letter-spacing: var(--ls-wide);
    white-space: nowrap;
    flex-shrink: 0;
}

.site-header__logo:hover {
    color: var(--color-primary-hover);
}

.site-header__logo .logo-text {
    background: linear-gradient(90deg, var(--color-primary) 60%, var(--color-accent) 60%);
    -webkit-background-clip: text;
    background-clip: text;
    /* Texto normal, el gradient solo se usa como decoración sutil si queremos — 
       de momento dejamos color plano. Quita los background/clip para plano: */
    -webkit-text-fill-color: currentColor;
    color: var(--color-primary);
}


/* ── Navegación desktop ────────────────────────────────────────────────── */

.site-nav {
    flex: 1;
    display: none;   /* oculta por defecto, se muestra en desktop */
}

.site-nav__lista {
    display: flex;
    justify-content: center;
    gap: var(--sp-5);
    list-style: none;
}

.site-nav__lista a {
    font-family: var(--font-sans);
    font-size: var(--fs-pretitulo);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-texto);
    padding: var(--sp-2) var(--sp-1);
    position: relative;
}

.site-nav__lista a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 0;
    height: 1px;
    background: var(--color-accent);
    transition: all var(--t-fast);
    transform: translateX(-50%);
}

.site-nav__lista a:hover::after,
.site-nav__lista a:focus-visible::after {
    width: 100%;
}

.site-nav__lista a:hover {
    color: var(--color-primary);
}


/* ── Acciones del header ───────────────────────────────────────────────── */

.site-header__acciones {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
}


/* ── Selector de idioma ────────────────────────────────────────────────── */

.lang-switch {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-sans);
    font-size: var(--fs-pretitulo);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    color: var(--color-texto-suave);
}

.lang-switch__current {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}

.lang-switch__link {
    color: var(--color-texto-suave);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--br-sm);
    transition: all var(--t-fast);
}

.lang-switch__link:hover {
    color: var(--color-primary);
    background: var(--color-crema-oscuro);
}


/* ── CTA del header ────────────────────────────────────────────────────── */

.site-header__cta {
    /* hereda de .btn .btn--primario, aquí solo ajustes específicos */
    padding: var(--sp-2) var(--sp-5);
    font-size: var(--fs-pretitulo);
    min-height: 40px;
}


/* ── Toggle de menú móvil ──────────────────────────────────────────────── */

.site-header__menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: var(--sp-2);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--br-sm);
    cursor: pointer;
    transition: all var(--t-fast);
}

.site-header__menu-toggle span {
    width: 20px;
    height: 1.5px;
    background: var(--color-texto);
    transition: all var(--t-normal);
    transform-origin: center;
}

.site-header__menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}


/* ══════════════════════════════════════════════════════════════════════════
 * 2. MENÚ MÓVIL (desplegable)
 * ══════════════════════════════════════════════════════════════════════════ */

.mobile-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    background: var(--color-bg);
    /* nl 19/05/2026: quitamos el border-top por defecto.
       Cuando el menú está cerrado (max-height:0), ese borde de 1px
       puede dibujarse a la altura del header (50 px) y queda visible
       como una raya fina si el header se oculta al hacer scroll
       (auto-hide). El borde solo se aplica cuando el menú está
       realmente abierto (regla más abajo). */
    border-top: 0;
    transition: max-height var(--t-normal);
    z-index: var(--z-dropdown);
}

.mobile-menu[aria-hidden="false"] {
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    /* nl 19/05/2026: el borde superior solo se ve cuando el menú está
       desplegado. Así separa visualmente el menú del header sin dejar
       rayas residuales cuando el menú está cerrado. */
    border-top: 1px solid var(--color-border);
}

.mobile-menu__lista {
    padding: var(--sp-4) var(--sp-5);
}

.mobile-menu__lista li {
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu__lista li:last-child {
    border-bottom: none;
}

.mobile-menu__lista a {
    display: block;
    padding: var(--sp-4) var(--sp-3);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-texto);
}

.mobile-menu__lista a:hover {
    color: var(--color-primary);
}

.mobile-menu__separador {
    height: var(--sp-3);
    border-bottom: none !important;
}

.mobile-menu__cta {
    background: var(--color-accent);
    color: var(--color-marron-choc) !important;
    text-align: center;
    border-radius: var(--br-sm);
    margin-top: var(--sp-3);
    padding: var(--sp-4) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 3. BREAKPOINTS: mostrar nav desktop, ocultar hamburguesa
 * ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
    .site-nav {
        display: block;
    }
    .site-header__menu-toggle {
        display: none;
    }
    .mobile-menu {
        display: none;
    }
}

@media (max-width: 639px) {
    /* oa 22/05/2026: el selector de idioma ya no se muestra en el header
       en móvil; ahora vive dentro del menú hamburguesa. */
    /* Ocultamos el CTA del header porque ya está abajo */
    .site-header__cta {
        display: none;
    }
}

/* oa 22/05/2026: el lang-switch del header se oculta en cuanto aparece la
   hamburguesa (≤1023px) porque los idiomas pasan al menú móvil. Evita
   duplicidad. */
@media (max-width: 1023px) {
    .lang-switch {
        display: none;
    }
}

/* oa 22/05/2026: sección Idioma dentro del menú móvil */
.mobile-menu__idiomas {
    border-bottom: none !important;
    padding: var(--sp-4) var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.mobile-menu__idiomas-label {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-texto);
}
.mobile-menu__idiomas-opciones {
    display: flex;
    gap: var(--sp-2);
}
.mobile-menu__idioma {
    display: inline-block;
    padding: var(--sp-2) var(--sp-3);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    color: var(--color-texto);
    border-radius: var(--br-sm);
    text-decoration: none;
    min-width: 2.4rem;
    text-align: center;
}
.mobile-menu__idioma--actual {
    background: var(--color-accent);
    color: var(--color-marron-choc);
    cursor: default;
}
.mobile-menu__idioma:not(.mobile-menu__idioma--actual):hover {
    color: var(--color-primary);
    background: rgba(0,0,0,0.05);
}
/* Al añadir nuevos li tras el CTA Reservar, este deja de ser :last-child
   y le aparecía un border-bottom indeseado. Lo neutralizamos. */
.mobile-menu__lista-item--cta {
    border-bottom: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 4. FOOTER
 * ══════════════════════════════════════════════════════════════════════════ */

.site-footer {
    background: var(--color-marron-choc);
    color: var(--color-crema);
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-5);
    margin-top: var(--sp-9);
}

.site-footer a {
    color: var(--color-crema);
    text-decoration: none;
    transition: color var(--t-fast);
}

.site-footer a:hover {
    color: var(--color-dorado);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-7);
    padding-bottom: var(--sp-7);
    border-bottom: 1px solid rgba(250, 248, 243, 0.1);
}

@media (min-width: 768px) {
    .site-footer__grid {
        grid-template-columns: 2fr 1fr 1fr;
        gap: var(--sp-8);
    }
}

/* Columna de marca (más ancha) */
.site-footer__col--marca {
    max-width: 420px;
}

.site-footer__logo {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    color: var(--color-crema);
    margin-bottom: var(--sp-4);
}

.site-footer__tagline {
    color: rgba(250, 248, 243, 0.75);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--sp-5);
    font-style: italic;
}

.site-footer__tagline p {
    color: inherit;
    font-size: inherit;
    margin: 0;
    max-width: none;
}

.site-footer__contacto {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.site-footer__dato {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--color-dorado) !important;
}

/* Columnas de navegación */
.site-footer__col-titulo {
    font-family: var(--font-sans);
    font-size: var(--fs-pretitulo);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-dorado);
    margin-bottom: var(--sp-4);
}

.site-footer__col ul {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.site-footer__sin-url {
    color: rgba(250, 248, 243, 0.6);
    font-style: italic;
}

/* Barra inferior */
.site-footer__base {
    padding-top: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .site-footer__base {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.site-footer__copyright {
    font-size: var(--fs-caption);
    color: rgba(250, 248, 243, 0.5);
}

.site-footer__mencion-ue {
    font-size: var(--fs-caption);
    color: rgba(250, 248, 243, 0.5);
    font-style: italic;
}

.site-footer__mencion-ue p {
    color: inherit;
    font-size: inherit;
    margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 5. ELEMENTOS FLOTANTES
 * ══════════════════════════════════════════════════════════════════════════ */

.whatsapp-float {
    position: fixed;
    bottom: var(--sp-5);
    right: var(--sp-5);
    width: 56px;
    height: 56px;
    background: #25d366;
    color: white;
    border-radius: var(--br-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    font-size: 1.75rem;
    transition: transform var(--t-normal), box-shadow var(--t-normal);
    z-index: var(--z-fixed);
}

.whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-hover);
    color: white;
}

@media (min-width: 1024px) {
    /* En desktop lo ocultamos por defecto según decisión 9B */
    .whatsapp-float {
        display: none;
    }
    .whatsapp-float--desktop-visible {
        display: flex;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
 * 6. BOTÓN FLOTANTE DEL MENÚ — hg3 (06/05/2026)
 * ══════════════════════════════════════════════════════════════════════════
 * Aparece cuando el header se oculta al hacer scroll. Cuadrado con esquinas
 * redondeadas, fondo crema con blur, sombra suave. Opcionalmente lleva el
 * sello del logo a la izquierda y siempre lleva las tres rayas a la derecha.
 * Pulsarlo abre el mismo #mobile-menu que la hamburguesa del header.
 * ══════════════════════════════════════════════════════════════════════════ */

.floating-menu {
    position: fixed;
    top: var(--sp-3);
    right: var(--sp-3);
    z-index: calc(var(--z-sticky) + 1);

    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 6px 12px;
    height: 48px;

    background: rgba(250, 248, 243, var(--header-bg-opacity, 0.85));
    backdrop-filter: saturate(180%) blur(var(--header-blur, 4px));
    -webkit-backdrop-filter: saturate(180%) blur(var(--header-blur, 4px));
    border: 1px solid var(--color-crema-muy-oscuro);
    border-radius: var(--br-md);
    box-shadow: 0 6px 24px rgba(43, 32, 24, 0.12), 0 2px 6px rgba(43, 32, 24, 0.06);

    cursor: pointer;
    color: var(--color-texto);

    /* Estado inicial: invisible y un poco encogido.
       ib 06/05/2026: añadimos `visibility: hidden` como defensa para que,
       si por algún motivo opacity no se aplicara (ej. cache CSS vieja en
       móvil), el botón sigue oculto y no aparece como una "barra extra"
       debajo del header. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    pointer-events: none;
    transition: opacity 200ms ease-out,
                visibility 0s linear 200ms,
                transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow var(--t-fast);
}

/* Estado visible: el JS añade la clase .is-visible cuando el header está oculto */
.floating-menu.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition-delay: 0s;
}

.floating-menu:hover {
    box-shadow: 0 8px 28px rgba(43, 32, 24, 0.18), 0 3px 8px rgba(43, 32, 24, 0.10);
}

/* Logo de la insignia (opcional según ajuste header.minilogo_visible) */
.floating-menu__logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

/* Tres rayas tipo hamburguesa, idénticas al toggle del header */
.floating-menu__icono {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.floating-menu__icono span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--color-texto);
    transition: all var(--t-normal);
    transform-origin: center;
}

/* Cuando el menú móvil está abierto, las rayas se transforman en X igual
   que en la hamburguesa del header. */
.floating-menu[aria-expanded="true"] .floating-menu__icono span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.floating-menu[aria-expanded="true"] .floating-menu__icono span:nth-child(2) {
    opacity: 0;
}
.floating-menu[aria-expanded="true"] .floating-menu__icono span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* Si el usuario tiene activada la preferencia de reducir movimientos del SO,
   simplificamos las animaciones para no marear. */
@media (prefers-reduced-motion: reduce) {
    .site-header,
    .floating-menu,
    .floating-menu__icono span {
        transition: opacity 100ms linear !important;
    }
}

/* ═══ ni 19/05/2026: modo "solo hamburguesa flotante en móvil" ═════════
   Cuando el header tiene la clase .site-header--solo-hamburguesa-movil
   (activada por el ajuste header.solo_hamburguesa_movil), en pantallas
   menores de 1024px la barra superior desaparece por completo y el
   botón flotante con la hamburguesa pasa a ser la única navegación
   móvil, visible desde el primer momento.
   En pantallas >= 1024px (escritorio) este modo no afecta a nada y
   el comportamiento sigue siendo el de siempre.
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
    .site-header--solo-hamburguesa-movil {
        display: none;
    }
    /* El botón flotante asociado a este modo se muestra de inicio.
       Anulamos el estado "oculto inicial" (.floating-menu sin .is-visible).
       Réplica fiel de lo que hace .floating-menu.is-visible para que el
       botón sea interactivo y se vea con la misma apariencia. */
    .site-header--solo-hamburguesa-movil ~ .floating-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        transition-delay: 0s;
    }
    /* nifix3 19/05/2026: el menú móvil .mobile-menu está posicionado
       `top: var(--header-height)` para "colgarse" del header. Como aquí
       el header está oculto con display:none, esa altura se queda como
       un hueco entre el top de la pantalla y el menú; además, el
       border-top de 1px del menú (que con max-height:0 sigue dibujándose)
       aparece como una raya horizontal flotante. Lo subimos al top y
       quitamos ese borde. */
    .site-header--solo-hamburguesa-movil ~ #mobile-menu {
        top: 0;
        border-top: 0;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
 * MODO ESCAPARATE (nm 20/05/2026)
 *
 * Cuando el ajuste sitio.reservas_abiertas está en OFF, el body recibe la
 * clase `.reservas-cerradas`. La web sigue visible y operativa para mostrar
 * información, pero las funcionalidades de reserva quedan ocultas:
 *
 *   1. TODOS los enlaces a /reservar (en cualquier idioma): se ocultan.
 *      Esto cubre los botones del hero, tarifas, la_casa, footer,
 *      banner_ofertas, disponibilidad, el RESERVAR de la cabecera, etc.
 *      Y también los botones futuros que se añadan, sin tocar este CSS.
 *
 *   2. Bloques completos que dejan de tener sentido sin reservas:
 *      ofertas (incluye "ver todas las ofertas"), banner_ofertas y
 *      disponibilidad (calendario).
 *
 *   3. El bloque tarifas no se oculta entero porque también muestra
 *      precios informativos, pero sus botones de reservar sí se ocultan
 *      por la regla 1.
 *
 * La página /reservar se gestiona en PHP (muestra mensaje informativo en
 * lugar del formulario); no hace falta CSS para ella.
 * ══════════════════════════════════════════════════════════════════════════ */

body.reservas-cerradas a[href*="/reservar"] {
    display: none !important;
}
body.reservas-cerradas .bloque--ofertas,
body.reservas-cerradas .bloque--banner_ofertas,
body.reservas-cerradas .bloque--disponibilidad {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * CRÉDITO DE SOFTWARE EN FOOTER (nm 20/05/2026)
 *
 * Línea pequeña bajo el copyright del negocio que reconoce la autoría del
 * software. No competidora visualmente con el copyright principal de la
 * casa rural.
 * ══════════════════════════════════════════════════════════════════════════ */
.site-footer__software-credit {
    font-size: 0.75rem;
    opacity: 0.65;
    margin-top: 0.35rem;
    font-style: italic;
    letter-spacing: 0.02em;
}