/* =========================================================================
   HEADER DE AUTOMEX · estilos que viven fuera de parts/atx-header.html
   Se carga en TODA la web (inc/zona-theme.php), también en las páginas que
   siguen en Elementor, porque el header del theme sale en todas partes desde
   la 1.64.1. Antes estas reglas estaban al final de style.css, que fuera de la
   zona no se carga.
   ========================================================================= */
/* Mega-menú reorganizado: franja superior (Nosotros/Casos) + botón "Todas las categorías" */
.atx-tb-nav{color:#C7CBD2;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:color .15s ease}
.atx-tb-nav:hover{color:#fff}
.atx-nav-all .atx-nav-burg3{display:inline-flex;align-items:center;margin-right:6px;vertical-align:middle}
.atx-nav-all .atx-nav-burg3 svg{width:16px;height:16px}

/* Submenús del nav — modernos y amplios. Solo "Todas las categorías" abre el mega. */
.atx-nav-li.atx-has-sub{position:relative!important}
.atx-has-sub>.atx-nav-link{cursor:pointer}
.atx-sub{position:absolute;top:calc(100% + 7px);left:0;min-width:300px;background:#fff;border:1px solid #ECEEF1;border-radius:16px;box-shadow:0 28px 64px -14px rgba(16,18,22,.32),0 6px 16px rgba(16,18,22,.08);padding:20px 22px;z-index:99992;display:none}
.atx-sub--right{left:auto;right:0}
/* Puente invisible sobre el hueco de 7px entre la barra y el panel: sin él el hover se pierde al bajar y el submenú se cierra. */
.atx-sub::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
.atx-has-sub:hover>.atx-sub,.atx-has-sub:focus-within>.atx-sub{display:block;animation:atxSubIn .17s cubic-bezier(.4,0,.2,1)}
@keyframes atxSubIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
.atx-sub a{position:relative;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;color:#2C3038;font-size:14px;font-weight:500;text-decoration:none;line-height:1.35;transition:background .14s ease,color .14s ease}
.atx-sub a::before{content:"";width:5px;height:5px;border-radius:50%;background:#D5DAE1;flex:0 0 auto;transition:background .14s ease,transform .14s ease}
.atx-sub a:hover{background:#FDECEC;color:#E30613}
.atx-sub a:hover::before{background:#E30613;transform:scale(1.5)}
/* «Muy pronto»: ítems del submenú sin página todavía. No son enlace (sin href) y se ven apagados. */
.atx-sub .atx-sub-soon{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;color:#9AA1AC;font-size:14px;font-weight:500;line-height:1.35;cursor:default}
.atx-sub .atx-sub-soon::before{content:"";width:5px;height:5px;border-radius:50%;background:#E3E6EB;flex:0 0 auto}
.atx-sub .atx-sub-soon em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#E30613;background:#FDECEC;padding:2px 8px;border-radius:999px;white-space:nowrap}
.atx-sub-grid{display:grid;gap:3px 34px}
.atx-sub-grid--2{grid-template-columns:repeat(2,minmax(260px,1fr))}
.atx-sub-grid--3{grid-template-columns:repeat(3,minmax(248px,1fr))}
.atx-sub-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.atx-sub-grid .atx-sub-col:not(:first-child){border-left:1px solid #EEF1F4;padding-left:26px}
.atx-sub-group{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#9CA1AB;padding:2px 14px 10px}
@media (max-width:1024px){.atx-sub{display:none!important}}

/* Nav: "Todas las categorías" a la IZQUIERDA, el resto a la DERECHA */
.atx-nav-bar .atx-nav-items{justify-content:flex-start!important}
.atx-nav-all + .atx-nav-li{margin-left:auto!important}

/* =========================================================================
   MEGAMENÚ «TODAS LAS CATEGORÍAS» (inc/menu-categorias.php)
   Riel blanco con icono a la izquierda; a la derecha título, «Ver toda la
   categoría» y rejilla de productos con foto redonda. Solo escritorio: en
   ≤1024px .atx-nav-megas ya se oculta y manda el menú móvil.
   ========================================================================= */
.atx-ac{background:#FFFFFF;border-top:1px solid #ECEEF1;box-shadow:0 28px 60px -20px rgba(16,18,22,.28)}
/* Mismo contenedor que el header (.atx-mb-inner / .atx-tb-inner): 1400px con 28px de margen, para que el riel arranque alineado con el logo. */
.atx-ac-wrap{max-width:1400px;margin:0 auto;padding:0 28px;box-sizing:border-box;display:flex;align-items:stretch}
.atx-ac-rail{flex:0 0 312px;display:flex;flex-direction:column;gap:4px;padding:22px 18px;background:#F7F7F8;border-right:1px solid #ECEEF1}
.atx-ac-tab{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:transparent;border:0;border-radius:14px;padding:14px 18px;color:#2C3038;font-size:16px;font-weight:500;line-height:1.25;cursor:pointer;transition:background .15s ease,color .15s ease}
.atx-ac .atx-ac-tab{white-space:normal}
/* Hello Elementor pinta los button en :hover/:focus (rosa): se fija el color en todos los estados. */
.atx-ac .atx-ac-tab:hover,.atx-ac .atx-ac-tab:focus{background:#EEEFF2;color:#2C3038}
.atx-ac .atx-ac-tab.is-active,.atx-ac .atx-ac-tab.is-active:hover,.atx-ac .atx-ac-tab.is-active:focus{background:#E9EAEE;color:#101216;font-weight:600}
.atx-ac-tab:focus-visible{outline:2px solid #E30613;outline-offset:2px}
.atx-ac-ico{flex:0 0 22px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:#5B616C}
.atx-ac-ico svg{width:22px;height:22px}
.atx-ac-tab.is-active .atx-ac-ico{color:#E30613}
.atx-ac-tab-txt{min-width:0}
/* Sin scroll interno: se muestran SOLO 3 filas de productos (15 a 5 columnas, 12 a 4). */
.atx-ac-panels{flex:1 1 auto;min-width:0;padding:24px 36px 30px}
.atx-ac-panel{display:none}
.atx-ac-panel.is-active{display:block}
.atx-ac-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 22px}
.atx-ac-title{margin:0;font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:#101216}
.atx-ac-all{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;color:#E30613;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.atx-ac-all svg{width:15px;height:15px;transition:transform .15s ease}
.atx-ac-all:hover svg{transform:translateX(3px)}
.atx-ac-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 22px}
.atx-ac-grid .atx-ac-prod:nth-child(n+16){display:none}
.atx-ac-prod{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;text-decoration:none;color:#5B616C}
.atx-ac-prod-img{width:100px;height:100px;border-radius:50%;background:#F3F4F6;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.atx-ac-prod-img img{width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply}
.atx-ac-prod-name{font-size:13px;font-weight:500;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .15s ease}
.atx-ac-prod:hover .atx-ac-prod-img{transform:translateY(-3px);box-shadow:0 10px 22px -12px rgba(16,18,22,.35)}
.atx-ac-prod:hover .atx-ac-prod-name{color:#E30613}
.atx-ac-empty{margin:0;color:#8A909A;font-size:14px}
.atx-ac-linkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 36px}
.atx-ac-links-head{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;color:#101216;font-size:16px;font-weight:600;text-decoration:none}
.atx-ac-links-head svg{width:15px;height:15px;color:#E30613}
.atx-ac-links-head:hover{color:#E30613}
.atx-ac-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.atx-ac-links li a{display:block;padding:9px 12px;border-radius:10px;color:#4A505A;font-size:14px;text-decoration:none;transition:background .14s ease,color .14s ease}
.atx-ac-links li a:hover{background:#FDECEC;color:#E30613}
@media (max-width:1280px){.atx-ac-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.atx-ac-grid .atx-ac-prod:nth-child(n+13){display:none}.atx-ac-rail{flex-basis:270px}}
/* Pantallas bajas (portátiles de 800px): más compacto para que las 3 filas quepan sin scroll. */
@media (max-height:860px){.atx-ac-panels{padding:18px 32px 22px}.atx-ac-head{margin-bottom:14px}.atx-ac-grid{gap:14px 20px}.atx-ac-prod{gap:8px}.atx-ac-prod-img{width:88px;height:88px}.atx-ac-rail{padding:16px 16px}.atx-ac-tab{padding:12px 16px}}
@media (prefers-reduced-motion:reduce){.atx-ac-prod-img,.atx-ac-all svg{transition:none}}

/* Menú rojo con 5 ítems («Tableros para bombas de agua» + «Tableros industriales»):
   cada ítem en una sola línea y, en pantallas medianas, texto y relleno algo menores para que quepan. */
.atx-nav-items > .atx-nav-li > .atx-nav-link{white-space:nowrap!important;font-size:15px!important;padding:14px 16px!important}
@media (max-width:1366px){.atx-nav-items > .atx-nav-li > .atx-nav-link{font-size:14px!important;padding:14px 11px!important}}
@media (max-width:1180px){.atx-nav-items > .atx-nav-li > .atx-nav-link{font-size:13px!important;padding:14px 8px!important}}