:root {
	--blanco: #ffffff;
	/* --blanco: #a1a5d1; */
	/* --blanco: #aaadd1; */
	--negro: #000000;
	--casiNegro: #161515;
	--gris:#757575;
	--grisOscuro: #2d2d2d;
	/* --botones:#AA52FF; */
	--botones:#e0146b;
	/* --botones:#f72585; */
	--fuentePri: 'Poppins', sans-serif;
	--fuenteSec: 'Open Sans',sans-serif;
	--normal: 400;
	--semibold: 600;
	--bold:700;
	--moradoFondo: #791AFF;
	/* --morado: #2f1b72; */
	--azulOscuro: #2f1b72;
	--morado: #02D8F8;
	--verde: #02D8F8;
	--moradoClaro:#AA52FF;
	--moradoPale:#c4b7dd;
	--celeste: #009ee1;
	--cian: #50F1FF;
	--color1: #0080EC;
	--color2: #00ABEE;
	--color3: #00D2EF;
	--color4: #00DEFF	;
	--color5: #95E2F4;
	--color6: #2e273d;
	--color7:#885fff;

	--grisOscuro: #302B3F;
	--rayita:#9094c783;
	--letraGris:#aaadd1;
	/* --letraGris:#c4b7dd; */
	--grisMedio: #454760;
	--moradoClaro: #cdd1ff;
	--rayita2: #b6b9d8;
	--letraMorada: #b7bbe4e3;
	--azulClaro: #4cc9f0;

}

html {
	box-sizing:border-box;
	font-size:62.5%;			/*reset para la medida*/
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
	/* font-family: 'Gorditas', cursive; */
	font-family: var(--fuentePri);
	line-height:2;
}

a{
	text-decoration: none;
}

.contenedor {
	max-width: 180rem;     /*utiliza el espacio siempre y cuando no te pases de 1200*/
	width: 90%;
	margin: 0 auto;			/*lo centra*/
}

h1 {
	font-size:3.8rem;
	margin: 0;
}
h2 {
	font-size:3.4rem;
	margin: 0;
}
h3 {
	font-size:3rem;
	margin: 0;
}
h4 {
	font-size:2.6rem;
	margin: 0;
}

/* Utilidades*/
.seccion {
	margin-top:2rem;
	margin-bottom: 2rem;
}

/*Header*/

.form-group{
	margin:0 1.5rem;
	position: absolute;
    right: 3%;
    top: 75px;
}

@media (min-width:768px){
	.form-group{
		position: relative;
		right: 0;
		top: 0;
	}
}

.site-header.index {
	background-image: url(../images/background.png);  	/*ingresar una imagen background*/
	background-position: center center;			/*centrar la imagen(desde el centro)*/
	background-size:cover;						/*reduce el tamaño de la imagen*/
	height: auto;                   		
	min-height: 60rem;				     		/*la altura minima de la pantalla*/
	padding-bottom: 1rem;
}

.site-header.inicio {
	background-position: center center;			/*centrar la imagen(desde el centro)*/
	background-size:cover;						/*reduce el tamaño de la imagen*/
	height: 100%;                      		
	min-height: 60rem;				     		/*la altura minima de la pantalla*/
}

@media (min-width:1024px){
	.site-header.index {
		height: 100vh;          
	}
}

@media (min-width:2220px){
	.site-header.index {
		height: auto;           
	}
}
/* @media (min-width:1200px){
	.site-header.inicio {
		height: 100vh;         
	}
} */
.contenido-header{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}
.derecha {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 80%;
}

@media (min-width:768px){
	.derecha {
		display: flex;	
		flex-direction: row;
		width: auto;
	}
}

.barra {
	display:flex;
	flex-direction:column;		
	align-items: center;					
	padding-top: 0.5rem;
	cursor: pointer;	
	min-height: auto;					
}
@media (min-width:768px){
	.barra {
		flex-direction: row;
		justify-content: space-between;		
	}
}

.logo {
	width: 25rem;
}
@media (min-width:768px){
	.logo {
		width: 17rem;
	}
}
@media (min-width:1024px){
	.logo {
		width: 25rem;
	}
}
@media (min-width:1200px){
	.logo {
		width: 22rem;
	}
}
@media (min-width:1700px){
	.logo {
		width: 26rem;
	}
}

/*Navegacion  */
.navegacion {
	visibility: hidden;
	opacity: 0;
	transition: visibility .3s ease-in-out, opacity 0.5s linear;
}

.navegacion a {
	display:flex;
	flex-direction:column;		
	align-items: center;
	color:var(--blanco);
	text-decoration:none;				
	font-size:1.8rem;
	/* font-weight:var(--semibold); */
	padding:0.2rem 4rem;					
	border: none;
	border-radius: 1rem;
}
@media (min-width:768px){

	.navegacion a{
		padding:0.2rem 3rem;
		margin-right:2rem;

		font-size:2.1rem;
	}
	/* .btn-login {
		border: 2.5px solid var(--moradoClaro)!important;
		
	} */
}
@media (min-width:768px){

	.navegacion {
	display: flex;
	opacity: 1;
	visibility: visible;
	}
}
.navegacion a:hover {						/*color al hover*/
	background-color: hsla(271, 100%, 66%, 0.712);
	border-color: var(--botones);
	color: var(--blanco);
}

.navegacion a:last-of-type {				/*le quita la margen al ultimo objeto*/
	margin:0;
}
.btn-register {
	background-color: var(--botones);
	margin-left: 2rem !important;
}
.btn-login {
	border: 2.5px solid var(--moradoClaro) !important;
	
}
/** Menu hamburguesa */

.barras {
	width: 3.2rem;
	margin-bottom: 2rem;
}

@media (min-width:768px){

	.mobile-menu {
		display: none;
	}
}
.mostrar {
	visibility: visible;
	opacity: 1;
	width: 80%;
    border-radius: 1rem;
	background-color: rgba(255, 255, 255, 0.7) !important;
	padding: 0.5rem 1rem;
	margin-bottom: 1rem;
	z-index: 3;
}
.mostrar a{	
	color: var(--verde);
	font-size: 1.6rem;
}



@media (min-width:768px){
	.navegacion {
	visibility: visible;
	opacity: 1;
	}
}
/*-----------------------DROPDOWN IDIOMAS-------------------------------*/
.dropbtn {
	
	width: 5rem;
	color: var(--blanco);
	/* border: none; */
	cursor: pointer;	
  }
@media (min-width:768px){

	.dropbtn {
		margin-top: 1rem;
		/* margin-left: 1.5rem; */
		/* margin-right: 3rem; */
	}
}
.bajar {
	margin-top: -12rem; 
}
  .dropdown {
	position: relative;
	display: inline-block;
  }
  @media (min-width:768px){

	.dropdown {
		margin-top: 0;
	}
}
  .dropdown-content {
	display: none;
	position: absolute;
	background-color: rgba(255, 255, 255, 0.3) !important;
	border-radius: 1rem;
	min-width: 400px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 11;
	left:-200%;
  }
  @media (min-width:768px){
	.dropdown-content {	
		/* background-color: rgba(255, 255, 255, 0.7) !important;	 */
		/* left: -100% !important; */
		/* right: auto !important; */
		text-align: center !important;
		/* transform: translate(15%, 0) !important; */
		min-width: 200px;
	}
	.dropdown-content a {
		min-width: 180px;
	  }
}
  
  .dropdown-content a {
	/* color: var(--morado); */
	color: var(--azulOscuro);

	padding: 4px;
	font-size: 1.7rem;
	text-decoration: none;
	text-align: center;
	display: block;
	width: 90%;
	margin: 0 auto;
  }

  @media (min-width:768px){
	.dropdown-content a {
		width: 140px;
	  }
  }
  
  .dropdown-content a:hover {
	background-color: hsla(271, 100%, 66%, 0.712);
	color: var(--blanco);
	border-radius: 1rem;
	}
  @media (min-width:768px){
	.dropdown:hover .dropdown-content {
		display: block;
		z-index: 11;
	  }
}
.mostrar2 {
	display: block;
}

/* ----------------------header no nav-------------------------- */
/* header no nav */
.compus {
	display: inline-block;
	width: 100%;
	margin-top: -2rem;
	margin-left: -1.5rem;
}
@media (min-width:480px){
	.compus {
		display: inline-block;
		 width: 100%;
	}
 }
 /* @media (min-width:768px){
	.compus {
		display: inline-block;
		 width: 100%;
		margin-top: -10rem; 
		margin-left: -10rem;
	}
 } */
 @media (min-width:1024px){
	.compus {
		display: inline-block;
		width: 111%;
		margin-top: -4rem; 
		margin-left: -3.7rem;

	}
 }
 @media (min-width:1200px){
	.compus {
		display: inline-block;
		width: 119%;
		margin-top: -10rem; 
		margin-left: -10rem;

	}
 }
 @media (min-width:1550px){
	.compus {
		 width: 100%;
	}
 }
 @media (min-width:1700px){
	.compus {
		display: inline-block;
		 /* width: 131%; */
		width: 140%;
		margin-top: -9rem; 
		margin-left: -26rem;
	}
 }

/* .bajar2 {
	margin-top: 25rem;
} */
.slogan-div {
	color: var(--blanco);
}
@media (min-width:1024px){
	.slogan-div {
		margin-top: -8rem;
	  }
}
br { 
	display: none; 
}
@media (min-width:1024px){
	.slogan span {
		display: block;
	  }
	  br { 
		display: block; 
	}
}
.slogan {
	font-weight:var(--bold);
	font-size: 2.8rem;
	line-height: 1.3;
	margin-top: -4rem;
	text-align: center;
}
@media (min-width:768px){
	.slogan {
		font-size: 3.6rem;
		margin-bottom: 1.5rem;
		margin-top: -5rem;
	}
} 

@media (min-width:1024px){
	.slogan {
		text-align: left;
		font-size: 4rem;
		margin-top: 3.5rem;
		margin-bottom: 1.5rem;
	}
}
/* @media (min-width:1200px){
	.slogan {
		margin-top: 4rem;
	}
} */
@media (min-width:1700px){
	.slogan {
		font-size: 4.8rem;
		margin-top: -16rem;
	}
}
.header-texto-div {
	margin-top: 7rem;
}
/* @media (min-width:768px){
	.header-texto-div  {
		margin-top: 0rem;
	}
} */
@media (min-width:1200px){
	.header-texto-div  {
		margin-top: 1rem;
	}
 }

.header-texto {
	font-weight:var(--normal);
	font-size: 2.2rem;
	margin-top: -5rem;
	line-height: 1.4;
	text-align: center;
	width:100%;
}
/* @media (min-width:768px){
	.header-texto {
		text-align: left;
		margin-top: -1rem;
		margin-bottom: 0;
	}
} */
@media (min-width:1024px){
	.header-texto {
		text-align: left;
		font-size: 1.9rem;
		margin-top: -1rem;
		margin-bottom: 0;
		width:70%;
	}
}
@media (min-width:1700px){
	.header-texto {
		font-size: 2.2rem;
	}
}
.boton {
	width: 80%;
	color:var(--blanco);
	text-decoration:none;
	font-size:2rem;
	display: block;
	/* margin-top: 1.5rem; */
	text-align:center;
	border: none;
	font-weight:var(--semibold);	
	border-radius: 1rem;
	margin: 5rem auto;
	cursor: pointer;
	background-color: var(--botones);
	padding:1.5rem;
	margin-top: 1rem;
}
@media (min-width:1024px){
	.boton {
		/* width: 150%; */
		width: 350px;
		display: inline-block;
		margin: 0 auto;
	}
}
/* @media (min-width:768px){
	.botones {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: -4rem;
	}
} */
@media (min-width:1024px){
	.botones {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: -3rem;
	}
}
@media (min-width:1700px){
	.botones {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: -2rem;
	}
}
.boton1 {
	background-color: var(--botones);
	padding:2rem;
	margin-top: 1rem;
}
@media (min-width:1024px){
	.boton1 {
		margin-top: 1rem;
		width: 30rem;
		padding: 1.5rem 0;
	}
}
.ibm {
	width: 35%;
	display: block;
	margin: 4rem auto 2.5rem auto;
}
@media (min-width:768px){
	.ibm {
		width: 30%;
	}
}
@media (min-width:1024px){
	.ibm {
		display: inline-block;
		width: 20rem;
		margin-top: 0;
		margin-bottom: 0;
	}
}
@media (min-width:1024px){
	.ibm {
		margin-top: 1.8rem;
		margin-left: 6rem;
	}
}
@media (min-width:1700px){
	.ibm {
		margin-top: 0;
		margin-left: -35rem;
	}
}

/*---------------------------formulario---------------*/

.campos{
	display: block; 
	margin: 0 auto;
	width: 80%;
	background-color: transparent;
	margin-top: 1.5rem;
	font-size: 1.4rem;
	/* color: var(--blanco); */
	color: var(--moradoClaro);
	border: none;
	/* border: 2px solid var(--blanco); */
	border: 2.5px solid var(--moradoClaro);
	border-radius: 1rem;
	padding: 1.5rem 1rem;
}	
.campos2 option, .campos2 option{
	background-color: var(--color6) !important;
}

.campos2{
	display: block; 
	margin: 0 auto;
	width: 80%;
	background-color: transparent;
	font-size: 1.4rem;
	color: var(--blanco);
	border: none;
	border: 1px solid var(--blanco);
	border-radius: 1rem;
	padding: 1.5rem 1rem;
	position: relative;
}

.campos:focus{
	outline: none !important;
	font-weight:var(--bold);
    border: 3px solid rgba(240, 231, 231, 0.836);
}

.campos2:focus{
	outline: none !important;
	font-weight:var(--bold);
    border: 3px solid rgba(240, 231, 231, 0.836);
}

.campos:-webkit-autofill,
.campos:-webkit-autofill:hover, 
.campos:-webkit-autofill:focus, 
.campos:-webkit-autofill:active{
	background-clip: text;
    -webkit-background-clip: text;
	-webkit-text-fill-color:var(--blanco) !important;
	font-family: var(--fuentePri) !important;
}

.campos2:-webkit-autofill,
.campos2:-webkit-autofill:hover, 
.campos2:-webkit-autofill:focus, 
.campos2:-webkit-autofill:active{
	background-clip: text;
    -webkit-background-clip: text;
	-webkit-text-fill-color:var(--blanco) !important;
	font-family: var(--fuentePri) !important;
}

.campos[type=number]::-webkit-inner-spin-button, .campos[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.campos2[type=number]::-webkit-inner-spin-button, .campos2[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.campos[type=number] {
	-moz-appearance:textfield;
}

.campos2[type=number] {
	-moz-appearance:textfield;
}

.campos::placeholder{
	color: var(--blanco);
}

.campos2::placeholder{
	color: var(--blanco);
}


.field-label{
	display: block; 
	margin: 0 auto;
	width: 80%;
	background-color: transparent;
	font-size: 1.6rem;
	color: var(--blanco);
	border: none;
	padding: 0.5rem 1rem;
}

@media (min-width:1024px){
	.campos {
		margin-top: 2rem;
		font-size: 2rem;
	}
}
@media (min-width:1200px){
	.campos {
		margin-top: 3rem;
	}
}
@media (min-width:1700px){
	.campos {
		margin-top: 4rem;
	}
}

.botonlogin{
	/* background-color: var(--botones); */
	background-color: var(--color7);
	padding:2rem;
	display: block;
    margin: 3rem auto 1rem auto;
	width: 80%;
	color: var(--blanco);
    text-decoration: none;
    font-size: 2rem;
	text-align: center;
    border: none;
    font-weight: var(--semibold);
    border-radius: 1rem;
	cursor: pointer;
}

.mitad{
	width: 100%;
}
.promotion {
	display: block;
	width: 65%;
	margin-left: auto;
	margin-right: auto;
	margin-top: -3rem;
	margin-bottom: -3.5rem;

}
@media (min-width:480px){
	.promotion {
		width: 40%;
	}
 }

@media (min-width:1024px){
	.promotion {
		width: 100%;
		display: block;
		margin: 35rem 0 0 -1.5rem;
	}
	.mitad{
		width: 25%;
	}
}

 @media (min-width:1400px){
	.promotion {
		width: 80%;
		margin: 30rem 0 0 -0.5rem;

	}
}

@media (min-width:1700px){
	.promotion {
		width: 96%;
		margin: 15rem 0 0 -0.5rem;
	}
	.mitad{
		width: 15%;
	}

}

.formulario ::placeholder{
	color: #b7bbe4e3;
	/* color: var(--letraGris); */
	/* color: var(--moradoClaro); */
	/* color: #cdd1ffbc; */
	/* color: var(--rayita);  */
	/* color: #989cd4b6; */
	font-size: 1.8rem;
	text-align: center;
	padding: 2.5rem 1rem;
}

.formulario p {
	width: 80%;
	margin: 0 auto;
	color: var(--blanco);
	font-size: 1.2rem;
	font-weight:var(--normal);
	margin-top: 1rem;
	line-height: 1.4;
}
.formulario a {
	text-decoration: none;
	color: var(--blanco);
	font-weight: var(--semibold);
}
.formulario p .check {
	margin-right: 0.5rem;
}
.formulario button {
	display: inline-block;
	color: var(--blanco);
	font-weight:var(--semibold);
	font-size:1.5rem;
	margin-top: 1.5rem;
	text-align:center;
	border: none;
	border-radius: 1rem;

	padding:1.6rem 3rem;
	cursor: pointer;
}
@media (min-width:480px){
	.formulario button {
		padding:1.6rem 6rem;
	}
 }
 @media (min-width:768px){
	.formulario button {
		padding:1.6rem 9rem;
	}
 }
 @media (min-width:1024px){
	.formulario button {
		padding:1.6rem 2rem;
	}
 }
 @media (min-width:1200px){
	.formulario button {
		padding:1.6rem 6rem;
	}
 }
.formulario .btn-fb {
	background-color: #3B5998;
}
.formulario .btn-gg {
	background-color: var(--blanco);
	color: var(--casiNegro);
}
.botones-fgp {
	display: flex;	
	justify-content: space-between;
	margin: 0 auto;
	width: 80%;
	gap: 1rem;
}

.botones-fgh{
	width: 50%;
	padding: 1.4rem 3rem !important;
}
.login-icon{
	margin-right: 15%;
	font-size: 2rem !important;
}

@media (min-width:1024px){
	.botones-fgp {
		display: flex;
		flex-direction: column;	
		justify-content: space-between;
		margin: 0 auto;
		width: 80%;
		gap: 0rem;
	}

	.botones-fgh{
		width: 100%;
		padding: 1.4rem 3rem !important;
	}
 }

 @media (min-width:1400px){
	.botones-fgp {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0 auto;
		width: 80%;
		gap: 1rem;
	}
	
	.botones-fgh{
		width: 50%;
		padding: 1.4rem 3rem !important;
		font-size: 1.6rem !important;
	}
	.login-icon{
		font-size: 2.2rem !important;
	}
 }

.btn-regist {
	background-color: var(--azulOscuro);
	/* background-color: #4361EE; */
	display: block; 
	margin: 0 auto;
   width: 80%;
   margin-top: 1.5rem;
   font-size: 1.4rem;
   color: var(--blanco);
   border: none;
   border-radius: 1rem;
   padding: 1rem;
   cursor: pointer;
   text-align: center;
}
@media (min-width:1024px){
	.papa-header {
		display: flex;	
		justify-content: space-between;
	}
	.izquierda2 {
		margin-left: 0;
		width: 50%;
	}	
	.derecha2 { 	
		margin-top: 4.3rem;
		margin-right: 0;
		margin-left: 0;
	}
	.btn-regist {
	   font-size: 2rem;
	}
 }
 @media (min-width:1200px){
	.izquierda2 {
		margin-left: 2rem;
	}	
	.derecha2 { 	
		margin-top: 3.5rem;
	}
 }
 @media (min-width:1550px){	
	.derecha2 { 	
		margin-top: 4.3rem;
	}
 }
 @media (min-width:1700px){
	.izquierda2 {
		margin-left: 10rem;
		width: 50%;
	}	
	.derecha2 { 	
		margin-top: 7.5rem;
		margin-right: 2rem;
		margin-left: 0rem;
	}
 }
/*---------------------------main---------------*/
.contenedor-main {
	max-width: 125rem;     
	width: 90%;
	margin: 0 auto;	
	text-align: center;	
	line-height: 1.3;

}
@media (min-width:1700px){
	.contenedor-main {
		max-width: 142rem;
	}
}
main h2 {
	color: #2F1B72;
	margin-top: 3rem;
	font-size: 2.8rem;	
}
@media (min-width:1024px){
	main h2 {
		padding: 0 20rem;
		margin-top: 7rem;
		font-size: 3.4rem;
	}

}
main p {
	font-size: 2rem;
	color: #757575;
}
@media (min-width:1024px){
	main p {
		/* padding: 0 21rem; */
		margin-bottom: 3rem;
	}
}

.div-niveles {
	margin-bottom: 2rem;
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.div-niveles img {
	width: auto;
	height: 8rem;
	margin-bottom: 1.5rem;
}

main h3 {
	margin-bottom: 0;
	color: #2f1b72;
	font-size: 2.2rem;
}
.niveles p {
	color: #AA52FF;
	font-size: 1.8rem;
	width: 75%;
}
@media (min-width:1024px){
	.niveles p {
		padding: 0 4rem;
		width: 100%;
	}
	main h3{
		font-size: 3rem;
	}
}
@media (min-width:1200px){
	.niveles p {
		padding: 0 7rem;
		font-size: 2.2rem;
	}
}
@media (min-width:1024px){
	.niveles {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		align-items: flex-start;
	}
	.div-niveles img {
		width: auto;
		height: 15rem;
		margin-bottom: 3rem;
	}
}
/* @media (min-width:1700px){
	main h3 {
		max-width: 650px;
	}
} */

/*---------------------------tablero---------------*/
.div-tablero {
	background-color: rgba(196, 183, 221, 0.993);
	margin-top: 4rem;
}
@media (min-width:1200px){
	.div-tablero {
		display: grid;
		grid-template-columns: 50% 50%;
	}
}
.tablero {
	width: 100%;
}
/* @media (min-width:1024px){
	.tablero {
		width: 76rem;
	}
} */


@media (min-width:1200px){
	.sub-div-tablero {
		margin-left: 8rem;
		margin-top: 9rem;
	}
}
@media (min-width:1700px){
	.sub-div-tablero {
		margin-left: 9rem;
		margin-top: 12rem;
	}
}
.div-tablero h3 {
	color: #AA52FF;
	text-align: center;
	width: 80%;
	margin: 2rem auto 0 auto;
	font-size: 2.6rem;
	line-height: 1.3;
}
@media (min-width:1200px){
	.div-tablero h3 {
		font-size: 3.5rem;
		text-align: left;
		margin: 0;
		line-height: 1.3;
	}
}
@media (min-width:1700px){
	.div-tablero h3 {
		font-size: 5rem;
		width: 73%;
	}
}
.div-tablero p{
	font-size: 1.5rem;
	text-align: center;
	width: 90%;
	margin: 0 auto;
	line-height: 1.5;
	padding: 2rem;
	color: #757575;
}
@media (min-width:1024px){
	.div-tablero p {
		font-size: 2rem;
	}
}
@media (min-width:1200px){
	.div-tablero p {
		font-size: 2rem;
		text-align: left;
		margin: 0;
		line-height: 1.3;	
		padding: 2.5rem 0;
	}
}
@media (min-width:1700px){
	.div-tablero p {
		width: 68%;
	}
}
/*---------------------------velocidades---------------*/
.div-velocidades {
	margin-top: 4rem;
}
@media (min-width:1200px){
	.div-velocidades {
		display: grid;
		grid-template-columns: 50% 50%;
		margin-top: 7rem;
	}
}
.velocidad {
	width: 100%;
}
/* @media (min-width:1200px){
	.velocidad {
		width: 97rem;
	}
} */
@media (min-width:1200px){
	.sub-div-velocidades {
		margin-left: 12rem;
		margin-right: 1.5rem;
	}
}
@media (min-width:1700px){
	.sub-div-velocidades {
		margin-left: 32rem;
		margin-right: 1.5rem;
	}
}
.div-velocidades h3 {
	color: #AA52FF;
	text-align: center;
	font-size: 2.6rem;
	width: 80%;
	margin: 2rem auto 0 auto;
	line-height: 1.3;
}
@media (min-width:1200px){
	.div-velocidades h3 {
		font-size: 3.5rem;
		text-align: left;
		margin: 0;
		line-height: 1.3;
	}
}
@media (min-width:1700px){
	.div-velocidades h3 {
		font-size: 5rem;
		width: 76%;
	}
}
.div-velocidades p{
	font-size: 1.5rem;
	text-align: center;
	width: 90%;
	margin: 0 auto;
	line-height: 1.5;
	padding: 2rem;
	color: #757575;
}
@media (min-width:1024px){
	.div-velocidades p {
		font-size: 2rem;
	}
}
@media (min-width:1200px){
	.div-velocidades p {
		text-align: left;
		margin: 0;
		line-height: 1.3;	
		padding: 2.5rem 0;
	}
}
@media (min-width:1700px){
	.div-velocidades p {
		width: 69%;
	}
}

/* ------------------------------ chicos --------------------- */

.div-chicos{
	background-image: url('../images/chicos.jpg');
	background-position: right;
	background-size: cover;
}

.sub-div-chicos{
	width: 80%;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 7rem 0;
	text-align: center;
}

.sub-div-chicos h3{
	color: var(--celeste);
	font-size: 3rem;
	line-height: 1.2;
}

.sub-div-chicos p{
	color: var(--blanco);
	font-size: 1.8rem;
	line-height: 1.2;
	padding-bottom: 1.5rem;
}

@media (min-width:768px){
	.div-chicos{
		background-position: center;
	}
	.sub-div-chicos{
		padding: 10rem 0;
	}
	
	.sub-div-chicos h3{
		font-size: 4rem;
	}
	
	.sub-div-chicos p{
		padding-bottom: 1.7rem;
	}
}

@media (min-width:1200px){
	.sub-div-chicos{
		width: 70%;
		padding: 15rem 0;
	}
	
	.sub-div-chicos h3{
		font-size: 5rem;
		line-height: 1.3;
	}
	
	.sub-div-chicos p{
		font-size: 2.2rem;
		line-height: 1.5;
		padding-bottom: 2rem;
	}
}

/* ------------------------------ familia --------------------- */

.div-familia {
	background-color: var(--moradoPale);
	margin-top: 7rem;
}
.div-familia img{
	width: 100%;
	border-radius: 45% 0 0 0;
}


@media (min-width:1200px){
	.div-familia {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
	.div-familia img{
		height: auto;
	}
}

.sub-div-familia{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 5rem;
	text-align: center;
}

.div-familia h3 {
	color: var(--moradoClaro);
	line-height: 1.3;
	font-size: 3.2rem;
}

.div-familia p{
	font-size: 2rem;
	line-height: 1.3;
	color: var(--gris);
}

@media (min-width:1200px){
	.sub-div-familia{
		text-align: left;
	}

	.div-familia h3 {
		font-size: 4rem;
	}
	
	.div-familia p{
		font-size: 2.3rem;
	}
}

@media (min-width:1400px){
	.div-familia h3 {
		line-height: 1.3;
		font-size: 4.5rem;
	}
	
	.div-familia p{
		font-size: 2.5rem;
		line-height: 1.3;
	}
}

/* ------------------------------ chica --------------------- */

.div-chica {
	margin: 3rem 0;
	align-items: center;
}

@media (min-width:1200px){
	.div-chica {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		margin: 7rem 0;
	}
}

.sub-div-chica{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 5rem;
	text-align: center;
}

.chica {
	width: 100%;
	border-radius: 0 0 0 50%;
}

.div-chica h3 {
	color: var(--moradoClaro);
	line-height: 1.3;
	font-size: 3.2rem;
}

.div-chica p{
	font-size: 2rem;
	line-height: 1.3;
	color: var(--gris);
}

@media (min-width:1200px){
	.sub-div-chica{
		text-align: left;
	}

	.div-chica h3 {
		font-size: 4rem;
	}
	
	.div-chica p{
		font-size: 2.3rem;
	}
}

@media (min-width:1400px){
	.div-chica h3 {
		line-height: 1.3;
		font-size: 4.5rem;
	}
	
	.div-chica p{
		font-size: 2.5rem;
		line-height: 1.3;
	}
}


/* ------------------------------ consola --------------------- */
.consola {
	background-color: var(--grisOscuro);
	height: auto;
	padding-bottom: 2rem;
}

.contenedor-iconos {
	width: 80%;
	margin: 0 auto 2rem auto;
}


@media (min-width:1024px){
	.contenedor-iconos {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
 }
 @media (min-width:1700px){
	.contenedor-iconos {
		width: 80%;
	}
 }
@media (min-width:1024px){
	.icono-4 {
		margin: 5rem auto 0 auto;
		display: grid;
		/* grid-template-columns: 25% 25% 25% 25%; */
		grid-template-columns: repeat(4, 1fr);
		
		column-gap: 2rem;
		row-gap: 2rem;
		align-items: baseline;
	}
 }
 @media (min-width:1024px){
	.icono-3 {
		width: 70%;
		margin: 5rem auto 0 auto;
		display: grid;
		/* grid-template-columns: 33.3% 33.3% 33.3%; */
		grid-template-columns: repeat(3, 1fr);
		column-gap: 2rem;
		align-items: baseline;
	}
 }
 @media (min-width:1024px){
	.icono-3 {
		margin-bottom: 7rem;
	}
 }
.consola-iconos img{
	display: block;
	/* width: 17%; */
	width: 20%;
	max-width: 84px;
	/* width: 6.2rem; */
	/* height: 6.2rem; */
	margin: 0 auto;	
}


@media (min-width:768px){
	.consola-iconos img {
		/* width: 20%; */
		width: 12%;
		/* max-width: 100px; */
	}
 }
@media (min-width:1024px){
	.consola-iconos img{
		width: 30%;
		max-width:75px ;
	}
 } 
 /* @media (min-width:1550px){
	.consola-iconos img{
		width: 20%;		
	}
 }  */
 @media (min-width:1700px){
	.consola-iconos img{
		width: 32%;		
	}
 } 
.consola h3 {
	/* color: #00A8EB; */
	color: var(--azulClaro);
	text-align: center;
	line-height: 1.3;
	padding-top: 3.2rem;
	/* max-width: 400px; */
	/* max-width: 60%; */
	margin: 0 auto;
	/* padding-bottom: 3rem; */
	/* font-size: 2.4rem; */
}
@media (min-width:1024px){
	.consola h3{
		width: 60%;
		margin: 0 auto;
		padding-top: 0rem;	
	}
 }
 @media (min-width:1200px){
	.consola h3{
		margin: 0 auto;
		width: 68%;	
	}
 }
 @media (min-width:1700px){
	.consola h3{
		width: 65%;	
		font-size: 4rem;
		max-width: 720px;
	}
 }
 .parrafo-consola{
	/* max-width: 400px; */
}
@media (min-width:1024px){
	.parrafo-consola{
		font-size: 2rem;
		width: 60%;
	}
 }
@media (min-width:1700px){
	.parrafo-consola{
		font-size: 4rem;
	}
 }
 .consola P {
	/* color: 	var(--blanco); */
	color: 	var(--moradoClaro);
	font-size: 1.5rem;
	text-align: center;
	line-height: 1.5;
	margin: 2rem auto 2rem auto;
}
/* @media (min-width:1200px){
	.consola p{
		margin: 0 auto;
		width: 68%;	
	}
 } */
/* @media (min-width:1550px){
	.consola P{
		font-size: 1.8rem;
		margin: 0;
	}
 } */
 @media (min-width:1700px){
	.consola p{
		margin: 0 auto;
		width: 48%;	
		max-width: 683px;
		padding-top: 2rem;
	}
 }
 /* ----------------------------- video ---------------------------- */
 .video-promo {
	background-image:linear-gradient(to bottom, var(--grisOscuro) 50%, #6841e6 50%);
	padding: 2rem 0;
 }
 .video {
	border-top-left-radius: 8rem;
	border-bottom-right-radius: 8rem;
	display: block;
	width: 85%;
	margin: 0rem auto 0 auto;
 }

 @media (min-width:768px){
	 .video{
		 width: 45%;
	 }
 }

 .video-promo h3 {
	/* color: #00A8EB; */
	color: var(--azulClaro);
	text-align: center;
	line-height: 1.3;
	padding-top: 3.2rem;
	padding-bottom: 3rem;
	font-size: 2.4rem;
}
@media (min-width:1024px){
	.video-promo h3{
		padding-top: 0rem;
		font-size: 3rem;	
	}
 }
 @media (min-width:1200px){
	.video-promo h3{
		margin: 0 auto;
		width: 68%;	
	}
 }
 @media (min-width:1700px){
	.video-promo h3{
		width: 65%;	
		font-size: 4rem;
	}
 }

 /* -------------------------- precios -------------------------- */
 .precios {
	background-image: linear-gradient(to bottom, #6841e6 25%, #03a9f3);		
	height: auto;
	padding-bottom: 3rem;
 }

 @media (min-width:1200px){
	.precios {
		padding-bottom: 5rem;
	}
}

@media (min-width:1700px){
	.precios {
		padding-bottom: 8rem;
	}
}
 .contenedor-precios {
	width: 80%;
	margin: 0 auto;
 }

 .precios h3 {
	 color: var(--blanco);
	 text-align: center;
	 font-size: 3rem;
	 line-height: 1.3;
	 padding: 1rem 0;
 }


 @media (min-width:1200px){
	.precios h3 {
		font-size: 3rem;  
	}
}

@media (min-width:1700px){
	.precios h3 {
		font-size: 4rem;   
	}
}
 .precios p {
	color: var(--blanco);
	font-size: 1.8rem;	
	line-height: 1.3;
	text-align: center;
	margin-bottom: 3rem;
}
@media (min-width:1200px){
	.precios p {
		font-size: 1.8rem; 
		margin: 0 auto 6rem auto;
	}
}
@media (min-width:1200px){
	.precio-parrafo {
		width: 70%;
	}
}
@media (min-width:1700px){
	.precios p {
		font-size: 2rem; 
		margin: 0 auto 6rem auto;
	}
}

.meses{
	margin: 2rem auto 0 auto;
}

@media (min-width:1024px){
	.meses {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tresmeses, .seismeses, .docemeses {
		flex: 0 0 calc(25% - 2rem);
	}
}
@media (min-width:1200px){
	.meses {
		margin: 4.5rem auto 0 auto;	   
	}
}
@media (min-width:1200px){
	.tresmeses, .seismeses, .docemeses {
		flex: 0 0 calc(25% - 4rem);
	}
}
@media (min-width:1700px){
	.tresmeses, .seismeses, .docemeses {
		flex: 0 0 calc(25% - 6rem);
	}
}

.mes-div {
	background-color: #AA52FF;
	width: 84%;
	margin: 0 auto;
	border-radius: 2rem;
	padding-bottom: 2rem;
	margin-bottom: 3rem;
	flex: 0 0 calc(50% -1rem);
}
/* @media (min-width:1024px){
	.mes-div {
		
	}
} */

.mes-precio {
	
	background-color: var(--blanco);
	border-top-left-radius: 2rem;
	border-top-right-radius: 2rem;	
	padding-top: 2rem;
	padding-bottom: 2rem;
}
.mes-precio p{
	color: #AA52FF;
	line-height: 0.8;
	font-weight:var(--bold);
	margin: 0;
}
.mes-precio .mes {
	margin-bottom: 0.7rem;
}
.mes-precio span {
	font-size: 4rem;
}
.vant {
	text-decoration:line-through;
}
.mes-precio .vant {
	margin-top: 0.7rem;
	margin-right: 2.8rem;
}
.mes-div ul{
	padding-top: 0.5rem;
}
@media (min-width:768px){
	.mes-div ul{
		padding-top: 1.7rem;
		padding-left: 14rem;
	}
}
@media (min-width:1024px){
	.mes-div ul{
		padding-top: 1rem;
		padding-left: 5rem;
	}
}
.mes-div li{
	color: var(--blanco);
	padding-right: 2rem;
	font-weight:var(--normal);
	font-size: 1.5rem;
}
@media (min-width:1200px){
	.mes-div li{
		font-size: 1.8rem;
	}
}
.meses button {
	display: block;
	font-size: 1.4rem;
	background-color: transparent;
	padding: 1rem 4rem;
	margin: 1.3rem auto 0 auto;
	border-radius: 1rem;
	margin-bottom: 1rem;
	color: var(--blanco);
	text-decoration:none;
	border: 1px solid var(--blanco);
	border-radius: 1rem;
	cursor: pointer;
}

/* ----------seismeses------------------- */
.seismes-div {
	background-color: var(--moradoClaro);
	width: 84%;
	margin: 0 auto;
	border-radius: 2rem;
	padding-bottom: 2rem;
	margin-bottom: 3rem;
}
@media (min-width:1024px){
	.seismes-div {
		width: 90%;
		height: 120%;
		
	}
}

.seismes-precio {
	
	background-color: var(--blanco);
	border-top-left-radius: 2rem;
	border-top-right-radius: 2rem;	
	padding-top: 2rem;
	padding-bottom: 2rem;
}
.seismes-precio p{
	color: var(--moradoClaro);
	line-height: 0.8;
	font-weight:var(--bold);
	margin: 0;
}
.seismes-precio .mes {
	margin-bottom: 0.7rem;
}
.seismes-precio span {
	font-size: 4rem;
}
.seismes-precio .vant {
	margin-top: 0.7rem;
	margin-right: 2.8rem;
}
.seismes-div ul{
	padding-top: 0.5rem;
}
@media (min-width:768px){
	.seismes-div ul{
		padding-top: 1.7rem;
		padding-left: 12rem;
	}
}
@media (min-width:1024px){
	.seismes-ul {
		padding-top: 5rem !important;
		padding-left: 7rem;
		margin-top: 2.4rem;
	}
}
.seismes-div li{
	color: var(--blanco);
	padding-right: 2rem;
	font-weight:var(--normal);
	font-size: 1.2rem;
}
.seismesesbgton {
	display: block;
	font-size: 1.2rem;
	background-color: var(--azulOscuro) !important;
	padding: 1rem 4rem;
	margin: 1.3rem auto 0 auto;
	border-radius: 1rem;
	margin-bottom: 1rem;
	color: var(--blanco);
	text-decoration:none;
	border: 1px solid var(--azulOscuro) !important;
	border-radius: 1rem;
	cursor: pointer;
}

/* -----------precio 1024-------- */
@media (min-width:1024px){
	.seismesesbgton {
		margin-top: 7rem !important;
	}
}
/* -------------------------- footer -------------- */
.pie {
	/* background-color: var(--casiNegro); */
	background-color: var(--grisOscuro);

}

 .contenedor-pie {
	margin: 0 auto;
	width: 90%;
	display: flex;
	flex-direction: column;
}
.pie-padre {
	margin: 3rem auto 2rem auto;
}
@media (min-width:768px){
	.contenedor-pie {
		margin: 0 auto;
		width: 70%;
		display: flex;
		flex-direction: column;
	}
	.pie-padre {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
}
@media (min-width:1200px){
	.pie-padre {
		margin-left: -3rem;
	}
}
.pie-hijo {
	color: var(--blanco);
	font-size: 1.3rem;
	font-weight:var(--normal);	
}
.pie-hijo ul{
	text-align: center;
	padding: 0;
}

.pie-hijo li:first-child{
	font-weight: var(--bold);
}
@media (min-width:768px){
	.pie-hijo {
		flex: 0 0 calc(45% - 1rem);
	}

	.pie-hijo ul{
		text-align: left;
		padding-right: 5rem;
	}
}
@media (min-width:1700px){
	.pie-hijo {
		font-size: 1.4rem;
	}
}
 .pie-hijo li {
	list-style: none;
} 
.pie-hijo a {
	color: var(--blanco);
	text-decoration: none;	
} 
.iconos-redes {
	margin: 0 auto;
	width: 100%;
	display: flex;
	justify-content: center;
	height: auto;
	gap:2rem;
}
@media (min-width:768px){
	.iconos-redes {
		justify-content: flex-end;
		gap:2rem;
	}
}

.red-h{
	display: flex;
}
.facebook, .youtube {
	width: 4.5rem;
	margin: auto;
	display: block;
}

@media (min-width:768px){
	.facebook, .youtube {
		width: 5rem;
	}
}

@media (min-width:1200px){
	.facebook, .youtube {
		width: 6rem;
	}
}

.derechos {
	margin-bottom: 2rem;
}
.derechos p{
	text-align: center;
}
.contenedor-pie p {
	color: var(--blanco);
	font-size: 1.2rem;
}
.contenedor-derechos a {
	color: var(--blanco);
	font-size: 1.2rem;
	text-decoration: none;
}
@media (min-width:1700px){
	.contenedor-pie p {
		font-size: 1.4rem;
	}
}

.contenedor-derechos {
	width: 100%;
}

.derechos ul {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
    align-items: center;
	padding: 0;
}

.derechos li {
	font-size: 1.1rem;
	color: var(--blanco);
	list-style: none;
	padding-top: 0.5rem;
}

.derechos a{
	padding: 0;
	margin: 0;
}

@media (min-width:768px){
	.derechos ul {
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	
}

@media (min-width:1700px){
	.derechos li {
		font-size: 1.3rem;
	}
}
/* --------------------------- PRIVACY --------------------- */

.body-back {
    /* background-image: linear-gradient(to top, var(--moradoFondo) 20%, var(--morado)); */
	background: linear-gradient(110.83deg, #383d74 -7.87%, #302b3f 18.99%, #302b3f 72.48%, #395e79 104.48%);
	/* background-color: var(--grisOscuro); */
	font-family: var(--fuentePri);
}

.body-back2 {
	/* background-color: var(--grisOscuro); */
	/* background: linear-gradient(110.83deg, rgba(67, 97, 238, 0.4) -7.87%, rgba(69, 71, 96, 0.4) 18.99%, rgba(48, 43, 63, 0.288) 72.48%, rgba(76, 201, 240, 0.4) 104.48%); */
	background: linear-gradient(110.83deg, #383d74 -7.87%, #302b3f 18.99%, #302b3f 72.48%, #395e79 104.48%);
	font-family: var(--fuentePri);
}

.title1 {
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
	text-transform: capitalize;
	font-weight: 800;
	line-height: 1.2;
	color: var(--verde);
	/* color: var(--moradoClaro); */
	font-size: 4rem;
	padding: 3rem 1.5rem 0 1.5rem;
	margin-bottom: 2rem;
}

.title2{
	display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
	text-transform: capitalize;
	font-weight: 900;
	line-height: 1.2;
	color: var(--cian);
	font-size: 2.6rem;
	padding: 3rem 1.5rem 0 1.5rem;
}
.title-login{
	display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
	text-transform: capitalize;
	font-weight: 900;
	line-height: 1.2;
	font-size: 4rem;
	padding: 3rem 1.5rem 0 1.5rem;
	color: var(--moradoClaro);

}
.login {
	color: var(--verde);
}


/* @media (min-width:768px){
	.title1, .title2{
		font-size: 3.4rem;
		padding: 5rem 1.5rem 0 1.5rem;
	}
}

@media (min-width:1200px){
	.title1, .title2{
		font-size: 4rem;
		padding: 3rem 1.5rem 3rem 1.5rem;
	}
} */

.container-3 {
    margin-top: 5rem;
    margin-bottom: 5rem;
    min-height: 51vh;
    width: 80%;
}
.w-container {
	margin-left: auto;
	margin-right: auto;
    max-width: 125rem !important;
	/* padding: 4rem;
    border-radius: 2rem;
    background: linear-gradient(to top, rgba(170,82,255,0.1) 40% , rgba(80,241,255,0.1)); */
}
.paragraph-5 {
    margin-top: 0;
    margin-bottom: 2.5rem;
    padding-top: 0.5rem;
    padding-bottom: 2.5rem;
    /* color: var(--letraGris); */
	color: var(--letraMorada);
    font-size: 1.8rem;
    font-weight: var(--normal);
    text-align: justify;
    line-height: 1.3;
    border-bottom: 2px solid var(--rayita);
}
.habeasttl {
    color: var(--verde);
	/* color: var(--moradoClaro); */

    font-size: 2.6rem;
    font-weight: var(--semibold);
}

.paragraph-5 a{
	color:var(--verde);
	text-decoration: none;
}
/* ----------------------------CONTACT----------------------- */

.contact {
	width: 50%;
	margin: 3% auto 10% auto;
}
.c-form {
	 width: 100%;
    color: var(--blanco);
}

.c-form a{
	padding: 0.5rem;
}

.c-form label{
	display: block; 
	margin: 0 auto;
	width: 80%;
	background-color: transparent;
	margin-top: 1.5rem;
	font-size: 1.4rem;
	color: var(--blanco);
	border: none;
	padding: 0;
	font-weight: var(--bold);
}

.indicates-required {
    font-size: 1.8rem;
	color: var(--blanco);
    padding-bottom: 1.5rem;
	font-weight: var(--semibold);
    text-transform: capitalize;
	width: 80%;
	margin: auto;
}


.form {
    width: 100%;
    padding-right: 0;
    border: 2px solid #2d2d2d;
    border-radius: 0px 0px 12px 12px;
    font-family: var(--fuenteSec);
}
.w-input, .w-select {
    display: block;
    height: 45px;
    padding: 8px 12px;
    margin-bottom: 5%;
    font-size: 14px;
    line-height: 1.428571429;
    color: var(--blanco);
    background-color: #2d2d2d;
    border: 1px solid #ccc;
    margin-top: -5px;
}
.w-input2, .w-select2 {
    display: block;
    height: 120px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.428571429;
    color: var(--blanco);
    background-color: #2d2d2d;
    border: 1px solid #ccc;
    margin-top: -5px;
}
.savebutton {
    border-radius: 10px;
    padding: 10px 30px;
    font-weight: var(--bold);
}
.w-button {
    display: inline-block;
    background-color: #00f8ff;
    color: #2d2d2d;
    border: 0;
    text-decoration: none;
    cursor: pointer;
	font-size: 150%;
}
/* --------------------------FAQ---------------------- */

img {
    vertical-align: middle;
    display: inline-block;
}
.qsection {
    cursor: pointer;
	display: flex;
    cursor: pointer;
    text-transform: uppercase;
    padding: 15px 0px;
	align-items: center;
}
.qsection h3{
	color: var(--verde);
    font-size: 24px;
    font-weight: var(--bold);
	text-transform: uppercase;
	padding-left: 2rem;
}

.answers{
	display: block;
}

.displayNone{
	display: none;
}

.arrow {
    height: 2.5rem !important;

}

.faq-icon{
	width: 5rem !important;
}

.question{
	color: var(--verde);
	/* color: var(--moradoClaro); */

}
.paragraph-5 span {
    color: var(--verde);
    text-decoration: none;
    font-weight: var(--semibold);
    font-size: 20px;
}
.pagos {
    width: 120px;
    padding: 3px 5px;
}
/* ------------------------------TUTORIALS------------------------ */
.tutoriales {
	width: 70%;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	/* grid-auto-rows: 22rem;
	grid-template-columns: repeat(auto-fill, minmax(35rem, 1fr)); */
	justify-items: center;
	gap: 1rem;
	margin: auto;
	box-sizing: border-box;
}
 @media (min-width:768px){
	.tutoriales {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}
}
@media (min-width:1024px){
	.tutoriales {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width:1200px){
	.tutoriales {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width:1400px){
	.tutoriales {
		grid-template-columns: repeat(4, 1fr);
	}
} 
.claseVideoTutorial {
	z-index:2;
}
.song{
	position:relative;
	width:250px;
	height:200px;
	border-bottom: 1rem solid var(--moradoClaro);
    border-radius: 1rem;
	}

.lightbox{
	position:relative;
	display:block;
	width:250px;
	height:250px;
	margin-right:auto;
	margin-left:auto;
} 
.overlay{
	position:absolute;
	z-index:2;
	width:100%;
	height:100%;
}

.text-block-2{
	position:absolute;
	top:0;
	z-index:3;
	padding:120px 20px;
	font-family: var(--fuenteSec);
	color:	transparent;
	font-size:15px;
	font-weight:var(--semibold);
	text-align:justify;
	width: 100%;
	height:199px
}

.bnpr{
	position:absolute;
	left:30%;
	top:10%;
	margin-left:0;
	z-index:1;	
}
/* -------------------------------LOGIN---------------------- */
.container-login {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	justify-items: center;
	align-items: start;
	margin-top: 5rem;
	margin-bottom: 2rem;
}

.benefits{
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	align-content: center;
	width: 85%;
	gap: 2rem;
	grid-row: 2/3;
}
.benefits .title2{
	font-size: 2.6rem;
}

.container-login h2{
	text-align: center;
	grid-column: 1/2;
	padding-bottom: 2rem;
}

.benefits-p{
	color: var(--blanco);
	display: flex;
    flex-direction: column;
    align-items: center;	
}

.benefits-p p{
	font-size: 1.6rem;
	line-height: 1.3;
	text-align: justify;
	padding: 0 1rem;
}

.benefits-p h3{
	text-align: center;
	line-height: 1.3;
	font-size:2rem;
	/* color: var(--cian); */
	color: var(--verde);
}

.benefits-p img{
	width: 5rem;
	margin: 1rem 0;
}

@media (min-width:1200px){
	.container-login{
		grid-template-columns: repeat(2, 1fr);
	}
	.benefits{
		grid-template-columns: repeat(2, 1fr);
		gap:5rem;
		grid-row: 1/2;
	}
	.benefits .title2{
		font-size: 3.4rem;
		grid-column: 1/3;
	}
	.benefits-p h3{
		font-size: 3rem;
	}
	.benefits-p p{
		font-size: 1.8rem;
	}
	.benefits-p img{
		width: 7rem;
	}
}


.login-form{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-bottom: 5rem;
	background-color: var(--grisMedio);
	border-radius: 1.5rem;
}

.login-form a{
	margin:0;
	padding: 0;
	width: 80%;
}

.w-form {
	width: 100%;
}

.forgot-pass{
	padding: 0;
	margin: 1rem 0;
	text-align: center;
	color: var(--blanco);
	font-size: 1.4rem;
	font-weight: var(--semibold);
	border: 0.1rem solid var(--blanco);
	border-radius: 1rem;
    margin: 0;
}

.forgot-pass p{
	padding: .5rem 2rem;
	margin: 0;
}

/* .forgot-pass:hover{
	background-color: var(--morado);
} */

.heading-5 {
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-top: 3rem;
    text-align: center;
    text-transform: uppercase;
    color: #00f8ff;
    font-size: 3.5rem;
    font-weight: var(--semibold);
}
.login-image {
    display: block;
	width:7.5rem;
	height: 7.5rem;
	margin: 2rem 0;    
    border-radius: 50%;
    background-color: var(--grisOscuro);

	
}

@media (min-width:1200px){
	.login-image{
		width: 10rem;
    	height: 10rem;
		margin: 6rem 0 2rem 0;
	}
}

.sign-up{
	border-radius: 1rem;
	border: none;
	/* background-color: var(--cian); */
	background-color: var(--verde);
	display: block;
	width: 80%;
	margin: 1.5rem 0;
}

.sign-up a{
	display: flex;
	justify-content: center;
    align-items: center;
	margin: auto;
}

.sign-up img{
	width: 4rem;
	height: 4rem;
}

.sign-up a p{
	color: #2d2d2d;
	font-weight: var(--bold);
	font-size: 2rem;
	text-align: center;
	margin: 0;
	padding: 1rem;
}

@media (min-width:1200px){
	.login-form{
		width:70%;
		margin-bottom: 0;
	}
}

/*---------------------------RECOVERY---------------*/
.div-recovery{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 80%;
	min-width: 290px;
	max-width: 650px;
	margin: 2rem auto 5rem auto;
	background-color: #454760;
	margin: 5rem auto 7rem auto;
	border-radius: 1.5rem;
}

.msg-recovery{
	font-size: 1.4rem;
	width: 80%;
	margin: auto;
	line-height: 1.5;
}

.msg-pass{
	font-size: 1.4rem;
	width: 80%;
	margin: 3rem auto 0 auto;
	line-height: 1.5;
}

.botonpass-recovery{
	background-color: var(--color7);
	display: block;
    margin: 3rem auto 5rem auto;
	width: 40%;
	color: var(--blanco);
    text-decoration: none;
    font-size: 2rem;
	text-align: center;
    border: none;
    font-weight: var(--semibold);
    border-radius: 1rem;
	cursor: pointer;
	padding: 0.5rem;
}
/* 
@media (min-width:1200px){
	.div-recovery{
		background-color: #454760;
		width: 34%;
		margin: 2rem auto 5rem auto;
		border-radius: 1.5rem;

	}
	
	.msg-recovery{
		font-size: 1.8rem;
		width: 50%;
	}

	.msg-pass{
		font-size: 1.8rem;
	}
} */

/*Inicio Songs-noLogin*/

.body-songs{
	font-family: 'Poppins', sans-serif;
}

.songs-module{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	justify-items: center;
	padding: 5rem 0;
	background-color: var(--color6);
}

.div-election{
	grid-row: 2/3;
}


@media (min-width:768px){
	.songs-module{
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-items: flex-start;
		padding: 3.5rem 0;
	}
	.div-songs{
		grid-column: 1/3;
	}
	
	.div-election{
		grid-column: 2/3;
		grid-row: 1/2;
		padding-top: 5rem !important;
	}
}

@media (min-width:1450px){
	.songs-module{
		display: grid;
		grid-template-columns: 1fr 3fr 1fr;
		justify-items: flex-start;
		padding: 5rem 0;
	}
	.div-songs{
		grid-column: 2/3;
		grid-row: 1/2;
	}
	
	.div-election{
		grid-column: 3/4;
	}
}

.inner-mod{
	margin: auto;
	padding: 1rem 2rem;
	height: 100%;
}

.welcome-mod{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var(--blanco);
}

.welcome-mod h4{
	margin: 0.5rem auto;
	font-size: 3.4rem;
	line-height: 1.2;
	margin-bottom: 3rem;
}

.boton-last-song{
	width: 100%;
	margin: auto;
	background-color: var(--color4);
	color: var(--blanco);
	padding: 1rem;
	margin-bottom: 3rem;
	border-radius: 1rem;
	font-size: 1.8rem;
	text-align: center;
	font-weight: var(--semibold);
	line-height: 1;
}

.filter-mod{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.filtros{
	display: flex;	
	margin: 0.5rem 0;
}

.filtros input[type=text]{
	background-color: var(--blanco);
	border: 1px solid transparent;
	padding: 1rem;
	color: var(--grisOscuro) !important;
	font-size: 1.8rem;
	border: 0.3rem solid var(--blanco);
	border-radius: 1rem 0 0 1rem;
}

.filtros input[type=text]::placeholder{
	color: var(--gris);
}

.filtros input[type=text]:focus{
	outline: none !important;
	/* font-weight:var(--bold); */
	padding: 1rem 0.2rem;
}

.buscador{
	background-color: var(--color7);
	border-radius: 0 1rem 1rem 0;
	margin: 0;
	font-size: 1.6rem;
	font-family: var(--fuentePri);
	border: 0.3rem solid var(--color7);
	color: var(--blanco);
	cursor: pointer;
	font-weight: var(--semibold);
}

.buscador:hover{
	background-color: var(--color3);
	color: var(--blanco);
	border: 0.3rem solid var(--color3);
	font-weight: var(--semibold);
}

.filtros-grid{
	display: flex;
	/* grid-template-columns: repeat(2, 1fr);*/
	gap: 0.5rem; 
	width: 100%;
	align-items: center;
	justify-content: center;
}

.filtros-genre{
	width: 100%;
}

.filtros-genre p{
	color:#cdd2ff;
	font-size: 2rem;
	margin: 0;
	padding: 0;
}

.filtros-cat{
	padding: 0 1rem;
	font-family: var(--fuentePri);
	cursor: pointer;
	background-color: var(--color7);
	border-radius: 0.5rem;
	width: 100%;
	height: 3.6rem;
	margin: 0.5rem auto;
	text-align: center;
}

.filtros-cat:hover, .filtros-cat:active{
	background-color: var(--color3);
}

.btn-filtro{
	color: var(--blanco);
	font-size: 1.8rem;
	padding: 0;
	width: 100%;
	text-align: center;
}
.filtros-cat button{
	width: 100%;
	background-color: transparent !important;
	border: none;
	color: var(--blanco);
	font-family: var(--fuentePri);
	font-size: 1.8rem;
	cursor: pointer;
	padding: 1rem 0;
}

.dropup{
	position: relative;
}

.dropup .dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: 0;
    border-right: .3em solid transparent;
    border-bottom: .3em solid;
    border-left: .3em solid transparent;
}

.dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
	color: var(--blanco);
	font-size: 1.8rem;
}

.dropdown-menu.show{
	position: absolute;
    transform: translate3d(-6px, -204px, 0px);
    top: 0px;
    left: 0px;
    will-change: transform;
	display: block;
	background-color: rgba(255, 255, 255, 0.8);
    height: auto;
	max-height: 25rem;
    overflow-y: auto;
	overflow-x: hidden;
	text-align: center;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin:  0;
    font-size: 1rem;
    color: var(--verde);
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
}

.show{
	display: flex !important;
	flex-direction: column;
	width: 100%;
	border-radius: 1rem;
}

.dropdown-item{
	color: var(--verde);
	font-size: 1.4rem;
	font-weight: var(--semibold);
	margin: 0.2rem auto;
	width: 100%;
}

.dropdown-item:hover{
	color: var(--blanco);
	background-color: var(--botones);
	border-radius: 0.5rem;
}

.div-songs{
	width: 90%;
	padding: 1rem;
}

@media (min-width:1395px){
	.div-songs{
		width: 100%;
	}
}

.bloque-filtros{
	display: flex;
	gap: 1.5rem;
}

.botonDeFiltro{
	text-align: center;
    background-color: var(--color3);
    border: 1rem solid var(--color3);
    border-radius: 3px;
    color: var(--blanco);
    padding: 0 3rem;
	font-size: 1.4rem;
    margin-right: 2rem;
	width: fit-content;
	font-weight: var(--semibold);
	line-height: 1;
	cursor: pointer;
}

.playlist{
	height: calc(100vh - 33rem);
	overflow-y: auto;
	width: 100%;
	margin-top: 3rem;
}

.playlist table{
	background-color: #fff;
	width: 100%;
	font-size: 1.2rem;
	border-collapse: collapse;
}

.playlist table tr{
	background-color: #cdd2ff;
}

.playlist table td{
	padding: 0.5rem 1rem;
	margin:0;
	text-transform: uppercase;
	color: var(--negro);
	font-weight: var(--bold);
	cursor: pointer;
	font-size:1.4rem;
	border-top: 2px solid #fff;
}

@media (min-width:765px){
	.playlist table td{
		padding: 0.2rem 1.2rem;
	}
}

.fa-play{
	font-size: 2.2rem !important;
}

@media (max-width:465px){
	.playlist table td{
		padding: 0.3rem .3rem;
		display: inline-block;
		width: 100% !important;
		line-height: 1;
	}
}

.temaElejido:hover {
    background-color: var(--color7) !important;
}

.temaElejido:hover p {
    color: var(--blanco) !important;
}

.playlist::-webkit-scrollbar {
    width: 1.5rem;     /* Tamaño de la barra en vertical */
}

/* Ponemos un color de fondo y redondeamos las esquinas del scroll */
.playlist::-webkit-scrollbar-thumb {
    background: var(--color7);
    border-radius: 1rem;
	height: 4rem;
}

/* Cambiamos el fondo del scroll y agregamos una sombra cuando esté en hover */
.playlist::-webkit-scrollbar-thumb:hover, .playlist::-webkit-scrollbar-thumb:active {
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

/* Cambiamos el fondo cuando esté en active */


.playlist::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.7);
    border-radius: 4px;
}

/* Cambiamos el fondo de la barra cuando esté en active o hover */
/* .playlist::-webkit-scrollbar-track:hover,
.playlist::-webkit-scrollbar-track:active {
  background: var(--grisOscuro);
} */

.artistaBox {
    min-height: 15%;
	text-align: center;
	text-transform: uppercase;
	margin-top: 5rem;
}

.contenidoSongs{
	font-size: 1.2rem;
	margin: 0;
}

.contenidoTd{
	font-size: 1rem;
	font-weight: 400;
	margin: 0;
}

@media (min-width:768px){
	.contenidoSongs{
		font-size: 1.8rem;
	}
	.contenidoTd{
		font-size: 1.5rem;
	}
}

.songstittle{
	color: var(--color4);
	line-height: 1.3;
	font-size: 2.6rem;
}

.songsartist{
	color: var(--blanco);
	line-height: 1.2;
	font-size: 2rem;
}

.overlaysongs{
	background-image: url('../images/verticalnegroa.png');
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 230px;
    height: 140px;
    padding-top: 30px;
}

.overlaysongs:hover {
    background-image: url('../images/oversong.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.audios{
	display: flex;
}

.boton-extras{
	padding: 1.5rem;
	text-align: center;
	color: var(--blanco);
	line-height: 1;
	display: block;
	font-size: 1.7rem;
	font-weight: var(--bold);
	margin: 2rem 1.5rem;
	border-radius: 0.5rem;
	cursor: pointer;
}

.boton-extras:first-of-type{
	margin-left: 0;
}

.boton-extras i{
	font-size: 2rem !important;
	padding-left: .7rem;
}

.boton-audios{
	background-color: var(--color7);
}

.boton-tutorial{
	background-color: var(--color4);
}


/*Profile*/
.perfil{
	display: block;
}

@media (min-width:786px){
	.perfil{
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 2rem;
	}
}

.boton-profile{
	background-color: var(--verde);
	display: block;
	margin: 3rem auto;
	width: 80%;
	color: var(--blanco);
	text-decoration: none;
	font-size: 1.4rem;
	text-align: center;
	border: none;
	font-weight: var(--semibold);
	border-radius: 1rem;
	cursor: pointer;
	padding: 1.5rem;
}

.perfil-info, .perfil-foto{
	display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.perfil-info{
	color: var(--blanco);
	font-weight: var(--bold);
	font-size: 1.8rem;
	text-align: center;
}

.perfil-info a{
	color: var(--blanco);
	font-weight: var(--bold);
	text-decoration: none;
}

.profilepic{
	width: 80%;
}

.boton-carga{
	background-color: var(--botones);
	display: block;
	margin: 1.5rem auto;
	width: 100%;
	color: var(--blanco);
	text-decoration: none;
	font-size: 1.4rem;
	text-align: center;
	border: none;
	font-weight: var(--semibold);
	border-radius: 1rem;
	cursor: pointer;
	padding: 1.5rem;
	box-shadow: none;
}

.boton-historial{
	background-color: var(--color1);
	display: block;
	margin: 3rem auto;
	width: 80%;
	color: var(--blanco);
	text-decoration: none;
	font-size: 1.6rem;
	text-align: center;
	border: none;
	font-weight: var(--semibold);
	border-radius: 1rem;
	cursor: pointer;
	padding: 1.5rem;
}

/*Shop 2*/

.plan-elegido{
	margin: 2rem 0 4rem 0;
}

.shopitem{
	width: 50%;
	margin: 0 auto;
	border-collapse: collapse;
}

.shopitem th, .shopitem td{
	padding: 1.5rem 0;
}

.shopitem th{
	font-size: 2.4rem;
	color: var(--blanco);
	font-weight: var(--bold);
	text-transform: uppercase;
	background-color: var(--color4) !important;
	border-radius:1rem 1rem 0 0;
}

.shopitem td{
	font-size: 2.2rem;
	font-weight: var(--bold);
	background-color: var(--color6) !important;
	color: var(--color4);
}

.shopitem td span{
	font-size: 5rem;
	color: var(--blanco);
}

.billing{
	margin-top: 3rem;
}

.billing-form{
	width: 70%;
	margin: 0 auto;
	border: .3rem solid var(--color4);
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem 0;
}

.paytext{
	color: var(--blanco);
	font-size: 1.6rem;
}

.payment{
	width: 70%;
	margin: 0 auto;
	text-align: center;
}

.payment h2{
	color: var(--color4);
}

.text-justify{
	text-align: justify;
}

.payment-info{
	color: var(--blanco);
	font-size: 1.6rem;
}

.form-check{
	margin: 0 auto 2rem auto;
	color: var(--blanco);
	border: 0.1rem solid var(--blanco);
	border-radius: 1rem;
	display: inline-block;
	padding: 0.5rem 1rem;
}

.form-check label{
	padding-left: 1rem;
	font-weight: var(--bold);
	font-size: 1.4rem;
}

.boton-back{
	background-color: var(--botones);
	display: inline-block;
	margin-top: 3rem;
	margin-left: 5%;
	text-decoration: none;
	font-size: 1.6rem;
	text-align: center;
	border: none;
	font-weight: var(--semibold);
	border-radius: 1rem;
	cursor: pointer;
	padding: 1rem 3rem;
}

.boton-back a{
	color: var(--blanco) !important;
}

.modal-dialog{
	width: 80%;
	margin: 0 auto;
}

.modal-title{
	color: var(--color4);
	text-transform: uppercase;
	text-align: center;
}

.fa-spin{
	color:var(--blanco);
}

.text-center{
	color: var(--blanco) !important;
	text-align: center;
}

.check-out{
	display: flex;
	flex-direction: column;
	border: none !important;
	width: 20%;
}

.check-out a{
	display: inline-block;
	color: var(--blanco);
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
	border: 0.1rem solid var(--blanco);
	margin-bottom: 0.7rem;
	border-radius: 1rem;
}

.check-out a:last-of-type{
	margin-top: 1.5rem;
	background-color: var(--botones);
	border: none;
	padding: 0.5rem 0;
}

/* Inicio Swal */
/* Mensajes popup*/
.swal2-popup{
	border:5px solid var(--negro);
	box-shadow:.5rem .5rem .5rem var(--negro);
	border-radius:1.5rem;
	background-color: var(--verde) !important;
	width: 40% !important;
	padding: 3.5rem 1.5rem !important;
	/* background-image: linear-gradient(to top, #6841e6 25%, #03a9f3) !important; */
}

.swal2-title{
	color:var(--cian);
	font-size: 2.4rem;
	font-family:var(--fuentePri);
}

.swal2-content{
	color:var(--blanco);
	font-size: 1.5rem;
}

.swal2-styled.swal2-confirm{
	background-color:var(--cian);
	color: #2d2d2d;
    font-weight: var(--bold);
	border: 1px solid var(--cian);
	font-size: 1.4rem;
}

.swal2-container.swal2-shown{background-color:rgba(0,0,0,.88)}
/* Fin Swal */

.no-margin{
	margin:0
}

/*---------------------------REGISTRO---------------*/
.div-recovery-register{
	background-color: #454760;
	width: 80%;
	min-width: 290px;
	max-width: 650px;
	/* width: 34%; */
	/* width: 340px;
	min-width: 80%; */
	/* max-width: 34rem; */
	margin: 2rem auto 5rem auto;
	border-radius: 1.5rem;

}
.title1-register {
    display: block;
    margin-right: auto;
    margin-left: auto;
	margin-bottom: 4rem;
    text-align: center;
	text-transform: capitalize;
	font-weight: 800;
	line-height: 1.2;
	/* color: var(--morado); */
	color: var(--moradoClaro);
	font-size: 4rem;
	padding: 3rem 1.5rem 0 1.5rem;
}
.formulario-register ::placeholder{
	color: #b7bbe4e3;
	/* color: var(--letraGris); */
	/* color: var(--moradoClaro); */
	/* color: #cdd1ffbc; */
	/* color: var(--rayita);  */
	/* color: #989cd4b6; */
	font-size: 1.8rem;
	text-align: center;
	padding: 2.5rem 1rem;
}
.campos-register{
	display: block; 
	margin: 0 auto;
	/* width: 52%; */
	width: 80%;
	min-width: 225px;
	max-width: 338px;
	background-color: transparent;
	margin-top: 1.5rem;
	font-size: 1.8rem;
	color: var(--moradoClaro);
	border: none;
	/* border: 1px solid var(--blanco); */
	border: 2.5px solid var(--moradoClaro);
	border-radius: 1rem;
	padding: 1rem 1rem;
}
.campos-register:focus{
	outline: none !important;
	/* font-weight:var(--bold); */
    /* border: 2.5px solid rgba(240, 231, 231, 0.836); */
	border: 2.5px solid var(--moradoClaro);
}
.campos-register:-webkit-autofill,
.campos-register:-webkit-autofill:hover, 
.campos-register:-webkit-autofill:focus, 
.campos-register:-webkit-autofill:active{
	background-clip: text;
    -webkit-background-clip: text;
	-webkit-text-fill-color:var(--blanco) !important;
	font-family: var(--fuentePri) !important;
}
.campos-register[type=number]::-webkit-inner-spin-button, .campos[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.campos-register[type=number] {
	-moz-appearance:textfield;
}
/* .campos-register::placeholder{
	color: var(--blanco);
} */
.linea {
	background-color: var(--rayita);
	width: 100%;
	height: 1.5px;
}
.form-register-2 {
	margin-top: 5rem;
}
.botonpass-register {
	background-color: var(--color7);
	display: block;
    margin: 3rem auto 1rem auto;
	width: 40%;
	min-width: 125px;
	max-width: 200px;
	color: var(--blanco);
    text-decoration: none;
    font-size: 2rem;
	text-align: center;
    border: none;
    font-weight: var(--semibold);
    border-radius: 1rem;
	cursor: pointer;
	padding: 1.5rem;
	margin-bottom: 4rem;
}
.register {
	width: 80%;
	min-width: 230px;
	max-width: 333px;
	margin: 1.4rem auto;
}
.formulario-register p {
	width: 100%;
	/* margin: 0 auto; */
	color: var(--letraMorada);
	font-size: 1.2rem;
	font-weight:var(--normal);
	margin-top: 1rem;
	line-height: 1.4;
}
.reg p {
	text-align: center;
}
.a-register {
	/* color: var(--letraMorada);
	color: #c7c7c7; */
	color: var(--color7);
}
.btn-register-fb,
.btn-register-gg {
	width: 50%;
	color: var(--blanco);
	font-size:1.5rem;
	margin-top: 1.5rem;
	border: none;
	border-radius: 1rem;
	cursor: pointer;
	padding: 1rem 2rem;
	margin-bottom: 4rem;
}
.btn-register-fb {
	background-color: #3B5998;
}
.btn-register-gg {
	background-color: var(--blanco);
	color: var(--negro);
}
.botones-register-fgp {
	display: flex;	
	justify-content: space-between;
	margin: 0 auto;
	width: 80%;
	max-width: 330px;
	gap: 3rem;
}
/*---------------------------PASSWORD---------------*/
.div-recovery-password{
	background-color: #454760;
	width: 80%;
	min-width: 290px;
	max-width: 650px;
	/* width: 34%; */
	/* width: 340px;
	min-width: 80%; */
	/* max-width: 34rem; */
	margin: 2rem auto 5rem auto;
	border-radius: 1.5rem;
	padding-bottom: 0.5rem;

}
.title2-password {	
	display: block;
    margin-right: auto;
    margin-left: auto;
	margin-bottom: 3.8rem;
    text-align: center;
	text-transform: capitalize;
	font-weight: 800;
	line-height: 1.2;
	color: var(--moradoClaro);
	font-size: 4rem;
	padding: 3rem 1.5rem 0 1.5rem;
}
.c-form-password p{
	width: 50%;
	color: var(--moradoClaro);
	text-align: center;
}
.c-form-password ::placeholder{
	color: #b7bbe4e3;
	/* color: var(--letraGris); */
	/* color: var(--moradoClaro); */
	/* color: #cdd1ffbc; */
	/* color: var(--rayita);  */
	/* color: #989cd4b6; */
	font-size: 1.8rem;
	text-align: center;
	padding: 2.5rem 1rem;
}
#messagePassword {
	width: 50%;
	color: var(--moradoClaro);
	text-align: center;
	margin: 0 auto;
	font-size: 1.8rem;
	margin-bottom: 1.3rem;
}
.botonPassword{
	background-color: var(--color7);
	display: block;
    margin: 3rem auto 5rem auto;
	width: 50%;
	max-width: 173px;
	color: var(--blanco);
    text-decoration: none;
    font-size: 2rem;
	text-align: center;
    border: none;
    font-weight: var(--semibold);
    border-radius: 1rem;
	cursor: pointer;
	padding: 1rem;
}
/*---------------------------CONTACT---------------*/
.c-form-contact p{
	/* width: 50%; */
	color: var(--moradoClaro);
	text-align: center;
}
.c-form-contact ::placeholder{
	color: #b7bbe4e3;
	/* color: var(--letraGris); */
	/* color: var(--moradoClaro); */
	/* color: #cdd1ffbc; */
	/* color: var(--rayita);  */
	/* color: #989cd4b6; */
	font-size: 1.8rem;
	text-align: center;
	padding: 2.5rem 1rem;
}
.botoncontact {
	background-color: var(--color7);
	padding:1.5rem;
	display: block;
    margin: 3rem auto 1rem auto;
	width: 41%;
	min-width: 124px;
	color: var(--blanco);
    text-decoration: none;
    font-size: 2rem;
	text-align: center;
    border: none;
    font-weight: var(--semibold);
    border-radius: 1rem;
	cursor: pointer;
}
.contact {
	width: 72%;
}
/*---------------------------FAQ---------------*/
.container-faq {
	margin-top: 5rem;
    margin-bottom: 5rem;
    min-height: 51vh;
    width: 80%;
	max-width: 1250px;
	margin-left: auto;
	margin-right: auto;
    /* max-width: 125rem !important; */
}

.paragraph-5-faq {
    margin-top: 0;
    margin-bottom: 2.5rem;
    padding-top: 0.5rem;
    padding-bottom: 2.5rem;
    /* color: var(--letraGris); */
	color: var(--letraMorada);
    font-size: 1.8rem;
    font-weight: var(--normal);
    text-align: justify;
    line-height: 1.3;
    border-bottom: 2px solid var(--rayita);
}
.paragraph-5-faq span {
	/* width: 2rem; */
    color: var(--verde);
	/* color: red; */
    text-decoration: none;
    font-weight: var(--semibold);
    font-size: 1.7rem;
}
.title1-faq {
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
	text-transform: capitalize;
	font-weight: 800;
	line-height: 1.2;
	/* color: var(--moradoClaro); */
	color: var(--verde);
	font-size: 4rem;
	padding: 3rem 1.5rem 0 1.5rem;
	margin-bottom: 2rem;
}