/* ==========================================================================
Megamenú de servicios — Nuovo Salud
Construido sobre el sistema del propio header, no sobre valores sueltos:
tipografía Poppins · 13px · line-height 20px (igual que el menú)
ritmo múltiplos de 4px (--u)
padding 13px / 20px (el mismo del del menú)
radio 5px (el del botón CTA del sitio)
Todas las medidas de abajo derivan de esas cuatro constantes, así que el
panel se lee como una extensión del header y no como un bloque pegado.
========================================================================== */
.ns-mega {
--u: 4px; /* unidad de ritmo */
--pad-x: 20px; /* = padding lateral del del menú */
--pad-y: 13px; /* = padding vertical del del menú */
--radio: 5px; /* = radio del botón del sitio */
--linea: 20px; /* = line-height del menú */
--tinta: #2b3d43;
--gris: #7a8a8f;
--acento: #009bb4;
--acento-osc: #00757c;
--borde: #e9eef0;
--icono-bg: #eaf6f8;
}
@media (min-width: 1025px) {
/* ---------- Menú centrado ----------
Elementor aplica su align-right con un margin-left calculado sobre el
; se anula para que el menú quede centrado en su columna. */
.elementor-nav-menu--main .elementor-nav-menu {
margin-inline: auto !important;
justify-content: center !important;
}
/* ---------- Panel ---------- */
.elementor-nav-menu--main .menu-item-has-children { position: relative; }
.elementor-nav-menu--main .menu-item-has-children > .sub-menu.ns-mega {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, max-content));
column-gap: calc(var(--u) * 8); /* 32px entre columnas */
row-gap: 0;
width: max-content;
max-width: calc(100vw - var(--u) * 12);
padding: calc(var(--u) * 4) var(--pad-x); /* 16px / 20px */
background: #fff;
border: 1px solid var(--borde);
border-radius: calc(var(--radio) * 2); /* 10px: coherente con el sitio */
box-shadow:
0 1px 2px rgba(18, 49, 58, .04),
0 12px 28px -8px rgba(18, 49, 58, .16);
position: absolute;
top: 100%;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) translateY(calc(var(--u) * 1.5));
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
z-index: 9999;
}
.elementor-nav-menu--main .menu-item-has-children:hover > .sub-menu.ns-mega,
.elementor-nav-menu--main .menu-item-has-children:focus-within > .sub-menu.ns-mega {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition-delay: 0s;
}
/* puente para que el panel no se cierre al bajar el cursor */
.elementor-nav-menu--main .menu-item-has-children > .sub-menu.ns-mega::before {
content: "";
position: absolute;
inset: calc(var(--u) * -3) 0 auto 0;
height: calc(var(--u) * 3);
}
/* ---------- Fila de servicio ----------
Grid de 2 columnas: icono (fijo) + texto. El alto de la fila es
2 líneas de 20px + el padding, así todo cae en la misma retícula. */
.sub-menu.ns-mega > li {
width: auto !important;
border: 0 !important;
}
.sub-menu.ns-mega > li > a {
display: grid !important;
grid-template-columns: calc(var(--u) * 9) 1fr; /* icono 36px */
grid-template-rows: var(--linea) var(--linea); /* 2 líneas exactas */
align-items: center;
column-gap: calc(var(--u) * 3); /* 12px */
/* !important porque el tema trae `.elementor-nav-menu a:hover{padding:10px 20px}`
y en hover el padding saltaba de 12px a 20px: el icono y el texto se
desplazaban 8px y el ítem parecía tiritar. El padding no cambia de estado. */
padding: calc(var(--u) * 2.5) calc(var(--u) * 3) !important;
border-radius: var(--radio);
background: transparent !important;
text-align: left;
/* solo el color cambia en hover; nada que altere la geometría */
transition: background-color .14s ease;
}
.sub-menu.ns-mega > li > a:hover,
.sub-menu.ns-mega > li > a:focus,
.sub-menu.ns-mega > li > a:active {
background: #f5fafb !important;
padding: calc(var(--u) * 2.5) calc(var(--u) * 3) !important;
transform: none !important;
text-indent: 0 !important;
margin: 0 !important;
}
/* ---------- Icono ---------- */
.sub-menu.ns-mega .ns-ico {
grid-row: 1 / span 2;
width: calc(var(--u) * 9);
height: calc(var(--u) * 9);
display: grid;
place-items: center;
background: var(--icono-bg);
border-radius: var(--radio);
color: var(--acento-osc);
transition: background .14s ease;
}
.sub-menu.ns-mega > li > a:hover .ns-ico { background: #dcf0f4; }
.sub-menu.ns-mega .ns-ico svg {
width: calc(var(--u) * 4.5);
height: calc(var(--u) * 4.5);
display: block;
}
/* ---------- Texto ---------- */
.sub-menu.ns-mega .ns-tit,
.sub-menu.ns-mega .ns-desc {
grid-column: 2;
line-height: var(--linea);
white-space: nowrap;
margin: 0;
}
.sub-menu.ns-mega .ns-tit {
grid-row: 1;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .015em;
color: var(--tinta);
}
.sub-menu.ns-mega .ns-desc {
grid-row: 2;
font-size: 12px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--gris);
}
.sub-menu.ns-mega > li.current-menu-item > a .ns-tit { color: var(--acento-osc); }
}
/* ---------- Móvil y tablet: lista simple ---------- */
@media (max-width: 1024px) {
.sub-menu.ns-mega .ns-ico,
.sub-menu.ns-mega .ns-desc { display: none; }
.sub-menu.ns-mega .ns-tit {
font-weight: 400;
text-transform: none;
font-size: 14px;
white-space: normal;
}
/* el desplegable móvil lo abre estatico.js con estilo en línea */
.elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
max-height: var(--menu-height, 100vh) !important;
transform: none !important;
overflow: visible !important;
}
.elementor-nav-menu--dropdown .elementor-nav-menu {
margin-inline: 0 !important;
justify-content: flex-start !important;
}
}