/*
 * Página Inicio — Engranaje Corporativo.
 * ============================================================================
 * Encolado SOLO en la portada (ec_encolar_pagina_actual(), functions.php).
 * Medidas de preview/real/spec-inicio.md, verificadas con ecVerificarPSD()
 * a 1440px. Las piezas compartidas (testimonio, cifras, video, tarjetas de
 * servicio) tienen su CSS en style.css, sección "Componentes compartidos"
 * -- aquí solo va lo propio de Inicio: hero, logos, intro, soluciones,
 * fotos, encabezado de servicios/blog y los envoltorios que posicionan las
 * piezas compartidas dentro de esta página.
 *
 * Robustez frente al CSS real de mymedi (carga antes que este archivo):
 * cada regla fija font-size/line-height/margin/padding explícitos, nunca
 * los hereda -- mismo aviso que industrias.css. Sin !important. Colores
 * solo con var(--ec-*) ya definidas en :root; dos excepciones sin token de
 * marca, documentadas en su sitio (separadores de logos y "Shape" del
 * hero -- ambos con el gris/blanco ya existente más cercano, no un hex
 * nuevo).
 * ========================================================================== */

/* --------------------------------------------------------------------------
   Utilidad — antetítulo (eyebrow)
   --------------------------------------------------------------------------
   Se repite en Intro, Soluciones, Nuestros servicios y Blog con la misma
   tipografía; solo cambia el color (claro sobre el bloque oscuro de
   Soluciones) y el margen inferior, que cada sección fija por su cuenta
   (ver más abajo) porque el PSD no lo mide igual en las cuatro.
   -------------------------------------------------------------------------- */
.ec-inicio-eyebrow {
	margin: 0;
	color: var(--ec-texto);
	font-size: 1.301875rem; /* 20.83px */
	font-weight: var(--ec-peso-regular);
	letter-spacing: 0.2em; /* +4.17px a 20.83px, el tracking del PSD */
	line-height: 1.3;
	/* El PSD escribe este texto en minúsculas con el estilo "todo mayúsculas"
	   aplicado en Photoshop -- text-transform, no mayúsculas a mano en el
	   campo editable (así el meta box sigue mostrando/guardando el texto
	   real, con mayúsculas y minúsculas normales). */
	text-transform: uppercase;
	/* El PSD dibuja el antetítulo de Intro en una sola línea (561px de tinta,
	   por el tracking ancho) más angosta que el contenedor del texto
	   (521px) -- sin nowrap, envolvía a 2 líneas y desplazaba todo lo de
	   abajo. Una sola línea siempre: es un rótulo corto por diseño. */
	white-space: nowrap;
}

.ec-inicio-eyebrow--claro {
	color: var(--ec-blanco);
}

/* ==========================================================================
   1. Hero — modificador "inicio" de templates/partes/hero.php
   ========================================================================== */

.ec-servicio-hero--inicio {
	height: 42.125rem; /* 674px */
}

.ec-servicio-hero--inicio .ec-servicio-hero-imagen {
	object-position: 50% 30%; /* el rostro/equipo de la foto queda arriba del centro -- a ojo, foto sin puntos de referencia medibles */
}

/* Degradado pedido por el encargo -- sustituye la capa plana compartida
   con Servicios/Industrias (ver .ec-servicio-hero-capa en style.css). Más
   oscuro abajo, donde va el texto, para mantener el contraste del blanco
   sobre la foto. */
.ec-servicio-hero--inicio .ec-servicio-hero-capa {
	background: linear-gradient(180deg, rgba(17, 17, 17, 0.1) 0%, rgba(17, 17, 17, 0.75) 100%);
}

.ec-servicio-hero--inicio .ec-servicio-hero-contenido {
	/* Anula el flex centrado/anclado-abajo compartido (ver style.css): aquí
	   el bloque va a la izquierda, no centrado, y no ocupa todo el ancho. */
	align-items: flex-start;
	justify-content: flex-end;
	text-align: left;
	max-width: 40rem; /* 640px -- ancho de lectura cómodo para la bajada */
	padding: 0 1.5rem 5rem 4.5rem; /* 80px abajo (674−594, hueco real del PSD tras el botón), 72px a la izquierda */
}

.ec-servicio-hero--inicio .ec-servicio-hero-titulo {
	margin: 0 0 1.8125rem; /* 29px -- 33px del PSD menos 4px: ajustado en vivo con ecVerificarPSD() junto con el de la bajada, de abajo, para que las dos líneas caigan en su línea base exacta (el gap de 33px del PSD no da, solo, el resultado correcto: el "gap" del flex del contenedor compartido -- ver .ec-servicio-hero-contenido en style.css -- ya suma 10px extra entre hermanos) */
	max-width: none;
	color: var(--ec-blanco);
	/* Tamaño real del hero de Inicio (85.67px) -- MAYOR que el de Servicios/
	   Industrias (58.33px, la regla compartida en style.css): aquí SÍ es el
	   <h1> de la página (ver hero.php), así que necesita su propio tamaño en
	   vez del heredado. Mismo clamp() que .ec-titulo-grande (style.css) --
	   no se reutiliza esa clase aquí porque .ec-servicio-hero-titulo ya trae
	   el resto de la maquetación (posición, flujo) que si necesita este
	   parcial compartido. */
	font-size: clamp(2.625rem, 1.8452rem + 3.8992vw, 5.35438rem);
	font-weight: var(--ec-peso-bold);
	letter-spacing: -0.04em;
	line-height: 0.8659; /* 74.18 ÷ 85.67 */
	text-wrap: balance;
}

.ec-servicio-hero-bajada {
	position: relative;
	margin: 0 0 1.5625rem; /* 25px -- ver el comentario del título, arriba: mismo ajuste en vivo, no el gap crudo de 33px del PSD */
	padding-left: 2.0625rem; /* deja sitio a la flecha, absoluta -- ver .ec-servicio-hero-bajada-flecha */
	color: var(--ec-blanco);
	font-size: 1.301875rem; /* 20.83px */
	font-weight: var(--ec-peso-regular);
	letter-spacing: -0.04em; /* -0.83px a 20.83px, el tracking del PSD */
	line-height: 1.3773; /* 28.69 ÷ 20.83 */
}

/* Flecha delgada hacia abajo junto a la bajada -- capa PIXEL "Shape" del PSD
   (14×50px), sin color propio medible -- blanco translúcido, a juego con el
   resto del texto del hero. SVG real (ver hero.php), ya no un ::before
   sólido: el PSD dibuja una flecha, no una barra. */
.ec-servicio-hero-bajada-flecha {
	position: absolute;
	top: 0;
	left: 0;
	color: rgba(255, 255, 255, 0.85); /* el trazo es delgado (2px) -- más opaco que la barra vieja (0.5) para que se siga leyendo bien */
}

.ec-servicio-hero-boton {
	padding-left: 1rem; /* 16px -- la tinta del texto del PSD arranca a 16px del borde del botón, no a 1.75em (el valor por omisión del componente compartido) */
	padding-right: 1.75rem;
}

/* ==========================================================================
   2. Logos de marcas
   ========================================================================== */

/* 1.5.5 -- de 1025px en adelante: 3 columnas iguales (una por logo, el logo
   CENTRADO en su tercio) con los 2 separadores entre ellas, a todo el alto
   de la franja -- ya no flex+space-between (eso repartía el hueco LIBRE
   entre 5 logos de ancho distinto, no dividía la franja en tercios parejos;
   con solo 3 logos, además, dejaba casi todo el hueco pegado a los 2
   extremos). Grid con las mismas 5 posiciones del marcado (logo, separador,
   logo, separador, logo, ver templates/inicio.php): las 3 columnas "1fr"
   miden EXACTAMENTE igual entre sí (los tercios), las 2 de 4px son los
   separadores -- no cuentan casi nada del ancho total, así que "tercio de
   la franja" es válido incluso contándolos. */
.ec-inicio-logos {
	display: grid;
	grid-template-columns: 1fr 0.25rem 1fr 0.25rem 1fr;
	align-items: stretch;
	max-width: 90rem; /* 1440px */
	margin: 0 auto;
	padding: 2.75rem 2.375rem; /* 44px arriba/abajo: con el logo más alto (PUMA, 79px) más este padding y el borde de 4px de abajo, da los 171px de banda del PSD */
	/* El PSD pide el gris exacto #C0C0C0 al 50% -- ninguna var(--ec-*) existente
	   es ese tono (--ec-gris-lineas es #E8E8E8, mucho más claro), así que va
	   directo en rgba(); documentado como excepción en la cabecera del
	   archivo, junto con la flecha del hero. */
	border-bottom: 0.25rem solid rgba(192, 192, 192, 0.5); /* 4px, «Rectángulo 3» del PSD */
}

/* Envoltorio de CADA logo -- lo centra dentro de su columna/tercio (el <img>
   por sí solo, como item de grid, se pegaría al borde de su celda, no al
   centro). */
.ec-inicio-logos-item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0; /* la celda de grid puede encoger por debajo del ancho intrínseco del logo sin forzar scroll horizontal */
}

/* Cada logo con su propio alto -- el PSD NO los dibuja a un tamaño parejo
   (PUMA mide 79px, Airman y Stenuick menos, ver el reporte): un max-height
   compartido habría deformado esa proporción. width:auto conserva el
   aspecto propio de cada archivo. Clases por MARCA (ver templates/
   inicio.php), no por posición ni nth-child: así no hay que renumerar nada
   si el orden o la cantidad de logos vuelve a cambiar. */
.ec-inicio-logos-imagen {
	display: block;
	width: auto;
	max-width: 100%; /* respaldo si algún día la columna encoge más que el logo -- no lo hace hoy a los 3 anchos que pide el encargo, pero evita que un logo empuje scroll horizontal */
	/* En GRIS -- el PSD los pide en gris, no a color (ver templates/inicio.php,
	   que ahora apunta a los archivos "-gris.webp"); sin filtro CSS: los
	   archivos ya vienen en gris de fábrica. */
}

.ec-inicio-logos-imagen--airman {
	height: 2.0625rem; /* 33px */
}
.ec-inicio-logos-imagen--puma {
	height: 4.9375rem; /* 79px -- el más alto de los 3 */
}
.ec-inicio-logos-imagen--stenuick {
	height: 2.75rem; /* 44px */
}

.ec-inicio-logos-separador {
	align-self: stretch; /* a todo el alto de la fila -- el PSD lo dibuja a los 171px completos de la banda, no a una altura recortada */
	width: 0.25rem; /* 4px, del PSD */
	background-color: rgba(192, 192, 192, 0.5); /* mismo gris/opacidad que el borde de abajo -- ver el comentario de .ec-inicio-logos */
}

/* ==========================================================================
   3. Intro nosotros
   ========================================================================== */

.ec-inicio-intro {
	display: flex;
	align-items: center;
	/* flex-start, no space-between: con space-between, el hueco entre la foto
	   y el texto se ESTIRA con todo el espacio libre del renglón (el texto no
	   crece más allá de su max-width) -- el texto terminaba 102px más a la
	   derecha de lo que mide el PSD. Con flex-start, el "gap" de abajo es la
	   única fuente del hueco, medible y estable. */
	justify-content: flex-start;
	gap: 5.75rem; /* 92px -- x696 (texto) − x604 (borde derecho de la foto), del PSD */
	max-width: 90rem;
	margin: 0 auto;
	padding: 4.6875rem 7.5625rem 4.6875rem 8.4375rem; /* 75px arriba/abajo, 121px derecha, 135px izquierda (x135, donde el PSD arranca la foto) */
	background-color: var(--ec-blanco);
}

.ec-inicio-intro-imagenes {
	position: relative;
	z-index: 0; /* crea su propio contexto de apilamiento: sin esto, el z-index:-1 del vector (abajo) busca el contexto MÁS CERCANO que sí lo cree -- que podía ser la raíz misma, quedando detrás del fondo blanco opaco de .ec-inicio-intro y desapareciendo por completo */
	flex: 0 0 auto;
	width: 29.3125rem; /* 469px, ancho de la foto */
}

.ec-inicio-intro-foto {
	width: 100%;
	aspect-ratio: 469 / 579;
}

.ec-inicio-intro-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ec-inicio-intro-vector {
	position: absolute;
	top: 14.75rem; /* 236px, del PSD (y1153 − y917 del contenedor) */
	left: 53.9375rem; /* 863px = x998 (PSD) − x135 (borde izquierdo de la foto, mismo origen que este contenedor) */
	width: 31.875rem; /* 510px, del PSD -- se sale del lienzo por la derecha (998+510=1508 > 1440), tal cual el diseño */
	height: auto;
	z-index: -1; /* detrás de la foto (hermana, en el mismo contexto de apilamiento que crea .ec-inicio-intro-imagenes) donde se superponen; delante del fondo blanco de la sección */
}

.ec-inicio-intro-texto {
	flex: 1 1 32.5625rem; /* 521px, el párrafo más ancho del PSD */
	max-width: 32.5625rem;
}

.ec-inicio-intro-texto .ec-inicio-eyebrow {
	margin-bottom: 1.125rem; /* 18px -- ajustado en vivo con ecVerificarPSD(), no los 23px "de manual": con ese valor el título quedaba 5px bajo */
}

.ec-inicio-intro-titulo {
	margin: 0 0 1.25rem; /* 20px, del PSD */
	color: var(--ec-texto);
}

.ec-inicio-intro-titulo .ec-texto-naranja {
	color: var(--ec-naranja);
}

.ec-inicio-intro-parrafo {
	margin: 1.5625rem 0 2.0625rem 0.4375rem; /* 33px hasta el botón, del PSD. Arriba (25px) e izquierda (7px): ajustados en vivo con ecVerificarPSD() -- el PSD no alinea el párrafo con el título ni dos cajas de tinta seguidas (ver el reporte), así que hace falta el propio margen, no solo heredar el borde de .ec-inicio-intro-texto. */
	color: var(--ec-texto);
	font-size: 1.5625rem; /* 25px */
	font-weight: var(--ec-peso-regular);
	line-height: 29.17px; /* px directo, el interlineado real del PSD */
}

/* El padding-left compartido de .ec-boton-primario (1.75em ≈ 28px) no da la
   tinta del texto exactamente donde la mide el PSD en este botón concreto
   (x748 del texto − x698 del rectángulo = 50px) -- cada botón de Inicio
   mide distinto (ver también .ec-inicio-soluciones-boton, más abajo), así
   que aquí va el propio. */
.ec-inicio-intro-boton {
	padding-left: 3.125rem; /* 50px */
}

/* ==========================================================================
   4. Soluciones — bloque oscuro, 4 tarjetas
   ========================================================================== */

/* El PSD mide el fondo en #1C1C1C -- var(--ec-negro-footer), no
   var(--ec-negro-titulares) (#111111, otro negro del tema). */
.ec-inicio-soluciones {
	background-color: var(--ec-negro-footer);
}

.ec-inicio-soluciones-interior {
	display: flex;
	align-items: flex-start;
	/* flex-start, no space-between -- mismo motivo que .ec-inicio-intro (ver
	   más arriba): con space-between, el "gap" es solo un mínimo y el hueco
	   real se estira con el espacio libre del renglón. */
	justify-content: flex-start;
	gap: 2.875rem; /* 46px -- ajustado en vivo con ecVerificarPSD() para que la rejilla de tarjetas caiga en x745 */
	max-width: 90rem;
	margin: 0 auto;
	padding: 6.875rem 6.125rem 6.875rem 7.5625rem; /* 110px arriba y abajo (ajustado en vivo con ecVerificarPSD(): la rejilla de tarjetas quedó unos px más alta que la columna de texto, así que el abajo bajó a la par), 98px derecha, 121px izquierda -- ver el reporte */
}

.ec-inicio-soluciones-texto {
	max-width: 36.125rem; /* 578px, del PSD */
}

.ec-inicio-soluciones-texto .ec-inicio-eyebrow {
	margin-bottom: 1.5rem; /* 24px -- ajustado en vivo con ecVerificarPSD(), no los 36px "de manual" entre cajas de tinta */
}

.ec-inicio-soluciones-titulo {
	margin: 0 0 2.75rem -0.4375rem; /* 44px -- ajustado en vivo con ecVerificarPSD(). Izquierda (-7px): el PSD tampoco alinea este título con el resto de la columna (ver el eyebrow/párrafo/botón, cada uno con su propio ajuste). */
	/* Al revés que los otros 3 títulos grandes: aquí el color BASE es el
	   naranja ("Soluciones") y el tramo especial es blanco -- ver
	   ec_inicio_valores_por_omision() en inc/paginas/inicio.php. */
	color: var(--ec-naranja);
}

.ec-inicio-soluciones-titulo .ec-texto-blanco {
	color: var(--ec-blanco);
}

.ec-inicio-soluciones-parrafo {
	margin: 0 0 3.125rem -0.25rem; /* 50px -- ajustado en vivo con ecVerificarPSD(). Izquierda (-4px): mismo motivo que el título, arriba. */
	max-width: 32rem; /* 512px, del PSD */
	color: var(--ec-blanco);
	font-size: 1.5625rem; /* 25px */
	font-weight: var(--ec-peso-regular);
	line-height: 29.17px;
}

/* Mismo motivo que .ec-inicio-intro-boton (ver assets/css/paginas/
   inicio.css): el padding-left compartido no da la tinta donde la mide el
   PSD en este botón (x152 del texto − x116 del rectángulo = 36px). */
.ec-inicio-soluciones-boton {
	padding-left: 2.25rem; /* 36px */
	margin-left: -0.3125rem; /* -5px -- ajustado en vivo con ecVerificarPSD(), mismo motivo que el título/párrafo de arriba */
}

/* Rejilla 2×2 de tarjetas -- cada celda fija su posición por ÍNDICE
   (ec-inicio-soluciones-tarjeta--N), no por orden en el marcado: así, si
   se vacía una tarjeta desde el meta box, las demás no se corren a un
   hueco que no les corresponde (regla del encargo: nada de nth-child para
   esto). El orden real del PSD es Mecánica/Minería arriba, Geotecnia/
   Anclajes abajo -- pero el orden de los CAMPOS del meta box es el del
   encargo (Minería, Mecánica, Anclajes, Geotecnia), así que la rejilla
   coloca cada índice donde va el diseño con grid-area. */
.ec-inicio-soluciones-tarjetas {
	display: grid;
	grid-template-columns: repeat(2, 17.5rem); /* 280px, del PSD */
	grid-template-areas:
		'mecanica mineria'
		'geotecnia anclajes';
	/* Fila 49px, columna 26px -- ajustado en vivo con ecVerificarPSD() junto
	   con el padding de la tarjeta (más abajo). */
	gap: 3.0625rem 1.625rem;
	flex: 0 0 auto;
	/* ARREGLO -- .ec-inicio-intro-vector (más arriba, el engranaje decorativo
	   de "Acerca de nosotros") es position:absolute con z-index:-1 dentro de
	   .ec-inicio-intro-imagenes, que a su vez es position:relative con
	   z-index:0 -- ese z-index:0 CREA su propio contexto de apilamiento (ver
	   el comentario de esa regla), así que el engranaje, entero, pinta donde
	   pintaría .ec-inicio-intro-imagenes: entre los elementos POSICIONADOS
	   de la raíz, no entre los normales. .ec-inicio-soluciones (esta
	   sección, la oscura) y sus tarjetas no tenían position: los elementos
	   estáticos pintan ANTES que cualquier positioned/z-index:auto de la
	   misma raíz, sin importar el orden del HTML -- por eso el engranaje
	   (positioned) quedaba ENCIMA de esta rejilla (estática) aunque viene
	   antes en el documento. position:relative + z-index aquí la vuelve
	   TAMBIÉN positioned, con un z-index positivo que le gana al 0 del
	   engranaje -- sin importar el orden del HTML. El contenedor de la
	   rejilla, no cada tarjeta suelta: sigue transparente en los huecos y
	   fuera de su propia caja, así que el engranaje sigue viéndose sobre el
	   fondo oscuro donde no hay tarjeta -- solo las tarjetas (opacas,
	   blancas) lo tapan donde se superponen. */
	position: relative;
	z-index: 1;
}

.ec-inicio-soluciones-tarjeta--1 {
	grid-area: mineria;
}
.ec-inicio-soluciones-tarjeta--2 {
	grid-area: mecanica;
}
.ec-inicio-soluciones-tarjeta--3 {
	grid-area: anclajes;
}
.ec-inicio-soluciones-tarjeta--4 {
	grid-area: geotecnia;
}

/* Columna derecha (Minería arriba, Anclajes abajo) escalonada 14px más
   arriba que la izquierda -- así la miden los rectángulos blancos del PSD
   (y1672/1961 contra y1686/1976 de la izquierda). Una sola regla para las
   dos tarjetas de la columna (no una por tarjeta con valores distintos) y
   con transform, no margin: no cambia el alto de la fila del grid, solo
   desplaza el dibujo. */
.ec-inicio-soluciones-tarjeta--1,
.ec-inicio-soluciones-tarjeta--3 {
	transform: translateY(-0.875rem); /* 14px */
}

/* Mecánica (fila 1, columna izquierda) quedaba 10px alta respecto de las
   demás una vez cuadradas las otras tres -- ajustado en vivo con
   ecVerificarPSD(); no es el escalonado de columna (eso ya lo resuelve la
   regla de arriba), es propio de esta tarjeta. */
.ec-inicio-soluciones-tarjeta--2 {
	transform: translateY(0.625rem);
}

/* Fila 2 (Anclajes/Geotecnia): el título queda más abajo dentro de la
   tarjeta que en la fila 1 -- ajustado en vivo con ecVerificarPSD(). */
.ec-inicio-soluciones-tarjeta--3 .ec-inicio-soluciones-tarjeta-titulo,
.ec-inicio-soluciones-tarjeta--4 .ec-inicio-soluciones-tarjeta-titulo {
	margin-bottom: 0.5rem; /* 8px, en vez de los 15px de la fila 1 */
}

/* 1.5.9 -- la caja blanca (fondo + padding) pasó de la tarjeta a su hijo
   interior .ec-inicio-soluciones-tarjeta-contenido (el <a>, o un <div> si
   la tarjeta no tiene enlace): así el zoom del hover escala la caja
   entera sin tocar la tarjeta, que conserva su transform de aparición
   (animaciones.css) y el escalonado de la rejilla (--1/--2/--3, arriba).
   La tarjeta pasa a ser una rejilla de un solo hijo para que ese interior
   la llene a lo alto -- como antes la llenaba su propio fondo cuando la
   fila estiraba una tarjeta más baja que su vecina. */
.ec-inicio-soluciones-tarjeta {
	display: grid;
	box-sizing: border-box;
}

.ec-inicio-soluciones-tarjeta-contenido {
	display: block;
	box-sizing: border-box;
	/* 85px arriba, 25px lados, 34px abajo -- ajustado en vivo con
	   ecVerificarPSD(): la caja blanca del PSD mide más alta de lo que
	   sugiere la distancia directa a la caja de tinta del icono, y el texto
	   arranca más pegado al borde de lo que da a entender el ancho de la
	   propia caja blanca. Abajo, holgura razonable tras la descripción --
	   sin capa de PSD que la mida directamente (el bloque de texto no llega
	   al fondo de la caja). */
	padding: 5.3125rem 1.5625rem 2.125rem;
	background-color: var(--ec-blanco);
}

/* Solo cuando es enlace: sin subrayado ni cambio de color (el tema padre
   pinta a:hover en verde #00A198 y los textos de la tarjeta heredan de
   aquí -- cada span ya fija su propio color, esto cubre lo que no), mano
   al pasar, zoom ligero del hover y un foco de teclado bien visible. */
a.ec-inicio-soluciones-tarjeta-contenido,
a.ec-inicio-soluciones-tarjeta-contenido:hover,
a.ec-inicio-soluciones-tarjeta-contenido:focus {
	color: var(--ec-texto);
	text-decoration: none;
}

a.ec-inicio-soluciones-tarjeta-contenido {
	cursor: pointer;
	transition: transform 0.3s ease;
}

a.ec-inicio-soluciones-tarjeta-contenido:hover {
	transform: scale(1.045);
}

/* !important SOLO aquí, para ganarle a los dos del tema padre (mymedi, css/reset.css:
   "* {outline: 0 !important}" y "a:focus {outline: none !important}") -- sin él el
   foco de teclado no se veía: la regla del hover/foco normal no alcanza contra un
   !important. Verificado en vivo con Tab real y con :focus-visible forzado. */
a.ec-inicio-soluciones-tarjeta-contenido:focus-visible {
	outline: 0.1875rem solid var(--ec-naranja) !important;
	outline-offset: 0.25rem;
}

/* Movimiento reducido: sin zoom (el enlace sigue igual de usable). */
@media (prefers-reduced-motion: reduce) {
	a.ec-inicio-soluciones-tarjeta-contenido {
		transition: none;
	}

	a.ec-inicio-soluciones-tarjeta-contenido:hover {
		transform: none;
	}
}

.ec-inicio-soluciones-tarjeta-icono {
	display: block;
	width: 3.5rem; /* 56px, del PSD */
	height: 3.5rem;
	margin-bottom: 1.4375rem; /* 23px hasta el título, del PSD */
}

.ec-inicio-soluciones-tarjeta-titulo {
	display: block;
	margin-bottom: 0.9375rem; /* 15px hasta la descripción, del PSD */
	color: var(--ec-texto);
	font-size: 1.175625rem; /* 18.81px */
	font-weight: var(--ec-peso-bold);
	line-height: 15.05px; /* px directo, el interlineado real del PSD */
	text-transform: uppercase; /* el PSD escribe "Minería", etc. en minúsculas con el estilo "todo mayúsculas" -- mismo criterio que .ec-inicio-eyebrow, el texto editable no cambia */
}

.ec-inicio-soluciones-tarjeta-descripcion {
	display: block;
	color: var(--ec-texto-secundario); /* PSD: #6B6B6B, a 1 unidad de #6A6A6A -- mismo margen de muestreo que ya asume el resto del tema */
	font-size: 0.940625rem; /* 15.05px */
	font-weight: var(--ec-peso-regular);
	line-height: 15.05px;
}

/* ==========================================================================
   5. Fotos — galería de proyectos
   ========================================================================== */

/* 6 columnas (no 3): así la foto grande ocupa medio ancho (columnas 1-3) y
   el lado derecho cabe repartido en dos franjas angostas arriba (4-5 y 6) +
   una ancha abajo (4-6), tal como el PSD -- con solo 3 columnas parejas no
   hay forma de dar ese reparto asimétrico sin partir alguna celda a la
   mitad. */
.ec-inicio-fotos {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: 1fr 1fr;
	gap: 0.5rem;
	height: 45.75rem; /* 732px, del PSD */
}

.ec-inicio-fotos-item {
	display: block;
	overflow: hidden;
}

.ec-inicio-fotos-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 1 = grande, a la izquierda. 2 y 3 = arriba a la derecha, una junto a
   otra. 4 = ancha, abajo a la derecha. */
.ec-inicio-fotos-item--1 {
	grid-column: 1 / 4;
	grid-row: 1 / 3;
}
.ec-inicio-fotos-item--2 {
	grid-column: 4 / 6;
	grid-row: 1;
}
.ec-inicio-fotos-item--3 {
	grid-column: 6 / 7;
	grid-row: 1;
}
.ec-inicio-fotos-item--4 {
	grid-column: 4 / 7;
	grid-row: 2;
}

/* ==========================================================================
   6. Nuestros servicios
   ========================================================================== */

.ec-inicio-servicios {
	position: relative; /* ancla los trazos decorativos, de abajo */
	z-index: 0; /* crea su propio contexto de apilamiento -- mismo motivo que .ec-inicio-intro-imagenes: sin esto, el z-index:-1 de los trazos los manda detrás del fondo blanco de esta misma sección */
	overflow: hidden; /* los trazos se salen del lienzo del PSD por los lados (ver sus comentarios) -- oculta ese sobrante en vez de causar scroll horizontal */
	max-width: 90rem;
	margin: 0 auto;
	padding: 3.9375rem 6.25rem 7.75rem 6.9375rem; /* 63px arriba, 100px derecha, 111px izquierda -- del PSD. Abajo, 124px: ajustado en vivo con ecVerificarPSD() -- las tarjetas (con su caja blanca, más abajo) quedan más bajas de lo que sugiere solo la distancia a la caja de tinta del icono, así que hace falta más o menos aire hasta Clientes del que mide la caja blanca sola. */
	background-color: var(--ec-blanco);
}

/* Trazos topográficos de fondo -- objetos vectoriales del PSD, decorativos
   (ver templates/inicio.php). Coordenadas relativas al borde superior de
   esta sección (PSD y3051, calculado desde el antetítulo "Lo que ofrecemos"
   en y3155 menos el padding-top de arriba). */
.ec-inicio-servicios-trazo {
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.ec-inicio-servicios-trazo--chico {
	top: -0.0625rem; /* −1px, PSD y3050 -- prácticamente al ras del borde superior */
	right: -2.0625rem; /* 33px: x1473 (borde derecho) − 1440 (ancho del lienzo) */
	width: 29.5rem; /* 472px */
}

.ec-inicio-servicios-trazo--grande {
	top: 21.5625rem; /* 345px, PSD y3396 */
	left: -8.0625rem; /* −129px, PSD x-129 -- se sale del lienzo por la izquierda */
	width: 61.0625rem; /* 977px */
}

.ec-inicio-servicios-cabecera {
	/* 72rem (1152px), no los 650px del PSD -- 1.5.5: el título nuevo
	   («Nuestros principales productos») mide 1114px de tinta a 1440
	   (85.67px, el tamaño máximo de .ec-titulo-grande), más ancho que los
	   650px del PSD (medidos para el título viejo, «Nuestros servicios»,
	   bastante más corto). Con la caja angosta, el texto no cabía Y además
	   dejaba de centrarse solo (white-space:nowrap + texto más ancho que su
	   propio contenedor: el navegador ancla la línea al borde IZQUIERDO de
	   la caja en vez de repartir el sobrante a los dos lados -- ver el
	   reporte). 1152px le sobra holgura a los 1114px de tinta incluso si el
	   texto cambiara un poco, así que vuelve a centrarse normal, sin ese
	   efecto. No mueve nada del antetítulo (centrado en su propio texto,
	   corto, no le afecta el ancho de la caja) ni la altura de la sección
	   -- ver el encargo, cambio 1: "la sección completa mide lo mismo que
	   hoy". */
	max-width: 72rem; /* 1152px */
	margin: 0 auto 7.125rem; /* 114px -- ajustado en vivo con ecVerificarPSD() (no los ~72px "de manual" hasta la fila de tarjetas) */
	text-align: center;
}

.ec-inicio-servicios-cabecera .ec-inicio-eyebrow {
	margin-bottom: 1.3125rem; /* 21px -- ajustado en vivo con ecVerificarPSD() */
}

.ec-inicio-servicios-titulo {
	/* -7px: ajustado en vivo con ecVerificarPSD() -- el título del PSD queda
	   centrado en el LIENZO completo (x394-1044, centro 719 de 1440), no en
	   la caja de .ec-inicio-servicios-cabecera (que sí comparte centro con
	   el antetítulo de arriba, ese sin ajuste). */
	margin-left: -0.4375rem;
	color: var(--ec-texto);
	/* El PSD lo dibuja en una sola línea (650px de tinta) -- más ancho que
	   .ec-inicio-servicios-cabecera (650px de CAJA, sin margen propio), así
	   que con el text-wrap:balance heredado de .ec-titulo-grande envolvía a
	   dos líneas y desplazaba el texto. nowrap: este título específico no
	   necesita el reparto automático de balance (a diferencia de Soluciones
	   o Blog, que sí saltan de línea a propósito). */
	white-space: nowrap;
}

.ec-inicio-servicios-titulo .ec-texto-naranja {
	color: var(--ec-naranja);
}

/* --------------------------------------------------------------------------
   Tarjetas de producto — caja blanca con sombra, montada 67px bajo la foto,
   MISMA geometría que las 3 tarjetas de servicio de la 1.5.4 (pedido
   explícito del encargo de la 1.5.5: el cambio de servicios a productos no
   debe mover un píxel de lo que sigue -- Clientes, video, blog, footer).
   Reescribe lo que trae la sección compartida de style.css
   (.ec-tarjetas-productos-imagen/-circulo/-titulo/-descripcion): por ahora
   solo Inicio usa templates/partes/tarjetas-productos.php (ver su
   cabecera), así que este ajuste vive aquí, no allá -- este archivo se
   encola DESPUÉS de style.css (ver ec_encolar_pagina_actual(), depende de
   'ec-estilos-hijo'), así que estas reglas ganan sin necesitar !important.
   -------------------------------------------------------------------------- */
.ec-tarjetas-productos-imagen {
	position: relative;
	z-index: 1; /* encima de .ec-tarjetas-productos-cuerpo -- la foto tapa los 67px de arriba de la caja */
	height: 17.5rem; /* 280px, del PSD (376×280) -- antes 279px */
	margin-bottom: 0; /* ya no hace falta: el hueco hasta el título lo da el padding-top de la caja, de abajo */
	/* 1.5.5 -- ya no es una foto a página completa (object-fit:cover, ver la
	   base compartida en style.css): es un recorte con transparencia de
	   fondo, centrado sobre un recuadro gris de la maqueta del usuario (no
	   hay PSD para este bloque -- ver el encargo). #EFEFEF es un ESTIMADO a
	   ojo de la maqueta, no un muestreo de archivo -- no hay token de marca
	   para este gris, así que va directo en hex (mismo criterio que el resto
	   de este archivo). El gris es del RECUADRO (aquí, con CSS), no del
	   archivo .webp -- pedido explícito del encargo. */
	background-color: #efefef;
	padding: 1.5rem; /* margen interior entre el recorte y el borde del recuadro -- "centrado... ocupando casi todo el alto" del encargo */
	box-sizing: border-box;
}

.ec-tarjetas-productos-imagen img {
	/* object-fit:contain, no cover (la base compartida en style.css usa
	   cover para una foto de página completa) -- el PNG ya viene recortado a
	   su propio contenido (ver templates/partes/tarjetas-productos.php y
	   scratchpad/v155/procesar_productos.py), así que contain lo encoge
	   entero sin recortarlo ni deformarlo dentro del padding de arriba. Cada
	   producto llega a un tamaño distinto por su propia proporción -- la
	   máquina y el martillo+brocas quedan acotados por el ALTO (llenan casi
	   todo el recuadro de arriba a abajo), el compresor por el ANCHO (ver el
	   ajuste de la tarjeta 3, más abajo) -- ninguno de los tres se estira a
	   propósito con reglas por tarjeta. */
	object-fit: contain;
}

/* 1.5.5 -- ALTO FIJO (antes automático, según el contenido) y flex-column
   con el círculo empujado al fondo (margin-top:auto, ver más abajo): con
   los textos NUEVOS, la descripción de la tarjeta 2 ocupa 5 líneas y la de
   la 3 ocupa 4 (antes las 3 tarjetas tenían siempre 2 líneas de título +
   3 de descripción, parejo) -- con el alto automático de antes, cada
   tarjeta medía distinto Y la fila entera (grid, align-items:stretch por
   omisión) se estiraba a la MÁS alta, empujando Clientes/video/blog hacia
   abajo -- justo el desfase nuevo que el encargo prohíbe ("la sección
   completa mide lo mismo que hoy"). 343px = el alto REAL que medía esta
   caja en la 1.5.4 (2 líneas de título + 3 de descripción, medido en vivo
   dejando fijo todo lo demás), así que la fila NO crece pase lo que pase
   con el número de líneas de cada tarjeta -- son title/descripción los que
   ahora tienen que caber ahí, no al revés. */
.ec-tarjetas-productos-cuerpo {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	height: 21.4375rem; /* 343px, ver el comentario de arriba */
	box-sizing: border-box;
	margin-top: -4.1875rem; /* -67px: la foto se monta sobre la caja, del PSD */
	padding: 7.1875rem 1.875rem 1.75rem; /* 115px arriba (incluye los 67px tapados por la foto + el aire real hasta el título), 30px lados, 28px abajo hasta el círculo -- del PSD */
	background-color: var(--ec-blanco);
	/* Sombra suave -- medida contra Home.png (borde inferior de la caja):
	   se oscurece ~4% respecto del blanco y se disuelve en ~30px. */
	box-shadow: 0 0.625rem 1.875rem rgba(17, 17, 17, 0.08);
}

.ec-tarjetas-productos-titulo {
	margin: 0 0 1.75rem; /* 28px hasta la descripción, del PSD -- antes 29px, medido contra el círculo pegado a la foto (ver el reporte) */
	flex-shrink: 0;
}

/* Tarjeta 2 (Martillo del Fondo y Brocas): título de 2 líneas (el <br> a
   mano) + descripción de 4 (ver el ajuste de ancho, más abajo) dejaban
   solo 17px hasta el botón dentro del alto fijo de la caja -- el
   coordinador pidió al menos ~20px en las tres. Se angosta el hueco
   título-descripción (20px en vez de 28px) SOLO aquí -- ni la 1 ni la 3
   lo necesitan (sus títulos son de una sola línea) -- para devolver esos
   8px al hueco de abajo (25px reales, medido en vivo). */
.ec-tarjetas-productos-item--2 .ec-tarjetas-productos-titulo {
	margin-bottom: 1.25rem; /* 20px */
}

.ec-tarjetas-productos-descripcion {
	/* Sin margin-bottom (antes 33px, ver el reporte de la 1.5.4): con el
	   círculo empujado por flex (margin-top:auto, más abajo) ya no hace
	   falta un margen fijo aquí -- el hueco hasta el círculo es lo que
	   sobre del alto fijo de la caja, distinto en cada tarjeta según cuántas
	   líneas ocupe su descripción. */
	margin: 0 -0.8125rem; /* -13px por lado: ver el comentario de abajo */
	flex-shrink: 0;
}

/* 1.5.5 -- pedido del coordinador tras revisar la primera entrega: la
   descripción de "Martillo del Fondo y Brocas" (DTH) ocupaba 5 renglones
   ("roca." solo, casi pegado al botón) en vez de los 4 de la maqueta. El
   ancho compartido de la caja (314px, el mismo padding que el título) no
   alcanzaba -- las tres necesitan la MISMA caja más ancha, ~340px a 1440
   (pedido explícito), no un ajuste por tarjeta como el título de Servicios.
   -13px por lado (340px reales, medido con la fuente real) es el punto
   donde las tres calzan a la vez: la 1 en 3 renglones, DTH en sus 4
   renglones exactos («...Down The Hole) / opera...fondo del / barreno...
   frecuencia / y energía...roca.», ver el encargo), la 3 en 4. Con el
   círculo ya empujado por flex (ver la regla base, arriba), ensanchar la
   descripción no lo mueve -- solo cambia cuánto texto entra antes de
   llegar a él. */

.ec-tarjetas-productos-circulo {
	/* margin-top:auto empuja el círculo al fondo de la caja (alto fijo,
	   flex-column, ver .ec-tarjetas-productos-cuerpo) -- así los TRES
	   círculos quedan a la misma altura sin importar cuántas líneas ocupen
	   el título/la descripción de cada tarjeta (pedido del encargo: "los
	   tres botones quedan a la misma altura, como en la maqueta"). Ya no es
	   el margin negativo de antes (-2.875rem, para montarlo sobre el borde
	   de la foto): esa superposición ya no existe -- ahora el círculo va
	   DESPUÉS del texto, empujado por el espacio libre de la caja, no
	   montado sobre nada. auto/auto en vez de "0 auto": conserva el
	   centrado horizontal de siempre. */
	margin: auto auto 0;
	flex-shrink: 0;
	/* 1.5.5 -- el anillo casi no se veía (#E8E8E8/--ec-gris-lineas, contra la
	   caja blanca de la tarjeta): ver el encargo, cambio 3. Remedido contra
	   el PSD (Home.psd, tarjeta 1: círculo x267..303/y3877..3913, recorte
	   ampliado 8× en scratchpad/comparacion/psd-flecha-zoom8.png): el anillo
	   son dos píxeles suavizados (#DADADA y #E4E4E4 del PSD), lo que
	   equivale a ~1px de un gris más oscuro que --ec-gris-lineas -- sin
	   token para ese tono exacto, va directo en hex (mismo criterio que el
	   resto de esta sección). Sigue siendo "border", no "box-shadow" -- el
	   PSD dibuja un trazo nítido, no un difuminado con radio. */
	border: 0.0625rem solid #bfbfbf; /* 1px */
}

/* Tarjeta 2 (Martillo del Fondo y Brocas): 1.5.5, pedido del coordinador
   tras revisar la composición nueva -- "en el recuadro, el grupo ocupa
   ~88% del alto... y abarca ~65-70% del ancho". object-fit:contain (arriba)
   no cambia la CAJA del <img> (sigue midiendo 100%×100% del recuadro
   menos el padding: eso es lo que devuelve getBoundingClientRect(), no lo
   que se ALCANZA A VER) -- solo decide cuánto del dibujo entra ahí dentro,
   sin recortarlo. Con el padding compartido (1.5rem) el grupo se veía a
   ~83%/87% (alto/ancho) -- por debajo/por encima de lo pedido. Se achica
   el padding SOLO en esta tarjeta (1.5rem → 1rem) para que el recuadro
   interior le dé más aire al alto: con el aspecto real del PNG compuesto
   (550×533, ver templates/partes/tarjetas-productos.php y
   scratchpad/v155/procesar_martillo_brocas_final.py), eso da ~88.6% de
   alto y ~68.4% de ancho -- medido en vivo, calculando el tamaño real ya
   contenido (no el de la caja). */
.ec-tarjetas-productos-item--2 .ec-tarjetas-productos-imagen {
	padding: 1rem;
}

/* Tarjeta 3 (Compresores): el PSD de la maqueta no aplica aquí (no hay
   PSD para esta sección, ver el encargo) -- el ajuste es sobre la
   DESCRIPCIÓN del usuario ("el compresor ocupa ~80% del ancho"), no sobre
   texto. object-fit:contain (arriba) por sí solo llena el 100% del ancho
   disponible porque el recorte del compresor es proporcionalmente más
   ancho que el recuadro (1.49:1 contra ~1.44:1 del hueco interior) --
   este max-width dedicado dispareja esa proporción a propósito para que
   quede al ~80%, como pide la maqueta, en vez de tocar los 2 bordes. */
.ec-tarjetas-productos-item--3 .ec-tarjetas-productos-imagen img {
	/* 92%, no 80% -- el porcentaje es del ANCHO INTERIOR (ya descontado el
	   padding de 1.5rem por lado de .ec-tarjetas-productos-imagen), no del
	   recuadro completo: medido en vivo, 92% del interior da ~80% del
	   recuadro completo (el número que pide el encargo). */
	max-width: 92%;
	margin: 0 auto;
	display: block;
}

/* ==========================================================================
   7. Clientes — envoltorio de fondo para testimonio + cifras
   ========================================================================== */

.ec-inicio-clientes {
	position: relative;
	overflow: hidden;
	/* Franja #1C1C1C detrás de las cifras -- el PSD la dibuja como un
	   rectángulo aparte ("Rectángulo 5 copia", y4172..5265) que sigue MÁS
	   ABAJO de la foto, no como una foto estirada. Con la foto ahora a alto
	   fijo (ver .ec-inicio-clientes-fondo) este color de fondo es lo que se
	   ve debajo de ella y alrededor del panel del testimonio. */
	background-color: var(--ec-negro-footer);
}

.ec-inicio-clientes-fondo {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/* Alto FIJO, ya no inset:0 -- la foto del PSD mide 647px (y4071..y4718)
	   y no debe estirarse aunque el testimonio y las cifras, más abajo, hagan
	   crecer la sección más allá de eso (ver el panel del testimonio, que
	   sigue 135px después del borde inferior de la foto). */
	height: 40.4375rem; /* 647px */
	z-index: 0;
	overflow: hidden;
}

.ec-inicio-clientes-fondo::after {
	/* Capa oscura sobre la foto -- el PSD trae dos degradados a toda la
	   página encima de esta sección (ver el reporte: no se reproducen
	   íntegros, solo el efecto sobre este bloque, que es lo que pide el
	   encargo). */
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(17, 17, 17, 0.85);
}

.ec-inicio-clientes-fondo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ec-inicio-clientes-interior {
	position: relative;
	z-index: 1;
	max-width: 90rem;
	margin: 0 auto;
}

.ec-inicio-clientes-interior .ec-testimonio {
	margin-top: 7.5rem; /* 120px -- el panel #111111 empieza más abajo que la foto (y4191 contra y4071 de la foto), no a la misma altura */
	margin-left: -0.625rem; /* -10px -- el panel del PSD empieza en x-10, sangrado del borde izquierdo del lienzo */
	margin-bottom: 4.5rem; /* 72px -- ajustado en vivo con ecVerificarPSD(), no los 84px "de manual" hasta la fila de cifras */
}

.ec-inicio-clientes-interior .ec-cifras {
	/* 9.3478rem abajo (antes 5.875rem/94px) -- 1.5.5, pedido del coordinador:
	   .ec-video empezaba en 5115.4 (medido con ecVerificarPSD()) y el PSD
	   ("Capa 27") lo pone en 5171, 55.6px más abajo -- el antetítulo del
	   blog, después del video, ya calzaba solo (5854.4 contra 5857 del
	   PSD), así que esos 55.6px había que sacarlos de ABAJO de esta
	   sección (94px → 149.6px) y devolverlos de ARRIBA del blog (ver
	   .ec-inicio-blog, más abajo) para que el video se corra sin mover el
	   blog. Solo en escritorio: el quiebre de ≤1024px, más abajo en este
	   archivo, no toca ninguna de las dos reglas -- se queda con sus
	   propios valores de siempre. */
	padding: 0 1.875rem 9.3478rem; /* 149.6px abajo; laterales, aire mínimo, sin cambio */
}

/* El PSD no centra las 4 cifras parejo en su columna (ver spec-inicio.md):
   cada número/rótulo tiene su propio corrimiento, sin relación entre sí --
   acotado a Inicio (.ec-inicio-clientes .ec-cifras…), no en la base
   compartida de style.css (Contacto también usa .ec-cifras y no comparte
   este ajuste). :nth-child(), no una clase por índice: cifras.php es
   compartido y las 4 posiciones son fijas (mismo criterio que las 3
   tarjetas de servicio, arriba). Con .ec-cifras-item text-align:center y
   .ec-cifras-numero/-rotulo de ancho automático (100% menos sus márgenes),
   cada px de margin-left mueve el bloque la MITAD de eso a ojos del texto
   centrado -- de ahí que estos valores sean el doble del corrimiento medido
   con ecVerificarPSD(), no el mismo. */
.ec-inicio-clientes .ec-cifras-item:nth-child(1) .ec-cifras-numero {
	margin-left: -1.25rem; /* -20px → 10px de corrimiento real, «98» */
}
.ec-inicio-clientes .ec-cifras-item:nth-child(1) .ec-cifras-rotulo {
	margin-left: -1.875rem; /* -30px → 15px real, «Proyectos» */
}
.ec-inicio-clientes .ec-cifras-item:nth-child(2) .ec-cifras-rotulo {
	margin-left: -1.875rem; /* -30px → 15px real, «Clientes» */
	/* -67px, no 5px sueltos: .ec-cifras-rotulo (style.css) ya trae -72px de
	   margin-top (compensa el line-height grande del número) -- este valor
	   SUMA los 5px que hacían falta, no los reemplaza. */
	margin-top: -4.1875rem;
}
.ec-inicio-clientes .ec-cifras-item:nth-child(3) .ec-cifras-numero {
	margin-left: 1.25rem; /* +20px → 10px real, «30» */
}
.ec-inicio-clientes .ec-cifras-item:nth-child(3) .ec-cifras-rotulo {
	margin-left: -0.75rem; /* -12px → 6px real, «Años» */
}
.ec-inicio-clientes .ec-cifras-item:nth-child(4) .ec-cifras-numero {
	margin-left: 3.625rem; /* +58px → 29px real, «04» */
}
.ec-inicio-clientes .ec-cifras-item:nth-child(4) .ec-cifras-rotulo {
	margin-left: 4rem; /* +64px → 32px real, «Oficinas» */
}

/* ==========================================================================
   8. Blog
   ========================================================================== */

.ec-inicio-blog {
	max-width: 90rem;
	margin: 0 auto;
	/* 4.5273rem arriba (antes 8rem/128px) -- 1.5.5, la otra mitad del ajuste
	   de .ec-inicio-clientes-interior .ec-cifras (ver ahí el porqué): el
	   antetítulo de esta sección ya calzaba con el PSD, así que se le
	   resta aquí arriba exactamente lo mismo que se le sumó allá abajo
	   (55.6px), y su posición final no se mueve un píxel. */
	padding: 4.5273rem 5rem 6rem; /* 72.4px arriba; 80px lados, del PSD, sin cambio */
	background-color: var(--ec-blanco);
}

.ec-inicio-blog-cabecera {
	max-width: 55.875rem; /* 894px, del PSD */
	margin: 0 auto 4.875rem; /* 78px -- ajustado en vivo con ecVerificarPSD(), no los 64px "de manual" hasta la rejilla */
	text-align: center;
}

.ec-inicio-blog-cabecera .ec-inicio-eyebrow {
	margin-bottom: 1.4375rem; /* 23px -- ajustado en vivo con ecVerificarPSD() */
	/* -44px: igual que en Nuestros servicios, el antetítulo del PSD no
	   comparte centro con .ec-inicio-blog-cabecera -- y aquí, a diferencia de
	   Nuestros servicios, tampoco con el título grande de abajo (cada uno con
	   su propio corrimiento). Doble del corrimiento medido (22px): texto
	   centrado en una caja de ancho automático, ver el comentario de cifras. */
	margin-left: -2.75rem;
}

.ec-inicio-blog-titulo {
	color: var(--ec-texto);
	margin-left: -0.625rem; /* -10px → 5px real, mismo motivo que el antetítulo de arriba */
}

.ec-inicio-blog-titulo .ec-texto-naranja {
	color: var(--ec-naranja);
}

.ec-inicio-blog-tarjetas {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.0625rem; /* 33px, del PSD */
	margin-bottom: 2.75rem; /* hasta los puntos, del PSD */
}

.ec-inicio-blog-enlace {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ec-inicio-blog-imagen {
	display: block;
	width: 100%;
	aspect-ratio: 300 / 219; /* proporción real del PSD */
	margin-bottom: 1.25rem;
}

.ec-inicio-blog-imagen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ec-inicio-blog-tarjeta-titulo {
	margin: 0 0 0.75rem; /* 12px -- ajustado en vivo con ecVerificarPSD(), no los 19px "de manual" hasta la fecha */
	color: var(--ec-texto);
	font-size: 1.301875rem; /* 20.83px */
	font-weight: var(--ec-peso-regular);
	line-height: 1.2; /* el PSD no da interlineado propio aquí -- proporción razonable */
}

/* El título y la fecha son bloques normales, alineados a la izquierda
   (no centrados como el antetítulo/cifras de arriba) -- aquí el margen SÍ
   mueve la tinta el mismo tanto que el valor, sin dividir entre 2. Las 4
   tarjetas muestran las entradas reales más recientes (WP_Query), pero
   este ajuste es POSICIONAL (columna 1 a 4 de la rejilla), no por
   contenido -- por eso :nth-child() y no una clase por entrada: el PSD
   tampoco alinea las 4 columnas parejo entre sí. */
.ec-inicio-blog-tarjeta:nth-child(1) .ec-inicio-blog-tarjeta-titulo {
	margin-left: -0.8125rem; /* -13px */
}
.ec-inicio-blog-tarjeta:nth-child(1) .ec-inicio-blog-tarjeta-fecha {
	margin-left: -0.875rem; /* -14px */
}
.ec-inicio-blog-tarjeta:nth-child(2) .ec-inicio-blog-tarjeta-titulo,
.ec-inicio-blog-tarjeta:nth-child(2) .ec-inicio-blog-tarjeta-fecha {
	margin-left: -0.5625rem; /* -9px */
}
.ec-inicio-blog-tarjeta:nth-child(3) .ec-inicio-blog-tarjeta-titulo {
	margin-left: -0.4375rem; /* -7px */
}
.ec-inicio-blog-tarjeta:nth-child(3) .ec-inicio-blog-tarjeta-fecha {
	margin-left: -0.5rem; /* -8px */
}
.ec-inicio-blog-tarjeta:nth-child(4) .ec-inicio-blog-tarjeta-titulo,
.ec-inicio-blog-tarjeta:nth-child(4) .ec-inicio-blog-tarjeta-fecha {
	margin-left: -0.4375rem; /* -7px */
}
.ec-inicio-blog-tarjeta:nth-child(4) .ec-inicio-blog-tarjeta-titulo {
	margin-top: 0.3125rem; /* 5px -- esta tarjeta también queda 5px alta, ajustado en vivo con ecVerificarPSD() */
}

.ec-inicio-blog-tarjeta-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: #969696; /* NO hay token para este gris exacto -- ver el reporte */
	font-size: 1.071875rem; /* 17.15px */
	font-weight: var(--ec-peso-light);
}

.ec-inicio-blog-tarjeta-separador {
	width: 0.375rem; /* 6px */
	height: 0.375rem;
	border-radius: 50%;
	background-color: #c3c3c3; /* NO hay token para este gris exacto -- ver el reporte */
}

.ec-inicio-blog-puntos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem; /* 13px de diámetro con hueco, del PSD */
}

.ec-inicio-blog-punto {
	width: 0.8125rem; /* 13px */
	height: 0.8125rem;
	border-radius: 50%;
	background-color: #c3c3c3;
}

.ec-inicio-blog-punto-activo {
	background-color: var(--ec-naranja);
}

/* ==========================================================================
   Responsive — mismos dos quiebres que el resto del tema (≤1024 / ≤767).
   ========================================================================== */

@media (max-width: 1024px) {
	.ec-servicio-hero--inicio .ec-servicio-hero-contenido {
		max-width: none;
		padding: 0 2.5rem 3.5rem;
	}

	.ec-inicio-logos {
		display: flex; /* vuelve a flex -- el grid de 3 columnas de escritorio (ver la regla base) no tiene sentido con los logos apilados en una fila que envuelve */
		padding: 2rem 2.5rem;
		flex-wrap: wrap;
		gap: 1.5rem;
		justify-content: center;
	}

	.ec-inicio-logos-separador {
		display: none;
	}

	.ec-inicio-intro {
		flex-direction: column;
		padding: 3.5rem 2.5rem;
		text-align: center;
	}

	.ec-inicio-intro-imagenes {
		width: 18rem;
	}

	.ec-inicio-intro-vector {
		display: none; /* decorativo -- en columnas angostas se superpone al texto sin aportar nada */
	}

	.ec-inicio-intro-texto {
		max-width: 32rem;
	}

	.ec-inicio-soluciones-interior {
		flex-direction: column;
		align-items: center;
		padding: 4rem 2.5rem;
		text-align: center;
	}

	.ec-inicio-soluciones-tarjetas {
		margin: 0 auto;
	}

	/* 1.5.5 -- el ajuste de escritorio de arriba (9.3478rem, ver el porqué en
	   la regla base) es puramente para correr el video 55.6px sin mover el
	   blog; a este ancho el blog ya trae su PROPIO padding-top reducido
	   (más abajo, 4.5rem, ya existía desde antes) y no hace falta ni tiene
	   sentido restarle nada -- se vuelve al valor de siempre. */
	.ec-inicio-clientes-interior .ec-cifras {
		padding-bottom: 5.875rem; /* 94px, el de siempre en este quiebre */
	}

	.ec-inicio-servicios,
	.ec-inicio-blog {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}

	/* padding-top/bottom explícitos: el valor de escritorio (ver más arriba)
	   se ajustó en vivo con ecVerificarPSD() para el layout de 1440 (texto
	   centrado sobre la rejilla de 3 columnas) y no tiene sentido a este
	   ancho, con todo apilado en una columna. */
	.ec-inicio-servicios {
		padding-top: 4rem;
		padding-bottom: 4.5rem;
	}

	/* 1.5.5 -- el nowrap de escritorio (regla base, arriba) ya no cabe desde
	   este ancho: el título nuevo, más largo que "Nuestros servicios"
	   (ver el encargo), se corta contra el overflow:hidden de la sección a
	   768px aunque a 1024px sí quepa entero -- por eso el corte entra en
	   ESTE quiebre (1024px), no en el de 767px de más abajo (que ya lo
	   traía, pero dejaba 768px sin cubrir). Envolver a 2 líneas no rompe
	   nada aquí: la cabecera es de alto automático. */
	.ec-inicio-servicios-titulo {
		white-space: normal;
	}

	.ec-inicio-blog {
		padding-top: 4.5rem;
	}

	.ec-inicio-blog-tarjetas {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}

	/* El corrimiento de cifras (ver arriba) se calculó para el ancho de
	   columna de 1440 -- a este ancho, con la misma rejilla de 4 pero
	   columnas más angostas, empuja visiblemente el número lejos de su
	   rótulo (ver el reporte). Vuelve al centrado parejo de la base
	   compartida (style.css) en los dos quiebres. */
	.ec-inicio-clientes .ec-cifras-item:nth-child(1) .ec-cifras-numero,
	.ec-inicio-clientes .ec-cifras-item:nth-child(1) .ec-cifras-rotulo,
	.ec-inicio-clientes .ec-cifras-item:nth-child(3) .ec-cifras-numero,
	.ec-inicio-clientes .ec-cifras-item:nth-child(3) .ec-cifras-rotulo,
	.ec-inicio-clientes .ec-cifras-item:nth-child(4) .ec-cifras-numero,
	.ec-inicio-clientes .ec-cifras-item:nth-child(4) .ec-cifras-rotulo {
		margin-left: 0;
	}
	.ec-inicio-clientes .ec-cifras-item:nth-child(2) .ec-cifras-rotulo {
		margin-left: 0;
		margin-top: -4.5rem; /* el -72px de la base compartida, sin los 5px de más que pide 1440 */
	}
}

@media (max-width: 767px) {
	.ec-servicio-hero--inicio {
		height: auto;
		min-height: 32rem;
	}

	.ec-servicio-hero--inicio .ec-servicio-hero-contenido {
		padding: 7.5rem 1.25rem 2.5rem;
	}

	.ec-servicio-hero-bajada {
		font-size: 1.125rem; /* 18px = 20.83px × 0.9 aprox. */
	}

	.ec-inicio-logos {
		padding: 1.5rem 1.25rem;
		gap: 1.25rem;
	}

	.ec-inicio-logos-imagen {
		max-height: 2rem;
		max-width: 6rem;
	}

	.ec-inicio-intro {
		padding: 2.5rem 1.25rem;
	}

	.ec-inicio-intro-imagenes {
		width: 12.5rem;
	}

	/* 1.5.6 -- .ec-inicio-intro-texto hereda max-width:32rem (512px) del
	   quiebre de 1024px, arriba: a ese ancho (768-1024px) sobra sitio y no
	   hace falta tocarlo, pero aquí (hasta 320px) se sale por los dos
	   lados -- detectado con el script de márgenes del encargo, no a
	   simple vista. Con align-items:center (regla base) el elemento no se
	   encoge solo con el contenedor, hace falta el 100% explícito. */
	.ec-inicio-intro-texto {
		max-width: 100%;
	}

	/* El antetítulo es un rótulo de una sola línea a propósito (ver su
	   comentario en la regla base) porque a 1024px de sobra espacio -- a
	   este ancho, aun con el contenedor ya a 100% (arriba), su texto no
	   cabe en una línea (566px de ancho natural contra ~335px útiles) sin
	   quedar minúsculo. Se permite el envolvido de 2 líneas aquí, la
	   salida menos mala a este ancho. */
	.ec-inicio-intro-texto .ec-inicio-eyebrow {
		white-space: normal;
	}

	.ec-inicio-intro-parrafo {
		font-size: 1.125rem; /* 18px = 25px × 0.9 aprox. -- reducción algo mayor, texto largo en columna angosta */
	}

	.ec-inicio-soluciones-interior {
		padding: 3rem 1.25rem;
	}

	.ec-inicio-soluciones-parrafo {
		font-size: 1.125rem;
	}

	.ec-inicio-soluciones-tarjetas {
		grid-template-columns: 1fr;
		width: 100%;
		max-width: 20rem;
	}

	/* El escalonado de columna (14px) y el ajuste fino de Mecánica (10px) --
	   ver las dos reglas en el bloque de escritorio, arriba -- no tienen
	   sentido con las 4 tarjetas apiladas en una sola columna. */
	.ec-inicio-soluciones-tarjeta--1,
	.ec-inicio-soluciones-tarjeta--2,
	.ec-inicio-soluciones-tarjeta--3 {
		transform: none;
	}

	.ec-inicio-fotos {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 12rem);
		height: auto;
	}

	.ec-inicio-fotos-item--1,
	.ec-inicio-fotos-item--2,
	.ec-inicio-fotos-item--3,
	.ec-inicio-fotos-item--4 {
		grid-column: auto;
		grid-row: auto;
	}

	.ec-inicio-fotos-item--1 {
		grid-column: 1 / 3;
	}
	.ec-inicio-fotos-item--4 {
		grid-column: 1 / 3;
	}

	.ec-inicio-servicios,
	.ec-inicio-blog {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	/* Ver el comentario en el quiebre de 1024px, arriba: el valor de
	   escritorio de padding-top/bottom no tiene sentido con todo apilado. */
	.ec-inicio-servicios {
		padding-top: 3rem;
		padding-bottom: 3.5rem;
	}

	/* white-space:normal para este título ya viene del quiebre de 1024px,
	   arriba (1.5.5) -- se hereda tal cual, no hace falta repetirlo aquí. */

	.ec-inicio-blog {
		padding-top: 3.5rem;
	}

	.ec-inicio-blog-tarjetas {
		grid-template-columns: 1fr;
		max-width: 22rem;
		margin-left: auto;
		margin-right: auto;
	}

	/* 1.5.6 -- el ajuste fino por columna (nth-child, en el bloque de
	   escritorio) tampoco tiene sentido con las 4 tarjetas apiladas en una
	   sola columna (mismo criterio que .ec-inicio-soluciones-tarjeta--1/2/3
	   arriba): son compensaciones de tinta calculadas contra la fila de 4
	   del PSD de escritorio, no contra este layout apilado. El usuario
	   reportó el título y la fecha 6-13px a la izquierda de donde debían
	   -- sin estos márgenes negativos, título y fecha alinean con la foto
	   (que no lleva margen propio, solo el padding de .ec-inicio-blog). */
	.ec-inicio-blog-tarjeta:nth-child(1) .ec-inicio-blog-tarjeta-titulo,
	.ec-inicio-blog-tarjeta:nth-child(1) .ec-inicio-blog-tarjeta-fecha,
	.ec-inicio-blog-tarjeta:nth-child(2) .ec-inicio-blog-tarjeta-titulo,
	.ec-inicio-blog-tarjeta:nth-child(2) .ec-inicio-blog-tarjeta-fecha,
	.ec-inicio-blog-tarjeta:nth-child(3) .ec-inicio-blog-tarjeta-titulo,
	.ec-inicio-blog-tarjeta:nth-child(3) .ec-inicio-blog-tarjeta-fecha,
	.ec-inicio-blog-tarjeta:nth-child(4) .ec-inicio-blog-tarjeta-titulo,
	.ec-inicio-blog-tarjeta:nth-child(4) .ec-inicio-blog-tarjeta-fecha {
		margin-left: 0;
	}
}