.map-title {
    text-align: center;
    color: navy;
    font-weight: bold;
    text-align: center;
    margin: 0 0 0% 0;
    padding: 0;
}


.mapa-peru-container {
    position: relative; 
    height: 78vh;
    background-image: url('../images/Mapas/Peru-Ica.png'); /* SOLO UNA VEZ */
    background-size: contain; 
    background-position: center; 
    background-repeat: no-repeat;
 /*   background-color: #f0f0f0; */ /* Opcional: solo para áreas vacías */
}


.hotspot-ica {
    position: absolute;
    width: 5.25%;        /* Más ancho para cubrir la región */
    height: 12%;        /* Altura ajustada */
    left: 47%;
    top: 75%;
    transform: translate(-50%, -50%) rotate(-20deg); /* ¡Rotado 20° antihorario! */
    cursor: pointer;
    z-index: 20;
    /* background: rgba(255, 0, 0, 0.3); */ /* Para depurar */
}

.region-flotante {
    position: absolute;
    width: 8%;
    left: 45% /* 47% */;
    top: 70% /* 75% */;
    transform: translate(-80%, -35%) rotate(-15deg);
    opacity: 0;
    transition: opacity 0.3s ease, width 1s ease-in-out, left 1.2s ease-out, top 1.2s ease-out;
    z-index: 15;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    pointer-events: none;
}

.hotspot-ica:hover + .region-flotante,
.region-flotante:hover {
    opacity: 1;
    width: 28%; /* tamaño */ 
    left:43%;
    top:67%;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
    /* animation: latido 2s ease-in-out infinite;  */
}

@media (max-width: 768px) {
    .hotspot-ica {
        width: 70px !important;
        height: 70px !important;
        left: 46%;        /* Reducimos left (menos a la derecha) */
        top: 68%;         /* Subimos un poco (menos abajo) */
        transform: translate(-50%, -50%) rotate(-15deg);
        background: rgba(255,0,0,0.3);  /* Temporal */
        border-radius: 50%;
    }

    .region-flotante {
    left: 43% /* 47% */;
    top: 66% /* 75% */;
    }
}

@media (max-width: 480px) {
    .hotspot-ica {
        width: 60px !important;
        height: 60px !important;
        left: 47%;        /* Ajuste para móvil pequeño */
        top: 66% ;         /* Un poco más arriba */
    }
    .region-flotante {
    left: 50% /* 47% */;
    top: 63% /* 75% */;
    }

}

@keyframes latido {
    0% { transform: translate(-50%, -50%) rotate(-15deg) scale(1); }
    50% { transform: translate(-50%, -50%) rotate(-15deg) scale(1.5); }
    100% { transform: translate(-50%, -50%) rotate(-15deg) scale(1); }
}