/* ==========================================================================
   Blog -- listado (home.php), archivos incluida Eventos (archive.php),
   búsqueda (search.php) y entrada individual (single.php)
   ==========================================================================
   Coordenadas contra el lienzo de 1440px del PSD (spec-blog.md /
   psd-blog.json), mismo criterio que .ec-servicio-contenedor/.ec-contacto-
   contenedor en style.css/contacto.css: un contenedor con max-width:90rem
   centrado, padding-left/right tomados de las x del PSD.

   Encolado propio (inc/paginas/blog.php, prioridad 10001) -- is_home(),
   is_category()/is_tag()/is_date()/is_author(), is_search() e
   is_singular('post') no son is_page(), así que ec_encolar_pagina_actual()
   (functions.php) nunca los alcanza.

   Contra el CSS real de mymedi (preview/real/1-reset.css /
   preview/real/2-mymedi.css): los inputs de texto/búsqueda llegan con
   fondo #F0F2F5, radio 60px y padding 10px 25px (regla "html
   input[type^=...]", que pesa (0,1,2): dos tipos -- html + input -- más
   el atributo [type^=...]). No se pelea con !important (el encargo lo
   prohíbe, y esa regla no lo necesita salvo en 'filter', que no se toca):
   hace falta igualar o superar esa cuenta con el prefijo "html body",
   mismo criterio que ya usó Contacto (ver assets/css/paginas/contacto.css)
   -- un solo ".ec-blog-buscador-input" (0,1,0) no le gana por especificidad,
   así que el fondo/radio de mymedi seguían encima del <span> con borde que
   sí se ve (confirmado: el fix ingenuo con solo background-color/border-
   radius en la clase no alcanzaba). Las listas (<ul>) del padre traen
   list-style:disc inside + padding:8px 0 + line-height:20px ("ul li" en el
   mismo CSS real) -- se anulan explícitos en cada lista propia de aquí
   abajo, nunca heredados: "list-style" es una propiedad heredada, pero
   "ul li" del padre la fija DIRECTO en el <li>, así que un "list-style:none"
   puesto solo en el <ul> no basta -- tiene que repetirse en el propio "li"
   para ganar (ver .ec-blog-paginacion-lista li, más abajo).
   ========================================================================== */

:root {
	/* Gris de contorno -- el PSD marca varias formas (buscador, etiquetas,
	   círculos 2/3/→ de la paginación) con relleno naranja, pero en el PNG
	   son contornos grises sin relleno (opacidad de relleno al 0% en
	   Photoshop, con un trazo -- ver el reporte). Medido por muestreo de
	   píxel contra Blog.png (el trazo, ya suavizado por el propio PNG,
	   promedia #D2D2D2/#DBDBDB/#D0D0D0 en los tres componentes) porque el
	   dato de "relleno" del JSON no sirve aquí. */
	--ec-blog-borde: #D4D4D4;

	/* Placeholder/etiquetas del panel derecho -- gris medio, no el
	   --ec-texto-secundario (#6A6A6A) de los extractos: son grises
	   distintos en el PSD/PNG. */
	--ec-blog-gris-medio: #969696;
	--ec-blog-gris-oscuro: #7E7E7E; /* texto de las píldoras de etiqueta, ver su comentario abajo */
	--ec-blog-punto: #C3C3C3; /* separador "fecha · comentarios" -- valor del PSD (Adobe RGB→sRGB ya en spec-blog.md) */
	--ec-blog-placeholder: #A9A9A9; /* "Buscar ..." dentro del campo -- valor del PSD */
}

/* --------------------------------------------------------------------------
   Utilidad -- texto solo para lector de pantalla (visualmente oculto).
   Sin depender de .screen-reader-text del padre: esa clase solo tiene CSS
   base bajo selectores de WooCommerce muy concretos (ver el reporte), no
   una regla general -- más seguro definir la propia.
   -------------------------------------------------------------------------- */
.ec-blog-solo-lector {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Hero corto -- modificador de templates/partes/hero.php (compartido con
   Servicios/Industrias/Contacto/Página de texto, ver style.css). NO SE
   MODIFICA ese parcial (otro agente trabaja ahí): esta página se estiliza
   con su propio modificador, igual que hizo Contacto con el suyo.
   -------------------------------------------------------------------------- */

/* 265px -- el PSD mide el slider completo en x0..1440 × y0..265, igual que
   Contacto (también 265px). Misma estructura de contenido (título de una
   sola línea + flecha, flex-column + justify-content:flex-end, heredado de
   la regla compartida), así que el mismo padding-bottom (42px, ajustado
   ahí con ecVerificarPSD()) reproduce la misma geometría aquí -- el cálculo
   depende de la altura de línea del título y de la flecha, no del ANCHO
   del texto ("Blog" vs "¿Necesitas Ayuda?"). Verificado igual con
   ecVerificarPSD() en esta página antes de darlo por bueno.
   -------------------------------------------------------------------------- */
.ec-servicio-hero--blog {
	height: 16.5625rem; /* 265px */
}

/* Capa oscura -- a diferencia de Contacto (foto ya oscurecida de origen),
   banner-blog.webp es la foto limpia: hace falta la capa. Opacidad medida
   por muestreo de píxel comparando banner-blog.webp (recorte object-fit:
   cover simulado, centrado) contra Blog.png en varias zonas de cielo (las
   más fiables: las de textura de grava dieron una lectura más baja, ruido
   de recompresión/reescalado sobre una zona de alto detalle, no la capa
   real) -- el promedio de las zonas de cielo (~0.43-0.50) cae cerca del
   0.40 por omisión que ya usan Servicios/Contraste suficiente para no
   distinguirse del resto del sitio, así que se deja explícito en ese mismo
   valor en vez de inventar una cifra "de más precisión" que el propio
   muestreo no sostiene con margen. Ver el reporte. */
.ec-servicio-hero--blog .ec-servicio-hero-capa {
	--ec-hero-capa: 0.40;
}

/* object-position POR OMISIÓN de la regla compartida es 44% 72% (medido
   para Servicios) -- se regresa a 50% 50% (centrado) aquí: comparado
   banner-blog.webp recortado a 1440×265 con cover+centrado contra
   Blog.png, la composición (perforadora, montón de grava, muro de
   concreto, montañas) coincide de forma casi exacta -- ver el reporte. */
.ec-servicio-hero--blog .ec-servicio-hero-imagen {
	object-position: 50% 50%;
}

.ec-servicio-hero--blog .ec-servicio-hero-contenido {
	padding-bottom: 2.625rem; /* 42px -- ver el comentario de arriba */
}

/* El título "Blog" del PSD no queda exactamente centrado en el lienzo de
   1440 (caja x677..778, centro 727.5 -- 7.5px a la derecha del centro
   real, 720) -- ecVerificarPSD() lo confirmó (dx-10 antes de este ajuste,
   con el título centrado de verdad por .ec-servicio-hero-contenido). Se
   corrige aquí, no en el parcial compartido. */
.ec-servicio-hero--blog .ec-servicio-hero-titulo {
	/* 20px, no 10: el título está centrado con align-items:center (eje
	   cruzado de un flex en columna) -- ahí un margin-left asimétrico solo
	   desplaza la caja la MITAD de su valor (el centrado reparte el ancho
	   sobrante a partes iguales a los dos lados de la CAJA CON MARGEN, así
	   que la mitad del margen "entra" al hueco izquierdo y la otra mitad
	   se queda como margen real) -- confirmado con ecVerificarPSD(): con
	   10px el desplazamiento real fue de solo 5px. */
	margin-left: 1.25rem;
}

/* --------------------------------------------------------------------------
   Contenedor y rejilla de dos columnas -- entradas | barra lateral
   -------------------------------------------------------------------------- */

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

.ec-blog-columnas {
	display: grid;
	/* 380px de barra lateral (x966..1346 del PSD); 1fr de columna principal
	   resuelve a 798px con el padding/gap de abajo -- exactamente el ancho
	   de la imagen destacada (798px, Rectángulo 15 del PSD): las dos
	   medidas del diseño se confirman entre sí. */
	grid-template-columns: 1fr 23.75rem;
	column-gap: 6rem; /* 96px -- x870 (fin imagen) a x966 (inicio tarjeta lateral) */
	/* align-items:start (no el valor por omisión, stretch): la tarjeta
	   blanca de la barra lateral (Rectángulo 7, 649px) es más CORTA que
	   toda la columna de entradas (que sigue hasta la paginación, ~3200px
	   más abajo) -- con stretch, la tarjeta blanca se estiraría de más. */
	align-items: start;
	/* 166px = y431 (tope de la primera imagen Y de la tarjeta lateral,
	   ambas arrancan en la misma línea del PSD) − y265 (fin del hero).
	   94px der. / 72px izq. (x del PSD); 166px abajo, hasta el footer
	   (y3817 − y3647 de la paginación). */
	padding: 10.375rem 5.875rem 10.625rem 4.5rem;
}

.ec-blog-principal {
	min-width: 0; /* que el extracto pueda encogerse en vez de forzar scroll horizontal */
}

.ec-blog-sin-resultados {
	margin: 0;
	font-size: 1.146875rem; /* 18.35px, mismo cuerpo que Contacto */
	line-height: 1.6;
	color: var(--ec-texto-secundario);
}

.ec-blog-sin-resultados + .ec-blog-sin-resultados {
	margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   Columna izquierda -- lista de tarjetas de entrada
   -------------------------------------------------------------------------- */

.ec-blog-lista {
	display: flex;
	flex-direction: column;
	gap: 3.125rem; /* 50px -- ajustado con ecVerificarPSD() contra el cálculo teórico del PSD (57-63px): la línea de base del título de cada tarjeta se compara, no la caja del texto, así que el hueco real que reproduce esa línea de base es menor que la resta de cajas */
}

.ec-entrada-tarjeta {
	min-width: 0;
}

.ec-entrada-tarjeta-enlace {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ec-entrada-tarjeta-imagen {
	display: block;
	width: 100%;
	aspect-ratio: 798 / 452; /* proporción del recuadro del PSD -- fluida: a 1440px, con la columna principal a 798px de ancho, da el tamaño exacto */
	overflow: hidden;
	background-color: #EDEDED; /* Rectángulo 15 del PSD -- se ve mientras carga la imagen */
	margin-bottom: 1.25rem; /* 20px hasta el título, promedio del PSD (19-22px entre las 4 tarjetas) */
}

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

.ec-entrada-tarjeta-titulo {
	margin: 0;
	/* 4px -- el PSD arranca el título 4-5px a la derecha del borde de la
	   imagen (x76/77 contra x72), en las 4 tarjetas -- ajustado con
	   ecVerificarPSD(). */
	margin-left: 0.25rem;
	max-width: 50rem; /* 800px -- ancho libre, ligeramente mayor que la columna (798px) para no forzar un salto de línea de más por un redondeo */
	font-size: 2.88125rem; /* 46.1px */
	font-weight: var(--ec-peso-medium); /* Outfit Medium -- pedido del PSD */
	letter-spacing: -0.04em; /* -1.84px a 46.1px, PSD */
	line-height: 0.9501; /* 43.8 ÷ 46.1, PSD -- proporción, no px fijo, para que acompañe el tamaño responsive */
	color: var(--ec-texto);
}

.ec-entrada-tarjeta-enlace:hover .ec-entrada-tarjeta-titulo,
.ec-entrada-tarjeta-enlace:focus-visible .ec-entrada-tarjeta-titulo {
	color: var(--ec-naranja);
}

.ec-entrada-tarjeta-enlace:focus-visible {
	outline: 2px solid var(--ec-naranja);
	outline-offset: 4px;
}

/* Meta "fecha · comentarios" -- mismo bloque en la tarjeta del listado, en
   la entrada individual y (con sus propias medidas) en "Publicaciones
   recientes" de la barra lateral. */
.ec-entrada-tarjeta-meta {
	display: flex;
	align-items: center;
	gap: 0.5625rem; /* 9px -- hueco visual entre fecha/punto/comentarios, ajustado a ojo contra el PNG (no hay capa propia que lo mida) */
	/* 18px desde el título, 25px hasta el extracto -- ajustados con
	   ecVerificarPSD() contra el cálculo teórico del PSD (23px/31px): la
	   comparación es por línea de base, no por caja de texto. */
	margin: 1.125rem 0 1.5625rem;
	/* 9px -- el PSD arranca fecha/punto/comentarios 9px a la derecha del
	   título (x81 contra x76/77), en las 4 tarjetas -- ajustado con
	   ecVerificarPSD(). */
	margin-left: 0.5625rem;
	font-size: 1.071875rem; /* 17.15px */
	font-weight: var(--ec-peso-light);
	line-height: 1.4; /* una sola línea -- el PSD no exige un interlineado concreto aquí (no es multilínea) */
	color: var(--ec-blog-gris-medio);
}

.ec-entrada-tarjeta-separador {
	width: 0.4375rem; /* 7px, PSD */
	height: 0.4375rem;
	border-radius: 50%;
	background-color: var(--ec-blog-punto);
	flex-shrink: 0;
}

.ec-entrada-tarjeta-extracto {
	margin: 0 0 1.125rem; /* 18px hasta la flecha -- ajustado con ecVerificarPSD() contra el cálculo teórico del PSD (23px) */
	margin-left: 0.5625rem; /* 9px -- mismo motivo que .ec-entrada-tarjeta-meta, arriba */
	max-width: 50rem;
	font-size: 1.301875rem; /* 20.83px */
	font-weight: var(--ec-peso-regular);
	line-height: 1.4004; /* 29.17 ÷ 20.83, PSD -- proporción */
	color: var(--ec-texto-secundario); /* #6A6A6A */
	/* 2 líneas, como pide el encargo -- el PSD ya recorta el texto con "..."
	   a mano en sus 4 muestras, pero el recorte real de WordPress
	   (get_the_excerpt(), largo variable) necesita su propio límite visual. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ec-entrada-tarjeta-flecha {
	display: inline-flex;
	color: var(--ec-negro-footer); /* el PSD dibuja "Shape copia…" en el azul de la plantilla Fábrica (#091B72); la agencia pidió negro en todo el sitio, mismo criterio que templates/partes/tarjetas-productos.php (antes tarjetas-servicios.php) */
	transition: transform 0.2s ease;
}

.ec-entrada-tarjeta-flecha:hover,
.ec-entrada-tarjeta-flecha:focus-visible {
	transform: translateX(0.25rem);
}

.ec-entrada-tarjeta-flecha:focus-visible {
	outline: 2px solid var(--ec-naranja);
	outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Paginación -- paginate_links() envuelto en círculos (ver
   ec_blog_paginacion() en inc/paginas/blog.php)
   -------------------------------------------------------------------------- */

.ec-blog-paginacion {
	margin-top: 5.1875rem; /* 83px desde la última flecha de tarjeta hasta el primer círculo, PSD */
}

.ec-blog-paginacion-lista {
	display: flex;
	align-items: center;
	gap: 1.125rem; /* 18px, PSD (18-19px entre los 4 círculos) */
	margin: 0;
	padding: 0;
	list-style: none; /* contra "ul li{list-style:disc inside}" del CSS real de mymedi */
}

.ec-blog-paginacion-lista li {
	/* list-style es heredada, pero "ul li" del padre la fija DIRECTO en el
	   <li> -- el list-style:none de arriba, puesto solo en el <ul>, nunca
	   llega a competir con esa regla (un valor heredado siempre pierde
	   contra cualquier declaración explícita sobre el propio elemento, sin
	   importar la especificidad): hacía falta repetirlo aquí, en el <li>
	   mismo, para que las viñetas dejen de verse encima de los círculos. */
	list-style: none;
	margin: 0;
	padding: 0; /* contra "ul li{padding:8px 0}" del CSS real de mymedi */
	line-height: normal; /* contra "ul li{line-height:20px}" del CSS real de mymedi */
}

.ec-blog-paginacion-circulo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem; /* 72px, PSD */
	height: 4.5rem;
	border-radius: 50%;
	border: 0.0625rem solid var(--ec-blog-borde); /* contorno gris -- el PNG no rellena estos círculos, ver el token al inicio del archivo */
	background-color: var(--ec-blanco);
	font-size: 1.823125rem; /* 29.17px, PSD */
	font-weight: var(--ec-peso-semibold);
	line-height: 1;
	color: var(--ec-texto); /* #1C1C1C */
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

a.ec-blog-paginacion-circulo:hover,
a.ec-blog-paginacion-circulo:focus-visible {
	border-color: var(--ec-naranja);
	color: var(--ec-naranja);
}

a.ec-blog-paginacion-circulo:focus-visible {
	outline: 2px solid var(--ec-naranja);
	outline-offset: 3px;
}

/* Círculo actual -- relleno sólido, sin borde, número blanco (Elipse 6 del
   PSD, la única de las cinco formas de esta sección con relleno real -- el
   resto son contornos, ver el token --ec-blog-borde). */
.ec-blog-paginacion-circulo--actual {
	border-color: var(--ec-naranja);
	background-color: var(--ec-naranja);
	color: var(--ec-blanco);
}

a.ec-blog-paginacion-circulo--actual:hover,
a.ec-blog-paginacion-circulo--actual:focus-visible {
	color: var(--ec-blanco);
}

.ec-blog-paginacion-circulo--flecha {
	color: var(--ec-negro-footer); /* mismo criterio que la flecha de la tarjeta: azul del PSD → negro pedido por la agencia */
}

.ec-blog-paginacion-circulo--puntos {
	border-color: transparent;
	font-size: 1.25rem;
	font-weight: var(--ec-peso-regular);
}

/* --------------------------------------------------------------------------
   Barra lateral derecha -- tarjeta blanca con sombra (Rectángulo 7 del PSD)
   -------------------------------------------------------------------------- */

.ec-blog-lateral {
	width: 100%;
	max-width: 23.75rem; /* 380px */
	/* 31px arriba -- ajustado con ecVerificarPSD() contra el cálculo
	   teórico del PSD (37px: línea de base contra caja de texto, mismo
	   motivo que el resto de los ajustes de este archivo). 34px lados, 56px
	   abajo, PSD. */
	padding: 1.9375rem 2.125rem 3.5rem;
	background-color: var(--ec-blanco);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* misma sombra que .ec-servicio-tarjeta en style.css -- mismo lenguaje visual de "tarjeta blanca elevada" en todo el sitio */
}

.ec-blog-lateral-seccion + .ec-blog-lateral-seccion {
	margin-top: 1.8125rem; /* 29px -- ajustado con ecVerificarPSD() contra el cálculo teórico del PSD (37-38px): línea de base contra caja de texto, mismo motivo que el resto de los ajustes de este archivo */
}

/* Segundo hueco (Publicaciones recientes → Etiquetas) needs a poco más que
   el primero -- las miniaturas de 111px de alto no dejan el mismo margen
   de leading que una sola línea de título; ajustado aparte con
   ecVerificarPSD(). */
.ec-blog-lateral-recientes + .ec-blog-lateral-seccion {
	margin-top: 2.1875rem; /* 35px */
}

.ec-blog-lateral-titulo {
	margin: 0;
	font-size: 1.465625rem; /* 23.45px */
	font-weight: var(--ec-peso-semibold);
	line-height: 1.2; /* una sola línea -- el interlineado del PSD (23.45px) coincide con el tamaño, no aporta nada más que verificar */
	color: var(--ec-texto);
}

/* El hueco hasta lo que sigue NO es el mismo en las tres secciones del PSD
   (buscador 17px, publicaciones recientes 30px, etiquetas 18px) -- un solo
   margin-bottom "promedio" en .ec-blog-lateral-titulo dejaba mal solo la
   sección de en medio (la única con un hueco muy distinto a las otras
   dos). Cada sección fija el suyo. */
.ec-blog-lateral-buscar .ec-blog-lateral-titulo {
	margin-bottom: 1.0625rem; /* 17px */
}

.ec-blog-lateral-recientes .ec-blog-lateral-titulo {
	margin-bottom: 1.375rem; /* 22px -- ajustado con ecVerificarPSD() contra el cálculo teórico del PSD (30px) */
}

.ec-blog-lateral-etiquetas .ec-blog-lateral-titulo {
	margin-bottom: 1.125rem; /* 18px */
}

/* --------------------------------------------------------------------------
   Buscador -- SOLO entradas (post_type=post oculto en el <form>, ver
   templates/partes/blog-lateral.php)
   -------------------------------------------------------------------------- */

.ec-blog-buscador {
	position: relative;
}

.ec-blog-buscador-campo {
	display: flex;
	align-items: center;
	gap: 0.625rem; /* 10px, ajustado a ojo contra el PNG entre la lupa y el texto */
	height: 4.1875rem; /* 67px, PSD (Rectángulo 16) */
	padding: 0 1.25rem; /* 20px -- la lupa del PSD arranca 23-24px del borde; se resta el ancho del icono (24px) más su gap para llegar a un valor limpio */
	border: 0.0625rem solid var(--ec-blog-borde); /* contorno gris -- el PNG no lo rellena, ver el token al inicio del archivo */
	background-color: var(--ec-blanco);
}

.ec-blog-buscador-icono {
	flex-shrink: 0;
	color: var(--ec-blog-placeholder);
}

.ec-blog-buscador-campo-control,
.ec-blog-buscador-campo {
	min-width: 0;
}

.ec-blog-buscador-campo {
	position: relative;
}

/* El <input> real queda invisible como caja (sin fondo/borde/radio propios)
   -- lo que se VE es el <span> de arriba, con su borde. "html body" al
   frente -- no es adorno, es lo que hace falta para pesar (0,1,3) y ganarle
   a la regla del padre (0,1,2) sin usar !important; ver la cabecera del
   archivo. Sin ese prefijo (solo ".ec-blog-buscador-input", (0,1,0)) el
   radio de 60px y el fondo #F0F2F5 que fuerza mymedi seguían encima. */
html body .ec-blog-buscador-campo input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	font: 400 1.03125rem var(--ec-fuente-base); /* 16.5px -- tamaño libre, el PSD mide el marcador (23.45px) pero un campo de búsqueda no necesita ir tan grande; se deja un tamaño legible cómodo */
	color: var(--ec-texto);
	outline: 0;
}

.ec-blog-buscador-marcador {
	position: absolute;
	left: 4.5rem; /* 72px, PSD (x1071, contra x999 del borde izquierdo de la caja) -- ajustado con ecVerificarPSD(), el cálculo teórico (padding + icono) se quedaba 26px corto */
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.465625rem; /* 23.45px, PSD */
	font-weight: var(--ec-peso-regular);
	color: var(--ec-blog-placeholder); /* #A9A9A9, PSD */
	pointer-events: none;
	white-space: nowrap;
}

/* Mismo truco que Contacto (placeholder=" " activa :placeholder-shown de
   forma fiable entre navegadores): el marcador se oculta en cuanto el
   campo tiene contenido o foco. */
.ec-blog-buscador-input:focus + .ec-blog-buscador-marcador,
.ec-blog-buscador-input:not(:placeholder-shown) + .ec-blog-buscador-marcador {
	display: none;
}

.ec-blog-buscador-campo:focus-within {
	border-color: var(--ec-naranja);
}

/* --------------------------------------------------------------------------
   Publicaciones recientes
   -------------------------------------------------------------------------- */

.ec-blog-recientes-lista {
	display: flex;
	flex-direction: column;
	gap: 1.875rem; /* 30px, PSD */
	margin: 0;
	padding: 0;
	list-style: none; /* contra "ul li" del CSS real de mymedi */
}

.ec-blog-recientes-lista li {
	display: flex; /* mismo motivo que .ec-blog-etiquetas-lista li: sin esto, el espacio en blanco de la plantilla antes de <a> abre su propia "línea" con el line-height:26px que mymedi pone en <body> (ver la cabecera del archivo) y empuja la tarjeta ~20px hacia abajo -- encontrado y corregido con ecVerificarPSD(). */
	margin: 0;
	padding: 0;
	line-height: normal;
}

.ec-blog-recientes-enlace {
	display: flex;
	align-items: flex-start;
	gap: 0.9375rem; /* 15px, PSD */
	text-decoration: none;
	color: inherit;
}

.ec-blog-recientes-imagen {
	display: block;
	flex-shrink: 0;
	width: 6.875rem; /* 110px, PSD */
	height: 6.9375rem; /* 111px, PSD */
	overflow: hidden;
	background-color: #EDEDED;
}

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

.ec-blog-recientes-texto {
	display: block;
	min-width: 0;
	/* 29px -- el PSD NO alinea la fecha con el borde superior de la
	   miniatura (baja bastante más, x686 contra x656/657): ajustado con
	   ecVerificarPSD(), el valor anterior (3px, a ojo) se quedaba muy
	   corto. */
	padding-top: 1.8125rem;
}

.ec-blog-recientes-fecha {
	display: block;
	margin-bottom: 0.8125rem; /* 13px hasta el título, PSD */
	font-size: 0.795625rem; /* 12.73px */
	font-weight: var(--ec-peso-light);
	color: var(--ec-blog-gris-medio);
}

.ec-blog-recientes-titulo {
	display: -webkit-box;
	-webkit-line-clamp: 2; /* 2 líneas, como en el PSD -- protección visual si un título real es más largo que los de prueba */
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 1.041875rem; /* 16.67px */
	font-weight: var(--ec-peso-medium);
	letter-spacing: -0.04em; /* -0.67px a 16.67px, PSD */
	line-height: 1.25; /* 20.83 ÷ 16.67, PSD */
	color: var(--ec-texto);
}

.ec-blog-recientes-enlace:hover .ec-blog-recientes-titulo,
.ec-blog-recientes-enlace:focus-visible .ec-blog-recientes-titulo {
	color: var(--ec-naranja);
}

.ec-blog-recientes-enlace:focus-visible {
	outline: 2px solid var(--ec-naranja);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Etiquetas -- píldoras con contorno (sin relleno, ver el token
   --ec-blog-borde al inicio del archivo). Reutilizada tal cual en
   single.php para las etiquetas de la propia entrada.
   -------------------------------------------------------------------------- */

.ec-blog-etiquetas-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9375rem; /* 15px -- ajustado con ecVerificarPSD() contra el cálculo teórico del PSD (9-12px) */
	margin: 0 0 0 -0.625rem; /* -10px -- las píldoras del PSD arrancan 10px a la izquierda de donde arranca el resto del panel (x990 contra x999/1000 de "Buscar"/"Publicaciones recientes") -- ajustado con ecVerificarPSD() */
	padding: 0;
	list-style: none; /* contra "ul li" del CSS real de mymedi */
}

.ec-blog-etiquetas-lista li {
	display: flex; /* NO list-item/block: como flex item, su <a> es su único contenido "real" -- un <li> de bloque con display:list-item deja hueco de sobra a la izquierda (~22px, el texto en flujo normal alrededor del enlace en línea), causaba que "Geotecnia" (la 3a etiqueta) no cupiera en la fila y saltara de línea -- encontrado y corregido con ecVerificarPSD(). */
	margin: 0;
	padding: 0;
	line-height: normal;
}

.ec-blog-etiqueta {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 0.75rem; /* 12px/12px -- ajustado con ecVerificarPSD() (ver el comentario de la lista, arriba: el horizontal del PSD, 16px, no cabía) */
	border: 0.0625rem solid var(--ec-blog-borde);
	border-radius: 0.375rem; /* 6px -- esquinas ligeramente redondeadas, PNG */
	font-size: 0.98625rem; /* 15.78px, PSD */
	font-weight: var(--ec-peso-regular); /* el PSD trae dos tramos idénticos (600/#1C1C1C y 400/#7E7E7E) sobre el mismo texto -- el PNG se ve gris medio y regular, no negro ni semibold: se usa lo que el PNG realmente muestra, ver el reporte */
	line-height: 1;
	color: var(--ec-blog-gris-oscuro); /* #7E7E7E */
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.ec-blog-etiqueta:hover,
.ec-blog-etiqueta:focus-visible {
	border-color: var(--ec-naranja);
	color: var(--ec-naranja);
}

.ec-blog-etiqueta:focus-visible {
	outline: 2px solid var(--ec-naranja);
	outline-offset: 2px;
}

/* ==========================================================================
   Entrada individual (single.php) -- sin diseño propio, reutiliza la
   tipografía del listado (ver el encargo).
   ========================================================================== */

.ec-entrada-individual {
	min-width: 0;
}

.ec-entrada-individual-imagen {
	margin-bottom: 1.5rem;
}

.ec-entrada-individual-titulo {
	/* Sin max-width fijo (a diferencia de .ec-entrada-tarjeta-titulo): aquí
	   es el título completo de la entrada, no una tarjeta angosta -- que
	   ocupe todo el ancho de la columna. */
	max-width: none;
}

.ec-entrada-individual-contenido {
	margin-top: 0.5rem;
	font-size: 1.146875rem; /* 18.35px, mismo cuerpo que Contacto/Servicios */
	line-height: 1.7;
	color: var(--ec-texto);
}

.ec-entrada-individual-contenido p {
	margin: 0 0 1.25rem;
}

.ec-entrada-individual-contenido a {
	color: var(--ec-naranja);
}

.ec-entrada-individual-contenido ul,
.ec-entrada-individual-contenido ol {
	margin: 0 0 1.25rem;
	padding-left: 1.5rem; /* contra "ul li{padding:8px 0}" del CSS real de mymedi -- sangría propia, sin la del padre */
}

.ec-entrada-individual-contenido ul li,
.ec-entrada-individual-contenido ol li {
	padding: 0; /* contra "ul li{padding:8px 0;line-height:20px}" del CSS real de mymedi */
	margin-bottom: 0.5rem;
	line-height: 1.6;
}

.ec-entrada-individual-contenido ul li {
	list-style: disc outside;
}

.ec-entrada-individual-contenido ol li {
	list-style: decimal outside;
}

.ec-entrada-individual-contenido img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.5rem 0;
}

.ec-entrada-individual-etiquetas {
	margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   Comentarios -- los de WordPress/mymedi tal cual (comments_template()),
   sin rediseñarlos (pedido explícito del encargo). Solo tipografía/espaciado
   mínimos para que no desentonen dentro de esta columna -- nada de su
   marcado ni de sus clases se toca.
   -------------------------------------------------------------------------- */

.ec-entrada-individual-comentarios {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 0.0625rem solid var(--ec-blog-borde);
	font-family: var(--ec-fuente-base);
	color: var(--ec-texto);
}

.ec-entrada-individual-comentarios .comments-title {
	margin: 0 0 1.5rem;
	font-size: 1.465625rem;
	font-weight: var(--ec-peso-semibold);
	color: var(--ec-texto);
}

.ec-entrada-individual-comentarios .commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ec-entrada-individual-comentarios .commentlist li {
	padding: 0;
	line-height: 1.6;
}

.ec-entrada-individual-comentarios .comment-form input[type="text"],
.ec-entrada-individual-comentarios .comment-form input[type="email"],
.ec-entrada-individual-comentarios .comment-form input[type="url"],
.ec-entrada-individual-comentarios .comment-form textarea {
	max-width: 100%;
	background-color: var(--ec-fondo-claro);
	border: 0.0625rem solid var(--ec-blog-borde);
	font-family: var(--ec-fuente-base);
}

/* ==========================================================================
   Responsive -- mismos dos puntos de quiebre que el resto del tema
   (tablet ≤1024, móvil ≤767; ver style.css/contacto.css). La barra
   lateral pasa abajo de la lista (orden natural del DOM: ya va después en
   el marcado), pedido explícito del encargo.
   ========================================================================== */

@media (max-width: 1024px) {
	.ec-servicio-hero--blog {
		height: 14rem;
	}

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

	.ec-blog-columnas {
		grid-template-columns: 1fr;
		padding: 3rem 2rem;
	}

	.ec-blog-lateral {
		max-width: 28rem; /* ya no comparte fila con la columna principal -- puede crecer más que los 380px del PSD (pensados para convivir con las tarjetas) sin verse angosta */
		margin: 3.75rem auto 0;
	}

	.ec-entrada-tarjeta-titulo {
		font-size: 2.25rem;
	}
}

@media (max-width: 767px) {
	.ec-servicio-hero--blog {
		height: 12.5rem;
	}

	.ec-servicio-hero--blog .ec-servicio-hero-contenido {
		padding-bottom: 1.5rem;
	}

	.ec-blog-columnas {
		padding: 2.5rem 1.25rem;
	}

	.ec-blog-lista {
		gap: 2.5rem;
	}

	.ec-entrada-tarjeta-titulo {
		font-size: 1.75rem;
	}

	.ec-entrada-tarjeta-extracto {
		font-size: 1.125rem;
	}

	.ec-blog-lateral {
		max-width: none;
		margin-top: 3rem;
		padding: 1.75rem 1.5rem 2.5rem;
	}

	.ec-blog-paginacion-circulo {
		width: 3.5rem; /* 56px -- 4 círculos de 72px + huecos no caben en 375px de ancho */
		height: 3.5rem;
		font-size: 1.375rem;
	}

	.ec-blog-paginacion-lista {
		gap: 0.75rem;
	}
}