/* ==========================================================================
   home-desktop.css — Desktop overrides (min-width breakpoints)
   Extracted from home.css for mobile-first organization.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop (>= 1280px)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  /* Hero: texto de saludo más destacado */
  .ht-hero-greeting {
    font-size: 1.4rem;
  }

  .ht-hero-name {
    font-size: 2rem;
  }

  /* Stories: más espacio entre elementos */
  .immersive-stories-wrapper {
    padding: 12px 24px;
  }

  .story-item {
    margin-right: 16px;
  }

  /* Agenda widget: aprovecha el ancho disponible */
  .agenda-widget-box {
    max-width: 100%;
  }

  .agenda-widget-slot {
    padding: 12px 16px;
  }
  .sidemenu-open .appBottomMenu {
    left: 290px;
    width: calc(100vw - 290px) !important;
}
.sidemenu-open .fixed-immersive-background {
        right: 0 !important;    /* Termina en el borde derecho de la pantalla */
        /* 1. Definimos la "caja" restando el espacio del sidebar */
        left: 290px !important; /* Empieza exactamente donde termina el menú */

        /* 2. Aplicamos los límites de tamaño */
        width: 100% !important; /* Que intente ocupar todo el espacio disponible... */
        max-width: 1140px !important; /* ...pero que NUNCA pase de 1140px */

        /* 3. La magia del centrado automático */
        margin: 0 auto !important; /* Al tener left y right fijados, esto lo centra perfectamente en el hueco restante */
    }

.appBottomMenu {
    /* 1. Posicionamiento para Escritorio (Centrado con Sidebar) */
    position: fixed !important;
    right: 0 !important;
    bottom: 32px !important;
    left: 290px !important;
    z-index: 1040 !important;
    width: 100% !important;
    max-width: 650px !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 auto !important;

    /* 2. EL TRUCO MÁGICO: Mezclar tu color primario con transparencia */
    /* Esto usa un 80% de tu color y un 20% de transparencia */
    background: color-mix(in srgb, var(--color-primary) 80%, transparent) !important;

    /* 4. EL BORDE DE CRISTAL (Bisel 3D con luz desde arriba) */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important; /* Brillo superior más fuerte */
    border-radius: var(--radius-pill) !important;

    /* 5. SOMBRAS MULTICAPA PARA FLOTACIÓN PERFECTA */
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12),      /* Sombra corta (contacto) */
        0 24px 64px rgba(0, 0, 0, 0.25),     /* Sombra profunda (flotación) */
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; /* Reflejo interno del cristal */

    /* 3. EL EFECTO CRISTAL (Blur + Saturación para que las fotos resalten) */
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    transform: none !important;
}

    /* 3. El contenedor interno (Asegurar distribución perfecta) */
    .appBottomMenu .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-evenly !important; /* Reparte el espacio por igual */
        height: 100% !important;
        padding: 8px 16px !important; /* Espacio interno de la píldora */
    }

    /* 4. Los Items (Icono + Texto) */
    .appBottomMenu .item {
        display: flex !important;
        flex: 1 !important; /* Cada botón ocupa exactamente lo mismo */
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 0 !important;
        color: rgba(255, 255, 255, 0.6) !important; /* Blanco apagado para los no activos */
        text-decoration: none !important;
        transition: var(--transition-fast) !important;
    }

    /* Estado Activo o Hover */
    .appBottomMenu .item:active,
    .appBottomMenu .item.active {
        color: var(--color-text-inverse) !important; /* Blanco brillante o usa tu #10b981 (Esmeralda) */
        transform: translateY(-2px) !important;
    }

    /* 5. Ajustes de Icono y Texto */
    .appBottomMenu .item i {
        padding-bottom: 0 !important; /* Limpiamos el pb-1 de tu HTML */
        margin-bottom: 4px !important;
        font-size: 24px !important;
        line-height: 1 !important;
    }

    .appBottomMenu .footer-icon-title {
        padding: 0 !important;
        margin: 0 !important;
        font-size: 0.65rem !important; /* Muy pequeño y legible */
        font-weight: var(--font-weight-semibold) !important;
        letter-spacing: 0.3px !important;
    }

    /* Ocultamos cualquier borde superior que pudiera tener la barra antigua */
    .appBottomMenu::before {
        display: none !important;
    }


}

/* --------------------------------------------------------------------------
   Desktop ancho (>= 1470px)
   -------------------------------------------------------------------------- */
@media (min-width: 1470px) {
  .ht-hero-greeting {
    font-size: 1.6rem;
  }

  .ht-hero-name {
    font-size: 2.4rem;
  }
}

/* ==========================================================================
   DESTACADOS COMO GRID (Unificacion de diseno)
   ========================================================================== */

@media (min-width: 992px) {
    .band {
        display: grid !important;
        /* Misma cuadrícula inteligente que usamos antes */
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
        gap: 24px !important;
        max-width: 1400px !important;
        padding: 0 40px 40px 40px !important;
        margin: 0 auto !important;
    }

    /* Forzamos que las tarjetas de destacados midan lo mismo que las demás */
    .band .ht-premium-card {
        width: 100% !important;
        height: 220px !important; /* Volvemos al formato apaisado/cuadrado */
        margin: 0 !important;
    }
}

/* ==========================================================================
   DESKTOP: SECCIONES Y GRIDS DE TARJETAS (Solo pantallas > 992px)
   ========================================================================== */

@media (min-width: 992px) {

    /* 1. EL TÍTULO DE SECCIÓN ("EL HOTEL") - Estilo Editorial */
    .content-section-header {
        display: block !important;
        margin: 32px 0 32px 0 !important; /* Mucho aire por arriba para separar secciones */
        text-align: center !important; /* Lo mantenemos centrado como en tu diseño */
        text-decoration: none !important;
    }

    .content-title {
        position: relative !important;
        display: inline-block !important;
        padding: 0 24px !important; /* Espacio para que las líneas no toquen el texto */
        margin: 0 !important;
        font-size: 1.95rem !important; /* Pequeño y elegante */
        font-weight: 800 !important;
        color: var(--color-text-body) !important; /* Gris pizarra */
        text-transform: uppercase !important;
        letter-spacing: 4px !important; /* Mucho espacio entre letras (Lujo) */
    }

    /* Las finas líneas laterales del título */
    .content-title::before,
    .content-title::after {
        position: absolute !important;
        top: 50% !important;
        width: 80px !important; /* Largo de la línea */
        height: 1px !important;
        content: "" !important;
        background-color: var(--color-border-strong) !important; /* Gris muy clarito */
    }
    .content-title::before { right: 100% !important; }
    .content-title::after { left: 100% !important; }


    /* 2. EL CONTENEDOR GRID (La magia del orden automático) */
    .ht-premium-grid {
        display: grid !important;
        /* Esto crea columnas automáticas que miden al menos 260px.
           Si la pantalla es enorme, cabrán 4 o 5. Si es más pequeña, 3. ¡Sin romper nada! */
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
        gap: 24px !important; /* Espacio perfecto entre tarjetas */
        max-width: 1400px !important; /* Límite para pantallas ultrawide */
        padding: 0 40px !important;
        margin: 0 auto !important;
    }

    /* 3. LAS TARJETAS (Aspecto físico y animación) */
    .ht-premium-card {
        position: relative !important;
        display: block !important;
        height: 220px !important; /* Altura fija para escritorio, ni muy bajas ni gigantes */
        overflow: hidden !important;
        cursor: pointer !important;
        border-radius: var(--radius-md) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease !important;
    }

    /* Efecto "Levitación" al pasar el ratón */
    .ht-premium-card:hover {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
        transform: translateY(-8px) !important;
    }

    /* 4. LA IMAGEN DE FONDO (Con efecto Zoom) */
    .ht-premium-card__bg {
        position: absolute !important;
        top: 0; left: 0;
        z-index: 1 !important; width: 100%; height: 100%;
    }

    .ht-premium-card__bg figure {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        background-position: center !important;
        background-size: cover !important;
        transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }

    /* Zoom al pasar el ratón */
    .ht-premium-card:hover .ht-premium-card__bg figure {
        transform: scale(1.08) !important;
    }

    /* 5. EL DEGRADADO OSCURO (Para que el texto blanco siempre se lea) */
    .ht-premium-card__gradient {
        position: absolute !important;
        bottom: 0; left: 0;
        z-index: 2 !important; width: 100%; height: 60%;
        pointer-events: none !important; /* El clic lo atraviesa */
        background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0) 100%) !important;
    }

    /* 6. EL CONTENIDO (Textos alineados al fondo) */
    .ht-premium-card__content {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 3 !important;
        width: 100% !important;
        padding: 20px !important;
        pointer-events: none !important;
    }

    .ht-premium-card__title {
        margin: 0 !important;
        font-size: 1.15rem !important;
        font-weight: var(--font-weight-bold) !important;
        line-height: 1.3 !important;
        color: var(--color-text-inverse) !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; /* Sombra de texto para máxima nitidez */
    }

    /* 7. ETIQUETA "RESERVAR" (El pequeño Badge tipo píldora) */
    .ht-premium-card__action {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        z-index: 4 !important;
        padding: 6px 14px !important;
        font-size: 0.7rem !important;
        font-weight: 800 !important;
        color: var(--color-text-heading) !important; /* Texto oscuro */
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        text-decoration: none !important;
        background: rgba(255, 255, 255, 0.9) !important; /* Blanco esmerilado */
        border-radius: var(--radius-pill) !important; /* Píldora */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        backdrop-filter: blur(4px) !important;
        transition: background 0.2s ease !important;
    }

    .ht-premium-card__action:hover {
        color: var(--color-success) !important; /* Se vuelve verde al pasar el ratón (opcional) */
        background: var(--color-bg-card) !important;
    }
}

/* ==========================================================================
   DESKTOP: STORIES INMERSIVOS (Solo para pantallas > 992px)
   ========================================================================== */

@media (min-width: 992px) {
.ht-hero-center-text {
    top: 35%;

}

    /* 2. Contenedor de las bolitas */
    .stories-scroll-container {
        display: flex !important;
        gap: 18px !important; /* Mucho más aire entre los círculos */
        padding-bottom: 5px !important;
        padding-left: 16px !important;
        overflow: visible !important; /* Evita que la sombra o el hover se corten */
        pointer-events: auto !important; /* ...reactivamos los clics solo aquí */
    }

    /* 3. El Círculo (La base mágica) */
    .story-item {
        margin: 0 !important; /* Limpiamos márgenes antiguos */
        cursor: pointer !important;
    }

    .story-circle {
        position: relative !important;
        width: 100px !important; /* TAMAÑO PREMIUM: Más grandes y elegantes */
        height: 100px !important;
        padding: 4px !important; /* El hueco exacto entre la foto y el anillo externo */
        border-radius: 50% !important;
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }


    /* Estado "Leído" (.read) */
    .story-item.read .story-ring {
        border-color: rgba(255, 255, 255, 0.2) !important; /* Se vuelve casi transparente, muy sutil */
        box-shadow: none !important;
    }

    /* 5. La Imagen de la Story */
    .story-image {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        background-color: var(--color-text-heading) !important; /* Color de fondo mientras carga */
        border-radius: 50% !important;
    }

    /* 6. EFECTO HOVER (El magnetismo al pasar el ratón) */
    .story-item:hover .story-circle {
        transform: scale(1.15) translateY(-8px) !important; /* El círculo sube y crece hacia ti */
    }

    .story-item:hover .story-ring {
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4) !important; /* La sombra se intensifica brutalmente */
    }
      body.sidemenu-open .header {
    top: 0px !important;
}
}