/*importacion de tipografia o las tipografias desde google fonts SIEMPRE HAY QUE PONER ESTO AL PRIMCIPIO*/
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');

.background,
.background__copy {
	position: absolute; /*con position: fixed; hace que la imagen quede pegada a la ventana del navegador y no forme parte del flujo normal de la página. por eso se cambio a position: absolute;*/
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../img/galeria.jpg) !important;
	background-position: 50% 0%;
	background-size: cover;
	z-index: 1;

	/*Efecto que hace que la imagen se desbanesca*/
	-webkit-mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 60%,
        rgba(0,0,0,0));
    mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 60%,
        rgba(0,0,0,0));
}



.content__title {
    font-family: "Libre Franklin", sans-serif !important;
    font-size: clamp(3rem, 10vw, 8rem) !important;
    mix-blend-mode: screen !important ;
    line-height: 0.8 !important;
    margin: 0 !important;
	text-align: center;
    color: var(--color-title);
    position: relative; /* IMPORTANTE */
    z-index: 600;       /* encima del fondo */
    cursor: default;
}

 /*titulo*/
.titulo-competencias{
	position: relative;
    overflow: hidden;

    background-image: url("../img/image.jpg");
    background-size: cover;
    background-position: 10% 10%;
    background-repeat: no-repeat;
    background-attachment: fixed; 

	margin: 0px;
	padding-top: 30px;
	padding-bottom: 30px !important;
	margin-left: -200px;
	margin-right: -200px;
	margin-bottom: 20px;
	border-bottom: solid #005380 1px;

	text-align: center;

	font-family: "Bricolage Grotesque", sans-serif !important;
	font-optical-sizing: auto !important;
	font-weight: weight !important;
	font-style: normal !important;
	font-variation-settings:"wdth" 100 !important;
	color: #000000;
	font-size: 64px !important;
	text-align: center;
	
}

.titulo-competencias::before{ /*creamos esta pseudo elemento paro poder agregar la capa que dara el efecto de cristal a mi elemnto*/
    content: ""; /**/
	/*estira el elemnto que acabamos de crear para cubrir todo*/
    position: absolute; 
    inset: 0;
	/*da una capa semitransparente*/
    background: rgba(0, 0, 0, 0.397);
    backdrop-filter: blur(3px);
	/*desenfoca lo que está detrás*/
    -webkit-backdrop-filter: blur(1px);
    z-index: 0; /*posiciona todo al fondo*/

}

/*Calaveras*/

.calaveras2026{
	border: #005380 solid;
	border-radius: 20px;
	margin-bottom: 35px !important;
}

/*para que el texto quede por encima de la imagen*/
.titulo-competencias h2{
    position: relative;
    z-index: 1;
}

/*Calaveras*/
.calaveras2026 {
    text-align: center;
    margin-top: 5px;
	padding: 80px;

	background-image: url("../img/3.jpg");
    background-size: cover;
    background-position: 10% 50%;
    background-repeat: no-repeat;
    background-attachment: unset; 
	
}



.calaveras2026 h2{
	color: #005380;
	font-size: 60px !important;
	position: relative;
    z-index: 1;
}

.texto-convocatorias{
	background-color:#d9d9d979;
    padding: 10px;
	margin-bottom: 10px;
    transform: translateY(-0px);
    backdrop-filter: blur(3px);
	border: #005380 solid;
	border-radius: 20px;
}

.texto-convocatorias p{
	color: #000000;
	font-size: 20px !important;
}

.img-convocatorias{
	text-align: center;
}


.img-convocatorias .active {
    background-color: initial;
    color: initial;
}

.img-convocatorias p {
    background-color:#005380af;
    padding: 10px;
    transform: translateY(-0px);
    backdrop-filter: blur(3px);
	border: #005380 solid;
	border-radius: 20px;
}

/*Resultados*/

.olimpiada{
	border: #005380 solid;
	border-radius: 20px;
	margin-bottom: 35px !important;
}

.olimpiada h2{
	color: #005380;
	font-size: 60px !important;
	position: relative;
    z-index: 1;
}

.olimpiada {
    text-align: center;
    margin-top: 5px;
	padding: 80px;

	background-image: url("../img/c5.jpg");
    background-size: cover;
    background-position: 10% 50%;
    background-repeat: no-repeat;
    background-attachment: unset; 
	
}

/*MEDIA QUERIES */

/* 1. PANTALLAS GRANDES / LAPTOPS DE ALTA RESOLUCIÓN (Hasta 1400px) 
   Aquí ajustamos elementos que empiezan a verse demasiado estirados en laptops grandes. */
@media (max-width: 1400px) {
    
}

/* 2. LAPTOPS ESTÁNDAR / TABLETS EN HORIZONTAL (Hasta 1200px) */
@media (max-width: 1200px) {
    
} 

/* 3. TABLETS EN VERTICAL (Hasta 992px)*/
@media (max-width: 992px) {
    
}

/* 4. TABLETS PEQUEÑAS / MÓVILES GRANDES (Hasta 768px) */
@media (max-width: 768px) {
    
}

/* 5. MÓVILES ESTÁNDAR (Hasta 576px) */
@media (max-width: 576px) {
   .calaveras2026 h2{
	font-size: 30px !important;
   }

   .calaveras2026 p{
	font-size: 15px !important;
   }

   .olimpiada h2{
	font-size: 30px !important;
   }

   .olimpiada p{
	font-size: 15px !important;
   }
}

/* 6. PANTALLAS ULTRA PEQUEÑAS (Hasta 400px)*/
@media (max-width: 400px) {

	.calaveras2026 h2{
	font-size: 20px !important;
   }

   .calaveras2026 p{
	font-size: 10px !important;
   }

   .olimpiada h2{
	font-size: 20px !important;
   }

   .olimpiada p{
	font-size: 10px !important;
   }
    
}