/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 22 2026 | 23:30:58 */
select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    padding-right: 35px;
}

.wpcf7 form.sent .wpcf7-response-output{
	display:none !important;
}



/* --- ESTILOS PRINCIPALES DEL CONTENEDOR --- */
.registration-form-container {
	background-color: #fff;
	border-radius: 15px !important;
	overflow:hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	max-width: 90%; 
	margin: 0px auto 10px auto; 
}

@media (max-width: 500px) {
	.registration-form-container{
		max-width: 100%;
	}
}

/* --- TÍTULO (Registrate) --- */
.registration-form-container .cont-text-title{
	background-color:#101ec5;
	padding:30px 20px;
	margin-bottom:0px;
}
.registration-form-container .form-title {
	text-align: center;
	margin-bottom: 0px;
}
.registration-form-container .form-title h4 {
	font-size: 32px;
	color: white;
	margin: 0;
	padding: 0;
	text-transform:uppercase;
}
.registration-form-container .form-title .underline {
	display: block;
	width: 60px;
	height: 4px;
	background-color: white; 
	margin: 5px auto 0;
	margin-top:10px;
	border-radius:20px;
}

/* --- ESTILOS GENERALES DE LOS CAMPOS (INPUT) --- */

.registration-form-container .main-cont-form{
	padding: 30px;
	padding-top: 22px;
	padding-bottom:0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.registration-form-container input[type="text"],
.registration-form-container input[type="email"],
.registration-form-container input[type="tel"] , 
.registration-form-container input[type="number"] ,select, .registration-form-container textarea{
	width: 100%;
	padding: 10px 15px 10px 50px; 
	margin: 0;
	border: 1px solid #ccc;
	border-radius: 10px;
	box-sizing: border-box; 
	font-size: 14px;
	transition: all 0.3s;
	outline: none; 
}

.registration-form-container textarea{
	padding:15px;
}


.registration-form-container input[type="text"]:focus,
.registration-form-container input[type="email"]:focus,
.registration-form-container input[type="tel"]:focus, .registration-form-container input[type="number"]:focus, select:focus, textarea:focus {
	border-color: #101ec5;
    box-shadow: 0 0 5px rgb(16 30 197 / 50%);
}

.registration-form-container input[type="submit"]:focus{
	border-radius:14px;
}

p label{
	margin-top:5px;
	font-size:12px;
	text-transform:uppercase;
	color: black;
}

.beca18-wrapper .radio-group {
	display: flex;
	align-items: center;
	gap: 20px;
}

.beca18-wrapper .radio-group label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 15px;
}

.beca18-wrapper input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: #2a7973;
}

.beca18-wrapper .small-note {
	display: block;
	font-size: 12px;
	margin-top: 5px;
	color: #777;
}



/* --- CONTENEDOR DE CADA CAMPO (Para posicionar el icono) --- */
.registration-form-container .cf7-field-wrapper {
	position: relative;
	margin-bottom: 8px;
	padding: 0; 
	width:48%;
}

/* --- ESTILOS DEL ICONO (Se posiciona absolutamente dentro del wrapper) --- */
.registration-form-container .cf7-icon-wrapper {
	position: absolute;
	top: 23px;
	left: 15px;
	transform: translateY(-50%);
	color: #999;
	font-size: 18px;
	z-index: 10;
}

/* --- ESTILO DEL BOTÓN DE ENVÍO (Enviar) --- */
.registration-form-container .submit-wrapper {
	text-align: center;
	margin-top: 10px;
	padding: 0;
	width: 100% !important; 
}
.registration-form-container input.pink-button {
	background-color: #101ec5;
    color: #ffffff;
    padding: 18px 30px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-size: 20px;
    transition: background-color 0.3s;
    width: 100% !important;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	animation: all 1s;
}
.registration-form-container input.pink-button:hover {
	background-color: #ccff00;
    border-radius: 14px !important;
	scale: 0.96;
}

.registration-form-container .wpcf7-not-valid-tip {
	/*position: absolute; */
	left: 0; 
	font-size: 14px;
	padding: 0;
	margin: 0;
}

.radio-custom{
	display: inline-flex;
}


.radio-custom .wpcf7-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 30px;
    cursor: pointer;
}

/* Ocultamos radio original */
.radio-custom input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #53ac67;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

/* Punto interno */
.radio-custom input[type="radio"]::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #53ac67;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 0.2s ease;
}

/* Cuando está seleccionado */
.radio-custom input[type="radio"]:checked::before {
    transform: translate(-50%, -50%) scale(1);
}

/* Hover */
.radio-custom input[type="radio"]:hover {
    box-shadow: 0 0 0 4px rgba(83, 172, 103, 0.15);
}

/* Texto */
.radio-custom .wpcf7-list-item-label {
    font-size: 16px;
    color: #333;
}

.wpcf7 form .wpcf7-response-output{
	color: #ffffff;
    font-size: 1.2em;
    font-weight: 700;
    background-color: #101ec5bd;
    border-radius: 10px;
    padding: 20px;
}

/* --- RESPONSIVE --- */
@media (max-width: 500px) {
	.registration-form-container {
		margin: 5px;
		padding: 0px;
	}
	.registration-form-container .cf7-field-wrapper{
		width:100%;
	}
}

@media (max-width: 767px){
    .main-cont-form > div{
        width: 100% !important;
    }
}