@import 'reset.css';
@import 'flex.css';
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');


body{
	width:100%;
	min-height:100vh;
	font-family:var(--fontFamily);
	font-size:var(--size);
}

:root{
	--fontFamily:"Source Sans 3", sans-serif;
	--size:16px;
	--gap:1em;
	--clrPrincipal:#003895;
	--blanco:#FFFFFF;
	--negro:#000000;
	--gris:#efefef;
	--celeste:#A3DCFF;
}

header{
	width:100%;
	height:36px;
	padding-inline:2em;
	position:absolute;
	top:50px;
	z-index:10;
}
header nav{
	gap:2em;
}

.botonNav{
	padding:.5em 1em;
	display:block;
	position:relative;
	color:var(--negro);
	font-size:.85em;
	font-weight:700;
	text-transform:uppercase;
	cursor:pointer;
}
.botonNav:before{
	content:'';
	width:100%;
	height:4px;
	position:absolute;
	bottom:0;
	left:0;
	background:linear-gradient(to right, #000000, #000000);
	z-index:1;
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .5s ease-in-out;
}
.botonNav:hover::before{
	transform-origin:left;
	transform:scale(1);
	transition-timing-function:cubic-bezier(0.2, 1, 0.82, 0.94);
}
.botonActive{
	background:var(--clrPrincipal);
	color:var(--blanco);
	pointer-events:none;
}

.content{
	width:100%;
	margin-inline:auto;
}
#inicio{
	width:100%;
	min-height:440px;
	background-image:url('../img/back-programa-min.webp');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}

.bannerContent{
	width:40%;
	height:100%;
	min-height:440px;
	background:rgba(255 255 255/70%);
	backdrop-filter:blur(3px);
}
.bannerUno{
	width:100%;
	min-height:440px;
	background-image:url('../img/back-programa-min.webp');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
.bannerUno .bannerContent{
	min-height:440px;
	padding:2em;
	position:relative;
	gap:1em;
}
.bannerUno .bannerContent img{
	max-width:250px;
	width:25vw;
}
.bannerUno .bannerContent h3{
	color:var(--clrPrincipal);
}
.bannerUno .bannerContent h1{
	width:95%;
	font-size:2.2em;
	font-weight:400;
	line-height:85%;
	z-index:3;
}
.bannerUno .bannerContent h1 b{
	font-weight:600;
}
.bannerUno .bannerContent h1 strong{
	font-style:italic;
	color:var(--clrPrincipal);
}

.bannerDos{
	min-height:calc(100dvh - 250px);
	background-image:url('../img/img-banner.webp');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
.bannerDos .bannerContent{
	min-height:calc(100dvh - 250px);
	padding:2em;
	position:relative;
	gap:1em;
}
.bannerDos .bannerContent img{
	max-width:250px;
	width:25vw;
}
.bannerDos .bannerContent h3{
	color:var(--clrPrincipal);
}
.bannerDos .bannerContent h1{
	max-width:500px;
	width:95%;
	font-size:3.5em;
	font-weight:400;
	line-height:85%;
	z-index:3;
}
.bannerDos .bannerContent h1 b{
	font-weight:600;
}
.bannerDos .bannerContent h1 strong{
	font-style:italic;
	color:var(--clrPrincipal);
}
.bannerDos .bannerContent:before{
	content:'';
	width:100%;
	height:10vh;
	position:absolute;
	bottom:0;
	left:0;
	background:rgba(190 190 190/ 80%);
}
.bannerDos .bannerContent:after{
	content:'';
	width:10vh;
	height:10vh;
	position:absolute;
	bottom:0;
	right:-10vh;
	background:var(--celeste);
}


.bannerContentTitle{
	width:60%;
	height:100%;
	min-height:440px;
	position:relative;
}
.bannerTitle{
	width:100%;
	min-height:100px;
	padding-inline:2em;
	position:absolute;
	bottom:0px;
	background:rgba(0, 56, 149, .9);
	color:var(--blanco);
}
.bannerTitle h2{
	font-size:2.1em;
	font-style:italic;
	font-weight:600;
	text-transform:uppercase;
}


#relatores article{
	width:100%;
	margin-block:5em;
	padding-inline:2em;
	display:flex;
	align-items:center;
	background-image:url('../img/bg-relatores-iz-min.webp');
	background-size:100% auto;
	background-repeat:no-repeat;
	background-position:left center;
}
#relatores article:first-child{
	flex-flow:row wrap;
}
.mensaje{
	max-width:calc(100% - 1000px - 2em);
	width:100%;
	min-width:200px;
	margin-right:auto;
	display:none;
	backdrop-filter:blur(9px);
	padding-inline:2em;
	vertical-align:middle;
	border-radius:1em;
}
.mensaje h3{
	font-size:1.5em;
	color:var(--clrPrincipal);
	line-height:120%;
}
.mensaje h1{
	font-size:2.5em;
	font-weight:400;
	line-height:110%;
	letter-spacing:-1px;
}
.mensaje h1 b{
	font-weight:600;
}
.mensaje h1 strong{
	font-style:italic;
	color:var(--clrPrincipal);
}

.mensaje{
	font-size:1em;
	font-weight:400;
	line-height:120%;
	color:var(--negro);
}


#relatores article:first-child .mensaje{
	display:block;
}
#relatores article:nth-child(odd){
	justify-content:flex-end;
}

.cardRelator{
	max-width:1000px;
	width:calc(100% - 2em);
	height:max-content;
	min-height:340px;
	position:relative;
	border-radius:.35em;
	box-shadow:
		0px 10px 6px -5px rgba(0 0 0/15%),
		0px 18px 15px -3px rgba(0 0 0/10%),
		0px 20px 45px 0px rgba(0 0 0/20%);
	overflow:hidden;
	backdrop-filter:blur(9px);
}
.cardCargo{
	width:100%;
	min-height:2em;
	padding-inline:5%;
	color:var(--clrPrincipal);
}
.carTitle{
	width:100%;
	height:3em;
	padding-inline:5%;
	background:var(--clrPrincipal);
	color:var(--blanco);
}
.carTitle h3{
	font-size:1.9em;
	font-weight:600;
}
.cardContent{
	width:65%;
	padding:2em 0px 2em 5%;
	text-align:justify;
}
.cardImag{
	max-width:25%;
	width:100%;
	aspect-ratio:3/3.5;
	position:absolute;
	top:0px;
	right:6%;
	background:var(--blanco);
	border-radius:0px 0px 49% 49%;
	box-shadow:
		0 0px 0px 17px rgba(190 190 190/ 40%),
		0 0px 0px 40px rgba(190 190 190/ 40%);
}
.cardImag picture{
	width:100%;
	aspect-ratio:3/3.5;
	margin-top:15%;
	margin-inline:auto;
	display:flex;
	position:absolute;
	left:0px;
	bottom:0px;
	background:transparent;
	border:6px solid var(--blanco);
	border-radius:0px 0px 49% 49%;
	overflow:hidden;
}

#programa article{
	max-width:1440px;
	width:100%;
	margin-block:2em;
	margin-inline:auto;
	padding-inline:2em;
}
#programa article:nth-child(1){
	--bgColor:#a0c9c9;
	--txColor:#FFFFFF;
}
#programa article:nth-child(2){
	--bgColor:#98aed7;
	--txColor:#FFFFFF;
}
#programa article:nth-child(3){
	--bgColor:#8f88ba;
	--txColor:#FFFFFF;
}
.eventDia{
	width:40%;
	padding-inline:2.5em;
}
.eventHora,.publicaciones{
	width:60%;
}
.eventDia__titulo{
	width:100%;
	padding:2em;
	background:var(--bgColor);
	color:var(--txColor);
	box-shadow:inset 0px -2px 0px rgba(0 0 0/10%);
}
.eventDia__titulo h2{
	font-size:1.8em;
	font-weight:400;
	font-style:italic;
}
.eventDia__titulo strong{
	font-style:normal;
}
.eventHora__titulo{
	padding:.5em 2em;
	background:var(--bgColor);
	color:var(--txColor);
	font-size:1.2em;
	box-shadow:inset 0px -2px 0px rgba(0 0 0/10%);
}
.eventHora__titulo p{
	width:120px;
	display:block;
}
.eventHora__titulo strong{
	width:calc(100% - 120px);
	padding-left:1em;
	display:block;
	border-left:3px solid var(--txColor);
	font-size:.9em;
	line-height:110%;
	text-transform:uppercase;
}
.eventHora__content,.descargas{
	margin-bottom:1em;
	padding:.5em 2em;
	background:var(--gris);
	box-shadow:
		inset 0px 2px 0px rgba(255 255 255/70%),
		inset 0px -2px 0px rgba(0 0 0/10%);
}

#publicaciones{
	min-height:calc(100dvh - 250px - 440px);
}
#publicaciones article{
	max-width:1440px;
	margin-block:2em;
	margin-inline:auto;
	padding-inline:2em;
}
.descargas{
	width:100%;
	margin-bottom:.5em !important;
	color:var(--negro);
	transition:all .3s ease;
}
.descargas:hover{
	background:var(--celeste);
}
footer{
	width:100%;
	min-height:250px;
	background-color:#39414f;
	background-image:url('../img/line-footer.webp');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:right bottom;
}
.footerLeft{
	width:75%;
	min-height:250px;
	padding-left:13.5%;
	gap:3em;
	background-image:url('../img/footer-blue.webp');
	background-repeat:no-repeat;
}
.footerLeft__logo{
	width:12.802%;
	height:250px;
}
.footerLeft__logo img{
	width:100%;
	object-fit:contain;
}
.footerLeft__info h4{
	margin-bottom:.5em;
	font-size:1.2em;
	font-weight:700;
	letter-spacing:2px;
	color:var(--celeste);
}
.footerLeft__info p{
	margin-bottom:.3em;
	gap:.6em;
}
.footerLeft__info p img{
	width:1.2em;
}
.footerLeft__info p small{
	font-size:1em;
	font-weight:600;
	color:var(--blanco);
}
.botonRrss{
	width:32px;
	height:32px;
	padding:6px;
	background:var(--blanco);
	border-radius:50%;
	opacity:.5;
}
.botonRrss:hover{
	opacity:.9;
}
.botonRrss img{
	width:100%;
	object-fit:contain;
}
.botonRrss:nth-child(3) img{
	width:120%;
}
.footerRight{
	width:25%;
	margin-top:50px;
	padding-right:7%;
	border-left:5px solid var(--celeste);
}
.footerButton{
	width:100%;
	margin-bottom:.5em;
	display:block;
	text-align:right;
	text-transform:uppercase;
	color:var(--blanco);
	line-height:100%;
}
.footerButton:hover{
	color:var(--celeste);
}

@media screen and (max-width:1400px){
	.mensaje{
		width:100%;
		min-width:100%;
		margin-bottom:3em;
	}
}

#contacto .infoContacto{
	max-width:450px;
	padding:1em;
	position:absolute;
	top:30%;
	right:10%;
	background:rgba(255 255 255 / 70%);
	border-radius:.6em;
	backdrop-filter:blur(5px);
	box-shadow:
		0 0px 0px 17px rgba(190 190 190/ 40%),
		0 0px 0px 40px rgba(190 190 190/ 40%);
}
#contacto .infoContacto h3{
	color:var(--clrPrincipal);
}


.botonLogo{
	width:40%;
	display:none;
}
.botonLogo img{
	width:100%;
	object-fit:contain;
}
#buttonNav{display:none;}
.buttonHamburguesa{
	width:40px;
	height:40px;
	display:none;
	position:relative;
	background:var(--clrPrincipal);
	transition:transform .3s ease-in-out;
	border-radius:50%;
	cursor:pointer;
	z-index:10;
}
.iconHambur{
	position:relative;
}
.iconHambur,.iconHambur:before,.iconHambur:after{
	width:20px;
	height:2px;
	background:var(--blanco);
	transition:all .2s  ease-in-out;
}
.iconHambur:before,.iconHambur:after{
	content:'';
	position:absolute;
}
.iconHambur:before{top:-6px}
.iconHambur:after{top:6px}

#buttonNav:checked ~ .buttonHamburguesa{transform:rotate(0deg);}
#buttonNav:checked ~ .buttonHamburguesa .iconHambur{width:0px; translate:-11px; background:transparent;}
#buttonNav:checked ~ .buttonHamburguesa .iconHambur:before{top:0px; left:0; transform:rotate(45deg);}
#buttonNav:checked ~ .buttonHamburguesa .iconHambur:after{top:0px; left:0; transform:rotate(-45deg);}
#buttonNav:checked ~ nav{width:100%; left:0px;}

.botonFlotante{
	width:45px;
	height:45px;
	background:var(--clrPrincipal);
	transition:opacity .3s ease, visibility .3s ease;
	opacity:0;
	visibility:hidden;
}
.botonFlotante.visible{
	opacity:1;
	visibility:visible;
}

@media screen and (max-width:1024px){
	.botonLogo{
		display:block;
	}
	.buttonHamburguesa{
		display:flex;
	}
	header{
		position:fixed;
	}
	header nav{
		width:0px;
		height:100dvh;
		position:absolute;
		top:-50px;
		left:100%;
		flex-direction:column;
		justify-content:center!important;
		background:var(--clrPrincipal);
		transition:left .3s ease-in-out;
		overflow:hidden;
	}
	.botonNav{
		color:var(--blanco);
	}
	.botonActive{
		background:var(--blanco);
		color:var(--clrPrincipal);
	}
}

@media screen and (max-width:768px){
	.bannerDos .bannerContent{
		width:50%;
	}
	.bannerUno .bannerContent, .bannerUno .bannerContentTitle{
		width:50%;
	}
	#relatores article,#relatores article:nth-child(odd){
		padding-inline:1em;
		justify-content:center;
	}
	.eventDia{
		width:100%;
		padding-inline:0em;
		margin-bottom:1em;
	}
	.eventHora{
		width:100%;
	}
	.footerLeft{
		padding-left:5%;
	}
	.footerRight{
		padding-right:5%;
	}
	#contacto .infoContacto{
		max-width:40%;
	}
	.publicaciones{
		width:90%;
	}
}
@media screen and (max-width:540px){	
	.bannerContent h1, .bannerUno .bannerContent h1, .bannerDos .bannerContent h1{
		line-height:90%;
		font-size:1.8em;
	}
	.bannerContent h3{
		line-height:90%;
		margin-bottom:1em;
	}
	.bannerTitle{
		padding-inline:1em !important;
	}
	.bannerTitle h2{
		font-size:1.3em;
		line-height:110%;
	}
	.content article{
		padding-inline:1em;
	}
	.cardRelator{
		width:100%;
	}
	.carTitle{
		position:relative;
		z-index:3;
	}
	.carTitle h3{
		font-size:1.6em;
	}
	.cardImag{
		max-width:50%;
		margin-inline:auto;
		margin-bottom:2em;
		position:relative;
		right:0px;
		z-index:0;
	}
	.cardContent{
		width:100%;
		padding:2em 1em;
	}
	#programa article{
		padding-inline:1em;
	}
	.eventHora__titulo{
		padding-inline:1em;
	}
	.eventHora__titulo p{
		width:100%;
	}
	.eventHora__titulo strong{
		width:100%;
		padding-left:0;
		border-left:none;
	}
	.mensaje{
		padding-inline:1em;
	}
	#contacto .infoContacto{
		top:20%;
	}
	footer{
		position:relative;
		flex-flow:row wrap;
	}
	footer::before{
		content:'';
		width:9px;
		height:100%;
		position:absolute;
		top:0px;
		left:0px;
		background:var(--celeste);
	}
	.footerLeft, .footerRight{
		width:100%;
	}
	.footerLeft{
		height:fit-content;
		padding-inline:1em;
		gap:1.5em;
	}
	.footerLeft__logo{
		width:150px;
	}
	.footerRight{
		padding-bottom:2em;
	}
	.publicaciones{
		width:100%;
	}
}
@media screen and (max-width:420px){
	#contacto .infoContacto{
		max-width:calc(100% - 2em);
		position:relative;
		left:0px;
		box-shadow:none;
	}
}