/**
 * Formulario de contacto.
 */

.autum-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
	background-color: var(--superficie-card);
	border: 1px solid var(--borde);
	border-radius: 12px;
	box-shadow: var(--sombra-card);
}

@media (min-width: 768px) {
	.autum-form {
		padding: 2rem;
	}
}

.autum-form__titulo {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--texto);
}

.autum-form__fila {
	display: grid;
	gap: 1rem;
}

@media (min-width: 640px) {
	.autum-form__fila {
		grid-template-columns: 1fr 1fr;
	}
}

.autum-form__campo {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.autum-form__campo label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--texto);
}

.autum-form__campo label span[aria-hidden] {
	color: var(--color-derco-red);
}

.autum-form__opcional {
	font-weight: 400;
	color: var(--texto-tenue);
}

.autum-form__campo input,
.autum-form__campo select,
.autum-form__campo textarea {
	width: 100%;
	padding: 0.6875rem 0.875rem;
	background-color: var(--superficie);
	border: 1px solid var(--borde-fuerte);
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--texto);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.autum-oscuro .autum-form__campo input,
.autum-oscuro .autum-form__campo select,
.autum-oscuro .autum-form__campo textarea {
	background-color: rgba(0, 0, 0, 0.4);
}

.autum-form__campo textarea {
	resize: vertical;
	min-height: 4.5rem;
}

.autum-form__campo input::placeholder,
.autum-form__campo textarea::placeholder {
	color: var(--texto-tenue);
}

.autum-form__campo input:focus,
.autum-form__campo select:focus,
.autum-form__campo textarea:focus {
	outline: none;
	border-color: var(--color-derco-red);
	box-shadow: 0 0 0 3px rgba(228, 2, 43, 0.15);
}

.autum-form__campo input:user-invalid,
.autum-form__campo textarea:user-invalid {
	border-color: var(--color-derco-red);
}

/* El honeypot no puede usar display:none: algunos bots lo detectan. */
.autum-form__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.autum-form__acciones {
	margin-top: 0.25rem;
}

.autum-form__acciones .autum-btn {
	width: 100%;
}

@media (min-width: 640px) {
	.autum-form__acciones .autum-btn {
		width: auto;
	}
}

.autum-form__aviso {
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.autum-form__aviso--ok {
	background-color: rgba(16, 141, 66, 0.08);
	border: 1px solid rgba(16, 141, 66, 0.35);
	color: #0c6b32;
}

.autum-form__aviso--error {
	background-color: rgba(228, 2, 43, 0.07);
	border: 1px solid rgba(228, 2, 43, 0.35);
	color: #a30020;
}

.autum-oscuro .autum-form__aviso--ok {
	color: #7ff0ab;
}

.autum-oscuro .autum-form__aviso--error {
	color: #ff8fa3;
}

.autum-form__legal {
	margin: 0;
	color: var(--texto-tenue);
}