/* =============================================================
   Mega Menu — Servicios
   Desktop only (≥ 1025 px). All rules live inside @media blocks.
   Tema Piedrangular
   ============================================================= */

/* =============================================================
   Desktop: ≥ 1025 px
   ============================================================= */
@media (min-width: 1025px) {

    /* ── 1. Positioning anchor ────────────────────────────────────
       .navbar becomes the positioned ancestor for the mega panel.
       top:100% on .mega-menu will equal the navbar's full height
       (padding-top + inner + padding-bottom), placing the panel
       flush at the visual bottom of the header bar.
    ──────────────────────────────────────────────────────────── */
    .navbar {
        position: relative;
    }

    /* ── 2. CRITICAL FIX — specificity war ───────────────────────
       header.css sets:  .nav-menu li { position: relative }  → 0,1,1
       Old code set:     .menu-item--has-mega-menu { position:static } → 0,1,0
       The <li> stayed relative, so .mega-menu anchored to the <li>
       instead of .navbar → misaligned partial-width panel.
       Fix: raise specificity to 0,2,1 so we win.
    ──────────────────────────────────────────────────────────── */
    .nav-menu li.menu-item--has-mega-menu {
        position: static; /* escape to .navbar as positioning parent */
    }

    /* ── 3. Chevron on "Servicios" ──────────────────────────────── */
    .menu-item--has-mega-menu > a::after {
        content:        '';
        display:        inline-block;
        width:          0;
        height:         0;
        margin-left:    0.375em;
        vertical-align: middle;
        border-left:    4px solid transparent;
        border-right:   4px solid transparent;
        border-top:     5px solid currentColor;
        opacity:        0.75;
        transition:     transform 0.22s ease, opacity 0.22s ease;
    }

    .menu-item--has-mega-menu:hover > a::after {
        transform: rotate(-180deg);
        opacity:   1;
    }

    /* ── 4. Mega panel ────────────────────────────────────────────
       Geometry (approximate, depends on logo/font sizes):
         .navbar height         ≈ 96px  (16px padding × 2 + 64px inner)
         <li> top               ≈ 32px from navbar top
         <li> bottom            ≈ 64px from navbar top
         .mega-menu top (100%)  =  96px from navbar top
         Dead zone              = 96 − 64 = 32px  ← this is the gap
       Fixed by the ::before bridge below.
    ──────────────────────────────────────────────────────────── */
    .mega-menu {
        position:   absolute;
        top:        100%;   /* flush below .navbar bottom edge */
        left:       0;
        right:      0;
        z-index:    999;    /* above all page content */

        /* Visual */
        background-color: #061539f3;  /* --color-navy, fully opaque */
        border-top:       1px solid rgba(255, 255, 255, 0.08);
        border-bottom:    1px solid rgba(255, 255, 255, 0.05);
        box-shadow:       0 16px 48px rgba(0, 0, 0, 0.55);

        /* ── Hidden state ───────────────────────────────────────────
           Use visibility (not pointer-events) for interactivity.
           CSS guarantees: visibility:hidden → no pointer events.
                           visibility:visible → pointer events work.
           Do NOT add pointer-events:none here — it would kill events
           during the transition window and prevent hover recovery.

           Transition-delay on HIDING: keeps visibility:visible for
           0.15 s after hover is lost, giving the cursor time to cross
           any remaining gap before the panel disappears.
        ─────────────────────────────────────────────────────────── */
        opacity:    0;
        visibility: hidden;
        transform:  translateY(-4px);
        transition:
            opacity    0.2s  ease   0.15s,   /* wait 0.15s before fading */
            visibility 0s    linear 0.15s,   /* stay visible for 0.15s  */
            transform  0.2s  ease   0.15s;
    }

    /* ── 5. HOVER GAP FIX — transparent bridge ───────────────────
       The ::before pseudo-element extends ABOVE the mega panel,
       overlapping the bottom of the <li> by ~8 px.

       Bridge geometry (with navbar ≈ 96px, <li> bottom ≈ 64px):
         ::before top  = 96px − 40px = 56px from navbar top
         <li> bottom   = 64px from navbar top
         Overlap       = 64 − 56 = 8px  ← cursor never leaves hover

       Sequence:
         1. Cursor at 62px (inside <li>) → :hover active
            → visibility:visible → ::before appears & is interactive
         2. Cursor moves to 65px (below <li> bottom 64px)
            → still inside ::before (56–96px) → :hover maintained ✓
         3. Cursor continues to 97px (inside mega panel)
            → still hovering child of <li> → :hover maintained ✓

       Result: zero dead zone, regardless of mouse speed.
    ──────────────────────────────────────────────────────────── */
    .mega-menu::before {
        content:  '';
        position: absolute;
        top:      -40px;   /* bridge 40px above panel top */
        left:     0;
        right:    0;
        height:   40px;    /* covers the 32px gap + 8px overlap */
        /* background: rgba(255,0,0,0.2); ← uncomment to debug */
    }

    /* ── 6. Visible state (CSS :hover) ───────────────────────────
       Show immediately; no delay on appearance.
    ──────────────────────────────────────────────────────────── */
    .menu-item--has-mega-menu:hover .mega-menu {
        opacity:    1;
        visibility: visible;
        transform:  translateY(0);
        transition:
            opacity    0.18s ease,
            visibility 0s   linear,
            transform  0.18s ease;
    }

    /* ── 7. Inner wrapper — reuses .container centering ──────────
       .container gives max-width:1280px + horizontal padding,
       aligning the mega grid with every other page section.
    ──────────────────────────────────────────────────────────── */
    .mega-menu__inner {
        padding-top:    2rem;
        padding-bottom: 2.5rem;
    }

    /* ── 8. Four-column grid ──────────────────────────────────── */
    .mega-menu__grid {
        display:               grid;
        grid-template-columns: repeat(4, 1fr);
        gap:                   1.5rem 2.5rem;
        align-items:           start;
    }

    /* ── 9. Column layout ─────────────────────────────────────── */
    .mega-menu__col {
        display:        flex;
        flex-direction: column;
    }

    /* ── 10. Column title ─────────────────────────────────────── */
    .mega-menu__col-title {
        display:         block;
        color:           #ffffff;
        font-size:       0.9375rem;   /* 15px */
        font-weight:     700;
        letter-spacing:  0.01em;
        line-height:     1.35;
        text-decoration: none;
        white-space:     normal;

        padding-bottom:  0.75rem;
        margin-bottom:   0.875rem;
        border-bottom:   1px solid rgba(255, 255, 255, 0.15);

        transition: color 0.18s ease;
    }

    .mega-menu__col-title:hover {
        color: rgba(255, 255, 255, 0.72);
    }

    /* ── 11. Link list ────────────────────────────────────────── */
    .mega-menu__list {
        list-style: none;
        margin:     0;
        padding:    0;
    }

    .mega-menu__list li a {
        display:         block;
        color:           rgba(255, 255, 255, 0.65);
        font-size:       0.8125rem;   /* 13px */
        font-weight:     400;
        line-height:     1.5;
        text-decoration: none;
        padding:         0.3rem 0;
        transition:      color 0.15s ease;
    }

    .mega-menu__list li a:hover {
        color: #ffffff;
    }

} /* end @media (min-width: 1025px) */


/* =============================================================
   Mobile / Tablet safety net (≤ 1024 px)
   The mobile drawer handles all navigation at this width.
   ============================================================= */
@media (max-width: 1024px) {

    .mega-menu {
        display: none !important;
    }

    .menu-item--has-mega-menu > a::after {
        display: none !important;
    }
}