/* =========================================================================
   ALTIS — Formulario de contacto (Contact Form 7 + Divi)

   Los colores salen de los Colores Globales de Divi:

     --gcid-primary-color     etiquetas, texto y fondo del botón
     --gcid-secondary-color   asterisco, foco, enlaces y borde activo

   Si cambias esos colores en Divi, el formulario cambia con ellos. Los
   hexadecimales que aparecen como segundo valor en cada var() son solo el
   respaldo por si la variable global no existiera.

   ========================================================================= */

.altis-form {
	/* --- Marca ------------------------------------------------------- */
	--altis-primary: var(--gcid-primary-color, #2b3a48);
	--altis-secondary: var(--gcid-secondary-color, #2ea3c4);

	--altis-ink: var(--altis-primary);
	--altis-accent: var(--altis-secondary);
	--altis-link: var(--altis-secondary);
	--altis-button-bg: var(--altis-primary);
	--altis-button-text: #fff;

	/* --- Neutros: fijos a propósito, para que no dependan de la marca -- */
	--altis-line: #d5d8dc;
	--altis-line-hover: #a8adb4;
	--altis-muted: #6b7076;
	--altis-surface: #fff;
	--altis-surface-alt: #f7f8f9;
	--altis-error: #b3261e;

	/* --- Espaciado --------------------------------------------------- */
	--altis-gap: clamp(12px, 1.1cqi + 9px, 18px);
	--altis-pad-y: clamp(10px, 0.7cqi + 8px, 13px);
	--altis-pad-x: clamp(12px, 0.9cqi + 9px, 15px);
	--altis-label-gap: 5px;

	/* Cambia esto a 4px si prefieres los campos con esquinas suaves.
	   El botón va siempre a 0, según el diseño. */
	--altis-radius: 3px;

	/* Los @container miden el ancho real del módulo de Divi, no el de la
	   ventana, que es lo que importa si el formulario va en una columna. */
	container-type: inline-size;
	container-name: altisform;

	width: 100%;
	max-width: 680px;
	margin-inline: auto;
}

@supports not (width: 1cqi) {
	.altis-form {
		--altis-gap: 16px;
		--altis-pad-y: 12px;
		--altis-pad-x: 14px;
	}
}

/* Divi mete márgenes en los <p> del contenido; aquí sobran. */
.altis-form p {
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
   Rejilla
   ------------------------------------------------------------------------- */

.altis-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--altis-gap);
	margin-bottom: var(--altis-gap);
}

.altis-form__field {
	margin-bottom: var(--altis-gap) !important;
	min-width: 0;
}

.altis-form__grid > .altis-form__field {
	margin-bottom: 0 !important;
}

/* -------------------------------------------------------------------------
   Etiquetas
   ------------------------------------------------------------------------- */

.altis-form label {
	display: block;
	margin-bottom: var(--altis-label-gap);
	color: var(--altis-primary);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
}

.altis-form abbr[title] {
	border: 0;
	color: var(--altis-secondary);
	text-decoration: none;
	cursor: help;
}

.altis-form__hint {
	display: block;
	margin-top: 2px;
	color: var(--altis-muted);
	font-size: 0.85em;
	font-weight: 400;
}

/* -------------------------------------------------------------------------
   Campos

   La especificidad se sube con el contenedor en lugar de repartir !important,
   porque Divi estiliza los inputs de forma bastante agresiva.
   ------------------------------------------------------------------------- */

.altis-form input[type="text"],
.altis-form input[type="email"],
.altis-form input[type="tel"],
.altis-form input[type="url"],
.altis-form input[type="file"],
.altis-form select,
.altis-form textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	padding: var(--altis-pad-y) var(--altis-pad-x);
	border: 1px solid var(--altis-line);
	border-radius: var(--altis-radius);
	background-color: var(--altis-surface);
	color: var(--altis-primary);
	font-family: inherit;
	/* 16px reales en móvil: por debajo, iOS hace zoom al enfocar el campo. */
	font-size: max(16px, 1em);
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
}

.altis-form textarea {
	min-height: clamp(110px, 14cqi + 70px, 160px);
	resize: vertical;
}

.altis-form input:hover:not(:focus),
.altis-form textarea:hover:not(:focus),
.altis-form select:hover:not(:focus) {
	border-color: var(--altis-line-hover);
}

.altis-form input:focus,
.altis-form textarea:focus,
.altis-form select:focus {
	border-color: var(--altis-secondary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--altis-secondary) 22%, transparent);
	outline: none;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.altis-form input:focus,
	.altis-form textarea:focus,
	.altis-form select:focus {
		box-shadow: 0 0 0 3px rgba(46, 163, 196, 0.22);
	}
}

.altis-form ::placeholder {
	color: var(--altis-muted);
	opacity: 0.7;
}

/* Autorrelleno de Chrome: quita el amarillo sin romper el color del texto. */
.altis-form input:-webkit-autofill,
.altis-form input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--altis-primary);
	box-shadow: 0 0 0 1000px var(--altis-surface) inset;
	transition: background-color 5000s ease-in-out 0s;
}

/* Campo de archivo, para la variante de «Trabaja con nosotros». */
.altis-form input[type="file"] {
	padding: calc(var(--altis-pad-y) - 2px) var(--altis-pad-x);
	background-color: var(--altis-surface-alt);
	font-size: 0.92em;
	cursor: pointer;
}

.altis-form input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 7px 14px;
	border: 1px solid var(--altis-line);
	border-radius: 0;
	background: var(--altis-surface);
	color: var(--altis-primary);
	font-family: inherit;
	font-size: 0.95em;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.altis-form input[type="file"]:hover::file-selector-button {
	border-color: var(--altis-line-hover);
}

/* -------------------------------------------------------------------------
   Consentimiento
   ------------------------------------------------------------------------- */

.altis-form__consent {
	margin-bottom: calc(var(--altis-gap) + 2px);
}

.altis-form__consent .wpcf7-list-item {
	margin: 0;
}

.altis-form__consent .wpcf7-list-item-label,
.altis-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--altis-muted);
	font-size: 0.86em;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.altis-form__consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 1px 0 0;
	padding: 0;
	border: 1px solid var(--altis-line);
	border-radius: 0;
	accent-color: var(--altis-secondary);
	cursor: pointer;
}

.altis-form__consent input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--altis-secondary);
	outline-offset: 2px;
}

.altis-form__consent a {
	color: var(--altis-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.altis-form__consent a:hover {
	text-decoration-thickness: 2px;
}

/* -------------------------------------------------------------------------
   Botón — sin esquinas redondeadas
   ------------------------------------------------------------------------- */

.altis-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 0;
}

.altis-form input[type="submit"].altis-form__submit {
	flex: 0 1 auto;
	padding: 14px clamp(24px, 3.5cqi + 16px, 38px);
	border: 1px solid var(--altis-button-bg);
	border-radius: 0;
	background-color: var(--altis-button-bg);
	color: var(--altis-button-text);
	font-family: inherit;
	font-size: max(15px, 0.95em);
	font-weight: 600;
	line-height: 1.2;
	min-height: 48px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	appearance: none;
}

.altis-form input[type="submit"].altis-form__submit:hover {
	background-color: var(--altis-secondary);
	border-color: var(--altis-secondary);
}

.altis-form input[type="submit"].altis-form__submit:focus-visible {
	outline: 2px solid var(--altis-primary);
	outline-offset: 3px;
}

.altis-form input[type="submit"]:disabled {
	cursor: wait;
	opacity: 0.6;
}

@container altisform (max-width: 400px) {
	.altis-form input[type="submit"].altis-form__submit {
		flex: 1 1 100%;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 600px) {
		.altis-form input[type="submit"].altis-form__submit {
			flex: 1 1 100%;
		}
	}
}

/* -------------------------------------------------------------------------
   Estados de validación de CF7
   ------------------------------------------------------------------------- */

.altis-form .wpcf7-not-valid {
	border-color: var(--altis-error);
}

.altis-form .wpcf7-not-valid:focus {
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.16);
}

.altis-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 5px;
	color: var(--altis-error);
	font-size: 0.85em;
	font-weight: 500;
	line-height: 1.4;
}

.wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0 !important;
	padding: 13px 15px !important;
	border: 1px solid #d5d8dc !important;
	border-left-width: 3px !important;
	border-radius: 0;
	font-size: 0.9em;
	line-height: 1.5;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-left-color: var(--gcid-secondary-color, #2ea3c4) !important;
	background: #f7f8f9;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-left-color: #b3261e !important;
	background: #fdf4f3;
}

.altis-form .wpcf7-spinner {
	margin: 0;
}

/* -------------------------------------------------------------------------
   Honeypot

   Fuera de pantalla en lugar de display:none, que algunos bots detectan.
   ------------------------------------------------------------------------- */

.altis-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* -------------------------------------------------------------------------
   Sobre fondo oscuro: añade .altis-form--invertido al módulo de Divi
   ------------------------------------------------------------------------- */

.altis-form--invertido {
	--altis-primary: #fff;
	--altis-surface: rgba(255, 255, 255, 0.06);
	--altis-surface-alt: rgba(255, 255, 255, 0.1);
	--altis-line: rgba(255, 255, 255, 0.28);
	--altis-line-hover: rgba(255, 255, 255, 0.5);
	--altis-muted: rgba(255, 255, 255, 0.72);
	--altis-button-bg: var(--gcid-secondary-color, #2ea3c4);
}

.altis-form--invertido input,
.altis-form--invertido textarea {
	color: #fff;
}

.altis-form--invertido input:-webkit-autofill {
	-webkit-text-fill-color: #fff;
	box-shadow: 0 0 0 1000px #2a2a2a inset;
}

/* -------------------------------------------------------------------------
   Accesibilidad
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.altis-form *,
	.altis-form *::before,
	.altis-form *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

@media (prefers-contrast: more) {
	.altis-form input,
	.altis-form textarea,
	.altis-form select {
		border-width: 2px;
	}

	.altis-form__consent .wpcf7-list-item-label {
		color: var(--altis-primary);
	}
}

@media print {
	.altis-form__actions,
	.altis-hp {
		display: none;
	}
}