/* ==========================================================================
   Página general «Servicios» (slug "servicios")
   ==========================================================================
   Se encola solo -- ver ec_encolar_pagina_actual() en functions.php.

   Contra mymedi (2-mymedi.css/4-mymedi-dinamico.css, cargan antes que este
   archivo): cada regla de aquí abajo fija SIEMPRE margin/padding/line-height/
   list-style/box-sizing en vez de heredarlos -- mismo aviso que la sección
   "Componentes compartidos" de style.css. Sin !important en todo el archivo.

   Colores: var(--ec-*) de :root cuando hay token exacto (--ec-texto para
   #222222 del PSD, --ec-naranja para el naranja de marca). #666666 y
   #D6D6D6/#EBEBEB (ya convertidos de Adobe RGB a sRGB, mismo método que
   verificar-psd.js) van en hex directo: no hay token en :root para ellos y
   este archivo no toca style.css -- a diferencia de ESE archivo, los demás
   CSS de assets/css/paginas/ (blog.css, contacto.css, inicio.css) sí usan
   hex sueltos con normalidad, así que no es una excepción a nada.

   Tracking: -0.04em en todos los títulos grandes y 0.2em en todas las
   etiquetas -- confirmado en psd-servicios.json (track -40/+200 por mil en
   TODOS los casos de esta página, no una aproximación por tamaño).

   Ancho de contenido: 90rem (1440px, el lienzo del PSD) como tope, igual
   que .ec-servicio-contenedor -- por debajo de 1440 encoge con la ventana,
   fluido de fábrica. El padding lateral varía un poco por sección porque
   el propio PSD no mide igual en todas (mismo caso reconocido en
   templates/servicio.php sobre Mantenimiento vs Venta de Refacciones).
   ========================================================================== */

.ec-servicios-contenedor {
	max-width: 90rem;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Etiqueta (antetítulo) -- compartida por las 4 secciones que llevan una
   ("Lo que hacemos", "CONTÁCTANOS", "Servicios", "Nuestros beneficios").
   Mismos números que .ec-testimonio-antetitulo en style.css (20.83px,
   tracking 0.2em): no se reutiliza esa clase -- vive en "Componentes
   compartidos", pensada para Inicio/Nosotros -- pero el valor es el mismo
   dato de diseño.
   -------------------------------------------------------------------------- */
.ec-servicios-etiqueta {
	margin: 0 0 0.9375rem; /* 15px, mismo aire que .ec-testimonio-antetitulo */
	font-size: 1.301875rem; /* 20.83px */
	font-weight: var( --ec-peso-regular );
	line-height: 1.3; /* una sola línea en las 4 -- el PSD no trae interlineado propio aquí */
	letter-spacing: 0.2em; /* +4.17px a 20.83px */
	color: var( --ec-texto );
	text-transform: uppercase; /* inofensivo si el campo ya llega en mayúsculas (CONTÁCTANOS) */
}

/* La etiqueta de cada sección no arranca exactamente en el mismo x que el
   título/columna de al lado -- 4-5px de diferencia real del PSD entre una
   capa de texto y la de junto (mismo fenómeno reconocido en
   templates/servicio.php sobre Mantenimiento/Venta de Refacciones), no un
   error de esta implementación. Ajustado en vivo con ecVerificarPSD(). */
.ec-servicios-intro .ec-servicios-etiqueta {
	margin-left: 0.3125rem; /* 5px */
}

.ec-servicios-contacto .ec-servicios-etiqueta {
	margin-left: 0.25rem; /* 4px */
}

.ec-servicios-industrias .ec-servicios-etiqueta {
	margin-left: 0.1875rem; /* 3px */
}

.ec-servicios-beneficios .ec-servicios-etiqueta {
	margin-left: 0.3125rem; /* 5px, ajustado en vivo con ecVerificarPSD() */
}

/* --------------------------------------------------------------------------
   Título grande -- base compartida por las 4 secciones con título (Intro,
   Contáctanos, Industrias, Beneficios). Cada sección fija su propio
   font-size/line-height con una segunda clase (ver más abajo): dos tamaños
   de PSD distintos (69.32px en Intro, 58.33px en las otras tres) y hasta
   dos interlineados dentro del segundo tamaño -- no hay un solo valor que
   sirva para las 4.
   -------------------------------------------------------------------------- */
.ec-servicios-titulo {
	margin: 0;
	font-weight: var( --ec-peso-bold );
	letter-spacing: -0.04em; /* -2.33/-2.77px del PSD, el mismo -0.04em de .ec-titulo-grande en style.css */
	color: var( --ec-texto );
	text-wrap: balance; /* reparte el salto de línea sola, sin <br> a mano -- mismo criterio que .ec-titulo-grande */
}

/* ==========================================================================
   2. «Lo que hacemos» / «Servicios Especializados» -- texto a la derecha
   ========================================================================== */
.ec-servicios-intro {
	display: grid;
	grid-template-columns: 433fr 670fr; /* 433px / 670px del PSD (x99-532 / x660-1330) */
	column-gap: 8rem; /* 128px, el hueco entre las dos columnas del PSD */
	align-items: start;
	margin: 6.75rem 6.1875rem 0; /* 108px de aire tras el hero (114px del PSD, -6px ajustado en vivo con ecVerificarPSD()); 99px de margen lateral (x99..x1341) */
	box-sizing: border-box;
}

.ec-servicios-intro-titulo {
	/* 69.32px del PSD, fluido: mismo método de dos puntos (320px/1440px) que
	   .ec-titulo-grande en style.css, con la misma proporción ~49% de piso. */
	font-size: clamp( 2.125rem, 1.4944rem + 3.1536vw, 4.3325rem );
	line-height: 0.9498; /* 65.85 ÷ 69.32 */
}

.ec-servicios-intro-derecha {
	/* La columna derecha es un grid item aparte -- sin este margen se alinea
	   con la ETIQUETA (arriba del título), no con el título mismo, que es
	   contra quien mide el PSD (x660..y579, la etiqueta está en y531). 41px
	   ajustado en vivo con ecVerificarPSD(), no la resta de cajas de tinta. */
	margin-top: 2.9375rem;
}

.ec-servicios-intro-derecha p {
	margin: 0 0 0 -0.25rem; /* -4px, ajustado en vivo con ecVerificarPSD() */
	font-size: 1.301875rem; /* 20.83px */
	font-weight: var( --ec-peso-regular );
	line-height: 1.4004; /* 29.17 ÷ 20.83 */
	color: var( --ec-texto );
}

/* ==========================================================================
   3. Tres tarjetas con foto de fondo
   ========================================================================== */
.ec-servicios-tarjetas {
	display: grid;
	grid-template-columns: repeat( 3, 1fr ); /* 389/390/389px del PSD -- prácticamente iguales */
	gap: 2.3125rem; /* 37px, el hueco entre tarjetas del PSD */
	margin: 3.5625rem 6.1875rem 0; /* 57px bajo el título/párrafo de arriba; mismo margen lateral que .ec-servicios-intro */
}

.ec-servicios-tarjeta {
	position: relative;
	display: block;
	aspect-ratio: 389 / 444; /* proporción del PSD -- así la tarjeta escala entera, no solo su ancho */
	overflow: hidden;
	text-decoration: none;
	background-color: var( --ec-negro-footer ); /* respaldo si la imagen no carga -- mismo criterio que .ec-servicio-hero */
}

.ec-servicios-tarjeta-imagen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tinte parejo y ligero sobre TODA la foto (aprox. de "Capa 45" del PSD,
   x37..485/y761..1209 -- casi todo el alto de la tarjeta) -- para que el
   numeral "01./02./03." de la esquina también se lea. El PSD no da un
   color de capa exacto para esta (el tool no verifica fondos): valor
   prudente, no medido. */
.ec-servicios-tarjeta-capa {
	position: absolute;
	inset: 0;
	background-color: rgba( 0, 0, 0, 0.16 );
	pointer-events: none;
}

/* "Capa 46" del PSD: PIXEL de 388×201 pegada abajo de cada tarjeta (201 ÷
   444 = 45.27% del alto) que oscurece la foto detrás del título y la
   descripción -- sin ella el título de la tarjeta 3 casi no se lee (ver
   el encargo). Medida en Servicios.png comparando, en las 3 tarjetas, la
   franja por debajo de y1002 contra la de arriba: arranca casi
   transparente en su propio borde de arriba y llega a ~0.85 de negro en
   el borde de abajo -- degradado, no un tono plano. ::after sobre el
   mismo span en vez de sumar un nodo nuevo al marcado. */
.ec-servicios-tarjeta-capa::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45.27%; /* 201 ÷ 444 del PSD */
	background: linear-gradient( 180deg, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.55 ) 40%, rgba( 0, 0, 0, 0.85 ) 100% );
}

.ec-servicios-tarjeta-numero {
	position: absolute;
	top: 1.4375rem; /* 22px de caja de tinta del PSD, +1px ajustado en vivo con ecVerificarPSD() */
	left: 1.4375rem; /* 23px */
	font-size: 1.7725rem; /* 28.36px */
	font-weight: var( --ec-peso-semibold );
	line-height: 1; /* una sola línea -- el PSD no exige un interlineado propio aquí */
	color: var( --ec-blanco );
}

/* Título y descripción, cada uno con su PROPIO "bottom" -- no un solo
   contenedor con los dos adentro: un contenedor de alto automático
   anclado por "bottom" no deja mover la descripción sin mover el título
   con ella (el hueco entre los dos solo reacomoda cuál de los dos se
   mueve, la suma siempre da el mismo "bottom" exterior) -- ver el
   reporte. Con los dos anclados por su cuenta, cada uno cae justo donde
   mide el PSD. */
.ec-servicios-tarjeta-titulo {
	position: absolute;
	left: 1.4375rem;
	right: 1.4375rem;
	/* 5.6125rem, no los 7.3625rem de la 1.5.4 -- re-ajustado en vivo con
	   ecVerificarPSD() al corregir el corte de línea (max-width, ver el
	   comentario de abajo): con el corte VIEJO ("…técnica y / operativa",
	   2 líneas igual que el nuevo) esos 7.3625rem SÍ calzaban con el PSD,
	   pero con el corte NUEVO ("Servicios Capacitación / técnica y
	   operativa", también 2 líneas) la misma "bottom" deja el título 28px
	   más arriba de lo que mide el PSD en las 3 tarjetas por igual --
	   confirmado quitando el max-width otra vez (el desfase de 28px sigue
	   ahí IGUAL, con o sin el corte nuevo, así que no es el ancho lo que
	   lo mueve) y probando este valor con ecVerificarPSD(): 42/46, calca
	   exactamente el resultado de la base 1.5.4 (mismas 2 excepciones de
	   siempre, "pilotes y micropilotes"/"pozos de agua"). No se investigó
	   más a fondo POR QUÉ el valor viejo dejó de calzar (posiblemente
	   quedó ajustado, en su momento, contra un ancho de tarjeta distinto
	   al de hoy) -- 24px de aire hasta la descripción en las 3 tarjetas,
	   sin encimarse con nada. */
	bottom: 5.6125rem;
	/* 1.5.5 -- max-width, sin tocar "left" (el PSD alinea este título a la
	   IZQUIERDA de la tarjeta, no centrado -- medido en psd-servicios.json:
	   la caja de texto arranca 23px del borde de la tarjeta en las 3
	   tarjetas, el mismo left:1.4375rem de aquí, pero termina bien antes
	   del borde derecho, con un sobrante muy distinto en cada una -- no es
	   un texto centrado que casualmente mide distinto, está pegado a la
	   izquierda). Antes el título usaba todo el ancho disponible (343px
	   reales, sin max-width) y partía en un punto distinto al PSD --
	   "…técnica y / operativa" y "…Refacciones y / Consumibles" en vez de
	   los cortes reales ("Servicios Capacitación / técnica y operativa",
	   etc., ver preview/real/spec-servicios.md líneas 41-43). 12.8em ≈
	   290px a este tamaño de fuente -- medido en vivo con la fuente real
	   (Outfit Semibold 22.67px): el rango que da los 3 cortes del PSD a la
	   vez va de 275 a 310px, 290 es el punto medio, con margen de sobra a
	   los dos lados por si la fuente rinde un poco distinto entre
	   sistemas. Como está en "em" (no rem ni px), escala con el font-size
	   si este título alguna vez pasa a ser fluido. "right" se deja tal
	   cual (no se borra): con max-width más angosto que el hueco entre
	   left/right, el navegador ignora "right" solo, sin que haga falta
	   quitarlo -- así, si algún día max-width creciera más que ese hueco,
	   "right" lo sigue acotando. No es un campo editable (ver
	   ec_servicios_tarjetas() en inc/paginas/servicios.php): el contenido
	   sigue tal cual, solo cambia dónde envuelve. */
	max-width: 12.8em;
	font-size: 1.416875rem; /* 22.67px */
	font-weight: var( --ec-peso-semibold );
	line-height: 0.8002; /* 18.14 ÷ 22.67 */
	color: var( --ec-blanco );
}

.ec-servicios-tarjeta-descripcion {
	position: absolute;
	left: 1.4375rem;
	right: 1.4375rem;
	bottom: 1.6875rem; /* 33px del PSD, -6px ajustado en vivo con ecVerificarPSD() */
	margin: 0;
	font-size: 0.96rem; /* 15.36px */
	font-weight: var( --ec-peso-light );
	line-height: 1.3607; /* 20.9 ÷ 15.36 */
	color: var( --ec-blanco );
}

/* 1.5.5 -- ya que se corrigieron los títulos (arriba), el coordinador pidió
   que las descripciones también corten como el PSD (spec-servicios.md,
   líneas 44 y 46 -- la del medio, tarjeta 2, ya calzaba sola, no se toca).
   No es un problema de ancho MÁXIMO (el título usa max-width): aquí el
   texto SIEMPRE envuelve a 3 líneas con el ancho compartido (343px) -- el
   PSD corta en un punto ligeramente distinto, así que hace falta angostar
   unos px, medido en vivo con la fuente real hasta que la palabra que
   cambia de línea calzara con el PSD. No mueve la posición vertical
   (bottom, arriba, sin tocar).

   Todo el recorte va en margin-RIGHT, margin-left en 0 -- la primera
   versión repartía el recorte parejo a los 2 lados (margin-left y -right
   iguales), y eso corría el borde izquierdo del texto lejos de "left:
   1.4375rem" -- ya no alineaba con el título (que sí se queda en ese
   borde) ni con el PSD (que alinea los dos, ±2px). Con margin-left:0 el
   borde izquierdo vuelve exactamente a donde estaba (y a donde sigue el
   título); el ANCHO ÚTIL es el mismo de antes (mismo total de recorte,
   14px/20px, solo que ahora completo de un lado), así que los cortes de
   línea no cambian.

   ec-servicios-tarjeta--N (ver templates/servicios-general.php): índice
   fijo de la tarjeta, no nth-child -- mismo criterio que el resto del
   tema (si se vacía una tarjeta desde el admin, las que queden no deben
   heredar el ajuste de otra).

   IMPORTANTE sobre cómo se midió: la barra de scroll del navegador le
   resta ~15px al ancho útil (document.documentElement.clientWidth da 1425
   a una ventana de 1440, no 1440) -- medir con la pestaña normal (con
   barra) corría el punto de corte real un par de px respecto a como se ve
   en una captura sin interfaz (capture.js) o en ecVerificarPSD() (que
   oculta la barra a propósito, ver sinBarraDeScroll() en verificar-psd.js)
   -- AMBAS formas dan un ancho útil de 1440 completos. Los valores de
   abajo están medidos ya con la barra oculta (mismo criterio que esas
   dos), para que calcen en la captura final y en la verificación, no solo
   en una pestaña normal. */
.ec-servicios-tarjeta--1 .ec-servicios-tarjeta-descripcion {
	/* 14px de recorte (antes +7px por lado): con el ancho compartido,
	   "optimizar el" cabía completo en el primer renglón -- el PSD corta
	   antes, justo después de "optimizar". Rango real (ancho útil 1440,
	   mismo total angostado): 8 a 20px; 14 es el punto medio. */
	margin-left: 0;
	margin-right: 0.875rem; /* 14px */
}

.ec-servicios-tarjeta--3 .ec-servicios-tarjeta-descripcion {
	/* 20px de recorte (antes +10px por lado): con el ancho compartido,
	   "operando de" quedaba junto en el segundo renglón -- el PSD corta
	   antes de "de". Rango real (ancho útil 1440, mismo total angostado):
	   18 a 22px; 20 es el punto medio. */
	margin-left: 0;
	margin-right: 1.25rem; /* 20px */
}

/* ==========================================================================
   4. «Contáctanos» + tres barras de porcentaje
   ========================================================================== */
.ec-servicios-contacto {
	display: grid;
	grid-template-columns: 652fr 511fr; /* 652px / 511px del PSD (x98-750 / x825-1336) */
	column-gap: 4.6875rem; /* 75px, el hueco entre columnas */
	align-items: start;
	margin: 6.3125rem 6.1875rem 5rem; /* 101px bajo las tarjetas; 80px antes del video */
	box-sizing: border-box;
}

.ec-servicios-contacto-titulo {
	margin: 0 0 2.5rem; /* 40px hasta el párrafo */
	font-size: clamp( 1.7863rem, 1.2555rem + 2.6512vw, 3.645625rem ); /* 58.33px, mismo método de dos puntos (320/1440) */
	line-height: 1.1289; /* 65.85 ÷ 58.33 */
}

.ec-servicios-contacto-texto {
	margin: 0 0 1.8125rem; /* 29px hasta la píldora de correo */
	font-size: 1.301875rem; /* 20.83px */
	font-weight: var( --ec-peso-regular );
	line-height: 1.4004; /* 29.17 ÷ 20.83 */
	color: var( --ec-texto );
}

.ec-servicios-contacto-correo {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem; /* 12px, del PSD */
	text-decoration: none;
}

.ec-servicios-contacto-correo-icono {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3.75rem; /* 60px, la elipse naranja del PSD */
	height: 3.75rem;
	border-radius: 50%;
	background-color: var( --ec-naranja );
}

.ec-servicios-contacto-correo-texto {
	font-size: 1.321875rem; /* 21.15px */
	font-weight: var( --ec-peso-semibold );
	line-height: 1.2; /* una sola línea -- el PSD no trae interlineado propio */
	color: var( --ec-texto );
	overflow-wrap: anywhere; /* red de seguridad -- un correo es una sola palabra larga, sin puntos de quiebre naturales, en una columna que en móvil puede acabar más angosta que ella */
}

.ec-servicios-contacto-derecha {
	display: flex;
	flex-direction: column;
	/* Columna aparte dentro del mismo grid item -- sin este margen arranca a
	   la altura de la ETIQUETA de la izquierda, no de la primera barra (el
	   PSD la mide bastante más abajo que la etiqueta). Ajustado en vivo con
	   ecVerificarPSD(). */
	margin-top: 5.5625rem;
}

.ec-servicios-barra + .ec-servicios-barra {
	/* 46px, el hueco entre barras del PSD (44/49px promediados) -- el primer
	   hueco (tras la barra de Capacitación) se acorta aparte, justo abajo:
	   el margen de la columna ya la sitúa 9px más abajo de lo que le tocaba
	   a esa barra en concreto. */
	margin-top: 2.875rem;
}

.ec-servicios-barra:nth-child( 2 ) {
	margin-top: 2.3125rem; /* 2.875rem - 9px, ajustado en vivo con ecVerificarPSD() */
}

.ec-servicios-barra-encabezado {
	/* position:relative -- el porcentaje se ancla en el mismo eje horizontal
	   que la pista de abajo (ver .ec-servicios-barra-porcentaje), no a la
	   derecha del renglón: el PSD lo dibuja justo sobre el EXTREMO del
	   relleno de cada barra, no alineado entre sí las tres. */
	position: relative;
	margin: 0 0 0.8125rem; /* 13px hasta la pista */
}

.ec-servicios-barra-etiqueta,
.ec-servicios-barra-porcentaje {
	font-size: 1.321875rem; /* 21.15px */
	font-weight: var( --ec-peso-semibold );
	line-height: 1.2;
	color: var( --ec-texto );
}

.ec-servicios-barra-porcentaje {
	position: absolute;
	top: 0;
	/* "left" en % (mismo número que el relleno) llega por style="" desde la
	   plantilla -- translateX(-100%) deja el BORDE DERECHO del texto justo
	   en ese punto, calcado del PSD (comparado el extremo del relleno contra
	   el borde derecho del texto en las 3 barras: 4-11px de diferencia, ya
	   cubiertos por el propio ancho del glyph "%"). */
	transform: translateX( calc( -100% - 0.5rem ) ); /* 8px extra, ajustado en vivo con ecVerificarPSD() */
}

/* Capacitación (80%) queda dx4 del PSD -- Mantenimiento (85%) y Venta (90%)
   ya caen bien con el cálculo de arriba; ajustado en vivo con ecVerificarPSD(). */
.ec-servicios-barra:nth-child( 1 ) .ec-servicios-barra-porcentaje {
	transform: translateX( calc( -100% - 0.5rem - 4px ) );
}

.ec-servicios-barra-pista {
	box-sizing: border-box;
	width: 100%;
	height: 0.5625rem; /* 9px del PSD */
	background-color: #d6d6d6; /* gris de la pista, ya convertido de Adobe RGB (#D5D5D5 -> #D6D6D6 sRGB) */
}

.ec-servicios-barra-relleno {
	height: 100%;
	/* El ancho lo da SIEMPRE ec_barra_{i}_porcentaje (style="width:N%" en la
	   plantilla) -- nunca un ancho fijo copiado del PSD, ver el encargo. */
	background-color: var( --ec-naranja );
}

/* ==========================================================================
   6. «Servicios» / industrias atendidas
   ========================================================================== */
.ec-servicios-industrias {
	/* 116px tras el video (125px del PSD, -9px ajustado en vivo); 91px antes
	   de la banda de beneficios; 88px de margen lateral (x88 del título, el
	   inicio real de este bloque -- la rejilla de iconos, más ancha, se sale
	   un poco de esta columna por su cuenta, ver .ec-servicios-industrias-
	   inferior). */
	margin: 7.25rem 5.5rem 5.6875rem;
}

.ec-servicios-industrias-cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2.5rem;
}

.ec-servicios-industrias-texto {
	max-width: 46.25rem; /* 740px, el ancho del párrafo en el PSD */
}

.ec-servicios-industrias-titulo {
	/* 511px de caja de tinta del PSD -- pero esa caja sale de DOS saltos de
	   línea manuales del diseñador ("Atendemos a las" / "siguientes
	   industrias:"), no de un ancho de párrafo: a 511px el navegador envuelve
	   distinto (el tracking/kerning de Outfit no calca 1:1 el de Photoshop) y
	   deja tres líneas en vez de dos, más alto de lo que mide el PSD. 536px
	   es el mínimo real para que "siguientes industrias:" quepa en una sola
	   línea (medido con canvas.measureText) -- ver el reporte. */
	max-width: 33.5rem;
	margin: 0 0 2.0625rem; /* 33px hasta el párrafo */
	font-size: clamp( 1.7863rem, 1.2555rem + 2.6512vw, 3.645625rem ); /* 58.33px */
	line-height: 1.0715; /* 62.5 ÷ 58.33 */
}

.ec-servicios-industrias-texto-parrafo {
	margin: 0;
	font-size: 1.301875rem; /* 20.83px */
	font-weight: var( --ec-peso-regular );
	line-height: 1.4004; /* 29.17 ÷ 20.83 */
	color: #666666; /* ya convertido de Adobe RGB (#666666 -> #666666 sRGB, ver la cabecera del archivo) */
}

.ec-servicios-industrias-superior,
.ec-servicios-industrias-inferior {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ec-servicios-industrias-superior {
	/* 2.9375rem, no 2.5rem: "Mecánica de suelos" quedaba pegada 7px de más a
	   "Geotecnia" (dx7 medido con ecVerificarPSD) -- ensanchar el HUECO entre
	   los 2 basta para correr a Mecánica sola, porque Geotecnia ya cae bien
	   sola (la fila se ancla por la derecha, ver justify-content:space-between
	   de .ec-servicios-industrias-cabecera): ensanchar el hueco no la mueve. */
	gap: 2.9375rem;
	/* Los 2 iconos de arriba no van a la altura del texto (eyebrow) -- el PSD
	   los mide bastante más abajo, cerca del final del párrafo. Ajustado en
	   vivo con ecVerificarPSD(). */
	margin-top: 8.25rem;
}

/* Rejilla de 6 columnas -- pero el PSD NO reparte los 6 iconos a distancias
   iguales: el nombre de cada industria en psd-servicios.json da los centros
   112.5/337.5/564/801/1035/1297px (Minería/Pozos de agua/Anclajes y drenes/
   Tierras físicas/Pilotes y micropilotes/Exploración y sondeos, el mismo
   orden que ec_servicios_valores_por_omision() en inc/paginas/servicios.php).
   Con columnas 1fr iguales cada centro caía corrido -- medido con
   ecVerificarPSD ANTES de este ajuste: Minería dx73, Pozos dx30, Anclajes
   dx9, Tierras físicas dx-13, Pilotes dx27, Exploración dx-45. Una SOLA
   regla de columnas, no una por ítem: 6 fr proporcionales al hueco real de
   cada una en vez de mover cada icono aparte con margin/left -- afinado en
   vivo con ecVerificarPSD() partiendo de esos centros (el ancho de cada
   nombre en el navegador no calca el del PSD, así que el reparto final no
   es la resta exacta de los x1/x2 del spec).
   Minería, Anclajes, Tierras físicas y Exploración quedan dx0-1. Pozos de
   agua y Pilotes y micropilotes quedan en dx-12: sus columnas no pueden
   angostarse más sin que el texto ENVUELVA distinto al del PSD ("Pilotes y
   micropilotes" ya está al límite -- 235.5px de ancho en una sola línea,
   contra 240px de columna -- por debajo de eso vuelve a partirse en dos
   líneas centradas por separado y el dx se dispara a más de 60px, peor que
   este remanente) -- limitación de la herramienta reconocida en el encargo,
   no de la rejilla; comparado a ojo contra el recorte del PNG, la fila se
   ve pareja.
   Bleed propio, NO el margin de 88px de .ec-servicios-industrias: esta fila
   es más ancha que la columna de texto de arriba -- Minería empieza cerca
   de x71 del PSD (a la izquierda del título/párrafo) y Exploración termina
   cerca de x1372 (a la derecha). */
.ec-servicios-industrias-inferior {
	display: grid;
	grid-template-columns: 225fr 266fr 232fr 230fr 240fr 213fr;
	column-gap: 0; /* ya repartido en el ancho de cada columna, ver arriba */
	row-gap: 2rem;
	margin: 5.4375rem -3.375rem 0 -5.5rem; /* 87px bajo la cabecera; -54px derecha / -88px izquierda, ver arriba */
}

/* Único ítem con dy propio: Minería necesitaba 16px más que las otras 5
   columnas para caer a la altura de su pareja del PSD (dy-16 con
   ecVerificarPSD, medido ANTES del margin-top de arriba). De esos 16px,
   6 ya los da el margin-top de la rejilla (ajustado para las otras 5); los
   10 que faltan van aquí, solo en la primera columna. */
.ec-servicios-industrias-inferior li:first-child {
	margin-top: 0.625rem; /* 10px */
}

.ec-servicios-industrias-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	min-width: 6.25rem; /* 100px -- que el icono+nombre no se aplasten en .ec-servicios-industrias-superior */
	text-align: center;
}

.ec-servicios-industrias-icono {
	display: block;
	width: 3.8125rem; /* 61px, el mayor de los iconos del PSD */
	height: 3.8125rem;
	object-fit: contain;
}

/* 1.5.9 -- «Conocer industrias»: botón naranja (.ec-boton-primario, el mismo
   de Beneficios) centrado bajo la fila de iconos, a 64px de ella. El
   contenedor es el de .ec-servicios-industrias (sin el bleed de la rejilla),
   así que el botón cae centrado en la página. El tema padre pinta a:hover en
   verde (#00A198): el texto se fija en blanco en todos los estados. */
.ec-servicios-industrias-accion {
	display: flex;
	justify-content: center;
	margin-top: 4rem; /* 64px */
}

.ec-servicios-industrias-boton,
.ec-servicios-industrias-boton:hover,
.ec-servicios-industrias-boton:focus-visible {
	color: var( --ec-blanco );
}

.ec-servicios-industrias-nombre {
	font-size: 1.59rem; /* 25.44px */
	font-weight: var( --ec-peso-regular );
	line-height: 1; /* 25.44 ÷ 25.44 */
	color: var( --ec-texto );
}

/* "Pozos de agua" es el único nombre de industria SIN interlineado propio
   en el PSD (automático de Photoshop, 1.2×) -- las otras 7 etiquetas sí
   traen 25.44px (line-height:1, arriba). Verificado con ecVerificarPSD:
   interl 25.44→30.53 (auto). Segundo ítem de la fila de abajo -- ver el
   orden en ec_servicios_valores_por_omision(), inc/paginas/servicios.php. */
.ec-servicios-industrias-inferior li:nth-child( 2 ) .ec-servicios-industrias-nombre {
	line-height: 1.2; /* 30.53 ÷ 25.44 */
}

/* ==========================================================================
   7. «Nuestros beneficios» sobre banda gris
   ========================================================================== */
.ec-servicios-beneficios {
	/* A todo el ancho -- mismo truco que .ec-servicio-hero/.ec-video/
	   .ec-servicio-banda: 100vw + margin-left calc(50% - 50vw). */
	width: 100vw;
	margin-left: calc( 50% - 50vw );
	background-color: #ebebeb; /* ya convertido de Adobe RGB (#EAEAEA -> #EBEBEB sRGB) */
}

.ec-servicios-beneficios-interior {
	display: grid;
	grid-template-columns: 696fr 488fr; /* 696px / 488px del PSD (x73-769 / x845-1332) */
	column-gap: 4.6875rem; /* 75px */
	align-items: start;
	/* Lateral ASIMÉTRICO a propósito -- las fotos arrancan en x73 del PSD y
	   la columna de texto termina en x1332: 73px/108px, no 99px/99px como
	   el resto de secciones (esta es la única con fotos a sangre por un
	   lado). Con 99px parejos la columna de texto queda 15px corrida a la
	   derecha -- ajustado en vivo con ecVerificarPSD(). */
	padding: 7.3125rem 6.75rem 6.3125rem 4.5625rem;
	box-sizing: border-box;
}

.ec-servicios-beneficios-fotos {
	display: flex;
	gap: 1.6875rem; /* 27px, el hueco entre las dos fotos del PSD */
}

.ec-servicios-beneficios-foto {
	display: block;
	flex: 1 1 0;
	/* min-width:0 -- sin esto, el tamaño intrínseco grande del archivo
	   (975x1613px) actúa como mínimo del flex item y las dos fotos no se
	   reparten el ancho (cada una intenta ocupar el 100% del renglón). */
	min-width: 0;
	width: 100%;
	aspect-ratio: 333 / 553; /* proporción del PSD -- las dos fotos miden prácticamente igual */
	object-fit: cover;
}

.ec-servicios-beneficios-titulo {
	max-width: 28.8125rem; /* 461px del PSD */
	margin: 0.75rem 0 0.5rem; /* 23px del PSD tras la etiqueta, -11px ajustado en vivo con ecVerificarPSD(); 29px del PSD hasta el párrafo, -21px también ajustado en vivo */
	font-size: clamp( 1.7863rem, 1.2555rem + 2.6512vw, 3.645625rem ); /* 58.33px */
	line-height: 1.0715; /* 62.5 ÷ 58.33 */
}

.ec-servicios-beneficios-texto {
	max-width: 29.8125rem; /* 477px del PSD */
	margin: 0 0 2.375rem; /* 51px del PSD hasta la lista, -13px ajustado en vivo con ecVerificarPSD() */
	font-size: 1.301875rem; /* 20.83px */
	font-weight: var( --ec-peso-regular );
	line-height: 1.4004; /* 29.17 ÷ 20.83 */
	color: #666666; /* ya convertido de Adobe RGB, ver la cabecera del archivo */
}

.ec-servicios-beneficios-lista {
	list-style: none;
	/* top/right/bottom/left: 46px del PSD hasta el botón (-5px ajustado en
	   vivo) y +13px de x (dx-13 con ecVerificarPSD -- rendía 13px a la
	   izquierda de su pareja del PSD) -- alinea con el título/párrafo de la
	   misma columna. */
	margin: 0 0 2.5625rem 0.8125rem;
	padding: 0;
}

.ec-servicios-beneficios-lista li {
	display: flex;
	/* flex-start, no center: a columna angosta (tablet/móvil) el texto
	   envuelve a 2-3 líneas y "center" deja la palomita a la altura de la
	   línea de en medio, lejos del primer renglón -- ver el reporte. A una
	   sola línea (escritorio) el resultado es el mismo de todos modos. */
	align-items: flex-start;
	gap: 0.75rem; /* 12px del PSD */
	padding: 0; /* contra ul li{padding:8px 0} de mymedi -- el aire entre filas ya lo da line-height */
	font-size: 1.438125rem; /* 23.01px */
	font-weight: var( --ec-peso-regular );
	line-height: 1.8331; /* 42.18 ÷ 23.01 -- también da el alto de fila (~42px del PSD) */
	color: var( --ec-texto );
}

.ec-servicios-beneficios-icono {
	flex: 0 0 auto;
	margin-top: 0.5625rem; /* centra la palomita en la altura de línea del primer renglón (line-height 1.8331 en vez de 1) */
	color: var( --ec-naranja ); /* el SVG usa stroke="currentColor" */
}

.ec-servicios-beneficios-boton {
	display: inline-block;
	margin-left: 0.6875rem; /* +11px (dx-11 con ecVerificarPSD -- rendía 11px a la izquierda), ajustado en vivo */
}

/* ==========================================================================
   Responsivo -- 1024px y 767px, mismos cortes que el resto del tema
   ========================================================================== */
@media ( max-width: 1024px ) {
	.ec-servicios-intro,
	.ec-servicios-tarjetas,
	.ec-servicios-contacto {
		margin-left: 3.5rem;
		margin-right: 3.5rem;
	}

	.ec-servicios-industrias {
		margin-left: 3rem;
		margin-right: 3rem;
	}

	.ec-servicios-beneficios-interior {
		padding-left: 3.5rem;
		padding-right: 3.5rem;
	}

	.ec-servicios-industrias-inferior {
		/* A columnas iguales no aplica el reparto por fr de escritorio -- y sin
		   el bleed propio (ver el CSS de escritorio) esta fila vuelve a alinear
		   con el margin de 3rem de .ec-servicios-industrias, arriba. */
		grid-template-columns: repeat( 3, 1fr );
		column-gap: 1rem;
		margin-left: 0;
		margin-right: 0;
	}
}

/* Corte propio a 900px -- a 768px (uno de los tres anchos que pide el
   encargo) las tres tarjetas en 1fr quedan en ~190px, donde el título más
   largo ("Servicios Venta de Refacciones y Consumibles") no cabe ni a dos
   líneas y se encima con el número (los dos son position:absolute); y las
   barras en la columna angosta de .ec-servicios-contacto dejan el
   porcentaje (position:absolute, ver el CSS) encimado con su etiqueta. Las
   dos se apilan/parten aquí, antes del corte general de 767px. */
@media ( max-width: 900px ) {
	.ec-servicios-tarjetas {
		grid-template-columns: repeat( 2, 1fr );
	}

	.ec-servicios-contacto {
		/* minmax(0,1fr), no 1fr a secas: con 1fr la columna no puede encoger
		   más allá del contenido que no envuelve (el correo, una sola
		   palabra larga) y el grid se sale del ancho de la página -- ver el
		   reporte. Mismo motivo en el resto de los grid a una columna de
		   aquí abajo. */
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 2.5rem;
	}
}

@media ( max-width: 767px ) {
	.ec-servicios-intro {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 2rem;
		margin: 4rem 1.5rem 0;
	}

	.ec-servicios-tarjetas {
		grid-template-columns: minmax( 0, 1fr );
		gap: 1.5rem;
		margin: 2.5rem 1.5rem 0;
	}

	.ec-servicios-tarjeta {
		aspect-ratio: 4 / 3; /* la proporción alta del PSD (389x444) se ve exagerada apilada a ancho completo en móvil */
	}

	.ec-servicios-contacto {
		margin: 3.5rem 1.5rem 3rem;
	}

	.ec-servicios-industrias {
		margin: 4rem 1.5rem;
	}

	.ec-servicios-industrias-cabecera {
		flex-direction: column;
		align-items: flex-start;
	}

	.ec-servicios-industrias-superior {
		/* El margen grande de escritorio empuja estos 2 iconos hasta la
		   altura del párrafo cuando van EN LA MISMA FILA que el texto; aquí
		   ya van apilados debajo (flex-direction:column arriba), así que ese
		   aire de sobra solo se ve como un hueco vacío. */
		margin-top: 3rem;
	}

	.ec-servicios-industrias-superior .ec-servicios-industrias-item {
		/* flex-basis + min-width:0, SOLO aquí (no en escritorio, donde
		   "crecer parejo" corre los dos iconos de su lugar del PSD) -- sin
		   esto, en una columna angosta cada item toma el ancho de su NOMBRE
		   sin envolver ("Mecánica de suelos" mide 216px de un tirón) y los 2
		   no caben juntos: se apilan uno por fila. Mismo mecanismo que
		   min-width en .ec-servicios-beneficios-foto, más arriba. */
		flex: 1 1 6.25rem;
		min-width: 0;
	}

	.ec-servicios-industrias-inferior {
		grid-template-columns: repeat( 2, 1fr );
		column-gap: 1rem;
		margin: 3rem 0 0; /* sin el bleed propio de escritorio, ver ese CSS */
	}

	.ec-servicios-industrias-accion {
		margin-top: 3rem; /* mismo aire que sobre la rejilla, arriba */
	}

	.ec-servicios-beneficios-interior {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 2.5rem;
		padding: 3.5rem 1.5rem;
	}

	.ec-servicios-beneficios-fotos {
		order: 2;
	}
}