/* INMOB.CSS - Estilos personalizados para la réplica exacta del slider.
    Se utiliza !important para garantizar la sobreescritura de la plantilla base.
*/

/* --- CONFIGURACIÓN GENERAL DEL HERO --- */
.hero-section-custom {
    position: relative !important;
    /* Altura suficiente para el slider y el elemento superpuesto inferior */
    height: 110vh !important; 
    min-height: 800px !important;
    background-size: cover !important;
    background-position: center center !important;
    /* Asegurar que el header transparente se superponga correctamente */
    margin-top: -80px !important; 
    padding-top: 80px !important;
    overflow: hidden !important;
}

/* Capa oscura superpuesta para mejorar contraste del texto */
.hero-overlay {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4) !important; /* Ajustar opacidad según la imagen de fondo */
    z-index: 1 !important;
}

/* Asegurar que el contenido esté por encima de la capa oscura */
.container-fluid.position-relative {
    z-index: 2 !important;
}


/* --- 1. BARRA LATERAL IZQUIERDA (FOLLOW US) --- */
.left-sidebar-custom {
    position: absolute !important;
    left: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    z-index: 10 !important;
}

.rotated-text-follow {
    /* Rotación de 90 grados negativa */
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    margin-bottom: 40px !important; /* Espacio entre texto e íconos */
}

.social-icons-vertical-custom {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important; /* Espacio entre íconos */
}

.social-icons-vertical-custom a {
    color: #fff !important;
    font-size: 16px !important;
    opacity: 0.7 !important;
    transition: all 0.3s ease !important;
}

.social-icons-vertical-custom a:hover {
    opacity: 1 !important;
    color: #fff !important; /* O el color primario de tu tema */
}


/* --- 2. CONTENIDO CENTRAL --- */
.center-content-custom {
    /* Centrado y margen izquierdo para no chocar con la barra lateral */
    padding-left: 15vw !important; 
}

.content-wrapper {
    max-width: 600px !important;
}

/* Ajuste específico para el botón de consulta */
.btn-consultation-custom {
    border-width: 2px !important;
    letter-spacing: 1px !important;
    font-size: 13px !important;
    border-radius: 0 !important; /* Botón cuadrado como en la imagen */
}
.btn-consultation-custom:hover {
    background-color: #fff !important;
    color: #000 !important;
}

/* Ícono del martillo */
.hammer-icon-custom {
    width: 40px !important;
    height: auto !important;
    opacity: 0.8 !important;
    transform: rotate(-15deg) !important; /* Ligera rotación como en la imagen */
}


/* --- 3. BARRA LATERAL DERECHA (CONTROLES) --- */
.right-sidebar-custom {
    position: absolute !important;
    right: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    height: 300px !important; /* Altura fija para distribuir elementos */
}

.slider-controls-vertical {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 100% !important;
    color: #fff !important;
}

.control-item {
    /* Rotación de texto para PREV y NEXT */
    writing-mode: vertical-rl !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    cursor: pointer !important;
    opacity: 0.6 !important;
    transition: opacity 0.3s ease !important;
}

.control-item:hover {
    opacity: 1 !important;
}

/* La barra vertical entre PREV y NEXT */
.control-separator {
    display: block !important;
    width: 2px !important;
    height: 60px !important; /* Altura de la línea */
    background-color: rgba(255,255,255,0.3) !important;
    margin: 20px 0 !important;
}


/* --- 4. SECCIÓN SUPERPUESTA INFERIOR (BOTTOM OVERLAY) --- */
.bottom-overlap-section {
    position: absolute !important;
    /* Posicionamiento clave para la superposición */
    bottom: 5% !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important; /* Debe estar por encima de todo */
    box-shadow: 0px 20px 50px rgba(0,0,0,0.2) !important;
    max-width: 1100px !important; /* Ancho máximo del bloque flotante */
    width: 90% !important;
}

/* Contenedor de la imagen de la villa (Izquierda) */
.overlap-image-container {
    height: 100% !important;
    min-height: 450px !important; /* Altura mínima del bloque */
    background-size: cover !important;
    background-position: center center !important;
}

/* Contenedor blanco de contenido (Derecha) */
.overlap-content-box {
    padding: 60px 50px !important;
    position: relative !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Ícono de cerrar 'X' */
.close-overlap-icon {
    position: absolute !important;
    top: 25px !important;
    right: 25px !important;
    color: #000 !important;
    font-size: 20px !important;
    opacity: 0.4 !important;
    transition: opacity 0.3s !important;
}
.close-overlap-icon:hover {
    opacity: 1 !important;
}

/* Número grande "01" */
.overlap-number {
    font-size: 4rem !important;
    line-height: 1 !important;
    opacity: 0.2 !important;
    display: block !important;
    margin-bottom: 20px !important;
    font-family: 'Poppins', sans-serif !important; /* Asumiendo que style.css usa esta fuente o similar */
}

/* Bloque de enlace inferior */
.projects-link-block {
    margin-top: auto !important; /* Empuja este bloque al final */
    padding-top: 30px !important;
    border-top: 1px solid rgba(0,0,0,0.05) !important;
}

.projects-link-block a {
    text-decoration: none !important;
    transition: color 0.3s !important;
}
.projects-link-block a:hover {
    color: var(--theme-color, #007bff) !important; /* Intenta usar el color del tema si existe variable */
}

/* Etiqueta !important azul */
.important-tag {
    /* Usamos un color azul estándar si el tema no define text-primary correctamente */
    color: #0056b3 !important; 
    font-family: monospace !important; /* Fuente estilo código */
}

/* --- RESPONSIVIDAD BÁSICA PARA PANTALLAS PEQUEÑAS --- */
@media (max-width: 991px) {
    /* Ocultar barras laterales en tablets y móviles */
    .left-sidebar-custom, 
    .right-sidebar-custom {
        display: none !important;
    }

    .center-content-custom {
        padding-left: 0 !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* Ajustar el bloque flotante */
    .bottom-overlap-section {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: -100px !important; /* Solapamiento menor */
        width: 95% !important;
    }
    
    .overlap-image-container {
        min-height: 300px !important;
    }

    .hero-section-custom {
         height: auto !important;
         padding-bottom: 150px !important;
    }
}


/* inmob.css - Ajustes de precisión para réplica de imagen */

/* FUENTES: Usaremos una Serif para títulos y Sans para el resto */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@300;400;600;700&display=swap');

.slider-wrapper {
    position: relative !important;
    height: 100vh !important;
    width: 100% !important;
    background-color: #111 !important;
    overflow: hidden !important;
    font-family: 'Poppins', sans-serif !important;
}

.slider-bg-image {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover !important;
    background-position: center center !important;
    z-index: 1 !important;
}

.slider-overlay {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7) !important;
    z-index: 2 !important;
}

.slider-container {
    position: relative !important;
    z-index: 5 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 80px !important;
}

/* BARRAS LATERALES */
.side-bar {
    width: 60px !important; /* Ancho de la barra */
    position: absolute !important;
    top: 0;
    height: 100%;
    z-index: 100 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: auto !important;
}

.left-bar { left: 40px !important; }  /* Espacio desde el borde: 40px */
.right-bar { right: 40px !important; }

.vertical-text {
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    color: #fff !important;
    font-size: 11px !important;
    letter-spacing: 4px !important;
    font-weight: 600 !important;
    margin-bottom: 30px !important;
}

.social-icons { display: flex !important; flex-direction: column !important; gap: 20px !important; }
.social-icons a { color: #fff !important; font-size: 14px !important; opacity: 0.8 !important; }

.slider-nav { display: flex !important; flex-direction: column !important; align-items: center !important; height: 250px !important; justify-content: space-between !important; }
.nav-item { writing-mode: vertical-rl !important; color: #fff !important; font-size: 11px !important; font-weight: 700; letter-spacing: 2px; }
.nav-line { width: 1px !important; height: 80px !important; background: rgba(255,255,255,0.3) !important; }



/* CARD INFERIOR (TRUCO DE POSICIONAMIENTO) */
.overlap-card {
    position: absolute !important;
    bottom: -120px !important; /* Ajuste para que se vea la mitad fuera del slider */
    left: 10% !important;
    width: 80% !important;
    max-width: 900px !important;
    z-index: 20 !important;
}

.card-inner {
    display: flex !important;
    background: #fff !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15) !important;
}

.card-image {
    width: 45% !important;
    background-size: cover !important;
    background-position: center !important;
    min-height: 400px !important;
}

.card-content {
    width: 55% !important;
    padding: 60px !important;
    position: relative !important;
}

.card-close { position: absolute; top: 20px; right: 20px; border: none; background: none; font-size: 24px; opacity: 0.3; }
.card-number { font-size: 60px !important; font-weight: 700 !important; color: #f0f0f0 !important; display: block !important; margin-bottom: 0 !important; line-height: 1; }
.card-title { font-size: 32px !important; font-weight: 700 !important; color: #111 !important; margin-bottom: 5px !important; }
.card-subtitle { font-size: 18px !important; font-weight: 600 !important; color: #333 !important; margin-bottom: 20px !important; }
.card-text { color: #888 !important; font-size: 14px !important; margin-bottom: 40px !important; }

.card-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; border-top: 1px solid #eee !important; padding-top: 20px !important; }
.footer-left { display: flex !important; align-items: center !important; gap: 15px !important; }
.footer-left a { color: #111 !important; font-weight: 700 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 1px !important; }
.tag-important { color: #2250fc !important; font-family: monospace !important; font-weight: 700 !important; }

/* SECCIÓN AMENIDADES */
.amenities-section { padding: 200px 0 100px 0 !important; background: #fff !important; }
.amenities-title { text-align: center !important; font-size: 30px !important; font-weight: 700 !important; margin-bottom: 50px !important; }
.amenities-grid { display: flex !important; justify-content: center !important; gap: 60px !important; opacity: 0.5 !important; }


/* CONTENIDO CENTRAL */
.main-content { margin-left: 60px !important; }
.hero-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 90px !important;
    color: #fff !important;
    margin-bottom: 10px !important;
    line-height: 1 !important;
}
.hero-subtitle {
    font-size: 22px !important;
    color: #fff !important;
    font-weight: 300 !important;
    margin-bottom: 40px !important;
}

.hero-action {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Botón a la izquierda */
    gap: 20px;
}
.btn-consult {
    border: 1px solid #fff !important;
    padding: 15px 30px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
}
.hammer-icon { height: 40px !important; opacity: 0.9 !important; }

/* --- FORZAR CENTRADO EN MÓVILES --- */
@media (max-width: 767px) {
.main-content {
        text-align: center !important;     /* Texto al centro */
        width: 100% !important;
    }


.hero-title {
        font-size: 2.5rem !important;
    }

    .hero-subtitle {
        margin-bottom: 20px !important;
    }


    .hammer-icon {
        margin: 0 !important; /* Quita márgenes laterales que puedan descentrarlo */
        width: 40px !important; /* Tamaño ajustado para móvil */
    }
    
    .btn-consult {
        width: 100% !important; /* El botón ocupa el ancho disponible */
        max-width: 250px !important;
        justify-content: center !important;
    }
}

.main-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

/* --- ESTILO PARA PC (Por defecto) --- */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; 
    align-items: flex-start !important; /* <--- Esto lo mueve a la izquierda */
    padding-left: 10% !important;      /* <--- Margen de seguridad en PC */
    text-align: left !important;
}
.slide.active {
    opacity: 1;
    z-index: 2;
}

/* Forzar que el main-content dentro del slide respete el centrado móvil anterior */
@media (max-width: 767px) {
    .slide .main-content {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        left: 0 !important;
        padding: 0 20px;
    }
}

/* --- CONTENEDOR PRINCIPAL DEL SLIDER --- */
.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
}

.main-slider, .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- ESTILO DE LOS SLIDES (CENTRADO TOTAL) --- */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    transition: opacity 1s ease-in-out;
    
    /* Forzamos el centrado del texto y botón */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.slide.active {
    opacity: 1;
    z-index: 2; /* Sube la capa para ser visible */
}

.slider-bg-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* --- INTERFAZ (BARRAS LATERALES Y BOTONES) --- */
.slider-container-interface {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100; /* Siempre por encima de las imágenes */
    pointer-events: none; /* Deja pasar clicks al botón central */
    display: flex;
    justify-content: space-between;
}

.side-bar {
    pointer-events: auto; /* Reactiva clicks para redes y flechas */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 40px;
}

.nav-item {
    cursor: pointer;
    font-weight: bold;
    color: #fff;
    transition: 0.3s;
}

.nav-item:hover { color: #2250fc; }

.slide .main-content {
    position: relative !important; /* Quita posicionamientos absolutos previos si existen */
    z-index: 10 !important;
    max-width: 800px; /* Evita que el texto sea demasiado ancho en PC */
    padding: 0 20px;
}

.slide .hero-title {
    font-size: 5rem !important; /* Tamaño grande para el título */
    color: #fff !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
}

/* Asegúrate de que este ID o clase sea el que envuelve tus barras laterales */
.slider-container, .slider-container-interface {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100 !important; /* Por encima de todo */
    pointer-events: none; /* Deja pasar los clicks al fondo si es necesario */
}

.side-bar {
    pointer-events: auto !important; /* Permite clickear los iconos */
}

/* --- CORRECCIÓN PARA MÓVILES (Pantallas menores a 767px) --- */
@media (max-width: 767px) {
    


    /* 2. Aseguramos que el contenido principal ocupe todo el ancho y se centre */
    .slide {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 20px !important;
    }

.main-content {
    text-align: left !important; /* Texto a la izquierda */
    max-width: 600px;
}

    /* 3. Ajustamos el tamaño de la fuente para que no sea tan grande en celular */
    .hero-title {
        font-size: 2.8rem !important;
        line-height: 1.1 !important;
    }

    .hero-subtitle {
        font-size: 1.1rem !important;
        margin-bottom: 25px !important;
    }

    /* 4. Opcional: Si quieres que los botones de PREV/NEXT aparezcan 
       abajo de forma horizontal en lugar de estar a los lados */
.slider-container-interface {
        align-items: flex-end !important;
        justify-content: center !important;
        padding-bottom: 40px !important;
    }

    /* Mostramos solo la navegación en la parte inferior si lo deseas */
    .slider-nav {
        display: flex !important;
        gap: 30px !important;
        pointer-events: auto !important;
        background: rgba(0,0,0,0.5); /* Fondo oscuro para que se vea sobre la imagen */
        padding: 10px 20px;
        border-radius: 30px;
    }
}

/* --- AJUSTE PARA MÓVILES (FORMATO HORIZONTAL) --- */
@media (max-width: 767px) {
    
    /* 1. Contenedor de la interfaz: lo orientamos hacia abajo */
    .slider-container-interface {
        flex-direction: column !important;
        justify-content: flex-end !important; /* Mueve las barras al final del slider */
        align-items: center !important;
        padding-bottom: 20px !important;
    }

    /* 2. Convertimos las barras laterales en filas horizontales */
    .side-bar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important; /* Cambio clave a horizontal */
        justify-content: center !important;
        padding: 10px 0 !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    /* 3. Rotamos el texto de "FOLLOW US" para que sea horizontal */
    .vertical-text {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        margin-bottom: 0 !important;
        margin-right: 15px !important; /* Espacio a la derecha del texto */
        font-size: 10px !important;
    }

    /* 4. Alineamos los iconos sociales en fila */
    .social-icons {
        flex-direction: row !important;
        gap: 15px !important;
    }

    /* 5. Ajustamos la navegación (PREV/NEXT) */
    .slider-nav {
        flex-direction: row !important; /* Cambio clave a horizontal */
        height: auto !important;
        gap: 20px !important;
        align-items: center !important;
    }

    /* Convertimos la línea separadora en una línea vertical pequeña o la ocultamos */
    .nav-line {
        width: 1px !important;
        height: 20px !important;
        margin: 0 10px !important;
    }

    .nav-item {
        writing-mode: horizontal-tb !important;
        font-size: 12px !important;
    }

    /* 6. Ajuste de seguridad para el contenido central */
    .slide {
        padding-bottom: 120px !important; /* Espacio para que el texto no choque con las barras nuevas */
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


/* --- ESTILO PARA PC --- */
.slide {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; 
    align-items: flex-start !important; /* Alineado a la IZQUIERDA */
    padding-left: 10% !important;      /* Margen desde el borde izquierdo */
}

.main-content {
    text-align: left !important;
    max-width: 600px !important;
}

.hero-action {
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px;
}

@media (max-width: 767px) {
    /* 1. Centramos el contenedor del slide y eliminamos paddings laterales de PC */
    .slide {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centrado horizontal */
        justify-content: center !important; /* Centrado vertical */
        padding: 0 20px !important;
        text-align: center !important;
    }

    /* 2. Forzamos que el contenido principal ocupe el ancho y se alinee al centro */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* 3. Centramos el título y subtítulo */
    .hero-title {
        font-size: 3rem !important; /* Ajuste de tamaño para móvil */
        text-align: center !important;
        width: 100% !important;
    }

    .hero-subtitle {
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    /* 4. Centramos el grupo del botón y el icono del martillo */
    .hero-action {
        display: flex !important;
        flex-direction: row !important; /* Mantiene botón y martillo lado a lado */
        justify-content: center !important; /* Los centra a ambos como bloque */
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
    }

    /* Ajuste para que el botón no sea excesivamente ancho */
    .btn-consult {
        padding: 12px 25px !important;
        font-size: 11px !important;
    }

    /* 5. Interfaz inferior (Basado en tu imagen) */
    .slider-container-interface {
        flex-direction: column !important;
        justify-content: flex-end !important;
        padding-bottom: 30px !important;
        align-items: center !important;
    }

    .side-bar {
        position: relative !important;
        flex-direction: row !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 10px 0 !important;
    }

    /* Estilo para el contenedor de PREV | NEXT negro de tu imagen */
    .slider-nav {
        flex-direction: row !important;
        background: #000 !important; /* Color negro como en la captura */
        padding: 15px 40px !important;
        border-radius: 50px !important; /* Forma de píldora */
        gap: 20px !important;
        margin-top: 15px !important;
    }
}


@media (max-width: 767px) {
    /* 1. RESET TOTAL DE MÁRGENES Y PADDING */
    /* Eliminamos el padding de 60px que empuja el contenido a la izquierda */
    .slide {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        justify-content: center !important;
        padding: 0 20px !important; /* Padding simétrico para centrado real */
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. CONTENIDO PRINCIPAL */
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important; /* Centrado horizontal */
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        left: 0 !important; /* Anula cualquier desplazamiento absoluto */
    }

    /* 3. TIPOGRAFÍA MUCHO MÁS PEQUEÑA (FORZADO) */
    .hero-title {
        /* Tamaño reducido drásticamente para que "MODERN" quepa siempre */
        font-size: clamp(1.4rem, 8vw, 1.8rem) !important; 
        line-height: 1.1 !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto 10px auto !important;
        letter-spacing: -0.5px !important;
        
        /* Protección contra cortes */
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    .hero-subtitle {
        font-size: 0.85rem !important;
        width: 100% !important;
        max-width: 280px !important; /* Limitamos ancho para que el texto sea un bloque centrado */
        margin: 0 auto 20px auto !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }

    /* 4. GRUPO DE ACCIÓN (BOTÓN Y MARTILLO) */
    .hero-action {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important; /* Uno sobre otro para asegurar el eje central */
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important;
    }

    .btn-consult {
        font-size: 10px !important;
        padding: 10px 20px !important;
        min-width: 180px !important;
        margin: 0 !important;
    }

    .hammer-icon {
        width: 30px !important;
        height: auto !important;
        margin: 0 !important;
    }
}


/* --- ESTILO DEL HEADER (PARA MÓVILES Y PC) --- */
.custom-header {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000 !important;
    padding: 20px 0;
    background: transparent !important; /* Transparente para que se vea el slider */
}

.header-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 25px !important;
    max-width: 100%;
}

.logo img {
    height: 35px !important; /* Ajusta según el tamaño de tu logo */
    width: auto;
}

/* BOTÓN DE MENÚ (HAMBURGUESA) */
.menu-toggle {
    background: none !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    padding: 10px;
}

.menu-toggle span {
    display: block;
    width: 30px;
    height: 2px;
    background-color: #ffffff !important; /* Líneas blancas como en la captura */
    transition: 0.3s;
}

/* --- AJUSTE DEL SLIDER PARA QUE NO SE CORTE EL TEXTO --- */
@media (max-width: 767px) {
    /* Forzamos que el título sea pequeño para que NADA se corte */
    .hero-title {
        font-size: 1.6rem !important; /* Tamaño ultra seguro */
        margin-top: 40px !important; /* Baja el texto para que no choque con el logo */
        text-align: center !important;
        width: 100% !important;
    }

    .main-content {
        padding-top: 80px !important; /* Espacio para el header */
        align-items: center !important;
        justify-content: center !important;
    }
}

/* --- HEADER ALINEADO AL SLIDER --- */
.custom-header {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000 !important;
    padding: 30px 0; /* Espacio superior */
    background: transparent !important;
}

/* Este contenedor asegura que el logo y el botón se alineen con las barras laterales */
.header-alignment-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 40px !important; 
    max-width: 100%;
    margin: 0 auto;
}

.header-right {
    display: flex !important;
    align-items: center !important;
    gap: 30px; 
}

/* Estilo del Contacto (Escritorio) */
.header-contact {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    color: #ffffff;
}

.phone-icon {
    width: 20px !important;
    height: auto;
}

.phone-number {
    font-size: 14px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

/* Botón Hamburguesa */
.menu-toggle {
    background: none !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    cursor: pointer;
}

.menu-toggle span {
    width: 28px;
    height: 2px;
    background-color: #ffffff !important;
}

/* --- AJUSTE PARA MÓVILES (Desaparece el teléfono) --- */
@media (max-width: 767px) {
    .header-alignment-wrapper {
        padding: 0 25px !important;
    }

    /* OCULTAR TELÉFONO E ICONO EN MÓVIL */
    .header-contact {
        display: none !important;
    }

    /* Reducimos el espacio a la derecha al no haber teléfono */
    .header-right {
        gap: 0;
    }
}












/* --- PANEL LATERAL IZQUIERDO --- */
.side-panel {
    position: fixed !important;
    top: 0 !important;
    left: -450px !important; /* AHORA SE ESCONDE A LA IZQUIERDA */
    right: auto !important;  /* Desactivamos el lado derecho */
    width: 400px !important;
    max-width: 85% !important;
    height: 100vh !important;
    background: #111111 !important;
    z-index: 999999 !important;
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) !important;
    box-shadow: 10px 0 30px rgba(0,0,0,0.5); /* Sombra hacia la derecha */
    display: block !important;
}

/* ESTADO ABIERTO */
.side-panel.is-visible {
    left: 0 !important; /* ENTRA DESDE LA IZQUIERDA */
}

/* AJUSTE DEL BOTÓN CERRAR PARA EL LADO IZQUIERDO */
.side-panel-close {
    position: absolute;
    top: 20px;
    right: 20px; /* Lo mantenemos a la derecha del panel para que sea fácil de clickear */
    background: none;
    border: none;
    color: white;
    font-size: 45px;
    cursor: pointer;
}

/* El resto de los estilos internos se mantienen igual */

/* OVERLAY FORZADO */
#side-panel-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 999998 !important; /* Justo debajo del panel */
    display: none;
}

#side-panel-overlay.active {
    display: block !important;
}

/* CONTENIDO INTERNO */
.side-panel-content { padding: 80px 50px; color: white; }
.side-panel-logo img { width: 150px; margin-bottom: 40px; }
/* --- NAVEGACIÓN PANEL LATERAL --- */
.side-panel-links ul { 
    list-style: none; 
    padding: 0; 
}

.side-panel-links ul li { 
    margin-bottom: 20px; 
}

.side-panel-links ul li a { 
    color: white !important; 
    text-decoration: none !important; 
    font-size: 20px; 
    font-weight: 700;
    transition: 0.3s;
}

/* Cambio a Dorado al pasar el mouse (hover) y al hacer click (active) */
.side-panel-links ul li a:hover,
.side-panel-links ul li a:active { 
    color: #EED6B4 !important; 
}

.side-panel-close {
    position: absolute; top: 20px; right: 20px;
    background: none; border: none; color: white;
    font-size: 45px; cursor: pointer;
}

/* Título: Blanco fijo incluso en hover/click */
/* --- FORZAR TÍTULO A BLANCO ABSOLUTO --- */
.footer-title, 
.footer-title:hover, 
.footer-title:active, 
.footer-title:focus {
    color: #EED6B4 !important; /* Blanco puro */
    opacity: 1 !important;     /* Evita que se vea grisáceo si hay transparencia */
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
}
.side-panel-footer span { display: block; color: #888; font-size: 14px; margin-bottom: 5px; }
.side-socials { margin-top: 20px; display: flex; gap: 15px; }
.side-socials a { color: white; font-size: 18px; }



/* --- AJUSTE DE PROPORCIÓN Y TAMAÑO --- */
.about-property-overlap {
    position: relative !important;
    z-index: 500 !important;
    margin-top: -140px !important; /* Ajuste fino de subida */
    background: transparent;
}

/* Limitador para que la imagen no sea gigante */
.composition-limiter {
    width: 85%; /* No ocupa todo el ancho de la columna, igual que la referencia */
    margin-left: 0;
    display: flex;
    flex-direction: column;
}

.main-image-wrap {
    line-height: 0;
    overflow: hidden;
}

.main-image-wrap img {
    width: 100%;
    height: 550px; /* Altura fija para mantener proporción vertical elegante */
    object-fit: cover; /* Recorta la imagen para que siempre se vea bien */
    display: block;
    box-shadow: 20px 20px 60px rgba(0,0,0,0.15);
}

.decor-stack {
    margin-top: -1px;
    width: 100%;
}

.pattern-bg {
    height: 60px; /* Reducido para no verse tosco */
    width: 100%;
    line-height: 0;
}

.pattern-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.gold-footer {
    background-color: #bfa37c !important;
    height: 120px; /* Altura proporcional a la imagen superior */
    display: flex;
    align-items: center;
    padding-left: 40px;
}

.decor-number {
    font-size: 70px; /* Ajustado para que no sature */
    font-weight: 900;
    color: rgba(255, 255, 255, 0.25);
    font-family: 'Poppins', sans-serif;
}

/* Ajuste de Texto para compensar el ancho de la imagen */
.luxury-content {
    padding: 60px 10% 60px 5%;
    background: #fff;
}

.luxury-title {
    font-size: 40px;
    max-width: 500px;
}

/* --- VISTA MÓVIL FORZADA --- */
@media (max-width: 767px) {
    .composition-limiter {
        width: 100%; /* En móvil sí ocupa el ancho completo */
    }

    .main-image-wrap img {
        height: 350px; /* Proporción más baja para pantallas pequeñas */
    }

    .about-property-overlap {
        margin-top: -80px !important;
    }

    .luxury-content {
        padding: 40px 20px;
        text-align: center;
    }
}




/* --- ESTILO EXACTO DEL NÚMERO GRIS --- */
.side-floating-number {
    position: absolute;
    bottom: -40px; /* Sobresale hacia abajo */
    right: -30px;  /* Sobresale hacia la derecha */
    font-size: 120px;
    font-weight: 900;
    color: #eeeeee !important; /* COLOR GRIS CLARO DE LA PLANTILLA */
    z-index: 5; /* Por encima de la imagen y el patrón */
    font-family: 'Poppins', sans-serif;
    line-height: 1;
    pointer-events: none; /* Para que no interfiera con clics */
}

/* --- AJUSTES DE LA COMPOSICIÓN --- */
/* --- NUEVA ESTRUCTURA REFERENCIA --- */

.about-property-section {
    background-color: #fff !important;
    position: relative;
    z-index: 10;
    margin-top: -80px !important; /* Ajuste para solapar con el slider */
}

/* Fondo beige detrás de la imagen */
.pattern-bg-reference {
    position: absolute;
    top: 50%;
    left: -15%;
    transform: translateY(-50%);
    width: 80%;
    height: 90%;
    background-color: #f3d4ac !important; /* Color beige de la captura */
    z-index: 1;
}

.side-image-container {
    position: relative;
    width: 400px;
    height: 500px;
    z-index: 2;
}

.image-holder {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100%;
    box-shadow: 15px 15px 40px rgba(0,0,0,0.1);
}

/* Columna de texto con fondo blanco */
.white-bg-column {
    background-color: #ffffff !important;
    display: flex;
    align-items: center;
    padding: 60px 10% !important;
}

.about-text-inner-ref {
    position: relative;
}

/* Número 01 en gris claro sobre el texto */
.overlap-number-ref {
    font-size: 40px !important;
    font-weight: 800 !important;
    color: #e5e5e5 !important; /* Gris muy claro */
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}

.luxury-title-ref {
    font-family: 'Playfair Display', serif !important;
    font-size: 28px !important;
    color: #333 !important;
}

.luxury-title-ref span {
    color: #bfa37c !important; /* Color dorado para Pozniaky */
}

.luxury-subtitle-ref {
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 15px 0 !important;
    color: #111 !important;
}

.luxury-desc-ref {
    color: #777 !important;
    font-size: 14px !important;
    max-width: 350px;
    margin-bottom: 30px !important;
}

/* Link inferior con icono */
.projects-link-ref {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.projects-link-ref img {
    width: 35px;
    height: auto;
}

.projects-link-ref a {
    text-decoration: none !important;
    color: #111 !important;
    font-weight: 700 !important;
    font-size: 13px;
    text-transform: uppercase;
}

/* Responsive para que el fondo beige no se descuadre */
@media (max-width: 767px) {
    .side-image-container {
        width: 80%;
        height: auto;
    }
    .pattern-bg-reference {
        left: 0;
        width: 100%;
    }
}

.side-image-container {
    position: relative;
    width: 440px; 
    height: 580px;
}

.pattern-bg-back {
    position: absolute;
    top: 30px;
    left: -30px;
    width: 100%;
    height: 100%;
    background-image: url('../imagenes/side-pattern-bg.png'); /* Verifica esta ruta */
    background-repeat: repeat;
    z-index: 1;
}

.image-holder {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    box-shadow: 20px 20px 50px rgba(0,0,0,0.1);
}

.image-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Columna dorada alineada */
.gold-bg-column {
    background-color: #bfa37c !important;
    display: flex;
    align-items: center;
    padding: 80px 10% 80px 80px;
}

.about-text-inner { color: #ffffff; }

/* --- NÚMERO 01: NEGRO CON SOMBRA DORADA --- */
.side-floating-number {
    position: absolute;
    bottom: -40px; 
    right: -30px;  
    font-size: 120px;
    font-weight: 900;
    
    /* Color de base Negro */
    color: #111111 !important; 
    
    /* Sombra Dorada (Efecto resplandor/glow) */
    /* El primer valor es horizontal, segundo vertical, tercero el desenfoque y cuarto el color */
    text-shadow: 4px 4px 15px rgba(191, 163, 124, 0.8), 
                 -1px -1px 0px rgba(191, 163, 124, 0.5); 
    
    z-index: 5; 
    font-family: 'Poppins', sans-serif;
    line-height: 1;
    pointer-events: none;
    letter-spacing: -5px; /* Para que el 0 y el 1 estén más juntos como en la plantilla */
}

/* Ajuste para que se vea bien en móviles */
@media (max-width: 767px) {
    .side-floating-number {
        font-size: 80px;
        bottom: -20px;
        right: 0;
        text-shadow: 3px 3px 10px rgba(191, 163, 124, 0.6);
    }
}






/* slider fotos */


/* --- AJUSTE GALERÍA LADO A LADO --- */

.fan-gallery-section {
    padding: 120px 0;
    background-color: #fff;
    overflow: hidden;
}

/* Contenedor de las fotos */
.fan-wrapper {
    position: relative;
    height: 450px;
    width: 350px;
    margin: 0 auto; /* Centrado en su columna */
}

.fan-card {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: bottom center;
}

/* --- ANIMACIÓN AL HACER SCROLL --- */

.fan-wrapper.active .card-center {
    transform: translateY(-15px);
    z-index: 3;
}

.fan-wrapper.active .card-left {
    /* Se abre hacia la izquierda y rota */
    transform: translateX(-100px) translateY(10px) rotate(-12deg);
    z-index: 1;
}

.fan-wrapper.active .card-right {
    /* Se abre hacia la derecha y rota */
    transform: translateX(100px) translateY(10px) rotate(12deg);
    z-index: 2;
}

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

/* Responsive: En móvil las ponemos una debajo de otra */
@media (max-width: 767px) {
    .fan-wrapper {
        margin-top: 50px;
        width: 280px;
        height: 380px;
    }
    .fan-wrapper.active .card-left {
        transform: translateX(-40px) rotate(-8deg);
    }
    .fan-wrapper.active .card-right {
        transform: translateX(40px) rotate(8deg);
    }
}


/* --- INDICADOR DE MOVIMIENTO --- */
.scroll-indicator-fan {
    margin: 20px 0 30px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.arrow-text {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #bfa37c;
    font-weight: 700;
}

.moving-arrow {
    width: 50px;
    height: 1px;
    background: #bfa37c;
    position: relative;
    overflow: hidden;
}

.moving-arrow::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    animation: slideArrow 2s infinite linear;
}

@keyframes slideArrow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* --- OPTIMIZACIÓN MÓVIL --- */
@media (max-width: 767px) {
    .fan-gallery-section {
        padding: 60px 0;
    }
    .fan-wrapper {
        width: 260px; /* Más pequeño para que no se corte en pantallas chicas */
        margin-top: 40px;
    }
    .fan-wrapper.active .card-left {
        transform: translateX(-50px) rotate(-10deg) !important;
    }
    .fan-wrapper.active .card-right {
        transform: translateX(50px) rotate(10deg) !important;
    }
}

/* Estilo para las fotos que no son las 3 principales (ocultas tras el abanico) */
.card-extra {
    display: none; 
}

/* --- BOTÓN ZOOM ESTILO POLO --- */
.portfolio-description-ref {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
    pointer-events: auto; /* Permite clickear el botón */
}

.portfolio-description-ref .btn-light {
    background-color: #ffffff !important;
    color: #111 !important;
    padding: 8px 20px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border: none !important;
    cursor: pointer;
}

.portfolio-description-ref .btn-light:hover {
    background-color: #bfa37c !important;
    color: #fff !important;
}

/* Ajuste del fan-wrapper para el arrastre */
.fan-wrapper {
    cursor: grab; /* Indica que se puede arrastrar */
}

.fan-wrapper:active {
    cursor: grabbing;
}

/* --- ESTILO LUXURY POZNIAKY --- */
.fan-wrapper {
    position: relative;
    height: 480px;
    width: 360px;
    margin: 0 auto;
    perspective: 1200px;
}

.fan-card {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    overflow: visible; /* Importante para que el número sobresalga */
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
}

/* Clases de estado controladas por JS */
.pos-center { transform: translateZ(0) scale(1); z-index: 10; opacity: 1; }
.pos-left { transform: translateX(-120px) scale(0.85) rotate(-10deg); z-index: 5; opacity: 0.7; }
.pos-right { transform: translateX(120px) scale(0.85) rotate(10deg); z-index: 5; opacity: 0.7; }
.pos-hidden { transform: scale(0.5); opacity: 0; z-index: 0; }

/* --- NÚMERO GIGANTE NEGRO --- */
.card-number-big {
    position: absolute;
    bottom: -35px;
    right: -25px;
    font-size: 110px;
    font-weight: 900;
    color: #000;
    line-height: 1;
    z-index: 11;
    pointer-events: none;
    font-family: 'Arial Black', sans-serif;
}

/* Eliminado el número gigante (.card-number-big) */

/* --- BOTÓN DORADO --- */
.zoom-button-container {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    text-align: center;
    opacity: 0;
    transition: 0.4s;
    z-index: 12;
}

.pos-center .zoom-button-container { opacity: 1; }

.btn-gold-luxury {
    background-color: #bfa37c !important;
    color: #ffffff !important;
    padding: 12px 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);

    /* --- CENTRADO DEL TEXTO DENTRO DEL BOTÓN --- */
    display: inline-flex !important; /* Permite usar flexbox manteniendo el comportamiento de botón */
    align-items: center !important;    /* Centrado vertical del texto */
    justify-content: center !important; /* Centrado horizontal del texto */
    text-align: center !important;
    
    /* Ajustes de estructura */
    min-width: 160px; /* Opcional: asegura un ancho mínimo para que el centrado sea notable */
    height: 45px;     /* Opcional: una altura fija ayuda a ver el centrado vertical */
    line-height: 1 !important; /* Resetea el interlineado que suele mover el texto hacia abajo */
    text-decoration: none !important;
}

/* --- ESTILOS PARA LAS FLECHAS DEL MODAL (Magnific Popup) --- */
/* Forzamos a que las flechas del modal se parezcan a tu slider */
.mfp-arrow {
    background-color: rgba(191, 163, 124, 0.8) !important; /* Fondo Dorado suave */
    width: 60px !important;
    height: 60px !important;
    opacity: 1 !important;
}

.mfp-arrow:hover {
    background-color: #bfa37c !important;
}

/* Ajuste del contador "1 de X" en la esquina */
.mfp-counter {
    font-family: 'Poppins', sans-serif;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600;
    bottom: 20px !important;
    left: 20px !important;
    right: auto !important;
}

/* --- OPTIMIZACIÓN MÓVIL (Copia este bloque) --- */
@media (max-width: 767px) {
    .fan-gallery-section {
        padding: 40px 0; /* Reducimos espacio vertical */
    }

    .fan-wrapper {
        width: 250px;    /* Contenedor más angosto para móviles */
        height: 350px;   /* Altura proporcional */
        margin-top: 30px;
    }

    /* Reducimos el desplazamiento lateral para que no se salgan de la pantalla */
    .pos-left { 
        transform: translateX(-60px) scale(0.8) rotate(-8deg) !important; 
    }
    
    .pos-right { 
        transform: translateX(60px) scale(0.8) rotate(8deg) !important; 
    }

    /* La imagen central un poco más pequeña para dar aire */
    .pos-center {
        transform: translateZ(0) scale(0.95) !important;
    }

    /* Ajuste del botón dorado en móviles */
    .btn-gold-luxury {
        padding: 8px 15px !important;
        font-size: 10px !important;
    }

    /* Ajuste de las flechas del modal para que no tapen la foto en pantallas chicas */
    .mfp-arrow {
        width: 45px !important;
        height: 45px !important;
    }
}


/* Inicio de botones para la funcion de ver mas  */

/* ============================================================
   CONFIGURACIÓN DE FLECHAS: SIN CÍRCULO Y CON SOMBRA
   ============================================================ */

/* 1. El Botón (Transparente en todos sus estados) */
button.mfp-arrow, 
button.mfp-arrow:hover, 
button.mfp-arrow:active, 
button.mfp-arrow:focus {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    outline: none !important; /* Elimina el cuadro de enfoque */
    box-shadow: none !important; /* Elimina cualquier sombra de caja */
    
    width: 80px !important;
    height: 80px !important;
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 9999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: visible !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent; /* Elimina el flash azul en móviles */
}

/* Limpieza de capas internas de la plantilla */
button.mfp-arrow::before, 
button.mfp-arrow .mfp-b, 
button.mfp-arrow .mfp-a {
    display: none !important;
}

/* 2. Estilo de la Flecha y Sombra */
button.mfp-arrow::after {
    content: "" !important;
    display: block !important;
    position: relative !important; 
    width: 20px !important;
    height: 20px !important;
    border-top: 4px solid #ffffff !important; 
    border-right: 4px solid #ffffff !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
    box-sizing: border-box !important;

    /* SOMBRA NEGRA: Sigue la forma exacta de la "V" */
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.8)) !important;
    transition: all 0.3s ease !important;
}

/* --- AJUSTES INDEPENDIENTES PC --- */

/* Flecha IZQUIERDA PC */
button.mfp-arrow-left { left: 10px !important; }
button.mfp-arrow-left::after {
    transform: rotate(-135deg) translate(-15px, 30px) !important;
    margin: 0 !important; 
}

/* Flecha DERECHA PC */
button.mfp-arrow-right { right: 10px !important; left: auto !important; }
button.mfp-arrow-right::after {
    transform: rotate(45deg) !important;
    margin-top: -5px !important;   
    margin-left: -6px !important;  
}

/* 3. Efecto Hover (Solo cambia el color de la flecha) */
button.mfp-arrow:hover::after {
    border-color: #bfa37c !important; /* Dorado al pasar el mouse */
    filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 1)) !important;
}

/* ============================================================
   CONFIGURACIÓN MÓVIL (Max-width: 767px)
   ============================================================ */

@media (max-width: 767px) {
    button.mfp-arrow, 
    button.mfp-arrow:hover, 
    button.mfp-arrow:active {
        background: transparent !important;
        width: 60px !important;
        height: 60px !important;
    }

    button.mfp-arrow::after {
        width: 16px !important;
        height: 16px !important;
        border-top-width: 3px !important;
        border-right-width: 3px !important;
    }

    button.mfp-arrow-left::after {
        transform: rotate(-135deg) translate(-5px, -5px) !important;
    }

    button.mfp-arrow-right::after {
        transform: rotate(45deg) !important;
        margin-top: -3px !important;   
        margin-left: -5px !important;  
    }
}



/* inicio seccion amenidades  */

/* --- ENCABEZADO DE SECCIÓN --- */
/* --- ENCABEZADO DE SECCIÓN --- */
.amenidades-header {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
    gap: 20px;
}

.amenidades-header .number {
    font-size: 60px;
    font-weight: 200;
    color: #bfa37c;
    line-height: 1;
}

.amenidades-header .main-title {
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 3px;
    line-height: 1.2;
    margin: 0;
    color: #333;
    text-transform: uppercase;
}

.amenidades-header .main-title strong {
    font-weight: 800;
    display: block;
}

/* --- GRID Y CARDS (PC) --- */
.amenidades-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    width: 100%;
    align-items: start; /* Alinea todas las cards al tope de su fila */
}

.amenidad-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.amenidad-card img {
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
    width: 50px;
    height: 50px; /* Tamaño fijo para asegurar alineación vertical */
    object-fit: contain;
}

.amenidad-card .title {
    font-size: 16px; /* Ajustado para legibilidad */
    font-weight: 400;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 5px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    min-height: 40px; /* Forza que todos los títulos ocupen el mismo espacio */
    display: flex;
    align-items: center;
}

.amenidad-card .data {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    position: relative;
    z-index: 2;
}

/* --- ANIMACIÓN CÍRCULO --- */
.circle-animation {
    position: absolute;
    top: 25px; /* Centrado respecto al icono de 50px */
    left: 50%;
    width: 85px;
    height: 85px;
    background-color: rgba(191, 163, 124, 0.4) !important; 
    border-radius: 50%;
    z-index: 1;
    transform: translate(-50%, -50%) scale(0.6);
    animation: pulseCircle 3s infinite ease-in-out;
}

@keyframes pulseCircle {
    0%, 100% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

/* --- MÓVIL: ALINEACIÓN PERFECTA FORZADA (2-2-1) --- */
@media (max-width: 767px) {
    .amenidades-grid {
        /* Forza 2 columnas exactas y define que cada fila mida lo mismo */
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: 1fr; /* Todas las filas miden lo mismo que la más alta */
        gap: 50px 10px !important;
        padding: 0 10px;
    }

    .amenidad-card {
        padding: 10px 0;
    }

    /* El 5to elemento se centra usando el espacio de 2 columnas */
    .amenidad-card.last-item {
        grid-column: span 2 !important;
        width: 50%; /* Opcional: para que no se vea gigante al ocupar 2 columnas */
        margin: 0 auto;
    }

    .amenidad-card img {
        width: 45px;
        height: 45px;
    }

    .amenidad-card .title {
        font-size: 11px;
        min-height: 30px; /* Asegura que el texto "Departamentos" y otros alineen los números abajo */
    }

    .amenidad-card .data {
        font-size: 18px;
    }

    .circle-animation {
        width: 75px;
        height: 75px;
        top: 22px; 
    }
}












/* Inicio slider y mapa */
/* INMOB.CSS - Versión Luxury Stack con Fix de Flechas y Click */
/* INMOB.CSS - Versión Luxury Stack 75% + Full Responsivo Corregido */
/* INMOB.CSS - Versión Luxury Force-Abanico Responsivo */
/* INMOB.CSS - Versión Luxury Stack 75% Centrado + Full Responsivo */

/* INMOB.CSS - Versión Final Corregida: Abanico 130% + Sin textos de navegación en móvil */

/* 0. CONFIGURACIÓN INICIAL */
.lux-radio { 
    display: none !important; 
}

/* 1. SECCIÓN PRINCIPAL */
.lux-main-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 600px;
    position: relative;
}

.lux-slider-engine {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 20px;
    perspective: 1500px;
}

/* 2. SIDEBAR DE MINIATURAS (Desktop) */
.lux-thumbs-sidebar {
    width: 120px;
    height: 100%;
    background: #000;
    border-radius: 20px;
    padding: 15px 5px;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    flex-shrink: 0;
}

.lux-scroll-area {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 15px;
}

/* Scrollbar personalizada */
.lux-scroll-area::-webkit-scrollbar { width: 5px; height: 5px; }
.lux-scroll-area::-webkit-scrollbar-thumb { background: #b3966a; border-radius: 10px; }

.lux-thumb-item {
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 10px;
    opacity: 0.5;
    transition: 0.3s;
    border: 2px solid transparent;
    flex-shrink: 0;
}

.lux-thumb-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

/* 3. ÁREA DEL VISOR */
.lux-main-view {
    flex: 1;
    position: relative;
    height: 100%;
    transform-style: preserve-3d;
    overflow: visible !important;
}

/* --- FLECHAS DESKTOP --- */
.lux-nav-arrows {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    z-index: 500;
    pointer-events: none;
}

.lux-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 70px;
    color: #b3966a !important;
    cursor: pointer;
    display: none;
    pointer-events: auto;
    z-index: 501;
}

.arrow-prev { left: 4%; } 
.arrow-next { right: 4%; }

/* 4. STACK DE IMÁGENES (Desktop) */
.lux-full-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75%; 
    height: 85%;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.7s cubic-bezier(0.2, 1, 0.3, 1);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* 5. BOTÓN VER IMAGEN */
.zoom-button-container {
    position: absolute;
    bottom: 30px;
    left: 15%; 
    z-index: 600;
}

.btn-gold-luxury {
    background: #b3966a !important;
    color: #fff !important;
    padding: 10px 22px !important;
    font-size: 11px !important;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
}

/* 6. NAVEGACIÓN MÓVIL (Oculta por defecto) */
.lux-mobile-nav {
    display: none;
}

/* 7. AJUSTES RESPONSIVOS (CELULARES) */
@media (max-width: 768px) {
    .lux-main-container {
        height: auto !important;
        min-height: 900px !important; 
        display: block !important;
        overflow: visible !important;
    }

    .lux-slider-engine {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        perspective: 1500px !important;
    }

    /* VISOR */
    .lux-main-view {
        height: 480px !important; 
        width: 100% !important;
        margin-bottom: 20px !important;
        overflow: visible !important;
        z-index: 10;
    }

    /* IMÁGENES AL 130% BASE */
    .lux-full-img {
        width: 115% !important; 
        height: 100% !important;
        background-size: contain !important;
    }

    /* CONTROLES MÓVIL (SÓLO LÍNEA) */
    .lux-mobile-nav {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-top: 10px !important;
        margin-bottom: 20px !important;
        z-index: 800;
    }

    /* OCULTAMOS LOS TEXTOS "PREVIO" Y "SIGUIENTE" */
    .nav-m-item {
        display: none !important; 
    }

    .nav-m-line {
        width: 80px; /* Línea un poco más larga para que sea fácil tocarla */
        height: 2px;
        background: #b3966a;
    }

    /* MINIATURAS */
    .lux-thumbs-sidebar {
        width: 92% !important;
        height: 110px !important;
        margin: 20px auto !important;
        background: #000 !important;
        border-radius: 15px !important;
        padding: 10px !important;
        display: block !important;
    }

    .lux-scroll-area {
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 12px !important;
    }

    .lux-thumb-item {
        width: 80px !important;
        height: 80px !important;
        flex-shrink: 0 !important;
    }

    /* BOTÓN VER IMAGEN */
    .zoom-button-container {
        position: relative !important;
        left: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        margin-top: -30px;
        text-align: center;
        width: 100%;
        z-index: 900;
    }
}

















/* ubicaciòn */
/* Contenedor del pin y etiquetas */
.amenity-pin-wrapper {
    display: flex;
    align-items: center;
    transform: translate(-7px, -7px);
    cursor: pointer;
    position: relative;
}

/* --- PIN CON BORDE FINO --- */
.pin-secundario {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    /* Borde muy fino y sutil como en la imagen */
    border: 1px solid rgba(255, 255, 255, 0.6); 
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.pin-inner {
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
}

/* --- SOMBRA CON DEGRADADO (DIRECCIONAL) --- */
.pin-directional-shadow {
    position: absolute;
    /* La sombra se estira hacia una dirección */
    width: 30px; 
    height: 15px;
    /* Degradado de negro suave a transparente */
    background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
    top: 8px;
    left: 4px;
    z-index: 1;
    transform: rotate(15deg); /* Ajusta este ángulo para apuntar al centro */
    filter: blur(2px);
    border-radius: 50%;
}

/* Colores de los pines */
.pin-secundario.verde { background-color: #2ecc71; }
.pin-secundario.azul { background-color: #3498db; }
.pin-secundario.amarillo { background-color: #f1c40f; }

/* --- CUADRO DE INFO --- */
.amenity-info-box {
    display: flex;
    align-items: center;
    background: #ffffff;
    margin-left: 10px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.3);
    height: 32px;
}

.amenity-logo {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.amenity-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.amenity-text {
    padding: 0 10px;
    color: #333;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

/* PIN PRINCIPAL */
.pin-principal {
    width: 20px;
    height: 20px;
    background-color: #b3966a;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(179, 150, 106, 0.6);
    transform: translate(-10px, -10px);
}




/* Croquis, render y ubicacion */

/* --- SECCIÓN PLANOS BASE --- */
.apartment-plans-luxury {
    padding: 100px 0;
    background: #ffffff;
    display: flex;
    justify-content: center;
}

.container-luxury {
    display: flex;
    gap: 100px;
    align-items: center;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Adaptado con el '1' Elevado */
.amenidades-header-luxury { margin-bottom: 30px; }
.number-luxury { font-size: 35px; font-weight: 700; color: #f2f2f2; display: block; line-height: 1; }
.main-title-luxury { font-family: 'Playfair Display', serif !important; font-size: 42px; color: #b59461; line-height: 1.1; }
.main-title-luxury strong { 
    color: #000; font-size: 0.6em; vertical-align: super;
    position: relative; top: -15px; margin-left: 5px;
}

/* Tabla con Espaciado Extremo */
.luxury-specs-table { width: 100%; min-width: 520px; }
.spec-row, .spec-row-total { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f2f2f2; gap: 80px; }
.spec-row span { font-family: 'Playfair Display', serif !important; font-weight: 900; color: #000; font-size: 15px; white-space: nowrap; }
.spec-row strong { font-family: 'Poppins', sans-serif !important; color: #b59461; font-weight: 800; font-size: 15px; }

/* Tabs y Botón */
.luxury-tabs { display: flex; justify-content: center; gap: 30px; margin-bottom: 35px; border-bottom: 1px solid #f0f0f0; }
.luxury-tab-btn {
    background: none; border: none; padding: 10px 5px; font-family: 'Poppins', sans-serif !important;
    font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #bbb; cursor: pointer; position: relative;
}
.luxury-tab-btn.active { color: #111; }
.luxury-tab-btn.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: #b59461; }

.btn-outline-luxury {
    display: inline-block; padding: 14px 40px; background: #fff; color: #000 !important;
    border: 2px solid #000; font-size: 11px; font-weight: 700; letter-spacing: 2px; transition: 0.4s;
}
.btn-outline-luxury:hover { background: #b59461; color: #fff !important; border-color: #b59461; }

/* Modal Styles */
.hp-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 99999; align-items: center; justify-content: center; }
.hp-modal-nav { background: none; border: none; color: #b59461; font-size: 50px; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); padding: 20px; }
.prev { left: 20px; } .next { right: 20px; }
#hp-modal-img { max-height: 80vh; max-width: 90%; border: 1px solid #333; }
.hp-modal-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; cursor: pointer; }

/* --- AJUSTES RESPONSIVOS --- */
@media (max-width: 991px) {
    .container-luxury { flex-direction: column; gap: 40px; }
    .luxury-specs-table { min-width: 100%; }
    .spec-row { gap: 20px; }
    .main-title-luxury { font-size: 34px; text-align: center; }
    .number-luxury { text-align: center; }
    .hp-modal-nav { font-size: 35px; }
}

/* --- FIX SALTO DE IMAGEN Y PROPORCIONES --- */
.image-frame-small {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4 / 3; /* Forzamos una proporción fija para que no haya saltos */
    margin: 0 auto;
    overflow: hidden;
    background: #f9f9f9; /* Fondo neutro mientras carga */
    display: flex;
    align-items: center;
    justify-content: center;
}

#main-luxury-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Evita que la imagen se deforme, la ajusta al marco */
    transition: opacity 0.5s ease-in-out;
}

/* --- AJUSTES MÓVILES REFINADOS --- */
@media (max-width: 767px) {
    .container-luxury {
        flex-direction: column !important;
        gap: 30px !important;
        padding: 0 15px !important;
    }

    .plans-info-col, .plans-visual-col {
        width: 100% !important;
        min-width: unset !important;
    }

    .luxury-specs-table {
        min-width: 100% !important;
    }

    /* Evitar que las etiquetas y valores se encimen en pantallas mini */
    .spec-row {
        gap: 10px !important;
    }

    .spec-row span {
        font-size: 13px !important;
        white-space: normal !important; /* Permite que el texto baje si es muy largo */
    }

    .luxury-tabs {
        gap: 10px !important;
        flex-wrap: wrap; /* Si no caben, se acomodan en dos filas */
    }

    .luxury-tab-btn {
        font-size: 10px !important;
        letter-spacing: 1px !important;
    }

    .image-frame-small {
        max-width: 100%; /* Ocupa el ancho del celular */
        height: auto;
        aspect-ratio: 1 / 1; /* En móvil suele verse mejor cuadrado o según contenido */
    }
}


/* bOTON CONTACTANOS O CONTACTO  */

/* --- ESTADO INICIAL DEL BOTÓN --- */
.btn-consult {
    border: 1px solid #fff !important;
    padding: 15px 30px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    display: flex !important; 
    align-items: center !important; 
    gap: 10px !important;
    background: transparent !important; /* Fondo transparente al inicio */
    text-decoration: none !important;
    transition: all 0.4s ease !important; /* Suaviza el cambio de color */
}

/* --- EFECTO HOVER (MOUSE ENCIMA) Y CLICK --- */
.btn-consult:hover, 
.btn-consult:active, 
.btn-consult:focus {
    background-color: #b59461 !important; /* Dorado */
    color: #ffffff !important;           /* Letras Blancas */
    border-color: #b59461 !important;     /* El borde también cambia a dorado */
}

/* Asegurar que el icono dentro del botón también cambie de color si fuera necesario */
.btn-consult:hover i {
    color: #fff !important;
}







/* Footer */
/* ================================================================
   FOOTER - TIPOGRAFÍA INCREMENTADA Y SIMETRÍA TOTAL
   ================================================================ */
   /* ================================================================
   FOOTER COMPLETO - REDES SOCIALES HORIZONTALES Y REACOMODO
   ================================================================ */

:root {
    --gold-bg: #b3966a;
    --dark-bg: #1a1a1a;
    --text-light: #ffffff;
    --text-muted: #999999;
    --accent-gold: #EED6B4;
}

.main-footer {
    font-family: 'Arial', sans-serif;
    background-color: #ffffff !important; 
    padding-top: 60px;
}

/* --- TARJETA DORADA (BLOQUE SUPERIOR) --- */
.footer-contact-info {
    background-color: var(--gold-bg) !important;
    max-width: 80% !important;
    margin: 0 auto !important;
    padding: 50px 0 !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    position: relative;
    z-index: 10;
    border-radius: 4px;
}

.footer-contact-info .container {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    gap: 60px !important;
    flex-wrap: wrap;
    padding: 0 40px;
}

.contact-item {
    display: flex !important;
    flex-direction: row !important; 
    align-items: flex-start !important;
    text-align: left !important;
    flex: 0 1 auto !important;
    min-width: 300px;
}

.contact-item img {
    width: 50px !important;
    height: 50px !important;
    margin-right: 18px !important;
    object-fit: contain;
    flex-shrink: 0;
}

.luxury-title-ref {
    color: #ffffff !important;
    margin: 0 0 8px 0 !important;
    font-size: 1.5rem !important; 
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

.luxury-desc-ref {
    color: #ffffff !important;
    margin: 0 !important;
    font-size: 1.05rem !important; 
    line-height: 1.5 !important;
}

/* --- BLOQUE NEGRO (RECOMODO DE COLUMNAS) --- */
.footer-main-content {
    background-color: var(--dark-bg) !important;
    padding: 100px 0 60px 0 !important;
    margin-top: -40px !important; 
}

.footer-main-content .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
}

.footer-brand {
    flex: 1 !important;
    min-width: 280px !important;
    margin-bottom: 30px !important;
}

.footer-logo {
    width: 200px !important;
    height: auto !important;
    margin-bottom: 20px !important;
}

.footer-brand p {
    font-size: 0.95rem !important;
    color: var(--text-muted) !important;
    line-height: 1.6 !important;
    max-width: 300px !important;
}

.footer-links {
    flex: 1 !important;
    display: flex !important;
    justify-content: space-evenly !important;
    min-width: 250px !important;
    margin-bottom: 30px !important;
}

.link-col a {
    display: block !important;
    color: var(--text-light) !important;
    text-decoration: none !important;
    margin-bottom: 12px !important;
    font-size: 0.95rem !important;
}

.footer-call {
    flex: 1 !important;
    text-align: right !important;
    min-width: 280px !important;
}

.call-label {
    display: block !important;
    color: var(--text-light) !important;
    font-size: 0.85rem !important;
    letter-spacing: 2px !important;
    margin-bottom: 10px !important;
}

.phone-number {
    font-size: 1.7rem !important;
    font-weight: bold !important;
    color: var(--accent-gold) !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.email { 
    color: var(--text-muted) !important; 
    margin-bottom: 15px !important;
    display: block !important;
}

/* --- AJUSTE REDES SOCIALES (HORIZONTAL) --- */
.social-icons {
    display: flex !important;
    flex-direction: row !important; /* Fuerza alineación horizontal */
    justify-content: flex-end !important; /* Alinea a la derecha en PC */
    gap: 12px !important; /* Espacio entre iconos */
    margin-top: 15px !important;
}

.social-icons a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 35px !important;
    height: 35px !important;
    background: #333 !important;
    color: #fff !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    transition: 0.3s !important;
}

.social-icons a:hover {
    background: var(--gold-bg) !important;
}

/* --- COPYRIGHT --- */
.footer-bottom {
    background-color: #111 !important;
    padding: 25px 0 !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    text-align: center !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 1100px) {
    .footer-contact-info { max-width: 90% !important; }
    .footer-contact-info .container { gap: 30px !important; }
}

@media (max-width: 768px) {
    .footer-main-content .container {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .footer-links {
        width: 100% !important;
        justify-content: center !important;
        gap: 30px !important;
    }

    .footer-call {
        text-align: center !important;
    }

    .social-icons {
        justify-content: center !important; /* Centra iconos en móviles */
    }
}







/* iconos redes soiales en slider */


/* 1. PC: Mantenerlos en vertical dentro del slider */
.side-bar.left-bar .social-icons {
    display: flex !important;
    flex-direction: column !important; /* Vertical */
    align-items: center !important;
    gap: 15px !important;
    margin-top: 20px !important;
}

/* 2. MÓVIL: Cambiarlos a horizontal automáticamente */
@media (max-width: 768px) {
    .side-bar.left-bar {
        position: relative !important; /* Ajusta la barra si es necesario en móvil */
        width: 100% !important;
        left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 20px;
    }

    .side-bar.left-bar .social-icons {
        flex-direction: row !important; /* CAMBIO A HORIZONTAL EN MÓVIL */
        justify-content: center !important;
        gap: 25px !important; /* Más espacio para que sea fácil tocarlos con el dedo */
    }

    .side-bar.left-bar .vertical-text {
        writing-mode: horizontal-tb !important; /* Texto ya no vertical en móvil */
        margin-bottom: 10px;
    }
}




/* botòn flotante */

/* Estilos para el Pop-up Flotante */
#floating-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que esté por encima de todo */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#floating-popup.show {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    background: #1a1a1a; /* Fondo oscuro similar a tu tema */
    color: #EED6B4; /* Dorado para el texto */
    padding: 30px 40px;
    border-radius: 10px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

#floating-popup.show .popup-content {
    transform: scale(1);
}

.close-popup {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    cursor: pointer;
    color: #999;
}

.close-popup:hover {
    color: #EED6B4;
}

.popup-content h2 {
    font-size: 24px;
    margin-bottom: 15px;
}

.popup-content p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 25px;
    color: #ccc;
}

.popup-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    background: #25D366; /* Color oficial de WhatsApp */
    color: white;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    transition: background 0.3s ease;
}

.popup-whatsapp-btn i {
    margin-right: 10px;
    font-size: 22px;
}

.popup-whatsapp-btn:hover {
    background: #1da851;
}

/* Estilos para el Botón Flotante de WhatsApp permanente */
#floating-whatsapp-button {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: #EED6B4; /* Dorado */
    color: #1a1a1a; /* Color del texto/icono oscuro para contrastar */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 999;
    text-decoration: none;
    transition: transform 0.3s ease, background 0.3s ease;
}

#floating-whatsapp-button:hover {
    transform: scale(1.1);
    background: #d8b88d; /* Dorado un poco más oscuro al pasar el mouse */
}













/*  formulario flotante */

/* --- ESTILOS PARA EL FORMULARIO INTEGRADO (LUXURY) --- */
/* ================================================= */
/* ESTILO LUXURY PARA FORMULARIO INTEGRADO RELP    */
/* ================================================= */

/* 1. Contenedor Principal (Caja de Texto + Formulario) */
.carousel-text-box-ref {
    padding: 30px !important;
    position: relative;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95); /* Fondo blanco con ligera transparencia */
    border-radius: 12px;
    max-width: 480px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    font-family: 'Poppins', sans-serif !important;
    display: block;
    overflow: visible;
}

/* 2. Títulos y Descripciones */
.luxury-title-ref {
    color: #B3966A !important; /* Dorado corporativo */
    font-size: 25px !important;
    font-weight: 700 !important;
    margin-bottom: 5px !important;
    line-height: 1.2 !important;
}

.luxury-desc-ref {
    color: #333333 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-bottom: 25px !important;
    line-height: 1.5 !important;
}

/* 3. Estilos de los Campos de Entrada (Inputs) */
.luxury-input-ref {
    width: 100% !important;
    border: none !important;
    border-bottom: 1px solid #B3966A !important; /* Línea dorada minimalista */
    border-radius: 0 !important;
    background: transparent !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
    color: #1a1a1a !important;
    font-family: 'Poppins', sans-serif !important;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

.luxury-input-ref:focus {
    outline: none !important;
    border-bottom: 1px solid #000000 !important; /* Cambia a negro al escribir */
    background: transparent !important;
}

.luxury-input-ref::placeholder {
    color: #999 !important;
    font-weight: 300;
}

/* 4. BOTÓN "SOLICITAR INFORMACIÓN" (Corrección de corte) */
#form-submit {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 50px !important; /* Altura suficiente para que no se corte */
    
    background-color: #1a1a1a !important; /* Negro elegante */
    color: #B3966A !important; /* Letras doradas */
    
    border: 1px solid #B3966A !important;
    border-radius: 4px !important;
    
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    line-height: 1 !important; /* Centrado vertical del texto */
    
    padding: 15px 10px !important;
    margin-top: 20px !important;
    cursor: pointer !important;
    transition: all 0.4s ease !important;
    
    white-space: normal !important; /* Permite que el texto se ajuste si el ancho es poco */
    text-align: center;
}

#form-submit:hover {
    background-color: #B3966A !important; /* Invierte colores */
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(179, 150, 106, 0.4) !important;
}

/* 5. Ajustes de Espaciado para el Grid del Formulario */
.form-luxury-compact .form-group {
    margin-bottom: 15px !important;
}

/* 6. Adaptación para Dispositivos Móviles */
@media (max-width: 991px) {
    .carousel-text-box-ref {
        max-width: 92% !important;
        margin: 20px auto !important;
        padding: 20px !important;
        background: rgba(255, 255, 255, 1); /* Sólido en móvil para mayor claridad */
    }
    
    .luxury-title-ref {
        font-size: 22px !important;
    }

    #form-submit {
        font-size: 12px !important; /* Un poco más pequeño para evitar cortes en pantallas angostas */
        letter-spacing: 1px !important;
    }
}

/* Forzar que el contenedor no corte elementos visuales */
.body-inner, .slider-wrapper, .main-slider {
    overflow: visible !important;
}














/* nuevo mapa*/
/* Corrección de Tipografía en el Mapa */
.luxury-map-label {
    font-family: 'Poppins', sans-serif !important; /* Forzamos la fuente del sitio */
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #1a1a1a !important;
    padding-left: 10px !important;
    padding-right: 15px !important;
}

/* Estilo de la caja de información */
.amenity-info-box {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    overflow: hidden !important;
    height: 34px !important; /* Altura fija para consistencia */
}

/* Reset de Leaflet para evitar conflictos visuales */
.leaflet-custom-icon {
    background: none !important;
    border: none !important;
}

.amenity-pin-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: max-content !important;
}

/* Quitar estilos por defecto de Leaflet que rompen el diseño */
.leaflet-amenity-pin, .leaflet-main-pin {
    background: none !important;
    border: none !important;
    display: flex !important;
    align-items: center;
}

/* Asegurar que el envoltorio de la amenidad sea horizontal */
.amenity-pin-wrapper {
    display: flex !important;
    flex-direction: row !important; /* Fuerza horizontalidad */
    align-items: center !important;
    width: max-content !important; /* Permite que crezca según el texto */
    position: relative;
}

/* Asegura que el cuadro de información no se colapse */
.amenity-info-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    white-space: nowrap !important; /* Evita que el texto salte de línea */
}


/**/

/* Contenedor de Redes Sociales */
.social-icons-container {
    display: flex;
    justify-content: center;
    gap: 15px; /* Espacio horizontal entre iconos */
    flex-wrap: wrap; /* Por si hay muchos, que bajen de línea en vez de encimarse */
}

.social-icons-container a {
    color: #ffffff;
    background: rgba(255,255,255,0.1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    transition: 0.3s;
    text-decoration: none;
}

.social-icons-container a:hover {
    background: #B3966A;
    color: #1a1a1a;
    transform: translateY(-3px);
}

/* MEDIA QUERY PARA MÓVIL */
@media (max-width: 768px) {
    .footer-call {
        gap: 25px !important; /* Aumenta el espacio vertical entre botón e iconos */
        padding: 20px 0;
    }
    
    .luxury-btn-wa {
        order: 1; /* El botón aparece primero */
    }
    
    .social-icons-container {
        order: 2; /* Los iconos aparecen después */
    }
}

/* Contenedor del Botón de WhatsApp */
.luxury-btn-wa {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    background-color: #1a1a1a;
    color: #B3966A;
    border: 1px solid #B3966A;
    padding: 12px 30px;
    border-radius: 4px;
    font-weight: 700;
    width: 100%;
    max-width: 280px; /* Evita que sea gigante en desktop */
    transition: all 0.3s ease;
}

/* --- NUEVA SECCIÓN: AMENIDADES PLANTA 20 --- */
.amenities-master-section {
    padding: 100px 0;
    background-color: #ffffff;
}

/* Alineación Centrada del Contenido Principal */
.amenities-master-section .row {
    display: flex;
    align-items: center; /* Centra verticalmente la lista y el mapa */
}

/* Columna de Texto Izquierda */
.ame-tagline {
    color: #b59461;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 13px;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.ame-main-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 36px;
    line-height: 1.1;
    margin-bottom: 40px;
    color: #000;
    text-transform: uppercase;
}

/* Listado de Amenidades Desktop */
.ame-custom-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.ame-custom-list li {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #444;
    padding: 8px 0;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    align-items: flex-start;
}

.ame-custom-list li span {
    color: #b59461;
    font-weight: 700;
    margin-right: 15px;
    font-size: 11px;
    margin-top: 3px;
}

.ame-footer-note {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    border-left: 3px solid #b59461;
    padding-left: 15px;
    margin-top: 20px;
}

/* --- EFECTO TARJETA FLOTANTE (MAPA Y GRID) --- */
.col-lg-8 {
    background: #ffffff;
    padding: 40px;
    border-radius: 15px;
    /* Sombreado de tarjeta flotante */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); 
    border: 1px solid rgba(181, 148, 97, 0.1); /* Toque dorado sutil */
    transition: transform 0.3s ease;
}

.col-lg-8:hover {
    transform: translateY(-5px); /* Pequeña animación al pasar el mouse */
}

.ame-map-frame {
    width: 100%;
    margin-bottom: 40px;
    border-radius: 8px;
    overflow: hidden;
}

.ame-map-frame img {
    width: 100%;
    height: auto;
    display: block;
}

/* Grid de Iconos Inferiores */
.amenidades-grid {
    gap: 20px;
}

/* --- ADAPTACIÓN PARA MÓVILES --- */
@media (max-width: 991px) {
    .amenities-master-section {
        padding: 60px 0;
    }

    .amenities-master-section .row {
        display: block; /* Vuelve al flujo normal en móviles */
    }

    .col-lg-8 {
        padding: 20px;
        margin-top: 40px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    }

    .ame-main-title { 
        font-size: 28px; 
    }

    /* Lista: 4 columnas con scroll horizontal */
    .ame-custom-list {
        display: grid;
        grid-template-columns: repeat(4, 180px); 
        gap: 16.5px;
        overflow-x: auto;
        padding-bottom: 15px;
        margin-bottom: 20px;
        -webkit-overflow-scrolling: touch;
    }

    .ame-custom-list li {
        border-bottom: 1px solid #eee;
        padding-right: 15px; 
        line-height: 1.3;
        white-space: normal;
    }

    /* Barra de desplazamiento dorada siempre visible */
    .ame-custom-list::-webkit-scrollbar {
        height: 6px;
        display: block; 
    }

    .ame-custom-list::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .ame-custom-list::-webkit-scrollbar-thumb {
        background: #b59461; 
        border-radius: 10px;
    }
}

/* Servicios Adicionales */
/* --- SECCIÓN SERVICIOS ADICIONALES --- */
.ame-additional-services {
    padding: 80px 0;
    background-color: #f9f9f9; /* Un tono gris muy ligero para diferenciar */
}

.services-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.service-item {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 8px;
    transition: transform 0.3s ease;
    border: 1px solid #eee;
    text-align: center;
}

.service-item:hover {
    transform: translateY(-5px);
    border-color: #b59461;
}

.service-icon {
    font-size: 30px;
    color: #b59461;
    margin-bottom: 20px;
}

.service-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.service-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    margin: 0;
}

/* --- RESPONSIVE SERVICIOS --- */
@media (max-width: 991px) {
    .services-grid-wrapper {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .services-grid-wrapper {
        grid-template-columns: 1fr; /* 1 columna en móviles pequeños */
    }
    
    .service-item {
        padding: 20px;
    }
}






/* Mapa de ubicaciòn y amenidades */


/* --- VERSIÓN 14: SOLO UBICACIÓN Y MAPA --- */
.loc-final-v14 { padding: 80px 0; background: #fff; overflow: hidden; }
.loc-main-title { font-family: 'Poppins', sans-serif; font-size: 32px; font-weight: 800; line-height: 1.1; margin-bottom: 30px; }

/* PROGRESO */
.loc-scroll-indicator-top { margin-bottom: 40px; }
.loc-progress-track { width: 100%; height: 3px; background: #f0f0f0; border-radius: 10px; }
.loc-progress-bar { width: 0%; height: 100%; background: #b59461; border-radius: 10px; transition: 0.5s ease; }

/* SLIDER AREA */
.loc-scroll-area-v14 { 
    display: flex; 
    overflow-x: hidden; /* Ocultamos scroll manual para controlarlo por JS */
    scroll-behavior: smooth;
    gap: 0; 
}
.loc-block-v14 { min-width: 100%; width: 100%; flex-shrink: 0; padding-right: 15px; }

.loc-head-v14 { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.loc-head-v14 img { width: 35px; height: 35px; object-fit: contain; }
.loc-head-v14 h3 { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; color: #b59461; text-transform: uppercase; margin: 0; }

/* LISTA Y RESTRICCIÓN DE FILAS */
.loc-list-v14 { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.loc-list-v14 li { 
    width: 50%; /* Dos columnas en desktop */
    font-family: 'Poppins', sans-serif; font-size: 13px; color: #333;
    padding: 8px 0; border-bottom: 1px solid #f2f2f2;
    display: flex; align-items: flex-start;
}
.loc-list-v14 li span { color: #b59461; font-weight: 800; font-size: 10px; min-width: 25px; margin-top: 2px; }

/* AJUSTE RESPONSIVO: MÁXIMO 4 FILAS */
@media (max-width: 768px) {
    .loc-list-v14 li { width: 100%; } /* Una columna en móvil */
    .loc-list-wrapper-v14 { 
        max-height: calc(38px * 4); /* Ajuste basado en el alto promedio de la fila */
        overflow-y: auto; 
    }
    .loc-card-right-v14 { height: 400px; margin-top: 30px; }
}

/* CONTROLES */
.loc-controls-bottom-v14 { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #eee; padding-top: 20px; }
.btn-v14 { background: #fff; border: 2px solid #b59461; color: #b59461; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
.btn-v14:hover { background: #b59461; color: #fff; }
.loc-label-nav-v14 { font-family: 'Poppins', sans-serif; font-weight: 800; color: #000; font-size: 13px; letter-spacing: 1px; }

/* MAPA */
.loc-card-right-v14 { background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 30px 60px rgba(0,0,0,0.08); height: 600px; display: flex; flex-direction: column; }
.active-tab { padding: 8px 20px; background: #b59461; color: #fff; border-radius: 50px; font-size: 10px; font-weight: 700; }
.loc-body-v14 { flex-grow: 1; position: relative; overflow: hidden; border-radius: 12px; background: #f9f9f9; }
.map-img-v14 { transition: transform 0.3s ease; width: 100%; height: 100%; object-fit: cover; }
}









/* Slider imagenes amenidades */
.amenidades-slider-section {
    width: 100%;
    max-width: 1459px;
    margin: 40px auto;
    padding: 0 15px;
}

.slider-container-v15 {
    position: relative;
    width: 100%;
    aspect-ratio: 1459 / 820;
    overflow: hidden;
    border-radius: 15px;
    background: #000;
}

.slide-v15 {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.slide-v15.active { opacity: 1; z-index: 1; }

.slide-v15 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ETIQUETA DORADA */
.area-tag-v15 {
    position: absolute;
    top: 30px;
    left: 30px;
    background: #b59461;
    color: #ffffff;
    padding: 12px 30px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    border-radius: 5px;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    text-transform: none; /* Mantiene el formato exacto de la validación */
}

.nav-arrow-v15 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: none;
    padding: 20px 15px;
    cursor: pointer;
    font-size: 24px;
    z-index: 15;
}

.nav-arrow-v15:hover { background: #b59461; }
.nav-arrow-v15.prev { left: 0; border-radius: 0 5px 5px 0; }
.nav-arrow-v15.next { right: 0; border-radius: 5px 0 0 5px; }

.dots-container-v15 {
    position: absolute;
    bottom: 25px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 15;
}

.dot-v15 {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    cursor: pointer;
}

.dot-v15.active { background: #b59461; transform: scale(1.3); }

@media (max-width: 768px) {
    .slider-container-v15 { aspect-ratio: 4 / 3; }
    .area-tag-v15 { top: 15px; left: 15px; font-size: 14px; padding: 8px 20px; }
}