/* General Reset */
*,
*:before,
*:after {
  box-sizing: border-box;
}

/* Body y fondo general */
body {
  background: #c1bdba;
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
}

/* Contenedor del formulario */
.form {
  background: #ffffff;
  padding: 40px;
  max-width: 550px;
  margin: 20px auto;
  border: solid 1px #e8e8e8;
  border-radius: 6px;
  box-shadow: 0 0 16px rgb(0 0 0 / 10%);
  display: flex;
  flex-direction: column;
}

/* Pestañas agrupadas en dos filas (2 arriba, 2 abajo) */
/* Pestañas */
.tab-group {
	list-style-type: none; /* Asegura que no haya puntos */
	padding: 0;
	margin: 0;
	display: flex; /* Alinea las pestañas horizontalmente */
	flex-wrap: wrap; /* Permite que las pestañas se acomoden si es necesario */
	justify-content: center; /* Centra las pestañas dentro del contenedor */
	width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
  }
  
  

  .tab-group ul {
	list-style-type: none; /* Asegura que no haya puntos */
	padding: 0;
	margin: 0;
	display: flex; /* Alinea las pestañas horizontalmente */
	flex-wrap: wrap; /* Permite que las pestañas se acomoden si es necesario */
	/*gap: 10px; Espacio entre las pestañas */
  }
  
  .tab-group li {
	width: 50%; /* Cada pestaña ocupa el 50% del ancho disponible */
	display: flex;
	justify-content: center; /* Centra el contenido de la pestaña */
	
  }
  
  .tab-group li a {
	display: block;
	text-decoration: none !important;
	padding: 15px;
	background: rgba(160, 179, 176, .25);
	color: #a0b3b0;
	font-size: 20px;
	text-align: center;
	cursor: pointer;
	transition: 0.5s ease;
	width: 100%; /* Asegura que el enlace cubra todo el espacio disponible en el <li> */
  }
  
  .tab-group li a:hover {
	background: #614bdd;
	color: #fff;
  }
  
  .tab-group .active a {
	background: radial-gradient(circle, hsla(197, 64%, 38%, 1) 0%, hsla(279, 50%, 54%, 1) 100%);
	color: #fff;
  }

/* Estilo de campos */
.field-wrap {
  position: relative;
  margin-bottom: 30px;
}

.field-wrap label {
  font-size: 14px;
  color: #a0b3b0;
  text-align: center;
  display: block;
  margin-bottom: 8px;
}

.field-wrap input,
textarea {
  font-size: 18px;
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #a0b3b0;
  color: #555;
  border-radius: 4px;
  text-align: center;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.field-wrap input:focus,
textarea:focus {
  border-color: #614bdd;
  outline: none;
}

/* Botón */
.button {
  padding: 15px 0;
  font-size: 16px;
  font-weight: bold;
  background: radial-gradient(circle, hsla(197, 64%, 38%, 1) 0%, hsla(279, 50%, 54%, 1) 100%);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.5s ease;
}

.button:hover {
  background: #614bdd;
}

.button-block {
  width: 100%;
}