/* =======================================================================
   MEXAV — Página /contacto (formulario)
   =======================================================================
   Capa EXCLUSIVA de la vista Contacto. Se carga sólo en /contacto (ver
   header.tpl), después de mexav-public.css y mexav-site.css. Todo cuelga de
   `.mexav-contacto`, que no existe en ninguna otra plantilla: no toca Home,
   Registro ni FAQ.

   ORIGEN DE LAS MEDIDAS — export oficial CONTACTO.png (1920×1707 @1x)
   -------------------------------------------------------------------
     · bloque blanco ............... 1920×1585
     · columna ..................... x 462 → 1457 (996px) — CENTRADA
                                     (462 de margen a cada lado)
     · etiquetas ................... DM Sans Bold 19.7px, #EC5E2A
                                     tinta en y 132 / 272 / 414
     · iconos ...................... #EC5E2A, tinta 33×41 / 47×31 / 46×39
     · línea de input .............. 1px #000000 en y 229 y y 370
     · textarea .................... 996×271, #F3F3F3, y 520 → 790
     · botón ....................... 177×64, #000, y 834 → 897,
                                     "ENVIAR" en Munich 28.5px blanco
   La tinta del icono queda 15px por encima de la línea (campos 1 y 2) y
   20px por encima del textarea; ese es el anclaje que reproduce el ritmo.

   El export es un artboard: bajo el botón deja 688px vacíos, que NO son
   diseño. Se cierra el bloque con el mismo aire de arriba (132px), lo único
   que el export no determina.

   RESPONSIVE (mismo criterio aprobado en Home y FAQ)
   --------------------------------------------------
   1920→1200  proporción del viewport (coef = valor_1920 / 19.2) con clamp()
              cuyo máximo es el valor exacto del Figma. Las tipografías
              llevan un SUELO para que el formulario siga siendo usable.
   ≤1023      Tablet: columna al 100% con márgenes cómodos.
   ≤600       Mobile: mismos campos a ancho completo, botón sin pegarse al
              borde.
   ======================================================================= */

/* -----------------------------------------------------------------------
   1. SECCIÓN Y COLUMNA
   -------------------------------------------------------------------- */
.mexav-contacto {
	background-color: #ffffff;
	padding-block: 128.9px 132px;      /* 128.9 deja la tinta de la 1ª etiqueta
	                                      en y=132, la medida del export; abajo
	                                      se repite ese mismo aire (ver cabecera) */
}
.mexav-contacto__inner {
	width: 996px;                      /* ancho medido */
	max-width: 100%;
	margin-inline: auto;               /* 462px a cada lado @1920 */
}

/* Señuelo anti-bots: fuera de pantalla, nunca oculto con display:none (los
   bots lo detectan) y fuera del orden de tabulación. */
.mexav-contacto__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -----------------------------------------------------------------------
   2. CAMPOS
   -------------------------------------------------------------------- */
.mexav-contacto__field + .mexav-contacto__field { margin-top: 39.4px; }

.mexav-public .mexav-contacto__label {
	display: block;
	margin: 0 0 20.81px;
	color: #ec5e2a;
	font-family: "DM Sans", system-ui, sans-serif;
	font-weight: 700;
	font-size: 19.7px;
	line-height: 1;
}

/* Cada campo ancla su fila a la tinta del icono, no a su caja: por eso la
   separación etiqueta→fila cambia entre campos (los tres glifos tienen
   alturas distintas y el export los apoya sobre una misma línea). */
.mexav-public .mexav-contacto__field--correo  .mexav-contacto__label { margin-bottom: 28.9px; }
.mexav-public .mexav-contacto__field--mensaje .mexav-contacto__label { margin-bottom: 26px; }

/* Fila icono + input, con la línea inferior del diseño. */
.mexav-contacto__control {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	padding-bottom: 15px;              /* tinta del icono 15px sobre la línea */
	border-bottom: 1px solid #000000;
}
.mexav-contacto__control--plano {
	padding-bottom: 20px;              /* el mensaje: 20px hasta el textarea */
	border-bottom: 0;
}

.mexav-public .mexav-contacto__icon {
	flex: 0 0 auto;
	display: block;
	color: #ec5e2a;
	line-height: 1;
	/* Tamaño calibrado para que la TINTA del glifo mida el alto del export
	   (41 / 31 / 39 px). Los márgenes negativos van en `em` —así siguen al
	   font-size en todo el responsive— y sirven para dos cosas:
	     · margin-bottom → apoya la tinta (no la caja) sobre la línea;
	     · margin-left   → cancela el bearing izquierdo del glifo, para que la
	       tinta arranque exactamente en el borde de la columna (x=462). */
	font-size: 49.2px;
	margin-bottom: -0.0937em;
	margin-left: -0.1288em;
}
.mexav-public .mexav-contacto__field--correo .mexav-contacto__icon {
	font-size: 43.7px;
	margin-bottom: -0.1419em;
	margin-left: -0.0828em;
}
.mexav-public .mexav-contacto__field--mensaje .mexav-contacto__icon {
	font-size: 46.8px;
	margin-bottom: -0.0727em;
	margin-left: -0.0831em;
}

.mexav-public .mexav-contacto__input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0 0 4px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #16161a;
	font-family: "DM Sans", system-ui, sans-serif;
	font-size: 19.7px;
	line-height: 1.3;
}
.mexav-public .mexav-contacto__input:focus,
.mexav-public .mexav-contacto__textarea:focus {
	outline: 2px solid #ec5e2a;
	outline-offset: 3px;
}

.mexav-public .mexav-contacto__textarea {
	display: block;
	width: 100%;
	height: 271px;                     /* alto medido */
	margin: 0;
	padding: 16px 18px;
	background: #f3f3f3;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	resize: vertical;
	color: #16161a;
	font-family: "DM Sans", system-ui, sans-serif;
	font-size: 19.7px;
	line-height: 1.5;
}

/* -----------------------------------------------------------------------
   3. ERRORES Y AVISO GLOBAL
   -------------------------------------------------------------------- */
.mexav-public .mexav-contacto__error {
	margin: 8px 0 0;
	color: #ef4123;
	font-family: "DM Sans", system-ui, sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.35;
}
.mexav-contacto__error[hidden] { display: none; }

/* Estado inválido: la línea y la caja del textarea se tiñen de rojo. */
.mexav-contacto__control.is-invalid { border-bottom-color: #ef4123; }
.mexav-public .mexav-contacto__textarea.is-invalid { box-shadow: inset 0 0 0 1px #ef4123; }

.mexav-public .mexav-contacto__feedback {
	margin: 24px 0 0;
	padding: 14px 18px;
	background: #f3f3f3;
	color: #16161a;
	font-family: "DM Sans", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.45;
}
.mexav-contacto__feedback[hidden] { display: none; }
.mexav-public .mexav-contacto__feedback.is-ok    { background: #f2f8f2; color: #1d6b2a; }
.mexav-public .mexav-contacto__feedback.is-error { background: #fdeee9; color: #b0301a; }

/* -----------------------------------------------------------------------
   4. BOTÓN
   -------------------------------------------------------------------- */
.mexav-public .mexav-contacto__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 177px;                      /* caja medida */
	height: 64px;
	margin-top: 43px;                  /* 791 → 834 */
	padding: 0;
	background: #000000;
	border: 0;
	border-radius: 0;
	color: #ffffff;
	font-family: var(--mx-font-display);
	font-weight: 700;
	font-size: 28.5px;
	line-height: 1;
	letter-spacing: 0;
	cursor: pointer;
}
.mexav-public .mexav-contacto__submit:hover { background: #1a1a1a; color: #ffffff; }
.mexav-public .mexav-contacto__submit:focus-visible { outline: 2px solid #ec5e2a; outline-offset: 3px; }
.mexav-public .mexav-contacto__submit[disabled] { opacity: 0.55; cursor: progress; }

/* =======================================================================
   5. DESKTOP/LAPTOP FLUIDO (1920 → 1200)
   -----------------------------------------------------------------------
   Coeficiente = valor_1920 / 19.2. La geometría escala completa; las
   tipografías llevan suelo (un label de 12px o un input de 12px serían
   inusables, y el formulario debe poder rellenarse).
   ======================================================================= */
@media (min-width: 1024px) {
	.mexav-contacto { padding-block: clamp(80.6px, 6.714vw, 128.9px) clamp(82.5px, 6.875vw, 132px); }
	.mexav-contacto__inner { width: clamp(622.5px, 51.875vw, 996px); }
	.mexav-contacto__field + .mexav-contacto__field { margin-top: clamp(24.6px, 2.052vw, 39.4px); }
	.mexav-public .mexav-contacto__label {
		margin-bottom: clamp(13px, 1.084vw, 20.81px);
		font-size: clamp(14px, 1.026vw, 19.7px);
	}
	.mexav-public .mexav-contacto__field--correo  .mexav-contacto__label { margin-bottom: clamp(18.1px, 1.505vw, 28.9px); }
	.mexav-public .mexav-contacto__field--mensaje .mexav-contacto__label { margin-bottom: clamp(16.3px, 1.354vw, 26px); }
	.mexav-contacto__control { gap: clamp(10px, 0.833vw, 16px); padding-bottom: clamp(9.4px, 0.781vw, 15px); }
	.mexav-contacto__control--plano { padding-bottom: clamp(12.5px, 1.042vw, 20px); }
	.mexav-public .mexav-contacto__icon { font-size: clamp(30.8px, 2.563vw, 49.2px); }
	.mexav-public .mexav-contacto__field--correo .mexav-contacto__icon { font-size: clamp(27.3px, 2.276vw, 43.7px); }
	.mexav-public .mexav-contacto__field--mensaje .mexav-contacto__icon { font-size: clamp(29.3px, 2.438vw, 46.8px); }
	.mexav-public .mexav-contacto__input { font-size: clamp(15px, 1.026vw, 19.7px); }
	.mexav-public .mexav-contacto__textarea {
		height: clamp(169.4px, 14.115vw, 271px);
		font-size: clamp(15px, 1.026vw, 19.7px);
	}
	.mexav-public .mexav-contacto__submit {
		width: clamp(110.6px, 9.219vw, 177px);
		height: clamp(40px, 3.333vw, 64px);
		margin-top: clamp(26.9px, 2.24vw, 43px);
		font-size: clamp(18px, 1.484vw, 28.5px);
	}
}

/* =======================================================================
   6. TABLET (≤1023) — columna al 100% con márgenes cómodos
   ======================================================================= */
@media (max-width: 1023px) {
	.mexav-contacto { padding-block: clamp(48px, 6vw, 62px) clamp(56px, 7vw, 72px); }
	.mexav-contacto__inner {
		width: 100%;
		padding-inline: clamp(32px, 5vw, 52px);
	}
	.mexav-contacto__field + .mexav-contacto__field { margin-top: 26px; }
	.mexav-public .mexav-contacto__label { margin-bottom: 14px; font-size: clamp(16px, 1.9vw, 19px); }
	.mexav-public .mexav-contacto__field--correo  .mexav-contacto__label { margin-bottom: 18px; }
	.mexav-public .mexav-contacto__field--mensaje .mexav-contacto__label { margin-bottom: 16px; }
	.mexav-contacto__control { gap: 14px; padding-bottom: 12px; }
	.mexav-contacto__control--plano { padding-bottom: 16px; }
	.mexav-public .mexav-contacto__icon { font-size: 38px; }
	.mexav-public .mexav-contacto__field--correo .mexav-contacto__icon { font-size: 34px; }
	.mexav-public .mexav-contacto__field--mensaje .mexav-contacto__icon { font-size: 36px; }
	.mexav-public .mexav-contacto__input { font-size: 17px; }
	.mexav-public .mexav-contacto__textarea { height: 220px; font-size: 17px; }
	.mexav-public .mexav-contacto__submit {
		width: 160px;
		height: 56px;
		margin-top: 34px;
		font-size: 25px;
	}
}

/* =======================================================================
   7. MOBILE (≤600)
   ======================================================================= */
@media (max-width: 600px) {
	.mexav-contacto { padding-block: 40px 48px; }
	.mexav-contacto__inner { padding-inline: 24px; }
	.mexav-contacto__field + .mexav-contacto__field { margin-top: 22px; }
	.mexav-public .mexav-contacto__label { font-size: 16px; }
	.mexav-contacto__control { gap: 12px; padding-bottom: 10px; }
	.mexav-public .mexav-contacto__icon { font-size: 32px; }
	.mexav-public .mexav-contacto__field--correo .mexav-contacto__icon { font-size: 28px; }
	.mexav-public .mexav-contacto__field--mensaje .mexav-contacto__icon { font-size: 30px; }
	/* 16px evita el zoom automático de iOS al enfocar. */
	.mexav-public .mexav-contacto__input { font-size: 16px; }
	.mexav-public .mexav-contacto__textarea { height: 180px; font-size: 16px; }
	.mexav-public .mexav-contacto__submit { width: 100%; max-width: 220px; height: 52px; margin-top: 28px; font-size: 23px; }
}

/* ---- ≤428: sólo se aprieta el carril ---- */
@media (max-width: 428px) {
	.mexav-contacto__inner { padding-inline: 20px; }
	.mexav-public .mexav-contacto__textarea { height: 160px; }
}