/* Estilos para la sección del mapa */
.mapa-section {
    padding: 40px 20px; /* Añadir algo de espacio alrededor */
    background-color: #F6BB5C;
    text-align: center; /* Centrar el contenido */
    /* background-color: #f8f9fa; Eliminado para heredar color de fondo */
}

.mapa-section h2 {
    margin-bottom: 30px; /* Espacio debajo del título */
    font-size: 2em; /* Tamaño del título */
    color: #333; /* Color del título (ajustar si es necesario) */
}

/* Contenedor del mapa para limitar ancho en desktop */
.mapa-container {
    max-width: 900px; /* Ancho máximo para el mapa en desktop */
    margin: 0 auto; /* Centrar el contenedor */
}

.mapa-container img {
    max-width: 100%; /* Asegurar que la imagen no se desborde del contenedor */
    height: auto; /* Mantener la proporción de la imagen */
    border: 1px solid #ddd; /* Un borde sutil */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra suave */
}

/* Estilos responsivos para teléfonos */
@media (max-width: 768px) {
    .mapa-section h2 {
        font-size: 1.5em; /* Título más pequeño en móviles */
    }

    .mapa-section {
        padding: 30px 15px; /* Menos padding en móviles */
    }

    /* En móviles, el contenedor puede ocupar más ancho si es necesario */
    .mapa-container {
        max-width: 100%;
    }
}