/* Estilos para la sección del mapa */
.map-section {
    text-align: center;
    position: relative;
}

/* Estilos para la imagen y el mapa */
.map-section .map-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
    overflow: visible;
    width: 599px; /* Ancho del PNG */
}
.map-section .map-container img {
    width: 100%; /* La imagen ocupa el 100% del ancho del contenedor */
    height: auto; /* La altura se ajusta automáticamente */
    display: block;
}

.map-container-wrapper {
    overflow: visible;
}


.map-container {
    overflow: visible;
}

/* Contenedor de cada marcador y su info-box */
.marker-container {
    position: absolute;
    transform: translate(-2.5%, -2.5%);
}
.marker-container.active {
    z-index: 2000; 
}

/* Estilos del cuadro de información */
.marker-container .info-box {
    display: none;
    position: absolute;
    top: 100%; /* Posiciona el info-box justo debajo del marcador */
    left: 50%; /* Centra el info-box horizontalmente respecto al marcador */
    transform: translateX(-50%);
    background-color: white;
    padding: 0 0 5px 0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 200px;
    transition: opacity 0.3s ease;
    text-align: center;
    z-index: 9999; 
}

/* Estilos para las cruces (marcadores) */
.map-section .cross-marker {
    position: relative;
    width: 30px;
    height: 30px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.map-section .cross-marker::before,
.map-section .cross-marker::after {
    content: '';
    position: absolute;
    background-color: red;
}

.map-section .cross-marker::before {
    width: 2px;
    height: 10px;
    transition: .25s ease-in-out;
}

.map-section .cross-marker::after {
    width: 10px;
    height: 2px;
    transition: .25s ease-in-out;
}

/* Cambia a "X" cuando se hace clic */
.map-section .cross-marker.active::before {
    transform: rotate(45deg);
}

.map-section .cross-marker.active::after {
    transform: rotate(45deg);
}

/* Mostrar el cuadro cuando está activo */
.marker-container .info-box.active {
    display: block;
    opacity: 1;
}

/* Estilos para el contenido del info-box */
.marker-container .info-box h3 {
    margin: 0;
    background-color: var(--main-color);
    color: white;
    padding: 10px;
    border-radius: 8px 8px 0 0;
    font-size: 15px;
}

.marker-container .info-box p {
    margin: 10px 15px;
    color: #333;
    font-size: 14px;
}

.marker-container .info-box a {
    display: inline-block;
    padding: 3px 27px;
    color: var(--main-color);
    border: 2px solid var(--main-color);
    border-radius: 30px;
    text-decoration: none;
    margin: 10px 0 25px 0;
    font-size: 14px;
}

/* Posiciones de los marcadores */

/* Marcador 1 */
.marker1 {
    top: 8.9%;
    left: 42.8%;
}

/* Marcador 2 */
.marker2 {
    top: 20%;
    left: 40.6%;
}

/* Marcador 3 */
.marker3 {
    top: 25.5%;
    left: 42.8%;
}

/* Marcador 4 */
.marker4 {
    top: 33.83%;
    left: 34.8%;
}

/* Marcador 5 */
.marker5 {
    top: 26.67%;
    left: 60.9%;
}

/* Marcador 6 */
.marker6 {
    top: 33.17%;
    left: 55.8%;
}

/* Marcador 7 */
.marker7 {
    top: 46.83%;
    left: 41.4%;
}

/* Marcador 8 */
.marker8 {
    top: 51%;
    left: 48.8%;
}

/* Marcador 9 */
.marker9 {
    top: 58.33%;
    left: 40.8%;
}

/* Marcador 10 */
.marker10 {
    top: 60.83%;
    left: 34.6%;
}

/* Marcador 11 */
.marker11 {
    top: 61.67%;
    left: 45.8%;
}

/* Marcador 12 */
.marker12 {
    top: 58.1%;
    left: 56.5%;
}

/* Marcador 13 */
.marker13 {
    top: 65.67%;
    left: 48.8%;
}

/* Marcador 14 */
.marker14 {
    top: 70.5%;
    left: 39.8%;
}

/* Marcador 15 */
.marker15 {
    top: 69.5%;
    left: 45.8%;
}

/* Marcador 16 */
.marker16 {
    top: 66.5%;
    left: 59.8%;
}

/* Marcador 17 */
.marker17 {
    top: 69%;
    left: 52.8%;
}

/* Marcador 18 */
.marker18 {
    top: 79.83%;
    left: 47.9%;
}

/* Marcador 19 */
.marker19 {
    top: 86.17%;
    left: 39.8%;
}

#mapContainer {
    height: 100%;
    width: 1200px;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
}

/* Pantallas medianas */
@media (max-width: 1200px) {
    #mapContainer {
        width: 900px;
    }
    .map-section .map-container {
        max-width: none;
    }

}

/* Pantallas móviles horizontales */
@media (max-width: 768px) {
    #mapContainer {
        width: 700px;
    }

    .map-section .map-container {
        max-width: none;
    }
}