/*
 Theme Name:   Astra Child
 Theme URI:    https://mininojesuscorp.com
 Description:  Tema hijo de Astra para Minino Jesus Corp. Permite personalizar el tema padre sin perder cambios al actualizar.
 Author:       Minino Jesus Corp
 Author URI:   https://mininojesuscorp.com
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  astra-child
*/

/*
 * Todos los estilos personalizados van aquí.
 * Los estilos del tema padre (Astra) se cargan automáticamente
 * antes que estos estilos a través de functions.php.
 */

/* ==========================================================================
   Fluent Forms - Estilo “oscuro” para el formulario con id=3
   ========================================================================== */

.fluentform_wrapper_3 {
	/* Si tu sección ya tiene fondo oscuro, esto no lo pisa demasiado */
	color: #ffffff;
}

.fluentform_wrapper_3 .ff-el-input--label label {
	color: #ffffff;
	font-family: 'Asap', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	vertical-align: middle;
}

.fluentform_wrapper_3 .ff-el-is-required.asterisk-right label::after {
	/* Evita que dependa del estilo nativo de Fluent */
	color: #55AC3C;
}

.fluentform_wrapper_3 .ff-el-group {
	margin-bottom: 22px;
}

.fluentform_wrapper_3 .ff-el-form-control {
	/* Sobrescribe estilos por defecto de Fluent (borde + fondo) */
	background-color: transparent !important;
	border: none !important;
	border-bottom: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #ffffff !important;
	/* +3px en bottom para que la línea quede ~3px debajo del "input" visual */
	padding: 10px 0 15px !important;
	margin: 0 !important;
	-webkit-appearance: none;
	appearance: none;

	/* Línea inferior degradada (como la imagen) */
	background-image: linear-gradient(80deg, #DBE72F 0%, #047752 100%) !important;
	background-repeat: no-repeat !important;
	background-size: 100% 2px !important;
	background-position: 0 100% !important;
	/* Fluent por defecto usa background-clip: padding-box; forzamos para que la línea
	   se pinte justo abajo del "content box". */
	background-origin: padding-box !important;
	background-clip: padding-box !important;
}

.fluentform_wrapper_3 .ff-el-form-control:focus {
	outline: none !important;
	/* Mantiene el degradado en focus */
	background-size: 100% 2px !important;
}

.fluentform_wrapper_3 .ff-el-form-control::placeholder {
	color: rgba(255, 255, 255, 0.38) !important;
}

.fluentform_wrapper_3 select.ff-el-form-control {
	/* Sube espacio para que el texto no se pise con la flecha */
	padding-right: 36px !important;
	background-image: linear-gradient(80deg, #DBE72F 0%, #047752 100%),
		url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2355AC3C%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%276%209%2012%2015%2018%209%27/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: 0 100%, right 6px center !important;
	background-size: 100% 2px, 14px 14px !important;
	background-origin: padding-box !important;
	background-clip: padding-box !important;
}

/* El control tiene texto blanco, pero el dropdown del browser suele ser fondo claro;
   si no, las opciones se ven “en blanco”. */
.fluentform_wrapper_3 select.ff-el-form-control option {
	color: #1a1a2e !important;
	background-color: #ffffff !important;
}

.fluentform_wrapper_3 .ff-el-form-check-label {
	color: #ffffff;
	font-family: 'Asap', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
}

.fluentform_wrapper_3 .ff-el-form-check-input {
	width: 18px !important;
	height: 18px !important;
	border-radius: 3px !important;
	accent-color: #55AC3C;
}

.fluentform_wrapper_3 .ff_submit_btn_wrapper {
	margin-top: 18px;
}

.fluentform_wrapper_3 .ff-btn-submit {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	background: linear-gradient(90deg, #DBE72F 0%, #1a8849 100%) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 999px !important;
	box-shadow: 0px 6px 30px 0px #01849F33;

	padding: 18px 30px !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.fluentform_wrapper_3 .ff-btn-submit:hover {
	filter: brightness(1.06);
}

/* ==========================================================================
   Block Contact Landing: borde degradado SOLO esquina superior izquierda
   ========================================================================== */
.block-contact-landing {
	position: relative;
	isolation: isolate; /* crea un stacking context para que el borde no tape el contenido */
	border-radius: 24px;
	overflow: hidden; /* asegura que el borde respete el border-radius del contenedor */

	--radius: 24px;
	--border-w: 1px;
	/* Tramo horizontal (ancho del borde superior, % del ancho del contenedor) */
	--seg-x: 22%;
	/* Tramo vertical (alto del borde izquierdo, % del alto del contenedor) */
	--seg-y: 30%;
}

/* Borde degradado (anillo) para reutilizar en ambos lados */
.block-contact-landing::before,
.block-contact-landing::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius);

	/* grosor del borde */
	padding: var(--border-w);
	box-sizing: border-box;

	/* Degradado radial (superior izquierda) */
	background: radial-gradient(70.71% 70.71% at 0% 0%, #55AC3C 0%, #DBE72F 70%);

	pointer-events: none;
	z-index: 0;

	/* Creamos el anillo del borde: border-box - content-box */
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
}

/* Tramo superior: usa --seg-x (ancho) */
.block-contact-landing::before {
	--cut: calc(var(--radius) + var(--border-w));
	-webkit-clip-path: polygon(0 0, var(--seg-x) 0, var(--seg-x) var(--cut), 0 var(--cut));
	clip-path: polygon(0 0, var(--seg-x) 0, var(--seg-x) var(--cut), 0 var(--cut));
}

/* Tramo izquierdo: usa --seg-y (alto) */
.block-contact-landing::after {
	--cut: calc(var(--radius) + var(--border-w));
	-webkit-clip-path: polygon(0 0, var(--cut) 0, var(--cut) var(--seg-y), 0 var(--seg-y));
	clip-path: polygon(0 0, var(--cut) 0, var(--cut) var(--seg-y), 0 var(--seg-y));
}

.block-contact-landing > * {
	position: relative;
	z-index: 1; /* asegura que el contenido quede por encima del borde */
}