/*
 * Estilos de la pagina de Contacto (formulario de citas de Fluent Forms).
 * Se encola solo en /contacto/. Usa las variables de paleta de functions.php.
 */

/* Oculta visualmente pero deja el texto disponible para lectores de pantalla
 * (identica a la de assets/css/sections.css; se repite aqui porque Contacto
 * no encola sections.css). La usa el <h1> de la pagina: el titulo de Blocksy
 * esta desactivado, asi que este <h1> no se ve, pero sigue existiendo para
 * SEO/accesibilidad. */
.rv-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.rv-contact-intro,
.rv-contact-alt {
	max-width: 720px;
	margin-inline: auto;
	color: var(--color-text-muted);
	text-align: center;
}

.rv-contact-alt {
	margin-top: 24px;
}

.rv-contact-alt a {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Tarjeta que envuelve el formulario. */
.rv-contact-card {
	max-width: 720px;
	margin-inline: auto;
	padding: 28px 20px;
	background: var(--color-secondary);
	border-radius: 16px;
	box-sizing: border-box;
}

.rv-contact-card .ff-el-input--label label {
	color: var(--color-primary);
	font-weight: 600;
}

.rv-contact-card .ff-el-form-control {
	border-radius: 10px;
	border: 1px solid rgba(26, 43, 74, .2);
	background: var(--color-bg);
	color: var(--color-primary);
}

.rv-contact-card .ff-el-form-control:focus {
	border-color: var(--color-primary);
	outline: 2px solid rgba(26, 43, 74, .15);
}

.rv-contact-card .ff-el-help-message {
	color: var(--color-text-muted);
}

.rv-contact-card .ff-btn-submit {
	font-weight: 700;
	padding: 12px 32px;
	border-radius: 999px;
}

.rv-contact-card .ff-message-success {
	background: var(--color-bg);
	border: 1px solid var(--color-accent);
	border-radius: 10px;
	color: var(--color-primary);
}

@media (min-width: 768px) {
	.rv-contact-card {
		padding: 36px;
	}
}