/* ==========================================================================
   Catálogo -- tienda, categoría/sistema, ficha de producto y búsqueda de
   productos (is_shop() / is_product_category() / is_product_tag() /
   is_product() / búsqueda con post_type=product).
   ==========================================================================
   Coordenadas contra el lienzo de 1440px del PSD (preview/real/spec-catalogo.md
   / psd-catalogo-*.json, partidos de psd-catalogo.json con herramientas/
   psd_partir_catalogo.py), mismo criterio que .ec-servicio-contenedor/
   .ec-blog-contenedor: un contenedor con max-width:90rem centrado.

   Encolado propio (inc/paginas/catalogo-vistas.php, prioridad 10001).

   Contra el CSS real de mymedi (preview/real/2-mymedi.css /
   4-mymedi-dinamico.css) -- dos trampas ya conocidas de otras páginas de
   este tema (Blog, Contacto), y las mismas aquí:
   1) "html input[type^=…]" pinta cualquier <input> con fondo #F0F2F5 y
      radio de 60px -- se le gana con más especificidad, o (como aquí) se
      deja el <input> real sin fondo/borde propio y se pinta la caja
      visible en el <span> que lo envuelve (mismo truco que blog.css).
   2) "ul li{list-style:disc inside;padding:8px 0;line-height:20px}" -- toda
      lista de este archivo resetea list-style/padding/line-height de forma
      explícita, nunca hereda esos tres valores.
   Sin !important en ningún punto (lo prohíbe el encargo); no hace falta:
   los selectores de abajo ya superan la especificidad de esas dos reglas
   (clases propias combinadas, "html input[type=…]" no gana a una regla con
   más clases encadenadas del lado derecho).

   Formas "con relleno" en el JSON que en el PNG son solo contorno (buscador,
   círculos de paginación) -- igual que ya documentó blog.css: el color de
   abajo sale de muestrear el PNG (Catálogo*.png), no del campo "relleno".
   ========================================================================== */

:root {
	/* Contorno gris de cajas sin relleno real (buscador, píldora de
	   categoría vacía) -- muestreado del PNG (CatálogoCatálogo-Prodcutos.png,
	   borde del buscador): el PSD marca esa forma con relleno #FF664A, pero
	   ahí no hay ningún salmón visible, solo un contorno claro. */
	--ec-catalogo-borde: #D9D9D9;

	/* Placeholder "Buscar ..." -- mismo valor que --ec-blog-placeholder
	   (blog.css): el PSD lo confirma igual en las dos páginas (#A9A9A9). */
	--ec-catalogo-placeholder: #A9A9A9;

	/* Etiqueta gris de "Mostrando X de Y resultados" / "Ordenar por". */
	--ec-catalogo-gris-meta: #969696;

	/* Valor de la meta de la ficha (categoría/ID), más claro que el texto
	   normal -- PSD: tramos a #919191 contra la etiqueta en --ec-texto. */
	--ec-catalogo-gris-valor: #919191;
}

/* ==========================================================================
   1. Hero corto (265px) -- reutiliza templates/partes/hero.php con el
      modificador "catalogo"; el parcial no se toca, todo el estilo va aquí.
   ========================================================================== */

.ec-servicio-hero--catalogo {
	height: 16.5625rem; /* 265px, PSD */
}

/* object-position por omisión de .ec-servicio-hero-imagen (style.css) es 44%/72%, calibrado para
   la foto de Servicios -- con la foto del catálogo (assets/img/nosotros/video.webp, recortada a
   imagenes/compartido/hero-catalogo.webp en la herramienta) esa posición se va sobre la nube de
   polvo, no sobre la perforadora. El recorte ya viene casi en la misma proporción que esta caja
   (5.44:1 contra 5.43:1 del PSD) -- a 1440 casi no hay nada que recortar-- pero a los anchos
   angostos donde la caja se vuelve más "cuadrada" (375px) el recorte SÍ tiene que decidir qué
   lado de la foto se pierde; 62% horizontal mantiene la perforadora y el operario a la vista. */
.ec-servicio-hero--catalogo .ec-servicio-hero-imagen {
	object-position: 62% 50%;
}

/* Tienda: "Catálogo de Productos", 58.33px. Categoría/etiqueta/búsqueda:
   título más corto (nombre de la categoría o "Resultados para: …"),
   51.19px en el PSD -- se distingue por las clases nativas de body_class()
   que WordPress/WooCommerce ya ponen (tax-product_cat, tax-product_tag,
   search-results), sin necesitar una clase propia nueva. */
.ec-servicio-hero--catalogo .ec-servicio-hero-titulo {
	font-size: 3.645625rem; /* 58.33px */
	font-weight: var(--ec-peso-medium);
	letter-spacing: -0.04em; /* -2.33px a 58.33px, PSD */
}

body.tax-product_cat .ec-servicio-hero--catalogo .ec-servicio-hero-titulo,
body.tax-product_tag .ec-servicio-hero--catalogo .ec-servicio-hero-titulo,
body.search-results .ec-servicio-hero--catalogo .ec-servicio-hero-titulo {
	font-size: 3.199375rem; /* 51.19px */
	letter-spacing: -0.04em; /* -2.05px a 51.19px, PSD -- misma proporción */
}

/* .ec-servicio-hero-contenido (parcial compartido) ancla el título abajo con
   padding-bottom:7.25rem, calibrado para el hero de 417px de Servicios/
   Industrias -- con el hero de 265px de esta ronda el título quedaba 56px
   más abajo de lo que pide el PSD (medido con ecVerificarPSD). Se
   compensa aquí, sin tocar el valor compartido. */
.ec-servicio-hero--catalogo .ec-servicio-hero-contenido {
	padding-bottom: 3.75rem; /* 60px = 116px de fábrica - 56px medidos con ecVerificarPSD (dy negativo: el título quedaba ARRIBA de más, no abajo -- menos padding-bottom lo baja) */
}

@media (max-width: 767px) {
	.ec-servicio-hero--catalogo {
		/* 240px, no 200px: el título de esta ronda envuelve a 2 líneas a
		   este ancho ("Catálogo de Productos") y con el padding-bottom de
		   escritorio (heredado si no se corrige aquí) el título quedaba
		   encima del logo del header -- verificado en vivo a 375px. Más
		   alto + más padding-bottom (abajo) le da aire real, mismo
		   problema que ya resolvió style.css para Servicios/Industrias con
		   su propio :root de escritorio/móvil. */
		height: 15rem;
	}

	.ec-servicio-hero--catalogo .ec-servicio-hero-contenido {
		padding-bottom: 3.3125rem; /* 53px -- ver el comentario de arriba (altura de 240px) */
	}

	.ec-servicio-hero--catalogo .ec-servicio-hero-titulo {
		font-size: 2.25rem;
	}

	body.tax-product_cat .ec-servicio-hero--catalogo .ec-servicio-hero-titulo,
	body.tax-product_tag .ec-servicio-hero--catalogo .ec-servicio-hero-titulo,
	body.search-results .ec-servicio-hero--catalogo .ec-servicio-hero-titulo {
		font-size: 2rem;
	}
}

/* ==========================================================================
   2. Tienda/categoría/etiqueta/búsqueda -- envoltorio de dos columnas
   ========================================================================== */

/* mymedi/woocommerce/archive-product.php envuelve todo esto en
   #primary/#main-content/.page-container -- con padding e inset propios
   (85px + 15px de cada lado, medido en vivo con las herramientas del
   navegador: #primary queda en x100 de 1240px de ancho sobre una ventana
   de 1440) que no existen en el PSD (pensado de punta a punta, 1440px
   limpios) -- ts_prod_cat_layout en '0-1-0' solo quita los <aside>, no ese
   padding. Mismo truco 100vw / margin-left:calc(50% - 50vw) que
   .ec-servicio-hero/.ec-servicio-banda en style.css: ".ec-catalogo-columnas"
   saca todo del hueco de mymedi y ".ec-catalogo-columnas-interior" vuelve a
   centrar en 1440 con el padding/rejilla que sí pide el diseño. */
.ec-catalogo-columnas {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background-color: var(--ec-fondo-claro); /* #FAFAFA -- fondo propio del catálogo, ver style.css */
}

/* mymedi pinta un ::before propio en #main-content.ts-col-24 -- "ts_shop_
   separate_background" del panel Redux, #F7F8FA (mymedi/css/font-color.css,
   confirmado en el código del padre), position:absolute y alto completo de
   la columna (top:-1px, bottom:0). Ese ::before es POSICIONADO y
   ".ec-catalogo-intro" (más abajo) es estático -- en el orden de pintado,
   un descendiente posicionado (aunque z-index sea "auto") SIEMPRE va
   encima de uno estático del mismo contenedor, sin importar el orden en el
   HTML: por eso los productos, la barra de antes del listado y la
   paginación sí se ven (mymedi ya les pone position:relative a esos tres,
   ver #main-content.ts-col-24 .ts-product.best_selling/.ts-active-filters/
   .before-loop-wrapper en el padre) pero la introducción de categoría, que
   no es ninguno de esos tres, se queda tapada.
   Se elige apagar el ::before en vez de subir ".ec-catalogo-intro" con
   position:relative + z-index: ".ec-catalogo-columnas" (arriba) ya cubre
   TODA esta columna con su propio fondo, y #FAFAFA es el color real del
   diseño (muestreado con PIL sobre Catálogo/Máquina Perforadora Neumática/
   Máquina-Perforadora-Neumática.png en varios puntos fuera de tarjetas:
   RGB 250,250,250 exacto) -- el ::before de mymedi no aporta nada, solo
   repite casi el mismo gris (#F7F8FA, imperceptible contra #FAFAFA) por
   encima. Apagarlo resuelve el tapado de raíz para CUALQUIER contenido
   estático futuro de esta columna, no sólo la introducción de hoy, sin
   inventar una pila de z-index que mantener. ":has()" -- soportado en todo
   navegador vigente -- acota el apagado a cuando ".ec-catalogo-columnas"
   (la de este archivo, nunca la de otra plantilla) esté realmente dentro:
   ni el resto del sitio (que no toca #main-content.ts-col-24) ni un futuro
   uso de mymedi de esa misma clase pierden su fondo.
   Especificidad -- la regla del padre (".woocommerce.archive #main-content.
   ts-col-24:before") pesa (0,1,3,1): 1 id + 3 clases (woocommerce, archive,
   ts-col-24) + 1 pseudo-elemento. ":has(.ec-catalogo-columnas)" NO suma una
   clase propia más la de su argumento -- por spec, aporta SOLO la
   especificidad del argumento más específico (aquí, 1 clase); repetir
   ".ts-col-24" no es adorno, es lo que hace falta para empatar en 3 clases
   (confirmado en vivo con getComputedStyle: sin el repetido, el ::before de
   mymedi seguía ganando y "content" no bajaba a "none") -- empatados ahí, se
   pasa a comparar pseudo-elementos/tipos, donde "body" + "::before" (2) le
   gana a solo ":before" (1) del padre. Así gana sin depender del orden de
   carga ni de !important. */
body #main-content.ts-col-24.ts-col-24:has(.ec-catalogo-columnas)::before {
	content: none;
}

.ec-catalogo-columnas-interior {
	max-width: 90rem; /* 1440px */
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 25.5rem; /* 408px de barra lateral, PSD (Rectángulo 7) */
	column-gap: 5.875rem; /* 94px, PSD (x873 fin de tarjetas -- x967 inicio de barra) */
	align-items: start;
	padding: 5.1875rem 4.75rem 6rem; /* 83px arriba (107px teóricos, ajustados con ecVerificarPSD a 83px) / 76px lados / 96px abajo -- PSD */
}

.ec-catalogo-principal {
	min-width: 0; /* que la rejilla pueda encogerse en vez de forzar scroll horizontal */
}

@media (max-width: 1024px) {
	.ec-catalogo-columnas-interior {
		grid-template-columns: 1fr;
		padding: 2.5rem 2rem 4rem;
	}

	.ec-catalogo-lateral {
		max-width: 28rem;
		margin: 3rem auto 0;
	}
}

@media (max-width: 767px) {
	.ec-catalogo-columnas-interior {
		padding: 2rem 1.25rem 3rem;
	}

	.ec-catalogo-lateral {
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   "Mostrando X de Y resultados" + "Ordenar por"
   -------------------------------------------------------------------------- */

.ec-catalogo-resultados-fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.75rem; /* ~28px, PSD (y397 fin del texto -- y465 techo de la primera tarjeta) */
}

.ec-catalogo-resultados-fila .woocommerce-result-count {
	display: block; /* contra ".woocommerce-result-count{display:none}" del CSS real de mymedi -- ese tema esconde el texto nativo a favor de su propio ".ts-shop-result-count" ("You're viewed…"), que este encargo no usa (ver el reporte: ts_prod_cat_loading_type pasó de "load-more-button" a "default") */
	margin: 0;
	font-size: 1.301875rem; /* 20.83px, PSD */
	font-weight: var(--ec-peso-regular);
	color: var(--ec-catalogo-gris-meta);
}

/* Select real de WooCommerce, oculto por mymedi (loop/orderby.php lo deja
   con style="display:none") -- lo que se ve es el <ul class="orderby"> de
   abajo, sin la píldora que mymedi forzaría sobre un <select> visible. */
.ec-catalogo-resultados-fila .woocommerce-ordering {
	margin: 0;
}

.ec-catalogo-resultados-fila .orderby-label {
	font-size: 1.301875rem; /* 20.83px, PSD */
	font-weight: var(--ec-peso-regular);
	color: var(--ec-catalogo-gris-meta);
	margin-right: 0.625rem;
}

.ec-catalogo-resultados-fila ul.orderby {
	display: inline-flex;
	align-items: center;
	list-style: none; /* contra "ul li{list-style:disc inside}" del CSS real de mymedi */
	margin: 0;
	padding: 0;
	position: relative;
}

.ec-catalogo-resultados-fila ul.orderby > li {
	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-catalogo-resultados-fila .orderby-current {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	font-size: 1.301875rem; /* 20.83px */
	font-weight: var(--ec-peso-regular);
	color: var(--ec-catalogo-gris-meta);
}

/* Flecha propia -- el PSD dibuja un chevron simple, no el icono que traiga
   mymedi por omisión en este componente. */
.ec-catalogo-resultados-fila .orderby-current::after {
	content: '';
	width: 0.6875rem; /* 11px, PSD */
	height: 0.4375rem; /* 7px, PSD */
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ec-catalogo-resultados-fila ul.dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 10;
	min-width: 12rem;
	margin-top: 0.625rem;
	padding: 0.5rem 0;
	list-style: none;
	background-color: var(--ec-blanco);
	border: 0.0625rem solid var(--ec-catalogo-borde);
	box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08);
}

.ec-catalogo-resultados-fila ul.orderby.active ul.dropdown,
.ec-catalogo-resultados-fila ul.orderby:focus-within ul.dropdown {
	display: block;
}

.ec-catalogo-resultados-fila ul.dropdown li {
	margin: 0;
	padding: 0;
}

.ec-catalogo-resultados-fila ul.dropdown a {
	display: block;
	padding: 0.5rem 1.25rem;
	font-size: 1rem;
	color: var(--ec-texto);
	text-decoration: none;
	white-space: nowrap;
}

.ec-catalogo-resultados-fila ul.dropdown a:hover,
.ec-catalogo-resultados-fila ul.dropdown a.current {
	color: var(--ec-naranja);
}

/* ==========================================================================
   3. Introducción de categoría/etiqueta -- título + descripción + aplicaciones
   ========================================================================== */

.ec-catalogo-intro {
	margin-bottom: 2.5rem; /* ~40px hasta "Mostrando X resultados", PSD */
}

/* .ec-catalogo-intro es el padre inmediato -- la clase de más hace falta:
   "body.woocommerce" (WooCommerce ya la pone en TODO el body del catálogo)
   + "h1" en nuestro propio style.css (regla genérica ".woocommerce h1{font-
   weight:var(--ec-peso-semibold)}") empata en cantidad de clases con un
   solo ".ec-catalogo-intro-titulo" y gana por tener además un selector de
   tipo -- verificado en vivo comparando getComputedStyle contra las
   reglas que de verdad hacían match (el peso salía 600, no 500). Con dos
   clases encadenadas aquí, esta regla gana sin !important. */
.ec-catalogo-intro .ec-catalogo-intro-titulo {
	margin: 0 0 1.125rem; /* 18px, PSD (y407 fin título -- y427 inicio párrafo, tienda; DTH: y409→ closer) */
	font-size: 2.383125rem; /* 38.13px, PSD */
	font-weight: var(--ec-peso-medium);
	letter-spacing: -0.02em; /* -0.76px a 38.13px, PSD */
	line-height: 1.2;
	color: var(--ec-texto);
}

/* --------------------------------------------------------------------------
   Descripción enriquecida -- estilos del contenido que deja wp_editor() en
   term_description() (Parte 1: catalogo-categorias.php). Nunca se hereda de
   mymedi (body{line-height:26px}, h1..h6 propios, etc.) -- todo explícito.
   -------------------------------------------------------------------------- */

.ec-catalogo-descripcion {
	max-width: 51rem; /* 816px -- ancho de columna del PSD (x1613..2420 ≈ 807px de caja de texto) */
	font-size: 1.041875rem; /* 16.67px, PSD */
	line-height: 1.2; /* interlineado automático de Photoshop (120%) cuando el PSD no trae uno propio */
	color: var(--ec-texto-secundario); /* #6A6A6A, PSD */
}

.ec-catalogo-descripcion p {
	margin: 0 0 1.25rem;
}

.ec-catalogo-descripcion p:last-child {
	margin-bottom: 0;
}

.ec-catalogo-descripcion strong,
.ec-catalogo-descripcion b {
	font-weight: var(--ec-peso-bold); /* negrita real -- distinta del strong{font-weight:500} genérico de mymedi, aquí el PSD marca un tramo realmente más pesado (ver "MÁXIMA EFICIENCIA…", Outfit 700) */
	color: var(--ec-texto);
}

.ec-catalogo-descripcion h2,
.ec-catalogo-descripcion h3,
.ec-catalogo-descripcion h4 {
	margin: 2rem 0 1rem;
	/* 38.13px, mismo tamaño que el H1 de la intro -- verificado con
	   ecVerificarPSD contra "FUNCIONAMIENTO SISTEMA DTH": cuando el título
	   de la introducción está oculto (ec_catalogo_titulo_intro_oculto(),
	   caso de DTH), este es el título visual más grande de la página, no
	   uno "de nivel inferior". */
	font-size: 2.383125rem; /* 38.13px, PSD */
	font-weight: var(--ec-peso-medium);
	letter-spacing: -0.02em; /* -0.76px a 38.13px, PSD */
	line-height: 1.25;
	color: var(--ec-texto);
}

.ec-catalogo-descripcion h2:first-child,
.ec-catalogo-descripcion h3:first-child,
.ec-catalogo-descripcion h4:first-child {
	margin-top: 0;
}

/* Subtítulo chico -- "MÉTODOS DE PERFORACIÓN"/"APLICACIONES" de Máquina Perforadora Neumática
   MD25 Stenuick, "FUNCIONAMIENTO" de PUMEX: mismo tamaño que "APLICACIONES" de DTH/PUMEX/Acero
   Integral (25px, PSD) -- un nivel por debajo de "FUNCIONAMIENTO SISTEMA DTH"/"COMPONENTES SISTEMA
   DTH" (38.13px, la regla h2/h3/h4 de arriba). Clase, no una etiqueta h-más-chica-que-h4: adentro
   de 'descripcion' (h4, ver datos.php) Y en el título suelto de "APLICACIONES" antes de la fila de
   círculos (h2, fuera de 'descripcion', ver templates/partes/catalogo-intro.php) -- las dos
   necesitan verse igual sin pelear con la regla genérica de arriba. */
.ec-catalogo-descripcion .ec-catalogo-subtitulo,
.ec-catalogo-aplicaciones-titulo {
	margin: 2rem 0 1rem;
	font-size: 1.5625rem; /* 25px, PSD */
	font-weight: var(--ec-peso-medium);
	letter-spacing: -0.04em; /* -1.00px a 25px, PSD */
	line-height: 1.45; /* 36.23 ÷ 25, PSD */
	color: var(--ec-texto);
	text-transform: uppercase; /* el PSD lo escribe todo en mayúsculas -- por CSS, no en el texto de origen (mismo criterio que .ec-catalogo-aplicaciones-nombre, más abajo), así "Aplicaciones" (catalogo-intro.php, con esc_html_e()) sigue siendo texto normal traducible. */
}

.ec-catalogo-descripcion .ec-catalogo-subtitulo:first-child {
	margin-top: 0;
}

.ec-catalogo-descripcion ul,
.ec-catalogo-descripcion ol {
	margin: 0 0 1.25rem;
	padding-left: 1.25rem;
	list-style-position: outside; /* contra "ul li{list-style:disc inside}" del CSS real de mymedi -- aquí SÍ hace falta viñeta/número, pero fuera del texto */
}

.ec-catalogo-descripcion ul {
	list-style-type: disc;
}

.ec-catalogo-descripcion ol {
	list-style-type: decimal;
}

.ec-catalogo-descripcion li {
	margin: 0;
	padding: 0 0 0.5rem; /* contra "ul li{padding:8px 0}" del CSS real de mymedi -- se deja solo el espacio de ABAJO, sin el de arriba (evita doble hueco entre líneas) */
	line-height: 1.4; /* contra "ul li{line-height:20px}" del CSS real de mymedi */
}

.ec-catalogo-descripcion li:last-child {
	padding-bottom: 0;
}

/* Clase para el editor (campo "Clases CSS adicionales" del bloque/lista) --
   listas de dos columnas, como APLICACIONES de Máquina Perforadora Neumática
   MD25 Stenuick: 6 ítems repartidos 4+2 (columna izquierda más larga), no
   3+3 -- columns:2 (multicolumna) balancea el alto solo y da 3+3, así que
   se arma con grid-auto-flow:column y 4 FILAS fijas: la 1ª columna se llena
   completa (4 huecos) antes de pasar a la 2ª (los 2 que sobran) -- el orden
   de lectura del HTML no cambia. Si una lista futura trae menos o más de 6
   ítems, sigue repartiendo de a 4 por columna (p. ej. 5 ítems: 4+1). */
.ec-catalogo-descripcion .ec-lista-2-col,
.ec-catalogo-descripcion ul.ec-columnas-2,
.ec-catalogo-descripcion ol.ec-columnas-2 {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(4, auto);
	grid-template-columns: repeat(2, 1fr);
	column-gap: 2.5rem;
	row-gap: 0.5rem;
}

@media (max-width: 768px) {
	.ec-catalogo-descripcion .ec-lista-2-col,
	.ec-catalogo-descripcion ul.ec-columnas-2,
	.ec-catalogo-descripcion ol.ec-columnas-2 {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}
}

/* --------------------------------------------------------------------------
   Pasos en cuadrícula -- FUNCIONAMIENTO de PUMEX: 4 pasos en 2×2, no en
   lista vertical. Clase propia (no ec-columnas-2: esa reparte por FILAS
   fijas pensada para textos cortos de una línea; aquí cada paso es un
   párrafo de varias líneas y sí importa que la fila 1 sean los pasos 1-2 y
   la fila 2 los pasos 3-4, como en el PSD -- grid con 2 columnas alcanza
   solo con eso, sin necesitar grid-auto-flow).
   -------------------------------------------------------------------------- */
.ec-catalogo-descripcion .ec-catalogo-pasos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 2.5rem;
	row-gap: 1.25rem;
}

.ec-catalogo-descripcion .ec-catalogo-pasos > li {
	margin: 0;
}

@media (max-width: 768px) {
	.ec-catalogo-descripcion .ec-catalogo-pasos {
		grid-template-columns: 1fr;
	}
}

.ec-catalogo-descripcion img {
	max-width: 100%;
	height: auto;
}

/* Imágenes alineadas -- como en Drag Bit/Compresores (derecha) o Top Hammer
   (centrada): clases nativas del editor de WordPress, sin plugin. */
.ec-catalogo-descripcion img.alignright,
.ec-catalogo-descripcion .alignright {
	float: right;
	margin: 0.25rem 0 1.25rem 1.875rem;
}

.ec-catalogo-descripcion img.alignleft,
.ec-catalogo-descripcion .alignleft {
	float: left;
	margin: 0.25rem 1.875rem 1.25rem 0;
}

.ec-catalogo-descripcion img.aligncenter,
.ec-catalogo-descripcion .aligncenter {
	display: block;
	margin: 1.25rem auto;
	float: none;
}

/* Galería en fila con pie de foto -- como el FUNCIONAMIENTO de DTH y de
   PUMEX: el shortcode [gallery] nativo de WordPress (sin plugin), que
   term_description() ya resuelve por do_shortcode() (Parte 1). */
.ec-catalogo-descripcion .gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.ec-catalogo-descripcion .gallery-item {
	margin: 0;
	flex: 1 1 12rem;
	max-width: 16rem;
	text-align: center;
	list-style: none;
}

.ec-catalogo-descripcion .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
}

.ec-catalogo-descripcion .gallery-caption,
.ec-catalogo-descripcion .wp-caption-text {
	margin-top: 0.625rem;
	font-size: 0.875rem;
	color: var(--ec-catalogo-gris-meta);
}

.ec-catalogo-descripcion::after {
	content: '';
	display: block;
	clear: both;
}

/* --------------------------------------------------------------------------
   Aplicaciones -- círculos naranjas con icono blanco, nombre en mayúsculas
   debajo (DTH, PUMEX, Acero Integral).
   -------------------------------------------------------------------------- */

.ec-catalogo-aplicaciones {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem 1.75rem; /* fila/columna -- a ojo contra el PNG, entre 6 círculos de 68px en ~670px de ancho */
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.ec-catalogo-aplicaciones-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 6.25rem; /* ancho de columna -- deja aire a cada lado del círculo de 68px */
	margin: 0;
	padding: 0;
	line-height: normal;
	text-align: center;
}

.ec-catalogo-aplicaciones-circulo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.25rem; /* 68px, PSD (Elipse 8) */
	height: 4.25rem;
	border-radius: 50%;
	background-color: var(--ec-naranja);
	margin-bottom: 0.9375rem; /* 15px, PSD */
}

.ec-catalogo-aplicaciones-circulo img {
	width: 1.75rem;
	height: 1.75rem;
	-webkit-filter: brightness(0) invert(1); /* el icono se sube en su color original; el diseño lo pide blanco sobre el círculo naranja */
	filter: brightness(0) invert(1);
}

.ec-catalogo-aplicaciones-nombre {
	font-size: 1.041875rem; /* 16.67px, PSD */
	font-weight: var(--ec-peso-medium);
	letter-spacing: -0.04em; /* -0.67px a 16.67px, PSD */
	text-transform: uppercase;
	color: var(--ec-texto);
}

/* --------------------------------------------------------------------------
   Proceso -- fila de ilustraciones con rótulo debajo de cada una (por ahora
   solo DTH: "FUNCIONAMIENTO SISTEMA DTH" con sus 5 pasos, INGRESO DE AIRE →
   EVACUACIÓN DE DETRITOS). HTML armado por ec_prep_cat_html_proceso()
   (herramienta) / la parte análoga del script local -- llega ya dentro de
   'descripcion', por eso no hace falta anidar bajo .ec-catalogo-descripcion
   aquí (el ::after de la descripción ya lo cubre para el clearfix).
   Distinta de .ec-catalogo-aplicaciones (círculos naranjas de un tamaño
   fijo): cada ilustración de esta fila trae su propio ancho del diseño
   (16 a 93px a 1440), así que la imagen fija ALTO, no ancho, y deja el
   ancho libre -- object-fit:contain evita que ninguna se recorte.
   -------------------------------------------------------------------------- */

.ec-catalogo-proceso {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.75rem 1rem;
	margin: 2.5rem 0;
	padding: 0;
	list-style: none;
}

.ec-catalogo-proceso-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 1 auto;
	max-width: 9rem;
	margin: 0;
	text-align: center;
}

.ec-catalogo-proceso-item img {
	display: block;
	height: 8.75rem; /* 140px -- alto parejo entre las 5 aunque el ancho varíe, ver arriba */
	width: auto;
	max-width: 100%;
	object-fit: contain;
	margin: 0 0 0.75rem;
}

.ec-catalogo-proceso-item figcaption {
	font-size: 1.041875rem; /* 16.67px, PSD */
	font-weight: var(--ec-peso-semibold);
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--ec-texto);
}

@media (max-width: 1024px) {
	.ec-catalogo-proceso {
		justify-content: center;
		gap: 2rem 1.5rem;
	}
}

@media (max-width: 767px) {
	.ec-catalogo-proceso {
		flex-direction: column;
		align-items: center;
		gap: 2rem;
	}

	.ec-catalogo-proceso-item {
		max-width: none;
	}

	.ec-catalogo-proceso-item img {
		height: 7.5rem;
	}
}

/* ==========================================================================
   4. Rejilla de productos -- tarjeta (imagen cuadrada + título, sin precio
      ni botón). Misma plantilla en tienda, categoría y "Productos
      Relacionados" de la ficha (mymedi/woocommerce/content-product.php).
   ========================================================================== */

/* La rejilla de la tienda/categoría NO se reconstruye con grid/flex: mymedi
   ya la resuelve con float + width:50%/33%/25% según ".woocommerce.columns-N"
   (ver preview/real/2-mymedi.css línea ~7157) -- con ts_prod_cat_columns en
   2 (ver el reporte: antes estaba en 4 y le ganaba al filtro
   loop_shop_columns de functions.php desde el propio PHP de la plantilla,
   sin ningún CSS de por medio que pelear) esa MISMA regla de mymedi ya deja
   2 columnas, tal como pide el diseño -- no hace falta tocar width/float
   aquí, solo la parte cosmética (imagen/título/líneas) de abajo.

   "Productos Relacionados" (ficha) SÍ hace falta: mymedi fuerza esa sección
   a 25% con ".up-sells .products .product,.related .products .product"
   (misma hoja, línea ~10790) SIN mirar column-N -- 3 clases, sin ningún
   selector de tipo. El de abajo iguala esas 3 clases y suma "ul"/"li" como
   selectores de TIPO: en especificidad CSS, un empate en clases se
   desempata por el número de selectores de tipo/pseudo-elemento, así que
   ESTA regla gana sin necesitar !important (prohibido por el encargo). */
ul.products.up-sells li.product,
ul.products.related li.product {
	width: 33.3333%;
}

.ec-catalogo-columnas .thumbnail-wrapper,
.up-sells.products .thumbnail-wrapper,
.related.products .thumbnail-wrapper {
	display: block;
	aspect-ratio: 1 / 1;
	background-color: var(--ec-blanco);
	overflow: hidden;
}

.ec-catalogo-columnas .thumbnail-wrapper img,
.up-sells.products .thumbnail-wrapper img,
.related.products .thumbnail-wrapper img {
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
	padding: 1.5rem;
}

.ec-catalogo-columnas .meta-wrapper,
.up-sells.products .meta-wrapper,
.related.products .meta-wrapper {
	margin-top: 2.125rem; /* ~34px, PSD (y827 fin imagen -- y861 inicio título) */
	padding-bottom: 0; /* contra ".products .product .meta-wrapper{padding-bottom:18px}" del CSS real de mymedi -- sin precio/botón debajo, ese hueco de sobra no aplica */
}

.ec-catalogo-columnas .meta-wrapper-2 {
	display: none; /* sin precio ni botón de compra -- ya vacío por EC_MODO_CATALOGO (functions.php), este solo evita cualquier hueco que ese <div> vacío pudiera dejar */
}

.ec-catalogo-columnas .woocommerce-loop-product__title,
.up-sells.products .woocommerce-loop-product__title,
.related.products .woocommerce-loop-product__title {
	margin: 0;
	font-size: 1.46875rem; /* 23.5px, PSD */
	font-weight: var(--ec-peso-medium);
	line-height: 1.2;
	color: var(--ec-texto);
}

.ec-catalogo-columnas a .woocommerce-loop-product__title,
.up-sells.products a .woocommerce-loop-product__title {
	text-decoration: none;
}

.ec-catalogo-columnas li.product:hover .woocommerce-loop-product__title,
.up-sells.products li.product:hover .woocommerce-loop-product__title,
.related.products li.product:hover .woocommerce-loop-product__title {
	color: var(--ec-naranja);
}

.ec-catalogo-tarjeta-lineas {
	margin-top: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.ec-catalogo-tarjeta-lineas span {
	font-size: 1.041875rem; /* 16.67px -- mismo tamaño que el resto del texto secundario del catálogo */
	font-weight: var(--ec-peso-regular);
	color: var(--ec-texto-secundario);
}

/* "Productos Relacionados" (ficha) */
.related.products > h2 {
	margin: 0 0 2.375rem; /* ~38px, PSD */
	font-size: 2.383125rem; /* 38.13px, PSD */
	font-weight: var(--ec-peso-medium);
	letter-spacing: -0.02em;
	color: var(--ec-texto);
}

/* A ≤767px, "Productos Relacionados"/upsells pasan a 1 columna -- mismo
   criterio de especificidad que arriba (3 clases + ul/li de tipo vencen a
   ".up-sells .products .product,.related .products .product", sin
   !important). La rejilla de tienda/categoría no hace falta tocarla aquí:
   mymedi ya resuelve columns-2 a 1 columna en su propio responsive (ver
   preview/real/3-responsive.css) -- se confirma con capturas a 375px. */
@media (max-width: 767px) {
	ul.products.up-sells li.product,
	ul.products.related li.product {
		width: 100%;
	}
}

/* ==========================================================================
   5. Paginación -- círculos (la misma del Blog, en este archivo: el CSS del
      Blog no carga en el catálogo). Marcado nativo de WooCommerce
      (loop/pagination.php, sin sobrescribir): <nav class="woocommerce-
      pagination"><ul class="page-numbers"><li><a class="page-numbers
      current/prev/next/dots">…</a></li>…</ul></nav>.

   mymedi trae SUS PROPIAS reglas para esta misma paginación nativa de
   WooCommerce (".woocommerce nav.woocommerce-pagination ul li a/span", en
   preview/real/style.css real y en el CSS dinámico del panel -- fondo
   transparente, círculo actual en el azul de marca) con selectores de 3-4
   clases/etiquetas encadenadas -- más específicos que un simple
   ".woocommerce-pagination .page-numbers". Cada regla de abajo que
   necesita ganarles antepone ".ec-catalogo-principal" (contenedor propio
   que ya envuelve a woocommerce-pagination): sin eso, perdían en
   silencio -- fondo/color parecían correctos solo por coincidencia (el
   "transparent" de mymedi deja ver el fondo casi blanco de la página).
   Verificado leyendo esas reglas con getMatchedCSSRules en vivo, no
   adivinado. Ninguna necesita !important: sumar una clase de más basta. */

.woocommerce-pagination {
	margin-top: 3.5rem; /* ~56px, PSD */
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.125rem; /* 18px, PSD */
	margin: 0;
	padding: 0;
	list-style: none; /* contra "ul li{list-style:disc inside}" del CSS real de mymedi */
}

.woocommerce-pagination ul.page-numbers li {
	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-catalogo-principal .woocommerce-pagination .page-numbers {
	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-catalogo-borde);
	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);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ec-catalogo-principal .woocommerce-pagination a.page-numbers:hover,
.ec-catalogo-principal .woocommerce-pagination a.page-numbers:focus-visible {
	border-color: var(--ec-naranja);
	color: var(--ec-naranja);
}

.ec-catalogo-principal .woocommerce-pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--ec-naranja);
	outline-offset: 3px;
}

.ec-catalogo-principal .woocommerce-pagination .page-numbers.current {
	border-color: var(--ec-naranja);
	background-color: var(--ec-naranja);
	color: var(--ec-blanco);
}

.ec-catalogo-principal .woocommerce-pagination .page-numbers.prev,
.ec-catalogo-principal .woocommerce-pagination .page-numbers.next {
	color: var(--ec-negro-footer); /* flechas: azul del PSD → negro pedido por la agencia, mismo criterio que Blog */
}

/* mymedi inyecta su propio icono (Font Awesome) con ::before en
   a.prev/a.next de ESTA MISMA paginación nativa -- se ve un carácter "»"
   de más junto al SVG propio (ec_catalogo_paginacion_args(),
   catalogo-vistas.php). Se anula solo aquí, sin tocar esas clases en
   ningún otro sitio del tema (owl carousel, single-navigation...). */
.ec-catalogo-principal .woocommerce-pagination .page-numbers.prev::before,
.ec-catalogo-principal .woocommerce-pagination .page-numbers.next::before {
	content: none;
}

.ec-catalogo-principal .woocommerce-pagination .page-numbers.dots {
	border-color: transparent;
	font-size: 1.25rem;
	font-weight: var(--ec-peso-regular);
}

/* El span "Anterior"/"Siguiente" oculto visualmente (ver
   ec_catalogo_paginacion_args() en catalogo-vistas.php) cae bajo
   ".woocommerce nav.woocommerce-pagination ul li span" del CSS real de
   mymedi (34px, redondo, en línea) -- 3 clases + .ec-catalogo-principal
   bastan para ganarle sin !important. */
.ec-catalogo-principal .woocommerce-pagination .ec-catalogo-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;
}

.ec-catalogo-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;
}

@media (max-width: 375px) {
	.woocommerce-pagination .page-numbers {
		width: 3.5rem;
		height: 3.5rem;
		font-size: 1.375rem;
	}

	.woocommerce-pagination ul.page-numbers {
		gap: 0.75rem;
	}
}

/* ==========================================================================
   6. Barra lateral -- tarjeta blanca con sombra (Rectángulo 7 del PSD):
      Buscar, Categorías, WhatsApp.
   ========================================================================== */

.ec-catalogo-lateral {
	/* position+z-index: mymedi pinta ".before-loop-wrapper" (position:relative
	   propio, en la columna principal) por ENCIMA de cualquier hermano
	   estático así no se toquen geométricamente -- un position:relative sin
	   z-index ya pinta antes que el contenido estático del mismo contexto de
	   apilamiento, sin importar el orden en el HTML. Verificado en vivo:
	   sin esto, "Buscar" quedaba debajo, inalcanzable al clic aunque se
	   viera bien en la captura. */
	position: relative;
	z-index: 1;
	background-color: var(--ec-blanco);
	box-shadow: 0 0.25rem 1.875rem rgba(0, 0, 0, 0.06);
	padding: 2.125rem 1.875rem 1.875rem 3.0625rem; /* ~34/30/30px, PSD, salvo el izquierdo (49px): ajustado con ecVerificarPSD (los 30px teóricos dejaban "Buscar" 19px corrido a la izquierda) */
}

.ec-catalogo-lateral-seccion + .ec-catalogo-lateral-seccion {
	margin-top: 2.25rem; /* ~36px, PSD (y508 fin buscador -- y544 "Categorias") */
}

/* .ec-catalogo-lateral de más -- mismo motivo que .ec-catalogo-intro-titulo
   más arriba (".woocommerce h2{font-weight:...}" de nuestro propio
   style.css): aquí el peso coincide por casualidad (23.45px SÍ es
   semibold en el PSD), pero el tamaño/line-height de esta regla necesitan
   ganar igual, así que se blinda con la misma técnica por consistencia. */
.ec-catalogo-lateral .ec-catalogo-lateral-titulo {
	margin: 0 0 1.0625rem; /* 17px, PSD */
	font-size: 1.465625rem; /* 23.45px, PSD */
	font-weight: var(--ec-peso-semibold);
	line-height: 1.2;
	color: var(--ec-texto);
}

/* --------------------------------------------------------------------------
   Buscador -- SOLO productos (post_type=product oculto en el <form>, ver
   templates/partes/catalogo-barra.php). Mismo patrón que
   .ec-blog-buscador/.ec-blog-buscador-campo (blog.css): el <input> real
   queda invisible como caja, el <span> que lo envuelve es lo que se ve --
   así el radio de 60px y el fondo #F0F2F5 que fuerza mymedi (ver la
   cabecera del archivo) no tienen nada que recortar.
   -------------------------------------------------------------------------- */

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

.ec-catalogo-buscador-campo {
	display: flex;
	align-items: center;
	gap: 0.625rem; /* 10px, a ojo contra el PNG entre la lupa y el texto */
	height: 4.1875rem; /* 67px, PSD (Rectángulo 16) */
	padding: 0 1.25rem;
	border: 0.0625rem solid var(--ec-catalogo-borde);
	background-color: var(--ec-blanco);
}

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

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

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

/* "html body .clase input" -- specificidad (0,1,3) contra la píldora gris
   de mymedi ("html input[type^="search"]{background:#F0F2F5;border-radius:
   60px;padding:10px 25px}", mymedi/css/reset.css): con solo la clase
   (0,1,0) mymedi ganaba background/padding/border-radius y el óvalo gris
   se veía DENTRO del rectángulo con contorno de este parcial -- verificado
   en vivo. */
html body .ec-catalogo-buscador-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); /* tamaño libre, cómodo de leer -- ver el mismo criterio en blog.css */
	color: var(--ec-texto);
	outline: 0;
}

.ec-catalogo-buscador-marcador {
	position: absolute;
	left: 4.375rem; /* 70px -- 57px teóricos, ajustado con ecVerificarPSD */
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.03125rem;
	font-weight: var(--ec-peso-regular);
	color: var(--ec-catalogo-placeholder);
	pointer-events: none;
	white-space: nowrap;
}

.ec-catalogo-buscador-input:focus + .ec-catalogo-buscador-marcador,
.ec-catalogo-buscador-input:not(:placeholder-shown) + .ec-catalogo-buscador-marcador {
	display: none;
}

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

/* --------------------------------------------------------------------------
   Categorías -- viñeta redonda (::before, no list-style: mymedi no tiene
   nada que resetear en un <li> sin marcador nativo), la actual y el hover
   en naranja, sangría en el nivel 2.
   -------------------------------------------------------------------------- */

.ec-catalogo-categorias-lista {
	margin: 0;
	padding: 0;
	list-style: none; /* contra "ul li{list-style:disc inside}" del CSS real de mymedi -- la viñeta de aquí es el ::before de abajo */
}

.ec-catalogo-categorias-item {
	position: relative;
	margin: 0;
	padding: 0 0 0 1.125rem; /* contra "ul li{padding:8px 0}" del CSS real de mymedi -- el espaciado entre líneas lo da line-height, no padding */
	line-height: 1.75; /* 29.17 ÷ 16.67, PSD -- contra "ul li{line-height:20px}" del CSS real de mymedi */
	/* "list-style:none" en .ec-catalogo-categorias-lista (arriba) no le
	   quita el disco a ESTE <li>: "ul li{list-style:disc inside}" de mymedi
	   apunta directo al <li>, y un valor declarado directo sobre el
	   elemento siempre gana sobre el heredado del padre, sin importar
	   especificidad -- de ahí las dos viñetas (el disco de mymedi + la
	   ::before de abajo) verificadas en vivo. Se repite aquí, en el
	   selector que sí compite de tú a tú contra "ul li" (una clase, 0,1,0,
	   contra dos etiquetas, 0,0,2) y gana. */
	list-style: none;
}

.ec-catalogo-categorias-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%); /* centrado real contra la línea de texto, sin depender de recalcular a mano el alto exacto de line-height */
	width: 0.3125rem; /* 5px */
	height: 0.3125rem;
	border-radius: 50%;
	background-color: currentColor;
}

.ec-catalogo-categorias-item--nivel2 {
	padding-left: 2.375rem; /* sangría del nivel 2 -- el encargo lo pide, sin medida propia en el PSD (la tienda de muestra no llegó a mostrar dos niveles a la vez) */
}

.ec-catalogo-categorias-item a,
.ec-catalogo-categorias-item span {
	font-size: 1.041875rem; /* 16.67px, PSD */
	font-weight: var(--ec-peso-medium);
	color: var(--ec-texto); /* sin letter-spacing: el tramo real de este texto en el PSD no trae tracking (a diferencia del de APLICACIONES, que sí) -- verificado con ecVerificarPSD */
	text-decoration: none;
}

.ec-catalogo-categorias-item a:hover,
.ec-catalogo-categorias-item a:focus-visible {
	color: var(--ec-naranja);
}

.ec-catalogo-categorias-item--actual,
.ec-catalogo-categorias-item--actual a {
	color: var(--ec-naranja);
}

/* --------------------------------------------------------------------------
   Botón WHATSAPP -- el shortcode [ec_whatsapp] (functions.php) ya trae
   .ec-boton-whatsapp con su icono; aquí solo el tamaño/posición dentro de
   esta tarjeta (el resto del look -- fondo naranja, texto blanco -- vive en
   style.css, que no se toca; si esa regla no existiera todavía, este
   bloque la deja de todos modos con lo mínimo del PSD).
   -------------------------------------------------------------------------- */

.ec-catalogo-lateral-whatsapp {
	margin-top: 2.375rem; /* ~38px, PSD (y508/y675 fin de sección anterior -- y546/y940 WhatsApp, según haya categorías) */
}

.ec-catalogo-lateral-whatsapp .ec-boton-whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	width: 100%;
	height: 4.1875rem; /* 67px, PSD -- misma altura que el buscador */
	background-color: var(--ec-naranja);
	color: var(--ec-blanco);
	font-size: 1.081875rem; /* 17.31px, PSD */
	font-weight: var(--ec-peso-semibold);
	text-decoration: none;
	text-transform: uppercase;
}

.ec-catalogo-lateral-whatsapp .ec-boton-whatsapp:hover,
.ec-catalogo-lateral-whatsapp .ec-boton-whatsapp:focus-visible {
	background-color: var(--ec-naranja-hover);
}

/* ==========================================================================
   7. Ficha de producto
   ========================================================================== */

/* mymedi pinta su propia franja de breadcrumb + título sobre la ficha
   (ts_prod_breadcrumb/ts_prod_title, panel del tema) -- el diseño no la
   dibuja (la ficha va directo del header blanco a la galería). Esos dos
   ajustes no tienen filtro propio en single-product.php (a diferencia de
   is_shop(), que sí pasa por woocommerce_show_page_title) y son globales
   del panel -- se oculta por CSS, scopeado a is_product() con la clase
   nativa 'single-product' que WooCommerce ya pone en el body. */
body.single-product .breadcrumb-title-wrapper {
	display: none;
}

body.single-product #primary.site-content {
	padding-top: 3.5rem; /* aire donde antes iba esa franja -- a ojo contra el PNG */
}

body.single-product .summary.entry-summary {
	/* 1.5.9 -- 495px = los 30px de padding-left que mymedi le pone a esta
	   columna + 465px de caja de texto, la del diseño (x900..1365 a 1440):
	   lo justo para que WhatsApp (175) + hueco (13) + ficha (276) = 464
	   quepan en una fila. Era 28rem (448px, 418 de contenido). La orilla
	   derecha no se mueve (la columna flota a la derecha, alineada con las
	   pestañas y los relacionados); lo que cambia es dónde EMPIEZA. */
	max-width: 30.9375rem;
}

/* --------------------------------------------------------------------------
   Galería -- restilo de WooCommerce (miniaturas en columna a la izquierda,
   imagen grande con zoom). Sin sobrescribir ninguna plantilla: FlexSlider
   (assets JS de WooCommerce, 'wc-single-product') arma
   ul.flex-control-nav con las miniaturas como HERMANA de
   .woocommerce-product-gallery__wrapper, ambas dentro de
   .woocommerce-product-gallery -- se reordena por CSS (flex-direction).
   -------------------------------------------------------------------------- */

.woocommerce-product-gallery {
	display: flex;
	flex-direction: row-reverse; /* miniaturas antes en el DOM (ver arriba) pero a la IZQUIERDA visualmente */
	gap: 1.5rem;
}

.woocommerce-product-gallery__wrapper {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.woocommerce-product-gallery__image {
	position: relative;
	background-color: var(--ec-blanco);
}

.woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

.woocommerce-product-gallery ul.flex-control-nav {
	flex: 0 0 6.5rem; /* 104px de columna de miniaturas */
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none; /* contra "ul li{list-style:disc inside}" del CSS real de mymedi */
}

.woocommerce-product-gallery ul.flex-control-nav li {
	margin: 0;
	padding: 0;
	line-height: normal;
}

.woocommerce-product-gallery ul.flex-control-nav img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	-o-object-fit: cover;
	object-fit: cover;
	cursor: pointer;
	border: 0.0625rem solid var(--ec-catalogo-borde);
	opacity: 1;
}

.woocommerce-product-gallery ul.flex-control-nav li.flex-active img,
.woocommerce-product-gallery ul.flex-control-nav img:hover {
	border-color: var(--ec-naranja);
}

/* Lupa de zoom (zoom.js de WooCommerce, activo -- ver el reporte: se
   encendió woocommerce_enable_zoom/_swipe en las opciones, estaban en
   "no"): el botón redondo que agrega esa librería. */
.woocommerce-product-gallery .zoomImg {
	background-color: var(--ec-blanco);
}

@media (max-width: 767px) {
	.woocommerce-product-gallery {
		flex-direction: column;
	}

	.woocommerce-product-gallery ul.flex-control-nav {
		flex-direction: row;
		flex: none;
		overflow-x: auto;
	}

	.woocommerce-product-gallery ul.flex-control-nav img {
		width: 4.5rem;
	}
}

/* --------------------------------------------------------------------------
   Título, precio, descripción corta
   -------------------------------------------------------------------------- */

/* ".summary" de más en las dos reglas siguientes: el panel de mymedi
   (engranajecorporativo.css, el CSS dinámico de Redux) aplica su propio
   tamaño "estilo H1" a ".woocommerce div.product .summary .price" (4
   clases) y análogos -- verificado en vivo con las reglas que de verdad
   hacían match (font-size salía 40px, no 23.5px). Iguala esas 4 clases y
   suma "div"/"p" de tipo para ganar sin !important. */
body.single-product div.product .summary .product_title {
	margin: 0 0 0.75rem;
	font-size: 1.46875rem; /* 23.5px, PSD */
	font-weight: var(--ec-peso-medium);
	color: var(--ec-texto);
}

/* "+ .price": mymedi/style.css apunta al precio como hermano inmediato de
   ".woocommerce-product-rating" (el <div> que WooCommerce siempre imprime
   ahí, oculto por CSS más abajo pero presente en el DOM -- el combinador
   "+" mira adyacencia real, no visual) -- 5 clases, de ahí los 20px de
   padding-top/25px de margin-top que separaban de más el precio del
   título. Verificado en vivo probando cada parte de esa regla por
   separado con Element.matches(); ".product_title + .price" (sin el div
   de rating en medio) NUNCA hace match aquí, ni siquiera para mymedi. */
body.single-product div.product .summary .woocommerce-product-rating + p.price {
	margin: 0 0 1.5rem;
	padding: 0;
	font-size: 1.46875rem; /* 23.5px, PSD */
	font-weight: var(--ec-peso-medium);
	line-height: 1.2;
	letter-spacing: -0.04em; /* -0.94px a 23.5px, PSD */
	color: var(--ec-texto);
}

body.single-product div.product .woocommerce-product-details__short-description {
	margin-bottom: 1.75rem;
	font-size: 1.041875rem; /* 16.67px, PSD */
	line-height: 1.2;
	color: var(--ec-texto-secundario);
}

body.single-product div.product .woocommerce-product-details__short-description p {
	margin: 0 0 1.25rem;
}

body.single-product div.product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Meta -- "Categoría: <ruta>" / "ID del producto: <SKU>"
   -------------------------------------------------------------------------- */

.ec-catalogo-meta {
	margin: 0 0 1.75rem;
}

.ec-catalogo-meta-fila {
	margin: 0 0 0.5rem;
	font-size: 1.46875rem; /* 23.5px, PSD */
	font-weight: var(--ec-peso-medium);
	color: var(--ec-texto);
}

.ec-catalogo-meta-fila:last-child {
	margin-bottom: 0;
}

.ec-catalogo-meta-fila strong {
	font-weight: var(--ec-peso-medium); /* mismo peso que mymedi ya fuerza en <strong> (style.css real) -- explícito para no depender del orden entre hojas de estilo */
}

.ec-catalogo-meta-valor {
	font-weight: var(--ec-peso-medium);
	color: var(--ec-catalogo-gris-valor); /* #919191, PSD */
}

.ec-catalogo-meta-valor--categoria {
	font-size: 1.301875rem; /* 20.83px, PSD -- más chico que la etiqueta y que el ID */
}

/* --------------------------------------------------------------------------
   Botones -- WHATSAPP (naranja) + DESCARGAR FICHA TÉCNICA (negro) en una
   sola fila, como el diseño: los dos van dentro de .ec-catalogo-acciones
   (ec_catalogo_acciones_abrir()/_cerrar() en catalogo-vistas.php; WhatsApp
   lo imprime ec_boton_whatsapp_ficha_producto() en functions.php, la ficha
   ec_catalogo_boton_ficha_tecnica()). Flex con wrap: uno al lado del otro
   cuando caben (13px de hueco, el del PSD) y uno debajo del otro cuando no
   (teléfono, tablet angosta).
   -------------------------------------------------------------------------- */

.ec-catalogo-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8125rem; /* 13px, PSD (WhatsApp x901..1076, ficha x1089..1365) */
	margin: 0 0 0.75rem; /* el aire que antes daba el margin-bottom de cada botón */
}

body.single-product .ec-boton-whatsapp,
.ec-catalogo-boton-ficha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	height: 3.625rem; /* 58px, PSD */
	padding: 0 1.5rem;
	margin: 0;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1.081875rem; /* 17.31px, PSD */
	font-weight: var(--ec-peso-semibold);
}

body.single-product .ec-boton-whatsapp {
	background-color: var(--ec-naranja);
	color: var(--ec-blanco);
}

body.single-product .ec-catalogo-acciones .ec-boton-whatsapp {
	min-width: 10.9375rem; /* 175px, PSD -- con la ficha (276) y el hueco (13) llenan justo los 465px de la columna */
}

body.single-product .ec-boton-whatsapp:hover,
body.single-product .ec-boton-whatsapp:focus-visible {
	background-color: var(--ec-naranja-hover);
}

.ec-catalogo-boton-ficha {
	/* Sin el icono de descarga el texto mide 235.7px: con los 24px de padding
	   de arriba la caja daba 283.7px, no los 276 del PSD -- y 175 + 13 + 284
	   ya no caben en los 465px de la columna. 20px de cada lado dan
	   235.7 + 40 = 275.7, que el min-width de abajo redondea a 276. */
	padding: 0 1.25rem;
	min-width: 17.25rem; /* 276px, PSD */
	background-color: var(--ec-negro-oficina); /* #000000 -- el PSD lo da en negro puro, no en --ec-negro-footer (#1C1C1C) */
	color: var(--ec-blanco);
}

.ec-catalogo-boton-ficha:hover,
.ec-catalogo-boton-ficha:focus-visible {
	background-color: var(--ec-negro-footer);
}

/* --------------------------------------------------------------------------
   Pestañas -- DESCRIPCIÓN / RESEÑAS, restilo de WooCommerce (mymedi/
   woocommerce/single-product/tabs/tabs.php, sin sobrescribir). El JS de
   WooCommerce ('wc-single-product') pone .active en el <li> visible.
   -------------------------------------------------------------------------- */

.woocommerce-tabs.wc-tabs-wrapper {
	margin-top: 4rem;
	clear: both;
}

.woocommerce-tabs ul.tabs.wc-tabs {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none; /* contra "ul li{list-style:disc inside}" del CSS real de mymedi */
	border-bottom: 0.0625rem solid var(--ec-catalogo-borde);
}

.woocommerce-tabs ul.tabs.wc-tabs li {
	margin: 0 0 -0.0625rem;
	padding: 0;
	line-height: normal;
}

.woocommerce-tabs ul.tabs.wc-tabs li a {
	display: block;
	padding: 1.25rem 2.5rem;
	border-top: 0.3125rem solid transparent;
}

/* color/text-decoration/font-weight/mayúsculas aparte, con más
   especificidad: WooCommerce 11.1 (".woocommerce div.product .woocommerce-
   tabs ul.tabs li a") y mymedi/style.css (esa misma regla + ":hover,
   li.active a{text-decoration:underline}") encadenan 5 clases --
   ".woocommerce-tabs ul.tabs.wc-tabs li a" de arriba se quedaba en 3 y
   perdía en silencio (color azul del panel, subrayado en la pestaña
   activa, peso 600 en vez de 500). "body.single-product" + el nombre real
   de las clases (".wc-tabs-wrapper") suman 6, sin !important. Mayúsculas
   en las DOS pestañas -- el PSD pinta "DESCRIPCIÓN" y "RESEÑAS" igual. */
body.single-product .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li a {
	font-size: 1.46875rem; /* 23.5px, PSD */
	font-weight: var(--ec-peso-medium);
	color: var(--ec-texto);
	text-decoration: none;
	text-transform: uppercase;
}

body.single-product .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li.active a {
	border-top-color: var(--ec-negro-footer); /* la pestaña activa se marca con la línea ARRIBA, tal como dibuja el PNG -- no abajo */
	text-decoration: none;
}

.woocommerce-tabs .woocommerce-Tabs-panel {
	padding: 2.5rem 0;
	max-width: 51rem;
	font-size: 1.041875rem;
	line-height: 1.5;
	color: var(--ec-texto-secundario);
}

/* ==========================================================================
   8. Nada de stock/valoración-rápida/carrito/etiquetas en la ficha
      (EC_MODO_CATALOGO ya quita el carrito por hook/CSS en functions.php
      -- lo de aquí es 100% de mymedi, sin relación con ese interruptor).
   ========================================================================== */

/* mymedi pinta "Availability: In Stock" (p.stock) y el enlace "Add your
   review"/"Escribe una reseña" (.woocommerce-product-rating) ANTES del
   título -- ninguno de los dos está en el diseño ("no muestres el stock",
   ni valoración rápida dibujada). ".summary" de más: mymedi vuelve a
   forzar "display" sobre esa .stock con más clases que un simple
   "body.single-product .stock" (mismo patrón que el resto del archivo). */
body.single-product div.product .summary .stock,
body.single-product div.product .summary .woocommerce-product-rating,
body.single-product .tagged_as,
body.single-product .meta-content {
	display: none; /* .meta-content: mymedi_product_bottom_content() repite el SKU suelto ("SKU: 1026") después de los botones -- duplica "ID del producto:" del meta propio, y no está en el diseño */
}