/**
 * Contact Form 7 — styled to match the exact values in the current mockup
 * (design-mockup/index.html#contacto: .contact__form/.field-row/.field),
 * now applied to a real functional form instead of fake heading+text-editor
 * "inputs". Selectors are prefixed with #contacto (the section's real
 * anchor ID) purely for specificity: Elementor's site-wide Kit ships a
 * global form-fields rule —
 * ".elementor-kit-14 input:not([type=button]):not([type=submit]), ..."
 * — whose two :not([type=...]) each count as an attribute selector, so it
 * outranks a plain ".gea-contact-field input[type=text]" rule and silently
 * overrides font-size back to the kit's 16px default. An #id prefix beats
 * that regardless of how many classes/attributes it chains.
 */

#contacto .wpcf7-form {
	width: 100%;
}

#contacto .wpcf7-form .gea-contact-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

#contacto .wpcf7-form-control-wrap {
	display: block;
}

#contacto .gea-contact-row {
	display: flex;
	gap: 12px;
}

#contacto .gea-contact-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 0;
}

#contacto .gea-contact-field--full {
	width: 100%;
}

#contacto .gea-contact-field label {
	font-family: Inter, sans-serif;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.65;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
}

#contacto .gea-contact-field input[type="text"],
#contacto .gea-contact-field input[type="email"],
#contacto .gea-contact-field input[type="tel"],
#contacto .gea-contact-field textarea {
	width: 100%;
	font: inherit;
	font-family: Inter, sans-serif;
	font-size: 14px;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	padding: 10px 13px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

#contacto .gea-contact-field textarea {
	resize: vertical;
	min-height: 1px;
}

/* "Empresa del grupo" dropdown: same box as the text fields, own arrow; the
   open list uses the browser's colors, so its options get a dark background */
#contacto .gea-contact-field select {
	width: 100%;
	font: inherit;
	font-family: Inter, sans-serif;
	font-size: 14px;
	color: #fff;
	background: rgba(255, 255, 255, 0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	padding: 10px 38px 10px 13px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* still on "Seleccione…" (CF7's first_as_label option has an empty value) */
#contacto .gea-contact-field select:has(option[value=""]:checked) {
	color: rgba(255, 255, 255, 0.45);
}

#contacto .gea-contact-field select option {
	color: #fff;
	background: #0a1c2e;
}

#contacto .gea-contact-field select:focus {
	outline: none;
	border-color: var(--accent, #0a6bf0);
	background-color: rgba(255, 255, 255, 0.12);
}

#contacto .gea-contact-field input::placeholder,
#contacto .gea-contact-field textarea::placeholder {
	color: rgba(255, 255, 255, 0.45);
	opacity: 1;
}

#contacto .gea-contact-field input:focus,
#contacto .gea-contact-field textarea:focus {
	outline: none;
	border-color: var(--accent, #0a6bf0);
	background: rgba(255, 255, 255, 0.12);
}

#contacto .gea-contact-submit {
	width: 100%;
	margin-top: 4px;
}

#contacto .gea-contact-submit input[type="submit"] {
	display: block;
	width: 100%;
	font: inherit;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	color: #fff;
	background: var(--accent, #0a6bf0);
	border: 0;
	border-radius: 999px;
	padding: 12px 22px;
	cursor: pointer;
	transition: background 0.2s ease;
}

#contacto .gea-contact-submit input[type="submit"]:hover {
	background: var(--accent-deep, #0857c9);
}

#contacto .gea-contact-submit input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: default;
}

/* CF7's own validation/status chrome, restyled for the dark glass panel */
#contacto .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 13px;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.08);
}

#contacto .wpcf7-form.sent .wpcf7-response-output {
	border-color: rgba(25, 217, 220, 0.5);
}

#contacto .wpcf7-form.invalid .wpcf7-response-output,
#contacto .wpcf7-form.failed .wpcf7-response-output,
#contacto .wpcf7-form.aborted .wpcf7-response-output,
#contacto .wpcf7-form.spam .wpcf7-response-output {
	border-color: rgba(255, 99, 99, 0.6);
}

#contacto .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #ff8080;
}

#contacto .wpcf7-spinner {
	margin: 12px auto 0;
}

@media (max-width: 640px) {
	#contacto .gea-contact-row {
		flex-direction: column;
	}
}

/* Keep the panel as compact as the mockup's: CF7's loading spinner sits on
   its own line under the button and the (empty) response box keeps its
   margin until a submission — both added ~45px of dead space. The textarea
   is inline-block by default, which leaves a descender gap under it. */
#contacto .gea-contact-field textarea {
	display: block;
}

#contacto .gea-contact-submit {
	position: relative;
}

#contacto .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 14px;
	margin: -12px 0 0;
}

#contacto .wpcf7-form.init .wpcf7-response-output {
	display: none;
}

/* ============================================================
   Large screens (≥1800 px: QHD, 4K, ultra-wide) — design-mockup's
   "PANTALLAS GRANDES" layer. Below 1800 px nothing changes. Elementor
   content uses its own Widescreen breakpoint (Kit, 1800 px).
   ============================================================ */
@media (min-width: 1800px) {
	#contacto .gea-contact-field label {
		font-size: 14px;
	}

	#contacto .gea-contact-field input[type="text"],
	#contacto .gea-contact-field input[type="email"],
	#contacto .gea-contact-field input[type="tel"],
	#contacto .gea-contact-field textarea {
		padding: 12px 15px;
		font-size: 15.5px;
	}

	#contacto .gea-contact-field select {
		padding: 12px 40px 12px 15px;
		font-size: 15.5px;
	}
}