/*
Convención de buenas practicas en el orden: 
1. Posicionamiento
2. Modelo de caja (Box model)
3. Tipografía
4. Visuales
5. Otros
*/

:root{
	/* Colores */
	--azul_ucasal: #004181;
	--rojo_ucasal: #CA0017;
	--negro_ucasal: #262626;
	--gris_claro_ucasal: #616161;
	--blanco_ucasal: #fff;
	--sombra: #52575D47;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 62.5%;
	font-family: "Museo Sans", sans-serif;
}

body{
	max-width: 760px;
	margin: 0 auto;
}

header{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	min-width: 320px;
	height: 90px;
	text-align: center;
	background-color: var(--azul_ucasal);
}

.header__triangle-background{
	position: absolute;
	background-image: url(./assets/icons/triangulo.svg);
	background-repeat: no-repeat;
	background-size: contain;
}

.triangle-one{
	width: 50px;
	height: 58px;
	top: -20px;
	left: 10px;
}

.triangle-two{
	width: 30px;
	height: 34px;
	top: 45px;
	left: 20%
}

.triangle-three{
	width: 30px;
	height: 34px;
	top: -5px;
	right: 20px;
}

.triangle-four{
	width: 30px;
	height: 34px;
	top: 10px;
	right: 10px;
}

.header__title-container{
	width: 75%;
	min-width: 240px;
	max-width: 372px;
	text-align: center;
	align-self: center;
}

.header__title-container h1{
	color: var(--blanco_ucasal);
	font-weight: 900;
	font-size: 1.8rem;
	line-height: 2.4rem;
}

.container{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.container__rectangle{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width: 90%;
	/* border: 1px solid var(--negro_ucasal); */
	border-radius: 10px;
	margin-top: 10px;
	box-shadow: 0px 5px 25px var(--sombra);
	-webkit-box-shadow: 0px 5px 25px var(--sombra);
	-moz-box-shadow: 0px 5px 25px var(--sombra);
	margin-bottom: 30px;
}

.rectangle--logo{
	background: url(./assets/icons/logo-vertical.svg);
	background-repeat: no-repeat;
	background-size: contain;
	height: 122px;
	width: 94px;
	margin: 30px 0;
}

.rectangle--title{
	font-family: 'Rajdhani';
	font-weight: 700;
	font-size: 1.8rem;
	color: var(--azul_ucasal);
	text-align: center;
	margin-bottom: 10px;
}

.rectangle--line{
	width: 80%;
	border-top: 2px solid var(--azul_ucasal);
}

.rectangle--img{
	margin: 20px 0;
	width: 90px;
}

.rectangle--text{
	width: 80%;
	font-weight: 100;
	text-align: center;
	font-size: 1.6rem;
	margin-bottom: 30px;
	color: var(--gris_claro_ucasal);
}

.container__information{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width: 90%;
	font-size: 1.5rem;
	text-align: center;
}

.information_text-one{
	font-weight: 700;
	margin-bottom: 25px;
}
.information_text-two{
	font-weight: 100;
	margin-bottom: 25px;
}
.information_text-three{
	font-style: italic;
	margin-bottom: 25px;
}


@font-face {
	font-family: "Museo Sans";
	font-style: normal;
	font-weight: 100;
	src: local("Museo Sans"),
		url("/fonts/MuseoSans-100.otf") format("truetype");
}

@font-face {
	font-family: "Museo Sans";
	font-style: normal;
	font-weight: 300;
	src: local("Museo Sans"),
		url("/fonts/MuseoSans-300.otf") format("truetype");
}

@font-face {
	font-family: "Museo Sans";
	font-style: normal;
	font-weight: 500;
	src: local("Museo Sans"),
		url("/fonts/MuseoSans_500.otf") format("truetype");
}

@font-face {
	font-family: "Museo Sans";
	font-style: normal;
	font-weight: 700;
	src: local("Museo Sans"),
		url("/fonts/MuseoSans_700.otf") format("truetype");
}

@font-face {
	font-family: "Museo Sans";
	font-style: normal;
	font-weight: 900;
	src: local("Museo Sans"),
		url("/fonts/MuseoSans_900.otf") format("truetype");
}

@font-face {
	font-family: "Rajdhani";
	font-style: normal;
	font-weight: 700;
	src: url("/fonts/Rajdhani-Bold.woff2");
}

.ocultar{
	display: none;
}