/**
 * SOLUCON — el cromo del sitio con la identidad de la home (2026-09-10):
 * mega-menú y footer. (El botón flotante de WhatsApp queda verde a propósito.)
 *
 * Se encola en TODAS las páginas, detrás de flag (solucon_header_marca_activa()
 * en functions.php), después de solucon-brand.css. El marcado y el JS siguen
 * siendo los de snippets/solucon-megamenu.php (Code Snippets id=29), del
 * snippet del footer (footer#footer-solucon, no está en el repo): esta hoja
 * solo cambia lo que se ve. Nació para el header, de ahí el nombre; el footer se sumó el mismo
 * día y no valía la pena una hoja aparte para 90 líneas.
 *
 * ── Por qué todo lleva .solucon-header-wrapper adelante ──
 * El snippet imprime su <style> en wp_head con prioridad 10, DESPUÉS de las
 * hojas encoladas (wp_print_styles corre en 8). A igual especificidad gana él.
 * El prefijo suma una clase y gana sin depender del orden. Donde el snippet
 * usa !important (padding del body, hamburguesa, ocultamientos responsive) no
 * se toca nada.
 *
 * ── Lo que se aplica ──
 * · Inter en la navegación y los botones, Outfit en los nombres de categoría,
 *   JetBrains Mono en los rótulos y en la línea de dato de cada ítem
 *   ("0.01 g a 0.1 g" es una medida).
 * · Un solo color: navy. Se van el azul #3B5998 del subrayado y el verde de
 *   WhatsApp de los dos botones.
 * · Lenguaje recto: ni la pastilla del CTA, ni el radio 16 del panel, ni las
 *   cajitas redondeadas de los íconos.
 * · Los gestos de la tienda: el subrayado crece desde la izquierda como el
 *   taco del filete; los botones navy sueltan una barra blanca por abajo; el
 *   fantasma sobre navy se despega con sombra dura gris. El panel del
 *   mega-menú no lleva sombra: solo el filete.
 */

/* ── Barra superior: mono, versalitas, navy ────────────────────────── */
.solucon-header-wrapper .topbar-link,
.solucon-header-wrapper .topbar-location {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sol-navy-soft);
}
.solucon-header-wrapper .topbar-link:hover { color: #fff; }

/* ── Barra principal: sin sombra difusa, con filete ─────────────────── */
.solucon-header-wrapper .solucon-header {
	box-shadow: none;
	border-bottom: 1px solid var(--sol-line);
}
body.scrolled .solucon-header-wrapper .solucon-header { box-shadow: none; }

/* ── Navegación ─────────────────────────────────────────────────────── */
.solucon-header-wrapper .header-menu > li > a {
	font-family: var(--font-text);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--sol-navy);
}
.solucon-header-wrapper .header-menu > li > a:hover { color: var(--sol-navy); }

/* El subrayado del snippet crecía desde el centro, en azul. Acá es el taco
   del filete en miniatura: navy, y crece desde la izquierda. Se declaran las
   dos puntas de la transición porque el snippet anima `width` y acá se anima
   `transform`. */
.solucon-header-wrapper .header-menu > li > a span::after {
	left: 0;
	width: 100%;
	height: 2px;
	bottom: -6px;
	background: var(--sol-navy);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .22s ease;
}
.solucon-header-wrapper .header-menu > li > a:hover span::after,
.solucon-header-wrapper .header-menu > li.current > a span::after {
	width: 100%;
	transform: scaleX(1);
}

/* ── CTA "Escribinos": navy, recto, con la barra blanca ──────────────── */
.solucon-header-wrapper .header-cta {
	position: relative;
	overflow: hidden;
	background: var(--sol-navy);
	border-radius: 0;
	box-shadow: none;
	padding: 12px 20px;
	font-family: var(--font-text);
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	transition: background .18s ease;
}
.solucon-header-wrapper .header-cta:hover {
	background: var(--sol-navy);
	color: #fff;
	transform: none;
	box-shadow: none;
}
/* La barra va ADENTRO del navy, no en el borde: el botón apoya sobre el blanco
   del header y una barra blanca en el borde se fundía con el fondo (el botón
   parecía recortado por abajo). Enmarcada en navy se ve sobre cualquier fondo.
   En Cotizar (tarjetas de la grilla) la barra en el borde sí se lee, porque el
   botón tiene borde navy de 1 px que la enmarca, y se deja como está. */
.solucon-header-wrapper .header-cta::after {
	content: '';
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 6px;
	height: 2px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .22s ease;
}
.solucon-header-wrapper .header-cta:hover::after { transform: scaleX(1); }
.solucon-header-wrapper .header-cta svg { width: 18px; height: 18px; }

/* ── Panel del mega-menú: recto, con filete, sin sombra ─────────────
   La primera versión le ponía la sombra dura navy de las tarjetas. Se
   retiró a pedido (2026-09-10): el panel es un desplegable, no un objeto
   que se despega, y el bloque navy debajo pesaba de más. */
.solucon-header-wrapper .megamenu {
	border-radius: 0;
	border: 1px solid var(--sol-line);
	box-shadow: none;
	margin-top: 14px;
}
.solucon-header-wrapper .megamenu-col + .megamenu-col:not(.megamenu-cta) { border-left-color: var(--sol-line); }
.solucon-header-wrapper .megamenu-col { padding: 24px 20px; }

/* Cabecera de columna: eyebrow mono; el triángulo, navy. */
.solucon-header-wrapper .megamenu-head {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	color: var(--tx-3);
	margin: 0 0 14px 10px;
}
.solucon-header-wrapper .megamenu-head:hover { color: var(--sol-navy); }
.solucon-header-wrapper .megamenu-head .mm-tri { color: var(--sol-navy); }

/* Ítems: recto, sin corrimiento; el nombre en Outfit, el dato en mono. */
.solucon-header-wrapper .megamenu-item {
	border-radius: 0;
	padding: 8px 10px;
	transition: background .18s ease;
}
.solucon-header-wrapper .megamenu-item:hover {
	background: var(--sol-paper);
	transform: none;
}
.solucon-header-wrapper .megamenu-item-icon {
	border-radius: 0;
	background: var(--sol-surface);
	color: var(--sol-navy);
}
.solucon-header-wrapper .megamenu-item:hover .megamenu-item-icon {
	background: var(--sol-navy);
	color: #fff;
}
.solucon-header-wrapper .megamenu-item-content strong {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--sol-navy);
}
/* La mono es más ancha que Montserrat y con el truncado del snippet "Ultra-
   precisión · 0.1 mg" quedaba en "Ultra-precisión…": el dato, que es lo que
   importa, era lo que se cortaba. Se deja envolver en dos líneas. */
.solucon-header-wrapper .megamenu-item-content span {
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.35;
	color: var(--tx-3);
	white-space: normal;
	overflow: visible;
}

/* Columna de asesoramiento: navy plano, sin degradado ni resplandor. */
.solucon-header-wrapper .megamenu-cta {
	background: var(--sol-navy);
	border-left: 1px solid var(--sol-navy);
}
.solucon-header-wrapper .megamenu-cta::before { display: none; }
.solucon-header-wrapper .megamenu-cta h4 {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	color: var(--tx-d3);
	margin: 0 0 14px;
}
.solucon-header-wrapper .cta-content-lead {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #fff;
	margin: 0 0 8px;
}
.solucon-header-wrapper .cta-content p {
	font-family: var(--font-text);
	font-size: 13px;
	line-height: 1.55;
	color: var(--tx-d2);
}

/* El botón de WhatsApp del panel es el fantasma blanco sobre navy de la home:
   conserva su color y se despega con la sombra dura gris. Detrás de
   (hover: hover) como todo lo que se mueve. */
.solucon-header-wrapper .cta-whatsapp {
	background: none;
	border: 1.5px solid #fff;
	border-radius: 0;
	box-shadow: none;
	padding: 12px 16px;
	font-family: var(--font-text);
	font-size: 14px;
	font-weight: 500;
	color: #fff !important;
	transition: transform .18s ease, box-shadow .18s ease;
}
.solucon-header-wrapper .cta-whatsapp:hover {
	background: none;
	transform: none;
	box-shadow: none;
}
@media (hover: hover) {
	.solucon-header-wrapper .cta-whatsapp:hover {
		transform: translate(-4px, -4px);
		box-shadow: 7px 7px 0 var(--sol-gray-2);
	}
}
/* ── Zona de impacto estable durante el despegue ───────────────────────
   Un elemento que se corre 4 o 5 px hacia arriba y a la izquierda al hover se
   le escapa al mouse si el puntero estaba en esa franja del borde inferior o
   derecho: pierde el hover, vuelve, lo recupera, y vibra. Visto en el botón
   del footer (2026-09-10). Al hover, un pseudo-elemento invisible extiende la
   zona de impacto sobre el lugar que el elemento acaba de dejar, y el puntero
   no lo pierde nunca. */
.solucon-header-wrapper .cta-whatsapp,
#footer-solucon .footer-cta-whatsapp-new a { position: relative; }
.solucon-header-wrapper .cta-whatsapp:hover::after,
#footer-solucon .footer-cta-whatsapp-new a:hover::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: -4px;
	bottom: -4px;
}
.solucon-header-wrapper .cta-catalog {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tx-d3);
	border-top-color: rgba(255, 255, 255, .18);
}
.solucon-header-wrapper .cta-catalog:hover { color: #fff; }

/* ── Menú móvil ─────────────────────────────────────────────────────── */
.solucon-header-wrapper .mobile-menu {
	box-shadow: none;
	border-bottom: 1px solid var(--sol-line);
}
.solucon-header-wrapper .mobile-menu > ul > li { border-bottom-color: var(--sol-line); }
.solucon-header-wrapper .mobile-menu > ul > li > a {
	font-family: var(--font-text);
	font-size: 16px;
	font-weight: 500;
	color: var(--sol-navy);
}
.solucon-header-wrapper .mobile-menu > ul > li > a:active { background: var(--sol-paper); border-radius: 0; }
.solucon-header-wrapper .mobile-sub { background: var(--sol-paper); border-radius: 0; }
.solucon-header-wrapper .mobile-sub a {
	font-family: var(--font-text);
	font-size: 15px;
	color: var(--tx-2);
}
.solucon-header-wrapper .mobile-sub .mobile-sub__group a {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	color: var(--tx-3);
}
.solucon-header-wrapper .mobile-sub .mobile-sub__group:not(:first-child) a { border-top-color: var(--sol-line); }
.solucon-header-wrapper .mobile-sub .see-all {
	color: var(--sol-navy);
	font-weight: 500;
	border-top: 1px solid var(--sol-line);
}
.solucon-header-wrapper .mobile-wa {
	background: var(--sol-navy);
	border-radius: 0;
	font-family: var(--font-text);
	font-size: 15px;
	font-weight: 500;
}
.solucon-header-wrapper .mobile-wa:active { background: var(--sol-navy-deep); transform: none; }

/* Las tres barras de la hamburguesa, rectas. */
@media (max-width: 1024px) {
	.solucon-header-wrapper .hamburger-inner,
	.solucon-header-wrapper .hamburger-inner::before,
	.solucon-header-wrapper .hamburger-inner::after { border-radius: 0; }
}

/* ── Movimiento reducido ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.solucon-header-wrapper .header-menu > li > a span::after,
	.solucon-header-wrapper .header-cta::after,
	.solucon-header-wrapper .cta-whatsapp { transition: none; }
	.solucon-header-wrapper .cta-whatsapp:hover { transform: none; }
}

/* ==========================================================================
   Footer (footer#footer-solucon) — la sección navy de cierre
   ========================================================================== */

/* El snippet del footer imprime su <style> junto al marcado, dentro del body:
   después de todo. Va con el id adelante (1-x-x) para ganar por especificidad.
   Traía el navy viejo #1B365D horneado y Montserrat; pasa a los tokens. */
#footer-solucon.solucon-footer-new {
	background: var(--sol-navy);
	font-family: var(--font-text);
}
#footer-solucon .footer-main-new { padding: 56px 44px; }
#footer-solucon .footer-container-new { max-width: 1180px; }

/* Marca: el nombre en Outfit, como los titulares; el texto en el juego navy. */
#footer-solucon .footer-logo-texto-new {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 750;
	letter-spacing: -.02em;
	color: #fff;
}
#footer-solucon .footer-descripcion-new {
	font-family: var(--font-text);
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--tx-d2);
	margin: 14px 0 22px;
}

/* Redes: cuadros con filete, sin relleno ni salto. */
#footer-solucon .footer-redes-new a {
	background: none;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 0;
	transition: border-color .18s ease, background .18s ease;
}
#footer-solucon .footer-redes-new a:hover {
	background: #fff;
	border-color: #fff;
	transform: none;
}
#footer-solucon .footer-redes-new a:hover svg { fill: var(--sol-navy); }
#footer-solucon .footer-redes-new svg { transition: fill .18s ease; }

/* Cabeceras de columna: eyebrow mono, como en todo el sitio. */
#footer-solucon .footer-columna-new h4 {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	color: var(--tx-d3);
	margin: 0 0 18px;
}
#footer-solucon .footer-columna-new li { margin-bottom: 10px; }
#footer-solucon .footer-columna-new a {
	font-family: var(--font-text);
	font-size: 14.5px;
	color: var(--tx-d2);
	transition: color .18s ease;
}
#footer-solucon .footer-columna-new a:hover { color: #fff; padding-left: 0; }

/* Contacto: el teléfono y el mail son datos, van en mono. */
#footer-solucon .footer-contacto-icono-new {
	background: none;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 0;
}
#footer-solucon .footer-contacto-icono-new svg { stroke: var(--tx-d3); }
#footer-solucon .footer-contacto-label-new {
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .12em;
	color: var(--tx-d3);
	margin-bottom: 3px;
}
#footer-solucon .footer-contacto-valor-new { font-family: var(--font-text); font-size: 15px; color: #fff; }
#footer-solucon a.footer-contacto-valor-new { font-family: var(--font-mono); font-size: 14px; letter-spacing: .01em; }
#footer-solucon a.footer-contacto-valor-new:hover { color: var(--tx-d2); }

/* El WhatsApp del footer es el fantasma blanco sobre navy: conserva su color
   y se despega con la sombra dura gris. Se va el verde y el zoom.

   Los !important no son capricho. La home imprime en el <head> un bloque
   inline de 47 KB ("SOLUCON - CSS COMPLETO", no está en el repo) que fija el
   hover de este botón con !important: verde #2EE370, scale(1.05) y
   resplandor. Sin !important acá el reposo salía bien y al pasar el mouse el
   botón saltaba a verde y se agrandaba: era lo "raro" que se veía. */
#footer-solucon .footer-cta-whatsapp-new a {
	background: none !important;
	border: 1.5px solid #fff;
	border-radius: 0;
	box-shadow: none !important;
	padding: 12px 18px;
	font-family: var(--font-text);
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	transform: none !important;
	transition: transform .18s ease, box-shadow .18s ease !important;
}
#footer-solucon .footer-cta-whatsapp-new a:hover {
	background: none !important;
	transform: none !important;
	box-shadow: none !important;
}
@media (hover: hover) {
	#footer-solucon .footer-cta-whatsapp-new a:hover {
		transform: translate(-4px, -4px) !important;
		box-shadow: 7px 7px 0 var(--sol-gray-2) !important;
	}
}

/* Pie: un filete claro y la línea legal en mono. */
#footer-solucon .footer-bottom-new { border-top-color: rgba(255, 255, 255, .18); padding: 18px 44px; }
#footer-solucon .footer-copyright-new {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tx-d3);
}
#footer-solucon .footer-copyright-new a { color: var(--tx-d2); }
#footer-solucon .footer-copyright-new a:hover { color: #fff; }

@media (max-width: 900px) {
	#footer-solucon .footer-main-new { padding: 36px 18px; }
	#footer-solucon .footer-bottom-new { padding: 16px 18px; }
}

/* El botón flotante "¿Necesitás ayuda?" (solucon_floating_whatsapp) NO se
   toca: conserva la pastilla verde de WhatsApp a propósito, para que cualquiera
   lo reconozca de lejos. Una versión lo pasó a navy y se revirtió el mismo día. */

@media (prefers-reduced-motion: reduce) {
	#footer-solucon .footer-cta-whatsapp-new a { transition: none !important; }
	#footer-solucon .footer-cta-whatsapp-new a:hover { transform: none !important; }
}