/* ============================================================
SUBMENU IA — Estilo Antigravity v3 (dark theme)
Archivo: css/submenu-ia.css
Prefijo: has-sub-
Añadir en DESPUÉS de style.css:
============================================================ */
/* ==============================================
1. DESKTOP — Mega dropdown on HOVER
============================================== */
/* --- Trigger --- */
.has-sub-trigger {
display: inline-flex !important;
align-items: center;
gap: 5px;
}
.has-sub-chevron {
flex-shrink: 0;
stroke: currentColor;
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform .3s ease;
}
/* Chevron rota en hover */
.has-sub-parent:hover .has-sub-chevron {
transform: rotate(180deg);
}
/* --- Trigger pill en hover (estilo Antigravity) --- */
.has-sub-parent:hover > .has-sub-trigger {
background-color: rgba(255,255,255,.1) !important;
border-radius: 20px;
}
/* --- Mega dropdown container --- */
.has-sub-mega {
display: none;
position: absolute;
/*top: calc(100% + 8px);*/
/*left: 50%;*/
/*transform: translateX(-50%);*/
/*min-width: 520px;*/
background: #111;
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
box-shadow: 0 16px 48px rgba(0,0,0,.4);
padding: 12px 0;
z-index: 200;
}
/* Mostrar en hover sobre el li padre */
.has-sub-parent:hover > .has-sub-mega {
display: block;
}
/* --- Grid 2 columnas con los 7 items --- */
.has-sub-mega-grid {
display: grid!important;
grid-template-columns: 1fr 1fr;
list-style: none;
margin: 0;
padding: 0;
}
/* --- Items --- */
.has-sub-mega-grid li {
padding: 0 !important;
margin: 0 !important;
min-width: auto !important;
}
.has-sub-mega-grid li a,
.navbar-nav ul li.has-sub-parent .has-sub-mega-grid li a {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 11px 22px !important;
font-size: 14px !important;
font-weight: 500 !important;
color: rgba(255,255,255,.7) !important;
text-decoration: none !important;
text-transform: none !important;
letter-spacing: 0 !important;
background: transparent !important;
background-color: transparent !important;
transition: color .2s ease, background-color .15s ease;
line-height: 1.3;
white-space: nowrap;
}
.has-sub-mega-grid li a:hover,
.navbar-nav ul li.has-sub-parent .has-sub-mega-grid li a:hover {
color: #fff !important;
background: rgba(255,255,255,.06) !important;
background-color: rgba(255,255,255,.06) !important;
}
.has-sub-mega-grid li:hover,
.navbar-nav ul li.has-sub-parent .has-sub-mega-grid li:hover {
background-color: transparent !important;
}
/* --- Pillar (primer item) destacado --- */
.has-sub-mega-grid li:first-child a,
.navbar-nav ul li.has-sub-parent .has-sub-mega-grid li:first-child a {
color: var(--yellow-color) !important;
}
.has-sub-mega-grid li:first-child a strong {
font-weight: 700;
}
/* --- Chevron en links --- */
.has-sub-mega-grid li a svg {
width: 14px;
height: 14px;
flex-shrink: 0;
stroke: rgba(255,255,255,.2);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke .2s ease, transform .2s ease;
}
.has-sub-mega-grid li a:hover svg {
stroke: var(--yellow-color);
transform: translateX(3px);
}
/* --- Override hover genérico del parent (style.css:2242) --- */
.navbar-nav ul li.has-sub-parent:hover > a {
background-color: rgba(255,255,255,.1) !important;
border-radius: 20px;
}
/* --- Override submenu genérico (style.css:831-876) --- */
.navbar-nav ul li.has-sub-parent > .has-sub-mega {
background-color: #111 !important;
box-shadow: 0 16px 48px rgba(0,0,0,.4) !important;
}
/* --- Ocultar elementos mobile en desktop --- */
.has-sub-toggle-mobile {
display: none;
}
/* ==============================================
2. MOBILE — Accordion push-down
El submenú se inserta en el flujo normal del
del nav y empuja los demás - hacia abajo.
============================================== */
/* --- Parent mobile: necesita flex-wrap para que el
submenu haga "line break" y empuje el resto --- */
.nav ul li.has-sub-parent-mobile {
display: flex;
flex-wrap: wrap;
align-items: center;
}
/* --- Toggle button: hereda estilo del nav --- */
.nav ul li.has-sub-parent-mobile > .has-sub-toggle-mobile {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
font-weight: bold;
font-size: inherit;
color: inherit;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px white;
}
/* --- Chevron mobile --- */
.has-sub-chevron-mobile {
flex-shrink: 0;
stroke: white;
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform .3s ease;
-webkit-text-fill-color: initial;
-webkit-text-stroke: 0;
}
.has-sub-parent-mobile.is-open .has-sub-chevron-mobile {
transform: rotate(180deg);
}
/* --- Borde estilo Antigravity al abrir --- */
.nav ul li.has-sub-parent-mobile.is-open > .has-sub-toggle-mobile {
border: 1px solid rgba(255,255,255,.2);
border-radius: 8px;
padding: 10px 16px;
margin: -10px -16px;
}
/* -----------------------------------------------------------
OVERRIDE: .nav ul li ul (style.css:831)
position:static para que empuje los demás li
----------------------------------------------------------- */
.nav ul li.has-sub-parent-mobile > ul.has-sub-dropdown-mobile {
display: none !important;
position: static !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
z-index: auto !important;
list-style: none !important;
min-width: auto !important;
width: 100% !important;
flex-basis: 100% !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden;
max-height: 0;
transition: max-height .35s ease, padding .35s ease;
}
/* Abierto: se despliega y empuja Servicios/Proyectos/etc. abajo */
.nav ul li.has-sub-parent-mobile.is-open > ul.has-sub-dropdown-mobile {
display: block !important;
max-height: 600px;
padding: 20px 0 10px !important;
}
/* Kill :hover show de style.css:844 */
.nav ul li.has-sub-parent-mobile:hover > ul.has-sub-dropdown-mobile {
display: none !important;
max-height: 0;
}
.nav ul li.has-sub-parent-mobile.is-open:hover > ul.has-sub-dropdown-mobile {
display: block !important;
max-height: 600px;
}
/* -----------------------------------------------------------
OVERRIDE items (style.css:850, 858)
----------------------------------------------------------- */
.nav ul li.has-sub-parent-mobile > ul.has-sub-dropdown-mobile > li {
padding: 0 !important;
margin: 0 !important;
min-width: auto !important;
background: transparent !important;
background-color: transparent !important;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav ul li.has-sub-parent-mobile > ul.has-sub-dropdown-mobile > li:last-child {
border-bottom: none;
}
.nav ul li.has-sub-parent-mobile > ul.has-sub-dropdown-mobile > li:hover {
background: transparent !important;
background-color: transparent !important;
}
/* -----------------------------------------------------------
OVERRIDE links (style.css:863)
----------------------------------------------------------- */
.nav ul li.has-sub-parent-mobile > ul.has-sub-dropdown-mobile > li > a {
display: block !important;
padding: 12px 4px !important;
font-size: 1.1rem !important;
font-weight: 400 !important;
color: rgba(255,255,255,.6) !important;
-webkit-text-fill-color: rgba(255,255,255,.6) !important;
-webkit-text-stroke: 0 !important;
background: transparent !important;
background-color: transparent !important;
text-decoration: none !important;
transition: color .2s ease;
line-height: 1.4;
}
.nav ul li.has-sub-parent-mobile > ul.has-sub-dropdown-mobile > li > a:hover {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background: transparent !important;
background-color: transparent !important;
}
/* --- Pillar highlight mobile --- */
.nav ul li.has-sub-parent-mobile > ul.has-sub-dropdown-mobile > li:first-child > a {
color: var(--yellow-color) !important;
-webkit-text-fill-color: var(--yellow-color) !important;
font-weight: 600 !important;
}