@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');

*{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-family: "Comfortaa", serif;
	color: #031d33;
	--title1Size:38px;
	--title2Size:18px;
	--subTitle1Size:14px;
	--subTitleSize:16px;
	--colorText1:#031d33;
	--sectionHeightPadding:120px;
	--sectionWidth:80%;
}




.body{
	width: 100%;
}

body{
	background-color: #ffffff;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.ghost{
	width: 100%;
	height: 1px;
	margin: auto;
}
.sc1{
	width: 100%;
	margin: auto;
	margin-top: 0;
	padding-top: 150px;
	padding-bottom: 20px;
	background: rgb(20,130,60);
	background: linear-gradient(142deg, rgba(20,130,60,1) 47%, rgba(50,103,138,1) 91%);
}
.sc1 .content{
	margin: auto;
	width: 100%;
	display: flex;
	flex-direction: row;
}

.sc1 .content .presentacion{
	width: 450px;
	height: auto;
	margin: auto;
	margin-right: 20px;
}

.sc1 .content .presentacion .title1{
	font-size: 40px;
	color: #ffffff;
	font-weight: 700;
	display: block;
	width: 100%;
}

.sc1 .content .presentacion .subtitle{
	font-size: 20px;
	color: #ffffff;
	margin-top: 10px;
	font-weight: 400;
	display: block;
	width: 100%;
}

.sc1 .content .presentacion .img{
	width: var(--sectionWidth);
	margin: auto;
	margin-top: 20px;
}

.sc1 .content .presentacion .img img{
	width: 100%;
}


.sc1 .content .cotizacion{
	--size: 500px;
  	width: var(--size);
  	height: var(--size);
	margin: auto;
	margin-left: 40px;
	background-color: #ffffff;
	border-radius: 14% 0 14% 0;
}

.cotizacion .zona_rango{
	width: var(--sectionWidth);
	margin: auto;
	margin-top: 50px;
}

.cotizacion .zona_rango .controles{
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.cotizacion .zona_rango .controles .btn_image{
	--size:45px;
	width:var(--size);
	height: var(--size);
	margin: auto;
	transition: 0.3s all ease;
	cursor: pointer;
}

.cotizacion .zona_rango .controles .btn_image img{
	width: 100%;
}

.cotizacion .zona_rango .controles .btn_image:hover{
	transform: scale(1.04);
}

.cotizacion .zona_rango .controles .left{
	margin: auto;
	margin-left: 0px;
}

.cotizacion .zona_rango .controles .right{
	margin: auto;
	margin-right: 0px;
}

.cotizacion .zona_rango .controles #rangeText{
	font-size: 34px;
	display: block;
	margin: auto;
	font-weight: 700;
	color: #3BC35B;
}

.cotizacion .zona_rango input{

}



:root {
  --RANGE-VALUE: 20%;
  --C-MAIN: #3BC35B;
  --C-GREY: #e3e4e8;
}

input[type="range"] {
  background: linear-gradient(
    to right, 
    var(--C-MAIN) var(--RANGE-VALUE), /* valor del input es final del color principal */
    var(--C-GREY) 0);
}

input[type="range"]::before {
  width: var(--RANGE-VALUE);
  background-color: var(--C-MAIN);
  
  
  filter: blur(8px);
  opacity: .8;
}



/*          */

.wrapper-range {
  position: relative;
  display: block;
  width: 100%;
  margin: auto;
  margin-top: 30px;
}
:focus {
  outline: 0;
}
input[type=range]::-webkit-slider-thumb {
  opacity: 0;
}


input[type="range"]::before {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 0;
  display: block;
  left: 0;

  z-index: -1;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 50px;
  width: 100%;
  max-width: 80vw;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  margin: auto;
}




/*	Pago por quincena	*/

.cotizacion .valuePerWeek{
	width: var(--sectionWidth);
	background-color: rgb(166, 255, 201);
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 5px;
}

.cotizacion .valuePerWeek span{
	display: block;
	width: 100%;
	text-align: center;
	margin: auto;
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 600;
	color: rgba(40, 60, 40, 1.0);
}


.cotizacion .valuePerWeek #textValue{
	font-weight: 700;
	display: block;
	margin: auto;
	font-size: 24px;
}

.cotizacion .bottom{
	width: var(--sectionWidth);
	margin: auto;
	margin-top: 40px;
}

.cotizacion .bottom button{
	width: 100%;
	height: 40px;
	cursor: pointer;
	color: #ffffff;
	background-color: #2fa4f2;
	text-align: center;
	font-weight: 600;
	font-size: 22px;
	transition: 3s all ease;
	border-radius: 5px;
	display: block;
	margin-bottom: 20px;
	border: none;
	transition: 0.3s all ease;
}

.cotizacion .bottom .btnSolicitar:hover{
	background-color: #16ff6a;
}

.cotizacion .bottom p{
	display: block;
	margin-top: 20px;
	width: 100%;
	color: #636262;
	font-weight: 400;
	font-size: 14px;
	text-align: justify;
}




/*		secccion 		*/


.sc2{
	display: block;
	width: 100%;
	margin: auto;
	margin-top: 40px;
	background-color: #ffffff;
	padding-top: var(--sectionHeightPadding);
	padding-bottom: var(--sectionHeightPadding);
}

.sc2 h2{
	display: block;
	width: var(--sectionWidth);
	font-size: var(--title1Size);
	color: #031d33;
	font-weight: 700;
	margin: auto;
	margin-bottom: 30px;
	margin-top: 30px;
	text-align: center;
}

.sc2 .elements{
	display: block;
	width: var(--sectionWidth);
	background-color: #e8ffe5;
	padding-top: 30px;
	padding-bottom: 40px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: auto;
	border-radius: 5% 3% 5% 3%;
}



.sc2 .elements .element{
	width: 300px;
	display: block;
	margin: auto;
	margin-top: 10px;
}

.sc2 .elements .element .image{
	width: 60px;
	height: auto;
	display: block;
	margin: auto;
	margin-bottom: 10px;
}

.sc2 .elements .element .image img{
	width: 100%;
}

.sc2 .elements .element .title1{
	display: block;
	width: 100%;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: var(--title2Size);
	font-weight: 700;
	text-align: center;
	color: var(--colorText1);
}

.sc2 .elements .element .description{
	display: block;
	width: 100%;
	margin: auto;
	margin-top: 15px;
	text-align: center;
	font-size: var(--subTitle1Size);
	color: #031d33;
}


/*		SC3		*/

.sc3{
	display: block;
	width: 100%;
	margin: auto;
	background-color: #ffffff;
	padding-top: var(--sectionHeightPadding);
	padding-bottom: var(--sectionHeightPadding);
}

.sc3 .elements{
	width: var(--sectionWidth);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: auto;
}

.sc3 .elements2{
	background-color: #EED8F2;
	border-radius: 8px;
	padding-bottom: 30px;
	padding-top: 30px;
}

.sc4 .recomendaciones::-webkit-scrollbar {
	width: 30px;
}
/* Track */
.sc4 .recomendaciones::-webkit-scrollbar-track {
	background-color: rgba(40, 40, 40, 0.3);
}
 
/* Handle */
.sc4 .recomendaciones::-webkit-scrollbar-thumb {
	background: rgb(20,130,60);
	background: linear-gradient(142deg, rgba(20,130,60,1) 47%, rgba(50,103,138,1) 91%);
	border-radius: 0;
	transition: 0.5s all ease;
}

/* Handle on hover */
.sc4 .recomendaciones::-webkit-scrollbar-thumb:hover {
	background: rgb(20,130,60);
	background: linear-gradient(142deg, rgba(50,103,138,1) 47%, rgba(20,130,60,1) 91%);
}

.sc3 .elements .image1{
	display: block;
	width: 300px;
	margin: auto;
}

.sc3 .elements .image1 img{
	width: 100%;
}


.sc3 .elements .info{
	display: block;
	margin: auto;
	margin-left: 30px;
	width: 650px;
}

.sc3 .elements .info h2{
	display: block;
	text-align: left;
	font-size: var(--title1Size);
	font-weight: 700;
}

.sc3 .elements .info span{
	display: block;
	text-align: left;
	font-size: var(--title2Size);
	color: var(--colorText1);
	font-weight: 500;
	margin: auto;
	margin-top: 20px;
}

.sc3 .elements .info ul{
	display: block;
	margin-top: 20px;
	margin-left: 40px;
}

.sc3 .elements .info ul li{
	font-size: var(--title2Size);
	color: var(--colorText1);
	font-weight: 400;
}


.afiliaciones{
	background-color: #ffffff;
	width: 100%;
	padding-bottom: 20px;
}

.afiliaciones .nodos{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width:var(--sectionWidth);
	margin: auto;
}

.afiliaciones .nodos .nodo{
	width: 85px;
	display: block;
	margin: auto;
}

.afiliaciones .nodos .nodo img{
	width: 100%;
}


.sc4{
	width: 100%;
	padding-top: var(--sectionHeightPadding);
	padding-bottom: var(--sectionHeightPadding);
	margin: auto;
}

.sc4 .elements{
	display: block;
	width: var(--sectionWidth);
	margin: auto;
}

.sc4 h2{
	display: block;
	width: 100%;
	text-align: left;
	margin: auto;
	margin-left: 0;
	margin-bottom: 30px;
	font-size: var(--title1Size);
	color: var(--colorText1);
	font-weight: 700;
}

.sc4 .recomendaciones{
	display: flex;
	flex-direction: row;
	overflow-x: auto;
	white-space: nowrap;
	margin: auto;
	width: auto;
	background: rgba(255,255,255,0);
	background: linear-gradient(90deg, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 98%);

}

.sc4 .recomendaciones .nodo{
	width: 310px;
	height: 280px;
	background-color: rgb(240, 240, 250, 1.0);
	border-radius: 10px;
	margin: auto;
	margin-left: 0;
	margin-right: 40px;
	padding:10px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.sc4 .recomendaciones .nodo .img{
	width: 40px;
	margin: auto;
	margin-top: 0;
	margin-left: 0;
	margin-bottom: 20px;
	display: block;
}

.sc4 .recomendaciones .nodo .info{
	width: 100%;
}

.sc4 .recomendaciones .nodo .info .img img{
	width: 100%;
}

.sc4 .recomendaciones .nodo .info p{
	display: block;
	width:310px;
	height: auto;
	font-size: var(--subTitleSize);
	color:var(--colorText1);
	font-weight: 400;
	text-align: justify;
	white-space: normal;
}

.sc4 .recomendaciones .nodo span{
	display: block;
	width: 100%;

	font-size: var(--title2Size);
	color: var(--colorText1);
	font-weight: 700;
	text-align: left;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 0;
}


.faq {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 8px;
}

.faq h1 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 28px;
}

.faq-item {
    margin-bottom: 15px;
}

.faq-question {
    width: 100%;
    padding: 15px;
    color: var(--colorText1);
    text-align: left;
    border: none;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    background-color: rgba(230, 230, 23 0, 1.0);
    transition: background-color 0.3s ease;
}

.faq-question:hover {
	color: #ffffff;
	background: rgb(20,130,60);
	background: linear-gradient(142deg, rgba(30,140,70,1) 47%, rgba(60,113,148,1) 91%);
}

.faq-answer {
    display: none;
    padding: 10px;
    border-radius: 0 0 5px 5px;
    font-size: 16px;
}

.faq-answer ul {
    list-style-type: disc;
    margin-left: 20px;
}

.faq-answer p {
    margin-bottom: 10px;
}

.faq-item.open .faq-answer {
    display: block;
}


/* Estilos generales para el footer */
.footer {
  background-color: #222;
  color: #fff;
  font-family: 'Arial', sans-serif;
  padding: 40px 20px;
  text-align: left;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-section {
  flex: 1;
  min-width: 220px;
  margin-bottom: 20px;
}

.footer-section h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #ddd;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 8px;
}

.footer-section ul li a {
  color: #bbb;
  text-decoration: none;
  font-size: 14px;
}

.footer-section ul li a:hover {
  color: #fff;
}

/* Estilo para las redes sociales */
.social-media {
  text-align: center;
  margin-top: 30px;
}

.social-media h4 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #ddd;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-icon {
  color: #bbb;
  text-decoration: none;
  font-size: 16px;
}

.social-icon:hover {
  color: #fff;
}

/* Pie de página */
.footer-bottom {
  text-align: center;
  margin-top: 30px;
  font-size: 12px;
  color: #777;
}

.footer-bottom p {
  margin: 0;
  color: #ffffff;
}

/* Diseño responsivo */
@media (max-width: 768px) {
	*{
		--title1Size:32px;
		--title2Size:18px;
		--subTitle1Size:14px;
		--subTitleSize:16px;
		--sectionHeightPadding:120px;
		--sectionWidth:95%;
	}
  .footer-content {
    flex-direction: column;
    align-items: center;
  }

  .footer-section {
    text-align: center;
  }

  .social-icons {
    flex-direction: column;
  }

  .social-icon {
    margin-bottom: 10px;
  }

	.sc1 .content{
		flex-direction: column;
	}
	.sc1 .content .presentacion{
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.sc1 .content .presentacion{
		width: var(--sectionWidth);
		margin: auto;
		margin-top: 25px;
		margin-bottom: 25px;
	}

	.sc1 .content .cotizacion{
		width: 95%;
		height: auto;
		padding-top: 30px;
		padding-bottom: 30px;
		margin: auto;
		margin-top: 25px;
		margin-bottom: 30px;
		border-radius: 0;
	}

	.cotizacion .zona_rango .controles #rangeText{
		font-size: 32px;
	}

	.cotizacion .zona_rango{
		margin-top: 50px;
		margin-bottom: 40px;
	}


	.cotizacion .zona_rango .controles .btn_image{
		--size:45px;
	}

	.wrapper-range {
			margin-top: 50px;
			margin-bottom: 40px;
	}
	input[type="range"] {
	  height: 70px;
	}

.cotizacion .valuePerWeek{
	padding-top: 40px;
	padding-bottom: 40px;
}

.cotizacion .valuePerWeek span{
	font-size: 22px;
}


.cotizacion .valuePerWeek #textValue{
	font-size: 30px;
}



.cotizacion .bottom button{
	width: 100%;
	height: 80px;
	font-size: 36px;
}


.cotizacion .bottom p{
	font-size: 18px;
}



	.sc1 .content .presentacion .title1{
		text-align: center;
		font-size: 52px;
		font-weight: 700;
		display: block;
		width: 100%;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.sc1 .content .presentacion .subtitle{
		text-align: center;
		font-size: 34px;
		font-weight: 700;
		display: block;
		width: 100%;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.sc2 .elements{
		flex-direction: column;
	}

	.sc2 .elements .element{
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.sc3 .elements{
		flex-direction: column;
	}

	.sc3 .elements2{
		margin-top: 20px;
		margin-bottom: 20px;
	}


	.sc3 .elements .info{
		width: 90%;
		margin: auto;
		margin-top: 20px;
		margin-bottom: 30px;
	}

	.afiliaciones .nodos{
		flex-wrap: wrap;
	}

	.afiliaciones .nodos .nodo{
		width: 50px;
		margin-top: 10px;
		margin-bottom: 20px;
	}
	.faq {
	    max-width: 80%;
	    margin: 20px auto;
	    padding: 20px;
	    background-color: rgba(255, 255, 255, 0);
	    border-radius: 8px;
	}

}









@media (max-width: 520px) {

	.wrapper-range {
			margin-top: 50px;
			margin-bottom: 40px;
	}
	input[type="range"] {
	  height: 60px;
	}



.cotizacion .valuePerWeek span{
	font-size: 22px;
}


.cotizacion .valuePerWeek #textValue{
	font-size: 26px;
}

.cotizacion .bottom button{
	width: 100%;
	height: 60px;
	font-size: 26px;
}


.cotizacion .bottom p{
	font-size: 18px;
}



	.sc1 .content .presentacion .title1{
		text-align: center;
		font-size: 42px;
		font-weight: 700;
		display: block;
		width: 100%;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.sc1 .content .presentacion .subtitle{
		text-align: center;
		font-size: 30px;
		font-weight: 700;
		display: block;
		width: 100%;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.sc2 .elements{
		flex-direction: column;
	}

	.sc2 .elements .element{
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.sc3 .elements{
		flex-direction: column;
	}

	.sc3 .elements2{
		margin-top: 20px;
		margin-bottom: 20px;
	}


	.sc3 .elements .info{
		width: 90%;
		margin: auto;
		margin-top: 20px;
		margin-bottom: 30px;
	}

	.afiliaciones .nodos{
		flex-wrap: wrap;
	}

	.afiliaciones .nodos .nodo{
		width: 50px;
		margin-top: 10px;
		margin-bottom: 20px;
	}
	.faq {
	    max-width: 80%;
	    margin: 20px auto;
	    padding: 20px;
	    background-color: rgba(255, 255, 255, 0);
	    border-radius: 8px;
	}

	*{
		--sectionWidth:90%;
	}
}