/* CSS PARA MODAL UTILES*/

.modal__button_utiles{

	display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Ajusta el tamaño y el espacio según sea necesario */
   	font-size: 20px;
	border: none; /* Elimina el borde */
	background: none; /* Elimina el fondo */
	padding: 0; /* Elimina el relleno */
	font-family: inherit; /* Usa la familia de fuentes predeterminada */
	/*font-size: inherit; /* Usa el tamaño de fuente predeterminado */	
    cursor: pointer;
	z-index: 1; /* Asegura que el botón esté en el frente */
}



.modal__containerutiles{
	background: rgb(249,198,103); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(249,198,103,1) 0%, rgba(247,150,33,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(249,198,103,1) 0%,rgba(247,150,33,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(249,198,103,1) 0%,rgba(247,150,33,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	display: grid;
	position: relative;
	gap: 1rem;
	align-items: center;
	width: 90%;
	max-width: 1200px; /* Ancho máximo de 1200px */
	max-height: 90%;
	margin: 30px auto;
	

	background-color: #f0f0f0; /* Color de fondo (solo como ejemplo) */
	border-radius: 6px;
	padding: 3rem 2.5rem;
	margin: auto;
	
	
	transform: var(--transform);
	transition: var(--transition);
	

	overflow-y: auto; /* Agregar desplazamiento si el contenido excede la altura máxima */
}


.galeria{
	margin-top: 20px; /* Espacio vertical entre tarjetas */
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	font-size: 80px;
}

.tarjeta-utiles{
	
	text-decoration: none;
	height: 95px;
	padding: 3px 5px;
	color: #03333b;
	border: 1px solid #2fb4cc;
	border-radius: 4px;
	cursor: pointer;
	text-align: center;
	justify-content: center; /* Centrar horizontalmente */
  	align-items: center; /* Centrar verticalmente */

	border-top: 15px solid hsl(234, 91%, 47%);
	box-shadow: rgba(5, 1, 65, 0.911) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.tarjeta-utiles a{
	text-decoration: none;
	font-size: 18px;
	color: rgb(51, 7, 250);
}


.element2 h2{
	font-weight: 6rem;
	color: rgb(51, 7, 250);
}



/* */

.modal__button{
    display: inline-block;
	padding: 10px;
	margin-top: 10px;
    margin-bottom: 5px;
	border-radius: 5px;
	font-size: 1rem;
    text-decoration: none;
	color:black;
	border: 1px solid #2fb4cc;
	cursor: pointer;
}

.modal__button_elec{
    display: inline-block;
	padding: 10px;
	margin-top: 10px;
    margin-bottom: 5px;
	border-radius: 5px;
	font-size: 1rem;
    text-decoration: none;
	color:black;
	border: 1px solid #2fb4cc;
    cursor: pointer;
}

.modal__button_quim {
    display: inline-block;
	padding: 10px;
	margin-top: 10px;
    margin-bottom: 5px;
	border-radius: 5px;
	font-size: 1rem;
	text-decoration: none;
	color:black;
	border: 1px solid #2fb4cc;
    cursor: pointer;
}



.modal__button_tp{
    position: absolute;
    height: 40px;
    width: 90px;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #0d535f;
    border: 1px solid #2fb4cc;
    border-radius: 4px;
    cursor: pointer;
    z-index: 1; /* Asegura que el botón esté en el frente */
}

.modal__button_pre{
    position: absolute;
	height: 40px;
	width: 90px;
    bottom: 10px; /* Ajusta la distancia desde la parte inferior */
    left: 50%; /* Coloca el botón en el centro horizontal */
	color: #0d535f;
	border: 1px solid #2fb4cc;
	border-radius: 4px;
    transform: translateX(-50%);
	cursor: pointer;
	z-index: 1; /* Asegura que el botón esté en el frente */
}

.modal__button_bas{
    position: absolute;
	height: 40px;
	width: 90px;
    bottom: 10px; /* Ajusta la distancia desde la parte inferior */
    left: 50%; /* Coloca el botón en el centro horizontal */
	color: #0d535f;
	border: 1px solid #2fb4cc;
	border-radius: 4px;
    transform: translateX(-50%);
	cursor: pointer;
	z-index: 1; /* Asegura que el botón esté en el frente */
}


.modal__button_ch{
    position: absolute;
	height: 40px;
	width: 90px;
    bottom: 10px; /* Ajusta la distancia desde la parte inferior */
    left: 50%; /* Coloca el botón en el centro horizontal */
	color: #0d535f;
	border: 1px solid #2fb4cc;
	border-radius: 4px;
    transform: translateX(-50%);
	cursor: pointer;
	z-index: 1; /* Asegura que el botón esté en el frente */
}




/* CONFIGURACION PARA EL MODAL DE INICIO*/




.modal-adm{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #111111db;
	pointer-events: none;
	display: flex;
	opacity: 0;
	z-index: 2;
	transition: opacity .6s .9s;
	--transform: translateY(-100vh);
	--transition: transform .8s;

}
.modal-elec{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #111111db;
	pointer-events: none;
	display: flex;
	opacity: 0;
	z-index: 2;
	transition: opacity .6s .9s;
	--transform: translateY(-100vh);
	--transition: transform .8s;

}
.modal-quim{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #111111db;
	pointer-events: none;
	display: flex;
	opacity: 0;
	z-index: 2;
	transition: opacity .6s .9s;
	--transform: translateY(-100vh);
	--transition: transform .8s;

}


.modal-pre{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #111111db;
	pointer-events: none;
	display: flex;
	opacity: 0;
	z-index: 2;
	transition: opacity .6s .9s;
	--transform: translateY(-100vh);
	--transition: transform .8s;

}

.modal-bas{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #111111db;
	pointer-events: none;
	display: flex;
	opacity: 0;
	z-index: 2;
	transition: opacity .6s .9s;
	--transform: translateY(-100vh);
	--transition: transform .8s;
}


.modal-ch{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #111111db;
	pointer-events: none;
	display: flex;
	opacity: 0;
	z-index: 2;
	transition: opacity .6s .9s;
	--transform: translateY(-100vh);
	--transition: transform .8s;
}


.modal-utiles{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #111111db;
	pointer-events: none;
	display: flex;
	opacity: 0;
	z-index: 2;
	transition: opacity .6s .9s;
	--transform: translateY(-100vh);
	--transition: transform .8s;
}

.imgtemporal {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    /* Otras propiedades de estilo que puedas necesitar */
}
                
.imgtemporal img {
    max-width: 100%; /* Asegura que la imagen sea responsiva */
    
    max-height: 80%; /* Limita la altura máxima */
    
}



.modal__container-inicio {
    display: flex;
    position: relative; /* Necesario para que las imágenes se posicionen respecto a este contenedor */
    flex-direction: column;
    align-items: center;
    width: 90%;
    height: 80%;
    max-width: 1200px;
    max-height: 80%;
    margin: 30px auto;
    
    border-radius: 15px;
    padding: 3rem 2.5rem;
    margin: auto;
    display: grid;
    background: rgba(249, 198, 103, 0.8);
    transform: var(--transform);
    transition: var(--transition);
    
    
    
}
.top-left {
    position: absolute; /* Permite que la imagen se posicione dentro del contenedor */
    top: 0; /* Coloca la imagen en la parte superior */
    left: 50%; /* Centra horizontalmente */
    transform: translateX(-50%); /* Corrige el desplazamiento para centrar */
    width: 100%; /* Utiliza todo el ancho del contenedor */
    max-height: 150px; /* Ajusta la altura máxima según tus necesidades */
    height: auto; /* Mantiene la proporción de la imagen */
}


.corner-image {
    position: absolute; /* Posición absoluta para colocar las imágenes en las esquinas */
    max-width: 60px; /* Ajusta el tamaño máximo de las imágenes */
    height: auto; /* Mantiene la proporción */
    object-fit: contain; /* Asegura que la imagen se ajuste sin distorsionarse */
    
    
}


.top-left img {
    width: 100%; /* La imagen ocupa todo el ancho */
    height: auto; /* Mantiene la proporción */
}

.bottom-left {
    bottom: 10px;
    left: 10px;
}

.bottom-right {
    bottom: 10px;
    right: 10px;
}

.modal-inicio {
    position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	background-color: #111111db;
	
	

    
	pointer-events: none;
	display: flex;
	opacity: 0;
	z-index: 10;
	transition: opacity .6s .9s;
	--transform: translateY(-100vh);
	--transition: transform .8s;

}





.modal__container{
	display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 800px;
    max-height: 90%;
    margin: 30px auto;
    background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco semitransparente */
    border-radius: 6px;
    padding: 3rem 2.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    transform: translateY(0);
    transition: transform 0.8s;
    overflow-y: auto;
    
    /* Estilo para la imagen de fondo */
    background-image: url('images/Bandera.png'); /* Ruta de la imagen */
    background-size: cover; /* Ajusta la imagen para cubrir todo el contenedor */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* No repetir la imagen */
}


.modal__container2{
	display: flex;
	position: relative;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	width: 90%;
	max-width: 600px;
	max-height: 90%;
	margin: 30px auto;
	background-color: #fff;
	border-radius: 6px;
	padding: 3rem 2.5rem;
	margin: auto;
	display: grid;
	grid-template-columns: 33.3% 33.3% 33.3%;
	grid-template-rows: repeat(3, 1fr);
	transform: var(--transform);
	transition: var(--transition);
	overflow-y: auto;

	/*overflow: auto; /* Agregar desplazamiento si el contenido excede la altura máxima */
}

.modal__container3{
	display: flex;
	position: relative;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	width: 90%;
	max-width: 600px;
	max-height: 90%;
	margin: 30px auto;
	
	background-color: #f0f0f0; /* Color de fondo (solo como ejemplo) */
	border-radius: 6px;
	padding: 3rem 2.5rem;
	margin: auto;
	display: grid;
	grid-template-columns: 33.3% 33.3% 33.3%;
	grid-template-rows: repeat(3, 1fr);
	transform: var(--transform);
	transition: var(--transition);
	overflow-y: auto;

	/*overflow: auto; /* Agregar desplazamiento si el contenido excede la altura máxima */
}


 .modal__container4{
	display: flex;
	position: relative;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	width: 90%;
	max-width: 600px;
	max-height: 90%;
	margin: 30px auto;
	
	background-color: #f0f0f0; /* Color de fondo (solo como ejemplo) */
	border-radius: 6px;
	padding: 3rem 2.5rem;
	margin: auto;
	display: grid;
	grid-template-columns: 33.3% 33.3% 33.3%;
	grid-template-rows: repeat(3, 1fr);
	transform: var(--transform);
	transition: var(--transition);
	overflow-y: auto;

	/*overflow: auto; /* Agregar desplazamiento si el contenido excede la altura máxima */
}

.modal__container5{
	display: flex;
	position: relative;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	width: 90%;
	max-width: 600px;
	max-height: 90%;
	margin: 30px auto;
	
	background-color: #f0f0f0; /* Color de fondo (solo como ejemplo) */
	border-radius: 6px;
	padding: 3rem 2.5rem;
	margin: auto;
	display: grid;
	grid-template-columns: 33.3% 33.3% 33.3%;
	grid-template-rows: repeat(3, 1fr);
	transform: var(--transform);
	transition: var(--transition);
	overflow-y: auto;

	/*overflow: auto; /* Agregar desplazamiento si el contenido excede la altura máxima */
}

.modal__containerch{
	display: flex;
	position: relative;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	width: 90%;
	max-width: 600px;
	max-height: 90%;
	margin: 30px auto;
	
	background-color: #f0f0f0; /* Color de fondo (solo como ejemplo) */
	border-radius: 6px;
	padding: 3rem 2.5rem;
	margin: auto;
	display: grid;
	grid-template-columns: 33.3% 33.3% 33.3%;
	grid-template-rows: repeat(3, 1fr);
	transform: var(--transform);
	transition: var(--transition);
	overflow-y: auto;

	/*overflow: auto; /* Agregar desplazamiento si el contenido excede la altura máxima */
}



.modal__container h2{
	font-size: 1.5rem;
	text-align: center;
}
.modal__container p{
	font-size: 1rem;
	text-align: justify;
}

.modal__container2 h2{
	font-size: 1.5rem;
	text-align: center;
}
.modal__container2 p{
	font-size: 1rem;
	text-align: justify;
}

.modal__container3 h2{
	font-size: 1.5rem;
	text-align: center;
}
.modal__container3 p{
	font-size: 1rem;
	text-align: justify;
}
/* PARA PRE BÁSICA*/

.modal__container4 h2{
	font-size: 1.5rem;
	text-align: center;
}
.modal__container4 p{
	font-size: 1rem;
	text-align: justify;
}

.modal__container5 h2{
	font-size: 1.5rem;
	text-align: center;
}
.modal__container5 p{
	font-size: 1rem;
	text-align: justify;
}

.modal__containerch h2{
	font-size: 1.5rem;
	text-align: center;
}
.modal__containerch p{
	font-size: 1rem;
	text-align: justify;
}


.modal__containerutiles h2{
	font-size: 1.5rem;
	text-align: center;
}
.modal__containerutiles p{
	font-size: 1rem;
	text-align: justify;
}



.element2{
	grid-column: 1/-1;
	width: 95%;
	max-width: 100%;
	margin-top: 0px;

	
}


.modal-show{
	opacity: 1;
	pointer-events: unset;
	transition: opacity .5s;
	--transform: translateY(0);
	--transition: transform .6s .6s;
}

.close__modal{
	position: absolute;
    color:#fff;
    background: darkred;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
	top: 2%;
	right: 1%;
	font-size: xx-large;
	font-weight: bold;
	cursor: pointer;
    text-align: center;
}

.close__modal_elec{
	position: absolute;
    color:#fff;
    background: darkred;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
	top: 2%;
	right: 1%;
	font-size: xx-large;
	font-weight: bold;
	cursor: pointer;
    text-align: center;
}

.close__modal_quim{
	position: absolute;
    color:#fff;
    background: darkred;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
	top: 2%;
	right: 1%;
	font-size: xx-large;
	font-weight: bold;
	cursor: pointer;
    text-align: center;
}
.close__modal-inicio{
	position: absolute;
    color:#fff;
    background: darkred;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
	top: 2%;
	right: 1%;
	font-size: xx-large;
	font-weight: bold;
	cursor: pointer;
    text-align: center;
}

.close__modal-pre{
	position: absolute;
    color:#fff;
    background: darkred;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
	top: 2%;
	right: 1%;
	font-size: xx-large;
	font-weight: bold;
	cursor: pointer;
    text-align: center;
}

.close__modal-bas{
	position: absolute;
    color:#fff;
    background: darkred;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
	top: 2%;
	right: 1%;
	font-size: xx-large;
	font-weight: bold;
	cursor: pointer;
    text-align: center;
}

.close__modal-ch{
	position: absolute;
    color:#fff;
    background: darkred;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
	top: 2%;
	right: 1%;
	font-size: xx-large;
	font-weight: bold;
	cursor: pointer;
    text-align: center;
}

.close__modal-utiles{
	position: absolute;
    color:#fff;
    background: darkred;
    height: 40px;
    width: 40px;
    line-height: 40px;
  
    border-radius: 50%;
	top: 2%;
	right: 1%;
	font-size: xx-large;
	font-weight: bold;
	cursor: pointer;
    text-align: center;
}

.element{
	color: black;
   
}
.element1{
	display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;
    margin-top: -40px;
    z-index: 2;
		
}

    
.element1 img {
    
   max-width: 100%;
    width: 70%; /* Ajusta el ancho de la imagen según tu diseño */
}

/* Estilo para las imágenes dentro de los otros elementos */
.element:not(.element1) img {
	
	width: 95%;
	max-width: 100%;
	border-radius: 5px;

	background-size: cover;
	box-shadow: 3px 5px 5px rgba(3,32,51,.8);
}