#form_inscripcion{
	position: relative;
	overflow: hidden;
	height: 580px;
	width: 100%;
	background-image: linear-gradient(360deg, 
		#dbdbdb 0%, 
		#d3d3d3 5%,      
    #cacaca 35%,     
		#f5f5f5 90%, 
    #f5f5f5 100% 
	);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row-reverse;
	font-family: Arial, Helvetica;
}

#form_inscripcion video{
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	z-index: 0;
}

#form_inscripcion::before,
#form_inscripcion::after {
  content: "";
  position: absolute;
  top: 0;
  width: 30%;         /* Ajusta el ancho del degradado */
  height: 100%;
  pointer-events: none; /* Para no bloquear clics o interacciones */
  z-index: 1;          /* Se superpone al video */
}

/* Degradado desde la izquierda */
#form_inscripcion::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent);
}

/* Degradado desde la derecha */
#form_inscripcion::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.7), transparent);
}

#form_inscripcion__fondo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('./img/formulario_fondo.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* opacity: 0.3; */
	z-index: 1;
}

#form_inscripcion__derecha, #form_inscripcion__izquierda{
	flex: 1;
	height: 100%;
	width: 50%;
	z-index: 2;
}


#form_inscripcion__fondo_img1{
	position: absolute;
	top: -5px;
	right: -50px;
	width: 170px;
	height: auto;
	filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
	z-index: 2;
	rotate: -6deg;
	transform: scaleX(-1);
}
#form_inscripcion__fondo_img3{
	position: absolute;
	top: 290px;
	right: -50px;
	width: 120px;
	height: auto;
	filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
	z-index: 2;
	rotate: -20deg;
	transform: scaleX(-1);
}
#form_inscripcion__fondo_img2{
	position: absolute;
	top: 290px;
	left:  -60px;
	width: 150px;
	height: auto;
	filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
	z-index: 2;
	rotate: -10deg;
	transform: scaleX(-1);
}

#form_inscripcion__fondo_img4{
	position: absolute;
	top: -10px;
	left:  -40px;
	width: 170px;
	height: auto;
	filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
	z-index: 2;
	rotate: 10deg;
}

#form_inscripcion__derecha{
	display: flex;
	flex-direction: column;
	justify-content: end;
	position: relative;
}

#form_balon{
	position: absolute;
	bottom: 50px;
	left: -10px;
	width: 90px;
	height: auto;
	filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.2));
	z-index: 2;
}

#form_inscripcion__derecha__texto{
	width: 50%;
	max-width: 540px;
	min-width: 410px;
	margin: 35px auto 0;
	display: flex;
	flex-direction: column;
	justify-content: left;
	align-items: center;
	background-color: white;
	border-radius: 14px;
	padding: 18px 15px 9px;
	transform: translate(-100px, 130px);
	box-shadow: 0 5px 15px 0 rgba(22, 22, 22, 0.3);
	text-align: left;
}

#form_inscripcion__derecha__texto_titulo{
	font-size: 22px;
	font-weight: 600;
	color: #008281;
	/* text-align: center; */
	margin: 0 0 10px 0;
	line-height: 1.2;
}

#form_inscripcion__derecha__texto_titulo span{
	font-size: 16px;
	text-align: left;
}

#form_inscripcion__derecha__texto p{
	font-size: 16px;
	color: #333;
	text-align: left;
	margin: 0 0 10px 0;
	line-height: 1.3;
}

#form_inscripcion__derecha__img{
	max-width: 285px;
	width: 100%;
	margin: 0px auto 0;
	filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
	transform: translate(125px, 0px);
}

#form_inscripcion__derecha__img_2{
	width: 320px;
	margin: 5px auto 0;
	position: absolute;
	margin: 0 auto;
	border-radius: 20px;
	left: calc(50% - 160px);
	bottom: 50px;
	box-shadow: 0 5px 10px 0 rgba(22, 22, 22, 0.5);
}

#form_inscripcion__izquierda{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

#form_inscripcion__izquierda__formulario{
	box-shadow: inset 0 0 0 1px red;
	gap: 18px;
	background-color: rgb(255, 255, 255);
	padding: 15px 30px 32px;
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	width: 80%;
	max-width: 440px;
	min-width: 380px;
	box-sizing: border-box;
}

#form_inscripcion__izquierda__formulario h2{
	line-height: 1.1;
	text-align: center;
	font-size: 27px;
	font-weight: 600;
	margin-bottom: 5px;
	margin-top: 18px;
	color: #008281;
}
body{margin: 0;}

#form_inscripcion__izquierda__formulario input{
	box-sizing: border-box;
	height: 36px;
	border-radius: 20px;
	outline: none;
	border: 1.5px solid rgb(219, 219, 219);
	padding: 6px 15px 5px;
	font-size: 13.5px;
	letter-spacing: 0.3px;
}

#form_inscripcion__izquierda__formulario input:focus{
	border: 1px solid #253080;
}

#form_inscripcion__izquierda__formulario input::placeholder{
	color: rgb(130, 130, 130);
}

#form_inscripcion__izquierda__formulario label{
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: #666;
	font-size: 13px;
	position: relative;
}

#form_inscripcion__izquierda__formulario label div{
	font-weight: 500;
	background-color: white;
	transform: translate(9px, 7px);
	width: max-content;
	padding: 0 4px;
	transition: all 0.15s linear;
	border-radius: 10px;
	height: 16px;
	color: rgb(172, 172, 172);
	cursor: text;
	position: absolute;
	user-select: none;
	font-size: 13.5px;
}

#form_inscripcion__izquierda__formulario label input:focus ~ div,
#form_inscripcion__izquierda__formulario label input.valid ~ div{
	font-weight: 500;
	transform: translate(6px, -10px);
	padding: 0 7px;
	width: max-content;
	cursor: default;
	color: var(--color-gris-1);
}

#form_inscripcion__izquierda__formulario label input:-webkit-autofill{
	-webkit-text-fill-color: #666;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
}

#form_inscripcion__izquierda__formulario label div span{
	color: rgb(255, 81, 0);
}

#message-obligatory{
	text-align: left;
	font-size: 12px;
	letter-spacing: 0.5px;
	color: #929292;
}

#message-obligatory span {
	color: rgb(255, 81, 0);
}

#btn-container{
	left: 0px;
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 5px;
}

#btn_enviar_datos{
	font-weight: 500;
	font-size: 17px;
	padding: 18px;
	color: #fff;
	border-radius: 20px;
	appearance: none;
	text-decoration: none !important;
	border: none;
	height: 30px;
	border: 2.5px solid #017e7e;
	animation: pulse-black 2s infinite ease-out;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #008281;
  transition: background 0.25s ease;
	width: 90%;
	letter-spacing: 0.5px;
}

@keyframes pulse-black {
	0% {
    transform: scale(.95);
    box-shadow: 0 0 0 0 #008282b9;
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0,0,0,0);
	}
	100% {
		transform: scale(.95);
		box-shadow: 0 0 0 0 rgba(0,0,0,0);
	}
}

#btn_enviar_datos:hover {
	background: #059b9b;
}

#btn_enviar_datos:active {
	background: #006161;
}

#btn_enviar_datos svg {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}





@media screen and (min-width: 1201px) {
	#form_inscripcion__izquierda__formulario{
		margin-left: 14%;
	}
}

@media screen and (min-width: 1400px) {
	#form_inscripcion__derecha, #form_inscripcion__izquierda{
		flex: 1;
		height: 100%;
		max-width: 700px;
	}
	#form_inscripcion__derecha{
		margin-right: auto;
	}
	#form_inscripcion__izquierda{
		margin-left: auto;
	}
}

@media screen and (min-width: 1800px) {

}

@media screen and (max-width: 1200px) {
	
}

@media screen and (max-width: 1020px) {
	#form_inscripcion__derecha__texto{
		margin-top: 0px;
		transform: translate(-35px, 65px);
		font-size: 14px;
	}
	#form_inscripcion__derecha__texto_titulo{
		font-size: 17px;
	}
	#form_inscripcion__derecha__texto_titulo span{
		font-size: 16px;
	}

	#form_inscripcion__derecha__texto p{
		font-size: 13px;
	}

	#form_balon{
		width: 60px;
	}
}

@media screen and (max-width: 870px) {
	#form_inscripcion{
		flex-direction: column;
		height: 970px;
	}
	#form_inscripcion__derecha, #form_inscripcion__izquierda{
		height: 50%;
		width: 100%;
	}
	#form_inscripcion__derecha__texto {
    margin: 15px auto 0px;
	}
	#form_inscripcion__derecha__img{
		max-width: 235px;
		width: 90%;
		margin: 5px auto 0;
	}
	#form_inscripcion__izquierda {
    align-items: flex-start;
	}
	#form_balon{
		display: none;
	}
}

@media screen and (max-width: 500px) {
	#form_inscripcion__derecha__texto{
		width: 50%;
		min-width: 310px;
	}
	#form_inscripcion__izquierda__formulario{
		width: 80%;
		max-width: 440px;
		min-width: 320px;
		box-sizing: border-box;
	}

}

@media screen and (max-width: 430px) {

}

a {
    color: #000000;
}