/* ============================================================
   RCAD PRO — Mega Menu v14 — CSS puro, sin JS de posición
   ============================================================
   CAUSA RAÍZ RESUELTA:
   html/body tenían overflow-x:hidden → creaban containing block
   para position:absolute → el panel no podía usar left:0;right:0

   SOLUCIÓN:
   overflow-x:clip en html/body (en layout.css y style.css).
   clip recorta visualmente igual que hidden pero NO crea
   containing block, por lo que position:absolute funciona
   correctamente respecto al ancestro position:relative más cercano.

   ARQUITECTURA:
   .rcad-mm-bar (position:relative) ← ancla del panel
     .rcad-mm-inner
       ul.primary-menu
         li (position:relative) ← para el caret y sub-sub
           ul.sub-menu (position:absolute, top:100%, left:0, right:0)
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   VARIABLES
   ════════════════════════════════════════════════════════════ */
:root {
    --mm-accent:   #f5a623;
    --mm-text:     #fff;
    --mm-hover-bg: rgba(0,0,0,.15);
    --mm-panel-bg: #fff;
    --mm-shadow:   0 8px 28px rgba(0,0,0,.12);
    --mm-link-fs:  12.5px;
    --mm-group-fs: 11px;
    --mm-sub-fs:   12.5px;
    --mm-col-min:  140px;
    --mm-col-max:  200px;
}

/* ════════════════════════════════════════════════════════════
   1. OCULTAR menú nativo de Orbital inline con el logo
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1000px) {
    .site-header .header-navigation-wrapper {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════
   2. BARRA NARANJA
   position:relative es el ancla del panel.
   overflow:visible permite que el panel salga por debajo.
   SIN transform ni overflow:hidden — rompería el absolute.
   ════════════════════════════════════════════════════════════ */
.rcad-mm-bar {
    display: none;
    width: 100%;
    background: var(--mm-accent);
    position: relative;         /* ← ancla del panel */
    overflow: visible;          /* ← CRÍTICO: no recortar el panel */
    z-index: 1000;
    box-sizing: border-box;
}

/* ════════════════════════════════════════════════════════════
   3. INNER — centrado al ancho del slider
   position:static para que el panel se ancle al .rcad-mm-bar
   ════════════════════════════════════════════════════════════ */
.rcad-mm-inner {
    max-width: 100%;
    width: var(--site-width-rem, 75rem);
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
    position: static;           /* panel se ancla al bar, no aquí */
    overflow: visible;
    display: flex;
    align-items: stretch;
}

/* ════════════════════════════════════════════════════════════
   4. LISTA HORIZONTAL
   ════════════════════════════════════════════════════════════ */
.rcad-mm-bar ul.primary-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
    box-sizing: border-box !important;
    max-width: none !important;
    position: static !important;
}

/* Los <li>: position:relative para anclar carets y sub-sub-menus */
.rcad-mm-bar .primary-menu > li {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   5. LINKS DE PRIMER NIVEL
   ════════════════════════════════════════════════════════════ */
.rcad-mm-bar .primary-menu > li > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 13px 15px !important;
    color: var(--mm-text) !important;
    font-size: var(--mm-link-fs) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    background: transparent !important;
    border-bottom: none !important;
    transition: background .15s !important;
}
.rcad-mm-bar .primary-menu > li > a:hover,
.rcad-mm-bar .primary-menu > li.mm-active > a,
.rcad-mm-bar .primary-menu > li.current-menu-item > a,
.rcad-mm-bar .primary-menu > li.current-menu-ancestor > a {
    background: var(--mm-hover-bg) !important;
    color: var(--mm-text) !important;
    text-decoration: none !important;
}

/* Caret */
.rcad-mm-bar .primary-menu > li.menu-item-has-children > a > .icon {
    display: none !important;
}
.rcad-mm-bar .primary-menu > li.menu-item-has-children > a::after {
    content: "" !important;
    display: inline-block !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid rgba(255,255,255,.75) !important;
    margin-left: 4px !important;
    flex-shrink: 0 !important;
    transition: transform .2s !important;
}
.rcad-mm-bar .primary-menu > li.mm-active > a::after,
.rcad-mm-bar .primary-menu > li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg) !important;
}

/* ════════════════════════════════════════════════════════════
   6. MEGA PANEL — position:fixed para máxima compatibilidad
   Usar fixed garantiza que el panel ocupe siempre el 100% del
   viewport sin verse afectado por overflow, transform o
   containing blocks de Orbital o de plugins de terceros.
   El JS actualiza --mm-bar-bottom en cada resize/scroll.
   ════════════════════════════════════════════════════════════ */
:root {
    --mm-bar-bottom: 0px; /* actualizado por JS */
}

.rcad-mm-bar .primary-menu > li > ul.sub-menu {
    display: none !important;
    position: fixed !important;
    top: var(--mm-bar-bottom) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    background: var(--mm-panel-bg) !important;
    border-top: 3px solid var(--mm-accent) !important;
    border-bottom: 1px solid #e5e5e5 !important;
    box-shadow: var(--mm-shadow) !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    font-size: 1rem !important;
    color: #222 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Panel visible — JS añade mm-active / is-open
   El panel es position:fixed; left:0; width:100vw.
   Centramos el contenido al ancho del site con
   padding lateral calculado: (100vw - site-width) / 2 */
.rcad-mm-bar .primary-menu > li.mm-active > ul.sub-menu,
.rcad-mm-bar .primary-menu > li > ul.sub-menu.is-open {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(var(--mm-col-min), var(--mm-col-max))) !important;
    gap: 24px 20px !important;
    align-items: start !important;
    /* Centrar contenido al ancho real del site (--mm-site-w lo actualiza JS en cada resize).
       Fallback: 75rem (~1200px) si JS no corrió aún. */
    padding: 24px max(20px, calc((100vw - var(--mm-site-w, 75rem)) / 2)) 28px !important;
    box-sizing: border-box !important;
}

/* ════════════════════════════════════════════════════════════
   7. GRUPOS Y TÍTULOS
   ════════════════════════════════════════════════════════════ */
.rcad-mm-bar .primary-menu > li > ul.sub-menu > li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}
.rcad-mm-bar .primary-menu > li > ul.sub-menu > li > a {
    display: block !important;
    font-size: var(--mm-group-fs) !important;
    font-weight: 800 !important;
    color: #111 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    text-decoration: none !important;
    padding-bottom: 7px !important;
    margin-bottom: 8px !important;
    border-bottom: 2px solid var(--mm-accent) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
    background: none !important;
    transition: color .15s !important;
}
.rcad-mm-bar .primary-menu > li > ul.sub-menu > li > a:hover {
    color: var(--mm-accent) !important;
    text-decoration: none !important;
}

/* ════════════════════════════════════════════════════════════
   8. SUBCATEGORÍAS (nivel 2)
   ════════════════════════════════════════════════════════════ */
.rcad-mm-bar .primary-menu > li > ul.sub-menu > li > ul {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 1rem !important;
    border-radius: 0 !important;
}
.rcad-mm-bar .primary-menu > li > ul.sub-menu > li > ul > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.rcad-mm-bar .primary-menu > li > ul.sub-menu > li > ul > li > a {
    display: block !important;
    font-size: var(--mm-sub-fs) !important;
    font-weight: 400 !important;
    color: #555 !important;
    text-decoration: none !important;
    padding: 4px 0 4px 10px !important;
    border-left: 2px solid #e8e8e8 !important;
    background: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.6 !important;
    transition: color .12s, border-color .12s !important;
}
.rcad-mm-bar .primary-menu > li > ul.sub-menu > li > ul > li > a:hover {
    color: var(--mm-accent) !important;
    border-left-color: var(--mm-accent) !important;
    text-decoration: none !important;
}

/* ════════════════════════════════════════════════════════════
   9. NEUTRALIZAR ESTILOS DE ORBITAL
   CRÍTICO: el selector ul.sub-menu genérico pisaba las reglas
   del panel principal (sección 6). Ahora solo se aplica a
   sub-menús de nivel 2+ dentro del panel, NO al panel mismo.
   ════════════════════════════════════════════════════════════ */
.rcad-mm-bar .primary-menu .icon { display: none !important; }
.rcad-mm-bar .primary-menu ul::after,
.rcad-mm-bar .primary-menu ul::before { display: none !important; content: none !important; }

/* Solo neutralizar Orbital en nivel 2+ (sub-menús dentro del panel) */
.rcad-mm-bar .primary-menu > li > ul.sub-menu > li > ul.sub-menu {
    right: auto !important;
    opacity: 1 !important;
    transition: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    width: 100% !important;
    min-width: 0 !important;
    top: auto !important;
}
/* Hover de Orbital en niveles profundos */
.rcad-mm-bar .primary-menu > li > ul.sub-menu li.menu-item-has-children:hover > ul {
    right: auto !important;
    opacity: 1 !important;
    transform: none !important;
}
.rcad-mm-bar .primary-menu > li.menu-item-has-children > a { padding-right: 14px !important; }
.rcad-mm-bar .primary-menu ul li.menu-item-has-children > a { padding-right: 0 !important; }
.rcad-mm-bar ul.primary-menu { margin: 0 !important; }

/* ════════════════════════════════════════════════════════════
   10. LUPA (search-item)
   ════════════════════════════════════════════════════════════ */
.rcad-mm-bar .primary-menu > li.search-item {
    margin-left: auto !important;
    display: flex !important;
    align-items: stretch !important;
    position: relative !important;
}
.rcad-mm-bar .primary-menu > li.search-item > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 13px 16px !important;
    background: rgba(0,0,0,.15) !important;
    color: #fff !important;
    border-radius: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 1rem !important;
    border-bottom: none !important;
}
.rcad-mm-bar .primary-menu > li.search-item > a:hover { background: rgba(0,0,0,.25) !important; }
.rcad-mm-bar .primary-menu > li.search-item svg {
    width: 18px !important; height: 18px !important;
    max-width: 18px !important; max-height: 18px !important;
    fill: #fff !important; display: block !important;
}
.rcad-mm-bar .primary-menu > li.search-item > ul.sub-menu { display: none !important; }

/* Searchbox */
.rcad-mm-searchbox {
    display: none; position: absolute; top: 100%; right: 0;
    background: #fff; padding: 12px 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15); min-width: 300px;
    z-index: 99998; box-sizing: border-box;
    border-top: 3px solid var(--mm-accent);
}
.rcad-mm-searchbox.is-open { display: block; }
.rcad-mm-searchbox form { display: flex; }
.rcad-mm-searchbox input[type="search"] {
    flex: 1; padding: 9px 12px; border: 1px solid #ddd;
    border-right: none; border-radius: 4px 0 0 4px;
    font-size: 14px; outline: none; min-width: 0;
}
.rcad-mm-searchbox input[type="search"]:focus {
    border-color: var(--mm-accent);
    box-shadow: 0 0 0 2px rgba(245,166,35,.2);
}
.rcad-mm-searchbox button {
    padding: 9px 16px; background: var(--mm-accent); color: #fff;
    border: none; border-radius: 0 4px 4px 0; cursor: pointer;
    font-size: 14px; font-weight: 700;
}

/* ════════════════════════════════════════════════════════════
   11. MODAL MÓVIL
   ════════════════════════════════════════════════════════════ */
.menu-modal { background: #1a1a2e !important; }
.menu-modal-inner, .menu-wrapper { background: #1a1a2e !important; width: 100% !important; }
button.close-nav-toggle {
    color: #fff !important; padding: 1.2rem 1.5rem !important;
    background: rgba(255,255,255,.05) !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
button.close-nav-toggle .toggle-text {
    color: #fff !important; font-size: .9rem !important;
    font-weight: 600 !important; text-transform: uppercase !important;
}
.modal-menu li { border-color: rgba(255,255,255,.1) !important; }
.modal-menu > li > a,
.modal-menu > li > .ancestor-wrapper > a {
    color: #fff !important; font-size: .95rem !important;
    font-weight: 600 !important; padding: 1rem 1.5rem !important;
}
.modal-menu > li > a:hover,
.modal-menu > li > .ancestor-wrapper > a:hover { color: var(--mm-accent) !important; text-decoration: none !important; }
.modal-menu li.current-menu-item > .ancestor-wrapper > a,
.modal-menu li.current-menu-item > a { color: var(--mm-accent) !important; text-decoration: none !important; }
.modal-menu ul li { border-left: 3px solid rgba(245,166,35,.3) !important; }
.modal-menu ul li a { color: rgba(255,255,255,.75) !important; font-size: .875rem !important; padding: .75rem 1.5rem !important; }
.modal-menu ul li a:hover { color: var(--mm-accent) !important; text-decoration: none !important; }
button.sub-menu-toggle { color: #fff !important; border-left-color: rgba(255,255,255,.1) !important; padding: 0 1rem !important; }
button.sub-menu-toggle.active { background: rgba(245,166,35,.15) !important; }
.modal-menu li.search-item, .menu-modal .search-item { display: none !important; }
.rcad-mobile-search {
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
.rcad-mobile-search form { display: flex !important; gap: 8px !important; }
.rcad-mobile-search input[type="search"] {
    flex: 1 !important; padding: 10px 14px !important; border: none !important;
    border-radius: 6px !important; font-size: .9rem !important;
    background: rgba(255,255,255,.12) !important; color: #fff !important;
    outline: none !important; min-width: 0 !important;
}
.rcad-mobile-search input::placeholder { color: rgba(255,255,255,.5) !important; }
.rcad-mobile-search input:focus { background: rgba(255,255,255,.2) !important; box-shadow: 0 0 0 2px var(--mm-accent) !important; }
.rcad-mobile-search button {
    padding: 10px 16px !important; background: var(--mm-accent) !important;
    color: #fff !important; border: none !important; border-radius: 6px !important;
    font-weight: 700 !important; cursor: pointer !important; flex-shrink: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 999px) {
    .rcad-mm-bar { display: none !important; }
}
@media (min-width: 1000px) {
    .rcad-mm-bar { display: block !important; }
    .nav-toggle { display: none !important; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
    :root { --mm-col-min: 120px; --mm-col-max: 170px; }
    .rcad-mm-bar .primary-menu > li > a { padding: 13px 10px !important; font-size: 12px !important; }
}
@media (min-width: 1280px) {
    :root { --mm-col-min: 150px; --mm-col-max: 220px; }
}