/* @group mega-menu
------------------------------------
Migrated from css/components/header-mega-menu.css (F-MIGRATE, straight
lift-and-fold). Breakpoint pair confirmed against this project's real
convention (css/components/header.css uses the same 768/767 pair) — not the
boilerplate default 961/960, so nothing needed changing here.

2026-08-18 (F-AUDIT-VARIABLES bulk scan against Desktop/Mobile roots
21387:33736 / 22199:8208, see figma-canon.json > tokens): --_white,
--_washed-purple, --_dark-purple and --_lavanda were local re-declarations of
colors that already exist site-wide as css/libraries/reset.css :root vars
(--white/--paragraph/--header-2/--lavander — reset.css is enqueued as the
base dependency for every component, see AGENTS.md > "Grilla de
componentes"/loader_components.php eager pipeline). Rewired to consume those
directly per theme.css's own header comment ("Never redeclare a value that
already exists in reset.css's :root; reuse that var instead"). --_gray
(#EEEFF0) had no exact match in reset.css or in the bulk scan's fill-color
prevalence (closest neighbor --light-gray-2 #E2E6EB is a different hex) —
stays local, genuinely one-off. --_washed-lavanda (#D9E0FB33, a 20%-alpha
wash) shares its base hue with reset.css's --light-lavender (#D9E0FB, solid)
but no existing var covers the alpha-blended variant and this project has no
color-mix()/opacity-suffix-var precedent for a single-use case — stays local.

2026-08-18 (icon/color drift fix pass, 4-canon-instance direct sampling):
footer :is(button, a)'s CTA label color was var(--lavander) (#7183FF) — Figma
confirmed solid #A3A3A3 gray across all 11 sampled footer CTA labels in the
4 instances; rebound to reset.css's existing --gray (#A3A3A3), no new token
needed. aside.right::before's wash was --_washed-lavanda (#D9E0FB33) — Figma
confirmed a solid #F6F8F9 near-white, no alpha; rebound to reset.css's
existing --light-gray-1 (#F6F8F9). --_washed-lavanda had no other consumers
in this file, so the now-dead custom property was removed from .mega-menu's
:root-scoped block above.
------------------------------------ */

.mega-menu {
    --_gray: #EEEFF0;
    --_border: 1px solid var(--_gray);
    --_transition: 0.25;

    overflow: hidden;
    background: var(--white) !important;
}

/* Disclosure trigger in top nav bar */
.site-nav .nav>ul>li .mega-trigger {
    font-family: inherit;
    font-size: 1.4rem;
    line-height: 1.6rem;
    color: rgba(36, 41, 84, .8);
    display: inline-block;
    vertical-align: top;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s, background-color 0.2s;
}

.site-nav .nav>ul>li .mega-trigger:hover {
    color: var(--red);
}

/* Focus visible para todo el mega menu */
.site-nav .mega-trigger:focus-visible,
.mega-menu :is(a, button, [role="tab"]):focus-visible {
    outline: 3px solid var(--lavander) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
    z-index: 1;
}

.mega-menu [role="tab"] {
    cursor: pointer;
}

.mega-trigger .caret {
    display: none; /* Arrow disabled */
    /* display: inline-block; */
    width: .8rem;
    height: .8rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: .4rem;
    margin-bottom: .2rem;
    transition: transform 0.2s;
}

.mega-trigger[aria-expanded="true"] .caret {
    transform: rotate(-135deg);
    margin-bottom: -.2rem;
}

.mega-menu menu {
    padding: 0;
    margin: 0;
}

.mega-menu :is(button, a) :is(p, span, h3) {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: 1em;
    color: inherit;
}

@media only screen and (min-width : 768px) {
    .mega-menu.mobile {
        display: none;
    }

    .mega-menu {
        opacity: 0;
        transition: 0.5s;
        pointer-events: none;
        visibility: hidden;
        max-height: 0;
    }

    .mega-menu[open] {
        opacity: 1;
        pointer-events: all;
        visibility: visible;
        max-height: 80rem;
    }

    .mega-menu .row {
        border-top: var(--_border);
        position: relative;
        isolation: isolate;
        align-items: stretch !important;
        height: 46.2rem !important;
    }

    .mega-menu .row>* {
        flex: 1 1 auto;
        padding-block: 3.7rem 2.3rem;
    }

    .mega-menu::before {
        content: '';
        inset-block: 0;
        width: 100vw;
        left: 50%;
        translate: 50% 0;
        background: var(--white);
    }

    .mega-menu :is(section, aside) footer {
        padding-top: 1.8rem;
        border-top: var(--_border);
        width: 100%;
        align-self: flex-end;
    }

    .mega-menu :is(section, aside) footer :is(button, a) {
        padding-inline: 1.5rem;
        color: var(--gray);
        display: flex;
        gap: 1rem;
        justify-content: start;
        width: 21rem;
        font-size: 1.4rem;
        font-weight: 500;
        transition: 0.5s;
        height: 3.7rem;
        align-items: center;
    }

    .mega-menu :is(section, aside) footer :is(button, a) img {
        max-width: 1.7rem;
        max-height: 1.7rem;
        object-fit: contain;
    }


    /* LEFT */
    .mega-menu section.left {
        flex: 1;
        margin-block: 2.3rem;
        padding-block: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-right: 3.7rem;
        border-right: var(--_border);
    }

    .mega-menu section.left menu {
        padding-top: 0.8rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .mega-menu section.left menu :is(button, a) {
        display: flex;
        justify-content: space-between;
        padding-block: 1rem;
        padding-inline: 1.5rem;
        border-radius: .5rem;
        color: var(--header-2);
        width: 21rem;
        font-size: 1.4rem;
        font-weight: 500;
        transition: 0.5s;
    }

    .mega-menu section.left menu :is(button, a):hover {
        color: var(--red);
    }

    .mega-menu section.left menu :is(button, a):not(.active) :is(img, svg) {
        opacity: 0;
    }

    .mega-menu section.left :is(button, a).active {
        background: var(--_gray);
    }

    /* // LEFT */



    /* MIDDLE */
    .mega-menu section.middle {
        flex: 0 0 66.4rem;
        padding-bottom: 2.3rem;
        padding-inline: 2.6rem;
        transition: calc(var(--_transition) * 1s);
        height: 100%;
    }

    .mega-menu section.middle article {
        flex-direction: column;
        gap: 2.2rem;
        display: none;
        height: 100%;
    }

    .mega-menu section.middle article.active {
        display: flex;
    }

    .mega-menu section.middle header {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .mega-menu section.middle header h2 {
        font-size: 1.4rem;
        color: var(--header-2);
        line-height: 2.6rem;
    }

    .mega-menu section.middle header p {
        color: var(--paragraph);
        font-size: 1.2rem;
        line-height: 1.8rem;
        text-wrap: balance;
    }

    /* // MIDDLE */

    /*  RIGHT */
    .mega-menu aside.right {
        flex: 1 0 28.9rem;
        padding-left: 4.2rem;
        position: relative;
    }

    .mega-menu aside.right .content {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 2.8rem;
        justify-content: flex-start;
    }

    .mega-menu aside.right::before {
        content: '';
        position: absolute;
        inset: 0;
        width: 50vw;
        left: 0;
        background: var(--light-gray-1);
        pointer-events: none;
    }

    .mega-menu aside.right h2 {
        font-size: 1.4rem;
        color: var(--header-2);
        line-height: 2.6rem;
        font-weight: 600;
    }

    .mega-menu aside.right menu {
        display: flex;
        gap: 2.5rem;
        flex-direction: column;
    }

    .mega-menu aside.right menu a {
        display: flex;
        gap: 1.8rem;
    }

    .mega-menu aside.right menu a img {
        flex: 0 0 12.3rem;
        height: 7.5rem;
        border-radius: .5rem;
        overflow: hidden;
        object-fit: cover;
        background: #D9D9D9;
    }

    .mega-menu aside.right menu a p {
        color: var(--paragraph);
        font-size: 1.2rem;
        line-height: 1.6rem;
        font-weight: 700;
    }

    .mega-menu aside.right footer {
        position: absolute;
        bottom: 0;
    }

    /* // RIGHT */

    /* MIDDLE MENU STATES */
    .mega-menu [data-tab] {
        position: relative;
        --_col-w: 17.1rem;
        --_col-gap: 1.2rem;
    }

    .mega-menu [data-tab] .menu-wrapper {
        display: flex;
        gap: var(--_col-gap);
        flex-wrap: nowrap;
    }

    .mega-menu [data-tab] .menu-wrapper li {
        flex: 0 auto;
    }

    .mega-menu [data-tab] .menu-wrapper h3 {
        color: var(--paragraph);
        font-size: 1.1rem;
        line-height: 1.8rem;
        font-weight: 400;
        text-wrap: balance;
        text-transform: uppercase;
        margin-bottom: 1.5rem;
    }

    .mega-menu [data-tab] .menu-wrapper p {
        font-size: 1.2rem;
        font-weight: 800;
        line-height: 1.3rem;
        color: var(--header-2);
    }

    .mega-menu [data-tab] menu {
        display: flex;
        row-gap: 1.5rem;
        column-gap: var(--_col-gap);
        flex-wrap: wrap;
    }

    .mega-menu [data-tab] menu :is(a, button) {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        width: var(--_col-w);
        flex: 0 auto;
    }

    .mega-menu [data-tab] :is(a, button) img {
        width: 2.6rem;
        object-fit: contain;
    }

    .mega-menu [data-tab] footer {
        position: absolute;
        bottom: 0;
    }

    /* CUSTOM  TAB */
    .mega-menu [data-tab="resources"] .menu-wrapper li:first-of-type menu {
        width: min-content;
        width: calc((var(--_col-w) * 2) + var(--_col-gap));
    }

    .mega-menu [data-tab="academy"] menu {
        width: min-content;

    }
}

@media only screen and (min-width : 0) and (max-width : 767px) {

    .mega-menu.desktop {
        display: none;
    }

    .site-nav-mobile:has(.mega-menu),
    .site-nav-mobile:has(.mega-menu) :is(.nav, .mega-menu) {
        display: flex !important;
        flex-direction: column;
        flex: 1;
    }

    .mega-menu {
        justify-content: space-between;
        padding-bottom: 1.2rem;
    }

    .mega-menu footer {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        border-top: 1px solid var(--_gray);
        margin-top: 4rem;
        padding-top: 4rem;
    }

    .mega-menu footer a {
        display: flex;
        gap: 1rem;
        font-size: 2rem;
        padding: 1.5rem 1rem;
        border-radius: .5rem;
        width: 100%;
        font-weight: 600;
        align-items: center;
        justify-content: center;
        color: var(--header-2);
        overflow: hidden;
    }

    .mega-menu footer a img {
        object-fit: contain;
        width: var(--_s);
        height: var(--_s);
    }

    .mega-menu footer .more {
        --_s: 1.75rem;
        color: var(--gray);
        margin-bottom: 2rem;
        justify-content: start;
    }

    .mega-menu footer .try {
        --_s: 2rem;
        background: var(--black);
        color: var(--white);
        text-transform: uppercase;
    }

    .mega-menu footer .login {
        color: var(--header-2);
        border: 1px solid var(--header-2);
    }

    .mega-menu ul {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin-top: 4rem;
    }

    .mega-menu li>:is(button, a) {
        font-size: 2rem;
        font-weight: 600;
        color: var(--header-2);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 1.4rem;
        transition: 0.5s;
        width: 100%;
        border-radius: .5rem;
        overflow: hidden;
    }

    .mega-menu li>button::after {
        content: '';
        width: 1rem;
        height: 1.799rem;
        background: url('assets/dropdown_arrow_right.svg');
        background-size: contain;
    }

    .mega-menu li.active>button::after {
        content: '';
        width: 1.9rem;
        height: 1.048rem;
        background: url('assets/dropdown_arrow.svg');
    }

    .mega-menu li.active button {
        background-color: var(--_gray);
    }

    .mega-menu li menu {
        transition: 0.5s;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        padding-left: 3.3rem;
    }

    .mega-menu li.active menu {
        max-height: 250vh;
        padding-top: 2.8rem;
        opacity: 1;
    }

    .mega-menu li menu a {
        display: flex;
        gap: 1rem;
        font-size: 1.6rem;
        font-weight: 800;
        align-items: center;
        color: var(--header-2);
    }

    .mega-menu li menu a.more {
        font-weight: 600;
        color: var(--gray);
    }


    .mega-menu li menu a img {
        --_s: 3rem;
        object-fit: contain;
        width: var(--_s);
        height: var(--_s);
    }

    .mega-menu .integration-drop menu a img {
        --_s: 1.7rem;
    }

    .mega-menu li menu a.more img {
        --_s: 1.3rem;
    }
}

/* @end */