/*Medida para tablets en vertical*/
@media screen and (max-width:420px) {
	.topnav a {
		padding: 12px 3px;
	}
}

/*Medida para tablets en vertical*/
@media screen and (max-width:376px) {
	.topnav a {
		line-height: 20px;
		padding: 12px 8px;
	}
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {
		float: right;
		display: block;
		margin-right: 10px;
	}

	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.topnav.responsive a.minimo { 
		margin:0px;
	}
	.topnav.responsive a.oculto {
		display: none;
	}
}

/*Medida para tablets en vertical*/
@media screen and (max-width:840px) {
	#wrap { width: 100%; }
}

@media screen and (max-width:800px) {
	.tres { grid-template-columns: repeat(2, 1fr); }
	.cinco { grid-template-columns: repeat(3, 1fr); }

	img {
		max-width: 100%;
		background-size: cover;
		object-fit: cover;
	}
}

@media screen and (max-width:900px) {
	.about, .acercade, .planes, .beneficios, .testimonio { aspect-ratio: 3 / 4; }
}

/*Medida para tablets en vertical*/
@media screen and (max-width:820px) {
	.cuatro { grid-template-columns: repeat(2, 1fr); }
}

/*Medida para tablets en vertical*/
@media screen and (max-width:760px) {
	
	.about, .acercade, .planes, .beneficios, .testimonio, .paso1, .paso2, .paso3, .paso4 { aspect-ratio: 4 / 3; }

	p.frase { font-size:30px; line-height:40px; }
	p.frase-sombra { font-size:36px; line-height:46px; }

	.tresuna { grid-template-columns: 1fr 1fr; }
	.dos { grid-template-columns: repeat(1, 1fr); }
	.cinco { grid-template-columns: repeat(2, 1fr); }
	.seis { grid-template-columns: repeat(3, 1fr); }
	
	.margen-page { padding: 10px; }
	.justificado { text-align: left; }

	#footer { padding: 20px; }
	#login { padding: 20px 10%; }
}

@media screen and (max-width:660px) {
	
	h1 { font-size: 36px;  line-height: 45px; }
	h2 { font-size: 22px;  line-height: 30px; }
	h3 { font-size: 28px;  line-height: 36px; }
	h4 { font-size: 24px;  line-height: 30px; }

	.tresuna { grid-template-columns: 1fr; }
	.tres, .cuatro { grid-template-columns: repeat(1, 1fr); }
	
	p.frase-sombra { font-size:40px; line-height:40px; }
}

/*Medida smartphones*/
@media screen and (max-width:500px) {

	.about, .acercade, .planes, .beneficios, .testimonio, .paso1, .paso2, .paso3, .paso4 { aspect-ratio: 1 / 1; }

	p.frase-sombra { font-size:30px; line-height:40px; }

	.derecha { float: left; }

	.cinco { grid-template-columns: repeat(1, 1fr); }

	.vertical { grid-row: span 2; }
	.horizontal { grid-column: span 1; }
	.cuadro {  grid-column: span 1; grid-row: span 1; }
	
}

/*Medida smartphones*/
@media screen and (max-width:400px) {

	body { font-weight: normal; }

	.contacto {
		width: 95%;
		padding-bottom: 0px;
	}
}

/*Medida smartphones*/
@media screen and (max-width:360px) {
	h1 { font-size: 28px;  line-height: 36px; }
	h2 { font-size: 20px;  line-height: 28px; }
	h3 { font-size: 20px;  line-height: 26px; }
	h4 { font-size: 18px;  line-height: 24px; }
}

/*Medida smartphones*/
@media screen and (max-width:250px) {
	.topnav.responsive a.oculto {
		display: block;
	}
}