/* =====================================================
   MAPA SVG INTERACTIVO - LGP
===================================================== */
	
.lgp-mapa-interactivo{
    width:100%;
    position:relative;
}

.lgp-mapa-visor{
    width:100%;
    position:relative;
    overflow:hidden;
    cursor:grab;
    touch-action:none;
    user-select:none;
}

.lgp-mapa-visor.is-dragging{
    cursor:grabbing;
}

/* Capa que se transforma */
.lgp-mapa-svg{
    width:100%;
    transform:translate3d(0,0,0) scale(1);
    transform-origin:center center;
    transition:transform .35s cubic-bezier(.22,1,.36,1);
    will-change:transform;
}

.lgp-mapa-visor.is-dragging .lgp-mapa-svg{
    transition:none;
}

/* SVG */
.lgp-mapa-svg svg{
    display:block;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
    overflow:visible;
    pointer-events:none;
}


/* =====================================================
   ACCIONES
===================================================== */

.lgp-mapa-acciones{
    position:absolute;
    right:70px;
    bottom:55px;

    display:flex;
    align-items:center;
    gap:18px;

    z-index:20;
}

.lgp-mapa-controles{
    display:flex;
    align-items:center;
    gap:8px;
}

.lgp-mapa-control{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    font-family:Arial, sans-serif;
    font-size:23px;
    font-weight:600;
    line-height:1;

    color:#ffffff;
    background:#4B4E99;

    border:0;
    cursor:pointer;

    clip-path:polygon(
        7px 0,
        100% 0,
        100% calc(100% - 7px),
        calc(100% - 7px) 100%,
        0 100%,
        0 7px
    );

    transition:
        background-color .25s ease,
        transform .25s ease,
        opacity .25s ease;
}

.lgp-mapa-control:hover{
    background:#EB7637;
    transform:translateY(-2px);
}

.lgp-mapa-control:active{
    transform:scale(.94);
}


/* =====================================================
   BOTÓN CONSULTAR
===================================================== */

.lgp-mapa-consultar{
    min-width:200px;
    min-height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:8px 22px;

    font-family:"Foco", sans-serif;
    font-size:14px;
    font-weight:800;
    line-height:1.05;
    text-align:center;
    text-decoration:none;

    color:#4B4E99;
    background:#F6E500;

    clip-path:polygon(
        10px 0,
        100% 0,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        0 100%,
        0 10px
    );

    transition:
        transform .25s ease,
        background-color .25s ease;
}

.lgp-mapa-consultar:hover{
    color:#ffffff;
    background:#4B4E99;
    transform:translateY(-2px);
}

/* =====================================================
   TABLET
===================================================== */

@media (min-width:768px) and (max-width:1024px){

    .lgp-mapa-interactivo{
        width:100%;
        padding-bottom:0 !important;
        overflow:hidden;
    }

    /* Mostrar el mapa completo */
    .lgp-mapa-visor{
        width:100%;
        height:auto !important;
        overflow:hidden;
    }

    .lgp-mapa-svg{
        width:100% !important;
        margin:0 !important;
        transform-origin:center center;
    }

    .lgp-mapa-svg svg{
        display:block;
        width:100% !important;
        height:auto !important;
    }

    /*
     * Los controles quedan relacionados con el final
     * del mapa, no con el fondo del contenedor.
     */
    .lgp-mapa-acciones{
        position:relative !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        display:flex !important;
        flex-direction:row !important;
        justify-content:flex-end !important;
        align-items:center !important;

        gap:10px !important;

        margin:-72px 28px 24px 0 !important;

        z-index:20;
    }

    .lgp-mapa-controles{
        display:flex !important;
        justify-content:center;
        align-items:center;
        gap:5px !important;
    }

    .lgp-mapa-control{
        width:34px !important;
        min-width:34px !important;
        max-width:34px !important;

        height:34px !important;
        min-height:34px !important;
        max-height:34px !important;

        font-size:18px !important;
    }

    .lgp-mapa-consultar{
        width:auto !important;
        min-width:180px !important;
        min-height:38px !important;

        padding:6px 14px !important;

        font-size:11px !important;
        line-height:1.05 !important;
    }
}


/* =====================================================
   MÓVIL — MAPA Y CONTROLES FINALES
===================================================== */

@media (max-width:767px){

    /* ==========================================
       CONTENEDOR NARANJA DE ELEMENTOR
    ========================================== */

    .lgp-seccion-mapa-mobile{
        position:relative !important;

        width:100% !important;
        min-height:328px !important;
        height:328px !important;

        display:block !important;

        margin:0 0 34px !important;
        padding:0 !important;

        overflow:visible !important;
    }

    .lgp-seccion-mapa-mobile > .e-con-inner{
        position:relative !important;

        width:100% !important;
        max-width:none !important;

        min-height:328px !important;
        height:328px !important;

        margin:0 !important;
        padding:0 !important;

        overflow:visible !important;
    }


    /* ==========================================
       MAPA A TODO EL ANCHO
    ========================================== */

    .lgp-seccion-mapa-mobile .lgp-mapa-interactivo{
        position:relative !important;

        width:100vw !important;
        max-width:none !important;

        height:328px !important;
        min-height:328px !important;

        left:50% !important;

        margin:0 0 0 -50vw !important;
        padding:0 !important;

        box-sizing:border-box;

        overflow:visible !important;
    }


    /* ==========================================
       VISOR DEL MAPA
       Esta es el área completa disponible
       para hacer zoom y desplazar
    ========================================== */

    .lgp-seccion-mapa-mobile .lgp-mapa-visor{
        position:relative !important;

        width:100% !important;
        max-width:none !important;

        height:328px !important;
        min-height:328px !important;

        margin:0 !important;
        padding:0 !important;

        overflow:hidden !important;

        cursor:grab;
        touch-action:none;
        user-select:none;
    }

    .lgp-seccion-mapa-mobile .lgp-mapa-visor.is-dragging{
        cursor:grabbing;
    }


    /* ==========================================
       CAPA INTERACTIVA
       No sobrescribir transform:
       el JavaScript controla zoom y posición
    ========================================== */

    .lgp-seccion-mapa-mobile .lgp-mapa-svg{
        position:absolute !important;

        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:0 !important;

        width:100% !important;
        max-width:none !important;

        height:100% !important;
        min-height:100% !important;

        margin:0 !important;
        padding:0 !important;

        transform-origin:center center;
        will-change:transform;
    }

    .lgp-seccion-mapa-mobile .lgp-mapa-svg svg{
        display:block !important;

        width:100% !important;
        max-width:none !important;

        height:100% !important;
        min-height:100% !important;

        margin:0 !important;
        padding:0 !important;

        overflow:visible !important;
        pointer-events:none;

        object-fit:contain;
    }


    /* ==========================================
       ACCIONES
       50% dentro y 50% fuera
    ========================================== */

    .lgp-seccion-mapa-mobile .lgp-mapa-acciones{
        position:absolute !important;

        left:50% !important;
        right:auto !important;

        bottom:0 !important;
        top:auto !important;

        width:100% !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:center !important;

        gap:8px !important;

        margin:0 !important;
        padding:0 14px !important;

        box-sizing:border-box;

        transform:translate(-50%, 50%) !important;

        z-index:100 !important;
    }


    /* ==========================================
       GRUPO DE CUATRO BOTONES
    ========================================== */

    .lgp-seccion-mapa-mobile .lgp-mapa-controles{
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:center !important;

        gap:5px !important;

        margin:0 !important;
        padding:0 !important;

        flex:0 0 auto !important;
    }


    /* ==========================================
       BOTONES DE INTERACCIÓN
    ========================================== */

    .lgp-seccion-mapa-mobile .lgp-mapa-control{
        width:34px !important;
        min-width:34px !important;
        max-width:34px !important;

        height:34px !important;
        min-height:34px !important;
        max-height:34px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        margin:0 !important;
        padding:0 !important;

        box-sizing:border-box;

        font-family:Arial, sans-serif !important;
        font-size:17px !important;
        font-weight:600 !important;
        line-height:1 !important;

        color:#ffffff !important;
        background:#4B4E99 !important;

        border:0 !important;
        border-radius:0 !important;

        clip-path:polygon(
            6px 0,
            100% 0,
            100% calc(100% - 6px),
            calc(100% - 6px) 100%,
            0 100%,
            0 6px
        );
    }

    /* Botón + en naranja */
    .lgp-seccion-mapa-mobile
    .lgp-mapa-control:nth-child(3){
        background:#EB7637 !important;
    }


    /* ==========================================
       BOTÓN CONSULTAR DISPONIBILIDAD
    ========================================== */

    .lgp-seccion-mapa-mobile .lgp-mapa-consultar{
        width:150px !important;
        min-width:150px !important;
        max-width:150px !important;

        height:34px !important;
        min-height:34px !important;
        max-height:34px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        margin:0 !important;
        padding:4px 8px !important;

        box-sizing:border-box;

        font-family:"Foco", sans-serif !important;
        font-size:9px !important;
        font-weight:800 !important;
        line-height:1.05 !important;

        text-align:center !important;
        text-decoration:none !important;

        color:#4B4E99 !important;
        background:#F6E500 !important;

        border:0 !important;
        border-radius:0 !important;

        flex:0 0 150px !important;

        clip-path:polygon(
            7px 0,
            100% 0,
            100% calc(100% - 7px),
            calc(100% - 7px) 100%,
            0 100%,
            0 7px
        );
    }

}

/* =====================================================
   EL REMANSO — AJUSTE EXCLUSIVO DESKTOP Y TABLET
   No afecta al mapa de Colinas de la Gloria
===================================================== */


/* =====================================================
   DESKTOP
===================================================== */

@media (min-width:1025px){

    /*
     * El contenedor exterior continúa ocupando
     * todo el ancho de la sección.
     */
    .lgp-mapa-remanso .lgp-mapa-interactivo{
        width:100%;
        position:relative;
        overflow:visible;
    }

    /*
     * Reducimos solamente el ancho visual del mapa.
     * Al disminuir el ancho, también disminuye su altura.
     */
    .lgp-mapa-remanso .lgp-mapa-visor{
        width:85% !important;
        max-width:1500px !important;

        height:auto !important;

        margin:0 auto !important;

        overflow:hidden;
    }

    .lgp-mapa-remanso .lgp-mapa-svg{
        width:100% !important;
        max-width:none !important;

        margin:0 !important;
    }

    .lgp-mapa-remanso .lgp-mapa-svg svg{
        display:block;

        width:100% !important;
        height:auto !important;

        max-width:none !important;
    }

    /*
     * Controles alineados con el nuevo ancho del mapa.
     */
    .lgp-mapa-remanso .lgp-mapa-acciones{
        right:9% !important;
        bottom:45px !important;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (min-width:768px) and (max-width:1024px){

    .lgp-mapa-remanso .lgp-mapa-interactivo{
        width:100%;
        position:relative;

        padding-bottom:0 !important;

        overflow:visible;
    }

    .lgp-mapa-remanso .lgp-mapa-visor{
        width:90% !important;
        max-width:none !important;

        height:auto !important;

        margin:0 auto !important;

        overflow:hidden;
    }

    .lgp-mapa-remanso .lgp-mapa-svg{
        width:100% !important;
        max-width:none !important;

        margin:0 !important;
    }

    .lgp-mapa-remanso .lgp-mapa-svg svg{
        display:block;

        width:100% !important;
        height:auto !important;

        max-width:none !important;
    }

    /*
     * Mantiene los controles debajo del mapa,
     * pero alineados con el nuevo ancho.
     */
    .lgp-mapa-remanso .lgp-mapa-acciones{
        position:relative !important;

        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        width:90% !important;

        justify-content:flex-end !important;

        margin:-62px auto 22px !important;
    }

}


/* =====================================================
   MÓVIL
   Se conserva exactamente la configuración actual
===================================================== */

@media (max-width:767px){

    .lgp-mapa-remanso .lgp-mapa-visor{
        width:100% !important;
        max-width:none !important;

        margin:0 !important;
    }

}

/* =====================================================
   EL REMANSO — BAJAR CONTROLES
   Solo desktop y tablet
===================================================== */

/* DESKTOP */
@media (min-width:1025px){

    .lgp-mapa-remanso .lgp-mapa-acciones{
        bottom:-6px !important;
    }

}


/* TABLET */
@media (min-width:768px) and (max-width:1024px){

    .lgp-mapa-remanso .lgp-mapa-acciones{
        margin:-48px auto 12px !important;
    }

}