/* ==========================================
   MAPA MELGAR — SVG RESPONSIVE + DESTELLO
========================================== */

/* Widget HTML de Elementor */
.nopal-mapa-animado{
    position:relative;
    width:100%;
    height:auto;
    min-height:0;
    margin:0;
    padding:0;
    line-height:0;
    overflow:visible !important;
}

/* Contenedor automático de Elementor */
.nopal-mapa-animado .elementor-widget-container{
    width:100%;
    height:auto !important;
    min-height:0 !important;
    margin:0;
    padding:0;
    line-height:0;
    overflow:visible !important;
}

/* SVG actualizado */
.nopal-mapa-animado svg#nombre{
    display:block;
    width:100%;
    max-width:100%;
    height:auto !important;
    margin:0;
    padding:0;

    /* Proporción original del SVG */
    aspect-ratio:742 / 622;

    overflow:visible;
}

/* ==========================================
   PUNTO MELGAR
   Se identifica mediante sus coordenadas
========================================== */

.nopal-mapa-animado svg#nombre circle[cx="278.84"][cy="157.65"]{
    position:relative;

    transform-box:fill-box;
    transform-origin:center;

    animation:nopalPuntoMelgar 2.8s ease-in-out infinite;

    will-change:transform, filter;
}

/* Pulso y destello discreto */
@keyframes nopalPuntoMelgar{

    0%,
    100%{
        transform:translateY(0) scale(1);

        filter:
            drop-shadow(0 0 0 rgba(76,75,75,0));
    }

    38%{
        transform:translateY(-1px) scale(1.08);

        filter:
            drop-shadow(0 0 3px rgba(76,75,75,.34));
    }

    52%{
        transform:translateY(0) scale(1.02);

        filter:
            drop-shadow(0 0 7px rgba(76,75,75,.18));
    }

    68%{
        transform:translateY(0) scale(1);

        filter:
            drop-shadow(0 0 0 rgba(76,75,75,0));
    }
}

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

@media (max-width:1024px){

    .nopal-mapa-animado,
    .nopal-mapa-animado .elementor-widget-container{
        width:100%;
        height:auto !important;
    }

    .nopal-mapa-animado svg#nombre{
        width:100%;
        height:auto !important;
        aspect-ratio:742 / 622;
    }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:767px){

    .nopal-mapa-animado{
        width:100%;
        height:auto !important;
        min-height:0 !important;
        overflow:hidden !important;
    }

    .nopal-mapa-animado .elementor-widget-container{
        width:100%;
        height:auto !important;
        min-height:0 !important;
        overflow:hidden !important;
    }

    .nopal-mapa-animado svg#nombre{
        display:block;
        width:100%;
        max-width:none;
        height:auto !important;

        aspect-ratio:742 / 622;

        transform:none;
        overflow:visible;
    }

    /* Destello todavía más sutil en mobile */
    .nopal-mapa-animado
    svg#nombre
    circle[cx="278.84"][cy="157.65"]{
        animation-duration:3.2s;
    }
}

/* ==========================================
   ACCESIBILIDAD
========================================== */

@media (prefers-reduced-motion:reduce){

    .nopal-mapa-animado
    svg#nombre
    circle[cx="278.84"][cy="157.65"]{
        animation:none;
        filter:none;
        transform:none;
    }
}

/* ==========================================
   MAPA PALACIOS — SVG RESPONSIVE + DESTELLO
========================================== */

/* Widget HTML de Elementor */
.nopal-mapa-palacios{
    position:relative;
    width:100%;
    height:auto;
    min-height:0;
    margin:0;
    padding:0;
    line-height:0;
    overflow:visible !important;
}

/* Contenedor automático de Elementor */
.nopal-mapa-palacios .elementor-widget-container{
    width:100%;
    height:auto !important;
    min-height:0 !important;
    margin:0;
    padding:0;
    line-height:0;
    overflow:visible !important;
}

/* SVG completo */
.nopal-mapa-palacios svg{
    display:block;
    width:100%;
    max-width:100%;
    height:auto !important;
    margin:0;
    padding:0;

    /* Proporción original: viewBox 0 0 742 622 */
    aspect-ratio:742 / 622;

    overflow:visible;
}

/* ==========================================
   PUNTO PALACIOS
   Grupo identificado como #circulo
========================================== */

.nopal-mapa-palacios svg #circulo{
    transform-box:fill-box;
    transform-origin:center;

    animation:nopalPuntoPalacios 2.8s ease-in-out infinite;

    will-change:transform, filter;
}

/* Asegura que el path herede correctamente
   el efecto visual del grupo */
.nopal-mapa-palacios svg #circulo path{
    transform-box:fill-box;
    transform-origin:center;
}

/* Pulso y destello discreto */
@keyframes nopalPuntoPalacios{

    0%,
    100%{
        transform:translateY(0) scale(1);

        filter:
            drop-shadow(0 0 0 rgba(76,75,75,0));
    }

    38%{
        transform:translateY(-1px) scale(1.08);

        filter:
            drop-shadow(0 0 3px rgba(76,75,75,.34));
    }

    52%{
        transform:translateY(0) scale(1.02);

        filter:
            drop-shadow(0 0 7px rgba(76,75,75,.18));
    }

    68%{
        transform:translateY(0) scale(1);

        filter:
            drop-shadow(0 0 0 rgba(76,75,75,0));
    }
}

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

@media (max-width:1024px){

    .nopal-mapa-palacios,
    .nopal-mapa-palacios .elementor-widget-container{
        width:100%;
        height:auto !important;
    }

    .nopal-mapa-palacios svg{
        width:100%;
        height:auto !important;
        aspect-ratio:742 / 622;
    }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:767px){

    .nopal-mapa-palacios{
        width:100%;
        height:auto !important;
        min-height:0 !important;
        overflow:hidden !important;
    }

    .nopal-mapa-palacios .elementor-widget-container{
        width:100%;
        height:auto !important;
        min-height:0 !important;
        overflow:hidden !important;
    }

    .nopal-mapa-palacios svg{
        display:block;
        width:100%;
        max-width:none;
        height:auto !important;

        aspect-ratio:742 / 622;

        transform:none;
        overflow:visible;
    }

    /* Animación más pausada en mobile */
    .nopal-mapa-palacios svg #circulo{
        animation-duration:3.2s;
    }
}

/* ==========================================
   ACCESIBILIDAD
========================================== */

@media (prefers-reduced-motion:reduce){

    .nopal-mapa-palacios svg #circulo{
        animation:none;
        filter:none;
        transform:none;
    }
}