/*
 * Página Industrias — Engranaje Corporativo.
 * ============================================================================
 * Encolado SOLO en la página "industrias" (ver ec_enqueue_industrias_estilos()
 * en functions.php) — a diferencia de animaciones.css, que es de todo el
 * sitio. El hero reutiliza templates/partes/hero.php tal cual, así que sus
 * clases (.ec-servicio-hero*) ya están resueltas en style.css — no se toca
 * nada de eso aquí.
 *
 * Coordenadas de esta ronda: preview/real/spec-industrias.md (caja de tinta,
 * tipografía efectiva y colores ya convertidos a sRGB desde el PSD en Adobe
 * RGB) y preview/real/psd-industrias.json, exportados con
 * herramientas/psd_especificacion.py y psd_textos_json.py. Verificado con
 * preview/real/verificar-psd.js (ecVerificarPSD()) a 1440px.
 *
 * Sin !important en todo el archivo. Colores solo con var(--ec-*) definidas
 * en style.css (ninguna nueva aquí) -- en concreto los tokens de la sección
 * "Texto de Servicios" (--ec-texto, --ec-texto-lista, --ec-texto-secundario),
 * no --ec-negro-titulares/--ec-gris-texto (los que salían de muestrear PNG:
 * esta ronda los retira de aquí, ver el comentario de --ec-negro-titulares
 * en :root, style.css).
 *
 * Robustez frente al CSS real de mymedi (2-mymedi.css/4-mymedi-dinamico.css,
 * cargados ANTES que este archivo): ese CSS trae ul/li con list-style,
 * padding y line-height propios, body/h1-h6 con tamaños e interlineados de
 * su panel Redux, y strong en peso 500 -- valores que ganarían por cascada
 * (misma especificidad, pero antes en el orden) en cualquier hueco que este
 * archivo deje sin fijar. Por eso cada regla de abajo pone SIEMPRE valores
 * explícitos (font-size, line-height, font-weight, list-style, margin y
 * padding en los cuatro lados) en vez de heredarlos o tocar solo un lado.
 * ========================================================================== */

/* --------------------------------------------------------------------------
   Contenedor — lienzo de 1440px, mismo criterio que .ec-servicio-contenedor
   (style.css): tope del diseño, se centra en vez de crecer más allá. Clase
   propia (no se reutiliza .ec-servicio-contenedor) porque este archivo no
   depende de clases de otro módulo -- ver la cabecera, arriba.

   114px a la izquierda / 121px a la derecha, medidos del PSD (título de la
   intro en x114, línea derecha del párrafo en x1319 → 1440−1319=121) -- los
   comparte la introducción Y la lista de industrias, las dos secciones que
   viven dentro de este contenedor (las 9 secciones alternadas van fuera, en
   su propio 100vw -- ver más abajo).
   -------------------------------------------------------------------------- */

.ec-industrias-contenedor {
	max-width: 90rem; /* 1440px */
	margin: 0 auto;
	padding: 0 7.5625rem 0 7.125rem; /* 121px / 121px / 0 / 114px, ver el comentario de arriba */
	background-color: var(--ec-blanco);
}

/* --------------------------------------------------------------------------
   Introducción a dos columnas
   --------------------------------------------------------------------------
   454fr / 687fr, no 1fr/1fr: el PSD no reparte las dos columnas parejo --
   687px es el ancho real del párrafo (x632..1319, la línea que llega más
   lejos lo llena por completo) y 454px es lo que sobra del contenido
   disponible (1205px, ya sin el padding del contenedor) tras ese párrafo y
   el hueco de 4rem entre columnas -- confirmado: 454+64(4rem)+687=1205.
   En fr, no rem, para que la proporción se mantenga fluida por debajo de
   1440 (mismo criterio que .ec-servicio-banda-interior en style.css).
   -------------------------------------------------------------------------- */

.ec-industrias-intro {
	display: grid;
	grid-template-columns: 454fr 687fr;
	column-gap: 4rem;
	align-items: start;
	/* padding-top: hueco entre el borde inferior del hero (y417) y la tinta
	   del título (y512) -- 95px de por medio, de los que un tramo se lo
	   lleva el propio "aire" de la fuente sobre la tinta (line-height 79.17
	   menor que el tamaño 83.33 -- caja de línea más apretada que la
	   fuente). padding-bottom: hueco hasta "Atendemos..." (y727) -- medido
	   y ajustado en vivo con ecVerificarPSD() (±1px). */
	padding: 5.25rem 0 3.8125rem;
}

.ec-industrias-intro-titulo {
	margin: 0;
	color: var(--ec-texto);
	/* Fluido: clamp(MÍNIMO, PENDIENTE·vw + INTERSECCIÓN, MÁXIMO), mismo
	   método que .ec-servicio-titulo en style.css (ver su comentario para el
	   porqué de la fórmula). MÁXIMO = 83.33px (5.208125rem), el tamaño real
	   del PSD -- antes 76px, sin medir. MÍNIMO = 40px (2.5rem), igual que
	   antes: el encargo no da un objetivo de escritorio chico para este
	   título, solo pide "fluido por debajo de 1440". Coeficientes
	   redondeados siempre hacia arriba para que a los 1440px exactos el
	   resultado ya sea ligerísimamente ≥83.33px. */
	font-size: clamp(2.5rem, 1.7263rem + 3.8688vw, 5.208125rem);
	font-weight: var(--ec-peso-bold);
	/* -0.04em ≈ -3.33px a 83.33px -- el tracking del PSD (track -40, en
	   milésimas de em) en em para que escale con el font-size fluido. Mismo
	   valor que usa Servicios en sus títulos grandes -- no es casualidad
	   forzada, el PSD trae -40 de tracking en ambos. */
	letter-spacing: -0.04em;
	/* 79.17 ÷ 83.33: el PSD pide una caja de línea MENOR que el tamaño de
	   fuente (interlineado más apretado que el font-size) -- proporción, no
	   px fijo, para que escale con el font-size fluido. */
	line-height: 0.9501;
	/* Las dos líneas del diseño ("Expertos en" / "perforación") salen solas
	   del ancho de la columna (454fr, más angosta que la frase completa) --
	   sin <br> a mano, para que siga envolviendo bien si el texto cambia. */
	text-wrap: balance;
}

.ec-industrias-intro-texto {
	/* 11px extra sobre el padding-top compartido con el título (ver
	   .ec-industrias-intro): las dos cajas arrancan en la misma línea de
	   grid, pero el "aire" propio de cada tamaño de fuente sobre su tinta
	   no es igual -- medido y ajustado en vivo con ecVerificarPSD(). */
	margin: 0.6875rem 0 0;
	color: var(--ec-texto);
	font-size: 1.5625rem; /* 25px */
	font-weight: var(--ec-peso-regular);
	line-height: 29.17px; /* px directo, no proporción -- es el interlineado real del PSD (ver psd-industrias.json) */
}

/* El panel de mymedi pone strong en peso 500 (ver el aviso de "Robustez" en
   la cabecera del archivo) -- los dos tramos en negrita del párrafo piden
   peso explícito, cada uno al tamaño de SU tramo (no todo el párrafo):
   "30 años de experiencia" es más grande (29.17px) que el resto del párrafo
   (25px) -- confirmado en psd-industrias.json, no es una errata. */
.ec-industrias-intro-texto strong {
	font-size: 1.5625rem; /* 25px, mismo tamaño del párrafo -- ver .ec-texto-naranja abajo para el tramo que SÍ cambia de tamaño */
	font-weight: var(--ec-peso-bold);
}

/* Texto en naranja y negrita -- pedida por el encargo para "30 años de
   experiencia", la única clase que el campo editable admite (ver
   ec_industrias_etiquetas_permitidas() en inc/industrias.php). Selector
   propio (no ".strong.ec-texto-naranja", que no haría falta): la clase ya
   solo se usa sobre un <strong>, y así no depende del orden con la regla de
   arriba -- misma especificidad, pero esta va después y pisa el font-size. */
.ec-industrias-intro-texto .ec-texto-naranja {
	color: var(--ec-naranja);
	font-size: 1.823125rem; /* 29.17px -- este tramo SÍ es más grande que el resto del párrafo, ver el comentario de arriba */
}

/* --------------------------------------------------------------------------
   "Atendemos a las siguientes industrias:" + lista en 3 columnas
   -------------------------------------------------------------------------- */

.ec-industrias-lista-bloque {
	/* Hueco hasta el marcador gris de la primera sección (y1030) -- medido y
	   ajustado en vivo con ecVerificarPSD() contra la posición real de
	   .ec-industrias-secciones, no el simple hueco de tinta a tinta del PSD.
	   84px, no 59px: la columna 1 (la más alta de las tres, la que manda en
	   el alto de .ec-industrias-lista) perdió un renglón al arreglar el
	   punto de quiebre de "Perforación y explotación / minera a cielo
	   abierto" (ver .ec-industrias-lista-columna:nth-child(1)) -- 25px
	   menos de alto que hay que devolver aquí para que el marcador siga en
	   y1030, re-ajustado en vivo igual que antes. */
	padding-bottom: 5.25rem; /* 84px */
}

.ec-industrias-lista-titulo {
	/* 46px hasta la primera línea base de la lista -- medido y ajustado en
	   vivo con ecVerificarPSD() (±1px), no el simple hueco de tinta a tinta
	   del PSD. */
	margin: 0 0 2.875rem;
	color: var(--ec-texto);
	font-size: 1.5625rem; /* 25px */
	/* 400, no 500 -- el PSD lo pide regular (verificado en psd-industrias.json:
	   Outfit-Regular). Antes 500: ver el encargo. */
	font-weight: var(--ec-peso-regular);
	line-height: 29.17px; /* el interlineado del PSD -- una sola línea, no se ve, pero queda explícito por la regla de robustez */
}

/* Flex con márgenes en cascada, no grid parejo: las tres columnas del PSD
   NO miden ni empiezan igual (134 / 547 / 911px de tinta, con huecos de
   380px y 350px de por medio, aprox.) -- mismo criterio que la fila de
   iconos de Servicios (.ec-servicio-iconos-5, style.css): cada columna
   fija su propio ancho (el mínimo que conserva el mismo punto de quiebre
   que el PSD en el único elemento que se parte en dos líneas de cada
   columna) y su propio margin-left, que se ACUMULA sobre el anterior. */
.ec-industrias-lista {
	display: flex;
	align-items: flex-start;
}

.ec-industrias-lista-columna {
	margin: 0;
	padding: 0;
	list-style: none; /* anula "list-style:disc inside" de mymedi (ver Robustez) */
	color: var(--ec-texto);
	font-size: 1.5625rem; /* 25px -- en la propia columna, no solo en el <li>: la herramienta mide el estilo computado de ESTE elemento (el <ul>, que es con el que empareja el texto completo de cada columna del PSD), no el del <li> */
	font-weight: var(--ec-peso-regular);
}
.ec-industrias-lista-columna:nth-child(1) {
	/* 308px -- antes 300px (281px de texto útil), 1px corta contra "Perforación y
	   explotación" (línea más ancha del PSD): partía ese ítem en 3 renglones en vez de
	   2. +8px de holgura (el texto real no calca exacto el ancho de tinta del PSD) --
	   verificado en vivo con Range.getClientRects() sobre cada <li>. */
	width: 19.25rem;
	margin-left: 0;
}
.ec-industrias-lista-columna:nth-child(2) {
	/* 258px -- mismo motivo que la columna 1: "Pilotes y micropilotes" partía en 2
	   renglones en vez de 1. margin-left reducido los mismos 8px para que la viñeta
	   de esta columna no se mueva de x528 (114 + 308 + 106 = 528). */
	width: 16.125rem;
	margin-left: 6.625rem; /* 106px de hueco (x528 − (x114+308)) */
}
.ec-industrias-lista-columna:nth-child(3) {
	/* 278px -- misma holgura de +8px, por consistencia con las otras dos columnas (esta
	   ya partía "Pozos de agua y de" / "absorción" igual que el PSD, y lo sigue haciendo).
	   margin-left reducido en 8px para que la viñeta no se mueva de x891. */
	width: 17.375rem;
	margin-left: 6.5625rem; /* 105px de hueco (x891 − (x528+258)) */
}

.ec-industrias-lista-columna li {
	position: relative;
	/* mymedi pone "list-style:disc inside" DIRECTO en ul li (ver Robustez,
	   cabecera del archivo) -- el list-style:none de la columna, arriba, no
	   alcanza: es una propiedad heredable, pero una regla que apunta al
	   propio <li> (como la de mymedi) le gana a lo heredado del padre,
	   pase lo que pase con la especificidad. Sin este override, "inside"
	   mete el punto disc como si fuera texto antes del contenido y corre
	   toda la línea ~34px a la derecha -- verificado con
	   getBoundingClientRect() (dx34 antes de este ajuste). */
	list-style: none;
	/* 0 arriba/abajo anula el "padding:8px 0" de mymedi (ver Robustez); 20px
	   a la izquierda deja sitio al punto en ::before, más abajo. */
	padding: 0 0 0 1.25rem;
	/* 25px: junto con el line-height de abajo, da exactamente 50px de línea
	   base a línea base entre ítems de una sola línea (25 del propio
	   renglón + 25 de este margen) y 25px entre líneas partidas de un mismo
	   ítem (las da el line-height solo, sin margen de por medio dentro del
	   mismo <li>) -- ver el aviso del encargo: la herramienta no revisa el
	   interlineado del <ul>, así que esto se verificó a mano con
	   getBoundingClientRect en cada <li>. */
	margin: 0 0 1.5625rem;
	line-height: 25px; /* px exacto, no proporción -- es la distancia entre líneas que pide el encargo, no el interlineado "natural" del PSD */
}
.ec-industrias-lista-columna li:last-child {
	margin-bottom: 0;
}

/* Punto simple, igual que el diseño -- ::before en vez de list-style para
   controlar tamaño y posición sin depender de cómo cada navegador dibuje
   el marcador de un <li> (y sin heredar el "disc" que pone mymedi). */
.ec-industrias-lista-columna li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.469rem; /* centra el punto de 10px en el primer renglón de 25px: (25−10)÷2 */
	width: 0.625rem; /* 10px */
	height: 0.625rem;
	border-radius: 50%;
	background-color: var(--ec-texto);
}

/* ==========================================================================
   Nueve secciones alternadas
   ==========================================================================
   A todo el ancho, mismo truco 100vw / margin-left calc(50% - 50vw) que el
   hero y la banda de Servicios (style.css) -- así la mitad de la imagen
   toca el borde de la ventana sola, por ser la primera/última columna de
   una fila que ya mide el 100% del viewport, sin ningún ajuste aparte.

   Alto fijo de 523px por fila (min-height, no height -- ver el aviso del
   encargo: un texto más largo que el del diseño debe poder crecer la fila
   en vez de recortarse) y las filas van pegadas entre sí (sin margen ni
   gap) -- igual que en el PSD, donde una sección empieza justo donde
   termina la anterior.
   ========================================================================== */

.ec-industrias-secciones {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.ec-industrias-seccion {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* 522px, no 523: el PSD marca cada marcador gris a 523px de alto
	   (x-11..715 y1030..1553, 523 exactos), pero el x1/y1 de la SIGUIENTE
	   sección no siempre arranca justo 523px después del anterior --
	   arrastra un desvío de hasta -8px hacia la novena sección (Tierras
	   físicas: 1030+523×8=5214 contra los 5206 reales del PSD). 522px
	   reproduce las 9 posiciones de arranque con error ≤2px (1030+522×8=
	   5206, exacto) en vez de acumular ese arrastre -- verificado en vivo
	   con ecVerificarPSD(). */
	min-height: 32.625rem;
}

/* Imagen a la izquierda por omisión (secciones impares: 1, 3, 5...); la
   fila ".ec-industrias-seccion-invertida" (pares) intercambia las dos
   columnas de grid -- así el marcado siempre queda en el mismo orden
   (imagen primero, texto después) y solo el CSS decide el lado visual. */
.ec-industrias-seccion-imagen {
	grid-column: 1;
	grid-row: 1;
}

.ec-industrias-seccion-texto {
	grid-column: 2;
	grid-row: 1;
}

.ec-industrias-seccion-invertida .ec-industrias-seccion-imagen {
	grid-column: 2;
}

.ec-industrias-seccion-invertida .ec-industrias-seccion-texto {
	grid-column: 1;
}

/* Marco común a la foto real (.ec-parallax, ver animaciones.css) y al
   marcador gris: los dos llenan toda la altura Y el ancho de su celda --
   con grid-template-columns:1fr 1fr, esa celda ya mide la mitad exacta del
   viewport (720px a 1440px), muy cerca de los 726px del PSD. */
.ec-industrias-seccion-marco {
	display: block;
	width: 100%;
	height: 100%;
}

.ec-industrias-seccion-marco img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Marcador gris — "foto pendiente"
   --------------------------------------------------------------------------
   #ECECEC del PSD -- --ec-gris-lineas (#E8E8E8) es el gris ya definido en
   :root más cercano (no se define un hex nuevo, regla del encargo: colores
   solo con var(--ec-*)). Ícono centrado, a la proporción de «Capa 46» del
   PSD (203×149 al 40% de opacidad) -- el SVG es cuadrado de origen (un
   icono genérico de foto), así que se acerca en tamaño sin estirarlo a un
   rectángulo exacto: no es contenido medible con la herramienta, es un
   marcador temporal (el encargo confirma que las fotos reales todavía no
   existen).
   -------------------------------------------------------------------------- */

.ec-industrias-marcador {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--ec-gris-lineas);
}

.ec-industrias-marcador-icono {
	width: 9.375rem; /* 150px, del orden de los 149px de alto de «Capa 46» */
	height: 9.375rem;
	color: var(--ec-texto);
	opacity: 0.4; /* opacidad real de «Capa 46» en el PSD */
}

/* --------------------------------------------------------------------------
   Bloque de texto de cada sección
   --------------------------------------------------------------------------
   Centrado verticalmente (justify-content:center) en vez de un padding-top
   fijo: el PSD NO centra la misma cantidad de aire arriba en las 9
   secciones -- varía con cuántas líneas ocupan el título y la descripción
   (medido: la sección con la descripción más larga, «Minería», arranca más
   arriba que el resto) -- centrar el bloque completo reproduce ese mismo
   efecto solo, con una regla y sin nth-child por sección.
   -------------------------------------------------------------------------- */

.ec-industrias-seccion-texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* 42.5rem (680px): a 35rem (560px, el primer intento) el título de
	   «Canteras» -- el único que parte a dos líneas, "Canteras y
	   explotación" / "a cielo abierto" -- partía a TRES en vez de dos (esa
	   primera línea mide 563px de tinta en el PSD, casi el límite exacto de
	   35rem). 680px la deja envolver en el punto del PSD sin ser tan ancho
	   como para que cualquiera de los 9 títulos (de una sola línea, ninguno
	   pasa de 544px) o descripciones (hasta 655px, la de «Minería») cambien
	   de cuántas líneas ocupan frente al PSD -- verificado en vivo,
	   getBoundingClientRect() de cada título/descripción de las 9. */
	max-width: 42.5rem;
	padding: 0 2rem 0 3.4375rem; /* 55px a la izquierda: x775 − x720 (donde arranca esta columna a 1440px) -- ver más abajo el valor de las secciones invertidas */
}

.ec-industrias-seccion-invertida .ec-industrias-seccion-texto {
	padding: 0 2rem 0 5.875rem; /* 94px -- el PSD varía la x de las secciones izquierdas por descuido (94/88/75/92 según la sección); se usa 94 en todas, ver el reporte */
}

/* Del lado izquierdo el título SÍ comparte x con el antetítulo (94) -- el
   ajuste de -7px de arriba es solo del lado derecho, ver su comentario. */
.ec-industrias-seccion-invertida .ec-industrias-seccion-titulo {
	margin-left: 0;
}

.ec-industrias-seccion-antetitulo {
	/* El PSD no centra el mismo aire arriba en las 9 secciones (ver el
	   comentario grande de .ec-industrias-seccion-texto) -- este margen es
	   el que, sumado al resto de la cascada de abajo (título, descripción)
	   y al centrado vertical, deja la MAYORÍA de las 9 dentro de ±4px del
	   antetítulo real; las que no llegan (Mecánica, Geotecnia, Pilotes...)
	   quedan documentadas en el reporte como variación propia del PSD, no
	   de esta regla -- ajustado en vivo con ecVerificarPSD() sobre las 9 a
	   la vez, no una por una. */
	margin: 0 0 0.775rem;
	color: var(--ec-texto);
	font-size: 1.301875rem; /* 20.83px */
	/* 400, no 600 -- el PSD lo pide regular (Outfit-Regular en el JSON).
	   Antes 600: ver el encargo. */
	font-weight: var(--ec-peso-regular);
	text-transform: uppercase;
	letter-spacing: 0.2em; /* +4.17px a 20.83px -- el tracking del PSD (track 200, en milésimas de em) */
	line-height: 1.3; /* el PSD no trae interlineado propio aquí (una sola línea) -- proporción razonable, no medida */
}

.ec-industrias-seccion-titulo {
	/* margin-left -7px SOLO del lado derecho (ver el override de abajo para
	   las secciones invertidas, que lo deja en 0): el PSD pone la tinta del
	   título ~7px más a la izquierda que el antetítulo/botón cuando el
	   texto va a la derecha (x768-771 contra x775/773) -- no pasa del lado
	   izquierdo (ahí título y antetítulo comparten x94). margin-bottom:
	   mismo criterio que el del antetítulo, arriba -- ajustado en vivo
	   contra las 9 secciones a la vez, no una por una. */
	margin: 0 0 1.6875rem -0.4375rem;
	color: var(--ec-texto);
	/* Fluido, mismo método que .ec-industrias-intro-titulo -- MÁXIMO =
	   58.33px (3.645625rem), el tamaño real del PSD (antes 53px). MÍNIMO =
	   36px (2.25rem), el mismo valor que ya traía este título para móvil
	   antes de esta ronda -- se conserva como piso del clamp(). */
	font-size: clamp(2.25rem, 1.8513rem + 1.9938vw, 3.645625rem);
	font-weight: var(--ec-peso-bold);
	letter-spacing: -0.04em; /* -2.33px a 58.33px -- mismo criterio que la intro, en em para escalar con el tamaño fluido */
	line-height: 1.1289; /* 65.85 ÷ 58.33 */
	text-wrap: balance;
}

.ec-industrias-seccion-descripcion {
	/* margin-left -2px: mismo motivo que el título, ver su comentario --
	   aquí SÍ pasa igual en los dos lados (no depende de si el texto va a
	   la izquierda o a la derecha), así que va en la regla base sin
	   excepción por lado. margin-bottom: mismo criterio que el antetítulo
	   -- ajustado en vivo contra las 9 secciones a la vez, no una por una;
	   «Canteras» (título a dos líneas) es la que se queda más lejos, ver
	   el reporte. */
	margin: 0 0 3.45rem -0.125rem;
	color: var(--ec-texto);
	font-size: 1.301875rem; /* 20.83px */
	font-weight: var(--ec-peso-regular);
	line-height: 29.17px; /* px directo, el interlineado real del PSD (psd-industrias.json) */
}

/* --------------------------------------------------------------------------
   Botón naranja "CONTÁCTANOS"
   --------------------------------------------------------------------------
   Clase propia (no se reutiliza .ec-boton-whatsapp de style.css): aunque se
   ven parecidos, son dos componentes con nombre y hogar distintos, y este
   archivo no depende de una clase de otro módulo (ver la cabecera).
   196×64px del PSD, tamaño fijo (no fluido: a un texto de un tamaño así de
   chico y constante no le hace falta clamp()) -- flex centra el texto
   dentro sin depender de line-height para el centrado vertical.
   -------------------------------------------------------------------------- */

.ec-industrias-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12.25rem; /* 196px */
	height: 4rem; /* 64px */
	margin: 0;
	padding: 0;
	background-color: var(--ec-naranja);
	color: var(--ec-blanco);
	font-family: var(--ec-fuente-base);
	font-size: 0.995625rem; /* 15.93px */
	font-weight: var(--ec-peso-semibold);
	line-height: 1; /* el propio flex centra -- sin esto, el line-height de 26px de mymedi (ver Robustez) alargaba la caja del botón más de 64px */
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 0; /* el diseño lo pide rectangular, igual que .ec-boton-whatsapp */
}

.ec-industrias-boton:hover {
	background-color: var(--ec-naranja-hover);
}

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

/* ==========================================================================
   Responsive
   ==========================================================================
   Dos quiebres, igual que style.css: tablet (≤1024) y móvil (≤767). Los dos
   títulos grandes (intro y sección) no necesitan reglas aquí -- su propio
   clamp() ya cubre hasta 320px, ver sus comentarios arriba. El resto del
   texto (sin PNG de referencia por debajo de 1440) se reduce ×0.9 en móvil,
   mismo criterio que la sección Responsive de style.css.
   ========================================================================== */

@media (max-width: 1024px) {
	.ec-industrias-contenedor {
		padding: 0 2.5rem; /* 40px -- el 114/121px del escritorio ya no cabe cómodo en un lienzo más angosto */
	}

	.ec-industrias-intro {
		padding: 3rem 0;
	}

	.ec-industrias-seccion-texto,
	.ec-industrias-seccion-invertida .ec-industrias-seccion-texto {
		max-width: none;
		padding: 2.5rem;
	}

	/* Los -7px del título y los -2px de la descripción (ver sus comentarios en la
	   sección de escritorio, arriba) son ajustes de tinta contra el PSD SOLO a 1440px
	   -- por debajo de eso (este quiebre y el de 767, que hereda esto en cascada) los
	   cuatro elementos del bloque de texto deben compartir el mismo borde izquierdo. */
	.ec-industrias-seccion-titulo {
		margin-left: 0;
	}

	.ec-industrias-seccion-descripcion {
		margin-left: 0;
	}
}

@media (max-width: 767px) {
	.ec-industrias-contenedor {
		/* 20px -- mismo margen lateral que el resto del sitio en este ancho
		   (ver .ts-header .header-middle > .container y el arreglo de
		   .ec-servicio-columnas en style.css). */
		padding: 0 1.25rem;
	}

	.ec-industrias-intro {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding: 3rem 0 2.5rem;
	}

	.ec-industrias-intro-texto,
	.ec-industrias-intro-texto strong,
	.ec-industrias-lista-titulo,
	.ec-industrias-lista-columna,
	.ec-industrias-lista-columna li {
		font-size: 1.40625rem; /* 22.5px = 25px × 0.9 */
	}

	.ec-industrias-intro-texto .ec-texto-naranja {
		font-size: 1.640625rem; /* 26.25px = 29.17px × 0.9 aprox. */
	}

	.ec-industrias-lista-bloque {
		padding-bottom: 3rem;
	}

	/* Las tres columnas "a medida" del escritorio (ver la sección de arriba)
	   son exactas para el hueco disponible a 1440px -- por debajo de eso se
	   apilan: una lista angosta de tres columnas en cascada ya no tiene
	   sitio cómodo, y el encargo no da un objetivo de móvil para esto. */
	.ec-industrias-lista {
		flex-direction: column;
	}
	.ec-industrias-lista-columna:nth-child(1),
	.ec-industrias-lista-columna:nth-child(2),
	.ec-industrias-lista-columna:nth-child(3) {
		width: auto;
		margin-left: 0;
		margin-bottom: 1rem;
	}
	.ec-industrias-lista-columna:nth-child(3) {
		margin-bottom: 0;
	}

	/* Apilada: imagen arriba, texto abajo, SIEMPRE en ese orden -- las filas
	   pares dejan de invertirse en móvil (no hay ancho para dos columnas de
	   cualquier forma). */
	.ec-industrias-seccion,
	.ec-industrias-seccion-invertida {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.ec-industrias-seccion-imagen,
	.ec-industrias-seccion-invertida .ec-industrias-seccion-imagen {
		grid-column: 1;
		grid-row: 1;
	}

	.ec-industrias-seccion-texto,
	.ec-industrias-seccion-invertida .ec-industrias-seccion-texto {
		grid-column: 1;
		grid-row: 2;
		max-width: none;
		padding: 2.5rem 1.25rem; /* mismo margen lateral que el resto del sitio en este ancho, ver .ec-industrias-contenedor arriba */
	}

	.ec-industrias-seccion-marco {
		height: 18rem; /* la fila ya no fija la altura (min-height:0 arriba) -- mismo alto que .ec-servicio-hero en móvil, para quedar consistente */
	}

	.ec-industrias-seccion-antetitulo {
		font-size: 1.1717rem; /* 18.75px = 20.83px × 0.9 */
	}

	.ec-industrias-seccion-descripcion {
		font-size: 1.1717rem; /* 18.75px = 20.83px × 0.9 */
	}

	.ec-industrias-boton {
		font-size: 0.896rem; /* 14.34px = 15.93px × 0.9 */
	}
}