*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

:root {
	--red:#D31129;
	--blue:#1E3E85;
}
img {display:block; max-width:100%;}
a {color:#aaa;text-decoration:none;}
a:hover,a:active {color: #333;}

.main-title {font-size:36px; line-height:1; font-weight:bold; color:#fff; padding:12px; border-radius:24px; margin:0 0 0 0; display:flex; z-index:0; position:relative;}
.main-title img {margin-right:12px; display:inline-block;}
.main-title span {margin-top:6px; display:inline-block;}

.gradient {background:#5A92CD; background:linear-gradient(90deg, rgba(90, 146, 205, 1) 0%, rgba(30, 61, 134, 1) 100%);}

.flex {display:flex; flex-wrap:wrap;}

.section {background:#E6E5E5; padding:44px 12px 48px 12px; margin-top:-20px;}

.nav-niveles {gap:12px; margin-bottom:24px; padding-bottom:24px; border-bottom:2px dotted #6A8BC6;}
.nav-niveles a {font-size:15px; line-height:1; font-weight:bold; color:#fff; padding:12px; background:var(--blue); border-radius:12px; }
.nav-niveles a.active {background:var(--red);}
.nav-niveles a:hover {background:var(--red);}


.second-title {font-size:26px; line-height:1; font-weight:bold; color:var(--blue);  margin:0 0 24px 0; }
.second-title u {text-decoration:none; border-bottom:3px solid var(--blue);}

.title {font-size:15px; line-height:1; font-weight:bold; color:#fff; padding:8px; border-radius:8px; margin:0 0 8px 0; display:inline-block;}

.objetivo .col {width:50%; margin-bottom:24px;}
.objetivo .resumen {background:var(--red); padding:8px 24px 8px 16px; border-radius:8px;}
.objetivo .resumen p {font-size:14px; color:#fff; line-height:1.2; padding:8px 0 8px 0; font-weight:bold;}
.objetivo .resumen p.withline {border-bottom:2px dotted #fff}
.objetivo .hero {margin:-4% 0;}


.tools {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
	background:#fff;
	border-radius:12px;
	padding:8px;
	margin-bottom:24px;
}

.tools .tool {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding:12px 12px 12px 12px;
	position:relative;
}
.tools .tool:nth-child(5n)::after {
    display: none;
}
.tools .tool:nth-child(n + 6)::before {
	display: none;
}
/* Right dotted line */
.tools .tool::after {
	content: "";
	position: absolute;
	top: 5%;
	right: 0;
	width: 2px;
	height: 90%;
	background-image: repeating-linear-gradient(
		to bottom,
		#cfcfcf 0 2px,
		transparent 2px 6px
	);
}
/* Bottom dotted line */
.tools .tool::before {
	content: "";
	position: absolute;
	left: 5%;
	bottom: 0;
	width: 90%;
	height: 2px;
	background-image: repeating-linear-gradient(
		to right,
		#cfcfcf 0 2px,
		transparent 2px 6px
	);
}
.tools .tool .img {margin-bottom:8px;}
.tools .tool .txt {font-size:14px; line-height:1.3; color:#000000; padding:0 12px 0 0; }
.tools .tool .txt span {color:var(--blue); font-weight:bold; }
.tools .tool .txt a {color:var(--blue); text-decoration:underline; }



.contextos {gap:5%;}
.contextos .col1 {width:25%;}
.contextos .col2 {width:70%;}
.contextos .lista { width: 100%;background:#fff; border-radius:12px; padding:8px; margin-bottom:48px; gap:4%;}
.contextos .lista .intro { width: 100%; font-size:14px; line-height:1.3; color:#000000; padding:0 0 8px 0;}
.contextos .lista .num {border-radius:50%; color:#fff; font-weight:bold; display:inline-block; height:22px; width:22px; font-size:13px; line-height:1; text-align:center; padding:5px 1px 0px 0px; margin-right:8px; font-style:normal;}
.contextos .title span {font-size:12px;}
.lista .lado {width:48%;}
.lista .lado > div { font-size:14px; line-height:1.3; color:#000000; padding-bottom:8px; position:relative; font-style:italic;}
.lista .lado > div::after {
	content: "";
	position: absolute;
	bottom: 4px;
	left: 32px;
	width:calc(100% - 32px);
	height: 2px;
	background-image: repeating-linear-gradient( to right, #cfcfcf 0 2px, transparent 2px 6px );
}


.title u {text-decoration:none; border-bottom:2px solid #fff;}

.estimated {color:black; font-size:14px; line-height:1; padding:0 0 12px 0;}

.cronograma .periods {gap:12px; margin-bottom:12px; }
.cronograma .periods a {font-size:14px; line-height:1; font-weight:bold; color:#fff; padding:8px; background:var(--blue); border-radius:8px; }
.cronograma .periods a.active {background:var(--red);}
.cronograma .periods a:hover {background:var(--red);}

.cronograma .day {color:white; font-size:16px; line-height:1.1; font-weight:bold; padding:8px 12px; border-radius:8px 8px 0 0; text-decoration:underline;}
.cronograma .desc {color:var(--blue); font-size:14px; line-height:1; padding-bottom:12px;border-bottom:1px dotted var(--blue);}
.cronograma ul {margin:0; padding:0 0 0 0;}
.cronograma ul li {margin:0; padding:6px 0; font-size:14px; line-height:1.3; color:black; list-style:none; border-bottom:1px dotted #C5C3C3;}
.cronograma ul li:last-child {border:none;}
.cronograma .wrap {background:white; padding:12px 12px 8px 12px; border-radius:0 0 12px 12px; margin-bottom:12px;}
.cronograma .tip {padding:0; color:var(--red);}
.cronograma .dato {padding:0; color:var(--red);}
.cronograma .icon {display:inline-block; margin-bottom:-2px; margin-right:4px; max-width:17px;}
.cronograma .wrap a {padding:4px 5px 4px 4px; background:var(--red); font-weight:bold; color:white; font-size:11px; border-radius:4px; margin-left:4px;}
.cronograma .wrap a .linkimg {display:none; margin-bottom:-3px; max-width:12px;}
.cronograma .wrap a:hover .linkimg {filter:hue-rotate(-120deg);}
.cronograma .wrap a:hover {background:var(--blue);}

.cronograma .tip {}
.cronograma .tip .tit {color:white; font-size:14px; font-weight:bold; padding:6px 8px 6px 30px; border-radius:8px 8px 0 0; position:relative;}
.cronograma .tip .tit::after {content:""; width:17px; height:18px; position:absolute; top:5px; left:12px; background:url(../img/icono_tip.png) no-repeat; background-size:85%;}
.cronograma .tip .txt {color:white; font-size:14px; line-height:1.3; padding:6px 12px; border-radius:0 0 8px 8px; background:var(--red); margin-bottom:12px;}

.cronograma .dato {}
.cronograma .dato .tit {color:white; font-size:14px; line-height:1; font-weight:bold; padding:6px 8px 6px 30px; border-radius:8px 8px 0 0; position:relative;}
.cronograma .dato .tit::after {content:""; width:14px; height:18px; position:absolute; top:5px; left:12px; background:url(../img/icono_dato.png) no-repeat; background-size:85%;}
.cronograma .dato .txt {color:white; font-size:14px; line-height:1.3; padding:6px 12px; border-radius:0 0 8px 8px; background:var(--red); margin-bottom:12px;}

a[href="intent://#Intent;package=com.elbibliote.idiomas;scheme=market;end;"]  {display:none;}

@media screen and (max-width: 1280px) {
	

}
@media screen and (max-width: 1023px) {
	
	.tools {
        grid-template-columns: repeat(2, 1fr);
    }
	.tools .tool::after {display:none;}
	.tools .tool::before {display:none;}
    .tools .tool:nth-child(odd)::after {
		content: "";
		display:block!important;
		position: absolute;
		top: 5%;
		right: 0;
		width: 2px;
		height: 90%;
		background-image: repeating-linear-gradient(to bottom,#cfcfcf 0 2px,transparent 2px 6px);
    }
    .tools .tool:nth-child(odd)::before {
		display:block!important;
		content: "";
		position: absolute;
		left: 5%;
		bottom: 0;
		width: 90%;
		height: 2px;
		background-image: repeating-linear-gradient(to right,#cfcfcf 0 2px,transparent 2px 6px);
    }
	.tools .tool:nth-child(even)::before {
		display:block!important;
		content: "";
		position: absolute;
		left: 5%;
		bottom: 0;
		width: 90%;
		height: 2px;
		background-image: repeating-linear-gradient(to right,#cfcfcf 0 2px,transparent 2px 6px);
    }
	.tools .tool:last-child::before {
		display:none!important;
    }
	
}

@media screen and (max-width: 815px) {
	
	.main-title {font-size:22px; padding:8px; border-radius:12px;}
	.main-title img {margin-right:8px; width:22px; height:22px;}
	.main-title span {margin-top:0;}
	
	.nav-niveles {gap:8px; margin-bottom:24px; padding-bottom:24px; border-bottom:2px dotted #6A8BC6; justify-content:center;}
	.nav-niveles a {font-size:14px; line-height:1; font-weight:bold; color:#fff; padding:8px; background:var(--blue); border-radius:8px; }
	
	.second-title {font-size:18px; text-align:center;}
	
	.objetivo .col {width:100%; margin-bottom:36px;}
	
	.contextos .col1 {display:none;}
	.contextos .col2 {width:100%;}
	
	.lista {gap:0;}
	.lista .lado {width:100%;}
	
	.cronograma .periods {gap:8px;}
	
	/*a[href="intent://#Intent;package=com.elbibliote.idiomas;scheme=market;end;"]  {display:inline-block;}*/
}

@media screen and (max-width: 525px) {
	
	
	
}