/* Metacrilato Gestor — CABECERA (todas las páginas del front).
   Nombre del cliente conectado junto al icono de cuenta y total del carrito
   junto al icono del carrito. */

/* "Hola, Nombre" (solo se inserta si hay sesión iniciada). */
.mc-header-user { display:inline-flex; align-items:center; font-size:var(--mc-fs-compacto); font-weight:var(--mc-peso); color:var(--mc-texto); text-decoration:none; white-space:nowrap; margin:0 8px; position:relative; top:-3px; }
.mc-header-user:hover { color:var(--mc-enlace); }
@media (max-width:768px){ .mc-header-user { display:none; } }


/* Total del carrito (fragmento .mc-cart-total-amount de WooCommerce). */
.mc-cart-total-amount{ position:relative; display:inline-flex; align-items:center; font-size:var(--mc-fs-compacto); font-weight:var(--mc-peso); color:var(--mc-texto); white-space:nowrap; margin-left:8px; }
	/* Punto AZUL (color de enlace) cuando el carrito lleva el cargo de manipulación. */
	.mc-cart-dot{ position:absolute; top:-3px; right:-4px; width:7px; height:7px; background:var(--mc-enlace); border-radius:50%; }
.mc-cart-total-amount:empty{ display: none; }
.mc-cart-total-amount .woocommerce-Price-amount{ white-space:nowrap; }
@media (max-width:768px){ .mc-cart-total-amount{ display:none; } }


/* ---- Iconos de la cabecera de escritorio (27-09-2026) ----
   Salen de Gestor → Textos e iconos → Cabecera y Datos de la Empresa
   (variables --mc-ico-hdr-*), los mismos que usa la cabecera del móvil.
   Sustituyen a la fuente Phosphor que se cargaba desde unpkg.com en el CSS
   adicional de Kadence (sus reglas y el @import ya no están; tamaño y color
   se conservan aquí). La barra de teléfono y correo es el shortcode
   [mc_cabecera_contacto] (elemento HTML de Kadence) con datos de la empresa. */
.mi-contacto-header .mc-i { font-size: 15px; margin-right: 12px; }
#masthead .mi-header-search-submit::before,
#masthead a.header-button.button-style-filled::before,
#masthead .header-cart-button::before {
	content: ""; display: inline-block; flex: 0 0 auto; width: 1em; height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--mc-i) no-repeat center / contain; mask: var(--mc-i) no-repeat center / contain;
}
/* Tamaño y color: los que tenían en el CSS adicional de Kadence (texto de
   la cabecera = color 4 de la paleta de Kadence). */
#masthead .mi-header-search-submit::before { --mc-i: var(--mc-ico-hdr-buscar); font-size: 16px; line-height: 1; color: var(--global-palette4, #2D3748); }
#masthead a.header-button.button-style-filled::before { --mc-i: var(--mc-ico-hdr-cuenta); font-size: 22px; line-height: 1; color: var(--global-palette4, #2D3748); }
#masthead .header-cart-button::before { --mc-i: var(--mc-ico-hdr-carrito); font-size: 22px; line-height: 1; }


/* ---- Desplegable «Productos» de escritorio (28-09-2026) ----
   HTML: metacrilato_menu_productos_html() (Artículos | Familias). Va dentro
   del sub-menú de Kadence, que sigue encargándose de abrirlo y cerrarlo.
   A todo el ancho de la pantalla: el elemento «Productos» deja de ser la
   referencia de posición y lo pasa a ser la fila de la cabecera, que ocupa
   todo el ancho; el contenido va centrado al ancho de la web. */
#masthead .site-main-header-wrap { position: relative; }
#masthead .header-navigation li.mc-mega-padre { position: static; }
#masthead .header-navigation .mc-mega-padre > ul.sub-menu {
	left: 0; right: 0; top: 100%; width: auto; min-width: 0; padding: 0; transform: none;
	background: var(--mc-fondo, #fff);
	border: 0; border-top: 1px solid var(--mc-borde, #e2e8f0); border-radius: 0;
	box-shadow: 0 18px 30px rgba(15, 23, 42, .08);
}
/* Puente invisible para que el ratón no cierre el panel al bajar hasta él. */
#masthead .header-navigation .mc-mega-padre > ul.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
#masthead .header-navigation .mc-mega-padre > ul.sub-menu > li.mc-mega-item { border: 0; background: transparent; }
#masthead .mc-mega {
	display: grid; grid-template-columns: auto auto; justify-content: center; align-items: start; gap: 0 clamp(64px, 9vw, 160px);
	max-width: var(--global-content-width, 1290px); margin: 0 auto; padding: 34px var(--global-content-edge-padding, 24px) 40px;
	text-align: left;
}
/* Cabeceras de columna: como la línea de teléfono y correo de la cabecera
   (mismo gris, tamaño y peso), sin mayúsculas ni raya. */
#masthead .mc-mega-h {
	margin: 0 0 12px; padding: 0; border: 0;
	font-size: var(--mc-fs-compacto, 14px); font-weight: var(--mc-peso, 400);
	text-transform: none; letter-spacing: 0; color: var(--global-palette4, #2D3748);
}
#masthead .mc-mega-art { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px; min-height: 34px; }
#masthead .mc-mega a { padding: 0; background: transparent; text-decoration: none; white-space: nowrap; line-height: 1.2; }
#masthead .mc-mega-nombre,
#masthead .mc-mega-fam { color: var(--mc-texto, #0f172a); font-size: var(--mc-fs-compacto, 14px); font-weight: var(--mc-peso-titulo, 500); }
/* «Ver todos los artículos»: mismo peso que el resto y tamaño × 1,618
   (proporción áurea) sobre el de las líneas. */
#masthead .mc-mega-todos { min-height: 48px; }
#masthead .mc-mega-todos .mc-mega-nombre { font-size: calc(var(--mc-fs-compacto, 14px) * 1.618); }
#masthead .mc-mega-fam { display: flex; align-items: center; min-height: 34px; }
#masthead .mc-mega-nombre:hover,
#masthead .mc-mega-fam:hover { color: var(--mc-enlace, #2563eb); }
/* Corte a medida · Planchas: sin marco ni subrayado (28-09, Daniel), un punto más pequeños y
   un grosor menos que el nombre. */
#masthead .mc-mega-modos { display: inline-flex; gap: 18px; }
#masthead .mc-mega .mc-mega-modos a {
	color: var(--mc-texto-2, #64748b); font-size: calc(var(--mc-fs-compacto, 14px) - 1px); font-weight: var(--mc-peso, 400);
	text-decoration: none;
}
#masthead .mc-mega .mc-mega-modos a:hover { color: var(--mc-enlace, #2563eb); }
#masthead .mc-mega a:focus-visible { outline: 2px solid var(--mc-enlace, #2563eb); outline-offset: 2px; }
/* Espera al abrir/cerrar (header.js pone .mc-mega-js y .mc-mega-abierto).
   Sin JS no se aplica y manda el :hover de Kadence. */
#masthead .header-navigation li.mc-mega-padre.mc-mega-js:not(.mc-mega-abierto):not(:focus-within) > ul.sub-menu { display: none; }
#masthead .header-navigation li.mc-mega-padre.mc-mega-js.mc-mega-abierto > ul.sub-menu { display: block; }