/* Estilo para la primera pantalla (imagen de fondo con filtro) */
.background {
    position: relative;
    height: 100vh;
    background: url('https://cdn.glitch.global/34a41f54-bf75-4e79-968c-98aea7dbd356/feminicidios.jpg?v=1697819463586') no-repeat center center fixed;
    background-size: cover;
}

.background::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(128, 0, 128, 0.75); /* Filtro morado con opacidad 0.4 */
}

/* Estilo para el texto superpuesto */
.overlay-text {
    position: absolute;
    top: 30%;
    left: 20%; /* Centra horizontalmente */
    right: 20%;
    text-align: center;
    color: white;
    font-family: 'Cabin', sans-serif;
    font-weight: bold;
}


.overlay-text p {
        font-size: 75px; /* Reducir el tamaño de fuente en dispositivos móviles */
    }


/* Estilo para el texto a la derecha de la imagen */
.texto-derecha {
    position: absolute;
    top: 100%; /* Alinea verticalmente al centro */
    right: 10%; /* Alinea a la derecha con un margen del 10% */
    transform: translate(0, -50%); /* Centra verticalmente */
    color: white; /* Color del texto */
    font-size: 18px; /* Tamaño de fuente del texto */
    font-family: 'Roboto', sans-serif; /* Fuente del texto */
}

.autor {
  font-size: 40px;
  font-weight: bold;
}



/* Estilo para el espacio vacío */
.spacer {
    height: 10vh;
}

/* Estilo para el contenido del mapa */
#map {
  height: 900px;
  width: 100%;
  margin: 0 auto;
}








p {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
}

h2 {
    font-family: 'Roboto', sans-serif; /* Estilo para h2 */
}

.bloque {
    margin-left: 20%; /* Margen izquierdo del 20% */
    margin-right: 20%; /* Margen derecho del 20% */
}

.fuentes {
  font-size: 14px;
}

.nota p {
    font-size: 17px;
}



/* Media query para dispositivos móviles */
@media screen and (max-width: 767px) {
    .overlay-text p {
        font-size: 40px; /* Reducir el tamaño de fuente en dispositivos móviles */
    }
}


/* Aquí empiezan los estilos del MAPA */

.legend {
  background: white;
  padding: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  margin: 10px;
}

.legend i {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  display: inline-block;
}


/* Estilo para el texto en la leyenda */
.leaflet-control-layers label {
  font-size: 16px !important; /* Ajusta el tamaño de fuente según tus preferencias */
}


/* Espacio entre el cuadro de color y el texto de la leyenda */
label span.legend-color {
  margin-right: 4px;
}