/* ==========================================================================
   Página Contacto
   ==========================================================================
   Coordenadas contra el lienzo de 1440px del PSD (spec-contacto.md /
   psd-contacto.json), mismo criterio que .ec-servicio-contenedor en
   style.css: un contenedor con max-width:90rem centrado, padding-left/
   right tomados tal cual de las x del PSD.

   El CSS del padre (mymedi) da a TODO input/textarea un aspecto de
   "píldora" (fondo #F0F2F5, radio 60px, padding 10px/25px -- ver
   preview/real/1-reset.css, selector "html input[type^=text], ...").
   Esa regla pesa (0,1,2): dos tipos (html + input) más el atributo
   [type^=...]. Nuestro selector de un solo tipo -- ".clase input", (0,1,1)
   -- pierde por especificidad, NO por !important (ese solo lo lleva
   filter, aquí irrelevante): así que basta con iguala/superar esa cuenta
   con el prefijo "html body" en vez de recurrir a !important -- ver la
   sección "Campos" más abajo.

   El <textarea> es distinto: su radio de 25px SÍ viene con !important
   propio (2-mymedi.css, selector "textarea, ..."), y eso ninguna
   especificidad lo gana. Por eso el campo Mensaje dibuja su línea en el
   <div> contenedor en vez de en el propio <textarea> -- ver
   .ec-contacto-campo--mensaje más abajo: un <div> nunca hereda estilos de
   input/textarea del padre, así que ahí no hay nada que pelear.
   ========================================================================== */

:root {
	/* Colores de esta página sin token ya existente en style.css (que esta
	   ronda no se toca -- es de Inicio). Mismo criterio que ese archivo:
	   los hex de esta hoja viven aquí, no sueltos más abajo. */
	--ec-contacto-borde: #DADADA; /* subrayado de los campos -- Rectángulo 14 del PSD */
	--ec-contacto-gris-claro: #969696; /* texto de la casilla "Acepto..." */
	/* Círculos de redes y casilla: el PNG plano (fuente de verdad, ver el
	   reporte) los muestra blancos con borde gris fino -- psd-contacto.json
	   trae #2F2F2F para "Elipse 5 copia 3", pero esa capa no es la que se ve
	   en el render final (máscara o estilo de capa que el extractor no lee).
	   Grises muestreados a mano del PNG, no del JSON, por eso. */
	--ec-contacto-red-borde: #AAAAAA; /* borde del círculo, ~1px */
	--ec-contacto-casilla-borde: #CBCBCB; /* borde de la casilla sin marcar, PNG entre #C8C8C8 y #CECECE */
	--ec-contacto-exito-fondo: #EAF7EE;
	--ec-contacto-exito-borde: #2E7D32;
	--ec-contacto-exito-texto: #1B5E20;
	--ec-contacto-error-fondo: #FDECEA;
	--ec-contacto-error-texto: #7A1F0E;
}

/* --------------------------------------------------------------------------
   Hero corto -- modificador de templates/partes/hero.php (compartido con
   Servicios/Industrias/Página de texto, ver style.css).
   --------------------------------------------------------------------------
   265px, no 417px (el de Servicios) ni "auto" (el de Página de texto): el
   PSD mide el slider completo en x0..1440 × y0..265 (ver spec-contacto.md).
   La foto (assets/img/contacto/hero-contacto.webp) se exportó ya recortada
   a 1440×265 -- compuesta directamente desde el PSD (grupo "slider" con la
   capa de texto y la flecha ocultas, con Python + psd-tools), así que llega
   con su oscurecido de origen ya incluido: NO lleva la capa negra al 40%
   que sí usan Servicios/Industrias (--ec-hero-capa a 0, como hace
   .ec-servicio-hero--texto) -- con esa capa encima se ve más oscura que el
   PSD.
   -------------------------------------------------------------------------- */
.ec-servicio-hero--contacto {
	height: 16.5625rem; /* 265px */
}

.ec-servicio-hero--contacto .ec-servicio-hero-capa {
	--ec-hero-capa: 0;
}

/* padding-bottom: con flex-direction:column + justify-content:flex-end (regla
   compartida), esto ancla el contenido a "alto del hero − este valor" desde
   arriba. Verificado con ecVerificarPSD() contra el PSD (no el cálculo
   teórico de 52px de la flecha, que dejaba el título 10px alto de más --
   el interlineado real de Outfit en este tamaño no coincide exacto con la
   proyección de .ec-servicio-hero-titulo). */
.ec-servicio-hero--contacto .ec-servicio-hero-contenido {
	padding-bottom: 2.625rem; /* 42px */
}

/* El primer carácter, «¿», deja una pequeña separación en blanco en este
   peso/tamaño de Outfit que las demás páginas (que no empiezan con ese
   signo) no tienen -- verificado con ecVerificarPSD(), no una corrección a
   ciegas: sin este ajuste el título queda 4px a la izquierda del PSD. */
.ec-servicio-hero--contacto .ec-servicio-hero-titulo {
	margin-left: 0.1em;
}

/* --------------------------------------------------------------------------
   Contenedor y rejilla de dos columnas — Datos de Contacto | Formulario
   -------------------------------------------------------------------------- */

.ec-contacto-contenedor {
	max-width: 90rem; /* 1440px, tope del diseño -- mismo criterio que .ec-servicio-contenedor */
	margin: 0 auto;
	background-color: var(--ec-blanco);
}

.ec-contacto-columnas {
	display: grid;
	/* 21.5rem (344px) + 5.625rem (90px) de separación = 434px antes de la
	   columna del formulario -- con el padding-left de 81px de abajo, la
	   columna del formulario arranca en x515, la del PSD (grupo
	   "formulario", x515..1363 -- ver psd-contacto.json). 1fr resuelve
	   entonces a 848px, el ancho real de esa columna. */
	grid-template-columns: 21.5rem 1fr;
	column-gap: 5.625rem;
	align-items: start; /* cada columna con su propio padding-top -- ver abajo -- no debe estirarse a la altura de la otra */
	padding: 0 4.8125rem 5rem 5.0625rem; /* 81px izq. / 77px der. (x del PSD), 80px de aire antes de los mapas */
}

/* --------------------------------------------------------------------------
   Columna «Datos de Contacto»
   -------------------------------------------------------------------------- */

.ec-contacto-datos {
	padding-top: 4.8125rem; /* 77px -- ajustado con ecVerificarPSD() contra el cálculo teórico de 83px */
	min-width: 0;
}

.ec-contacto-datos-titulo {
	margin: 0 0 1.5rem; /* 24px hasta la dirección -- ajustado con ecVerificarPSD() */
	font-size: 2.5375rem; /* 40.6px */
	font-weight: var(--ec-peso-medium); /* Outfit Medium */
	letter-spacing: -0.04em; /* -40 milésimas de em, PSD */
	color: var(--ec-texto); /* #1C1C1C */
}

.ec-contacto-direccion,
.ec-contacto-correo {
	margin: 0;
	font-size: 1.146875rem; /* 18.35px */
	font-weight: var(--ec-peso-regular);
	color: var(--ec-texto-secundario); /* #6A6A6A */
}

.ec-contacto-direccion {
	margin-bottom: 1.5rem; /* ajustado con ecVerificarPSD() */
	max-width: 21rem; /* envuelve a 3 líneas como el PSD (caja de 332px) */
	line-height: 1.605625rem; /* 25.69px -- multilínea, verificado por ecVerificarPSD */
}

.ec-contacto-correo {
	margin-bottom: 1.3125rem; /* ajustado con ecVerificarPSD() */
	line-height: 1.5; /* una sola línea -- el PSD no exige un interlineado concreto aquí */
}

/* Lista de oficinas -- ec_oficinas() (inc/contacto.php), hasta 4 filas,
   pero el número real puede ser menor si alguna oficina se queda sin
   teléfono desde el Personalizador (esa función ya las filtra). El
   contenedor lleva el peso/color del NOMBRE (negrita, negro puro) porque
   así lo mide el PSD en su primer tramo -- el teléfono se sobreescribe
   por separado, ver .ec-contacto-oficina-telefono. */
.ec-contacto-oficinas {
	margin: 0 0 3.6875rem; /* 59px hasta los círculos de redes */
	font-size: 1.146875rem; /* 18.35px */
	font-weight: var(--ec-peso-bold);
	line-height: 1.605625rem; /* 25.69px -- multilínea */
	color: var(--ec-negro-oficina); /* #000000 */
}

.ec-contacto-oficinas p {
	margin: 0;
}

.ec-contacto-oficina-nombre {
	text-transform: uppercase; /* CDMX/MÉRIDA/MORELOS/OAXACA -- en mayúsculas pase lo que pase como se haya guardado el nombre en el Personalizador */
}

.ec-contacto-oficina-telefono {
	margin-left: 0.25em;
	font-weight: var(--ec-peso-regular);
	color: var(--ec-texto-secundario); /* #6A6A6A */
}

/* Redes sociales -- 3 círculos blancos con borde gris fino e icono negro
   (Font Awesome, ya la usa ec_shortcode_whatsapp() en functions.php) --
   ver el porqué del color en el token --ec-contacto-red-borde, arriba. Un
   círculo por red con URL en el Personalizador -- igual que
   ec_redes_header(), una red sin URL simplemente no imprime su círculo. */
.ec-contacto-redes {
	display: flex;
	gap: 0.6875rem; /* 11px: con el círculo de 52px, paso de 63px (x77/140/203 del PSD) */
	/* 4px a la izquierda del resto de la columna -- el PSD no alinea el
	   borde de los círculos con el del título/dirección/oficinas de encima
	   (x77 contra x81). Ajustado con ecVerificarPSD(). */
	margin-left: -0.25rem; /* -4px */
}

.ec-contacto-red {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem; /* 52px */
	height: 3.3125rem; /* 53px */
	border-radius: 50%;
	background-color: var(--ec-blanco);
	border: 1px solid var(--ec-contacto-red-borde);
	color: var(--ec-negro-oficina); /* icono negro -- token ya usado en esta hoja para negro puro */
	font-size: 1.125rem;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ec-contacto-red:hover,
.ec-contacto-red:focus-visible {
	background-color: var(--ec-naranja);
	border-color: var(--ec-naranja);
	color: var(--ec-blanco);
}

.ec-contacto-red:focus-visible {
	outline: 2px solid var(--ec-texto);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Formulario
   -------------------------------------------------------------------------- */

.ec-contacto-formulario {
	position: relative; /* contexto de posicionamiento del campo trampa, ver abajo */
	padding-top: 7.375rem; /* 118px = 83px (arranque de la columna de al lado) + 35px (el formulario arranca 35px más abajo en el PSD) */
	min-width: 0;
}

/* Campo trampa (honeypot) -- oculto a la vista y a lectores de pantalla
   (aria-hidden en el propio contenedor, en la plantilla), fuera del
   tabulado (tabindex="-1" en el input). 1×1px + overflow:hidden en vez de
   left:-9999px: así nunca puede producir scroll horizontal aunque este
   contenedor no tuviera ancestro con position propio. */
.ec-contacto-trampa {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.ec-contacto-campos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 4.875rem; /* 78px -- ver el reporte para el cálculo */
	/* Subió 11px al quitarle a input/textarea su borde propio (ver la
	   cabecera del archivo): cada fila mide 2px menos y ese hueco ya no lo
	   pone el borde, hay que devolvérselo aquí -- verificado con
	   ecVerificarPSD(). */
	row-gap: 5.0625rem; /* 81px */
}

.ec-contacto-campo {
	position: relative; /* referencia del ::after de la línea, ver abajo */
	display: flex;
	align-items: flex-end;
	/* padding-left + gap: 12px del borde de la columna al icono, 12px del
	   icono a la etiqueta -- las 4 filas del PSD no traen exactamente el
	   mismo hueco (9-15px según el icono), así que se promedia a un valor
	   único y se ajustó con ecVerificarPSD() en vez de perseguir cada
	   variación por separado (más robusto: un solo valor para las 4 filas,
	   no cuatro números "a medida" frágiles ante cualquier cambio de icono). */
	padding-left: 0.75rem;
	gap: 0.75rem;
}

/* La línea del campo (Rectángulo 14 del PSD) corre de borde a borde de TODA
   la fila -- por debajo del icono también, no solo del texto (x517 del PSD
   arranca antes que el propio <input>, que empieza pasado el icono) -- y
   cae claramente más abajo que el texto (no pegada a él, unos 18px de
   hueco propio, medido del PNG). Un ::after absoluto, no un borde de
   .ec-contacto-campo: un borde real habría que sumarlo a su alto y eso
   empuja la fila de abajo entera -- así, el hueco es solo visual, no de
   layout, y las filas siguientes no se mueven. Mismo motivo por el que el
   mensaje (grid-column:1/-1, modificador de abajo) hereda una línea que
   cruza las dos columnas sin ninguna regla de posición aparte -- solo
   ajusta su propio "bottom", ver .ec-contacto-campo--mensaje::after. */
.ec-contacto-campo::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1.125rem; /* 18px por debajo del pie del icono/control */
	height: 0.125rem; /* 2px */
	background-color: var(--ec-contacto-borde);
	transition: background-color 0.2s ease;
}

/* Foco visible, pedido por el encargo -- en el contenedor (:focus-within),
   no en el <input>: la línea ya no es suya, ver arriba. */
.ec-contacto-campo:focus-within::after {
	background-color: var(--ec-naranja);
}

/* Modificador DESPUÉS de la regla base -- misma especificidad (una sola
   clase cada una), así que el orden en el archivo es lo que decide cuál
   gana; tiene que venir aquí para poder pisar el padding-left de arriba. */
.ec-contacto-campo--mensaje {
	grid-column: 1 / -1;
	/* Hueco propio, no el row-gap general de la rejilla: el salto de la fila
	   2 (Teléfono/Asunto) a esta fila es MENOR que el de la fila 1 a la 2 --
	   ver el reporte. Un row-gap uniforme no puede dar dos huecos distintos
	   a la vez, así que este margen negativo resta del row-gap solo aquí. */
	margin-top: -1.3125rem; /* 21px menos, ajustado con ecVerificarPSD() */
	padding-left: 0.375rem; /* 6px menos que el resto de los campos -- ajustado con ecVerificarPSD() */
}

/* Esta línea cae más lejos del texto que las demás filas (y431..438/
   y542..549 contra y650..655 del PSD -- el hueco no es parejo entre
   filas, ver el reporte) -- valor propio en vez del heredado de
   .ec-contacto-campo::after. */
.ec-contacto-campo--mensaje::after {
	bottom: -3.0625rem; /* 49px */
}

.ec-contacto-campo-icono {
	flex-shrink: 0;
	margin-bottom: 0.5rem; /* alinea ópticamente con la línea base del texto, no con el subrayado */
	color: var(--ec-texto-secundario); /* los SVG usan stroke/fill="currentColor" */
}

.ec-contacto-campo-control {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

/* Campos: se les quita TODO lo que impone el padre (fondo gris, radio de
   píldora, sombra, borde propio -- ver el aviso de la cabecera de este
   archivo) y no se les pone ningún borde propio: la línea es de
   .ec-contacto-campo, arriba (así, de paso, el border-radius:25px
   !important que el padre le fuerza al <textarea> tampoco se nota --
   sin trazo ni fondo que recortar, no hay esquina que redondear). "html
   body" al frente -- no es adorno, es lo que hace falta para pesar más
   que la regla del padre (0,1,2) sin usar !important; ver la cabecera
   del archivo. */
html body .ec-contacto-campo-control input,
html body .ec-contacto-campo-control textarea {
	display: block;
	width: 100%;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: transparent;
	filter: none;
	box-shadow: none;
	border: 0;
	border-radius: 0;
	padding: 0 0 0.5rem;
	font: 400 1.196875rem/1.675625rem var(--ec-fuente-base); /* 19.15px / 26.81px, Outfit Regular */
	color: var(--ec-texto);
	outline: 0;
}

/* El mensaje visualmente es una sola línea, como el resto de los campos
   (así lo mide el PSD: la caja de este texto solo mide 20px de alto) --
   pero sigue siendo un <textarea>, no un <input>, porque un mensaje real
   puede ser largo: con resize:none + overflow:hidden se ve igual que los
   demás campos en reposo y de todas formas acepta texto largo o con
   saltos de línea (se desplaza dentro del campo mientras se escribe). */
.ec-contacto-campo-control textarea {
	height: 1.675625rem; /* 26.81px, una sola línea */
	resize: none;
	overflow: hidden;
}

.ec-contacto-campo-control input:hover,
.ec-contacto-campo-control input:focus,
.ec-contacto-campo-control textarea:hover,
.ec-contacto-campo-control textarea:focus {
	box-shadow: none;
	background-image: none;
}

/* Etiqueta flotante: <label> real y asociado (for/id), NO oculto para
   lectores de pantalla -- en reposo ocupa el lugar exacto de un
   placeholder (misma tipografía/posición que mide el PSD), y solo se
   aparta con foco o contenido. placeholder=" " (un espacio) en el campo
   es lo que activa :placeholder-shown de forma fiable entre navegadores.
   pointer-events:none: el clic siempre debe llegar al campo de abajo,
   aunque visualmente se solapen -- el input ya ocupa toda esta caja, así
   que el foco funciona igual sin depender del comportamiento nativo de
   "clic en <label> enfoca su control". */
.ec-contacto-campo-control label {
	position: absolute;
	left: 0;
	top: 0;
	font: 400 1.196875rem/1.675625rem var(--ec-fuente-base);
	color: var(--ec-texto-secundario);
	pointer-events: none;
	transform-origin: left top;
	transition: transform 0.15s ease, color 0.15s ease;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ec-contacto-campo--mensaje .ec-contacto-campo-control label {
	white-space: normal; /* el texto de ayuda es largo -- en reposo puede necesitar más de una línea a anchos chicos */
	line-height: 1.3;
}

/* «Email»: el PSD la coloca 8px más abajo que «Nombre» -- su icono de
   sobre (28×20) mide menos alto que el de usuario (25×25) de la misma
   fila, y el diseño no las alinea entre sí. Selector por id del campo, no
   nth-child: no depende del orden en que se impriman los campos.
   Ajustado con ecVerificarPSD(). */
.ec-contacto-campo-control label[for="ec-contacto-correo"] {
	top: 0.5rem; /* 8px */
}

.ec-contacto-campo-control input:focus + label,
.ec-contacto-campo-control input:not(:placeholder-shown) + label,
.ec-contacto-campo-control textarea:focus + label,
.ec-contacto-campo-control textarea:not(:placeholder-shown) + label {
	transform: translateY(-1.25rem) scale(0.85);
}

/* --------------------------------------------------------------------------
   Botón ENVIAR y casilla de aceptación
   -------------------------------------------------------------------------- */

.ec-contacto-acciones {
	display: flex;
	/* nowrap, no wrap: con wrap, esta fila era fràgil -- a 1440 de VENTANA
	   con la barra de desplazamiento visible (1425 útiles, lo normal en
	   Windows) ya no cabían botón + hueco + casilla y la casilla entera
	   saltaba a otro renglón, debajo del botón (ecVerificarPSD() no lo veía
	   porque la herramienta oculta la barra al medir). Con nowrap la fila
	   nunca se parte -- ver flex-shrink:0 en .ec-contacto-enviar (el botón
	   no cede) y min-width:0 en .ec-contacto-casilla (la que cede es ella,
	   dejando que SU TEXTO pase a dos renglones en vez de moverla abajo). */
	flex-wrap: nowrap;
	align-items: center;
	/* 188px entre el botón y la casilla en el PSD (el hueco es real: no es
	   un espacio "sobrante" de un layout distinto) -- ajustado con
	   ecVerificarPSD() sobre el ancho real del botón (194px, no 179px). */
	gap: 1.5rem 12rem;
	/* El botón (15.93px) y la casilla (17.15px) no comparten tamaño de
	   fuente -- centrados en la misma fila, un solo margin-top no puede
	   poner las dos líneas base exactas en su objetivo del PSD a la vez.
	   Este valor centra el conjunto; el ajuste fino de cada uno (uno sube,
	   el otro baja) vive aparte, en su propia regla -- ver .ec-contacto-enviar
	   y .ec-contacto-casilla span, más abajo. */
	margin-top: 5.1875rem; /* 83px -- ajustado con ecVerificarPSD() tras agrandar el botón */
}

.ec-contacto-enviar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 24px, no 16px: centrado como grupo con el ícono (20px aquí, 27px en
	   el PSD), ese faltante dejaba el texto "ENVIAR" 4px a la izquierda de
	   su objetivo -- este hueco de más reparte la diferencia entre ícono y
	   texto (icono más a la izquierda, texto más a la derecha) y de paso
	   acerca el icono a su propio objetivo. Ajustado con ecVerificarPSD(). */
	gap: 1.5rem;
	width: 12.125rem; /* 194px -- medido del PNG, no del cálculo por padding */
	height: 3.875rem; /* 62px */
	flex-shrink: 0; /* nunca cede su ancho -- ver el porqué en .ec-contacto-acciones */
	background-color: var(--ec-naranja);
	color: var(--ec-blanco);
	border: 0;
	border-radius: 0; /* el diseño lo pide rectangular */
	font: 600 0.995625rem var(--ec-fuente-base); /* 15.93px, Outfit SemiBold -- sin tracking, el PSD no le da ninguno */
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ec-contacto-enviar:hover {
	background-color: var(--ec-naranja-hover);
}

.ec-contacto-enviar:focus-visible {
	outline: 2px solid var(--ec-texto);
	outline-offset: 2px;
}

.ec-contacto-casilla {
	position: relative; /* nudge propio, ver abajo -- no afecta el centrado con el botón */
	display: flex;
	align-items: center;
	gap: 0.875rem;
	/* Sin esto, un hijo flex no se encoge más allá de su contenido más
	   ancho (min-width:auto de fábrica) y toda la fila (ver
	   .ec-contacto-acciones) se queda sin margen para ceder -- con 0, el
	   texto de abajo es libre de partirse en más líneas si hace falta. */
	min-width: 0;
	cursor: pointer;
	font: 300 1.071875rem/1.4 var(--ec-fuente-base); /* 17.15px, Outfit Light */
	color: var(--ec-contacto-gris-claro);
	/* El centrado con el botón (62px) dejaba la casilla más arriba que su
	   objetivo del PSD -- relative + top en vez de margin-top: un margen
	   dentro de un align-items:center solo desplaza la MITAD de lo que
	   pide (el centrado se recalcula con la caja ya agrandada), así que da
	   un resultado impredecible; con top no hay que pelear ese recálculo.
	   Ajustado con ecVerificarPSD(). */
	top: 0.6875rem; /* 11px */
}

/* Encima del nudge de arriba: el texto, sobre el checkbox, queda un poco
   alto de más con el centrado que comparten los dos (checkbox 28px vs
   línea de texto 24px). Ajustado con ecVerificarPSD(). */
.ec-contacto-casilla span {
	position: relative;
	top: 0.4375rem; /* 7px */
}

/* Casilla dibujada a mano (appearance:none): el reset del padre ya le
   quita borde/relleno propios a input[type=checkbox] (ver
   preview/real/1-reset.css), así que no hace falta anular nada de ahí --
   solo dibujar el cuadro redondeado del diseño y su estado marcado. */
.ec-contacto-casilla input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.75rem; /* 28px */
	height: 1.75rem;
	margin: 0;
	flex-shrink: 0;
	position: relative;
	border: 0.0625rem solid var(--ec-contacto-casilla-borde); /* 1px -- borde propio, más oscuro que el de los campos */
	border-radius: 0.5rem;
	background-color: var(--ec-blanco);
	cursor: pointer;
}

.ec-contacto-casilla input[type="checkbox"]:checked {
	background-color: var(--ec-naranja);
	border-color: var(--ec-naranja);
}

.ec-contacto-casilla input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 0.5rem;
	top: 0.25rem;
	width: 0.4375rem;
	height: 0.75rem;
	border: solid var(--ec-blanco);
	border-width: 0 0.1875rem 0.1875rem 0;
	transform: rotate(45deg);
}

.ec-contacto-casilla input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ec-naranja);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Aviso de resultado (éxito / error) -- role="status"/"alert" en la
   plantilla, tabindex="-1" + foco por JS al cargar (ver
   assets/js/paginas/contacto.js) para que quien use lector de pantalla lo
   note de inmediato aunque la carga sea una recarga completa de página
   (redirección admin-post.php), no un cambio dinámico.
   -------------------------------------------------------------------------- */

.ec-contacto-aviso {
	margin: 2.5rem 5.0625rem -1.5rem; /* mismo margen lateral que las columnas (81px/77px vía padding, aquí margin) */
	padding: 1rem 1.5rem;
	border-left: 0.25rem solid;
	font-size: 1rem;
	line-height: 1.5;
	outline: 0; /* solo enfocable por programa (tabindex="-1"), sin anillo nativo */
}

.ec-contacto-aviso--exito {
	background-color: var(--ec-contacto-exito-fondo);
	border-color: var(--ec-contacto-exito-borde);
	color: var(--ec-contacto-exito-texto);
}

.ec-contacto-aviso--error {
	background-color: var(--ec-contacto-error-fondo);
	border-color: var(--ec-naranja);
	color: var(--ec-contacto-error-texto);
}

/* --------------------------------------------------------------------------
   Mapas -- dos columnas de 615px (medidas del PSD), cada una con su
   iframe de Google Maps (sin clave, ver ec_contacto_mapa_embed_url() en
   inc/paginas/contacto.php) y su tarjeta editable debajo.
   -------------------------------------------------------------------------- */

.ec-contacto-mapas {
	max-width: 90rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 2.375rem; /* 38px */
	/* padding-top ajustado con ecVerificarPSD(): el resto de la página no
	   siempre termina justo donde el PSD lo pondría a 1440px (algunos
	   milímetros de diferencia de tipografía real contra el cálculo del
	   diseño, ver el reporte) -- este valor compensa esa diferencia
	   acumulada para que los mapas caigan donde el PSD los mide. */
	padding: 0.375rem 5rem 5.5rem 5.75rem; /* 80px der., 92px izq. (x del PSD) */
}

.ec-contacto-mapa-iframe {
	display: block;
	width: 100%;
	aspect-ratio: 615 / 441; /* proporción del recuadro del PSD -- fluido en vez de alto fijo */
	border: 0;
	background-color: var(--ec-contacto-borde); /* mientras carga el iframe -- mismo gris que el recuadro del PSD */
}

.ec-contacto-mapa-tarjeta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 2.0625rem; /* 33px */
}

.ec-contacto-mapa-texto {
	min-width: 0;
	padding-left: 0.625rem; /* 10px -- ajustado con ecVerificarPSD() */
}

.ec-contacto-mapa-oficina-linea {
	margin: 0 0 0.75rem; /* ajustado con ecVerificarPSD() */
	font-size: 1.146875rem; /* 18.35px */
	font-weight: var(--ec-peso-regular);
	color: var(--ec-texto-secundario); /* nombre de la oficina: gris, regular -- al revés que en la columna "Datos de Contacto" */
	/* text-transform en TODA la línea, no solo en .ec-contacto-mapa-oficina:
	   un teléfono no tiene letras, así que heredarlo no le cambia nada, y
	   así ecVerificarPSD() lee el transform en el mismo elemento que
	   empareja con el PSD (el <p> completo, «MORELOS (777)...» -- el
	   nombre y el teléfono comparten una sola capa de texto ahí, no dos
	   separadas como en la lista de .ec-contacto-oficinas). */
	text-transform: uppercase;
}

.ec-contacto-mapa-telefono {
	margin-left: 0.25em;
	font-weight: var(--ec-peso-bold);
	color: var(--ec-negro-oficina); /* el teléfono va en negro y negrita -- ver el reporte */
}

.ec-contacto-mapa-direccion {
	margin: 0;
	max-width: 24rem; /* 384px -- ancho libre suficiente para no forzar más líneas de las que el texto necesita, ver el reporte */
	font-size: 1.146875rem; /* 18.35px */
	font-weight: var(--ec-peso-regular);
	line-height: 1.605625rem; /* 25.69px -- multilínea */
	color: var(--ec-texto-secundario);
}

/* Tamaño propio del botón SOLO en esta tarjeta -- .ec-boton-whatsapp (en
   style.css) es un componente compartido con la tarjeta de contacto de
   Servicios, que mide distinto; 15.93px es la medida de ESTE botón en el
   PSD de Contacto (mismo criterio que .ec-servicio-tarjeta-whatsapp ahí).
   align-self + margin-top, no el align-items:center del contenedor: el PSD
   no centra el botón contra el bloque de texto completo (oficina+dirección)
   -- lo deja más arriba, a la altura de la oficina -- así que se ancla
   aparte en vez de heredar el centrado vertical del resto de la tarjeta. */
.ec-contacto-mapa-tarjeta .ec-boton-whatsapp {
	flex-shrink: 0;
	align-self: flex-start;
	margin-top: 0.5rem;
	font-size: 0.995625rem; /* 15.93px */
}

/* ==========================================================================
   Responsive
   ==========================================================================
   Mismos dos puntos de quiebre que el resto del tema (ver la sección
   "Responsive" de style.css): tablet (≤1024) y móvil (≤767).
   ========================================================================== */

@media (max-width: 1024px) {
	.ec-contacto-columnas {
		grid-template-columns: 1fr;
		padding: 0 2rem 3rem;
	}

	.ec-contacto-datos,
	.ec-contacto-formulario {
		padding-top: 3rem;
	}

	.ec-contacto-aviso {
		margin: 2rem 2rem -1rem;
	}

	.ec-contacto-mapas {
		grid-template-columns: 1fr;
		row-gap: 3rem;
		padding: 3rem 2rem 3.5rem;
	}

	.ec-contacto-mapa-direccion {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.ec-servicio-hero--contacto {
		height: 14rem; /* el hero de Servicios también baja a un alto propio en móvil (24rem) -- aquí, más corto de por sí, con menos margen */
	}

	.ec-servicio-hero--contacto .ec-servicio-hero-contenido {
		padding-bottom: 2rem;
	}

	.ec-contacto-datos,
	.ec-contacto-formulario {
		padding-top: 2.5rem;
	}

	.ec-contacto-direccion {
		max-width: none;
	}

	.ec-contacto-campos {
		grid-template-columns: 1fr;
		row-gap: 2.5rem;
	}

	.ec-contacto-acciones {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.ec-contacto-mapa-tarjeta {
		flex-wrap: wrap;
	}
}