/**
 * @layer utilities — página de Contacto: formulario, datos directos, mapa.
 *
 * `color`/`text-decoration` con !important: ver la nota en buttons.css.
 */

@layer utilities {
	.contacto-layout {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-8);
		padding-bottom: var(--space-8);
	}

	@media (width >= 900px) {
		.contacto-layout {
			grid-template-columns: 7fr 5fr;
			align-items: start;
		}
	}

	.contacto-form {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}

	.contacto-form__campo {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.contacto-form__campo label {
		font-size: var(--text-sm);
		color: var(--c-ink-700);
	}

	.contacto-form__campo input:not([type="checkbox"]),
	.contacto-form__campo select,
	.contacto-form__campo textarea {
		padding: var(--space-3) var(--space-4);
		border: 1px solid var(--c-ink-200);
		background: var(--c-white);
	}

	.contacto-form__campo input:focus-visible,
	.contacto-form__campo select:focus-visible,
	.contacto-form__campo textarea:focus-visible {
		outline: 2px solid var(--c-focus);
		outline-offset: 2px;
	}

	.contacto-form__campo.tiene-error input:not([type="checkbox"]),
	.contacto-form__campo.tiene-error select,
	.contacto-form__campo.tiene-error textarea {
		border-color: #a33;
	}

	.contacto-form__error {
		margin: 0;
		font-size: var(--text-sm);
		color: #a33;
		min-height: 1em;
	}

	.contacto-form__campo--checkbox label {
		display: flex;
		align-items: flex-start;
		gap: var(--space-3);
		font-size: var(--text-sm);
		color: var(--c-ink-500);
	}

	.contacto-form__campo--checkbox input {
		margin-top: 3px;
		flex-shrink: 0;
	}

	/* Honeypot: oculto para visitantes reales, visible sólo para bots que
	   completan todos los campos del formulario sin evaluar CSS. */
	.contacto-form__campo--honeypot {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.contacto-form__enviar {
		align-self: flex-start;
	}

	.contacto-form__mensaje {
		margin: 0;
		font-size: var(--text-sm);
	}

	.contacto-form__mensaje.es-exito {
		color: var(--c-accent-600);
	}

	.contacto-form__mensaje.es-error {
		color: #a33;
	}

	.contacto-directo {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}

	.contacto-directo h2 {
		font-size: var(--text-xl) !important;
	}

	.contacto-directo__lista {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		font-size: var(--text-base);
	}

	.contacto-directo__lista a {
		color: var(--c-ink-700) !important;
		text-decoration: none !important;
	}

	.contacto-directo__lista a:hover {
		color: var(--c-accent-600) !important;
	}

	.contacto-mapa {
		width: 100%;
		aspect-ratio: 4 / 3;
		background: var(--c-ink-100);
	}
}