/* 

#16D298 verde En uso
#1FDF64 verde 2 (spotify)
#282829 negro de fondo

*/



h1{font-size: 1.8em;}
h2{font-size: 1em;}
p{font-size: 0.5em;}

header{
    height: 15vh;
}

/* Estilo para la imagen en el encabezado */
header img {
    width: 30px; /* Ancho deseado para la imagen */
    height: auto; /* Permite que la altura se ajuste automáticamente */
    margin-right: 1px; /* Espacio entre la imagen y el texto */
    margin-left: 28px;
    margin-top: 20px;
}

header a {
    text-decoration: none;
}

/* Estilo para el texto que dice "Inicio" */
.logo{
    display:inline;
    font-family: 'roboto', sans-serif;
    font-size: 1.05em;
    color:  #747d8c9f;
    position: relative; /* Agrega posición relativae independiente de la imagen */
    top: -10px; /* mueve vertical el texto */
}


/* Estilo para los textos del principio */
.parrafo{
    display: flex; /* Activa las carateristicas de "flex-direction","align-items" */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #837f7f;
    .color-acento{color: #16D298;}
}

/* Estilo para el textos h2 del principio */
.parrafo h2 {
    margin-top: 20px; /* quita margen */
	width: 80%;
	text-align: center;
}


/*basic reset*/
* {margin: 0; padding: 0;}

html {
	height: 110%;
	/*Image only BG fallback*/
	
	/*background = gradient + image pattern combo*/
	background: linear-gradient(#282829, #282829); /* Fondo degradado de dos colores */
}

body {
    font-family: 'roboto', sans-serif;
}

/*form styles*/
#msform {
	width: 400px;
	margin: 50px auto;
	text-align: center;
	position: relative;
}

#msform fieldset {
	background: #ffffff; /*Color de formulario*/
	border: 0 none;
	border-radius: 10px;
	padding: 20px 20px;
	box-sizing: border-box;
	width: 80%;
	margin: 0 10%;
	
	/*stacking fieldsets above each other*/
	position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
	display: none;
}
/*inputs*/
#msform input, #msform textarea {
	padding: 15px;
	border: 1px solid #e0d9d9;/*borde de linea de respuesta*/
	border-radius: 5px;
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
    font-family: 'roboto', sans-serif;
	background-color: #f4f4f4;/* color de input de respuestas*/
	color: #15644b;/* color de letra cuando responden*/
	font-size: 12px;/*Tamaño de letra en campo de respuestas*/
}

/*buttons*/
#msform .action-button {
	width: 100px;
	background: #16D298;/*Color de botones*/
	font-weight: bold;
	color: white; /*texto de botones*/
	border: 1px solid #16D298;
	border-radius: 5px;
	cursor: pointer;
	padding: 10px;
	margin: 10px 5px;
  	text-decoration: none;
  	font-size: 14px;
}
#msform .action-button:hover, #msform .action-button:focus {
	background-color:#282829;
	color: #16D298;
}
/*Texto dentro de los formularios*/
.fs-title {
	font-size: 10px;
	color: #636262; /*color texto titulo*/
	margin-bottom: 10px;
}
.fs-subtitle {
	font-weight: normal;
	color: #000000c6;
	margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
}

/*Texto de barra de progreso*/
#progressbar li {
	list-style-type: none;
	color: #ffffff;
	text-transform: uppercase;
	font-size: 9px;
	width: 33.33%;
	float: left;
	position: relative;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #000000;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px; /*grosor de linea conectora*/
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{

	background: #16D298;
	color: rgb(0, 0, 0);

}

/*estilos de las preguntas*/
label {
	font-family:Arial, Helvetica, sans-serif;
	color: #161616;/*preguntas principales*/
	display: block; /* Coloca cada etiqueta en una línea separada */
	text-align: left; /* Alinea el texto de la etiqueta a la izquierda */
	margin-top: 10px; /* Agrega espacio entre las etiquetas y los campos de entrada */
	margin-bottom: 5px;
	font-size: 11px;
}

/* Estilo para cambiar el color del placeholder del input */
#msform input::placeholder {
    color: #a7a7a7; /* Color de respuestas predeterminadas */
	font-size: 11px;
	font-family:Arial, Helvetica, sans-serif
}

/* Estilo para boton enviar */
#msform .submit {
    background-color: #2f2c79; /* Color de respuestas predeterminadas */
	border: none;

}

/*--------------------------------INICIO--------transiciones-----------------------------------------------*/

/* Estilos generales para los fieldsets */
fieldset {
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  /* Estilo para el fieldset activo */
  fieldset.active {
    opacity: 1;
    transform: translateX(0);
  }
  
  .next:hover, .previous:hover {
    background-color: #0056b3;
  }
  
  /* Estilos para los títulos de los fieldsets */
  .fs-title {

    font-size: 24px;
    margin-bottom: 10px;
  }
  
  .fs-subtitle {
	font-family: 'roboto', sans-serif;
    font-size: 16px;
    color: #a09898;
    margin-bottom: 20px;
}
	/*-------------------------------FIN--------transiciones---------------------------------------------------*/

	/*-----------------------------INICIO--------responsive------------------------------------------------------*/

/* Estilos específicos para dispositivos móviles */
@media screen and (max-width: 600px) {
    /* Ajusta el tamaño del formulario y sus elementos aquí */
    #msform {

        width: 100%;
        margin: 50px auto;

    }
    
    /* Ajusta otros estilos según sea necesario */
    /* Por ejemplo, puedes reducir el tamaño del texto o los márgenes */
    .fs-title {
		font-family: 'roboto', sans-serif;
        font-size: 16px;
    }
}

/*-----------------------------FIN--------responsive------------------------------------------------------*/

/* 
---------------------------------------------
footer
--------------------------------------------- 
*/

footer {
	background-image: linear-gradient(180deg, #282829 0%, #16D298 1000%);
	padding-top: 30px;
  }

  footer .copyright {
	text-align: center;
	border-top: 1px solid rgba(250,250,250,0.2);
	margin-top: 30px;
	padding-top: 30px;
	padding-bottom: 30px;
	font-weight: 400;
	font-size: 12px;
	color: #fff;
	letter-spacing: 0.88px;
	text-transform: uppercase;
  }
  
  @media (max-width: 991px) {
	footer .text {
	  margin-bottom: 30px;
	}
	footer h5 {
	  margin-bottom: 15px;
	}
	footer .footer-nav {
	  margin-bottom: 30px;
	}
}