/*!
Theme Name:         Engranaje Corporativo
Theme URI:          https://engranajecorporativo.com
Description:        Tema hijo de mymedi (ThemeSky) para el rediseño de Engranaje Corporativo. Aporta la capa visual (marca, header transparente sobre hero, footer de 4 columnas) sin tocar header.php ni footer.php del padre — esos siguen trayendo el carrito, el menú móvil y el sticky. Ver functions.php: mymedi_register_scripts() encola 'mymedi-style' con el style.css del tema ACTIVO (el de este hijo); ec_apuntar_mymedi_style_al_padre() lo reapunta al style.css del padre para que sí cargue.
Template:            mymedi
Version:             1.4.2
Requires at least:   7.1
Requires PHP:        8.2
Text Domain:         engranaje-hijo
*/

/* ==========================================================================
   AVISO — cómo se carga el CSS del padre y el de este hijo
   ==========================================================================
   mymedi encola 'mymedi-style' con get_stylesheet_uri() (framework/
   theme_functions.php::mymedi_register_scripts(), prioridad 1000) — con
   este hijo activo, esa función de WordPress devuelve el style.css DEL
   HIJO, no el del padre. functions.php::ec_apuntar_mymedi_style_al_padre()
   (prioridad 1001) corrige el src de ese mismo handle para que cargue el
   style.css real del padre (510 KB, la maquetación base del tema) en su
   lugar. El style.css del hijo (este archivo) se encola aparte, con su
   propio handle ('ec-estilos-hijo', ec_encolar_estilos_hijo() en
   functions.php) — los dos cargan, cada uno una sola vez. Detalle
   completo, incluido el CSS dinámico del panel Redux, en la sección 1 de
   functions.php.
   ========================================================================== */

/* ==========================================================================
   Variables de marca
   ==========================================================================
   Colores extraídos de los PSD por muestreo de píxel — son exactos.
   --ec-naranja-hover es la única que no viene de muestreo: es un tono de
   hover sugerido sobre el naranja de marca, no un valor verificado.

   Regla de todo el archivo: los hex viven únicamente aquí, dentro de
   :root. Fuera de este bloque no se escriben hex sueltos — siempre
   var(--ec-*). Así, si la marca cambia un color, cambia en un solo sitio.
   ========================================================================== */
:root {
	/* Marca */
	--ec-naranja: #FF4422;
	--ec-naranja-hover: #E63A1B; /* sugerido, no muestreado del PSD */
	--ec-negro-footer: #1C1C1C;
	/* NO usar en texto -- salió de muestrear bordes suavizados en PNG
	   (antialiasing), no es el color real del PSD. Las páginas de servicio
	   y, desde esta ronda, Industrias usan los tokens de la sección "Texto
	   de Servicios" más abajo, convertidos del PSD en sRGB; la regla
	   genérica h1-h6 de este archivo también se corrigió a esos tokens.
	   Sigue vivo solo por .ec-servicio-hero (más abajo): el color sólido de
	   respaldo cuando el campo de imagen del hero está vacío, que no viene
	   de ninguna medición de texto y no formaba parte de este encargo. Si
	   ese último uso se quita algún día, esta variable ya no hace falta. */
	--ec-negro-titulares: #111111;

	/* Fondo de las páginas del CATÁLOGO únicamente (tienda, categoría,
	   producto) — no del resto del sitio. El valor anterior (#F8F8F8) fue
	   un error de medición: salió de muestrear colores ya redondeados: al
	   remuestrear sin redondear, el catálogo da #FAFAFA y Servicios,
	   Contacto, Nosotros y Blog dan blanco puro (--ec-blanco). Esas
	   secciones no deben depender de este valor — ver background-color en
	   .ec-servicio-contenedor más abajo. */
	--ec-fondo-claro: #FAFAFA;
	--ec-gris-lineas: #E8E8E8;

	/* Neutro de apoyo (blanco). No es un color "de marca" muestreado, pero
	   vive aquí también para cumplir la regla de "ningún hex fuera de :root". */
	--ec-blanco: #FFFFFF;

	/* --------------------------------------------------------------------
	   Texto de Servicios -- convertidos del PSD (Adobe RGB) a sRGB, ver
	   adobeASrgb() en preview/real/verificar-psd.js. Usados por las tres
	   páginas de servicio (Mantenimiento Especializado, Capacitación
	   Técnica y Operativa, Venta de Refacciones) y, desde esta ronda,
	   también por Industrias -- ya no usa --ec-gris-texto (retirado: salía
	   de muestrear un PNG con antialiasing, y con esta ronda dejó de
	   tener ningún uso real en el tema).
	   -------------------------------------------------------------------- */
	--ec-texto: #1C1C1C; /* títulos y texto de cuerpo */
	--ec-texto-lista: #373737; /* iconos y listas */
	--ec-texto-secundario: #6A6A6A; /* dirección, correo y teléfonos de la tarjeta de contacto */
	--ec-negro-oficina: #000000; /* nombres de oficina en la tarjeta de contacto -- el PSD los da en negro puro, no en --ec-texto */
	--ec-separador: #FF664A; /* separadores verticales de la banda de cierre */

	/* Tipografía — Outfit (Google Font, SIL OFL), encolada desde
	   functions.php::ec_enqueue_estilos(). Pesos 300/400/500/600/700. */
	--ec-fuente-base: 'Outfit', sans-serif;
	--ec-peso-light: 300;
	--ec-peso-regular: 400;
	--ec-peso-medium: 500;
	--ec-peso-semibold: 600;
	--ec-peso-bold: 700;
}

/* ==========================================================================
   Base tipográfica
   ==========================================================================
   Se aplica también a .woocommerce a propósito, no solo a body: si no, la
   tienda se queda con la tipografía de mymedi mientras el resto del sitio
   ya usa Outfit, y el salto de una tipografía a otra entre catálogo y
   páginas de contenido se nota.
   ========================================================================== */
body,
.woocommerce {
	font-family: var(--ec-fuente-base);
	font-weight: var(--ec-peso-regular);
}

h1,
h2,
h3,
h4,
h5,
h6,
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.woocommerce h5,
.woocommerce h6 {
	font-family: var(--ec-fuente-base);
	font-weight: var(--ec-peso-semibold);
	/* var(--ec-texto), no --ec-negro-titulares: ese token salió de
	   muestrear un PNG con antialiasing (ver su aviso en :root) -- esta
	   regla genérica es la que pintaba los títulos de Industrias con ese
	   valor impreciso antes de que industrias.css la corrigiera por encima
	   con su propio color (mismo criterio que .ec-servicio-titulo, que ya
	   hacía este mismo override). */
	color: var(--ec-texto);
}

/* ==========================================================================
   Tipografía y paleta reales de mymedi — en todo el sitio, no solo lo nuevo
   ==========================================================================
   Decisión de cliente: la fuente (Outfit) y la paleta nueva (naranja) van en
   TODA la web, también en las páginas que todavía conservan el diseño viejo
   de mymedi — no solo Servicios/Industrias. La sección "Base tipográfica" de
   arriba solo cubre body/h1-h6; el panel Redux del tema pone Bai Jamjuree
   con selectores propios en el menú, negritas, botones, etc. (font-family),
   y el naranja/verde azulado viejo en 30+ reglas (color/background/border).
   Sin esto, esas piezas se quedan en la tipografía y los colores viejos.
   ========================================================================== */
/* ===== GENERADO POR generar_tipografia_color.py -- INICIO (no editar a mano) ===== */
/* Fuente: preview/real/4-mymedi-dinamico.css (CSS que genera el panel Redux
   de mymedi, descargado del sitio en vivo -- ver el encargo). Selectores
   exactos, no transcritos a mano: para regenerar tras un cambio en ese panel,
   correr `python3 herramientas/generar_tipografia_color.py` desde _desarrollo/
   -- reescribe esta sección completa, entre los marcadores de arriba y abajo. */

/* --- B1. Tipografía: 12 reglas font-family de mymedi, mismos selectores --- */
html,
body,
label,
input,
textarea,
keygen,
select,
button,
form table label,
.ts-button.fa,
li.fa,
h3.product-name,
.woocommerce ul.cart_list li a,
.woocommerce ul.product_list_widget li a,
.font-body,
body table.compare-list,
.ts-product-brand-wrapper .item .heading-title {
	font-family: var(--ec-fuente-base);
}

::-webkit-input-placeholder {
	font-family: var(--ec-fuente-base);
}

:-moz-placeholder {
	font-family: var(--ec-fuente-base);
}

::-moz-placeholder {
	font-family: var(--ec-fuente-base);
}

:-ms-input-placeholder {
	font-family: var(--ec-fuente-base);
}

strong,
.hightlight,
.price,
.cats-portfolio a,
.woocommerce div.product .ts-shortcode p.price ins,
.woocommerce div.product .ts-shortcode span.price ins,
.ul-style-none li,
.ts-search-result-container .view-all-wrapper a,
.product-label-rectangle .product .product-label .onsale,
.product-label-rectangle .product .product-label .new,
.product-label-rectangle .product .product-label .featured,
.product-label-rectangle .product .product-label .out-of-stock,
.ts-list-of-product-categories-wrapper h3.heading-title,
.widget_product_categories ul.product-categories > li > a,
.footer-container .vc_custom_heading,
.counter-wrapper > div,
.widget_categories > ul > li,
.widget_categories ul li.current-cat-ancestor > a,
.widget_categories ul li.current-cat-parent > a,
.widget_nav_menu ul > li,
.widget_pages ul li,
.ts-product-categories-widget > ul > li > a,
.meta-content .sku-wrapper > span:first-child,
.meta-content .brands-link > span:first-child,
.meta-content .tags-link > span:first-child,
.meta-content .cats-link > span:first-child,
.woocommerce-cart .woocommerce-cart-form .woocommerce-Price-amount,
.woocommerce-cart .cart-collaterals .woocommerce-Price-amount,
.woocommerce-checkout .woocommerce-Price-amount,
.woocommerce table.shop_table.order_details .woocommerce-Price-amount,
.woocommerce ul#shipping_method .amount,
.meta-content .portfolio-info > span:first-child,
.ts-banner .banner-wrapper h2,
.yith-wfbt-section .total_price_label,
.woocommerce-grouped-product-list-item__price,
.woocommerce-tabs .panel .block-image-2-columns li a {
	font-family: var(--ec-fuente-base);
}

.ts-header .menu-wrapper,
.ts-header .menu-wrapper .sub-menu h1,
.ts-header .menu-wrapper .sub-menu h2,
.ts-header .menu-wrapper .sub-menu h3:not(.product-name),
.ts-header .menu-wrapper .sub-menu h4,
.ts-header .menu-wrapper .sub-menu h5,
.ts-header .menu-wrapper .sub-menu h6,
.ts-header .menu-wrapper nav > ul.menu > li,
.ts-header .menu-wrapper nav > ul > li,
.ts-header .menu-wrapper li.category-bold .sub-menu .ts-list-of-product-categories-wrapper ul li,
.ts-header .menu-wrapper li.category-bold .sub-menu .ts-list-of-product-categories-wrapper + .ts-button-wrapper .ts-button,
.mobile-menu-wrapper .ts-menu ul li:not(.font-body) {
	font-family: var(--ec-fuente-base);
}

.ts-header .menu-wrapper .sub-menu,
.ts-header .menu-wrapper nav > ul.menu .sub-menu li,
.ts-header .menu-wrapper nav > ul .sub-menu li,
.mobile-menu-wrapper .ts-menu ul li.font-body,
.mobile-menu-wrapper .ts-menu ul li .sub-menu {
	font-family: var(--ec-fuente-base);
}

a.button,
button,
input[type^="submit"],
.ts-button,
a.button-readmore,
.ts-banner-button a,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce a.button:disabled[disabled],
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled],
.woocommerce #respond input#submit,
.shopping-cart p.buttons a,
.woocommerce .wishlist_table .product-add-to-cart a,
.ts-header .ts-megamenu .ts-list-of-product-categories-wrapper .list-categories > ul:first-child,
.woocommerce div.product .quantity label.ts-screen-reader-text,
.woocommerce div.product form.cart .variations label,
.more-less-buttons a,
.ts-product-feature,
body table.compare-list .add-to-cart td a,
body table.compare-list .add-to-cart td a:not(.unstyled_button),
.meta-wrapper-2 .quantity .screen-reader-text,
input[type="submit"].dokan-btn,
a.dokan-btn,
.dokan-btn {
	font-family: var(--ec-fuente-base);
}

.font-bold,
.ul-style.font-bold li,
.ul-style-none.font-bold li,
.tagcloud a,
.tags-link a,
.footer-container a.button.button-light,
.ts-shortcode .load-more-wrapper .load-more,
.ts-shop-load-more .load-more,
.ts-portfolio-wrapper .cats-portfolio > a,
.entry-meta-middle .date-time,
.counter-wrapper > div .number > span,
.meta-wrapper .stock-quantity > span,
blockquote .author,
blockquote cite,
.author-info .author-role,
.vc_custom_heading.font-normal strong,
.mailchimp-subscription .subscribe-email .button,
.list-categories ul.tabs li.current,
.column-tabs ul.tabs li.current,
body.wpb-js-composer .vc_general.vc_tta-tabs .vc_tta-tab.vc_active,
.commentlist li.comment .entry-meta-top,
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta,
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta strong,
.woocommerce .widget_price_filter .price_slider_amount .button,
.woocommerce .woocommerce-widget-layered-nav-dropdown .woocommerce-widget-layered-nav-dropdown__submit,
.woocommerce-page .widget_price_filter .price_slider_amount .button,
.woocommerce-tabs table tbody > tr > td,
.comment-meta .edit,
.comment-meta .reply,
.woocommerce-Address-title a.edit,
.logged-in-as > a,
h3.font-normal strong,
.widget_categories ul ul li.current-cat,
.widget_categories ul ul li.current-cat-ancestor > a,
.widget_categories ul ul li.current-cat-parent > a,
.ts-product-categories-widget ul ul li.current > a,
.ts-product-categories-widget ul li.cat-parent.active > a,
#main-content .woocommerce.columns-1 > .products .product .meta-wrapper > .product-name,
#main-content .woocommerce:not(.columns-1) > .products .product .meta-wrapper > .product-name:not(:first-child),
.woocommerce #review_form #respond .comment-reply-title,
.filter-widget-area-button a,
.woocommerce .woocommerce-ordering .orderby-current,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce #review_form #respond #commentform label,
.woocommerce table.shop_table th,
.cart-collaterals .cart_totals table.shop_table tbody tr.shipping td:before,
.cart-collaterals .cart_totals table.shop_table tbody tr.cart-subtotal td:before,
.cart-collaterals .cart_totals table.shop_table tbody tr.order-total td:before,
.woocommerce table.shop_table_responsive tr td::before,
.woocommerce-page table.shop_table_responsive tr td::before,
.wishlist_table .product-price,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins,
table.my_account_orders .amount,
table.my_account_orders .woocommerce-orders-table__cell-order-number,
.widget_price_filter .price_slider_amount .button,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active,
.woocommerce div.product div.summary .availability,
.woocommerce div.product div.summary form.cart .variations select,
.ts-product-attribute div.option:not(.color) a,
div.product .single-navigation > a > span,
.woocommerce div.product .yith-wfbt-items .price > .amount,
div.product .yith-wfbt-section .yith-wfbt-form .yith-wfbt-items li span.checkboxbutton.checked + a,
div.product .yith-wfbt-section .yith-wfbt-form .yith-wfbt-items li span.checkboxbutton.checked + .product-name,
.ts-write-a-review-button,
.yith-wfbt-section .total_price,
.ts-portfolio-wrapper .filter-bar li.current,
.product-filter-by-brand ul li.selected label,
.product-filter-by-price ul li.chosen label,
.product-filter-by-availability ul li input[checked="checked"] + label,
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item--chosen a,
.header-top .header-left strong,
.wishlist_table .amount,
.woocommerce-error strong,
.woocommerce-info strong,
.woocommerce-message strong,
.woocommerce-error a,
.woocommerce-info a,
.woocommerce-message a,
.ts-banner .banner-wrapper .discount,
.meta-wrapper-2 > .price {
	font-family: var(--ec-fuente-base);
}

header .logo-wrapper .logo a,
div.product .yith-wfbt-section .yith-wfbt-images td:not(:last-child) > a:after {
	font-family: var(--ec-fuente-base);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.woocommerce-cart .cart-collaterals .cart_totals > h2 {
	font-family: var(--ec-fuente-base);
}

/* --- B2. Paleta: 31 reglas de color de mymedi, mismos selectores y propiedades --- */
a:hover,
a:active,
a:focus,
.ts-header .menu-wrapper ul li.nopd:hover:before,
.ts-header .menu-wrapper ul li.nopd:hover > a:not(.button),
.woocommerce-MyAccount-content a:hover {
	color: var(--ec-naranja);
}

.counter-wrapper > div .number > span,
.sale-label > .wpb_wrapper {
	background: var(--ec-naranja);
}

.my-wishlist-wrapper > a .wishlist-number,
.shopping-cart-wrapper .cart-control .cart-number {
	background: var(--ec-naranja-hover);
}

.header-v5 .my-wishlist-wrapper > a .wishlist-number,
.header-v5 .shopping-cart-wrapper .cart-control .cart-number {
	background: var(--ec-naranja);
}

.shopping-cart-wrapper svg path,
.my-wishlist-wrapper svg path,
.search-button svg path,
.my-account-wrapper svg path,
.header-transparent.header-text-light .header-template > div:not(.is-sticky) .shopping-cart-wrapper:hover svg path,
.header-transparent.header-text-light .header-template > div:not(.is-sticky) .my-wishlist-wrapper:hover svg path,
.header-transparent.header-text-light .header-template > div:not(.is-sticky) .search-button:hover svg path,
.header-transparent.header-text-light .header-template > div:not(.is-sticky) .my-account-wrapper:hover svg path {
	stroke: var(--ec-naranja);
}

.header-transparent.header-text-light .header-template > div:not(.is-sticky) .ic-mobile-menu-button:hover svg path {
	fill: var(--ec-naranja);
}

.hightlight,
.secondary-color,
.secondary-color h1,
.secondary-color h2,
.secondary-color h3,
.secondary-color h4,
.secondary-color h5,
.secondary-color h6,
.secondary-color .h1,
.secondary-color .h2,
.secondary-color .h3,
.secondary-color .h4,
.secondary-color .h5,
.secondary-color .h6,
.ul-style-none.secondary-color li,
.ul-style.icon-secondary li:before,
.ol-style.icon-secondary li:before,
.header-v5 .ts-store-notice,
.search-button:hover .icon:before,
.shopping-cart-wrapper:hover a > .ic-cart:before,
.ts-tiny-account-wrapper:hover .account-control:before,
.my-wishlist-wrapper:hover a:before,
.ts-floating-sidebar .close:hover:after,
.ts-popup-modal .close:hover,
body #cboxClose:hover:after,
html body > h1 a.close:hover,
#ts-product-360-modal .close:hover:after,
#ts-quickshop-modal span.close:hover,
#ts-add-to-cart-popup-modal span.close:hover,
body table.compare-list tr.remove td > a:hover,
.woocommerce table.shop_table .product-remove:hover a:before,
.cart_list li .cart-item-wrapper a.remove:hover:before,
.woocommerce .widget_shopping_cart .cart_list li a.remove:hover:before,
.woocommerce.widget_shopping_cart .cart_list li a.remove:hover:before,
body table.compare-list tr.remove td > a:hover .remove:before,
body .pp_pic_holder a.pp_close:hover,
.ts-header .menu-wrapper ul li:hover,
.header-v5 .ts-header .menu-wrapper ul li:hover,
.woocommerce div.product .summary > form.cart .button.single_add_to_cart_button.loading:after,
.woocommerce #main-content.ts-col-24 div.product.summary-2-columns:not(.images-summary-background) .summary-column-2 .button.loading:after,
.header-language a:hover,
.header-currency a:hover,
body .wpml-ls-legacy-dropdown a:hover,
body .wpml-ls-legacy-dropdown a:focus,
body .wpml-ls-legacy-dropdown .wpml-ls-current-language:hover>a,
body .wpml-ls-legacy-dropdown-click a:hover,
body .wpml-ls-legacy-dropdown-click a:focus,
body .wpml-ls-legacy-dropdown-click .wpml-ls-current-language:hover>a,
.my-account-wrapper a:hover,
.shopping-cart-wrapper a:hover,
h3.product-name:hover,
.search-button:hover:before,
.header-v5 .header-language a:hover,
body.header-v5 .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:hover,
body.header-v5 .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:hover,
.header-v5 .header-currency a:hover,
.widget_categories li.current-cat > a,
.widget_categories ul li.current-cat-ancestor > a,
.widget_categories ul li.current-cat-parent > a,
.ts-product-categories-widget ul li.current,
.ts-product-categories-widget li.cat-parent.active > a,
.yith-wfbt-section .total_price,
.yith-wfbt-section .total_price .woocommerce-Price-amount,
#main-content .woocommerce.columns-1 .product .meta-wrapper-2 .price,
.woocommerce div.product .summary .price,
.meta-content .cats-link a:hover,
.meta-content .tags-link a:hover,
.product .product-brands a:hover,
.woocommerce .products .product .product-categories a:hover,
.product-filter-by-brand ul li:hover label,
.product-filter-by-availability ul li:hover label,
.product-filter-by-price ul li:hover label,
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item--chosen a:hover,
.woocommerce div.product div.summary .yith-wcwl-add-to-wishlist a:hover,
.woocommerce div.product div.summary .yith-wcwl-add-to-wishlist a:hover .ts-tooltip,
.woocommerce div.product div.summary .yith-wcwl-add-to-wishlist a:hover:before,
.woocommerce div.product div.summary .yith-wcwl-add-to-wishlist a:hover .ts-tooltip:before,
.woocommerce div.product div.summary a.compare:hover,
.woocommerce div.product div.summary a.compare:hover:before,
.woocommerce table.compare-list a.button.loading:after,
.woocommerce div.product div.summary a.compare:hover .ts-tooltip,
.woocommerce div.product div.summary a.compare:hover .ts-tooltip:before,
.woocommerce.main-products.columns-1 > .products .product-group-button-meta > .button-in:hover a,
.woocommerce.main-products.columns-1 > .products .product-group-button-meta > .button-in:hover a:before,
.woocommerce.main-products.columns-1 > .products .product-group-button-meta > .button-in:hover .ts-tooltip,
.woocommerce.main-products.columns-1 > .products .product-group-button-meta > .button-in:hover .ts-tooltip:before {
	color: var(--ec-naranja);
}

.woocommerce > form.checkout #order_review,
.product-filter-by-color ul li a:before,
.ts-product-attribute div.option.color a:before,
.product-wrapper .color-swatch > div:before,
div.product .yith-wfbt-section .yith-wfbt-form,
.woocommerce-account .woocommerce-MyAccount-navigation li:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active {
	border-color: var(--ec-naranja);
}

.woocommerce-page.archive .woocommerce > .ts-product.ts-slider .products .owl-stage-outer,
.woocommerce .ts-product-deals-wrapper:not(.ts-slider) .products,
.woocommerce .ts-product-deals-wrapper.ts-slider .products .owl-stage-outer,
.woocommerce.columns-1 .ts-product-deals-wrapper.ts-slider .products,
.entry-content .woocommerce .ts-product:not(.ts-slider) .products,
.entry-content .woocommerce .ts-product.ts-slider .products .owl-stage-outer,
.product-style-3 #main-content > .site-content > .woocommerce > .ts-shortcode.ts-product .owl-stage-outer:before,
.product-style-3 #main-content > .site-content > .woocommerce > .ts-shortcode.ts-product .owl-stage-outer:after,
.product-style-3 .woocommerce .ts-product-deals-wrapper .products .owl-stage-outer:after,
.product-style-3 .woocommerce .ts-product-deals-wrapper .products .owl-stage-outer:before {
	border-color: var(--ec-naranja) !important;
}

.product-style-3 #main-content > .site-content > .woocommerce > .ts-shortcode.ts-product .product:not(.product-category),
.product-style-3 .ts-product-deals-wrapper.ts-slider .products .product:not(.product-category) {
	border-left-color: var(--ec-naranja) !important;
}

.rtl.product-style-3 #main-content > .site-content > .woocommerce > .ts-shortcode.ts-product .product:not(.product-category) {
	border-right-color: var(--ec-naranja) !important;
}

nav > ul.menu li > a .menu-label:before,
nav > ul.menu ul.sub-menu li a:hover,
.ts-menu ul li.current-menu-item > a,
.ts-menu ul li.current_page_parent > a,
.ts-menu ul li.current-menu-parent > a,
.ts-menu ul li.current_page_item > a,
.ts-menu ul li.current-menu-ancestor > a,
.ts-menu ul li.current-page-ancestor > a,
.ts-menu ul li.current-product_cat-ancestor > a,
.ts-menu ul li.current-menu-item .ts-menu-drop-icon,
.ts-menu ul li.current_page_parent .ts-menu-drop-icon,
.ts-menu ul li.current-menu-parent .ts-menu-drop-icon,
.ts-menu ul li.current_page_item .ts-menu-drop-icon,
.ts-menu ul li.current-menu-ancestor .ts-menu-drop-icon,
.ts-menu ul li.current-page-ancestor .ts-menu-drop-icon,
.ts-menu ul li.current-product_cat-ancestor .ts-menu-drop-icon,
.ts-menu ul .sub-menu li.current-menu-item > a,
.ts-menu ul .sub-menu li.current_page_parent > a,
.ts-menu ul .sub-menu li.current-menu-parent > a,
.ts-menu ul .sub-menu li.current_page_item > a,
.ts-menu ul .sub-menu li.current-menu-ancestor > a,
.ts-menu ul .sub-menu li.current-page-ancestor > a,
.ts-menu ul .sub-menu li.current-product_cat-ancestor > a,
.ts-menu ul .sub-menu li.current-menu-item .ts-menu-drop-icon,
.ts-menu ul .sub-menu li.current_page_parent .ts-menu-drop-icon,
.ts-menu ul .sub-menu li.current-menu-parent .ts-menu-drop-icon,
.ts-menu ul .sub-menu li.current_page_item .ts-menu-drop-icon,
.ts-menu ul .sub-menu li.current-menu-ancestor .ts-menu-drop-icon,
.ts-menu ul .sub-menu li.current-page-ancestor .ts-menu-drop-icon,
.ts-menu ul .sub-menu li.current-product_cat-ancestor .ts-menu-drop-icon,
.ts-floating-sidebar a:hover {
	color: var(--ec-naranja);
}

.menu-sub-label,
.product-style-3.woocommerce-page.archive .woocommerce > .ts-product.ts-slider .products .owl-stage-outer .product .product-wrapper:before,
.product-style-3 .woocommerce .ts-product-deals-wrapper:not(.ts-slider) .products .product .product-wrapper:before,
.product-style-3 .woocommerce .ts-product-deals-wrapper.ts-slider .products .owl-stage-outer .product .product-wrapper:before,
.product-style-3 .woocommerce.columns-1 .ts-product-deals-wrapper.ts-slider .products .product .product-wrapper:before,
.product-style-3 .entry-content .woocommerce .ts-product:not(.ts-slider) .products .product .product-wrapper:before,
.product-style-3 .entry-content .woocommerce .ts-product.ts-slider .products .owl-stage-outer .product .product-wrapper:before {
	background-color: var(--ec-naranja);
}

.menu-sub-label:before {
	border-left-color: var(--ec-naranja);
	border-right-color: var(--ec-naranja);
}

a.button,
button,
input[type^="submit"],
.ts-button,
a.button-readmore,
.ts-banner-button a,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit,
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order,
.dropdown-footer > a.button.view-cart:hover,
.woocommerce .dropdown-footer > a.button.view-cart:hover,
.shopping-cart p.buttons a,
.woocommerce div.product .summary a.compare,
.woocommerce div.product .summary .yith-wcwl-add-to-wishlist a,
.more-less-buttons a,
body table.compare-list .add-to-cart td a,
body table.compare-list .add-to-cart td a:not(.unstyled_button),
input[type="submit"].dokan-btn,
a.dokan-btn,
.dokan-btn,
.button.button-light:hover,
a.button.button-light:hover,
.product-category .meta-wrapper a.button:hover,
.ts-shortcode .shop-more a.button:hover,
.ts-shortcode .show-all-button a.button:hover,
.woocommerce div.product div.summary form.cart .button,
.woocommerce .wishlist_table .product-add-to-cart a:hover,
.woocommerce .wishlist_table .product-add-to-cart a.alt:hover,
.product-style-3 .ts-megamenu-container .ts-shortcode .products .product .meta-wrapper-2 .loop-add-to-cart .button,
.product-style-4 .ts-megamenu-container .ts-shortcode .products .product .meta-wrapper-2 .loop-add-to-cart .button,
.woocommerce .widget_shopping_cart .buttons a:first-child:hover,
.woocommerce.widget_shopping_cart .buttons a:first-child:hover,
.woocommerce .wc-proceed-to-checkout .button.checkout-button {
	border-color: var(--ec-naranja);
	background: var(--ec-naranja);
}

a.button:hover,
button:hover,
input[type^="submit"]:hover,
.ts-button:hover,
a.button-readmore:hover,
.ts-banner-button a:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit:hover,
.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover,
.dropdown-footer > a.button.view-cart,
.woocommerce .dropdown-footer > a.button.view-cart,
.shopping-cart p.buttons a:hover,
.woocommerce div.product .summary a.compare:hover,
.woocommerce div.product .summary .yith-wcwl-add-to-wishlist a:hover,
.more-less-buttons a:hover,
body table.compare-list .add-to-cart td a:hover,
body table.compare-list .add-to-cart td a:not(.unstyled_button):hover,
.woocommerce div.product div.summary form.cart .button:hover,
.product-style-3 .ts-megamenu-container .ts-shortcode .products .product .meta-wrapper-2 .loop-add-to-cart .button:hover,
.product-style-4 .ts-megamenu-container .ts-shortcode .products .product .meta-wrapper-2 .loop-add-to-cart .button:hover,
.woocommerce .widget_shopping_cart .buttons a:first-child,
.woocommerce.widget_shopping_cart .buttons a:first-child,
input[type="submit"].dokan-btn:hover,
a.dokan-btn:hover,
.dokan-btn:hover,
.woocommerce .wc-proceed-to-checkout .button.checkout-button:hover {
	border-color: var(--ec-naranja);
	color: var(--ec-naranja);
}

.ts-button-wrapper.button-text a.ts-button:hover,
.ts-header .menu-wrapper ul li:hover .ts-button-wrapper.button-text a.ts-button:hover {
	color: var(--ec-naranja);
}

.product-style-2 .product-group-button > div.loop-add-to-cart a,
.woocommerce.main-products:not(.columns-1) > .products .product-group-button-meta > div.loop-add-to-cart a {
	border-color: var(--ec-naranja) !important;
	background: var(--ec-naranja) !important;
}

.product-style-2 .product-group-button > div.loop-add-to-cart a:hover,
.woocommerce.main-products:not(.columns-1) > .products .product-group-button-meta > div.loop-add-to-cart a:hover {
	color: var(--ec-naranja) !important;
	border-color: var(--ec-naranja) !important;
}

.product-style-2 .product-group-button > div.loop-add-to-cart .button.loading:after,
.product-group-button-meta > div.loop-add-to-cart .button.loading:after {
	color: var(--ec-naranja);
}

body.wpb-js-composer .vc_tta.vc_general .vc_tta-panel-title>a,
div.product .yith-wfbt-section .yith-wfbt-form .yith-wfbt-items li span.checkboxbutton:before {
	background-color: var(--ec-naranja);
}

.ts-store-notice {
	background: var(--ec-naranja);
}

.ts-header .header-middle .header-right .menu-wrapper nav > ul.menu > li:first-child:hover,
.ts-header .header-middle .header-right .menu-wrapper nav > ul > li:first-child:hover {
	color: var(--ec-naranja);
}

.group_table ins,
.price ins,
.product-price ins,
.ts-shortcode .price ins,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins,
.price ins .woocommerce-Price-amount,
.yith-wfbt-items .price ins,
.yith-wfbt-items .price ins .woocommerce-Price-amount {
	color: var(--ec-naranja);
}

.woocommerce p.stars:hover a,
.woocommerce p.stars.selected a,
.woocommerce .star-rating span:before,
.ts-testimonial-wrapper .rating span:before,
blockquote .rating span:before {
	color: var(--ec-naranja);
}

.woocommerce .product .product-label .onsale {
	background: var(--ec-naranja);
}

.woocommerce .product .product-label .new {
	background: var(--ec-naranja-hover);
}

.mobile-menu-wrapper .ic-mobile-menu-close-button svg path,
.menu-mobile-active .ts-group-icons-header .ts-group-meta-icon-toggle svg path {
	fill: var(--ec-naranja);
}

@media only screen and (min-width: 1279px) {
	.product-group-button > div a:hover:after,
	.woocommerce .product-group-button a.button.loading:hover:before,
	.woocommerce .product-group-button button.button.loading:hover:before,
	.woocommerce .product-group-button input.button.loading:hover:before,
	.woocommerce .product-group-button a.button.loading:hover:after,
	.woocommerce .product-group-button button.button.loading:hover:after,
	.woocommerce .product-group-button input.button.loading:hover:after,
	.woocommerce .product-group-button a.button.added:hover:before,
	.woocommerce .product-group-button button.button.added:hover:before,
	.woocommerce .product-group-button input.button.added:hover:before,
	.product-group-button-meta > div a:hover:after,
	.woocommerce .product-group-button-meta a.button.loading:hover:before,
	.woocommerce .product-group-button-meta button.button.loading:hover:before,
	.woocommerce .product-group-button-meta input.button.loading:hover:before,
	.woocommerce .product-group-button-meta a.button.loading:hover:after,
	.woocommerce .product-group-button-meta button.button.loading:hover:after,
	.woocommerce .product-group-button-meta input.button.loading:hover:after,
	.woocommerce .product-group-button-meta a.button.added:hover:before,
	.woocommerce .product-group-button-meta button.button.added:hover:before,
	.woocommerce .product-group-button-meta input.button.added:hover:before {
		color: var(--ec-naranja);
	}
}

input[type="submit"].dokan-btn-default,
a.dokan-btn-default,
.dokan-btn-default,
body .wp-core-ui .button.button-primary {
	border-color: var(--ec-naranja);
	background: var(--ec-naranja);
}

input[type="submit"].dokan-btn-default:hover,
a.dokan-btn-default:hover,
.dokan-btn-default:hover,
input[type="submit"].dokan-btn-default:focus,
a.dokan-btn-default:focus,
.dokan-btn-default:focus,
input[type="submit"].dokan-btn-default:active,
a.dokan-btn-default:active,
.dokan-btn-default:active,
input[type="submit"].dokan-btn-default.active,
a.dokan-btn-default.active,
.dokan-btn-default.active,
.open .dropdown-toggleinput[type="submit"].dokan-btn-default,
.open .dropdown-togglea.dokan-btn-default,
.open .dropdown-toggle.dokan-btn-default,
body .wp-core-ui .button.button-primary.focus,
body .wp-core-ui .button.button-primary.hover,
body .wp-core-ui .button.button-primary:focus,
body .wp-core-ui .button.button-primary:hover,
input[type="submit"].dokan-btn-default.disabled,
a.dokan-btn-default.disabled,
.dokan-btn-default.disabled,
input[type="submit"].dokan-btn-default[disabled],
a.dokan-btn-default[disabled],
.dokan-btn-default[disabled],
fieldset[disabled] input[type="submit"].dokan-btn-default,
fieldset[disabled] a.dokan-btn-default,
fieldset[disabled] .dokan-btn-default,
input[type="submit"].dokan-btn-default.disabled:hover,
a.dokan-btn-default.disabled:hover,
.dokan-btn-default.disabled:hover,
input[type="submit"].dokan-btn-default[disabled]:hover,
a.dokan-btn-default[disabled]:hover,
.dokan-btn-default[disabled]:hover,
fieldset[disabled] input[type="submit"].dokan-btn-default:hover,
fieldset[disabled] a.dokan-btn-default:hover,
fieldset[disabled] .dokan-btn-default:hover,
input[type="submit"].dokan-btn-default.disabled:focus,
a.dokan-btn-default.disabled:focus,
.dokan-btn-default.disabled:focus,
input[type="submit"].dokan-btn-default[disabled]:focus,
a.dokan-btn-default[disabled]:focus,
.dokan-btn-default[disabled]:focus,
fieldset[disabled] input[type="submit"].dokan-btn-default:focus,
fieldset[disabled] a.dokan-btn-default:focus,
fieldset[disabled] .dokan-btn-default:focus,
input[type="submit"].dokan-btn-default.disabled:active,
a.dokan-btn-default.disabled:active,
.dokan-btn-default.disabled:active,
input[type="submit"].dokan-btn-default[disabled]:active,
a.dokan-btn-default[disabled]:active,
.dokan-btn-default[disabled]:active,
fieldset[disabled] input[type="submit"].dokan-btn-default:active,
fieldset[disabled] a.dokan-btn-default:active,
fieldset[disabled] .dokan-btn-default:active,
input[type="submit"].dokan-btn-default.disabled.active,
a.dokan-btn-default.disabled.active,
.dokan-btn-default.disabled.active,
input[type="submit"].dokan-btn-default[disabled].active,
a.dokan-btn-default[disabled].active,
.dokan-btn-default[disabled].active,
fieldset[disabled] input[type="submit"].dokan-btn-default.active,
fieldset[disabled] a.dokan-btn-default.active,
fieldset[disabled] .dokan-btn-default.active {
	border-color: var(--ec-naranja);
	color: var(--ec-naranja);
}
/* ===== GENERADO POR generar_tipografia_color.py -- FIN ===== */

/* ==========================================================================
   Header — geometría del PSD y transparencia sobre el hero
   ==========================================================================
   HALLAZGO (verificado en vivo, 9 sep 2026): mymedi trae el header
   transparente de FORMA NATIVA -- estas son sus reglas reales, copiadas de
   su CSS en vivo:

     .header-transparent .header-template {
       position: absolute; z-index: 993; left: 0; right: 0; top: 0;
     }
     .header-transparent .header-template > div:not(.is-sticky) .header-middle,
     .header-transparent .header-template > .header-middle {
       background: transparent;
     }
     .header-transparent .header-template > div:not(.is-sticky) .header-middle:after,
     .header-transparent .header-template > .header-middle:after {
       display: none;
     }
     .header-transparent .header-middle,
     .is-sticky .header-sticky { border-width: 0; }

   .header-transparent/.header-text-light son clases que el propio mymedi
   pondría en un ancestro de .header-template si el panel Redux tuviera
   activado un ajuste de "header transparente" -- NO es el caso hoy (no
   aparecen en el HTML en vivo, ver header-vivo.html), así que el bloque
   RESPALDO de abajo replica el mismo resultado colgado de nuestra propia
   clase de body, sin depender de encontrar ese ajuste.
   ========================================================================== */

/* --------------------------------------------------------------------------
   RESPALDO — réplica de la transparencia nativa de arriba, sobre el hero
   --------------------------------------------------------------------------
   Colgado de body.ec-header-transparente (la clase que ya pone
   ec_body_class_header_transparente() en functions.php). El patrón
   "> div:not(.is-sticky)" es el mismo que usa mymedi: .header-template
   envuelve a .header-middle en un div (.sticky-wrapper, ver el encargo) que
   recibe la clase .is-sticky por JS propio del tema al hacer scroll -- sin
   esta condición la transparencia se quedaría encendida también en sticky. */

body.ec-header-transparente .ts-header .header-template {
	position: absolute;
	z-index: 993; /* mismo valor que mymedi, para no chocar con otros elementos posicionados del tema */
	left: 0;
	right: 0;
	top: 0;
}

body.ec-header-transparente .ts-header .header-template > div:not(.is-sticky) .header-middle {
	background: transparent;
}

body.ec-header-transparente .ts-header .header-template > div:not(.is-sticky) .header-middle:after {
	display: none;
}

/* Cuenta y buscador en blanco sobre el hero -- réplica fiel del
   comportamiento nativo de mymedi (.header-text-light), visibles cuando se
   apague EC_MODO_CATALOGO. El carrito no se toca: bajo EC_MODO_CATALOGO se
   oculta por completo, ver el bloque MODO CATÁLOGO más abajo. */
body.ec-header-transparente .ts-header .header-template > div:not(.is-sticky) .my-account-wrapper svg path,
body.ec-header-transparente .ts-header .header-template > div:not(.is-sticky) .search-button svg path {
	stroke: var(--ec-blanco);
}

body.ec-header-transparente .ts-header .header-middle,
body.ec-header-transparente .ts-header .is-sticky .header-sticky {
	border-width: 0;
}

/* --------------------------------------------------------------------------
   Geometría — igual en los tres estados del encargo (hero/sticky/sin hero)
   --------------------------------------------------------------------------
   mymedi mete el logo y el menú en .header-middle > .container, un
   display:table con .logo-wrapper/.header-right como table-cell (verificado
   en vivo). Aquí se cambia a flexbox para fijar la geometría exacta del
   PSD -- sin gancho de body: el diseño pide el mismo layout en los tres
   estados, solo el COLOR cambia por estado (ver más abajo). */

/* .header-top es la barra superior de mymedi (contacto/idioma/etc.) -- el
   diseño de una sola banda no la usa, en ninguno de los tres estados. Se
   oculta en vez de quitarla del marcado para no tocar header.php. */
.ts-header .header-template .header-top {
	display: none;
}

.ts-header .header-middle > .container {
	/* width/max-width/margin anulan ".page-container,.container{margin:auto}"
	   + "@media(min-width:1279px){.container{width:1270px}}" (1-reset.css):
	   esa es la clase GENÉRICA de mymedi para centrar el contenido de la
	   página a 1270px -- el propio .container del header la hereda porque
	   es la misma clase, y con ella el header quedaba centrado en vez de a
	   todo el ancho, y el % de la izquierda del menú (más abajo) salía mal
	   medido desde ese recuadro angosto en vez de desde el header completo. */
	width: 100%;
	max-width: 100%;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between; /* empuja .header-right (hamburguesa en tablet/móvil) al borde derecho */
	height: 125px; /* 36 + 53 (logo) + 36 -- ver el encargo */
	padding: 0 38px; /* logo a x=38 -- el "padding:0 50px" nativo no da esa medida */
	box-sizing: border-box;
}

.ts-header .header-middle .logo-wrapper {
	width: auto; /* anula el 25%/20% de .header-v7 (ver 2-mymedi.css) -- el flex ya reparte solo */
	height: auto; /* anula los 80px nativos de "header .logo-wrapper" (pensados para su logo de 144×80) -- con eso puesto, el flex centraba una caja de 80px, no la imagen de 53px, y el logo quedaba más arriba de lo que pide el PSD */
	padding-right: 0; /* anula los 15px nativos de esa misma regla */
}

/* En sticky, mymedi tiene TODAVÍA otra altura fija para .logo-wrapper (70px,
   "header .sticky-wrapper.is-sticky .header-sticky .logo-wrapper" -- 4
   clases + 1 etiqueta = más que la regla de arriba, 3 clases) que volvía a
   descentrar el logo verticalmente solo en ese estado. .has-sticky (en
   <header>) y .header-sticky (en .header-middle) son clases reales del
   propio marcado (ver el encargo), añadidas aquí solo para sumar
   especificidad -- con ellas, 5 clases, le ganan sin !important. */
.ts-header.has-sticky .header-middle.header-sticky .logo-wrapper {
	height: auto;
}

.ts-header .header-middle .logo-wrapper img.normal-logo,
.ts-header .header-middle .logo-wrapper img.mobile-logo,
.ts-header .header-middle .logo-wrapper img.sticky-logo {
	/* SIN "display" a propósito -- es justo la propiedad que alterna la
	   sección "Logos" más abajo (show/hide de mymedi + Casos 1 y 2) para
	   decidir cuál de los tres se ve; ponerlo aquí, aunque fuera el mismo
	   valor que ya tuviera, le habría ganado a esas reglas por
	   especificidad y habría dejado los tres logos encimados. */
	width: 97px;
	height: 53px;
}

/* .menu-wrapper es position:relative NATIVO (mymedi) -- eso es justo lo que
   rompía el centrado del menú antes de esta ronda: un position:absolute en
   el <nav> de adentro se resolvía contra .menu-wrapper (46px de ancho, ver
   el encargo), no contra el header completo. Aquí se posiciona el propio
   .menu-wrapper en su lugar: su ancestro con position ya es .container
   (position:relative, nativo), cuyo cuadro de relleno mide el ancho
   COMPLETO del header pase lo que pase con su propio padding -- por eso el
   % de la izquierda da el mismo resultado que "% del ancho del header"
   que pide el encargo. */
.ts-header .header-middle .menu-wrapper {
	position: absolute;
	/* 444px / 1440px = 30.8333%, medido del PSD -- ver el encargo. Antes
	   llevaba "+5px" para compensar la barra de scroll clásica del
	   navegador de pruebas (1425px de ancho útil sobre 1440, 15px menos) --
	   en macOS (donde vive el sitio) la barra flota y no resta nada, así
	   que a 1440 de ancho útil real ese "+5px" sobraba y dejaba la tinta en
	   449px en vez de 444px. preview/router.php ya oculta esa barra en la
	   vista previa para medir contra el mismo ancho útil de macOS -- el %
	   solo, sin sumar nada, da los 444px del PSD (verificado con
	   ecVerificarCabecera(), ±2px de tolerancia). */
	left: 30.8333%;
	/* No es 50% parejo: .menu-wrapper mide 46px de alto (min-height nativo,
	   ver el encargo) y mymedi centra su contenido ADENTRO con su propio
	   align-items:center -- el resultado NO cae a la mitad del cuadro por
	   los métricos propios de la fuente. Ajustado a ojo contra la línea
	   base que pide el PSD (y=58) y verificado con ecVerificarCabecera(). */
	top: calc(50% - 11px);
	transform: translateY(-50%);
}

.ts-header .header-middle .menu-wrapper nav.main-menu.pc-menu.ts-mega-menu-wrapper > ul.menu {
	display: flex;
	align-items: center;
	gap: 20.8px; /* medido del PSD -- ver el encargo */
}

.ts-header .header-middle .menu-wrapper nav.main-menu.pc-menu.ts-mega-menu-wrapper > ul.menu > li {
	margin: 0; /* anula el margin-right:30px nativo -- el hueco ya lo da el gap de arriba */
	float: none;
}

/* Outfit 400, 16.67px -- el panel deja el menú en peso 500 (ver el bloque
   "GENERADO" arriba: B1 solo toca font-family, no peso ni tamaño, a
   propósito, ver el encargo). Un tamaño más ancho o pesado que el del PSD
   corre las posiciones de los ítems hacia la derecha (cada palabra mide
   más), así que esta regla también es necesaria para que las x del menú
   den lo que pide el encargo. */
.ts-header .header-middle .menu-wrapper nav.main-menu.pc-menu.ts-mega-menu-wrapper .menu-label {
	font-size: 16.67px;
	font-weight: var(--ec-peso-regular);
}

/* Pastilla gris del primer ítem -- mymedi la pinta con
   "li:first-child{background:#333;color:#fff}" MÁS 25px de padding a los
   lados en su <a> (ver el encargo). Mismo selector, con
   nav.main-menu.pc-menu.ts-mega-menu-wrapper completo en vez de un "nav" a
   secas, para ganarle por especificidad sin !important. Los 25px de
   padding no son solo estética de la pastilla: sin anularlos, "Inicio"
   arrancaba más a la derecha de lo que pide el PSD y corría también el
   primer hueco del menú (medido en la vista previa). */
.ts-header .header-middle .header-right .menu-wrapper nav.main-menu.pc-menu.ts-mega-menu-wrapper > ul.menu > li:first-child {
	background: transparent;
}

.ts-header .header-middle .header-right .menu-wrapper nav.main-menu.pc-menu.ts-mega-menu-wrapper > ul.menu > li:first-child > a {
	padding-left: 0;
	padding-right: 0;
}

/* --------------------------------------------------------------------------
   Color del menú por estado
   --------------------------------------------------------------------------
   Los tres estados del encargo. El color va en el propio <a> -- NO en
   .menu-label, el <span> de adentro: mymedi pone ".ts-header .menu-wrapper
   ul li a:not(.button){color:inherit}" (3 clases + 3 etiquetas) sobre un
   <li> que la propia mymedi pinta rgba(232,93,0,1) (ver el encargo) --
   heredado por el <a>. Un selector apuntando directo al <a>, con más
   clases que esa regla, es lo que le gana sin heredar ese naranja viejo ni
   necesitar !important; ecVerificarCabecera() también lee el color ahí, no
   en el span (mide la tipografía en .menu-label, pero el color en <a>).

   Cada regla incluye TAMBIÉN el <li> (sin ">a"): el <a> ya no depende de
   heredar de él, pero el <li> por sí solo se queda calculando ese mismo
   naranja viejo si no se pisa aparte -- no se ve (no tiene texto directo,
   todo vive dentro de <a><span>), pero el encargo pide que NINGÚN color
   calculado en el header dé rgb(232,93,0), visible o no. */

body.ec-header-transparente .ts-header .header-template > div:not(.is-sticky) .header-middle .menu-wrapper nav.main-menu.pc-menu.ts-mega-menu-wrapper > ul.menu > li,
body.ec-header-transparente .ts-header .header-template > div:not(.is-sticky) .header-middle .menu-wrapper nav.main-menu.pc-menu.ts-mega-menu-wrapper > ul.menu > li > a {
	color: var(--ec-blanco);
}

.ts-header .header-template > div.is-sticky .header-middle .menu-wrapper nav.main-menu.pc-menu.ts-mega-menu-wrapper > ul.menu > li,
.ts-header .header-template > div.is-sticky .header-middle .menu-wrapper nav.main-menu.pc-menu.ts-mega-menu-wrapper > ul.menu > li > a {
	color: var(--ec-blanco);
}

/* Estado 3: sin hero y sin sticky -- el header queda blanco sólido tal
   cual lo pinta el panel (mymedi ya pone background:#fff ahí, ver el
   encargo), así que aquí solo hace falta el color de los enlaces. El PSD
   trae #222222 sin convertir: los PSD de la agencia están en Adobe RGB
   sin perfil, y #222222 en Adobe RGB equivale a #1C1C1C en sRGB (mismo
   criterio que el resto del archivo -- ver adobeASrgb() en
   preview/real/verificar-psd.js). No hay una variable "--ec-negro"
   aparte para este tono: es el mismo que --ec-negro-footer. */
body:not(.ec-header-transparente) .ts-header .header-template > div:not(.is-sticky) .header-middle .menu-wrapper nav.main-menu.pc-menu.ts-mega-menu-wrapper > ul.menu > li,
body:not(.ec-header-transparente) .ts-header .header-template > div:not(.is-sticky) .header-middle .menu-wrapper nav.main-menu.pc-menu.ts-mega-menu-wrapper > ul.menu > li > a {
	color: var(--ec-negro-footer);
}

/* Hover y activo: mismo naranja en los tres estados, sin gancho de body ni
   de sticky -- por eso necesitan MÁS especificidad que las tres reglas de
   arriba (10 clases la más alta, la de "sin hero"), no menos: .has-sticky
   (en <header>) y .hidden-ipad (en .menu-wrapper) son clases de verdad en
   el marcado real (ver el encargo), añadidas aquí solo para sumar
   especificidad -- con ellas, 11 clases, le ganan a los tres estados pase
   lo que pase cuál esté activo, sin !important. */
.ts-header.has-sticky .header-middle .header-right .menu-wrapper.hidden-ipad nav.main-menu.pc-menu.ts-mega-menu-wrapper > ul.menu > li:hover > a {
	color: var(--ec-naranja);
}

/* current-menu-item/current_page_item son clases que WordPress pone en el
   <li> (no en el <a>), de ahí el descendiente hasta ">a". El subrayado va
   aparte, como border-bottom de .menu-label (el <span> de adentro) -- así
   lo mide ecVerificarCabecera(), ver el encargo -- con padding-bottom para
   separarlo de la línea base, como el PSD ([767,65,68,3], borde superior
   en y=65 -- medía y=68 con el padding-bottom anterior de 6px; cada px de
   padding-bottom baja el borde un px, así que 3px sube el borde los 3px
   que pedía el PSD). Sin necesidad de la misma especificidad extra que el
   color de arriba: nada más compite por el border-bottom de .menu-label. */
.ts-header.has-sticky .header-middle .header-right .menu-wrapper.hidden-ipad nav.main-menu.pc-menu.ts-mega-menu-wrapper > ul.menu > li.current-menu-item > a,
.ts-header.has-sticky .header-middle .header-right .menu-wrapper.hidden-ipad nav.main-menu.pc-menu.ts-mega-menu-wrapper > ul.menu > li.current_page_item > a {
	color: var(--ec-naranja);
}

.ts-header .header-middle .menu-wrapper nav.main-menu.pc-menu.ts-mega-menu-wrapper .current-menu-item .menu-label,
.ts-header .header-middle .menu-wrapper nav.main-menu.pc-menu.ts-mega-menu-wrapper .current_page_item .menu-label {
	padding-bottom: 3px;
	border-bottom: 3px solid var(--ec-naranja);
}

/* --------------------------------------------------------------------------
   Header fijo (sticky) — negro en TODO el sitio, con hero o sin él
   --------------------------------------------------------------------------
   Decisión de cliente, ya definitiva (de las tres rutas que estaban sobre
   la mesa — negro, blanco con el logo a color, u ocultar el header — se
   eligió negro con el logo y el menú en blanco). Sin condición de
   body.ec-header-transparente: se ve igual al hacer scroll sin importar si
   la página tenía el header transparente de arriba o el header sólido
   blanco de una página sin hero (como la ficha de producto). */
.ts-header .header-template > div.is-sticky .header-middle {
	/* Mismo tono que el footer -- no existe una variable "--ec-negro"
	   aparte, ver :root. */
	background-color: var(--ec-negro-footer);
}

.ts-header .header-template > div.is-sticky,
.ts-header .header-template > div.is-sticky a {
	color: var(--ec-blanco);
}

/* Cuenta y buscador en blanco sobre el negro del sticky -- mismo criterio
   que su réplica de arriba (RESPALDO, para el estado con hero): hoy están
   ocultos por EC_MODO_CATALOGO, pero la regla queda lista para cuando se
   apague el interruptor. El carrito no se toca por el mismo motivo. */
.ts-header .header-template > div.is-sticky .my-account-wrapper svg path,
.ts-header .header-template > div.is-sticky .search-button svg path {
	stroke: var(--ec-blanco);
}

/* --------------------------------------------------------------------------
   Logos — alternancia entre los tres <img> que ya pinta mymedi
   --------------------------------------------------------------------------
   El marcado (ver el encargo, confirmado en el HTML en vivo) ya trae tres
   <img> dentro de .logo-wrapper .logo a: normal-logo, mobile-logo y
   sticky-logo. mymedi ya los alterna solo entre reposo/sticky y
   escritorio/móvil con reglas propias (también citadas en el encargo,
   copiadas de su CSS en vivo):

     .sticky-logo { display: none; }
     .mobile-logo, .mobile-menu-logo { display: none; }
     .sticky-wrapper.is-sticky .header-sticky img.sticky-logo { display: block; }
     .sticky-wrapper.is-sticky .header-sticky img.mobile-logo,
     .sticky-wrapper.is-sticky img.normal-logo { display: none; }
     @media (max-width: 767px) {
       .logo-wrapper .normal-logo { display: none; }
       .logo-wrapper .mobile-logo { display: block; }
     }

   Con esas reglas solas, el logo que queda visible en cada estado es:
   reposo/escritorio → normal-logo; reposo/móvil → mobile-logo; sticky
   (cualquier ancho) → sticky-logo. Los dos primeros son exactamente lo
   que pide el diseño para una página CON hero (blanco sobre el header
   transparente) — no hace falta ninguna regla nuestra ahí. Los otros dos
   casos SÍ son distintos de lo que el diseño pide (decisión de cliente:
   header fijo negro con logo blanco, ver más arriba), así que son las
   únicas excepciones que hacen falta:

     1) Página SIN hero (ec-header-transparente ausente) y sin scroll —
        p. ej. la ficha de producto: mymedi mostraría aquí el logo BLANCO
        (normal-logo/mobile-logo), pensado para un header transparente
        que en esta página no existe — el header es blanco sólido, así
        que ese logo quedaría invisible. Se fuerza el logo A COLOR
        (sticky-logo) en su lugar.
     2) Header fijo (sticky), en CUALQUIER página: mymedi muestra el logo
        A COLOR (sticky-logo) por su cuenta al pegar el header — pensado
        para un sticky claro. Aquí el sticky es negro (ver más arriba),
        así que se fuerza el logo BLANCO en su lugar: normal-logo en
        escritorio aquí abajo, mobile-logo en móvil en el @media
        (max-width:767px) del final del archivo — mismo criterio
        desktop-first que el resto de este archivo.

   Los selectores de mymedi citados arriba llegan hasta 3 clases + 1
   etiqueta de especificidad (por ejemplo ".sticky-wrapper.is-sticky
   .header-sticky img.sticky-logo"); los de aquí abajo llevan más para
   ganarles sin necesitar !important (regla del proyecto). El tamaño de
   los tres <img> (97×53, igual en cualquier estado/ancho) ya se fijó en
   la sección Geometría, arriba -- aquí solo se decide cuál se ve. */

/* Caso 1: sin hero y sin scroll -- sticky-logo (color) en vez de
   normal-logo/mobile-logo (blanco). ":not(.is-sticky)" dentro del
   selector para que, en cuanto el header se pega, mande el caso 2 de
   abajo en su lugar. */
body:not(.ec-header-transparente) .ts-header .header-template > div:not(.is-sticky) .logo-wrapper .normal-logo,
body:not(.ec-header-transparente) .ts-header .header-template > div:not(.is-sticky) .logo-wrapper .mobile-logo {
	display: none;
}

body:not(.ec-header-transparente) .ts-header .header-template > div:not(.is-sticky) .logo-wrapper .sticky-logo {
	display: block;
}

/* Caso 2: header fijo (sticky), en cualquier página -- normal-logo
   (blanco) en vez de sticky-logo (color). Sin condición de
   body.ec-header-transparente: pasa igual haya hero o no. La mitad móvil
   (mobile-logo en vez de normal-logo) está en el @media al final del
   archivo. */
.ts-header .header-template > div.is-sticky .logo-wrapper .normal-logo {
	display: block;
}

.ts-header .header-template > div.is-sticky .logo-wrapper .sticky-logo {
	display: none;
}

/* --------------------------------------------------------------------------
   Iconos de redes — Facebook, Instagram, LinkedIn
   --------------------------------------------------------------------------
   Marcado: ec_redes_header() (inc/contacto.php), impreso desde
   templates/headers/header-v7.php (copia de mymedi 1.4.4 con esa única
   llamada añadida) al final de .header-middle .header-right, después del
   menú de escritorio.

   position:absolute contra .container (mismo ancoraje que .menu-wrapper,
   sección Geometría arriba): evita depender de cómo mymedi resuelva el
   flujo/float nativo de .header-right (pensado para sus propios iconos de
   compra, no para un bloque de este ancho). right:66px se mide desde el
   padding-box de .container -- como .container ocupa el ancho completo
   del header y no tiene margin (Geometría, arriba), 66px de .container
   son 66px del borde de la ventana, la medida del PSD. Igual con el
   top/gap: valores medidos en tinta contra el PSD (Facebook [1330,47,6,11],
   Instagram [1345,48,10,10], LinkedIn [1364,47,10,10] -- x1,y1,ancho,alto),
   verificados con getBoundingClientRect() de cada <svg> (±2px, ver el
   encargo).

   right:66px, tal cual el PSD: antes llevaba 51px (66 − 15) para compensar
   la barra de scroll clásica del navegador de pruebas, que dejaba a
   .container 15px más angosto que la ventana (1425 contra 1440). En macOS
   (donde vive el sitio) la barra flota y no resta nada, y
   preview/router.php ya la oculta en la vista previa para medir contra ese
   mismo ancho útil de 1440 -- con .container a todo el ancho de la
   ventana, 66px de su borde YA SON los 66px que pide el PSD, sin restar
   nada. Verificado con getBoundingClientRect() de los tres <svg>
   (±2px, ver el encargo). */
.ec-redes-header {
	position: absolute;
	top: 52.5px; /* centro medido del PSD -- NO es el centro del header (y62.5, alto 125px) */
	transform: translateY(-50%);
	right: 66px;
	display: flex;
	align-items: center;
	gap: 9px; /* medido del PSD */
}

.ec-redes-header svg {
	display: block;
}

/* Blanco por omisión: cubre el hero (transparente, sin sticky) Y el
   header fijo (sticky, cualquier página) -- las dos condiciones en las
   que mymedi pinta el header oscuro/transparente. El hover comparte esa
   misma condición "siempre naranja", así que tampoco necesita ningún
   gancho de body ni de sticky. */
.ec-redes-header a {
	color: var(--ec-blanco);
}

.ec-redes-header a:hover {
	color: var(--ec-naranja);
}

/* Header blanco (sin hero, sin sticky): #1C1C1C, mismo criterio que los
   enlaces del menú en ese estado (Estado 3, arriba). El hover de este
   estado se repite con la MISMA cadena de ancestros +:hover -- necesita
   esa especificidad extra para ganarle al negro de la regla de encima,
   igual que el patrón de "Hover y activo" del menú, más arriba. */
body:not(.ec-header-transparente) .ts-header .header-template > div:not(.is-sticky) .ec-redes-header a {
	color: var(--ec-negro-footer);
}

body:not(.ec-header-transparente) .ts-header .header-template > div:not(.is-sticky) .ec-redes-header a:hover {
	color: var(--ec-naranja);
}

/* --------------------------------------------------------------------------
   Hamburguesa de tablet (768–1279px) — al borde derecho, coloreada por estado
   --------------------------------------------------------------------------
   .ts-group-meta-icon-toggle (envuelve .ic-mobile-menu-button Y
   .ic-mobile-menu-close-button -- mymedi alterna cuál se ve por JS propio
   al abrir/cerrar el menú, una sola posición sirve para las dos) trae las
   clases nativas "visible-ipad hidden-phone": oculto en escritorio
   (>1279px) y en móvil (≤767px, donde manda el #ts-group-icons-header de
   abajo), visible solo entre 768 y 1279px -- por eso esta regla de
   posición no necesita su propio @media: fuera de ese rango el elemento
   ya está en display:none por CSS nativo de mymedi.

   Mismo ancoraje que .ec-redes-header y .menu-wrapper: position:absolute
   contra .container. El padding-right de .container es 38px (Geometría,
   arriba) -- el mismo margen que ya usa el logo a la izquierda, tal como
   pide el encargo ("alineada con el margen del logo"). right:38px, igual
   que ese padding: antes llevaba 23px (38 − 15) por el mismo ajuste de la
   barra de scroll clásica de la vista previa que .ec-redes-header, justo
   arriba -- ver ese comentario para el porqué completo, ya corregido para
   el ancho útil de 1440 de macOS.

   Los <path> del SVG traen fill="#FF9923"/"#103178" COMO ATRIBUTO en la
   plantilla (header-v7.php, copiado de mymedi) -- un atributo de
   presentación cede ante cualquier regla de CSS de autor, así que
   pintarlos por selector de clase (abajo) les gana sin tocar ese
   marcado ni necesitar !important. */
.ts-header .header-middle .header-right .ts-group-meta-icon-toggle {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 38px;
}

/* Blanco por omisión (hero + sticky) y hover naranja "siempre" -- mismo
   patrón de dos pares de reglas que .ec-redes-header, arriba, y mismo
   motivo: el override de #1C1C1C (sin hero) necesita su propio hover
   repetido para no tapar el naranja en ese estado. */
.ts-header .header-middle .header-right .ts-group-meta-icon-toggle svg path {
	fill: var(--ec-blanco);
}

.ts-header .header-middle .header-right .ts-group-meta-icon-toggle:hover svg path {
	fill: var(--ec-naranja);
}

body:not(.ec-header-transparente) .ts-header .header-template > div:not(.is-sticky) .header-middle .header-right .ts-group-meta-icon-toggle svg path {
	fill: var(--ec-negro-footer);
}

body:not(.ec-header-transparente) .ts-header .header-template > div:not(.is-sticky) .header-middle .header-right .ts-group-meta-icon-toggle:hover svg path {
	fill: var(--ec-naranja);
}

/* --------------------------------------------------------------------------
   MODO CATÁLOGO — oculta los iconos de compra que el diseño no dibuja
   --------------------------------------------------------------------------
   Ver EC_MODO_CATALOGO en functions.php. El diseño de la agencia (20
   vistas) no tiene carrito, cuenta, lista de deseos ni buscador en el
   header — solo logo, menú e iconos sociales (pendientes, ver bloque de
   arriba). Mientras el interruptor esté en true,
   ec_body_class_modo_catalogo() añade 'ec-modo-catalogo' al body y estas
   reglas ocultan lo que el diseño no tiene.

   Dos ámbitos por clase, no uno: #ts-group-icons-header (la barra de
   iconos en móvil) NO es descendiente de .ts-header, es su hermano en el
   marcado — verificado en el HTML en vivo, 10 sep 2026: ese contenedor
   aparece antes de que abra <header class="ts-header"> y queda fuera de
   él. Un selector ".ts-header #ts-group-icons-header ..." exige que el
   segundo esté DENTRO del primero; como no lo está, las seis reglas
   originales no seleccionaban nada, ni en escritorio ni en móvil. Por
   eso cada clase lleva dos selectores, uno colgado de cada contenedor.

   Contenido real de #ts-group-icons-header, verificado en vivo:
   .ts-group-meta-icon-toggle, .ic-mobile-menu-button,
   .ic-mobile-menu-close-button, .home-icon, .my-account-wrapper y
   .my-wishlist-wrapper. NUNCA se ocultan los primeros cuatro: son la
   navegación en móvil y el diseño sí los necesita ahí.
   -------------------------------------------------------------------------- */
body.ec-modo-catalogo .ts-header .shopping-cart-wrapper,
body.ec-modo-catalogo #ts-group-icons-header .shopping-cart-wrapper,
body.ec-modo-catalogo .ts-header .ts-tiny-cart-wrapper,
body.ec-modo-catalogo #ts-group-icons-header .ts-tiny-cart-wrapper,
body.ec-modo-catalogo .ts-header .cart-icon,
body.ec-modo-catalogo #ts-group-icons-header .cart-icon,
body.ec-modo-catalogo .ts-header .my-account-wrapper,
body.ec-modo-catalogo #ts-group-icons-header .my-account-wrapper,
body.ec-modo-catalogo .ts-header .my-wishlist-wrapper,
body.ec-modo-catalogo #ts-group-icons-header .my-wishlist-wrapper,
body.ec-modo-catalogo .ts-header .search-button,
body.ec-modo-catalogo #ts-group-icons-header .search-button {
	display: none;
}

/* ==========================================================================
   Footer — grid de 4 columnas sobre fondo #1C1C1C
   ==========================================================================
   Confirmado en vivo: la zona de footer contiene ÚNICAMENTE .footer-container
   y .scroll-button. La palabra "widget" no aparece ni una vez — no hay
   áreas de widgets pobladas todavía. El footer de 4 columnas del diseño es
   terreno virgen: NO existen .ts-footer, .site-footer ni .footer-widgets,
   así que esos nombres no se usan en este archivo.
   ========================================================================== */

.footer-container {
	background-color: var(--ec-negro-footer);
	color: var(--ec-blanco);
}

/* --------------------------------------------------------------------
   PENDIENTE DE CONFIRMAR
   --------------------------------------------------------------------
   Todo lo de aquí abajo depende de cómo se terminen poblando los hijos de
   .footer-container, y eso todavía no existe en el sitio. Dos rutas
   posibles, sin decidir todavía:

     1) Áreas de widgets propias de mymedi — se comprueba en el admin, en
        Apariencia → Widgets.
     2) register_sidebar() en este tema hijo — esto SÍ obligaría a
        sobrescribir footer.php para imprimir dynamic_sidebar(), que es
        justo lo que la arquitectura de este hijo evita (ver la nota de
        CSS-primero en functions.php).

   Mientras se decide, el grid usa un selector estructural genérico
   (.footer-container > div) en vez de inventar nombres de clase para las
   4 columnas. Si la vía elegida termina siendo widgets de mymedi con su
   propio marcado de columna, este selector probablemente haya que
   ajustarlo.
   -------------------------------------------------------------------- */
.footer-container > div {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

/* ==========================================================================
   Componentes — Botón de WhatsApp
   ==========================================================================
   Pintado por el shortcode [ec_whatsapp] (ver functions.php) — un botón,
   un origen para el número. La ficha de producto lo inserta vía hook; la
   barra lateral del catálogo lo usará desde un widget de texto. Mismo
   estilo en los dos sitios porque es el mismo marcado.
   ========================================================================== */

.ec-boton-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.85em 1.75em;
	background-color: var(--ec-naranja);
	color: var(--ec-blanco);
	font-family: var(--ec-fuente-base);
	/* 17px: no traía font-size propio, heredaba el 16px por omisión del
	   body. Medido contra el diseño de Servicios, que es donde vive este
	   botón; se sube aquí (no con una regla aparte) porque es la única
	   clase que pinta el botón en cualquier página, incluida la ficha de
	   producto — mismo componente, mismo tamaño en los dos sitios. El
	   padding en "em" (arriba) escala con este valor automáticamente. */
	font-size: 1.0625rem;
	font-weight: var(--ec-peso-semibold);
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 0; /* el diseño lo pide rectangular, sin esquinas redondeadas */
}

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

/* Foco de teclado visible, pedido explícitamente por el diseño. Se usa
   :focus-visible (no :focus) para que el anillo aparezca al navegar con
   teclado y no al hacer clic con mouse, y --ec-texto (no un tono de marca)
   para que tenga contraste sobre el fondo naranja del botón y sobre lo que
   sea que haya detrás (outline-offset lo separa). */
.ec-boton-whatsapp:focus-visible {
	outline: 2px solid var(--ec-texto);
	outline-offset: 2px;
}

/* El icono ya queda a la izquierda por el orden del marcado
   (<i>...</i><span>...</span> con display:inline-flex arriba); aquí solo
   se ajusta su tamaño para que se vea proporcionado junto al texto. */
.ec-boton-whatsapp i {
	font-size: 1.1em;
}

/* ==========================================================================
   Home
   ==========================================================================
   (Sección vacía — se llena al construir la página.)
   ========================================================================== */



/* ==========================================================================
   Catálogo
   ==========================================================================
   OJO: la taxonomía de categorías del catálogo está en disputa con los
   diseñadores, ver la nota PENDIENTE al final de functions.php antes de
   tocar nada relacionado con categorías. Lo de aquí abajo es
   independiente de esa disputa: son ajustes de la tarjeta de producto en
   la rejilla, ya confirmados por el diseño.
   ========================================================================== */

/* Las tarjetas del diseño solo llevan imagen y título — precio, estrellas
   y botón de compra se quitan por PHP (ver ec_ajustes_listado_productos()
   en functions.php). Lo que queda es YITH: Lista de Deseos y Comparar no
   están en ninguna de las 20 vistas del diseño, y esos botones los pintan
   los plugins YITH Wishlist y YITH Compare por su cuenta — no hay
   remove_action() de WooCommerce que los quite, porque no son de
   WooCommerce. Se ocultan aquí por CSS con sus clases estándar; lo limpio
   sería desactivarlos desde los ajustes de cada plugin (YITH Wishlist y
   YITH Compare traen su propio interruptor para no mostrarse en la
   rejilla), pero eso es un cambio de configuración en el admin, no de
   este archivo. .yith-woocompare-open se añade junto a a.compare porque
   es la clase real que trae el enlace de comparar en la ficha de
   producto — verificada en vivo. */
.yith-wcwl-add-to-wishlist,
a.compare,
.yith-woocompare-open,
.compare-button {
	display: none;
}

/* La tarjeta real del listado (verificada en vivo en /tienda/) trae más
   marcado del que alcanza a limpiar el remove_action() de
   ec_ajustes_listado_productos(): mymedi envuelve el botón de deseos y
   el de vista rápida en sus propios contenedores dentro de
   .product-group-button, bajo la miniatura, y repite deseos y "agregar
   al carrito" otra vez en .product-group-button-meta, bajo el título.

   .button-in.wishlist y .button-in.quickshop se ocultan siempre porque
   es diseño — la tarjeta es solo imagen y título — y no dependen de
   EC_MODO_CATALOGO. Se oculta el contenedor .button-in completo, no
   solo el enlace de adentro, para que no quede una caja vacía con su
   tooltip flotando sobre la tarjeta.

   No se tocan .product-label ni la imagen alterna del hover
   (.product-image-back): no son funciones que agreguemos nosotros y el
   diseño estático no permite saber si el sitio real las va a usar. */
.button-in.wishlist,
.button-in.quickshop {
	display: none;
}

/* .loop-add-to-cart (hoy dice "Leer más", no "Agregar al carrito") sí
   depende del interruptor: es el botón de compra de la tarjeta, la
   misma pieza que ec_ajustes_listado_productos() intenta quitar por PHP
   más arriba, repetida dos veces en el marcado real (una bajo la
   miniatura, otra bajo el título). Se oculta por CSS como respaldo de
   ese remove_action(), que probablemente no lo alcanza — ver el
   comentario junto al remove_action() en functions.php. */
body.ec-modo-catalogo .loop-add-to-cart {
	display: none;
}



/* ==========================================================================
   Servicios
   ==========================================================================
   Las tres páginas de servicio (Mantenimiento Especializado, Capacitación
   Técnica y Operativa, Venta de Refacciones) comparten una sola plantilla
   — templates/servicio.php — y por lo tanto un solo bloque de CSS, con
   subsecciones por componente: contenedor/columnas, hero, columna
   principal (título, intro, imagen, iconos, lista, galería), tarjeta de
   contacto y banda naranja de cierre.

   Coordenadas del PSD contra un lienzo de 1440px (spec-*.md, junto a los
   psd-*.json, exportados con herramientas/psd_especificacion.py) — no PNG
   escalado: el PSD ya da coordenadas exactas de tinta a ese ancho, ver el
   encargo. .ec-servicio-contenedor es un lienzo de 1440px centrado (tope:
   de ahí no crece más, solo se centra) -- por eso .ec-servicio-columnas
   puede usar el padding-left/right como si fueran las x del PSD
   directamente. Un bloque cuyo campo esté vacío no se pinta (ver
   inc/servicio.php): eso ya lo resuelve la plantilla con PHP, no hay CSS
   de "ocultar" aquí.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contenedor y rejilla de dos columnas
   -------------------------------------------------------------------------- */

.ec-servicio-contenedor {
	/* 90rem = 1440px, el ancho del lienzo del PSD -- "tope" del diseño: en
	   una ventana más ancha el contenido no crece más, solo se centra
	   (margin:auto), igual que pide el encargo para el resto de la
	   página. Por debajo de 1440 encoge con la ventana -- fluido de
	   fábrica, sin clamp(): un max-width normal ya hace eso solo. */
	max-width: 90rem;
	margin: 0 auto;
	/* Blanco explícito, no heredado: esta sección no debe depender de qué
	   fondo traiga <body> (lo pone el tema padre, mymedi, fuera de este
	   archivo). Confirmado por muestreo sin redondear: Servicios es
	   blanco puro, igual que Contacto, Nosotros y Blog — el gris
	   --ec-fondo-claro es solo para el catálogo, ver su comentario en
	   :root. */
	background-color: var(--ec-blanco);
}

.ec-servicio-columnas {
	display: grid;
	/* 24.6875rem = 395px, el ancho de la tarjeta «Datos Contacto» medido
	   del PSD (antes 24rem/384px, sin medir). La columna principal es 1fr:
	   con el contenedor a 1440px de tope, eso resuelve a 819px (1440 −
	   107 − 79 de padding − 395 de tarjeta − 40 de gap), el ancho que hace
	   que el H1 más largo (Mantenimiento Especializado) envuelva justo
	   donde pide el PSD -- ver el comentario de .ec-servicio-titulo. */
	grid-template-columns: 1fr 24.6875rem;
	gap: 2.5rem;
	align-items: start; /* la tarjeta no se estira a la altura de la columna principal */
	/* Izquierda 107px / derecha 79px: NO es un padding simétrico -- son
	   las x del PSD tal cual (tarjeta hasta x=1361, 1440−1361=79; columna
	   principal desde x=107) sobre el lienzo de 1440px de .ec-servicio-
	   contenedor. padding-top: hueco entre el hero y la tinta del H1 --
	   ver el porqué del valor exacto en el comentario de .ec-servicio-
	   titulo, más abajo (depende de la métrica de la fuente, no es un
	   número que el PSD dé directo). padding-bottom: hueco medido entre
	   el último bloque de la columna principal y la banda naranja. */
	padding: 7.1875rem 4.9375rem 2rem 6.6875rem;
	/* 98.5rem = 1576px: el PSD pone la banda naranja en la MISMA y en las
	   tres páginas (y1931) aunque su columna principal no tenga el mismo
	   contenido (iconos y lista en Mantenimiento Especializado; solo
	   iconos en Capacitación; solo lista y galería en Venta de
	   Refacciones) -- el diseño da por hecho un alto mínimo constante
	   antes de la banda, no importa cuánto contenido haya arriba.
	   Mantenimiento Especializado es la que más contenido tiene (1576px
	   de alto real, sin este mínimo) -- las otras dos, más cortas, se
	   completan con este mínimo en vez de dejar la banda más arriba de
	   lo que pide el PSD. Se anula en el @media de tablet (más abajo):
	   ahí las columnas se apilan y este alto sobraría de golpe. */
	min-height: 98.5rem;
}

/* min-width:0 -- sin esto, la columna principal (celda de grid en 1fr)
   no se encoge por debajo del ancho "automático" mínimo de su
   contenido, y ese mínimo lo fija la imagen principal, más abajo
   (max-width:765px explícito en vez de 100%): un elemento reemplazado
   (<img>) con max-width fijo aporta ESE valor como ancho mínimo de
   contenido a sus contenedores en flujo normal, y ese mínimo sube en
   cascada hasta esta celda de grid. Verificado en vivo a 375px: sin
   min-width:0 aquí, esta columna se quedaba en 765px de ancho aunque la
   ventana midiera 375 -- no se notaba en scrollWidth (algo más arriba
   recorta la vista), pero sí en el reparto de las dos columnas de la
   fila de iconos, que se calculaban sobre esos 765px en vez de sobre el
   ancho real de la pantalla. */
.ec-servicio-principal {
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------
   Sale del contenedor con el truco 100vw / margin-left calc(50% - 50vw)
   porque no sabemos si mymedi envuelve el contenido en un contenedor
   propio (ver el encargo) — funciona sin importar si lo hay, y sin
   provocar scroll horizontal. overflow:hidden en el propio hero, no en
   <body>, para no arriesgarnos a tapar algo del resto de la página.
   ========================================================================== */

.ec-servicio-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	height: 26.0625rem; /* 417px, medido del PSD (antes 26rem/416px, sin medir) */
	overflow: hidden;
	background-color: var(--ec-negro-titulares); /* si el campo de imagen está vacío, queda un fondo sólido en vez de un hueco blanco */
}

.ec-servicio-hero-imagen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Encuadre medido comparando la foto limpia contra la exportación del
	   diseño, píxel a píxel: 44% 72% es el de las tres páginas de
	   servicio (mismo criterio que la capa, justo abajo) — antes quedaba
	   centrado (50% 50%, el valor por omisión de object-position) porque
	   nadie lo había medido todavía. Industrias mide distinto: lo
	   sobreescribe su propio modificador de plantilla, ver
	   .ec-servicio-hero--industrias más abajo. */
	object-position: 44% 72%;
}

/* Capa oscura plana del diseño — sin gradiente: el PNG no muestra que
   oscurezca más hacia ninguna orilla en particular. Opacidad con
   variable (en vez de un rgba() fijo) para que cada plantilla pueda
   fijar la suya sin repetir la regla completa — ver el modificador de
   Industrias más abajo. 0.40 (40%) de valor por omisión porque es el de
   las tres páginas de servicio, que comparten esta clase tal cual; antes
   era 0.45 en las cuatro páginas por igual, sin medir cada una por
   separado. */
.ec-servicio-hero-capa {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, var(--ec-hero-capa, 0.40));
}

/* --------------------------------------------------------------------------
   Modificador de plantilla — Industrias mide distinto tanto la capa como
   el encuadre de la foto (ver templates/industrias.php: hero.php recibe
   'modificador' => 'industrias' y lo agrega como clase extra en
   .ec-servicio-hero). El parcial es compartido con las tres páginas de
   servicio -- este modificador es la vía que deja a cada plantilla fijar
   sus propios valores sin bifurcar el parcial en dos.
   -------------------------------------------------------------------------- */
.ec-servicio-hero--industrias .ec-servicio-hero-capa {
	--ec-hero-capa: 0.43;
}

.ec-servicio-hero--industrias .ec-servicio-hero-imagen {
	object-position: 86% 37%;
}

/* Página de texto (aviso de privacidad y demás legales, ver
   templates/pagina-texto.php) -- sin PSD de esta ronda. Sin foto: fondo
   sólido en vez de imagen + capa, y un hero mucho más bajo (no hay
   título largo ni flecha que "proteger" con espacio de sobra, solo un
   título corto de una línea). */
.ec-servicio-hero--texto {
	/* auto anula el height fijo de .ec-servicio-hero (417px, arriba) --
	   el alto real ahora lo dan min-height y el contenido de abajo. */
	height: auto;
	/* Piso, no alto fijo: esta plantilla sirve para cualquier página
	   legal, y un título más largo que "Aviso de Privacidad" puede
	   envolver a 2-3 líneas -- con min-height el hero crece con ese
	   contenido en vez de dejarlo salir por arriba. Con un título de una
	   sola línea el resultado sigue siendo 300px, igual que antes. */
	min-height: 18.75rem;
	/* flex-direction:column + justify-content:flex-end aquí, en el
	   <section>, ancla el contenido (ya no position:absolute, ver su
	   regla abajo) al borde inferior -- y lo deja crecer hacia abajo
	   cuando el título no cabe en el piso de arriba. */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-color: var(--ec-negro-footer); /* fondo sólido pedido, no --ec-negro-titulares (el de respaldo del resto de heroes) */
}

.ec-servicio-hero--texto .ec-servicio-hero-capa {
	--ec-hero-capa: 0; /* sin foto que oscurecer -- la capa no debe restar nada al fondo sólido de arriba */
}

.ec-servicio-hero--texto .ec-servicio-hero-contenido {
	/* static, no absolute (anula el position:absolute + inset:0 de la
	   regla compartida, arriba): en flujo normal este bloque sí aporta
	   alto al <section>, que es lo que deja crecer al hero. */
	position: static;
	/* 141px = 125px del header en este ancho (Geometría, arriba) + 16px
	   de aire mínimo. Con un título de una sola línea no mueve nada (el
	   bloque no llega a los 300px del piso, y el flex-end de arriba lo
	   sigue pegando al borde inferior); solo entra en juego con un
	   título de 2-3 líneas, cuando el hero ya creció más allá del piso. */
	padding-top: 8.8125rem; /* 141px = 125px header + 16px */
	padding-bottom: 1.5rem;
}

.ec-servicio-hero-contenido {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end; /* el título del diseño queda anclado hacia el borde inferior del hero, lejos del header transparente que va arriba */
	/* gap y padding-bottom recalibrados junto con el tamaño del título
	   (ver .ec-servicio-hero-titulo abajo): con el título más grande, los
	   valores viejos (1rem / 3rem) dejaban el centro del título a ~301px
	   y la flecha a ~354px del borde superior del hero — el diseño los
	   pide en ~232px y ~286px. Medido en vivo (1440px) contra las tres
	   páginas: con estos dos valores, el título de una sola línea (como
	   en Capacitación y Venta de Refacciones) cae en 232.1px/286px, casi
	   exacto. Mantenimiento Especializado envuelve a dos líneas por tener
	   el título más largo — el centro sube a ~202px porque el bloque
	   crece hacia arriba desde la misma flecha anclada abajo; es
	   consecuencia esperada del layout flexible, no un valor a perseguir
	   por página. */
	gap: 0.625rem;
	padding: 0 1.5rem 7.25rem;
	text-align: center;
}

.ec-servicio-hero-titulo {
	/* Compartido con Industrias (hero.php es el mismo parcial en las dos
	   plantillas) -- cualquier cambio de aquí abajo se ve también en
	   /?pagina=industrias, tal como pide el encargo. */
	/* 64rem (1024px): el título largo de servicio ("Servicios de
	   Mantenimiento Especializado") mide 983px a 1440px y el PSD lo pide
	   en una sola línea -- antes 50rem/800px, forzaba el salto a dos
	   líneas. Con margen de sobra para no rozar el límite. */
	max-width: 64rem;
	margin: 0;
	color: var(--ec-blanco);
	/* Tamaño fluido: clamp(MÍNIMO, PENDIENTE·vw + INTERSECCIÓN, MÁXIMO).
	   MÁXIMO = 58.33px, el tamaño del PSD a 1440px — de ahí en adelante el
	   título ya no crece en pantallas más anchas (antes 52px, sin medir,
	   y sin el tracking de abajo). La parte central interpola en línea
	   recta entre 320px→30px (mínimo razonable en móvil chico) y
	   1440px→58.33px; los dos coeficientes se redondearon SIEMPRE hacia
	   arriba (no al más cercano) para que a los 1440px exactos el
	   resultado ya sea ligerísimamente ≥58.33px — así es el MÁXIMO del
	   clamp, un valor limpio, el que fija el tamaño final, y no el
	   cálculo en vw con sus milésimas de redondeo. Por debajo de 320px el
	   MÍNIMO (1.875rem) actúa de piso. Mismo criterio en .ec-servicio-
	   titulo (el H1) más abajo, con 34px/69.32px. */
	font-size: clamp(1.875rem, 1.3692rem + 2.5295vw, 3.645625rem);
	font-weight: var(--ec-peso-medium); /* antes 600 -- el PSD pide 500 */
	/* -0.04em ≈ -2.33px a 58.33px (el tracking del PSD, ya en em para que
	   escale junto con el font-size fluido de arriba en vez de quedarse
	   fijo en px cuando el título encoge en móvil). */
	letter-spacing: -0.04em;
	/* 74.18 ÷ 58.33: proporción, no px fijo, mismo criterio que el
	   tracking de arriba -- da exactamente los 74.18px de interlineado
	   del PSD a los 58.33px de escritorio y escala con el título en
	   móvil. Antes 1.15, sin medir. */
	line-height: 1.2717;
}

.ec-servicio-hero-flecha {
	color: var(--ec-blanco); /* el SVG usa stroke="currentColor" */
}

/* --------------------------------------------------------------------------
   Columna principal — título, intro, imagen
   -------------------------------------------------------------------------- */

.ec-servicio-titulo {
	/* -0.1731em ≈ -12px a 69.32px: el trazo en negrita de la "S" inicial
	   arranca su tinta unos 12px a la izquierda de la caja del elemento
	   (metida de la propia fuente en este peso/tamaño, no un margen) --
	   verificado con ecVerificarPSD() contra las tres páginas, mismo
	   valor en las tres. En em para que se escale con el font-size fluido. */
	margin: 0 0 3.0625rem 0;
	margin-left: -0.1731em;
	color: var(--ec-texto); /* redundante con la regla genérica h1..h6 (arriba en este archivo, ya corregida a este mismo token) -- se deja explícito aquí de todos modos, por si esa regla genérica cambia algún día */
	/* Fluido, mismo criterio que .ec-servicio-hero-titulo arriba (ver su
	   comentario): MÁXIMO = 69.32px, el tamaño del PSD a 1440px (antes
	   64px, sin medir), interpolación recta 320px→34px / 1440px→69.32px
	   con los coeficientes redondeados hacia arriba. La columna principal
	   (1fr en .ec-servicio-columnas, 819px sobre 1440 -- ver su
	   comentario) es justo el ancho al que "Servicios de Mantenimiento"
	   (el título más largo de las tres páginas) cabe en una línea y
	   "Especializado" ya no, envolviendo a dos líneas tal como pide el
	   PSD -- comprobado con este tamaño exacto, no con el anterior. */
	font-size: clamp(2.125rem, 1.4943rem + 3.1536vw, 4.3325rem);
	font-weight: var(--ec-peso-bold);
	/* -0.04em ≈ -2.77px a 69.32px, mismo criterio que el hero (ver su
	   comentario) -- escala con el font-size fluido. */
	letter-spacing: -0.04em;
	/* 65.85 ÷ 69.32: el PSD pide un interlineado MENOR que el tamaño de
	   fuente (antes 79px, mayor que el tamaño -- sin medir). Proporción,
	   no px fijo, para que escale con el font-size fluido de arriba. */
	line-height: 0.9499;
	text-wrap: balance; /* pedido explícito del encargo, para que el salto entre las dos líneas del H1 no quede desbalanceado */
}

.ec-servicio-intro {
	margin: 0 0 2.5rem;
	color: var(--ec-texto);
}

.ec-servicio-intro p {
	margin: 0 0 1rem;
	font-size: 1.245rem; /* 19.92px, medido del PSD (antes 20px/1.25rem, sin medir) */
	line-height: 1.4002; /* 27.89 ÷ 19.92, el interlineado del PSD */
}

.ec-servicio-intro p:last-child {
	margin-bottom: 0;
}

.ec-servicio-imagen {
	display: block;
	/* width:100% + max-width -- no bastaba con max-width sola (defecto
	   encontrado en tablet/móvil): un <img> sin "width" usa su ancho
	   intrínseco topado por max-width, sin mirar el contenedor -- por eso
	   en marcos angostos la imagen se quedaba en 765px (841px con el
	   scale(1.1) del parallax, ver animaciones.css) y el overflow:hidden
	   del marco solo dejaba ver una tira. Con width:100% el ancho sí sale
	   del marco (su ancho real, topado a 765px). A 1440 no cambia nada --
	   el marco ya excede 765px, sigue mandando max-width: 765×571 en
	   x=108, y=816, igual que antes. */
	width: 100%;
	max-width: 47.8125rem; /* 765px -- las tres imágenes miden 765/769/779px en su PSD, un solo tope sirve sin desviarse más de 14px */
	height: auto; /* conserva la proporción natural del archivo, 1452×1083 ≈ 765×571 */
	/* SIN margen aquí -- ver .ec-servicio-principal .ec-parallax, justo
	   abajo: va en el marco, no en la imagen. */
	margin: 0;
}

/* .ec-parallax (el marco, ver animaciones.css) es un bloque normal, sin
   ancho propio -- por su cuenta se queda a los 819px de la columna
   principal aunque el <img> de adentro ya mida 765px, y esos 54px de
   más quedan como ventana de recorte del parallax (overflow:hidden) más
   ancha de lo que pide el diseño. Selector propio de esta plantilla, no
   sobre .ec-parallax a secas: esa clase también la usa Industrias
   (templates/industrias.php), con su propio ancho de celda de rejilla,
   y no debe heredar este límite.
   El margen inferior (antes en la propia imagen) también se movió
   aquí: overflow:hidden hace que este marco SÍ cuente el margen inferior
   de su hijo dentro de su propio alto (como el viejo truco "clearfix"),
   así que un margin-bottom en la <img> dejaba el marco 61px más alto de
   lo que mide la foto -- vacío, invisible, pero de más. Con el margen en
   el marco en vez de en la imagen, el marco mide justo el alto real de
   la foto (571px) y el hueco hasta el siguiente bloque sigue siendo el
   mismo. */
.ec-servicio-principal .ec-parallax {
	max-width: 47.8125rem;
	margin: 0 0 6.3125rem;
}

/* --------------------------------------------------------------------------
   Fila de iconos — círculos naranjas con texto debajo
   --------------------------------------------------------------------------
   El PSD NO reparte los iconos en columnas iguales (ni en Mantenimiento
   Especializado -- 5 en una fila -- ni en Capacitación -- 3 arriba + 2
   abajo): cada etiqueta trae su PROPIO salto de línea manual en el PSD
   (verificado en el JSON crudo -- «Martillos DTH» son dos capas de texto,
   "Martillos" y "DTH", no una frase corrida que envuelve sola) y su
   propia caja, de un ancho distinto en cada caso. Por eso cada
   .ec-servicio-icono es una "rebanada" de ancho PROPIO por nth-child
   (donde el icono y su texto se centran con text-align/align-items), no
   columnas parejas -- un ancho compartido hacía que varias etiquetas
   envolvieran en una palabra distinta a la del PSD (verificado con
   ecVerificarPSD(): con 10rem para las cinco, "Martillos DTH" no
   envolvía y salía centrada 20px más ancha que su primera línea real,
   "Martillos" sola).

   El ancho de cada rebanada (.ec-servicio-icono) y el max-width de su
   .ec-servicio-icono-texto SIEMPRE van juntos, al mismo valor -- son los
   dos lados de la misma medida (dónde envuelve esa frase en particular).

   flex-wrap sigue resolviendo el salto de línea de Capacitación (3
   iconos + 2): las primeras tres rebanadas + sus márgenes miden más que
   el ancho de la columna principal (819px a 1440px, ver .ec-servicio-
   columnas), así que la cuarta pasa sola a la segunda línea, sin ningún
   salto de línea forzado a mano.
   ========================================================================== */

.ec-servicio-iconos {
	display: flex;
	flex-wrap: wrap;
	row-gap: 2.75rem; /* solo se ve en Capacitación (la única que envuelve a 2 filas) -- medido entre la primera y la segunda */
	margin: 0 0 3.75rem;
}

/* La imagen de Capacitación es más alta que la de Mantenimiento
   Especializado (573px contra 571px) y su intro es de dos párrafos en
   vez de uno -- el hueco hasta la fila de iconos no es el mismo en las
   dos páginas aunque compartan exactamente el mismo CSS de intro/imagen.
   Corrección propia de esta página, medida con ecVerificarPSD(). */
.ec-servicio-capacitacion-tecnica-y-operativa .ec-servicio-iconos {
	margin-top: -1.875rem;
}

.ec-servicio-icono {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto; /* el ancho lo da width, no un flex-basis en % -- cada nth-child fija el suyo, más abajo */
	gap: 0.75rem;
	text-align: center;
}

/* Mantenimiento Especializado -- 5 iconos en una sola fila. El primero
   arranca a la izquierda del propio borde de la columna principal
   (margin-left negativo): consecuencia real del PSD, no un error -- la
   fila de iconos es más ancha que el resto de la columna en esta
   página. Ancho de cada rebanada: el de su primera línea en el PSD
   ("Motores"/"Perforadoras y"/"Martillos"/"Máquinas" o "Perforadoras",
   la más ancha de sus tres líneas/"Compresores"), con margen para que
   quepa sin partirse pero sin llegar a caber la palabra siguiente (así
   envuelve donde envuelve el PSD). */
.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(1) {
	width: 7.5rem; /* 120px -- «Motores» (65px) cabe, «Motores Neumáticos» junto (163px) no */
	/* -1.78125rem, no el -0.90625rem "centrado" contra el ancho de la
	   rebanada: la segunda línea del PSD («Neumáticos», 94px) es más
	   ancha que la primera («Motores», 65px) -- ecVerificarPSD() mide
	   la tinta de la PRIMERA línea contra el x1 del PSD, que en un texto
	   así (centrado, pero con la segunda línea más ancha) marca donde
	   arranca esa SEGUNDA línea, no la primera. 14px de corrección,
	   medidos con la propia herramienta -- ver el mismo ajuste en el
	   nth-child(4) de abajo, mismo motivo. */
	margin-left: -1.78125rem;
}
.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(2) {
	width: 9.375rem; /* 150px -- «Perforadoras y» (119px) cabe, + «Rompedoras» (224px) no */
	/* En flex, el margin-left de CADA icono se suma al de los anteriores
	   (cada uno arranca donde terminó el previo) -- el ajuste de 14px del
	   nth-child(1) también corrió este y los siguientes, así que este
	   compensa esos mismos 14px de vuelta. */
	margin-left: 3.8125rem;
}
.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(3) {
	width: 5.625rem; /* 90px -- «Martillos» (69px) cabe, «Martillos DTH» junto (110px) no */
	margin-left: 3.3125rem;
}
.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(4) {
	width: 9.375rem; /* 150px -- «Perforadoras» (106px, la más ancha de las tres líneas) cabe, + «Neumáticas»/"Máquinas" no */
	/* Mismo motivo que el nth-child(1) de arriba: la línea más ancha del
	   PSD («Perforadoras», la segunda de tres) no es la primera
	   («Máquinas») -- 14px de corrección medidos con la herramienta. */
	margin-left: 1.8125rem;
}
.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(5) {
	width: 7.1875rem; /* 115px -- «Compresores» (106px) cabe, + «de» (129px) no */
	/* Compensa, igual que el nth-child(2) de arriba, el ajuste en cascada
	   del nth-child(4) (14px) que le precede. */
	margin-left: 2.5rem;
}

/* Capacitación Técnica y Operativa -- 3 arriba, 2 abajo (ver el
   comentario grande, arriba, sobre el salto de línea). Mismo criterio de
   ancho por su primera línea (o la más ancha de las dos) que Mantenimiento
   Especializado, arriba -- estas frases son mucho más largas, por eso las
   rebanadas son bastante más anchas. */
.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(1) {
	width: 14.6875rem; /* 235px -- «Operación correcta y segura» (225px) */
	margin-left: -0.34375rem;
}
.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(2) {
	width: 15rem; /* 240px -- «mantenimiento preventivo» (208px, más ancha que la primera línea) */
	/* En flex, el margin-left de cada icono se suma al de los anteriores
	   (cada uno arranca donde terminó el previo) -- ver el mismo aviso en
	   Mantenimiento Especializado, arriba. */
	margin-left: 0.53125rem;
}
.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(3) {
	width: 13.125rem; /* 210px -- «Armado, desarmado y» (178px) */
	margin-left: 6.5625rem;
}
.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(4) {
	width: 15rem; /* 240px -- «comunes y soluciones básicas» (230px, más ancha que la primera línea) */
	/* Primero de la segunda fila -- flex-wrap arranca de nuevo desde el
	   borde del contenedor, no en cascada con la fila de arriba. */
	margin-left: 5.5625rem;
}
.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(5) {
	width: 16.5625rem; /* 265px -- «Optimización del rendimiento» (232px) */
	margin-left: 4.96875rem;
}

.ec-servicio-icono-imagen {
	/* Reverificado en vivo a 1440px (getBoundingClientRect): 80×80px
	   exactos con la fuente base a 16px — 5rem ya es el valor correcto,
	   no hacía falta tocarlo. Tamaño fijo, independiente del ancho de la
	   rebanada (arriba): se centra solo con el align-items:center del
	   contenedor. */
	width: 5rem;
	height: 5rem;
	border-radius: 50%; /* la imagen por omisión ya trae el círculo naranja dibujado; esto es red de seguridad si algún día se sube un icono que no lo traiga */
	object-fit: cover;
}

.ec-servicio-icono-texto {
	/* SIN max-width aquí -- cada nth-child de arriba fija el suyo, al
	   mismo valor que el width de su .ec-servicio-icono (ver el
	   comentario grande de la sección): son las dos mitades de la misma
	   medida, tienen que coincidir. */
	font-size: 1.1125rem; /* 17.8px, medido del PSD (antes 17px) */
	font-weight: var(--ec-peso-medium);
	line-height: 1.1472; /* 20.42 ÷ 17.8, el interlineado del PSD */
	color: var(--ec-texto-lista);
}

.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(1) .ec-servicio-icono-texto { max-width: 7.5rem; }
.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(2) .ec-servicio-icono-texto { max-width: 9.375rem; }
.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(3) .ec-servicio-icono-texto { max-width: 5.625rem; }
.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(4) .ec-servicio-icono-texto { max-width: 9.375rem; }
.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(5) .ec-servicio-icono-texto { max-width: 7.1875rem; }
.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(1) .ec-servicio-icono-texto { max-width: 14.6875rem; }
.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(2) .ec-servicio-icono-texto { max-width: 15rem; }
.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(3) .ec-servicio-icono-texto { max-width: 13.125rem; }
.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(4) .ec-servicio-icono-texto { max-width: 15rem; }
.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(5) .ec-servicio-icono-texto { max-width: 16.5625rem; }

/* --------------------------------------------------------------------------
   Lista — título en mayúsculas + dos columnas con palomita
   -------------------------------------------------------------------------- */

.ec-servicio-lista-bloque {
	margin: 0 0 3rem;
}

/* Venta de Refacciones es la única página donde la lista va justo
   después de la imagen (sin fila de iconos de por medio, ver
   templates/servicio.php) -- el hueco imagen→lista no es el mismo que
   imagen→fila de iconos (Mantenimiento Especializado/Capacitación, ver
   .ec-servicio-imagen), así que necesita su propio ajuste. Medido con
   ecVerificarPSD(). */
.ec-servicio-venta-de-refacciones .ec-servicio-lista-bloque {
	/* Negativo: .ec-parallax (el marco de la imagen) establece su propio
	   contexto de bloque (overflow:hidden, para el parallax) -- el
	   margin-bottom de la imagen no colapsa con este margin-top, se suma.
	   Verificado con ecVerificarPSD(): +22px dejó el doble de hueco
	   (44px) en vez de restarlo. */
	margin-top: -1.375rem;
}

.ec-servicio-lista-titulo {
	margin: 0 0 0.9375rem;
	font-size: 1.321875rem; /* 21.15px, medido del PSD (antes 20px) -- mismo tamaño que «Datos Contacto» */
	font-weight: var(--ec-peso-semibold); /* antes bold -- el PSD pide 600 */
	text-transform: uppercase;
	/* Sin letter-spacing: el PSD no trae tracking en este texto (antes
	   0.02em, sin medir). */
	color: var(--ec-texto);
}

.ec-servicio-lista {
	display: grid;
	/* 367fr 367fr (dos columnas IGUALES, en fr no en rem): a 819px de
	   columna principal (1440px de ventana) resuelve a 367px cada una +
	   85px de hueco, medido del PSD -- la segunda columna NO arranca a la
	   mitad del ancho disponible con un hueco de 3rem, como antes, sino
	   85px más allá de donde termina la primera. En fr en vez de rem para
	   que sea fluido por debajo de 1440 (rem fijo se salía del contenedor
	   en tablet y provocaba scroll horizontal). */
	grid-template-columns: 367fr 367fr;
	gap: 0 5.3125rem;
}

.ec-servicio-lista-columna {
	margin: 0;
	padding: 0;
	list-style: none;
	/* 0.5rem (8px): dónde arranca la palomita dentro de su columna,
	   medido del PSD de Mantenimiento -- Venta de Refacciones lo pisa con
	   su propio valor, ver más abajo (los dos PSD no miden igual, no es
	   un error de conversión). En margin, no padding, porque el de Venta
	   de Refacciones es negativo. */
	margin-left: 0.5rem;
}

.ec-servicio-lista-columna li {
	display: flex;
	align-items: flex-start;
	/* 0.5625rem (9px): hueco entre la palomita (15px) y el texto, medido
	   del PSD -- junto con el margin-left de la columna, de arriba, deja
	   el texto en x=139 (columna izquierda) / x=591 (derecha) a 1440px. */
	gap: 0.5625rem;
	/* Sin margen entre elementos: el interlineado de abajo (29.17px, el
	   del PSD) YA es la distancia real entre líneas base consecutivas —
	   un margen aquí se sumaría a eso y correría cada línea base más de
	   lo que pide el PSD. ecVerificarPSD() valida esto por <li> (ver el
	   encargo): sin el interlineado exacto, o con margen aquí, la
	   herramienta lo marca como diferencia. */
	margin: 0;
	font-size: 1.1125rem; /* 17.8px, medido del PSD (antes 17.5px) -- mismo tamaño que el texto de los iconos */
	font-weight: var(--ec-peso-medium); /* antes sin peso propio (heredaba 400) -- el PSD pide 500 */
	line-height: 29.17px; /* el interlineado del PSD, en px -- es la distancia entre líneas base que exige el encargo, no una proporción */
	color: var(--ec-texto-lista);
}

.ec-servicio-lista-icono {
	flex-shrink: 0;
	margin-top: 0.45em; /* recalibrado junto con el interlineado de arriba, más alto que antes -- centra la palomita de 15px en el renglón */
	width: 15px; /* el SVG trae 20×20 -- el PSD pide 15×15 */
	height: 15px;
	color: var(--ec-naranja); /* el SVG usa stroke="currentColor" */
}

/* Venta de Refacciones -- su PSD no mide igual que el de Mantenimiento
   Especializado (columna izquierda 13px más a la izquierda: x=102 contra
   x=115) -- no es un error de conversión, cada PSD trae su propio dato
   (ver el comentario grande de templates/servicio.php sobre esta
   clase). El resto de la rejilla (ancho de columna, hueco entre
   columnas, hueco icono-texto) sí coincide entre los dos PSD -- por eso
   esto es lo único que hace falta pisar aquí. */
.ec-servicio-venta-de-refacciones .ec-servicio-lista-columna {
	margin-left: -0.3125rem; /* -5px */
}

/* --------------------------------------------------------------------------
   Galería (hasta 3 imágenes)
   --------------------------------------------------------------------------
   El PSD (Venta de Refacciones) NO es una rejilla pareja: son 3 recortes de
   producto de distinto tamaño y altura (223×206 / 185×169 / 218×203),
   apoyados casi en la misma línea inferior (bottom≈1883/1880/1892, a 12px
   entre sí -- ruido de medición, no tres alturas distintas a propósito) y
   con huecos DISTINTOS entre ellos (80px / 99px) -- por eso flex con
   márgenes en cascada (mismo criterio que .ec-servicio-iconos-5 más
   arriba), no una rejilla de columnas iguales. Las fotos reales no son
   recortes -- son fotos de producto completas sobre fondo claro -- así que
   se escalan con object-fit:contain (nunca cover, para no recortarlas) y
   cada marco fija su propio aspect-ratio en vez de una altura común.

   Porcentajes, no rem, para las tres medidas (ancho y los dos huecos): la
   columna principal (.ec-servicio-principal) se angosta fluido por debajo
   de 1440 (grid 1fr, ver .ec-servicio-columnas) -- con anchos fijos la
   galería se saldría de una columna ya angosta en vez de encogerse con
   ella. Los tres % están calculados sobre 819px (el ancho de esa columna a
   1440px, ver el comentario de .ec-servicio-columnas): 223, 185 y 218px de
   ancho, huecos de 80 y 99px -- así el 1440 exacto reproduce el PSD y
   cualquier ancho menor escala las tres fotos y los dos huecos por igual,
   proporcionales entre sí.
   -------------------------------------------------------------------------- */

.ec-servicio-galeria {
	display: flex;
	align-items: flex-end; /* las tres fotos comparten casi la misma línea inferior, no la superior */
	flex-wrap: wrap; /* red de seguridad: si algún día no cupieran, la tercera baja en vez de desbordar */
}

.ec-servicio-galeria .ec-zoom-hover {
	flex: 0 0 auto;
}

.ec-servicio-galeria .ec-zoom-hover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain; /* fotos completas, nunca recortadas -- ver el comentario grande de arriba */
}

.ec-servicio-galeria .ec-zoom-hover:nth-child(1) {
	width: 27.228%; /* 223 ÷ 819 */
	aspect-ratio: 223 / 206;
	margin-left: 0.366%; /* 3px -- el PSD arranca la galería 3px después del borde de la columna (x110 contra x107), no exacto en el borde */
}
.ec-servicio-galeria .ec-zoom-hover:nth-child(2) {
	width: 22.589%; /* 185 ÷ 819 */
	aspect-ratio: 185 / 169;
	margin-left: 9.768%; /* 80px de hueco (medido del PSD: x413 − (x110+223)) ÷ 819 */
}
.ec-servicio-galeria .ec-zoom-hover:nth-child(3) {
	width: 26.618%; /* 218 ÷ 819 */
	aspect-ratio: 218 / 203;
	margin-left: 12.088%; /* 99px de hueco (medido del PSD: x697 − (x413+185)) ÷ 819 */
}

/* --------------------------------------------------------------------------
   Tarjeta «Datos Contacto»
   --------------------------------------------------------------------------
   Fondo blanco con sombra suave, sin bordes marcados — la sombra en
   rgba() es la excepción explícita a "sin hex sueltos fuera de :root".
   Dirección, correo y teléfonos SIN enlace: el diseño no los dibuja como
   clicables (regla 1 del encargo).
   ========================================================================== */

.ec-servicio-tarjeta {
	align-self: start;
	/* -1rem: el PSD arranca la tarjeta 16px más arriba que el H1 de la
	   columna principal, aunque align-items:start (en .ec-servicio-
	   columnas) alinee las dos columnas en la misma línea de la rejilla —
	   verificado con ecVerificarPSD() en las tres páginas. */
	margin-top: -1rem;
	/* Asimétrico, medido del PSD: 58px a la izquierda (donde alinean el
	   título y el texto de cada fila — los iconos SALEN un poco de ese
	   margen, ver .ec-servicio-tarjeta-fila más abajo), 35px arriba
	   (hasta la tinta de «Datos Contacto»), 36px derecha, 28px abajo. */
	padding: 2.1875rem 2.25rem 1.75rem 3.625rem;
	background-color: var(--ec-blanco);
	border-radius: 0.5rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.ec-servicio-tarjeta-titulo {
	margin: 0 0 0.625rem;
	font-size: 1.321875rem; /* 21.15px, medido del PSD (antes 20px, sin medir) */
	font-weight: var(--ec-peso-semibold); /* antes bold -- el PSD pide 600 */
	color: var(--ec-texto);
}

.ec-servicio-tarjeta-fila {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	/* El icono sale ~30px (su propio ancho de 18px + el gap de arriba) a
	   la izquierda del padding de la tarjeta -- así el TEXTO (no el
	   icono) es el que queda alineado con el título, que no lleva icono.
	   Medido del PSD: icono x~993/995/998, texto x~1023/1023/1025, la
	   tarjeta arranca en x966 -- la diferencia entre icono y texto es
	   siempre ~30px, y el texto solo, sin este margen, cae en el mismo x
	   que el título (58px). */
	margin: 0 0 1.3125rem -1.875rem;
	font-size: 1.035625rem; /* 16.57px, medido del PSD (antes 16.5px) */
	/* 400 explícito: dentro de la tarjeta de oficinas (más abajo) el
	   contenedor pinta 700 -- sin esto, el teléfono (que sí vive en este
	   párrafo) lo heredaría por error. El nombre de oficina pisa esto con
	   su propio peso, ver .ec-servicio-tarjeta-oficina-nombre. */
	font-weight: var(--ec-peso-regular);
	line-height: 1.3995; /* 23.19 ÷ 16.57, el interlineado del PSD */
	color: var(--ec-texto-secundario);
	/* Sin efecto a 1440 (nada necesita partirse ahí) -- encontrado al
	   comprobar 1024 (defecto del 10 sep): con la tarjeta en 320px, el
	   correo (una sola palabra, sin espacio donde envolver) se desbordaba
	   32px hacia la derecha. */
	overflow-wrap: anywhere;
}

.ec-servicio-tarjeta-icono {
	flex-shrink: 0;
	margin-top: 0.15em;
	color: var(--ec-texto); /* el SVG usa stroke="currentColor"; el diseño los pinta oscuros, no naranjas */
}

.ec-servicio-tarjeta-oficinas {
	margin: 0 0 1.75rem;
	/* El PSD trae las 4 oficinas como UN SOLO texto con saltos de línea
	   (Outfit 700, 16.57px, interlineado 23.19px, #000000 -- ver el
	   encargo), pero el marcado usa un <p class="ec-servicio-tarjeta-
	   fila"> por oficina (así ec_oficinas() puede omitir una sin
	   teléfono, ver inc/contacto.php) -- por eso ecVerificarPSD() compara
	   contra ESTE contenedor, no contra cada <p> suelto. El teléfono de
	   cada fila pisa peso/color con sus propios valores (.ec-servicio-
	   tarjeta-fila, arriba) y el nombre de oficina con los suyos (.ec-
	   servicio-tarjeta-oficina-nombre, abajo) -- esto solo fija el estilo
	   BASE que mide la herramienta (el de "CDMX", que en el PSD no lleva
	   ningún tramo propio). */
	font-size: 1.035625rem; /* 16.57px */
	font-weight: var(--ec-peso-bold);
	line-height: 1.3995; /* 23.19 ÷ 16.57 */
	color: var(--ec-negro-oficina);
}

.ec-servicio-tarjeta-oficinas .ec-servicio-tarjeta-fila {
	margin-bottom: 0.5rem; /* más apretado que el resto de filas: son 4 renglones cortos, no párrafos */
}

.ec-servicio-tarjeta-oficinas .ec-servicio-tarjeta-fila:last-child {
	margin-bottom: 0;
}

.ec-servicio-tarjeta-oficina-nombre {
	margin-right: 0.3em;
	/* #000000 puro, no --ec-texto (#1C1C1C): el PSD da los cuatro nombres
	   en negro puro, distinto del resto de la tarjeta. En el PSD MÉRIDA
	   sale en peso 600 -- descuido del diseñador, ver el encargo -- las
	   cuatro van en 700 aquí, como las otras tres. */
	color: var(--ec-negro-oficina);
	font-weight: var(--ec-peso-bold);
	text-transform: uppercase; /* pedido del encargo: en mayúsculas vía CSS, no en el dato guardado */
}

.ec-servicio-tarjeta-whatsapp {
	margin-top: 1.8125rem;
	margin-left: -1.5rem; /* acerca el botón a su x del PSD -- ver el comentario de .ec-servicio-tarjeta-fila, mismo criterio */
}

/* Tamaño propio del botón SOLO en esta tarjeta -- .ec-boton-whatsapp (más
   abajo en este archivo) es un componente compartido con la ficha de
   producto, que no tiene PSD de esta ronda; 17.31px es la medida de ESTE
   botón en el PSD de Servicios, así que se ajusta aquí con un selector
   más específico en vez de tocar el tamaño del componente base. */
.ec-servicio-tarjeta-whatsapp .ec-boton-whatsapp {
	font-size: 1.081875rem; /* 17.31px */
}

/* --------------------------------------------------------------------------
   Banda naranja de cierre
   --------------------------------------------------------------------------
   A todo el ancho, mismo truco 100vw que el hero. El PSD NO reparte las
   tres columnas en tercios iguales (482px / 462px / 496px, medidos por
   los separadores -- ver más abajo) ni con el mismo hueco icono-texto en
   las tres (20px / 19px / 24px) -- por eso .ec-servicio-banda-interior
   es un lienzo de 1440px (igual que .ec-servicio-contenedor) con las tres
   columnas a su ancho exacto, y cada columna lleva su propio padding-left
   e icono a su propio tamaño, en vez de una rejilla pareja con un icono
   de tamaño único (la versión anterior). Separadores en var(--ec-separador)
   como ::before de la propia columna -- position:absolute en vez de
   border-left, porque el PSD los da con una altura fija (123px) menor
   que la banda completa (220px), no de borde a borde. Sin enlaces ni
   hover: el diseño no dibuja esta banda como clicable (regla 1 del
   encargo).
   ========================================================================== */

.ec-servicio-banda {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background-color: var(--ec-naranja);
}

.ec-servicio-banda-interior {
	max-width: 90rem; /* 1440px, mismo criterio que .ec-servicio-contenedor -- ver su comentario */
	margin: 0 auto;
	/* Vertical: hueco medido entre el borde de la banda y la tinta del
	   título/descripción de cada columna. */
	padding: 1.625rem 0;
	display: grid;
	/* 482fr / 462fr / 496fr -- el ancho real de cada columna en el PSD,
	   medido por los separadores (Rectángulo 19 en x=482 y x=944 -- ver
	   más abajo), no tercios iguales. En fr, no rem: a 1440px de ventana
	   (el max-width de arriba) resuelve exacto a 482px/462px/496px, y por
	   debajo escala fluido -- con rem fijo, estas tres columnas sumaban
	   1440px sin importar el ancho de la ventana y se salían del
	   contenedor en tablet, provocando scroll horizontal. */
	grid-template-columns: 482fr 462fr 496fr;
}

.ec-servicio-banda-columna {
	position: relative; /* ancla el separador ::before de las columnas 2 y 3 */
	display: flex;
	align-items: flex-start;
	padding-right: 1.5rem; /* aire antes del separador de la siguiente columna; la última no lo necesita pero tampoco estorba */
}

/* Cada columna arranca su icono en su propio x del PSD (90 / 47 / 91px
   desde el borde de SU columna, no del borde de la banda) y deja el
   hueco medido hasta el título/descripción (20 / 19 / 24px) -- ver el
   comentario grande de arriba. */
.ec-servicio-banda-columna:nth-child(1) {
	padding-left: 5.625rem; /* 90px */
	gap: 1.25rem; /* 20px */
}
.ec-servicio-banda-columna:nth-child(2) {
	padding-left: 2.9375rem; /* 47px */
	gap: 1.1875rem; /* 19px */
}
.ec-servicio-banda-columna:nth-child(3) {
	padding-left: 5.6875rem; /* 91px */
	gap: 1.5rem; /* 24px */
}

.ec-servicio-banda-columna:not(:first-child)::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 123px; /* medido del PSD -- menor que el alto completo de la banda, por eso ::before y no border-left */
	background-color: var(--ec-separador);
}

.ec-servicio-banda-icono {
	flex-shrink: 0;
	margin-top: 0.15em;
}

/* Cada icono a su propio tamaño del PSD -- no son el mismo dibujo
   escalado, cada uno trae su propia proporción. */
.ec-servicio-banda-columna:nth-child(1) .ec-servicio-banda-icono {
	width: 3.125rem; /* 50px */
	height: 3.3125rem; /* 53px */
}
.ec-servicio-banda-columna:nth-child(2) .ec-servicio-banda-icono {
	width: 3.75rem; /* 60px */
	height: 3.375rem; /* 54px */
}
.ec-servicio-banda-columna:nth-child(3) .ec-servicio-banda-icono {
	width: 2rem; /* 32px */
	height: 3.4375rem; /* 55px */
}

.ec-servicio-banda-titulo {
	margin: 0 0 0.1625rem;
	color: var(--ec-blanco);
	font-size: 1.00125rem; /* 16.02px, medido del PSD (antes 15.5px) */
	font-weight: var(--ec-peso-semibold); /* antes bold -- el PSD pide 600 */
}

.ec-servicio-banda-descripcion {
	margin: 0;
	color: var(--ec-blanco);
	font-size: 0.834375rem; /* 13.35px, medido del PSD (antes 13px) */
	/* El PSD no trae interlineado propio en este texto (auto) -- 1.3 es
	   una proporción razonable a este tamaño, no un valor medido. */
	line-height: 1.3;
}



/* ==========================================================================
   Nosotros
   ==========================================================================
   (Sección vacía — se llena al construir la página.)
   ========================================================================== */



/* ==========================================================================
   Contacto
   ==========================================================================
   (Sección vacía — se llena al construir la página.)
   ========================================================================== */



/* ==========================================================================
   Blog
   ==========================================================================
   (Sección vacía — se llena al construir la página.)
   ========================================================================== */



/* ==========================================================================
   Página de texto (aviso de privacidad y demás legales)
   ==========================================================================
   Sin PSD de esta ronda (ver templates/pagina-texto.php) -- usa la
   tipografía y los componentes del resto del sitio, no un diseño propio
   medido a píxel. El hero comparte parcial con Servicios/Industrias (ver
   el modificador .ec-servicio-hero--texto en la sección Servicios,
   arriba); aquí solo va el contenido, una columna centrada con
   the_content() del editor de WordPress.

   Estilos EXPLÍCITOS para h2/h3/p/ul/ol/a/strong/hr: el reset de mymedi
   toca los cuatro primeros (list-style:inside sin sangría propia,
   line-height e interlineado fijos en <li>, etc. -- ver 1-reset.css) y
   sin esto el texto del editor saldría con esos valores, no los de este
   tema.
   ========================================================================== */

.ec-pagina-texto-contenido {
	max-width: 52.5rem; /* 840px, el ancho máximo pedido */
	margin: 0 auto;
	padding: 4rem 1.5rem 5rem;
}

.ec-pagina-texto-contenido h2 {
	margin: 2.5rem 0 1rem;
	font-size: 2rem; /* 32px */
	font-weight: var(--ec-peso-bold);
	color: var(--ec-texto);
}

/* El primer título no necesita el mismo aire de "nueva sección" que los
   siguientes -- ya viene justo después del hero. */
.ec-pagina-texto-contenido > h2:first-child {
	margin-top: 0;
}

.ec-pagina-texto-contenido h3 {
	margin: 2rem 0 0.75rem;
	font-size: 1.5rem; /* 24px */
	font-weight: var(--ec-peso-semibold);
	color: var(--ec-texto);
}

.ec-pagina-texto-contenido p {
	margin: 0 0 1.25rem;
	font-size: 1.125rem; /* 18px */
	font-weight: var(--ec-peso-regular);
	line-height: 1.6;
	color: var(--ec-texto);
}

.ec-pagina-texto-contenido ul,
.ec-pagina-texto-contenido ol {
	margin: 0 0 1.25rem;
	padding-left: 1.5rem; /* sangría -- el reset de mymedi trae list-style:inside, sin sangría propia */
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--ec-texto);
}

.ec-pagina-texto-contenido ul {
	list-style: disc outside;
}

.ec-pagina-texto-contenido ol {
	list-style: decimal outside;
}

.ec-pagina-texto-contenido li {
	margin-bottom: 0.5rem;
	padding: 0; /* anula el "padding:8px 0" del reset -- el espaciado ya lo da el margin-bottom de arriba */
}

.ec-pagina-texto-contenido li:last-child {
	margin-bottom: 0;
}

/* Sin :hover propio -- la regla genérica "a:hover{color:var(--ec-naranja)}"
   (sección GENERADA, arriba) ya cubre todo el sitio, este enlace incluido. */
.ec-pagina-texto-contenido a {
	color: var(--ec-naranja);
	text-decoration: underline;
}

.ec-pagina-texto-contenido strong {
	font-weight: var(--ec-peso-bold);
}

.ec-pagina-texto-contenido hr {
	margin: 2.5rem 0;
	height: 0;
	border: 0;
	border-top: 1px solid var(--ec-gris-lineas);
}



/* ==========================================================================
   Responsive
   ==========================================================================
   Dos breakpoints: tablet (≤1024) y móvil (≤767), sobre el enfoque
   desktop-first del resto del archivo.
   ========================================================================== */

/* --- Tablet (≤1024px) --------------------------------------------------- */
@media (max-width: 1024px) {
	.footer-container > div {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Servicios: la tarjeta de contacto se angosta un poco en vez de
	   apilarse todavía — a este ancho sigue habiendo sitio para las dos
	   columnas, solo más ajustadas (ver el apilado completo en móvil). */
	.ec-servicio-columnas {
		grid-template-columns: 1fr 20rem;
		gap: 2rem;
		padding-top: 5rem;
		/* El min-height de 1576px (ver la regla base) es para igualar la
		   banda entre las tres páginas exactamente a 1440px -- por debajo
		   de eso ya no hay un PNG de referencia que lo exija, y a este
		   ancho dejaría un hueco enorme antes de la banda en las páginas
		   con menos contenido. */
		min-height: 0;
	}

	/* Los anchos y el margin-left "a medida" de cada icono (ver la
	   sección "Fila de iconos" en el CSS de escritorio) son exactos para
	   los 819px de columna principal que hay a 1440px de ventana -- por
	   debajo de eso la columna ya no mide eso, así que aquí se resetean a
	   un reparto parejo y fluido (dos por fila): el encargo no da un PNG
	   de referencia de esta fila por debajo de 1440, solo pide un apilado
	   razonable. Hay que repetir los mismos selectores nth-child de la
	   versión de escritorio -- un selector más corto no les gana. */
	.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(1),
	.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(2),
	.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(3),
	.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(4),
	.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(5),
	.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(1),
	.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(2),
	.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(3),
	.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(4),
	.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(5) {
		width: auto;
		flex: 0 0 50%;
		margin-left: 0;
	}

	.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(1) .ec-servicio-icono-texto,
	.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(2) .ec-servicio-icono-texto,
	.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(3) .ec-servicio-icono-texto,
	.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(4) .ec-servicio-icono-texto,
	.ec-servicio-iconos-5 .ec-servicio-icono:nth-child(5) .ec-servicio-icono-texto,
	.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(1) .ec-servicio-icono-texto,
	.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(2) .ec-servicio-icono-texto,
	.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(3) .ec-servicio-icono-texto,
	.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(4) .ec-servicio-icono-texto,
	.ec-servicio-iconos-3 .ec-servicio-icono:nth-child(5) .ec-servicio-icono-texto {
		max-width: 11rem;
	}

	/* Mismo motivo que los iconos, arriba: el padding-left/gap "a medida"
	   de cada columna de la banda (ver esa sección) es exacto para
	   1440px -- aquí se resetea a algo parejo. La rejilla en sí (482fr /
	   462fr / 496fr) ya es fluida sola, no hace falta tocarla. */
	.ec-servicio-banda-columna:nth-child(1),
	.ec-servicio-banda-columna:nth-child(2),
	.ec-servicio-banda-columna:nth-child(3) {
		padding-left: 0;
		gap: 0.75rem;
	}
}

/* --- Tablet angosto (≤980px) --------------------------------------------
   Defecto del 10 sep: a este ancho la columna principal ya no cabe cómoda
   junto a la tarjeta -- a 768px, con la tarjeta en 20rem (320px) y el
   padding/gap del @media de arriba, la principal baja a solo 230px
   (768 − 107 − 79 − 32 − 320) y el H1 se desborda. Se apilan igual que en
   móvil (columna principal primero, tarjeta después -- ya es el orden real
   del HTML) por debajo del ancho donde esa cuenta bajaría de ~440px:
   980 − 107 − 79 − 32 − 320 = 442px, el último ancho "cómodo" antes de
   apilar -- de 981 a 1024 se queda side-by-side con el CSS del @media de
   arriba. Este bloque solo AÑADE el apilado: los iconos a 2 por fila, la
   banda sin padding a medida y min-height:0 ya se heredan de ahí, valen
   igual apilado o no. --------------------------------------------------- */
@media (max-width: 980px) {
	.ec-servicio-columnas {
		grid-template-columns: 1fr;
	}

	/* Sin esto, el grid de una columna estira la tarjeta a todo el ancho
	   disponible (justify-items normal = stretch) y deja de leerse como
	   tarjeta -- se topa a su ancho de escritorio en vez de estirarse. */
	.ec-servicio-tarjeta {
		max-width: 24.6875rem; /* 395px, el ancho de la tarjeta en escritorio */
	}
}

/* --- Móvil (≤767px) ------------------------------------------------------ */
@media (max-width: 767px) {
	.footer-container > div {
		grid-template-columns: 1fr;
	}

	/* A este ancho mymedi cambia a su propio menú — nav.mobile-menu, aparte
	   de nav.main-menu.pc-menu.ts-mega-menu-wrapper (el de escritorio) —
	   CONFIRMADO en vivo. No hace falta anular aquí el position:absolute de
	   .menu-wrapper (ver la sección Geometría del Header, arriba): mymedi ya
	   pone display:none!important en .menu-wrapper.hidden-ipad a este ancho
	   (y desde antes, ≤1279px — ver 2-mymedi.css), así que ese elemento no
	   participa del layout aquí sin que este archivo tenga que decirlo. */

	/* Logo con el mismo margen a la izquierda que el resto del sitio, pero
	   más angosto -- 38px se ve desproporcionado en un header de 375px de
	   ancho. Misma especificidad que la regla de escritorio (Geometría,
	   arriba), gana por venir después en el archivo. Alto bajado de 125px
	   (36+53+36 de relleno, el mismo logo de 97×53) a 93px (20+53+20):
	   defecto del 10 sep -- 125px era el 15% del alto de un iPhone SE, más
	   de lo que un header fijo debe ocupar en móvil. Mismo selector que
	   la Geometría de escritorio -- cubre los tres estados (hero/sticky/
	   sin hero) con una sola regla, igual que esa. */
	.ts-header .header-middle > .container {
		padding-left: 20px;
		padding-right: 20px;
		height: 93px;
	}

	/* --- Logos --------------------------------------------------------
	   Mitad móvil del "Caso 2" de la sección Logos, más arriba (header
	   fijo con logo blanco): a este ancho mymedi ya prefiere mobile-logo
	   sobre normal-logo por su cuenta (ver sus reglas, citadas en ese
	   mismo comentario), así que solo hace falta invertir aquí lo que el
	   Caso 2 puso para escritorio (mostrar normal-logo) y mostrar
	   mobile-logo en su lugar -- misma especificidad que esa regla, pero
	   esta gana por venir después en el archivo. sticky-logo no hace
	   falta repetirlo: su "display:none" del Caso 2 no lleva @media, así
	   que ya aplica en cualquier ancho, móvil incluido. */
	.ts-header .header-template > div.is-sticky .logo-wrapper .normal-logo {
		display: none;
	}

	.ts-header .header-template > div.is-sticky .logo-wrapper .mobile-logo {
		display: block;
	}

	/* --- Servicios ------------------------------------------------------
	   Las columnas se apilan (la columna principal primero, la tarjeta de
	   contacto después — ya es el orden real del HTML, ver
	   templates/servicio.php, así que basta con pasar la rejilla a una
	   sola columna). Los iconos bajan a 2 columnas y la lista a 1.

	   Altura subida de 18rem a 24rem (contenido de la tarea C, no de esta
	   sección): con el header ahora siempre a 125px exactos (ver la
	   Geometría del Header, arriba) -- antes no lo estaba, por eso no se
	   había visto este encimado -- un hero de 18rem/288px dejaba el título
	   de "Mantenimiento Especializado" (el más largo de las tres páginas,
	   envuelve a 3 líneas a este ancho) empezando bajo el propio header.
	   24rem le da el aire que ese título necesita sin tocar el título ni
	   su tamaño -- ver la nota "regla 1" del encargo sobre no tocar
	   contenido salvo lo imprescindible para que el header no lo tape. */
	.ec-servicio-hero {
		height: 24rem;
	}

	/* .ec-servicio-hero-contenido hereda el padding-bottom de escritorio
	   (7.25rem) si no se corrige aquí -- sobre un hero de 24rem (384px,
	   contra 26rem/416px en escritorio) eso deja casi el 40% del hero
	   vacío bajo la flecha. Recalculado con la MISMA fórmula que fijó el
	   valor de escritorio (ver el comentario de .ec-servicio-hero-contenido
	   más arriba): con flex-direction:column + justify-content:flex-end,
	   el centro de la flecha (28px de alto) queda a "altura del hero -
	   padding-bottom - 14px" de su borde superior. En escritorio,
	   416 - 116 - 14 = 286px = 68.75% de 416px (el ~69% del comentario de
	   arriba, sin redondear). Despejando ese mismo 68.75% para un hero de
	   384px: padding-bottom = 384 - 14 - (0.6875 × 384) = 106px = 6.625rem.
	   Verificado en vivo a 375px: dado el título más largo del diseño en
	   móvil, las tres páginas envuelven a 2+ líneas a este ancho (a
	   diferencia de escritorio, donde dos de las tres caben en una) -- así
	   que el centro del título ya no cae exacto en el 56% (consecuencia
	   esperada del layout flexible, mismo criterio que ya deja constancia
	   el comentario de escritorio para Mantenimiento Especializado); el
	   ancla fiable es la flecha, de tamaño fijo, y esa sí cae en el 69%
	   buscado. */
	.ec-servicio-hero-contenido {
		padding-bottom: 6.625rem;
	}

	/* Página de texto -- mismo criterio que la regla de escritorio
	   (arriba): min-height en vez de alto fijo, aquí con el header a
	   93px. display:flex y justify-content ya vienen de esa regla (sin
	   @media, aplican en cualquier ancho).

	   height:auto SÍ hay que repetirlo aquí: .ec-servicio-hero (la clase
	   base) trae su propio height:24rem unas líneas arriba en este mismo
	   @media (ver "Servicios") -- misma especificidad y viene después
	   que el height:auto de escritorio, así que sin este reset ESE era
	   el height que ganaba a este ancho (defecto encontrado al verificar
	   en vivo: el hero medía 384px, no 220px). */
	.ec-servicio-hero--texto {
		height: auto;
		min-height: 13.75rem; /* 220px */
	}

	.ec-servicio-hero--texto .ec-servicio-hero-contenido {
		/* 109px = 93px del header en este ancho + 16px de aire mínimo --
		   mismo criterio que el padding-top de escritorio (ver su
		   comentario, arriba). */
		padding-top: 6.8125rem; /* 109px = 93px header + 16px */
		padding-bottom: 1.5rem;
	}

	/* .ec-servicio-hero-titulo y .ec-servicio-titulo (el H1) ya NO llevan
	   font-size aquí: sus reglas base ahora son clamp() con vw y cubren
	   todo el rango, móvil incluido — una regla fija en este @media
	   competiría con ese clamp() en vez de complementarlo. Ver el
	   comentario de cada una en la sección Servicios más arriba. */

	.ec-servicio-columnas {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		/* Antes "3rem 0": el 0 lateral dejaba TODA la columna principal (H1,
		   intro, imagen, iconos, título de lista, galería...) pegada al
		   borde de la pantalla -- la lista se salvaba de pura casualidad,
		   por los 8px propios de margin-left en .ec-servicio-lista-columna
		   (pensados para separar la palomita del texto, no como margen de
		   página). 1.25rem = 20px, el mismo margen lateral que ya usa el
		   header en este ancho (.ts-header .header-middle > .container,
		   sección Geometría del Header) -- así el contenido alinea con el
		   logo en vez de traer su propio valor suelto. */
		padding: 3rem 1.25rem;
	}

	/* El reparto parejo de dos por fila ya se fija desde el @media de
	   tablet, arriba (max-width:1024px, que también cubre este ancho) --
	   no hace falta repetirlo aquí. */

	.ec-servicio-lista {
		grid-template-columns: 1fr;
		/* 1rem entre la última fila de la columna izquierda y la primera de
		   la derecha -- apiladas una <ul> tras otra, sin este gap quedaban
		   más pegadas entre sí que el resto de la lista (cada <li> ya trae
		   su propio espacio vía line-height, pero eso no separa una <ul>
		   de la siguiente). */
		gap: 1rem;
	}

	/* Los % de escritorio (ver la sección Galería, arriba) son exactos para
	   los 819px de columna principal que hay a 1440px -- por debajo de eso
	   ya no hay PNG de referencia, así que aquí se resetea a una rejilla
	   pareja de 2 columnas (2 arriba, la tercera sola abajo), cada foto con
	   su propio aspect-ratio (sin recortar, mismo object-fit:contain). */
	.ec-servicio-galeria {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: start;
		gap: 1.25rem;
	}

	.ec-servicio-galeria .ec-zoom-hover:nth-child(1),
	.ec-servicio-galeria .ec-zoom-hover:nth-child(2),
	.ec-servicio-galeria .ec-zoom-hover:nth-child(3) {
		width: auto;
		margin-left: 0;
	}

	.ec-servicio-banda-interior {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding: 2.5rem 1.5rem;
	}

	.ec-servicio-banda-columna {
		padding: 0;
	}

	.ec-servicio-banda-columna:not(:first-child) {
		border-left: 0;
		padding-top: 2rem;
		border-top: 1px solid rgba(255, 255, 255, 0.25);
	}

	/* El separador vertical de escritorio (::before, ver el CSS base) no
	   tiene sentido apilado -- el border-top de arriba ya hace de
	   separador horizontal entre columnas. */
	.ec-servicio-banda-columna:not(:first-child)::before {
		display: none;
	}

	/* Resto de tamaños de Servicios: el encargo no dio un objetivo de
	   píxeles para móvil en estos ocho (a diferencia de la tabla de
	   escritorio, que sí es exacta) — solo pidió escalarlos
	   proporcionalmente aquí. Se usa ×0.9 (una reducción del 10%, criterio
	   estándar para texto de cuerpo en pantallas chicas) sobre el valor
	   de escritorio ya corregido, igual en los ocho para mantenerlo
	   consistente. .ec-servicio-tarjeta-titulo se queda fuera de esta
	   lista porque su tamaño no cambió en escritorio (ya estaba bien). */
	.ec-servicio-intro p {
		font-size: 1.125rem; /* 18px = 20px × 0.9 */
	}

	.ec-servicio-lista-titulo {
		font-size: 1.125rem; /* 18px = 20px × 0.9 (mismo resultado que arriba: los dos miden 20px en escritorio) */
	}

	.ec-servicio-lista-columna li {
		font-size: 0.984375rem; /* 15.75px = 17.5px × 0.9 */
	}

	.ec-servicio-icono-texto {
		font-size: 0.95625rem; /* 15.3px = 17px × 0.9 */
	}

	.ec-servicio-tarjeta-fila {
		font-size: 0.928125rem; /* 14.85px = 16.5px × 0.9 */
	}

	.ec-boton-whatsapp {
		font-size: 0.95625rem; /* 15.3px = 17px × 0.9. Comparte clase con
		la ficha de producto (ver comentario junto a la regla base, más
		arriba) — mismo componente, así que también en móvil. */
	}

	.ec-servicio-banda-titulo {
		font-size: 0.871875rem; /* 13.95px = 15.5px × 0.9 */
	}

	.ec-servicio-banda-descripcion {
		font-size: 0.73125rem; /* 11.7px = 13px × 0.9 */
	}
}
