/* ---------- Contacto y cotización ----------
 * Los dos formularios de captación y su acuse. Comparten hoja porque comparten
 * marcado: lo que cambia entre ellos son dos campos y el texto, no la forma.
 *
 * Ningún valor literal de color ni de tipografía: todo sale de los tokens, para
 * que sustituir la identidad no obligue a tocar esta hoja. */

.page-lead__intro {
	margin-top: var(--spacing-md);
	max-width: var(--spacing-measure);
}

.page-lead__fallback {
	margin-top: var(--spacing-lg);
}

.lead-form {
	margin-top: var(--spacing-xl);
	max-width: var(--spacing-measure);
}

.lead-form__field {
	margin-top: var(--spacing-lg);
}

/* La etiqueta se ve siempre, encima del campo: un marcador de posición
 * desaparece al escribir y deja al campo sin nombre. */
.lead-form__field label {
	display: block;
	font-weight: var(--font-weight-bold);
}

.lead-form__help {
	display: block;
	margin-top: calc(var(--spacing-unit) / 2);
	font-size: var(--font-size-small);
	color: var(--ink-secondary);
}

.lead-form__field input,
.lead-form__field select,
.lead-form__field textarea {
	display: block;
	width: 100%;
	margin-top: var(--spacing-xs);
	min-height: 48px;
	padding: var(--spacing-sm) var(--spacing-md);
	border: 1px solid var(--color-border-control);
	border-radius: var(--rounded-md);
	background: var(--color-surface-raised);
	font: inherit;
	color: inherit;
}

.lead-form__field textarea {
	min-height: 7lh;
	resize: vertical;
}

/* Sin comparar el valor: el atributo solo se emite cuando hay error, así que su
 * presencia ya es la condición. */
.lead-form__field input[aria-invalid],
.lead-form__field select[aria-invalid],
.lead-form__field textarea[aria-invalid] {
	border-width: 2px;
	border-color: var(--color-state-error);
}

.lead-form__error {
	display: block;
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-small);
}

/* El resumen recibe el foco al fallar el envío, así que dibuja su propio marco:
 * un bloque que se enfoca y no se distingue desorienta. */
.lead-form__errors {
	margin-bottom: var(--spacing-lg);
	border-inline-start: 4px solid var(--color-state-error);
	padding: var(--spacing-md) var(--spacing-lg);
	background: var(--color-surface-sunken);
}

.lead-form__errors h2 {
	font-size: var(--font-size-h4);
}

.lead-form__errors ul {
	margin: var(--spacing-xs) 0 0;
	padding-inline-start: var(--spacing-lg);
}

.lead-form__consent {
	margin-top: var(--spacing-lg);
}

/* Toda la etiqueta marca la casilla; dentro solo el tramo del aviso es enlace.
 * Con la etiqueta entera convertida en enlace, tocar el texto para marcar saca
 * de la página y se lleva lo capturado. */
.lead-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-xs);
	min-height: var(--layout-touch-target);
	cursor: pointer;
}

/* La casilla no se encoge con el texto que la acompaña. */
.lead-form__consent input {
	flex: 0 0 auto;
	margin-top: calc(var(--spacing-unit) * 1.5);
	width: 20px;
	height: 20px;
}

.lead-form__submit {
	margin-top: var(--spacing-xl);
}

/* ---------- El acuse ----------
 * Ocupa el lugar del formulario y dice qué sigue y en cuánto: un «gracias» sin
 * plazo deja a quien escribió sin saber si pasó algo. */

.lead-sent {
	margin-top: var(--spacing-xl);
	max-width: var(--spacing-measure);
	border-inline-start: 4px solid var(--color-state-success);
	padding: var(--spacing-lg);
	background: var(--color-surface-sunken);
}

/* Se le devuelve el foco al llegar, y no es un control que nadie haya elegido:
 * no dibuja anillo. */
.lead-sent:focus {
	outline: none;
}

.lead-sent h2 {
	margin-bottom: var(--spacing-xs);
}

.lead-sent__rush {
	margin-top: var(--spacing-md);
	font-size: var(--font-size-small);
	color: var(--ink-secondary);
}