/* Toscano Widgets · Genera · Formulario
   Los colores, alturas y tipografías se controlan desde el panel de Elementor.
   Aquí solo están los valores por defecto y la estructura. */

.tw-gf {
	--g-accent: #009a9d;
	--g-accent-dark: #007c7f;
	--g-card: #ffffff;
	--g-bg-2: #f4f8f8;
	--g-line-strong: rgba(8, 40, 42, .14);
	--g-text: #0b1a1c;
	--g-text-2: #3a4b4d;
	--g-muted: #64777a;
	--g-warn: #a86400;
	--g-error: #d64545;

	container-type: inline-size;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	width: 100%;
	background: var(--g-accent);
	display: grid;
	place-items: center;
	padding: clamp(24px, 4vw, 64px);
	color: var(--g-text);
	font-family: "Roboto", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.tw-gf *, .tw-gf *::before, .tw-gf *::after { box-sizing: border-box; }
.tw-gf .tw-gf__title, .tw-gf h3, .tw-gf p { margin: 0; padding: 0; font-family: inherit; text-transform: none; }

/* Brillo de esquina */
.tw-gf::after {
	content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
	right: -200px; top: -200px; background: rgba(255, 255, 255, .10); filter: blur(80px); pointer-events: none;
}

/* Animación: transparente en los bordes → opaca hacia el centro */
.tw-gf .tw-gf__fx {
	position: absolute; inset: 0; width: 100%; height: 100%;
	z-index: 0; pointer-events: none; display: block;
	-webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 0%, rgba(0,0,0,.75) 35%, transparent 100%);
	mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 0%, rgba(0,0,0,.75) 35%, transparent 100%);
}

/* Tarjeta */
.tw-gf .tw-gf__card {
	position: relative; z-index: 1; width: 100%; max-width: 520px;
	background: var(--g-card); border-radius: 24px; padding: clamp(28px, 3vw, 44px);
	box-shadow: 0 40px 80px -30px rgba(0, 40, 42, .45), 0 2px 6px rgba(0, 40, 42, .08);
}
.tw-gf .tw-gf__title { font-size: 32px; line-height: 1.1; letter-spacing: -.02em; font-weight: 700; color: var(--g-text); }
.tw-gf .tw-gf__sub { color: var(--g-muted); font-size: 14px; margin: 10px 0 28px; }
.tw-gf .tw-gf__badge {
	display: inline-block; font-size: 11px; line-height: 1.4; color: #fff; background: var(--g-accent);
	padding: 4px 10px; border-radius: 6px; margin-bottom: 16px; font-weight: 500; letter-spacing: .08em;
}

/* Formulario */
.tw-gf .tw-gf__form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.tw-gf .tw-gf__field { position: relative; min-width: 0; }
.tw-gf .tw-gf__field input {
	width: 100%; height: auto; margin: 0; background: var(--g-bg-2); border: 1px solid var(--g-line-strong);
	color: var(--g-text); font-family: inherit; font-size: 15px; line-height: 1.4;
	padding: 22px 14px 8px; border-radius: 12px; outline: none; box-shadow: none;
	transition: border-color .2s, box-shadow .2s, background .2s;
}
.tw-gf .tw-gf__field label {
	position: absolute; left: 15px; top: 15px; margin: 0; font-size: 14px; line-height: 1.4; font-weight: 400;
	color: var(--g-muted); pointer-events: none; transition: all .18s ease;
}
.tw-gf .tw-gf__req { color: var(--g-accent); }
.tw-gf .tw-gf__field input:focus {
	background: #fff; border-color: var(--g-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--g-accent) 12%, transparent);
}
.tw-gf .tw-gf__field input:focus + label,
.tw-gf .tw-gf__field input:not(:placeholder-shown) + label { top: 6px; font-size: 11px; color: var(--g-accent); }
.tw-gf .is-invalid { border-color: var(--g-error) !important; }

.tw-gf .tw-gf__check {
	grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start;
	font-size: 13px; line-height: 1.5; font-weight: 400; color: var(--g-text-2); margin: 6px 0 0; cursor: pointer;
}
.tw-gf .tw-gf__check input {
	-webkit-appearance: none; appearance: none; flex: 0 0 18px; width: 18px; height: 18px; padding: 0;
	border: 1px solid var(--g-line-strong); border-radius: 5px; background: var(--g-bg-2);
	margin: 1px 0 0; cursor: pointer; display: grid; place-items: center; transition: all .2s;
}
.tw-gf .tw-gf__check input:checked { background: var(--g-accent); border-color: var(--g-accent); }
.tw-gf .tw-gf__check input:checked::after {
	content: ""; width: 5px; height: 9px; border: solid #fff;
	border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px);
}
.tw-gf .tw-gf__check a { color: var(--g-accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.tw-gf .tw-gf__hint { grid-column: 1 / -1; font-size: 12px; color: var(--g-muted); }
.tw-gf .tw-gf__error { grid-column: 1 / -1; font-size: 13px; color: var(--g-error); display: none; }
.tw-gf .tw-gf__error.is-visible { display: block; }

.tw-gf .tw-gf__btn {
	grid-column: 1 / -1; margin: 8px 0 0; border: 0; cursor: pointer; width: 100%;
	font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase;
	padding: 16px 20px; border-radius: 12px; color: #fff; background: var(--g-accent);
	display: flex; align-items: center; justify-content: center; gap: 10px;
	box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--g-accent) 40%, transparent);
	transition: transform .15s, box-shadow .2s, background .2s;
}
.tw-gf .tw-gf__btn:hover, .tw-gf .tw-gf__btn:focus { background: var(--g-accent-dark); color: #fff; transform: translateY(-1px); }
.tw-gf .tw-gf__btn svg { width: 18px; height: 18px; transition: transform .2s; }
.tw-gf .tw-gf__btn:hover svg { transform: translateX(3px); }
.tw-gf .tw-gf__btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* Estado: plazo cerrado */
.tw-gf .is-closed .tw-gf__form { opacity: .35; pointer-events: none; filter: grayscale(.6); }
.tw-gf .tw-gf__closed { display: none; }
.tw-gf .is-closed .tw-gf__closed {
	display: flex; gap: 14px; align-items: center; margin-top: 22px;
	border: 1px solid rgba(214, 138, 20, .35); background: #fff8ec; padding: 16px 18px; border-radius: 14px;
}
.tw-gf .tw-gf__closed .tw-gf__ic {
	flex: 0 0 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
	background: rgba(214, 138, 20, .14); color: var(--g-warn);
}
.tw-gf .tw-gf__closed strong { color: var(--g-warn); display: block; font-size: 16px; }
.tw-gf .tw-gf__closed span { font-size: 13px; color: var(--g-muted); }

/* Estado: enviado */
.tw-gf .tw-gf__success { display: none; text-align: center; padding: 20px 0 6px; }
.tw-gf .tw-gf__success .tw-gf__ic {
	width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
	background: color-mix(in srgb, var(--g-accent) 10%, transparent); color: var(--g-accent);
}
.tw-gf .tw-gf__success h3 { font-size: 22px; color: var(--g-text); }
.tw-gf .tw-gf__success p { color: var(--g-muted); font-size: 14px; margin-top: 6px; }
.tw-gf .is-sent .tw-gf__form { display: none; }
.tw-gf .is-sent .tw-gf__success { display: block; }
.tw-gf .tw-gf__frame { display: none !important; }

/* Responsive según el ancho real del widget */
@container (max-width: 480px) {
	.tw-gf .tw-gf__card { padding: 26px 20px; }
	.tw-gf .tw-gf__form { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.tw-gf { padding: 48px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.tw-gf *, .tw-gf *::before, .tw-gf *::after { animation: none !important; transition: none !important; }
}