/*Esto es para las pantallas en general de pantallas de escritorio */
/* Indica que la codificación de caracteres utilizada en el documento es UTF-8, que es comúnmente utilizado para admitir caracteres especiales y emojis.*/

@charset "UTF-8"; 

*{/*Establece márgenes y rellenos a cero en todos los elementos y utiliza el modelo de caja con borde para calcular las dimensiones.*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{/*Establece una imagen de fondo para el cuerpo de la página */
    background-image:url(Imagenes/sakura.jpeg);
    height: 100%;
    width: 100%;
    background-size: cover;
}
/*Contenido Definen estilos específicos para diferentes secciones de contenido, como anchos, alturas y colores de fondo.*/

.contenido {
	max-width: 1000px;
    margin:auto;
    margin-top: 0px; 
    background-color: #FFF;
    height: auto;
}

.contenido_1 {
	max-width: 1000px;
    margin:auto;
    margin-top: 0px; 
    background-color: #FFF;
    height: 5000px;
}

/*Menu y botonMenu Define estilos para un menú, con botones de menú flotantes que tienen un ancho fijo, un relleno y bordes redondeados.*/
.menu {     
    position: relative;
    z-index: 50;
	width: 1300px;   
    height: 80px;
	text-align: center;
    margin-left:0px;
    margin-right: 50px;
}

.botonMenu {       
    color: #fff;
    background-color:null;
    
}
/* Define propeidades para el boton cuan se pasa sobre el con el mouse*/
.botonMenu:hover {
	color:#000000;
	text-shadow: 1px 1px #000000;	
	cursor:pointer;
} 


#btn-menu {
    display: none;   /* oculta el checkbox cuando no es necesario*/
} 

.Caja_Mod_osc{
    padding: 10px 10px 10px 10px; /* Espaciado interno del cuadro de texto */
    position: absolute; /* Establece la posición del elemento como relativa */
    width: 150px; /* Ancho máximo del cuadro de texto */
    height: 150px;
    margin:auto; /* Centra horizontalmente el cuadro de texto */
}
/* Estilos para el botón del modo oscuro */
.btn-modo-oscuro {
    position: absolute;
    z-index: 1;
    text-align: center;
    left: 10px;
    background-image: url(Imagenes/modo-oscuro.png);
    width: 64px;
    height: 64px;
    border: none;
    cursor: pointer;
    border-radius: 50px; /* Radio de borde para dar forma redondeada */
    float: left;
    opacity: 0.7;

}
/* Estilos para el efecto hover del botón */
.btn-modo-oscuro:hover {
    opacity: 3;
}

.btn-modo-claro{
    background-Image: url(Imagenes/modo-claro.png);
}
/*Configura un encabezado con una altura fija y un fondo gradiente que incluye una imagen. */
header.claro {
    width: 100%;
    height: 600px;
    z-index: 5;/* coloca el checkbox por encima del contenido*/
    background: #bc4e9c;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, hsla(340, 95%, 50%, 0.259), hsla(317, 45%, 52%, 0.264)), url(Imagenes/fondo2.jpg);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, hsla(340, 95%, 50%, 0.29), hsla(317, 45%, 52%, 0.264)), url(Imagenes/fondo2.jpg);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

header.oscuro {
    width: 100%;
    height: 600px;
    z-index: 5;/* coloca el checkbox por encima del contenido*/
    background: #4e87bc;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, hsla(216, 95%, 50%, 0.259), hsla(317, 45%, 52%, 0.264)), url(Imagenes/portada_nieve.jpg);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, hsla(204, 95%, 50%, 0.29), hsla(317, 45%, 52%, 0.264)), url(Imagenes/portada_nieve.jpg);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

/* Establece estilos para el checkbox en el encabezado */
header label {
    display: none; /* Oculta el checkbox */
    width: 30px; /* Ancho del checkbox */
    height: 30px; /* Altura del checkbox */
    position: absolute; /* Posicionamiento absoluto */
    left: 20px; /* Posición izquierda */
    top: 25px; /* Posición superior */
}

/* Cambia el cursor cuando se pasa sobre el checkbox */
header label:hover {
    cursor: pointer; /* Cambia el cursor a puntero */
}

/* Estilos para la lista de elementos del menú */
.menu ul {
    display: inline-block; /* Muestra la lista de elementos como un bloque en línea */
    list-style: none; /* Elimina los estilos de lista */
    text-align: center; /* Alinea el texto al centro */
    
}

/* Estilos para los elementos de la lista del menú */
.menu li {
    font-family: Ancizar Sans-regular; /* Tipo de fuente */
}

.menu ul li {
    z-index: 10; /* Índice z para el posicionamiento */
    text-align: center; /* Alinea el texto al centro */
    font-size: 23px; /* Tamaño de la fuente */
    color: #fff; /* Color del texto */
    background-color:null;
    font-weight: 300; /* Grosor de la fuente */
    text-decoration: none; /* Quita la decoración de los enlaces */
    margin-right: 10px; /* Margen derecho */
    margin-top: 10px; /* Margen superior */
    margin-bottom: 10px; /* Margen inferior */
    width: 150px; /* Ancho del elemento */
    padding: 10px 10px 10px 10px; /* Espaciado interno */
    border-color: #d8d8d8; /* Color del borde */
    border-width: 3px; /* Ancho del borde */
    border-style: solid; /* Estilo del borde */
    border-radius: 35px; /* Radio de borde para dar forma redondeada */
    float: left; /* Hace que los elementos floten a la izquierda */
}

/* Crea una onda en la parte inferior del encabezado */
.estilo_onda {
    position: absolute; /* Posicionamiento absoluto */
    bottom: 0; /* Posición en la parte inferior */
    width: 100%; /* Ancho del elemento */
}

/* Establece estilos para una sección de portada con texto centrado y fondos translúcidos */
.portada {
    display: flex; /* Muestra el contenido como un flexbox */
    height: 430px; /* Altura de la sección */
    width: 100%; /* Ancho de la sección */
    align-items: center; /* Centra verticalmente los elementos */
    justify-content: center; /* Centra horizontalmente los elementos */
    flex-direction: column; /* Dirección de los elementos como columnas */
    text-align: center; /* Alineación del texto al centro */
}

/* Define estilos para los vínculos */
a:link {
	text-decoration: none; /* Evita que los vínculos tengan subrayado */
	color: #5e2129; /* Color por defecto de los vínculos */
}

a:hover {
	color: #000; /* Cambia el color del vínculo al pasar el mouse sobre él */
}

a:active {
	color: #FF0000; /* Cambia el color del vínculo al hacer clic en él */
	text-shadow: 1px 1px #000000; /* Agrega una sombra al texto al hacer clic */
}

/* Define estilos para varios elementos de texto, incluyendo tamaños de fuente, colores y sombras */
h1 {
	font-size: 90px; /* Tamaño de fuente para encabezados de nivel 1 */
	color: #fff; /* Color de texto para encabezados de nivel 1 */
}

h2 {
	text-align: left; /* Alineación del texto a la izquierda para encabezados de nivel 2 */
	margin-left: 15px; /* Margen izquierdo para encabezados de nivel 2 */
	font-size: 40px; /* Tamaño de fuente para encabezados de nivel 2 */
	color: #000; /* Color de texto para encabezados de nivel 2 */
}

h3 {
	font-size: 30px; /* Tamaño de fuente para encabezados de nivel 3 */
}

/* Define estilos para el texto */
.texto {
	position: relative; /* Establece la posición del texto */
	min-width: 300px; /* Ancho mínimo del texto */
	max-width: 700px; /* Ancho máximo del texto */
	margin: auto; /* Centra horizontalmente el texto */
	margin-top: -1px; /* Margen superior del texto */
	font-size: 22px; /* Tamaño de fuente del texto */
	font-weight: normal; /* Grosor normal de la fuente */
	text-align: justify; /* Alineación del texto justificada */
	color: #000; /* Color de texto */
	text-shadow: 1px 1px #FFF; /* Sombra del texto */
}

/* Define estilos para imágenes dentro del texto */
.texto_img {
    width: 300px;
	position: relative; /* Establece la posición de la imagen */
	float: left; /* Hace que la imagen flote a la izquierda del texto */
	max-width: 350px; /* Ancho máximo de la imagen */
	top: 20px; /* Posición superior de la imagen */
	box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5); /* Sombra de la imagen */
	margin-right: 20px; /* Margen derecho de la imagen */
	margin-bottom: 30px; /* Margen inferior de la imagen */
}

.texto_img2 {
    width: 300px;
	position: relative; /* Establece la posición de la imagen */
	float: right; /* Hace que la imagen flote a la derecha del texto */
	max-width: 320px; /* Ancho máximo de la imagen */
	top: 20px; /* Posición superior de la imagen */
	box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5); /* Sombra de la imagen */
	margin-left: 20px; /* Margen izquierdo de la imagen */
	margin-bottom: 30px; /* Margen inferior de la imagen */
}

.texto_img3 {
	position: relative; /* Establece la posición de la imagen */
	float: right; /* Hace que la imagen flote a la derecha del texto */
	max-width: 800px; /* Ancho máximo de la imagen */
	top: 20px; /* Posición superior de la imagen */
	box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5); /* Sombra de la imagen */
	margin-left: 20px; /* Margen izquierdo de la imagen */
	margin-bottom: 30px; /* Margen inferior de la imagen */
}
/* Define estilos específicos para un cuadro de texto con un fondo rosa translúcido y bordes destacados */
.texto_cajita_rosa {
    padding: 20px 50px 20px 50px; /* Espaciado interno del cuadro de texto */
    position: relative; /* Establece la posición del elemento como relativa */
    max-width: 800px; /* Ancho máximo del cuadro de texto */
    margin: auto; /* Centra horizontalmente el cuadro de texto */
    margin-top: 50px; /* Margen superior */
    margin-left: 50px; /* Margen izquierdo */
    font-size: 20px; /* Tamaño de la fuente */
    font-weight: normal; /* Grosor de la fuente */
    text-align: justify; /* Alineación del texto justificada */
    background-color: hsla(341, 89%, 49%, 0.1); /* Color de fondo rosa con una opacidad */
    color: #000; /* Color del texto */
    border-color: #E3195A; /* Color del borde */
    border-width: 5px; /* Ancho del borde */
    border-style: solid; /* Estilo del borde */
    border-radius: 35px; /* Radio de borde para dar forma redondeada */
    float: left; /* Hace que el cuadro de texto flote a la izquierda */
}

/* Estilos para el contenedor del mapa */
.contenido_mapa {
    max-width: 75%; /* Anchura máxima del contenedor del mapa */
    margin: auto; /* Centra el contenedor horizontalmente en la página */
    margin-top: 5px; /* Margen superior de 5 píxeles */
    margin-bottom: 5px; /* Margen inferior de 5 píxeles */
    background-color: #FFF; /* Color de fondo blanco */
    height: 700px; /* Altura fija del contenedor del mapa */
}

/* Estilos para el mapa */
#map { 
    z-index: 1; /* Índice z para colocar el mapa encima de otros elementos */
    width: 100%; /* Anchura del mapa al 100% del contenedor */
    height: 700px; /* Altura fija del mapa */
    box-shadow: 5px 5px 5px #3f3f3f; /* Sombra con desplazamiento de 5 píxeles en los ejes X e Y y desenfoque de 5 píxeles, con un color gris oscuro */
}
.custom .leaflet-popup-tip,
.custom .leaflet-popup-content-wrapper {
	background: #00bd6ed0;
	color: #ffffff;
}

/* Define estilos para una sección de inicio */
.Inicio {
    display: flex; /* Muestra el contenido como un flexbox */
    padding: 20px 50px 20px 50px; /* Espaciado interno de la sección de inicio */
    text-align: center; /* Alineación del texto centrada */
    align-items: center; /* Centra verticalmente los elementos */
    justify-content: center; /* Centra horizontalmente los elementos */
    max-width: 550px; /* Ancho máximo de la sección de inicio */
    height: 100px; /* Altura de la sección de inicio */
    margin: auto; /* Centra horizontalmente la sección de inicio */
    flex-direction: column; /* Dirección de los elementos como columnas */
    color: #5e2129; /* Color del texto */
}
/* Estilos para el pie de página */
footer.claro {
    font-size: 25px;
    grid-area: footer; /* Ubica en el área de pie de página de la cuadrícula */
    background-color: hsla(340, 95%, 50%, 0.4); /* Color de fondo del pie de página */
    color: #fff; /* Color del texto en el pie de página */
    text-align: center; /* Alineación del texto al centro */
    padding: 10px; /* Espaciado interno */
}
footer.oscuro{
    background-color:rgb(120, 183, 202); /* Color de fondo del pie de página */
    color: #fff; /* Color del texto en el pie de página */
}

/* cuando la ventana mida menos de 1200px tableta o portátil sencillo */
@media only screen and (max-width: 1200px) {
    
/* Estilos para los botones del menú */
.botonMenu {      
    text-align: center; /* Centra el texto horizontalmente */
    font-size: 20px; /* Tamaño de la fuente */
    text-decoration: none; /* Quita la decoración de subrayado del texto */
    margin-right: 2px; /* Margen derecho */
    margin-top: 2px; /* Margen superior */
    margin-bottom: 2px; /* Margen inferior */
    width: 120px; /* Ancho del botón */
    padding: 10px 10px 10px 10px; /* Espaciado interno del botón */
    background-color: hsla(370, 88%, 42%, 0.82); /* Color de fondo con una opacidad */
    border-color: #d8d8d8; /* Color del borde */
    border-width: 3px; /* Ancho del borde */
    border-style: solid; /* Estilo del borde */
    border-radius: 35px; /* Radio de borde para dar forma redondeada */
    float: left; /* Hace que el botón flote a la izquierda */
}
.menunav {
    max-width:460px;  /* esto es para que la primera fila tenga máximo dos botones*/
}
 header label{
    display: block; /* se muestra el checkbox cuando se reduce la ventana*/
} 
.menu {
    position: fixed;  /* sostiene la posición aunque se haga scroll en el contenido */
    background: rgba(0.5, 0.5, 0.5, 0.2); /* rojo, verde, azul, alpha (transparencia) */
    z-index: 30; /* para asegurar que el menu esta por encima de todo lo demás*/
    width: 20%; /* se refiere al ancho del fondo del menu y no a los botones */
    height: auto;
    margin-left: -60%; /* se oculta porque se coloca por fuera de la ventana*/
    margin-top: 4px;
    top:60px;
    transition: all 2s;   /* la animación de desplegar el menu dura 1 segundo*/
    max-height: 80%;
    overflow-y:scroll ;
} 
.menu ul {
    flex-direction: column;  /* se despliega en sentido vertical*/
    
} 
/* Establece la fuente para los elementos de la lista del menú */
.menu li {
    font-family: Ancizar Sans-regular; /* Define la fuente para los elementos de la lista del menú */
    
}

/* Estilos específicos para los elementos de la lista del menú */
.menu ul li {
    width: 150px; /* Ancho de los elementos de la lista del menú */
    font-size: 20px; /* Tamaño de fuente */
    padding: 8px 8px 8px 10px; /* Espaciado interno */
    margin-bottom: 5px; /* Margen inferior */
    margin-left: 5px; /* Margen izquierdo */
    border-bottom: 3px solid #000000; /* Borde inferior */
    border-right: 3px solid #000000; /* Borde derecho */
}

/* Controla el margen del menú cuando el checkbox está marcado */
#btn-menu:checked ~ .menu {
    margin: 1px; /* Ajusta el margen del menú cuando el checkbox está marcado */
    
}
} 

/* Define estilos para varios elementos de texto, incluyendo tamaños de fuente, colores y sombras */
h1 {
    font-size: 70px; /* Tamaño de fuente para h1 */
}

h2 {
    font-size: 40px; /* Tamaño de fuente para h2 */
}

h3 {
    font-size: 30px; /* Tamaño de fuente para h3 */
}

/* Estilos para el texto general */
.texto {
    width: 90%; /* Ancho del texto */
    min-width: 300px; /* Ancho mínimo del texto */
    font-size: 22px; /* Tamaño de fuente */
    line-height: 1.5; /* Altura de línea */
}

/* Estilos para el contenido */
.contenido {
    max-width: 700px; /* Ancho máximo del contenido */
}

/* Estilos para imágenes con texto */
.texto_img {
    max-width: 450px; /* Ancho máximo de la imagen con texto */
}

.texto_img2 {
    max-width: 450px; /* Ancho máximo de la segunda imagen con texto */
}

.texto_img3 {
    max-width: 700px; /* Ancho máximo de la tercera imagen con texto */
} 

/* Estilos para cajas de texto con fondo rosa */
.texto_cajita_rosa {
    max-width: 600px; /* Ancho máximo de la caja de texto rosa */
}

/* Estilos para elementos de video */
video {
    max-width: 500px; /* Ancho máximo del video */
}
/* Estilos para el pie de página */
footer {
    font-size: 22px;
}


/* cuando la ventana mida menos de 800px teléfono celular en sentido vertical*/
@media only screen and (max-width: 800px) {
    
.botonMenu {      
    color: #FFF; /* Color del texto */
    font-size: 14px; /* Tamaño de fuente */
    font-weight: 90; /* Grosor de la fuente */
    width: 87px; /* Ancho del botón */
    background-color: hsla(310, 88%, 42%, 0.62); /* Color de fondo con una opacidad */
    border-color: #d8d8d8; /* Color del borde */
    border-width: 3px; /* Ancho del borde */
    border-style: solid; /* Estilo del borde */
    border-radius: 35px; /* Radio de borde para dar forma redondeada */
    float: center; /* Establece el botón a la izquierda */
}
    .menunav {
    max-width:460px;  /* esto es para que la primera fila tenga máximo dos botones*/
}
     header label{
        display: block; /* se muestra el checkbox cuando se reduce la ventana*/
    } 
    .menu {
        position:fixed; 
        background: rgba(0.5, 0.5, 0.5, 0.2); /* rojo, verde, azul, alpha (transparencia) */
		z-index: 30; /* para asegurar que el menu esta por encima de todo lo demás*/
        width: 30%; /* se refiere al ancho del fondo del menu y no a los botones */
        margin-left: -60%; /* se oculta porque se coloca por fuera de la ventana*/
		margin-top: 4px;
        top:60px;
        transition: all 2s;   /* la animación de desplegar el menu dura 1 segundo*/
        max-height: 80%;
        overflow-y:scroll ;
    } 
    .menu ul {
        flex-direction: column;  /* se despliega en sentido vertical*/
    } 
/* Establece la fuente para los elementos de la lista del menú */
.menu li {
    font-family: Ancizar Sans-regular;
}

/* Estilos específicos para los elementos de la lista del menú */
.menu ul li {
    width: 120px; /* Ancho de los elementos de la lista */
    font-size: 15px; /* Tamaño de fuente */
    padding: 2px 1px 2px 10px; /* Espaciado interno */
    margin-bottom: 2px; /* Margen inferior */
    margin-left: 2px; /* Margen izquierdo *
    border-bottom: 3px solid #000000; /* Borde inferior */
    border-right: 3px solid #000000; /* Borde derecho */
    
}

/* Controla el margen del menú cuando el checkbox está marcado */
#btn-menu:checked ~ .menu {
    margin: 1px;
}

/* Define estilos para varios elementos de texto, incluyendo tamaños de fuente, colores y sombras */
h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 20px;
}

.texto {
    width: 90%; /* Ancho del texto */
    min-width: 250px; /* Ancho mínimo del texto */
    font-size: 18px; /* Tamaño de fuente */
    line-height: 1.7; /* Altura de línea */
}

/* Estilos para diferentes secciones de contenido */
.contenido {
    max-width: 600px; /* Ancho máximo del contenido */
}

/* Estilos para imágenes con texto */
.texto_img {
    max-width: 250px; /* Ancho máximo de la imagen con texto */
}

.texto_img2 {
    max-width: 250px; /* Ancho máximo de la segunda imagen con texto */
}

.texto_img3 {
    max-width: 400px; /* Ancho máximo de la tercera imagen con texto */
}

/* Estilos para cajas de texto con fondo rosa */
.texto_cajita_rosa {
    max-width: 500px; /* Ancho máximo de la caja de texto rosa */
}

/* Estilos para el contenedor del mapa */
.contenido_mapa {
    max-width: 60%; /* Anchura máxima del contenedor del mapa */
    margin: auto; /* Centra el contenedor horizontalmente en la página */
    margin-top: 5px; /* Margen superior de 5 píxeles */
    margin-bottom: 5px; /* Margen inferior de 5 píxeles */
    background-color: #FFF; /* Color de fondo blanco */
    height: 700px; /* Altura fija del contenedor del mapa */
}

/* Estilos para elementos de video */
video {
    max-width: 400px; /* Ancho máximo del video */
}

/* Estilos para el pie de página */
footer {
    font-size: 18px; /* Tamaño de fuente del pie de página */
}
}