/* ==========================================================================
   HOTEL SOMBRERO DE PAJA - ESTILOS PRINCIPALES (FRONT-PAGE)
   ========================================================================== */

/* --- RESETEOS GLOBALES PARA MÓVILES --- */
html, body {
    box-sizing: border-box;
    overflow-x: hidden;
    width: 100%;
}

/* --- 1. HERO SECTION --- */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-base);
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Regla estricta: No deformar */
    object-position: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(58, 53, 50, 0.3), rgba(58, 53, 50, 0.6));
}

.hero-content {
    position: relative;
    z-index: var(--z-content);
    max-width: 800px;
    padding-top: 80px; /* Compensa la altura del header fijo */
    padding-left: 20px;
    padding-right: 20px;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .hero-content {
        padding-top: 50px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

.hero-title {
    color: var(--color-arena);
    font-size: var(--text-hero);
    margin-bottom: 20px;
    text-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.hero-subtitle {
    color: var(--color-arena);
    font-size: var(--text-lg);
    margin-bottom: 40px;
    opacity: 0.9;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.btn-cta-hero {
    display: inline-block;
    background: var(--color-oro-cobrizo);
    color: var(--color-blanco);
    padding: 16px 40px;
    border-radius: var(--border-radius-lg);
    font-size: var(--text-base);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: var(--shadow-btn);
    transition: var(--transition-smooth);
}

.btn-cta-hero:hover {
    background: var(--color-blanco);
    color: var(--color-oro-cobrizo);
    transform: translateY(-3px);
}

/* --- 2. SECCIÓN NOSOTROS --- */
.about-section {
    padding: 120px 20px;
}

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

@media (min-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.about-image-wrapper {
    position: relative;
}

.about-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: var(--border-radius-lg) 0 var(--border-radius-lg) 0; /* Toque orgánico asimétrico */
    box-shadow: var(--shadow-glass);
}

.about-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: var(--color-arena);
    padding: 20px;
    border-radius: 50%;
    box-shadow: var(--shadow-glass);
}

.about-badge span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: var(--color-tierra);
    color: var(--color-arena);
    border-radius: 50%;
    font-family: var(--font-titulos);
    font-size: var(--text-sm);
    text-align: center;
    line-height: 1.2;
}

.section-title {
    font-size: var(--text-2xl);
    color: var(--color-madera-oscura);
    margin-bottom: 15px;
}

.title-separator {
    width: 60px;
    height: 3px;
    background: var(--color-oro-cobrizo);
    margin-bottom: 30px;
}

.section-text {
    color: var(--color-tierra);
    margin-bottom: 30px;
    text-align: justify;
}

.section-text p {
    margin-bottom: 1.5rem;
}

.about-features {
    list-style: none;
    padding: 0;
}

.about-features li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    color: var(--color-madera-oscura);
    font-weight: 500;
}

/* --- 3. SECCIÓN EXPERIENCIAS (CARRUSEL NATIVO SIN JQUERY) --- */
.experiences-section {
    padding: 80px 0 120px;
    background: var(--color-blanco);
}

.carousel-track {
    display: flex;
    gap: 30px;
    padding: 20px 15px; /* Padding seguro para móviles */
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* Magia Nativa de Scroll */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Oculta barra en Firefox */
    box-sizing: border-box;
}

/* Responsive para desktop */
@media (min-width: 992px) {
    .carousel-track {
        padding: 20px 5%;
    }
}

.carousel-track::-webkit-scrollbar {
    display: none; /* Oculta barra en Chrome/Safari */
}

.carousel-card {
    position: relative;
    flex: 0 0 calc(100% - 30px); /* En móvil ajustado al ancho disponible */
    max-width: 400px;
    height: 500px;
    scroll-snap-align: center;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: transform 0.3s;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .carousel-card { 
        flex: 0 0 300px;
        max-width: none;
    }
    .carousel-track { justify-content: center; flex-wrap: wrap; overflow-x: hidden; } /* En escritorio se hace grid */
}

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

.carousel-card:hover img {
    transform: scale(1.05);
}

.card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 20px 20px;
    background: linear-gradient(to top, rgba(58,53,50,0.9), transparent);
    color: var(--color-arena);
}

.card-info h3 {
    font-family: var(--font-titulos);
    font-size: var(--text-xl);
    color: var(--color-blanco);
    margin-bottom: 5px;
}

/* ==========================================================================
   FASE 5: CATÁLOGO DE HABITACIONES Y SMART MODAL
   ========================================================================== */

/* --- Grid de Habitaciones --- */
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}

/* --- Tarjeta de Habitación --- */
.room-card {
    background: var(--color-blanco);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: var(--transition-smooth);
}

.room-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(58, 53, 50, 0.12);
}

/* --- Slider Interno --- */
.room-slider {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.room-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.room-img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Regla innegociable */
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.8);
    color: var(--color-madera-oscura);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition-smooth);
    opacity: 0;
    z-index: 20; /* Asegura que la flecha esté por encima de cualquier otra capa */
}

.room-slider:hover .slider-arrow { opacity: 1; }
.slider-arrow:hover { background: var(--color-blanco); color: var(--color-terracota); }
.prev-arrow { left: 10px; }
.next-arrow { right: 10px; }

/* --- Información de la Tarjeta --- */
.room-info {
    padding: 25px;
}

.room-title {
    font-size: var(--text-lg);
    margin-bottom: 10px;
    color: var(--color-madera-oscura);
}

.room-quick-features {
    display: flex;
    gap: 15px;
    font-size: var(--text-sm);
    color: var(--color-oliva);
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(140, 112, 95, 0.2);
    padding-bottom: 15px;
}

.room-price-row {
    margin-bottom: 20px;
}

.price-value {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-terracota);
}

.price-label {
    font-size: var(--text-sm);
    color: var(--color-tierra);
}

.room-buttons {
    display: flex;
    gap: 10px;
}

.btn-details {
    flex: 1;
    background: transparent;
    border: 1px solid var(--color-oro-cobrizo);
    color: var(--color-oro-cobrizo);
    padding: 10px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition-smooth);
}

.btn-details:hover {
    background: rgba(212, 163, 115, 0.1);
}

.btn-book {
    flex: 1;
    background: var(--color-oro-cobrizo);
    color: var(--color-blanco);
    text-align: center;
    padding: 10px;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    transition: var(--transition-smooth);
}

.btn-book:hover {
    background: var(--color-madera-oscura);
}

/* --- SMART MODAL (Z-Index Supremo) --- */
.smart-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Z-index establecido vía style en línea a var(--z-modal) */
}

.smart-modal.is-active {
    opacity: 1;
    visibility: visible;
}

.smart-modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(58, 53, 50, 0.6);
    backdrop-filter: blur(5px);
}

.smart-modal-content {
    position: relative;
    background: var(--color-arena);
    width: 90%;
    max-width: 600px;
    border-radius: var(--border-radius-md);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

.smart-modal.is-active .smart-modal-content {
    transform: translateY(0) scale(1);
}

.smart-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--color-blanco);
    color: var(--color-tierra);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow-glass);
    z-index: 2;
    transition: var(--transition-smooth);
}

.smart-modal-close:hover {
    color: var(--color-terracota);
    transform: rotate(90deg);
}

.smart-modal-body {
    padding: 40px;
}

.modal-badge {
    display: inline-block;
    background: var(--color-oliva);
    color: var(--color-blanco);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.modal-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.amenity-item {
    background: var(--color-blanco);
    border: 1px solid rgba(140, 112, 95, 0.2);
    color: var(--color-madera-oscura);
    padding: 8px 15px;
    border-radius: var(--border-radius-sm);
    font-size: var(--text-sm);
}

.modal-action-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 25px;
    border-top: 1px solid rgba(140, 112, 95, 0.2);
}

@media (max-width: 500px) {
    .modal-action-footer { flex-direction: column; gap: 20px; text-align: center; }
    .btn-cta-hero { width: 100%; }
}


/* ==========================================================================
   ACTUALIZACIÓN HOME: TEASERS DE RESTAURANTE Y EVENTOS
   ========================================================================== */

/* Botón Outline Personalizado (Para Nosotros y Restaurante) */
.btn-outline-custom {
    display: inline-block;
    padding: 12px 30px;
    border: 2px solid var(--color-oro-cobrizo);
    color: var(--color-oro-cobrizo);
    border-radius: var(--border-radius-lg);
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition-smooth);
    margin-top: 15px;
}

.btn-outline-custom:hover {
    background: var(--color-oro-cobrizo);
    color: var(--color-blanco);
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn);
}

/* Teaser Restaurante (Grid Invertido al de Nosotros) */
.home-teaser-rest {
    padding: 80px 20px 120px;
}

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

@media (min-width: 992px) {
    .teaser-rest-grid {
        grid-template-columns: 1fr 1fr;
    }
    /* Invertir el orden visual en PC para dar ritmo al diseño */
    .teaser-rest-text {
        order: 1;
        padding-left: 40px;
    }
    .teaser-rest-img-wrapper {
        order: 0;
    }
}

.teaser-rest-img-wrapper {
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-glass);
}

.teaser-rest-img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.teaser-rest-img-wrapper:hover .teaser-rest-img {
    transform: scale(1.05); /* Efecto interactivo suave */
}

/* Teaser Eventos (Banner Full Width) */
.home-teaser-events {
    position: relative;
    width: 100%;
    padding: 120px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .home-teaser-events {
        padding: 80px 15px;
    }
}

.ev-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.ev-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ev-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(58, 53, 50, 0.7); /* Capa oscura para legibilidad */
}

.ev-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.ev-title {
    color: var(--color-arena);
    font-size: var(--text-2xl);
    margin-bottom: 20px;
}

.ev-text {
    color: var(--color-arena);
    font-size: var(--text-base);
    opacity: 0.9;
    margin-bottom: 40px;
}


/* ==========================================================================
   FASE 7 y 8: HEADER INTELIGENTE (TECHO DE CHOZA Y LOGO VISUAL MEJORADO)
   ========================================================================== */

.site-header {
    position: fixed;
    top: -10px;
    left: 0;
    right: 0;
    width: 100%;
    padding: 12px 15px 0 15px !important;
    box-sizing: border-box !important;
    z-index: var(--z-header);
    background: linear-gradient(180deg, rgba(255, 246, 226, 0.96) 0%, rgba(247, 221, 164, 0.96) 35%, rgba(229, 187, 104, 0.94) 100%);
    background-image:
        radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.35), transparent 28%),
        repeating-linear-gradient(100deg, rgba(188, 138, 65, 0.08) 0px, rgba(188, 138, 65, 0.08) 4px, transparent 4px, transparent 10px);
    background-blend-mode: normal, multiply;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(177, 129, 60, 0.22);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, background-color 0.3s ease;
    overflow: visible !important;
}

.site-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 28px;
    background: linear-gradient(180deg, rgba(199, 141, 64, 0.34), transparent 80%);
    clip-path: polygon(0 100%, 5% 45%, 10% 100%, 15% 42%, 20% 100%, 25% 48%, 30% 100%, 35% 40%, 40% 100%, 45% 50%, 50% 100%, 55% 45%, 60% 100%, 65% 42%, 70% 100%, 75% 48%, 80% 100%, 85% 43%, 90% 100%, 95% 40%, 100% 100%);
    z-index: 5;
    pointer-events: none;
}

.site-header::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 0;
    width: 100%;
    height: 18px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='18' viewBox='0 0 160 18'%3E%3Cpath d='M0 10 Q 20 4, 40 12 Q 60 5, 80 14 Q100 6, 120 12 Q 140 5, 160 11' fill='none' stroke='%236d472e' stroke-width='2' stroke-linecap='round' opacity='0.28'/%3E%3Cpath d='M0 12 Q 20 8, 40 14 Q 60 9, 80 16 Q100 8, 120 14 Q 140 9, 160 13' fill='none' stroke='%23d4a373' stroke-width='2.5' stroke-linecap='round' opacity='0.45'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: auto 18px;
    z-index: 10;
    pointer-events: none;
}

/* Oculta el Header al bajar */
.site-header.header-hidden {
    transform: translateY(-100%);
}

/* Sombra y opacidad extra cuando se hace scroll */
.header-scrolled {
    box-shadow: var(--shadow-glass);
    background: rgba(245, 236, 216, 0.98);
}

/* --- ANIMACIÓN INTERACTIVA EN EL LOGO DEL SOMBRERO --- */
.site-logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    z-index: 11;
}

.site-logo-link:hover .header-logo-svg {
    transform: rotate(-12deg) scale(1.08);
}

/* --- Logo --- */
.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 11;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: relative;
}

.header-logo-img,
.header-logo-svg {
    display: block;
    width: 44px; /* reduce tamaño por defecto */
    min-width: 44px;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    border: none;
    transition: transform 0.35s ease, box-shadow 0.3s ease;
}

.site-logo {
    font-family: var(--font-titulos);
    font-size: 22px;
    font-weight: 700;
    color: #4e3611;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.65);
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

.site-logo:hover {
    color: #6b481d;
}

.nav-list a {
    position: relative;
    padding-bottom: 5px;
    color: #3b2411;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.16);
}

.nav-list a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--color-oro-cobrizo);
    transition: width 0.3s ease, left 0.3s ease;
}

.nav-list a:hover::after {
    width: 100%;
    left: 0;
}

.nav-list a:hover {
    color: #1f1108;
}

/* ==========================================================================
   DISEÑO VISUAL DEL HEADER Y NAVEGACIÓN
   ========================================================================== */

/* --- Contenedor Principal del Header --- */
.site-header > .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 72px;
    transition: var(--transition-smooth);
    padding: 8px 22px;
    position: relative;
    z-index: 11;
    width: auto !important;
    max-width: none !important;
    margin: 2px 5px !important; /*margen para derecha o izquierda*/
    background: linear-gradient(135deg, rgba(255, 240, 200, 0.95), rgba(248, 205, 127, 0.94), rgba(217, 161, 75, 0.90));
    border-radius: 48px; /* extremos redondeados */
    border: 1.8px solid rgba(243, 194, 112, 0.9); /* borde dorado */
    box-shadow: 0 10px 30px rgba(147, 100, 37, 0.25);
    box-sizing: border-box !important;
}

@media (min-width: 1400px) {
    .header-inner {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .header-inner {
        height: 70px;
        padding: 0 15px;
    }
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .site-logo {
        font-size: 18px;
    }
}

/* --- Menú Desktop --- */
.desktop-nav {
    display: none;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 35px;
    align-items: center;
}

/* Centrar la navegación dentro de la cápsula */
.nav-list {
    margin: 0 auto;
}

.nav-list a {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #3b2411; /* texto oscuro para mejor contraste */
    padding: 10px 6px;
    position: relative;
}

.nav-list .current-menu-item > a,
.nav-list .current_page_item > a,
.nav-list .current_page_parent > a {
    color: #5b320a;
    font-weight: 800;
}

.nav-list .current-menu-item > a::before,
.nav-list .current_page_item > a::before,
.nav-list .current_page_parent > a::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 221, 125, 1), rgba(215, 151, 53, 1));
    transition: width 0.35s ease;
}

.nav-list .current-menu-item > a:hover::before,
.nav-list .current_page_item > a:hover::before,
.nav-list .current_page_parent > a:hover::before,
.nav-list .current-menu-item > a::before,
.nav-list .current_page_item > a::before,
.nav-list .current_page_parent > a::before {
    width: 60%;
}

@media (min-width: 992px) {
    .desktop-nav {
        display: block;
    }
}

/* --- Botón Reservar (Desktop & Mobile) --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: calc(var(--z-header) + 1);
}
.btn-reservar {
    background: rgba(223, 166, 86, 0.22);
    color: #3d210d;
    padding: 10px 22px;
    border-radius: 999px; /* cápsula */
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* CAMBIO 1: Borde oscuro sólido y elegante para máximo contraste */
    border: 2.2px solid #3b2411; 
    
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    transition: all 0.28s ease;
    
    /* CAMBIO 2: Lo desplazamos un poco a la izquierda alejándolo del borde derecho */
    margin-right: 15px; 
}

/* Responsive para tablets */
@media (max-width: 768px) {
    .btn-reservar {
        padding: 10px 20px;
        font-size: 12px;
    }
}

.btn-reservar:hover {
    background: linear-gradient(90deg, rgba(208, 148, 52, 1), rgba(190, 129, 45, 1));
    color: #21130c;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 30px rgba(152, 103, 37, 0.32);
}

/* Ocultar botón reservar en móviles muy pequeños para dar espacio al logo */
@media (max-width: 480px) {
    .header-actions .btn-reservar {
        display: none;
    }
}

/* --- Botón Hamburguesa (Animación de 3 líneas a X) --- */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    cursor: pointer;
    z-index: calc(var(--z-drawer) + 2); /* Siempre por encima del drawer */
    margin-left: 35px !important;
    position: relative;
    left: -10px;
}

@media (min-width: 992px) {
    .menu-toggle {
        display: none;
    }
}

.menu-toggle .bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-madera-oscura);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: left center;
}

/* Estado Activo de la Hamburguesa (X) */
.menu-toggle.is-active .bar:nth-child(1) {
    transform: rotate(45deg);
    background-color: var(--color-terracota);
}
.menu-toggle.is-active .bar:nth-child(2) {
    opacity: 0;
    transform: translateX(20px); /* Se esconde hacia la derecha */
}
.menu-toggle.is-active .bar:nth-child(3) {
    transform: rotate(-45deg);
    background-color: var(--color-terracota);
}

/* --- Mobile Drawer (Menú Lateral Elegante) --- */
.mobile-drawer {
    position: fixed;
    top: 0;
    right: -100%; /* Oculto por defecto */
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: linear-gradient(135deg, var(--color-arena) 0%, rgba(247, 236, 226, 0.98) 100%);
    z-index: var(--z-drawer);
    padding: 80px 35px 40px;
    box-shadow: -15px 0 50px rgba(0,0,0,0.25), inset -1px 0 0 rgba(255,255,255,0.3);
    transition: right 0.45s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    backdrop-filter: blur(8px);
}

.mobile-drawer.is-open {
    right: 0;
}

.mobile-drawer-header {
    margin-bottom: 45px;
    padding-bottom: 30px;
    border-bottom: 2px solid rgba(212, 163, 115, 0.3);
    position: relative;
}

.mobile-drawer-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-oro-cobrizo), transparent);
}

.mobile-logo {
    font-family: var(--font-titulos);
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #5b320a 0%, var(--color-terracota) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    text-shadow: none;
    transition: transform 0.3s ease;
}

.mobile-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.mobile-nav-list li {
    position: relative;
    overflow: hidden;
}

.mobile-nav-list a {
    position: relative;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-principal);
    color: var(--color-madera-oscura);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: transparent;
    border: 1px solid transparent;
}

.mobile-nav-list a::before {
    content: '→';
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-weight: 700;
}

.mobile-nav-list a:hover {
    color: var(--color-blanco);
    background: linear-gradient(135deg, var(--color-oro-cobrizo) 0%, #e5b787 100%);
    border-color: var(--color-oro-cobrizo);
    padding-left: 22px;
    box-shadow: 0 6px 20px rgba(212, 163, 115, 0.3);
}

.mobile-nav-list a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.mobile-drawer-footer {
    margin-top: auto;
    padding-top: 35px;
    border-top: 2px solid rgba(212, 163, 115, 0.2);
}

.mobile-drawer-footer .btn-reservar {
    display: block !important;
    width: 100%;
    text-align: center;
    padding: 16px 22px !important;
    font-size: 13px !important;
    font-weight: 800;
    letter-spacing: 1.5px;
    background: linear-gradient(135deg, var(--color-oro-cobrizo) 0%, #e5b787 100%) !important;
    color: var(--color-madera-oscura) !important;
    border: 2px solid var(--color-oro-cobrizo) !important;
    border-radius: 12px;
    margin-top: 20px;
    box-shadow: 0 8px 25px rgba(212, 163, 115, 0.35) !important;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.mobile-drawer-footer .btn-reservar:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 12px 35px rgba(212, 163, 115, 0.5) !important;
    background: linear-gradient(135deg, #e5b787 0%, var(--color-oro-cobrizo) 100%) !important;
}

/* --- Overlay del Drawer --- */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(58, 53, 50, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: calc(var(--z-drawer) - 1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.drawer-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* --- ESTILOS DEL FOOTER MEJORADO --- */
.footer-nav-list { list-style: none; padding: 0; margin: 0; }
.footer-nav-list li { margin-bottom: 12px; }
.footer-nav-list a { color: var(--color-arena); opacity: 0.8; transition: var(--transition-smooth); font-size: var(--text-sm); }
.footer-nav-list a:hover { opacity: 1; color: var(--color-oro-cobrizo); padding-left: 8px; }

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;  /* Antes era 40px */
    height: 60px; /* Antes era 40px */
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-arena);
    transition: all 0.3s ease;
}
.social-icon:hover {
    background: var(--color-oro-cobrizo);
    color: var(--color-blanco);
    transform: translateY(-3px);
}

.social-icon svg {
    width: 32px;
    height: 32px;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .social-icon svg {
        width: 24px;
        height: 24px;
    }
}

.footer-newsletter input:focus {
    outline: none;
    border-color: var(--color-oro-cobrizo) !important;
    background: rgba(255,255,255,0.05) !important;
}

.footer-newsletter button:hover {
    background: var(--color-arena) !important;
    color: var(--color-madera-oscura) !important;
}

.footer-bottom a:hover {
    color: var(--color-oro-cobrizo);
}

/* ==========================================================================
   CORRECCIONES FASE 8: WHATSAPP, REDES SOCIALES Y TRANSICIONES DE SECCIÓN
   ========================================================================== */



/* --- 2. COLORES ORIGINALES PARA REDES SOCIALES --- */
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    color: #ffffff !important;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .social-icon {
        width: 48px;
        height: 48px;
    }
}

/* Color por defecto: Instagram */
.social-icon.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    box-shadow: 0 4px 10px rgba(214, 36, 159, 0.2);
}

/* Color por defecto: Facebook */
.social-icon.facebook {
    background: #1877F2;
    box-shadow: 0 4px 10px rgba(24, 119, 242, 0.2);
}

/* Animación al pasar el ratón */
.social-icon:hover {
    transform: translateY(-4px) scale(1.1);
}
.social-icon.instagram:hover {
    box-shadow: 0 6px 15px rgba(214, 36, 159, 0.5);
}
.social-icon.facebook:hover {
    box-shadow: 0 6px 15px rgba(24, 119, 242, 0.5);
}
/* Color por defecto: TikTok */
.social-icon.tiktok {
    background: #000000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Color por defecto: YouTube */
.social-icon.youtube {
    background: #FF0000;
    box-shadow: 0 4px 10px rgba(255, 0, 0, 0.2);
}

/* Animación Hover extra para TikTok y YouTube */
.social-icon.tiktok:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6), -2px -2px 5px #00f2fe, 2px 2px 5px #fe0979; /* Efecto Glow estilo TikTok */
}
.social-icon.youtube:hover {
    box-shadow: 0 6px 15px rgba(255, 0, 0, 0.5);
}

/* ==========================================================================
   SISTEMA DE BOTONES FLOTANTES (SCROLL TOP + WA PILL + SOMBRERITO)
   ========================================================================== */

.floating-actions-container {
    position: fixed;
    bottom: 30px;
    right: 15px; /* <--- Movido más a la derecha (antes era 30px) */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
    z-index: 9999;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .floating-actions-container {
        bottom: 20px;
        right: 10px;
        gap: 10px;
    }
}

/* Responsive para móviles muy pequeños */
@media (max-width: 480px) {
    .floating-actions-container {
        bottom: 15px;
        right: 8px;
        gap: 8px;
    }
}

/* --- Botón Volver Arriba --- */
.scroll-top-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--color-oro-cobrizo);
    color: var(--color-madera-oscura);
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(212, 163, 115, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Clase que inyectará JS al hacer scroll */
.scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(212, 163, 115, 0.6);
    background: var(--color-arena);
}

/* --- WhatsApp Circular Gigante --- */
.whatsapp-float-circle {
    background: #25D366;
    color: #FFF;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .whatsapp-float-circle {
        width: 55px;
        height: 55px;
    }
}

.whatsapp-float-circle:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.6);
    background: #20C05C;
}

.wa-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-svg {
    width: 36px;
    height: 36px;
    z-index: 1;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .wa-svg {
        width: 28px;
        height: 28px;
    }
}

/* El Sombrerito de Paja mágico (Más Grande Aún) */
.wa-hat {
    position: absolute;
    width: 70px;      /* Tamaño majestuoso */
    height: 52px;
    top: -26px;       
    right: -20px;     
    left: auto;       
    transform: rotate(25deg); 
    z-index: 2;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    animation: hatGlow 2s infinite alternate ease-in-out;
}

/* Responsive para móviles - Sombrero más pequeño */
@media (max-width: 768px) {
    .wa-hat {
        width: 55px;
        height: 42px;
        top: -20px;
        right: -15px;
    }
}

@keyframes hatGlow {
    0% { filter: drop-shadow(2px 4px 3px rgba(0,0,0,0.4)) drop-shadow(0 0 5px rgba(229, 183, 135, 0.5)); }
    100% { filter: drop-shadow(2px 4px 3px rgba(0,0,0,0.4)) drop-shadow(0 0 20px rgba(229, 183, 135, 1)); }
}

.whatsapp-float-circle:hover .wa-hat {
    transform: rotate(15deg) translateY(-5px) scale(1.1); 
    filter: drop-shadow(2px 8px 5px rgba(0,0,0,0.3)) drop-shadow(0 0 25px rgba(229, 183, 135, 1));
}

/* --- FIRMA DEL DESARROLLADOR (LC) --- */
.dev-lc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--color-oro-cobrizo); /* Borde dorado inicial */
    color: var(--color-oro-cobrizo);
    font-family: var(--font-principal);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dev-lc-badge:hover {
    background: var(--color-oro-cobrizo); /* Se rellena de dorado */
    color: var(--color-madera-oscura);    /* Texto oscuro para contraste */
    box-shadow: 0 0 15px rgba(212, 163, 115, 0.6); /* Brillo dorado espectacular */
    transform: translateY(-2px) scale(1.05);
}


/* ==========================================================================
   FILTROS DE HABITACIONES Y BADGE DE CATEGORÍA
   ========================================================================== */

/* --- BARRA DE FILTROS (ESTRUCTURA BASE) --- */
.room-filters-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 50px;
    padding: 15px 0;
    background: var(--color-arena);
    /* Transición suave para top coordinada con la velocidad del Header */
    transition: box-shadow 0.3s ease, top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    z-index: 50; /* Por debajo del header */
}

/* --- ESTADO FIJO (STICKY) --- */
.room-filters-wrapper.is-sticky {
    position: fixed;
    left: 0;
    right: 0;
    /* El top lo maneja dinámicamente JavaScript (0px o altura del Header) */
    z-index: 99; /* Por encima de las habitaciones pero bajo el header (100) */
    padding: 15px 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(247, 245, 240, 0.95); /* Color arena opaco para cubrir el texto inferior */
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(140, 112, 95, 0.1);
}

.room-filter-btn {
    background: transparent;
    border: 2px solid rgba(140, 112, 95, 0.2);
    color: var(--color-tierra);
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.room-filter-btn:hover {
    border-color: var(--color-oro-cobrizo);
    color: var(--color-oro-cobrizo);
}

.room-filter-btn.active {
    background: var(--color-oro-cobrizo);
    border-color: var(--color-oro-cobrizo);
    color: var(--color-blanco);
    box-shadow: 0 4px 15px rgba(212, 163, 115, 0.4);
}

/* Etiqueta Flotante (Badge) en la Tarjeta */
.room-cat-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(5px);
    color: var(--color-madera-oscura);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Animación de Filtrado */
.room-filter-item {
    transition: transform 0.4s ease, opacity 0.4s ease;
    animation: popIn 0.5s ease forwards;
}

.hide-room {
    display: none !important;
}

@keyframes popIn {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   HERO ANIMADO COMPARTIDO Y BOTONES TIPO PÍLDORA (GLOBAL)
   ========================================================================== */

/* --- HERO ANIMADO VIBRANTE (Fiesta / Lujo) --- */
.hero-eventos-vivo {
    position: relative;
    width: 100%;
    height: 70vh; 
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.hero-bg-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}

.hero-gradient-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(30, 28, 26, 0.4), rgba(30, 28, 26, 0.8));
    z-index: 2;
}

/* Efecto Ken Burns (Cámara lenta) */
.ken-burns-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    animation: kenBurns 20s ease-out infinite alternate;
}

@keyframes kenBurns {
    0% { transform: scale(1); }
    100% { transform: scale(1.12); }
}

/* Filtraciones de luz animadas */
.light-leak {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    mix-blend-mode: screen;
    z-index: 3;
    pointer-events: none;
    animation: moveLeak 10s infinite alternate ease-in-out;
}

.leak-1 {
    width: 40vw; height: 40vw;
    background: rgba(212, 163, 115, 0.4); 
    top: -20%; left: -10%;
}

.leak-2 {
    width: 50vw; height: 50vw;
    background: rgba(183, 110, 88, 0.3); 
    bottom: -20%; right: -10%;
    animation-delay: -3s;
}

@keyframes moveLeak {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(15%, 15%) scale(1.3); }
}

.hero-title-events {
    font-family: var(--font-titulos);
    font-size: clamp(3rem, 5vw, 5rem);
    color: var(--color-blanco);
    line-height: 1.1;
    margin-bottom: 20px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.hero-subtitle-events {
    font-size: var(--text-xl);
    color: rgba(255,255,255,0.9);
    letter-spacing: 1px;
}

/* --- BOTONES EN EL HERO --- */
.hero-buttons-events {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 35px;
    flex-wrap: wrap; 
}


/* --- BOTONES DORADOS CON CIRCUITO DE BRILLO INTENSO --- */
.btn-group-hero {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap; /* Permite apilarse en móviles de forma adaptativa */
    padding: 0 20px;
}

.btn-glow-pill {
    position: relative;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 13px; /* Tamaño perfecto para legibilidad móvil */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden; /* Corta la estela giratoria para dejar solo el contorno */
    border: none;
    color: #111 !important;
    background: #D4A373;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
    min-width: 200px;
    text-align: center;
    box-sizing: border-box;
    
    /* ANIMACIÓN 1: El botón respira suavemente con una luz dorada de fondo */
    animation: pulseAura 3s infinite alternate ease-in-out;
}

/* ANIMACIÓN 2: El circuito giratorio brillante de alta visibilidad (Blanco + Oro puro) */
.btn-glow-pill::before {
    content: '';
    position: absolute;
    top: -150%; left: -150%;
    width: 400%; height: 400%;
    /* Gradiente cónico con punta blanca pura y cuerpo dorado de alta saturación */
    background: conic-gradient(
        transparent, 
        rgba(212, 163, 115, 0.1) 60%, 
        var(--color-oro-cobrizo) 85%, 
        #ffffff 100%
    );
    animation: rotateGlow 3s linear infinite; /* Giro rápido y continuo */
    z-index: -2;
}

/* Tapa interior para crear un borde perfecto de 2px */
.btn-glow-pill::after {
    content: '';
    position: absolute;
    inset: 2px; /* Grosor del borde brillante */
    background: #D4A373; /* Fondo dorado idéntico */
    border-radius: 48px;
    z-index: -1;
    transition: background 0.3s ease;
}

/* En móviles se expanden al ancho disponible para mejor experiencia táctil */
@media (max-width: 480px) {
    .btn-glow-pill {
        width: 100%;
        max-width: 280px;
    }
}

/* --- KEYFRAMES DE ANIMACIONES (Hardware-Accelerated) --- */

/* Animación del circuito giratorio */
@keyframes rotateGlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animación de pulsación de luz en reposo */
@keyframes pulseAura {
    0% { 
        box-shadow: 0 4px 12px rgba(212, 163, 115, 0.3); 
    }
    100% { 
        box-shadow: 0 6px 24px rgba(212, 163, 115, 0.65); /* Expansión de luz sutil */
    }
}

/* Hover interactivo con destello expansivo */
.btn-glow-pill:hover {
    transform: translateY(-4px) scale(1.02);
    /* Al pasar el ratón, emite un resplandor volumétrico dorado espectacular */
    box-shadow: 0 0 30px 6px rgba(212, 163, 115, 0.75);
    background: #E5B787;
}

.btn-glow-pill:hover::after {
    background: #E5B787; /* Sincroniza el fondo en hover */
}



/* ==========================================================================
   HERO SLIDESHOW "FLYING COLLAGE" 4-FOTOS (PORTADA 5 ESTRELLAS)
   ========================================================================== */

/* Variables Matemáticas para adaptar las 4 fotos a Celulares y PC */
:root {
    --s-col: 0.35; /* Tamaño en Móvil */
    --tx-1: -15vw; --ty-1: -25vh;
    --tx-2: -18vw; --ty-2: 25vh;
    --tx-3: 15vw;  --ty-3: -25vh;
    --tx-4: 18vw;  --ty-4: 25vh;
}
@media (min-width: 992px) {
    :root {
        --s-col: 0.22; /* Tamaño en PC */
        --tx-1: -28vw; --ty-1: -22vh; /* Arriba Izquierda */
        --tx-2: -26vw; --ty-2: 24vh;  /* Abajo Izquierda */
        --tx-3: 28vw;  --ty-3: -20vh; /* Arriba Derecha */
        --tx-4: 26vw;  --ty-4: 22vh;  /* Abajo Derecha */
    }
}

.hero-slideshow-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    background: var(--color-madera-oscura) center/cover no-repeat;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    will-change: transform, opacity, border-radius;
    animation-duration: 10s; /* Ciclo completo de 12 segundos */
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.slide-1 { animation-name: flight1; }
.slide-2 { animation-name: flight2; }
.slide-3 { animation-name: flight3; }
.slide-4 { animation-name: flight4; }

/* Capa oscura central (Va por detrás de las fotos encogidas pero sobre la foto grande) */
.hero-gradient-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(40, 35, 30, 0.4) 0%, rgba(20, 18, 15, 0.8) 100%);
    z-index: 10;
}

/* Luces ambientales */
.home-leaks { z-index: 15; }

/* --- MATEMÁTICA DE VUELO Y ACUMULACIÓN --- */

/* FOTO 1 (Arriba Izquierda) */
@keyframes flight1 {
    0%, 15% { opacity: 1; transform: scale(1.05); border-radius: 0; z-index: 1; border: 0px solid transparent; box-shadow: none; }
    15.1% { z-index: 21; } /* Salta al frente */
    20%, 85% { opacity: 1; transform: translate(var(--tx-1), var(--ty-1)) scale(var(--s-col)) rotate(-8deg); border-radius: 30px; border: 12px solid var(--color-arena); z-index: 21; box-shadow: 0 30px 60px rgba(0,0,0,0.8); }
    86%, 92% { opacity: 0; transform: translate(var(--tx-1), var(--ty-1)) scale(var(--s-col)) rotate(-8deg); z-index: 21; }
    95% { opacity: 0; transform: scale(1); z-index: 1; }
    100% { opacity: 1; transform: scale(1.05); z-index: 1; border-radius: 0; border: 0px solid transparent; }
}

/* FOTO 2 (Abajo Izquierda) */
@keyframes flight2 {
    0%, 15% { opacity: 0; transform: scale(1); z-index: 2; border-radius: 0; border: 0px solid transparent; box-shadow: none;}
    20%, 35% { opacity: 1; transform: scale(1.05); z-index: 2; border-radius: 0; border: 0px solid transparent; box-shadow: none;}
    35.1% { z-index: 22; }
    40%, 85% { opacity: 1; transform: translate(var(--tx-2), var(--ty-2)) scale(var(--s-col)) rotate(6deg); border-radius: 30px; border: 12px solid var(--color-arena); z-index: 22; box-shadow: 0 30px 60px rgba(0,0,0,0.8); }
    86%, 100% { opacity: 0; transform: translate(var(--tx-2), var(--ty-2)) scale(var(--s-col)) rotate(6deg); z-index: 22; }
}

/* FOTO 3 (Arriba Derecha) */
@keyframes flight3 {
    0%, 35% { opacity: 0; transform: scale(1); z-index: 3; border-radius: 0; border: 0px solid transparent; box-shadow: none;}
    40%, 55% { opacity: 1; transform: scale(1.05); z-index: 3; border-radius: 0; border: 0px solid transparent; box-shadow: none;}
    55.1% { z-index: 23; }
    60%, 85% { opacity: 1; transform: translate(var(--tx-3), var(--ty-3)) scale(var(--s-col)) rotate(8deg); border-radius: 30px; border: 12px solid var(--color-arena); z-index: 23; box-shadow: 0 30px 60px rgba(0,0,0,0.8); }
    86%, 100% { opacity: 0; transform: translate(var(--tx-3), var(--ty-3)) scale(var(--s-col)) rotate(8deg); z-index: 23; }
}

/* FOTO 4 (Abajo Derecha) */
@keyframes flight4 {
    0%, 55% { opacity: 0; transform: scale(1); z-index: 4; border-radius: 0; border: 0px solid transparent; box-shadow: none;}
    60%, 75% { opacity: 1; transform: scale(1.05); z-index: 4; border-radius: 0; border: 0px solid transparent; box-shadow: none;}
    75.1% { z-index: 24; }
    80%, 85% { opacity: 1; transform: translate(var(--tx-4), var(--ty-4)) scale(var(--s-col)) rotate(-6deg); border-radius: 30px; border: 12px solid var(--color-arena); z-index: 24; box-shadow: 0 30px 60px rgba(0,0,0,0.8); }
    86%, 100% { opacity: 0; transform: translate(var(--tx-4), var(--ty-4)) scale(var(--s-col)) rotate(-6deg); z-index: 24; }
}


/* ==========================================================================
   ANIMACIONES Y BOTONES GLOBALES (COMPARTIDOS EN TODA LA WEB)
   ========================================================================== */

/* --- Animaciones de Entrada (Scroll Reveal) --- */
.reveal-left { opacity: 0; transform: translateX(-60px); transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); }
.reveal-right { opacity: 0; transform: translateX(60px); transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); }
.reveal-up { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); }
.is-visible { opacity: 1; transform: translate(0, 0); }

/* --- Botón Dorado (Píldora Principal) --- */
.btn-cotizar-pill {
    display: inline-block;
    background: #D4A373;
    color: #111 !important;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px 38px;
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(212, 163, 115, 0.4);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn-cotizar-pill:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 30px rgba(212, 163, 115, 0.6);
    background: #E5B787;
}

/* --- Botón Transparente (Píldora Secundaria) --- */
.btn-outline-pill {
    display: inline-block;
    background: transparent;
    color: var(--color-arena);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 13px 36px;
    border: 2px solid var(--color-oro-cobrizo);
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none;
    cursor: pointer;
}

.btn-outline-pill:hover {
    background: var(--color-oro-cobrizo);
    color: var(--color-madera-oscura) !important;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 30px rgba(212, 163, 115, 0.4);
}

.footer-nav-list { list-style: none; padding: 0; margin: 0; }
.footer-nav-list li { margin-bottom: 12px; }
.footer-nav-list a { 
    color: var(--color-arena); 
    opacity: 0.8; 
    transition: all 0.3s ease; 
    font-size: 14px;
    text-decoration: none;
}
.footer-nav-list a:hover { 
    opacity: 1; 
    color: var(--color-oro-cobrizo); 
    padding-left: 8px; 
}

.footer-title {
    color: var(--color-oro-cobrizo);
    font-family: var(--font-titulos);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

.footer-map-box {
    display: block;
    width: 200px;
    height: 120px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--color-oro-cobrizo);
}

.footer-map-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.map-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    opacity: 0;
    transition: 0.3s;
}

.footer-map-box:hover .map-overlay {
    opacity: 1;
}



/* ==========================================================================
   NUEVA SECCIÓN: CUADRO DE CAPACIDADES Y PLANO DE DISTRIBUCIÓN
   ========================================================================== */


/* Efectos para la tabla de capacidades */
.cap-table th {
    font-family: var(--font-principal);
    font-weight: 700;
}

.cap-table tr {
    transition: background 0.3s ease;
}

.cap-table tr:hover {
    background: rgba(140, 112, 95, 0.05); /* Efecto de fila activa */
}

/* Scrollbar personalizado para la tabla en móviles */
.table-responsive::-webkit-scrollbar {
    height: 6px;
}
.table-responsive::-webkit-scrollbar-track {
    background: rgba(140, 112, 95, 0.05);
}
.table-responsive::-webkit-scrollbar-thumb {
    background: var(--color-oro-cobrizo);
    border-radius: 10px;
}

/* Efecto hover y zoom para el plano */
.plano-preview-card:hover .plano-zoom-overlay {
    opacity: 1 !important;
}

.plano-preview-card:hover img {
    transform: scale(1.05);
}

.plano-img-wrapper img {
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- BOTÓN DE DETALLES DENTRO DEL CUADRO DE CAPACIDADES --- */
.btn-table-detail {
    display: inline-block;
    background: var(--color-oro-cobrizo);
    color: var(--color-madera-oscura) !important;
    font-weight: 700;
    font-size: 11px; /* Letra pequeña y distinguida */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    border-radius: 30px; /* Estilo píldora */
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 10px rgba(212, 163, 115, 0.2);
}

.btn-table-detail:hover {
    background: var(--color-madera-oscura);
    color: var(--color-oro-cobrizo) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(58, 53, 50, 0.3);
}


/* --- BOTÓN COTIZAR DENTRO DEL CONTENEDOR DE TABS DEL SALÓN --- */
.btn-cotizar-salon {
    display: inline-block;
    background: var(--color-oro-cobrizo);
    color: var(--color-madera-oscura) !important;
    font-weight: 700;
    font-size: 11px; /* Letra pequeña y refinada */
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 24px;
    border-radius: 30px; /* Estilo píldora */
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(212, 163, 115, 0.2);
}

.btn-cotizar-salon:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 163, 115, 0.4);
    background: #E5B787; /* Brillo dorado más claro */
}

/* Ajustes de flexbox para móviles en la barra de pestañas */
@media (max-width: 500px) {
    .salon-tab-buttons {
        flex-direction: column;
        align-items: stretch !important;
    }
    .tab-toggles {
        width: 100%;
        justify-content: space-between;
    }
    .btn-cotizar-salon {
        text-align: center;
        width: 100%;
        padding: 12px;
    }
}

/* --- OPTIMIZACIÓN Y RELIEVE DEL LOGOTIPO (IMAGEN Y SVG) --- */
.header-logo-img {
    height: 48px !important; /* tamaño reducido para la imagen del logo */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(58, 53, 50, 0.12)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    transition: transform 0.35s ease !important;
}

.header-logo-svg {
    width: 40px !important; /* tamaño reducido para SVG */
    height: 40px !important;
    filter: drop-shadow(0 4px 12px rgba(58, 53, 50, 0.12)) !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Animación interactiva de ladeado en hover para ambos tipos de logo */
.site-logo-link:hover .header-logo-img,
.site-logo-link:hover .header-logo-svg {
    transform: rotate(-10deg) scale(1.08) !important;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.18) !important;
}


/* ==========================================================================
   ACTUALIZACIÓN MENÚ MÓVIL: TEXTURAS, BOTÓN CERRAR Y EFECTO EN CASCADA
   ========================================================================== */

/* Rediseño del fondo del menú con micro-fibras cruzadas ultra-tenues */
.mobile-drawer {
    background-color: var(--color-arena) !important;
    background-image: 
        radial-gradient(circle at 100% 0%, rgba(212, 163, 115, 0.08), transparent 60%),
        repeating-linear-gradient(135deg, rgba(212, 163, 115, 0.015) 0px, rgba(212, 163, 115, 0.015) 1px, transparent 1px, transparent 8px) !important;
    background-size: 100% 100% !important;
}

/* Botón de Cierre Delicado (X) */
.mobile-drawer-close {
    background: transparent;
    border: none;
    color: var(--color-tierra);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    outline: none;
}

.mobile-drawer-close:hover {
    color: var(--color-terracota);
    background: rgba(140, 112, 95, 0.05);
    transform: rotate(90deg) scale(1.1); /* Rotación fluida en hover */
}

/* --- ANIMACIÓN EN CASCADA (STAGGER) PARA LOS ENLACES EN MÓVIL --- */
.mobile-nav-list li {
    transform: translateX(40px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
}

/* Cuando el menú se abre, disparamos las animaciones secuenciales */
.mobile-drawer.is-open .mobile-nav-list li {
    transform: translateX(0);
    opacity: 1;
}

/* Desfases de tiempo milimétricos para que entren uno tras otro */
.mobile-drawer.is-open .mobile-nav-list li:nth-child(1) { transition-delay: 0.08s; }
.mobile-drawer.is-open .mobile-nav-list li:nth-child(2) { transition-delay: 0.16s; }
.mobile-drawer.is-open .mobile-nav-list li:nth-child(3) { transition-delay: 0.24s; }
.mobile-drawer.is-open .mobile-nav-list li:nth-child(4) { transition-delay: 0.32s; }


/* ==========================================================================
   RULETA DE TEXTO INTERACTIVA EN EL LOGO (PREVENT JITTER)
   ========================================================================== */

.logo-text-ticker {
    display: inline-block;
    height: 30px; /* Altura de la línea de texto */
    overflow: hidden;
    position: relative;
    min-width: 250px; /* Ancho reservado para evitar que el menú tiemble */
    vertical-align: middle;
}

@media (max-width: 768px) {
    .logo-text-ticker {
        min-width: 190px; /* Adaptado al tamaño en móviles */
        height: 24px;
    }
}

.ticker-track {
    display: flex;
    flex-direction: column;
    /* 8 segundos para el ciclo completo (4s en cada frase) */
    animation: logoRoll 8s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.ticker-track .site-logo {
    height: 30px;
    line-height: 30px;
    display: block;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .ticker-track .site-logo {
        height: 24px;
        line-height: 24px;
    }
}

/* Animación de deslizamiento vertical */
@keyframes logoRoll {
    0%, 40% {
        transform: translateY(0);
    }
    50%, 90% {
        transform: translateY(-30px); /* Sube para mostrar la segunda frase */
    }
    100% {
        transform: translateY(0); /* Vuelve al inicio */
    }
}

/* Ajuste de escala para móviles */
@media (max-width: 768px) {
    @keyframes logoRoll {
        0%, 40% { transform: translateY(0); }
        50%, 90% { transform: translateY(-24px); }
        100% { transform: translateY(0); }
    }
}


/* Unificar el diseño del botón de enlace con los botones de categorías */
.room-filter-btn, .room-filter-link {
    background: transparent;
    border: 2px solid rgba(140, 112, 95, 0.2);
    color: var(--color-tierra);
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.room-filter-btn:hover, .room-filter-link:hover {
    border-color: var(--color-oro-cobrizo);
    color: var(--color-oro-cobrizo);
}

/* El botón de enlace nunca debe pintarse activo de forma automática por JS */
.room-filter-link {
    border-color: rgba(140, 112, 95, 0.25);
    background: rgba(140, 112, 95, 0.03);
}

/* ==========================================================================
   REDISEÑO DE CAPSULAS Y TEXTURAS INTERNAS DEL MODAL (WOW)
   ========================================================================== */

/* Añadimos un sutil patrón de fibras de paja al propio modal de fondo */
.smart-modal-content {
    background-color: var(--color-arena) !important;
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(212, 163, 115, 0.08), transparent 75%),
        repeating-linear-gradient(135deg, rgba(212, 163, 115, 0.015) 0px, rgba(212, 163, 115, 0.015) 1px, transparent 1px, transparent 8px) !important;
    background-size: 100% 100% !important;
    border: 1px solid rgba(212, 163, 115, 0.15) !important;
    box-shadow: 0 30px 70px rgba(0,0,0,0.45) !important;
}

/* Títulos de Categoría en Playfair Display */
.modal-sec-title {
    font-family: var(--font-titulos);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-oro-cobrizo);
    border-bottom: 1px solid rgba(140, 112, 95, 0.15);
    padding-bottom: 8px;
    margin-bottom: 18px;
    margin-top: 30px;
    font-weight: 700;
}

/* Las Cápsulas de Cristal Rediseñadas */
.amenity-item-luxury {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.6) !important; /* Cristal templado */
    border: 1.5px solid rgba(212, 163, 115, 0.25) !important; /* Borde dorado fino */
    color: var(--color-madera-oscura) !important;
    padding: 10px 18px !important;
    border-radius: 50px !important; /* Cápsula perfecta */
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(58, 53, 50, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    line-height: 1.4 !important;
}

.amenity-item-luxury:hover {
    background: var(--color-blanco) !important;
    border-color: var(--color-oro-cobrizo) !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(212, 163, 115, 0.15) !important;
}

/* El recuadro del icono dorado */
.badge-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-oro-cobrizo);
    flex-shrink: 0;
}

.amenity-item-luxury:hover .badge-icon-wrap {
    transform: rotate(-10deg) scale(1.1); /* Efecto interactivo de inclinación en hover */
    transition: transform 0.3s ease;
}

/* ==========================================================================
   REDISEÑO DE PESTAÑAS (TABS) Y TARJETA BANCARIA VIP EN HABITACIONES
   ========================================================================== */

/* Contenedor de la barra de pestañas (Estilo Cápsula Arena) */
.rooms-tab-header {
    display: flex;
    justify-content: center;
    margin-bottom: 45px;
}

.rooms-tab-toggles {
    display: inline-flex;
    background: rgba(140, 112, 95, 0.06); /* Oro arena translúcido */
    padding: 6px;
    border-radius: 50px;
    border: 1px solid rgba(140, 112, 95, 0.15);
}

.rooms-tab-btn {
    background: transparent;
    border: none;
    color: var(--color-tierra);
    font-family: var(--font-principal);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 24px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.rooms-tab-btn:hover {
    color: var(--color-terracota);
}

.rooms-tab-btn.active {
    background: var(--color-oro-cobrizo);
    color: var(--color-madera-oscura) !important;
    box-shadow: 0 4px 15px rgba(212, 163, 115, 0.3);
}

/* Paneles del contenido */
.rooms-tab-pane {
    display: none;
    animation: slideUpFade 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.rooms-tab-pane.active {
    display: block;
}

.rooms-tab-subtitle {
    font-family: var(--font-titulos);
    font-size: var(--text-xl);
    color: var(--color-madera-oscura);
    text-align: center;
    margin-bottom: 35px;
}

/* --- Grilla de Datos Importantes (Tab 1) --- */
.rooms-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .rooms-info-grid { grid-template-columns: 1fr 1fr; }
}

.info-card-minimal {
    display: flex;
    gap: 15px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(140, 112, 95, 0.12);
    padding: 25px;
    border-radius: var(--border-radius-md);
    transition: var(--transition-smooth);
}

.info-card-minimal:hover {
    background: var(--color-blanco);
    border-color: var(--color-oro-cobrizo);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(140, 112, 95, 0.08);
}

.info-card-icon {
    font-size: 20px;
    color: var(--color-oro-cobrizo);
    flex-shrink: 0;
}

.info-card-minimal h4 {
    font-family: var(--font-titulos);
    font-size: 16px;
    color: var(--color-madera-oscura);
    margin-bottom: 8px;
}

.info-card-minimal p {
    font-size: 13px;
    color: var(--color-tierra);
    line-height: 1.5;
    margin: 0;
}

/* --- Grilla de Políticas de Convivencia (Tab 2) --- */
.policies-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .policies-two-col { grid-template-columns: 1fr 1fr; }
}

.policy-item-box {
    background: rgba(255, 255, 255, 0.5);
    border-left: 3px solid var(--color-terracota); /* Sutil distinción lateral */
    padding: 20px;
    border-radius: 0 8px 8px 0;
    transition: var(--transition-smooth);
}

.policy-item-box:hover {
    background: var(--color-blanco);
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

.policy-item-box strong {
    font-size: 14px;
    color: var(--color-madera-oscura);
    display: block;
    margin-bottom: 6px;
}

.policy-item-box p {
    font-size: 13px;
    color: var(--color-tierra);
    line-height: 1.5;
    margin: 0;
}

/* --- TARJETA BANCARIA EXCLUSIVA VIP (Tab 3) --- */
.luxury-bank-card {
    background: linear-gradient(135deg, #2D2826 0%, #151312 100%);
    border: 1px solid rgba(212, 163, 115, 0.35);
    border-radius: var(--border-radius-md);
    padding: 35px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
    color: var(--color-arena);
    max-width: 550px;
    margin: 0 auto;
    text-align: left;
}

/* Chip de oro holográfico de la tarjeta */
.card-chip {
    width: 45px;
    height: 35px;
    background: linear-gradient(135deg, #e5c07b 0%, #ab8240 100%);
    border-radius: 6px;
    margin-bottom: 20px;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4);
}

.card-bank-name {
    position: absolute;
    top: 35px;
    right: 35px;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--color-oro-cobrizo);
    margin: 0;
}

.card-holder {
    display: block;
    font-size: 14px;
    letter-spacing: 1.5px;
    font-weight: 600;
    opacity: 0.9;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.number-block small {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.6;
    margin-bottom: 5px;
}

.number-block code {
    font-family: monospace;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-oro-cobrizo);
    background: rgba(255,255,255,0.04);
    padding: 4px 8px;
    border-radius: 4px;
}

@media (max-width: 480px) {
    .luxury-bank-card { padding: 25px; }
    .card-bank-name { top: 25px; right: 25px; font-size: 10px; }
    .number-block code { font-size: 13px; }
}


/* ==========================================================================
   OPTIMIZACIÓN RESPONSIVE EXTREMA: CINTA DE FILTROS DESLIZABLE EN MÓVILES
   ========================================================================== */

@media (max-width: 991px) { /* Aplica a Móviles y Tablets */
    
    /* --- 1. Cinta de Filtros Superior --- */
    .room-filters-wrapper {
        justify-content: flex-start !important; /* Alinea al inicio para empezar el scroll */
        flex-wrap: nowrap !important;          /* Fuerza a quedarse en UNA SOLA LÍNEA */
        overflow-x: auto !important;           /* Habilita el deslizamiento con el dedo */
        -webkit-overflow-scrolling: touch;     /* Desplazamiento ultra-suave en iPhone (iOS) */
        padding: 10px 15px !important;
        gap: 10px !important;
        margin-bottom: 25px !important;
        scrollbar-width: none;                 /* Oculta barra en Firefox */
    }

    /* Oculta barra de scroll en Google Chrome, Brave, Safari, Edge */
    .room-filters-wrapper::-webkit-scrollbar {
        display: none !important;
    }

    /* Forzar a que los botones no se achiquen ni deformen el texto */
    .room-filters-wrapper .room-filter-btn,
    .room-filters-wrapper .room-filter-link {
        white-space: nowrap !important;        /* Impide que el texto salte de línea */
        flex-shrink: 0 !important;             /* Impide que los botones se aplasten */
        padding: 8px 18px !important;          /* Tamaño más compacto para móvil */
        font-size: 12px !important;
    }

    /* --- 2. Pestañas de Políticas del final (Dato Importante, etc.) --- */
    .tab-toggles {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;          /* Fuerza una sola línea */
        overflow-x: auto !important;           /* Deslizamiento con el dedo */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
        padding: 5px 0;
    }

    .tab-toggles::-webkit-scrollbar {
        display: none !important;
    }

    .tab-toggles .tab-btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 8px 16px !important;
        font-size: 11px !important;
    }
}



/* ==========================================================================
   REDISEÑO DE PESTAÑAS (TABS) Y TARJETA BANCARIA VIP EN HABITACIONES
   ========================================================================== */

/* Contenedor de la barra de pestañas (Estilo Cápsula Arena) */
.rooms-tab-header {
    display: flex;
    justify-content: center;
    margin-bottom: 45px;
}

.rooms-tab-toggles {
    display: inline-flex;
    background: rgba(140, 112, 95, 0.06); /* Oro arena translúcido */
    padding: 6px;
    border-radius: 50px;
    border: 1px solid rgba(140, 112, 95, 0.15);
}

.rooms-tab-btn {
    background: transparent;
    border: none;
    color: var(--color-tierra);
    font-family: var(--font-principal);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 24px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.rooms-tab-btn:hover {
    color: var(--color-terracota);
}

.rooms-tab-btn.active {
    background: var(--color-oro-cobrizo);
    color: var(--color-madera-oscura) !important;
    box-shadow: 0 4px 15px rgba(212, 163, 115, 0.3);
}

/* Paneles del contenido */
.rooms-tab-pane {
    display: none;
    animation: slideUpFade 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.rooms-tab-pane.active {
    display: block;
}

.rooms-tab-subtitle {
    font-family: var(--font-titulos);
    font-size: var(--text-xl);
    color: var(--color-madera-oscura);
    text-align: center;
    margin-bottom: 35px;
}

/* --- Grilla de Datos Importantes (Tab 1) --- */
.rooms-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .rooms-info-grid { grid-template-columns: 1fr 1fr; }
}

.info-card-minimal {
    display: flex;
    gap: 15px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(140, 112, 95, 0.12);
    padding: 25px;
    border-radius: var(--border-radius-md);
    transition: var(--transition-smooth);
}

.info-card-minimal:hover {
    background: var(--color-blanco);
    border-color: var(--color-oro-cobrizo);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(140, 112, 95, 0.08);
}

.info-card-icon {
    font-size: 20px;
    color: var(--color-oro-cobrizo);
    flex-shrink: 0;
}

.info-card-minimal h4 {
    font-family: var(--font-titulos);
    font-size: 16px;
    color: var(--color-madera-oscura);
    margin-bottom: 8px;
}

.info-card-minimal p {
    font-size: 13px;
    color: var(--color-tierra);
    line-height: 1.5;
    margin: 0;
}

/* --- Grilla de Políticas de Convivencia (Tab 2) --- */
.policies-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .policies-two-col { grid-template-columns: 1fr 1fr; }
}

.policy-item-box {
    background: rgba(255, 255, 255, 0.5);
    border-left: 3px solid var(--color-terracota); /* Sutil distinción lateral */
    padding: 20px;
    border-radius: 0 8px 8px 0;
    transition: var(--transition-smooth);
}

.policy-item-box:hover {
    background: var(--color-blanco);
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

.policy-item-box strong {
    font-size: 14px;
    color: var(--color-madera-oscura);
    display: block;
    margin-bottom: 6px;
}

.policy-item-box p {
    font-size: 13px;
    color: var(--color-tierra);
    line-height: 1.5;
    margin: 0;
}

/* --- TARJETA BANCARIA EXCLUSIVA VIP (Tab 3) --- */
.luxury-bank-card {
    background: linear-gradient(135deg, #2D2826 0%, #151312 100%);
    border: 1px solid rgba(212, 163, 115, 0.35);
    border-radius: var(--border-radius-md);
    padding: 35px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
    color: var(--color-arena);
    max-width: 550px;
    margin: 0 auto;
    text-align: left;
}

/* Chip de oro holográfico de la tarjeta */
.card-chip {
    width: 45px;
    height: 35px;
    background: linear-gradient(135deg, #e5c07b 0%, #ab8240 100%);
    border-radius: 6px;
    margin-bottom: 20px;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4);
}

.card-bank-name {
    position: absolute;
    top: 35px;
    right: 35px;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--color-oro-cobrizo);
    margin: 0;
}

.card-holder {
    display: block;
    font-size: 14px;
    letter-spacing: 1.5px;
    font-weight: 600;
    opacity: 0.9;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.number-block small {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.6;
    margin-bottom: 5px;
}

.number-block code {
    font-family: monospace;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-oro-cobrizo);
    background: rgba(255,255,255,0.04);
    padding: 4px 8px;
    border-radius: 4px;
}

@media (max-width: 480px) {
    .luxury-bank-card { padding: 25px; }
    .card-bank-name { top: 25px; right: 25px; font-size: 10px; }
    .number-block code { font-size: 13px; }
}



/* ==========================================================================
   OPTIMIZACIÓN DE EVENTOS: INTRO + PLANO INTEGRADO (FLEXIBLE)
   ========================================================================== */

.plano-img-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid var(--color-oro-cobrizo);
    box-shadow: var(--shadow-glass);
    aspect-ratio: 16/10; /* Excelente proporción para planos */
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .plano-img-wrapper {
        aspect-ratio: 16/11; /* Ligeramente más alto en móviles */
        max-width: 100%;
    }
}



/* ==========================================================================
   NUEVA SECCIÓN: CUADRO DE CAPACIDADES GIGANTE (PREMIUM & GLASSMOPHISM)
   ========================================================================== */

/* Fondo de luz esmerilada con esferas de luz en movimiento */
.capacidades-section-luxury {
    position: relative;
    padding: 100px 20px 60px;
    background-color: var(--color-arena);
    overflow: hidden;
    z-index: 1;
    border-top: 1px solid rgba(140, 112, 95, 0.1);
}

/* Esferas de luz difuminadas de fondo (Aceleración por GPU) */
.table-ambient-light {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    z-index: 1;
    pointer-events: none;
    animation: tableLightFloat 12s infinite alternate ease-in-out;
}

.tal-1 {
    width: 250px; height: 250px;
    background: rgba(212, 163, 115, 0.35); /* Oro */
    top: 10%; left: 5%;
}

.tal-2 {
    width: 320px; height: 320px;
    background: rgba(183, 110, 88, 0.25); /* Terracota */
    bottom: 10%; right: 5%;
    animation-delay: -4s;
}

.tal-3 {
    width: 180px; height: 180px;
    background: rgba(107, 112, 92, 0.25); /* Oliva */
    top: 40%; right: 40%;
    animation-delay: -8s;
}

@keyframes tableLightFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, 30px) scale(1.15); }
}

/* --- TABLA GIGANTE DE CRISTAL --- */
.table-responsive-luxury {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--border-radius-md);
    box-shadow: 0 20px 45px rgba(58, 53, 50, 0.08);
    border: 1px solid rgba(212, 163, 115, 0.15);
    background: rgba(255, 255, 255, 0.45); /* Cristal */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.cap-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 950px;
    text-align: center;
}

/* Cabecera de madera pulida oscura */
.cap-table thead tr {
    background: linear-gradient(90deg, #2D2826 0%, #1A1A1A 100%) !important;
    color: var(--color-blanco);
    border-bottom: 3px solid var(--color-oro-cobrizo);
}

.cap-table th {
    padding: 20px 15px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Filas semitransparentes */
.cap-table tbody tr {
    border-bottom: 1px solid rgba(140, 112, 95, 0.1);
    background: rgba(255, 255, 255, 0.55);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.salon-name-cell {
    padding: 20px 15px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    color: var(--color-madera-oscura);
}

.cap-table td {
    padding: 20px 15px;
    font-size: 13.5px;
    color: var(--color-madera-oscura);
    font-weight: 500;
}

/* El espectacular efecto de hilo vertical de oro en Hover */
.cap-table tbody tr:hover {
    background: rgba(212, 163, 115, 0.06) !important;
    box-shadow: inset 4px 0 0 var(--color-oro-cobrizo), 0 10px 25px rgba(212, 163, 115, 0.1);
    transform: scale(1.002);
}



/* --- NUEVA PÍLDORA DE ANUNCIO MICA DE ESPEJO Y ORO (MÁXIMA ELEGANCIA) --- */
.header-announcement-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* MICA DE ESPEJO: Cristal translúcido esmerilado que absorbe el color de fondo */
    background: rgba(255, 246, 226, 0.22) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    /* TIPOGRAFÍA EDITORIAL CHIC */
    color: var(--color-madera-oscura) !important;
    font-family: var(--font-titulos);
    font-style: italic; /* Toque elegante */
    font-weight: 700;
    font-size: 13.5px; /* Un poco más grande para perfecta lectura */
    letter-spacing: 0.5px;
    text-transform: none; /* Letras naturales */
    
    padding: 8px 24px !important;
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    
    /* Sombra 3D suave con reflejo interno de cristal */
    box-shadow: 0 4px 15px rgba(212, 163, 115, 0.25), inset 0 0 8px rgba(255, 255, 255, 0.35);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Animación: El botón respira luz de forma automática */
    animation: mirrorGlow 3s infinite alternate ease-in-out;
}

/* El circuito de destello de luz que gira por el borde */
.header-announcement-pill::before {
    content: '';
    position: absolute;
    top: -150%; left: -150%;
    width: 400%; height: 400%;
    background: conic-gradient(
        transparent, 
        rgba(212, 163, 115, 0.2) 60%, 
        var(--color-oro-cobrizo) 85%, 
        #ffffff 100%
    );
    animation: rotateGlow 3.5s linear infinite;
    z-index: -2;
}

/* El marco de oro cobrizo que envuelve la mica */
.header-announcement-pill::after {
    content: '';
    position: absolute;
    inset: 1.5px; /* Grosor exacto del borde de la mica */
    background: rgba(255, 246, 226, 0.6) !important; /* Cristal de fondo */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 48px;
    z-index: -1;
    border: 1.5px solid var(--color-oro-cobrizo); /* El fino marco de oro */
    transition: all 0.3s ease;
}

/* --- KEYFRAMES DE BRILLO --- */
@keyframes mirrorGlow {
    0% { 
        box-shadow: 0 4px 15px rgba(212, 163, 115, 0.25), inset 0 0 5px rgba(255,255,255,0.3); 
    }
    100% { 
        box-shadow: 0 6px 25px rgba(212, 163, 115, 0.65), inset 0 0 12px rgba(255,255,255,0.5); 
    }
}

/* Hover interactivo (Brillo expansivo de gema preciosa) */
.header-announcement-pill:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0 30px 6px rgba(212, 163, 115, 0.75), inset 0 0 15px rgba(255,255,255,0.5);
    color: var(--color-terracota) !important; /* Cambia a terracota elegante en hover */
}

.header-announcement-pill:hover::after {
    background: rgba(255, 255, 255, 0.95) !important; /* Se aclara en hover */
    border-color: var(--color-terracota); /* Sincroniza el marco con el hover */
}

/* Animación del calendario dorado */
.header-announcement-pill:hover .wa-calendar-icon {
    transform: scale(1.15) rotate(-10deg);
    transition: transform 0.3s ease;
}


/* ==========================================================================
   REJILLA DE ENFOQUE CYBER-ORGÁNICA (DURABLE & RESPONSIVE)
   ========================================================================== */

/* Layout general de la sección nosotros */
.about-grid-cyber {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
}

/* ==========================================================================
   MAXIMUM HORIZONTAL EXPANSION FOR "NOSOTROS"
   ========================================================================== */

@media (min-width: 1200px) {
    /* 1. We stretch the container of this section from 1200px to 1400px */
    .about-section.container {
        max-width: 1400px !important;
        width: 100% !important;
    }
}

@media (min-width: 992px) {
    /* 
       ORDEN SWAPPED: Texto a la Izquierda (30%) e Imágenes a la Derecha (70%)
       Esto hace que la grilla de fotos se expanda horizontalmente de forma espectacular 
    */
    .about-grid-cyber {
        grid-template-columns: 30% 70% !important; /* Proporción ultra-ancha para las imágenes */
        gap: 60px !important; /* Espacio elegante de separación entre texto y fotos */
        align-items: center !important;
    }

    /* Ajuste de altura e interna de la grilla de fotos en el lado derecho */
    .about-cyber-grid {
        height: 600px !important; 
        grid-template-columns: 1.15fr 0.85fr !important; /* Proporción entre la foto vertical y las horizontales */
        width: 100% !important;
        gap: 20px !important;
    }
}

/* Contenedor de la Grilla Cyber-Orgánica */
.about-cyber-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Dos columnas estables */
    gap: 20px;
    height: 540px; /* Alto fijo y seguro */
    box-sizing: border-box;
}

/* Columna lateral de soporte */
.cyber-grid-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

/* Tarjeta base de la Grilla */
.cyber-grid-card {
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease,
                filter 0.5s ease;
    border: 2px solid rgba(212, 163, 115, 0.12);
    box-shadow: 0 10px 30px rgba(58, 53, 50, 0.08);
}

/* Definición de dimensiones estables */
.card-primary {
    height: 100%;
    border-radius: 40px 12px 40px 12px; /* Esquinas asimétricas */
}

.card-secondary {
    height: calc(50% - 10px);
    border-radius: 12px 40px 12px 12px;
}

.card-tertiary {
    height: calc(50% - 10px);
    border-radius: 12px 12px 40px 12px;
}

/* Capa de contraste oscuro */
.cyber-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30, 28, 26, 0.05) 0%, rgba(20, 18, 15, 0.82) 100%);
    z-index: 1;
}

/* Contenido de texto flotante */
.cyber-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 24px;
    z-index: 2;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.cyber-card-num {
    font-family: var(--font-principal);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--color-oro-cobrizo);
    margin-bottom: 6px;
}

.cyber-card-title {
    font-family: var(--font-titulos);
    font-size: 21px; /* Tamaño generoso y legible */
    line-height: 1.15;
    color: var(--color-blanco);
    margin: 0;
    transition: color 0.3s ease;
}

.cyber-card-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
    margin-top: 8px;
    max-width: 90%;
    display: none; /* Escondido por defecto en las tarjetas secundarias */
}

/* Mostrar la descripción completa únicamente en la tarjeta principal */
.card-primary .cyber-card-desc {
    display: block;
}

/* ==========================================================================
   MICRO-INTERACCIÓN DE ENFOQUE INTELIGENTE (WOW EFFECT)
   ========================================================================== */

/* 1. Al pasar el cursor sobre una tarjeta, se resalta con brillo dorado */
.cyber-grid-card:hover {
    border-color: var(--color-oro-cobrizo);
    box-shadow: 0 15px 35px rgba(212, 163, 115, 0.3), 0 0 15px rgba(212, 163, 115, 0.15);
    transform: translateY(-4px) scale(1.01);
}

.cyber-grid-card:hover .cyber-card-title {
    color: var(--color-oro-cobrizo);
}

/* 2. EFECTO CYBER DE PROFUNDIDAD: Desenfoca y atenúa las tarjetas vecinas */
.about-cyber-grid:hover .cyber-grid-card:not(:hover) {
    filter: blur(2.5px) grayscale(30%) opacity(0.6);
}

/* ==========================================================================
   MÓVILES (APILADO VERTICAL IMPECABLE)
   ========================================================================== */
@media (max-width: 768px) {
    .about-cyber-grid {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 15px;
    }

    .cyber-grid-sidebar {
        display: flex;
        flex-direction: column;
        gap: 15px;
        height: auto;
    }

    .cyber-grid-card {
        height: 180px !important; /* Altura generosa para evitar colisiones de texto */
        border-radius: 20px 8px 20px 8px !important;
    }

    .cyber-card-desc {
        display: block !important; /* Desplegamos la descripción en móvil para lectura */
        font-size: 12px;
        margin-top: 4px;
    }

    .cyber-card-title {
        font-size: 18px;
    }
}



/* ==========================================================================
   REDISEÑO CYBER-ORGÁNICO DE POLÍTICAS E INFORMACIÓN (WOW GLASS)
   ========================================================================== */

/* Barra de pestañas con acabado de cristal curvado */
.rooms-tab-toggles {
    background: rgba(140, 112, 95, 0.04) !important;
    border: 1px solid rgba(212, 163, 115, 0.22) !important;
    padding: 6px !important;
    border-radius: 50px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15), 
                0 10px 30px rgba(140, 112, 95, 0.04) !important;
}

/* Botón del tab */
.rooms-tab-btn {
    font-family: var(--font-principal) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--color-tierra) !important;
    padding: 10px 26px !important;
    border-radius: 30px !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border: none !important;
    background: transparent !important;
}

/* Efecto de estela de luz dorada en pestaña activa */
.rooms-tab-btn.active {
    background: var(--color-oro-cobrizo) !important;
    color: var(--color-madera-oscura) !important;
    box-shadow: 0 4px 15px rgba(212, 163, 115, 0.4), 
                0 0 10px rgba(212, 163, 115, 0.15) !important;
}

/* --- TARJETAS DE INFORMACIÓN GLASSMORPHISM --- */
.rooms-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 15px;
}

@media (min-width: 768px) {
    .rooms-info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }
}

.info-card-minimal-cyber {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 30px 25px;
    border-radius: 24px 8px 24px 8px; /* Radio asimétrico premium */
    
    /* Cristal templado ultra-limpio */
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    border: 1px solid rgba(212, 163, 115, 0.15) !important;
    box-shadow: 0 8px 32px rgba(140, 112, 95, 0.03);
    
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease,
                background-color 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Anillo bioluminiscente del icono */
.info-cyber-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(212, 163, 115, 0.08);
    border: 1px solid rgba(212, 163, 115, 0.22);
    color: var(--color-oro-cobrizo);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
}

.info-cyber-icon-wrap svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.2px; /* Mayor relieve de trazo */
}

/* Textos internos */
.info-cyber-content h4 {
    font-family: var(--font-titulos) !important;
    font-size: 17.5px !important;
    color: var(--color-madera-oscura) !important;
    margin: 0 0 8px 0 !important;
    font-weight: 700 !important;
}

.info-cyber-content p {
    font-size: 13.5px !important;
    color: var(--color-tierra) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* --- INTERACCIONES HOVER ELEVADAS --- */
.info-card-minimal-cyber:hover {
    transform: translateY(-5px);
    border-color: var(--color-oro-cobrizo) !important;
    background: rgba(255, 255, 255, 0.85) !important; /* El cristal se vuelve opaco y brillante */
    
    /* Inyección de hilo lateral brillante y aura de gema */
    box-shadow: inset 4px 0 0 var(--color-oro-cobrizo), 
                0 15px 35px rgba(212, 163, 115, 0.16) !important;
}

.info-card-minimal-cyber:hover .info-cyber-icon-wrap {
    transform: scale(1.1) rotate(-8deg);
    background: rgba(212, 163, 115, 0.15);
    border-color: var(--color-oro-cobrizo);
    color: var(--color-terracota);
}


/* ==========================================================================
   REPARACIÓN DE TARJETAS DE INFORMACIÓN (BLINDADO ANTICACHÉ)
   ========================================================================== */

/* 1. Forzar la rejilla en 2 columnas */
.rooms-info-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-top: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    .rooms-info-grid {
        grid-template-columns: 1fr 1fr !important; /* Dos columnas estables en PC */
        gap: 25px !important;
    }
}

/* 2. Forzar estructura física de las tarjetas (Fondo sólido, bordes y sombras) */
.info-card-minimal, 
.info-card-minimal-cyber {
    display: flex !important;
    gap: 15px !important;
    align-items: flex-start !important;
    
    /* Fondo blanco con ligera transparencia para el estilo orgánico */
    background: rgba(255, 255, 255, 0.95) !important; 
    
    /* Borde y esquinas redondeadas asimétricas visibles */
    border: 1px solid rgba(140, 112, 95, 0.18) !important;
    border-radius: 20px 8px 20px 8px !important;
    
    padding: 25px !important;
    box-shadow: 0 10px 30px rgba(58, 53, 50, 0.05) !important;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* 3. Forzar anillo y centrado para el icono (Emoji o SVG) */
.info-card-icon, 
.info-cyber-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: rgba(212, 163, 115, 0.1) !important;
    border: 1px solid rgba(212, 163, 115, 0.25) !important;
    color: var(--color-oro-cobrizo) !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* Centrado si se usa icono SVG */
.info-cyber-icon-wrap svg {
    width: 20px !important;
    height: 20px !important;
    stroke: var(--color-oro-cobrizo) !important;
    display: block !important;
}

/* Ajustes de tipografía para evitar desalineación */
.info-cyber-content h4, 
.info-card-minimal h4 {
    font-family: var(--font-titulos) !important;
    font-size: 17px !important;
    color: var(--color-madera-oscura) !important;
    margin: 0 0 6px 0 !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.info-cyber-content p, 
.info-card-minimal p {
    font-size: 13px !important;
    color: var(--color-tierra) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* 4. Efectos interactivos al pasar el cursor */
.info-card-minimal:hover, 
.info-card-minimal-cyber:hover {
    transform: translateY(-4px) !important;
    border-color: var(--color-oro-cobrizo) !important;
    box-shadow: inset 4px 0 0 var(--color-oro-cobrizo), 
                0 15px 35px rgba(212, 163, 115, 0.15) !important;
    background: #ffffff !important;
}



/* ==========================================================================
   REDISEÑO CYBER-ORGÁNICO: TAB DE POLÍTICAS DEL HOTEL (WOW REVEAL)
   ========================================================================== */

/* 1. Forzar la rejilla responsiva de políticas */
.policies-two-col {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    .policies-two-col {
        grid-template-columns: 1fr 1fr !important; /* Dos columnas estables en PC */
        gap: 25px !important;
    }
}

/* 2. Maquetación de tarjetas estilo panel asimétrico de cristal */
.policy-item-box {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(140, 112, 95, 0.15) !important;
    
    /* Hilo de luz dorada a la izquierda y radio asimétrico */
    border-left: 4px solid var(--color-oro-cobrizo) !important;
    border-radius: 0 16px 16px 0 !important; 
    
    padding: 25px !important;
    box-shadow: 0 8px 30px rgba(140, 112, 95, 0.03) !important;
    
    /* Transiciones de enfoque aceleradas por GPU */
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.35s ease,
                box-shadow 0.35s ease,
                filter 0.4s ease,
                background-color 0.35s ease !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* 3. Título de la política con mini-bullet de luz bioluminiscente */
.policy-item-box strong {
    font-family: var(--font-titulos) !important;
    font-size: 15.5px !important;
    color: var(--color-madera-oscura) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

/* El mini-bullet brillante */
.policy-item-box strong::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: var(--color-terracota) !important;
    /* Efecto de brillo de diodo emisor de luz */
    box-shadow: 0 0 8px var(--color-terracota) !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Párrafo descriptivo */
.policy-item-box p {
    font-size: 13px !important;
    color: var(--color-tierra) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* 4. MICRO-INTERACCIÓN DE ENFOQUE (Hover sobre la tarjeta) */
.policy-item-box:hover {
    transform: translateY(-4px) !important;
    border-left-color: var(--color-terracota) !important; /* El hilo cambia a terracota */
    border-color: rgba(212, 163, 115, 0.3) !important;
    background: #ffffff !important; /* Brillo de fondo */
    box-shadow: 0 15px 35px rgba(212, 163, 115, 0.12) !important;
}

/* 5. EFECTO DE PROFUNDIDAD: Difumina suavemente las tarjetas no seleccionadas */
.policies-two-col:hover .policy-item-box:not(:hover) {
    filter: blur(1.5px) grayscale(20%) opacity(0.65) !important;
}



/* ==========================================================================
   CYBER-ORGANIC GLASS ACCORDION (REDISEÑO DE POLÍTICAS)
   ========================================================================== */
.policies-cyber-accordion-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 992px) {
    .policies-cyber-accordion-container {
        grid-template-columns: 1fr 1fr; /* Dos columnas estables en PC */
        gap: 25px;
    }
}

.policies-accordion-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Ficha del Item del Acordeón */
.policy-accordion-item {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 163, 115, 0.15) !important;
    border-radius: 16px 6px 16px 6px !important; /* Esquinas asimétricas */
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
}

/* Cabecera del Acordeón (Botón) */
.policy-accordion-header {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 20px 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    outline: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.policy-header-title {
    font-family: var(--font-titulos) !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: var(--color-madera-oscura) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Punto bioluminiscente */
.policy-accent-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--color-oro-cobrizo) !important;
    box-shadow: 0 0 8px var(--color-oro-cobrizo) !important;
    flex-shrink: 0 !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Icono indicador (+) */
.policy-accordion-icon {
    font-family: var(--font-principal) !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    color: var(--color-oro-cobrizo) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.3s ease !important;
    line-height: 1 !important;
}

/* --- CUERPO DESLIZABLE (OCULTO POR DEFECTO) --- */
.policy-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease !important;
    opacity: 0 !important;
}

.policy-accordion-inner {
    padding: 0 24px 24px 42px !important; /* Alineado para librar el punto de acento */
    font-size: 13.5px !important;
    color: var(--color-tierra) !important;
    line-height: 1.6 !important;
}

/* --- ESTADO ACTIVO (ABIERTO) --- */
.policy-accordion-item.active {
    border-color: var(--color-oro-cobrizo) !important;
    box-shadow: 0 12px 30px rgba(212, 163, 115, 0.12) !important;
    background: #ffffff !important; /* Brillo de fondo */
}

.policy-accordion-item.active .policy-accent-dot {
    background-color: var(--color-terracota) !important;
    box-shadow: 0 0 10px var(--color-terracota) !important;
}

.policy-accordion-item.active .policy-accordion-icon {
    transform: rotate(45deg) !important; /* El "+" gira para convertirse en una "X" de cierre */
    color: var(--color-terracota) !important;
}

.policy-accordion-item.active .policy-accordion-body {
    opacity: 1 !important;
}

/* Efecto hover suave en reposo */
.policy-accordion-item:hover:not(.active) {
    border-color: rgba(212, 163, 115, 0.4) !important;
    transform: translateY(-2px) !important;
}



/* ==========================================================================
   OPTIMIZACIÓN RESPONSIVE: CINTA DE PESTAÑAS DESLIZABLE EN MÓVILES
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Ajustamos el contenedor del cabezal para móviles */
    .rooms-tab-header {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        margin-bottom: 25px !important;
    }

    /* 2. Convertimos la cápsula en una tira deslizable con el dedo */
    .rooms-tab-toggles {
        display: flex !important;
        flex-wrap: nowrap !important; /* Fuerza a quedarse en UNA SOLA LÍNEA */
        overflow-x: auto !important; /* Habilita el desplazamiento lateral */
        -webkit-overflow-scrolling: touch !important; /* Desplazamiento fluido en iOS/iPhone */
        
        width: 100% !important;
        max-width: 100% !important;
        scrollbar-width: none !important; /* Oculta la barra de scroll en Firefox */
        box-sizing: border-box !important;
    }

    /* Oculta la barra de scroll en Chrome, Safari, Brave, Opera y Edge */
    .rooms-tab-toggles::-webkit-scrollbar {
        display: none !important;
    }

    /* 3. Evitamos que los botones se aplasten o dividan su texto en líneas */
    .rooms-tab-btn {
        white-space: nowrap !important; /* Prohíbe los saltos de línea */
        flex-shrink: 0 !important; /* Impide que el botón se reduzca o mutile */
        font-size: 11px !important; /* Tamaño compacto idóneo para celulares */
        padding: 10px 18px !important; /* Tamaño de botón cómodo para toque táctil */
    }
}


/* Botón especial del modal de copiado rápido */
.btn-copy-account {
    transition: all 0.3s ease;
}
.btn-copy-account:hover {
    background: var(--color-blanco) !important;
    color: var(--color-madera-oscura) !important;
    transform: scale(1.05);
}



/* ==========================================================================
   TARJETA DIGITAL DE MARCA PRESTIGIO (ESTILO PERFIL OFICIAL)
   ========================================================================== */
.cyber-brand-profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.7) !important; /* Cristal translúcido esmerilado */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(212, 163, 115, 0.22) !important;
    border-radius: 28px !important; /* Bordes elegantemente redondeados */
    padding: 30px 24px !important;
    box-shadow: 0 10px 30px rgba(140, 112, 95, 0.04);
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 440px; /* Ancho acotado para lucir súper centrado en móviles */
    margin: 15px auto 0 !important; /* Centrado horizontal automático */
}

/* Avatar de perfil grande circular */
.brand-profile-avatar-wrap {
    position: relative;
    width: 80px; /* Diámetro de perfil oficial */
    height: 80px;
    border-radius: 50% !important;
    background: var(--color-blanco);
    border: 2px solid var(--color-oro-cobrizo);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 8px 24px rgba(212, 163, 115, 0.18);
    flex-shrink: 0;
}

.brand-profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50% !important;
}

.brand-profile-avatar-svg {
    width: 46px;
    height: 46px;
}

/* Punto de estado en línea parpadeante */
.brand-profile-online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background-color: #25D366;
    border-radius: 50%;
    border: 2.2px solid #FFF;
    animation: pulseStatusGlow 1.8s infinite ease-in-out;
}

@keyframes pulseStatusGlow {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.8); }
    70% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Bloque de Información del Perfil */
.brand-profile-info {
    margin-bottom: 22px;
}

.brand-profile-name {
    font-family: var(--font-titulos) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--color-madera-oscura) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px 0 !important;
    letter-spacing: -0.2px;
}

/* Sello azul de verificación */
.brand-verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1877F2; /* Check oficial azul */
    flex-shrink: 0;
}

.brand-profile-location {
    font-size: 12px !important;
    color: var(--color-tierra) !important;
    margin: 0 0 6px 0 !important;
    font-weight: 500;
}

.brand-profile-status {
    font-size: 11.5px !important;
    color: #25D366 !important; /* Verde oficial */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 !important;
}

/* --- BOTÓN GLOW DE ACCIÓN DE WHATSAPP (CENTRADO Y PROPORCIONADO) --- */
.btn-wa-profile-glow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; /* Espacio perfecto entre icono y texto */
    
    width: auto !important;
    min-width: 160px !important; /* Ancho sustancial elegante */
    max-width: 220px !important;
    height: 44px !important; /* Altura estilizada centrada */
    padding: 0 24px !important;
    box-sizing: border-box !important;
    
    background-color: #25D366 !important;
    color: #FFFFFF !important;
    border-radius: 50px !important; /* Esfera tipo píldora */
    
    font-family: var(--font-principal) !important;
    font-weight: 700 !important;
    font-size: 13px !important; /* Letra clara y visible */
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important; /* Estricto: impide dividirse en 2 líneas */
    text-decoration: none !important;
    
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border: none !important;
    cursor: pointer;
    
    margin: 0 auto !important; /* Centrado absoluto en el flex vertical */
}

.btn-wa-profile-glow:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.5) !important;
    background-color: #20C05C !important;
}

/* Icono mini dentro de la píldora */
.wa-icon-mini-profile {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    display: block !important;
    flex-shrink: 0 !important;
}


/* ==========================================================================
   SELECTOR DE FECHAS LUXURY (5-STAR ECO-RESORT)
   ========================================================================== */
.cyber-booking-date-selector {
    display: flex;
    gap: 15px;
    width: 100%;
    margin-bottom: 22px;
    box-sizing: border-box;
}

.date-input-cyber-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 50%;
    text-align: left;
}

.date-input-cyber-group label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-oro-cobrizo);
}

/* Campos de entrada tipo fecha */
.cyber-date-field {
    width: 100%;
    height: 38px;
    background: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(212, 163, 115, 0.25) !important;
    border-radius: 10px !important;
    padding: 0 12px;
    font-family: var(--font-principal);
    font-size: 12.5px;
    color: var(--color-madera-oscura);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.cyber-date-field:focus {
    border-color: var(--color-oro-cobrizo) !important;
    box-shadow: 0 0 8px rgba(212, 163, 115, 0.2) !important;
}

/* Modificamos el color del icono nativo de calendario del navegador a Oro Cobrizo */
.cyber-date-field::-webkit-calendar-picker-indicator {
    filter: invert(0.6) sepia(1) saturate(5) hue-rotate(330deg); /* Filtro cromático dorado */
    cursor: pointer;
}

/* Clase de animación para sacudida (Shake) si el usuario olvida llenar una fecha */
.shake-cyber-input {
    animation: cyberInputShake 0.4s ease-in-out;
    border-color: var(--color-terracota) !important;
}

@keyframes cyberInputShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}


/* ==========================================================================
   RESUMEN DE RESERVA EN MODAL (5-STAR LIVE PMS SUMMARY)
   ========================================================================== */
.cyber-modal-room-summary {
    background: rgba(140, 112, 95, 0.05) !important;
    border: 1px dashed rgba(212, 163, 115, 0.3) !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    text-align: left !important;
}

.cyber-summary-badge {
    font-size: 9px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    background: var(--color-oro-cobrizo) !important;
    color: var(--color-madera-oscura) !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
}

.cyber-summary-night-price {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--color-terracota) !important;
}

.cyber-summary-title {
    font-family: var(--font-titulos) !important;
    font-size: 18px !important;
    color: var(--color-madera-oscura) !important;
    margin: 0 0 10px 0 !important;
    font-weight: 700 !important;
}

.cyber-summary-total-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(212, 163, 115, 0.15) !important;
    font-size: 13px !important;
    color: var(--color-madera-oscura) !important;
    margin-top: 10px !important;
}

.cyber-total-icon {
    font-size: 14px !important;
    line-height: 1 !important;
}


/* --- SEGURIDAD DE PUNTERO PARA DESLIZADORES EN LA REJILLA --- */
.cyber-card-overlay, 
.cyber-card-content {
    pointer-events: none !important; /* Deja pasar los clics hacia el slider y las flechas */
}

/* Devolvemos la interactividad a los textos para que se sigan revelando */
.cyber-card-content span, 
.cyber-card-content h3, 
.cyber-card-content p {
    pointer-events: auto !important;
}

/* Estructura minimalista de flechas en la grilla (Pequeñas y sin texto) */
.cyber-grid-card .slider-arrow {
    width: 32px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(212, 163, 115, 0.25) !important;
    font-size: 11px !important;
    color: var(--color-madera-oscura) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0;
    z-index: 30 !important;
    transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.3s ease !important;
}

.cyber-grid-card:hover .slider-arrow {
    opacity: 1; /* Aparecen al pasar el ratón */
}

.cyber-grid-card .slider-arrow:hover {
    background-color: var(--color-blanco) !important;
    color: var(--color-terracota) !important;
    transform: translateY(-50%) scale(1.05); /* Centrado vertical correcto */
}


/* Asegurar visibilidad total */
.smart-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important; /* Prioridad máxima absoluta */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

.smart-modal.is-active {
    visibility: visible;
    opacity: 1;
}

.smart-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
}


/* ==========================================================================
   MODAL DE EVENTOS: CONTENEDOR DE ALTURA FIJA CON SCROLL INTERNO
   ========================================================================== */

#anuncio-global-modal .smart-modal-content {
    max-height: 85vh !important; /* Nunca superará el 85% de la pantalla */
    display: flex !important;
    flex-direction: column !important;
}

.event-modal-scrollable-area {
    overflow-y: auto !important; /* Habilita el scroll solo dentro del modal */
    flex: 1;
    padding: 20px;
    scrollbar-width: thin; /* Estilo de scroll para Firefox */
}

/* Estilo del scroll para navegadores modernos */
.event-modal-scrollable-area::-webkit-scrollbar {
    width: 6px;
}
.event-modal-scrollable-area::-webkit-scrollbar-thumb {
    background-color: var(--color-oro-cobrizo);
    border-radius: 10px;
}

/* Tarjetas de eventos dentro del modal */
.event-entry {
    background: rgba(255, 255, 255, 0.5);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px !important;
}

/* Corrección de imágenes en modal de eventos */
.event-entry img {
    width: 100% !important;
    height: 160px !important; /* Altura controlada */
    object-fit: cover !important; /* Mantiene proporción sin deformar */
    display: block !important;
}

/* Forzar que el modal no se estire demasiado en móviles */
@media (max-width: 600px) {
    #anuncio-global-modal .smart-modal-content {
        width: 95% !important;
        padding: 10px !important;
    }
}

/* ==========================================================================
   FINAL CTA: FONDO INMERSIVO Y LEGIBILIDAD PREMIUM
   ========================================================================== */
.footer-cta-final {
    position: relative;
    padding: 120px 20px !important;
    background-color: #1a1615; /* Base sólida oscura */
    background-image: url('https://images.unsplash.com/photo-1542314831-c6a4d1409392?q=80&w=1920'); /* Cambia esto por tu imagen de fondo */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--color-arena) !important;
    text-align: center;
    overflow: hidden;
}

/* Capa de superposición para legibilidad del texto */
.footer-cta-final::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(30, 28, 26, 0.85); /* Oscurece la imagen para que el texto resalte */
    z-index: 1;
}

.footer-cta-final .container {
    position: relative;
    z-index: 2;
}

/* Títulos con sombra sutil para despegar del fondo */
.footer-cta-final h2 {
    color: #ffffff !important;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.footer-cta-final p {
    color: rgba(255,255,255,0.85) !important;
    font-size: 1.1rem;
}


/* ==========================================================================
   FINAL CTA: FONDO DE CAOBA TEXTURIZADO Y PARTÍCULAS DE LUZ
   ========================================================================== */
.footer-cta-final {
    position: relative;
    padding: 120px 20px !important;
    background-color: #1a1615 !important;
    /* Patrón de fibras de paja / textura sutil */
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(212, 163, 115, 0.05) 0%, transparent 60%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 10px);
    background-attachment: fixed;
    color: var(--color-arena) !important;
    text-align: center;
    overflow: hidden;
}

/* Contenedor de partículas */
.cta-particle-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Las partículas de "Polvo de Oro" */
.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--color-oro-cobrizo);
    border-radius: 50%;
    opacity: 0.4;
    animation: drift 15s infinite linear;
}

@keyframes drift {
    from { transform: translateY(100vh) translateX(0); }
    to { transform: translateY(-10vh) translateX(50px); }
}


/* Corrección para que la imagen dentro de la tarjeta del modal se vea completa */
.event-entry img {
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
    object-fit: contain !important;
    background-color: #f0f0f0;
    border-radius: 10px !important;
    display: block !important;
}

/* Forzamos el contenedor del disparador */
.event-entry .trigger-carta-modal {
    display: block !important;
    position: relative !important;
    z-index: 10000 !important; /* Elevamos el z-index */
    pointer-events: auto !important;
    cursor: zoom-in !important;
}

/* Asegurar que el modal esté siempre por encima de TODO */
#carta-visor-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999999 !important; /* El valor más alto posible */
    display: none; /* Cambiamos a none por defecto para manejarlo con la clase is-active */
}

#carta-visor-modal.is-active {
    display: flex !important;
}