/**
 * Contáctame — dos columnas: canales directos y formulario.
 *
 * Portado de la vista `/contacto` de Lovable. Equivalencias Tailwind → px:
 * py-20=80 · gap-16=64 · mt-10=40 · mt-5=20 · mt-4=16 · p-8=32 · p-5=20
 * text-5xl=48 · text-sm=14 · text-xs=12 · space-y-4=16 · gap-2=8
 *
 * ⚠ Todo en px, nunca rem: OceanWP declara `html { font-size: 62.5% }`.
 *
 * El contenedor y los antetítulos vienen de components.css y typography.css.
 */

.ms-contacto {
	padding-block: clamp(56px, 8vw, 80px);
}

.ms-contacto__grid {
	display: grid;
	gap: 40px;
}

@media (min-width: 900px) {

	.ms-contacto__grid {
		grid-template-columns: 0.9fr 1.1fr;
		align-items: start;
		gap: 64px;
	}
}

.ms-contacto__info {
	min-width: 0;
}

.ms-contacto__title {
	margin: 16px 0 0;
	font-family: var(--ms-font-display);
	font-size: clamp(34px, 4.6vw, 48px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

.ms-contacto__text {
	margin: 20px 0 0;
	max-width: 576px;
	font-size: 14px;
	line-height: 1.75;
	color: var(--ms-muted-foreground);
}

/* -------------------------------------------------------------------------
 * 1. Canales directos
 * ---------------------------------------------------------------------- */

.ms-contacto__canales {
	display: grid;
	gap: 16px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.ms-contacto__canal-item {
	margin: 0;
}

.ms-contacto__canal {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	border: 1px solid var(--ms-border);
	background-color: var(--ms-card);
	color: var(--ms-foreground);
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.ms-contacto__canal:hover,
.ms-contacto__canal:focus-visible {
	border-color: var(--ms-primary);
	color: var(--ms-foreground);
}

.ms-contacto__canal:focus-visible {
	outline: 2px solid var(--ms-primary);
	outline-offset: 2px;
}

.ms-contacto__icono {
	flex: 0 0 auto;
	color: var(--ms-primary);
}

.ms-contacto__canal-body {
	min-width: 0;
}

.ms-contacto__canal-title {
	display: block;
	font-size: 14px;
	line-height: 1.5;
}

/* El dato (número, correo, usuario) puede ser largo: que parta sin desbordar. */
.ms-contacto__canal-valor {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ms-muted-foreground);
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
 * 2. Etiquetas de las líneas
 * ---------------------------------------------------------------------- */

.ms-contacto__etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.ms-contacto__etiqueta {
	margin: 0;
	padding: 8px 16px;
	font-family: var(--ms-font-sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: var(--ms-tracking-ui, 0.12em);
	line-height: 1.4;
	text-transform: uppercase;
}

.ms-contacto__etiqueta--verde {
	background-color: var(--ms-verde-soft);
	color: var(--ms-verde-ink);
}

.ms-contacto__etiqueta--durazno {
	background-color: var(--ms-durazno-soft);
	color: var(--ms-durazno-ink);
}

.ms-contacto__etiqueta--azul {
	background-color: var(--ms-azul-soft);
	color: var(--ms-azul-ink);
}

.ms-contacto__etiqueta--arte {
	background-color: var(--ms-arte-soft);
	color: var(--ms-arte-ink);
}

/* -------------------------------------------------------------------------
 * 3. Tarjeta del formulario
 * ---------------------------------------------------------------------- */

.ms-contacto__form {
	min-width: 0;
	padding: 32px;
	border: 1px solid var(--ms-border);
	background-color: var(--ms-card);
}

@media (max-width: 599px) {

	.ms-contacto__form {
		padding: 24px;
	}
}

/* Respaldo cuando Forminator no está activo. */
.ms-contacto__form-aviso-title {
	margin: 0;
	font-family: var(--ms-font-display);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
}

.ms-contacto__form-aviso-text {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.75;
	color: var(--ms-muted-foreground);
}

.ms-contacto__form-aviso-admin {
	margin: 16px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--ms-destructive);
}

/* -------------------------------------------------------------------------
 * 4. Forminator dentro de la tarjeta
 *
 * Forminator imprime su diseño con selectores que incluyen el ID del
 * formulario (`.forminator-ui#forminator-module-176…`) y además lo inyecta
 * en línea en la página, así que se evalúa siempre después y con más
 * especificidad que este archivo. Por eso —y solo aquí— se usa `!important`:
 * es la única forma de vestir el formulario sin tocar el plugin.
 *
 * Si Moni cambia el formulario, el CSS sigue valiendo: se apoya en las clases
 * genéricas de Forminator (`forminator-label`, `forminator-input`…), no en el
 * número de campos ni en su orden.
 * ---------------------------------------------------------------------- */

.ms-contacto__form .forminator-ui {
	font-family: var(--ms-font-sans) !important;
	color: var(--ms-foreground) !important;
}

/* Título y descripción propios del formulario, si los tuviera. */
.ms-contacto__form .forminator-ui .forminator-title {
	font-family: var(--ms-font-display) !important;
	font-size: 30px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--ms-foreground) !important;
}

.ms-contacto__form .forminator-ui .forminator-subtitle,
.ms-contacto__form .forminator-ui .forminator-description {
	font-family: var(--ms-font-sans) !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	color: var(--ms-muted-foreground) !important;
}

.ms-contacto__form .forminator-ui .forminator-row {
	margin-bottom: 24px !important;
}

.ms-contacto__form .forminator-ui .forminator-row:last-child {
	margin-bottom: 0 !important;
}

/* Etiquetas: el mismo antetítulo del resto del sitio. */
.ms-contacto__form .forminator-ui .forminator-label {
	display: block !important;
	margin-bottom: 8px !important;
	font-family: var(--ms-font-sans) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: var(--ms-tracking-eyebrow, 0.22em) !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	color: var(--ms-muted-foreground) !important;
}

/* Campos: rectángulos de esquina viva, fondo crema y borde del tema. */
.ms-contacto__form .forminator-ui .forminator-input,
.ms-contacto__form .forminator-ui .forminator-textarea,
.ms-contacto__form .forminator-ui select.forminator-select,
.ms-contacto__form .forminator-ui select.forminator-select--field,
.ms-contacto__form .forminator-ui .forminator-select2 .select2-selection {
	width: 100% !important;
	padding: 12px 16px !important;
	border: 1px solid var(--ms-input) !important;
	border-radius: 0 !important;
	background-color: var(--ms-background) !important;
	box-shadow: none !important;
	font-family: var(--ms-font-sans) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--ms-foreground) !important;
	transition: border-color 0.2s ease !important;
}

.ms-contacto__form .forminator-ui .forminator-input,
.ms-contacto__form .forminator-ui select.forminator-select,
.ms-contacto__form .forminator-ui select.forminator-select--field,
.ms-contacto__form .forminator-ui .forminator-select2 .select2-selection {
	height: 48px !important;
}

.ms-contacto__form .forminator-ui .forminator-textarea {
	min-height: 150px !important;
	height: auto !important;
	resize: vertical !important;
}

.ms-contacto__form .forminator-ui .forminator-input:focus,
.ms-contacto__form .forminator-ui .forminator-textarea:focus,
.ms-contacto__form .forminator-ui select.forminator-select:focus,
.ms-contacto__form .forminator-ui select.forminator-select--field:focus,
.ms-contacto__form .forminator-ui .forminator-select2.select2-container--focus .select2-selection {
	border-color: var(--ms-primary) !important;
	outline: none !important;
	box-shadow: none !important;
}

.ms-contacto__form .forminator-ui .forminator-input::placeholder,
.ms-contacto__form .forminator-ui .forminator-textarea::placeholder {
	color: var(--ms-muted-foreground) !important;
	opacity: 1 !important;
}

/* El desplegable de Forminator (select2) hereda la misma caja. */
.ms-contacto__form .forminator-ui .forminator-select2 .select2-selection__rendered {
	padding: 0 !important;
	line-height: 24px !important;
	color: var(--ms-foreground) !important;
}

.ms-contacto__form .forminator-ui .forminator-select2 .select2-selection__placeholder {
	color: var(--ms-muted-foreground) !important;
}

.ms-contacto__form .forminator-ui .forminator-select2 .select2-selection__arrow {
	height: 46px !important;
}

/* Botón de envío: el verde de marca, a todo el ancho. */
.ms-contacto__form .forminator-ui .forminator-button-submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 0 !important;
	padding: 16px 24px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: var(--ms-primary) !important;
	color: var(--ms-primary-foreground) !important;
	font-family: var(--ms-font-sans) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	transition: opacity 0.2s ease !important;
}

.ms-contacto__form .forminator-ui .forminator-button-submit:hover,
.ms-contacto__form .forminator-ui .forminator-button-submit:focus {
	background-color: var(--ms-primary) !important;
	color: var(--ms-primary-foreground) !important;
	opacity: 0.9 !important;
}

.ms-contacto__form .forminator-ui .forminator-button-submit:focus-visible {
	outline: 2px solid var(--ms-verde-ink) !important;
	outline-offset: 3px !important;
}

/* Errores y mensaje de respuesta. */
.ms-contacto__form .forminator-ui .forminator-error-message {
	margin-top: 8px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
	color: var(--ms-destructive) !important;
}

.ms-contacto__form .forminator-ui .forminator-input.forminator-has_error,
.ms-contacto__form .forminator-ui .forminator-textarea.forminator-has_error {
	border-color: var(--ms-destructive) !important;
}

.ms-contacto__form .forminator-ui .forminator-response-message {
	margin: 0 0 24px !important;
	padding: 16px 20px !important;
	border: 1px solid var(--ms-border) !important;
	border-left: 3px solid var(--ms-primary) !important;
	border-radius: 0 !important;
	background-color: var(--ms-verde-soft) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: var(--ms-verde-ink) !important;
}

.ms-contacto__form .forminator-ui .forminator-response-message.forminator-error {
	border-left-color: var(--ms-destructive) !important;
	background-color: var(--ms-secondary) !important;
	color: var(--ms-foreground) !important;
}

.ms-contacto__form .forminator-ui .forminator-response-message p {
	margin: 0 !important;
}