:root{
	--pantone-rojo: #F9423A;
	--txts-confuturo: #DB2F28;
	--rojo-textos: #db2f29;
	--textos: #212529;
	
}

main h1,h2,h3,h4,h5,h6{
	color: var(--textos);
}
main p{
	color: var(--textos);
	font-weight: 300;
}
main b, main strong{
	font-weight: 600;
}

.hero-section{
	background-color: #fff9f9;
}
.hero-section .top-title{
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--rojo-textos);
}
.hero-section h1{
	font-weight: 700;
}
.hero-section h1 span{
	color: var(--rojo-textos);
}
.hero-section p{
	color: #3d3d3d;
}
.hero-section p.info-small{
	font-weight: 500;
	color: #595959;
}

.contenedor-info{
	border: 3px solid #F9423A;
	font-size: 1.5rem;
	color: #595959;
	position: relative;
}
.contenedor-info span{
	font-size: 60px;
	position: absolute;
	top: -30px;
	left:-30px;
	background-color: #fff;
	border-radius: 50%;
}

.cards-recomendaciones .card{
	box-shadow: 0 4px 10px rgba(0,0,0,.1);
	border-radius: 20px;
	border: none;
}
.cards-recomendaciones .card .card-body{
	padding: 1.5rem;
}
.cards-recomendaciones .card span{
	font-size: 48px;
}

.cta-info{
	background-color: var(--rojo-textos);
	border-radius: 48px;
	padding: 58px 48px;
}
.cta-info span{
	font-size: 80px;
}
.cta-info .titulo,
.cta-info p{
	color: #fff;
}

@media screen and (min-width: 0px) {
	main p{
		font-size: 1.1rem;
		line-height: 1.5rem;
	}
	.hero-section > .container{
		display: flex;
		flex-direction: column;
	}
	.hero-section .top-title{
		font-size: 1.3rem;
		line-height: 2rem;
	}
	.hero-section h1{
		font-size: 3rem;
	}
	.hero-section p{
		font-size: 1.25rem;
		line-height: 1.8rem;
	}
	.hero-section p.info-small{
		font-size: 1.1rem;
	}
	.hero-section img{
		margin-bottom: 3rem;
	}
	.titulo{
		font-size: 2.2rem;
	}
	.cont-como-opera{
		margin-top: 3rem;
	}
}
@media screen and (min-width: 991.99px) {
	.cards-recomendaciones{
		margin-right: -5rem;
	}
}
@media screen and (min-width: 767.99px) {
	main p{
		font-size: 1.25rem;
		line-height: 1.8rem;
	}
	.hero-section .top-title{
		font-size: 1.5rem;
		line-height: 2rem;
	}
	.hero-section h1{
		font-size: 4rem;
	}
	.hero-section p{
		font-size: 1.5rem; /* 26px */
		line-height: 2rem;
	}
	.hero-section p.info-small{
		font-size: 1.25rem; /* 20px */
	}
	.hero-section img{
		margin-bottom: -12rem;
	}
	.titulo{
		font-size: 2.5rem;
	}
	.cont-como-opera{
		margin-top: 15rem;
	}
}