/* ============================================================
   nav-dropdown.css — Mega menú de servicios
   Crearte Publi
   ============================================================ */

.nav-item--has-dropdown {
    position: relative;
}

body.dropdown-open.dropdown-theme-dark .site-header {
    background: var(--header-surface-dark);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
}

body.dropdown-open.dropdown-theme-light .site-header {
    background: var(--header-surface-light);
    border-radius: 0 0 var(--radius-header) var(--radius-header);
    box-shadow: none;
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
}

body.dropdown-open.dropdown-theme-dark .site-header .logo-img--top,
body.dropdown-open.dropdown-theme-dark .site-header .header-contact-img--top {
    opacity: 1;
}

body.dropdown-open.dropdown-theme-dark .site-header .logo-img--solid,
body.dropdown-open.dropdown-theme-dark .site-header .header-contact-img--solid {
    opacity: 0;
}

body.dropdown-open.dropdown-theme-light .site-header .logo-img--top,
body.dropdown-open.dropdown-theme-light .site-header .header-contact-img--top {
    opacity: 0;
}

body.dropdown-open.dropdown-theme-light .site-header .logo-img--solid,
body.dropdown-open.dropdown-theme-light .site-header .header-contact-img--solid {
    opacity: 1;
}

body.dropdown-open.dropdown-theme-dark .nav-island {
    background: var(--header-nav-dark-bg);
    border-color: var(--header-nav-dark-border);
    box-shadow: none;
}

body.dropdown-open.dropdown-theme-light .nav-island {
    background: var(--header-nav-light-bg);
    border-color: var(--header-nav-light-border);
    box-shadow: var(--shadow-sm);
}

body.dropdown-open.dropdown-theme-dark .nav-btn {
    color: var(--header-nav-dark-text);
}

body.dropdown-open.dropdown-theme-light .nav-btn {
    color: var(--header-nav-light-text);
}

body.dropdown-open.dropdown-theme-dark .nav-btn:hover,
body.dropdown-open.dropdown-theme-dark .nav-btn:focus-visible,
body.dropdown-open.dropdown-theme-dark .nav-btn--dropdown {
    background: var(--header-nav-dark-bg-hover);
    color: var(--text-inverse);
}

body.dropdown-open.dropdown-theme-light .nav-btn:hover,
body.dropdown-open.dropdown-theme-light .nav-btn:focus-visible,
body.dropdown-open.dropdown-theme-light .nav-btn--dropdown {
    background: var(--surface-200);
    color: var(--header-nav-light-text-hover);
}

body.dropdown-open.dropdown-theme-dark .nav-dropdown-icon {
    filter: invert(1);
    transform: rotate(180deg);
}

body.dropdown-open.dropdown-theme-light .nav-dropdown-icon {
    filter: brightness(0) saturate(0) opacity(0.5);
    transform: rotate(180deg);
}

.dropdown-panel {
    position: fixed;
    inset: 0 0 auto;
    z-index: 90;
    height: var(--menu-panel-height);
    padding: calc(var(--header-h) + clamp(1.5rem, 5dvh, 4rem)) clamp(1.25rem, 6vw, 5rem) clamp(2rem, 5dvh, 4rem);
    overflow: visible;
    overscroll-behavior: contain;
    color: var(--menu-text);
    background:
        linear-gradient(180deg, var(--menu-surface-solid), var(--menu-surface) 72%, var(--menu-surface-end)),
        var(--menu-surface-solid);
    border-bottom: var(--border-width) solid var(--menu-border);
    box-shadow: var(--menu-panel-shadow);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, -18px, 0);
    transition:
        opacity 0.34s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
    scrollbar-width: none;
}

.dropdown-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.dropdown-panel::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 100%;
    height: var(--menu-fade-height);
    pointer-events: none;
    /* Velo inferior:
       Ajusta tamano/intensidad en css/estilos.css:
       --menu-fade-height, --menu-fade-blur, --menu-fade-start/mid/end.
       Este pseudo-elemento no tiene scroll interno; solo suaviza lo que queda debajo. */
    background:
        linear-gradient(180deg, var(--menu-fade-start), var(--menu-fade-mid) 42%, var(--menu-fade-end));
    backdrop-filter: blur(var(--menu-fade-blur));
    -webkit-backdrop-filter: blur(var(--menu-fade-blur));
}

.dropdown-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}

body.dropdown-theme-light .dropdown-panel {
    color: var(--menu-light-text);
    background:
        var(--pearl);
    border-bottom-color: var(--menu-light-border);
    box-shadow: none;
}

body.dropdown-theme-light .dropdown-panel::after {
    background:
        linear-gradient(180deg, var(--menu-light-fade-start), var(--menu-light-fade-mid) 42%, var(--menu-light-fade-end));
}

body.dropdown-theme-light .mega-menu-kicker {
    color: var(--menu-light-text-soft);
}

body.dropdown-theme-light .mega-menu-title,
body.dropdown-theme-light .dropdown-label {
    color: var(--menu-light-text);
}

body.dropdown-theme-light .dropdown-desc {
    color: var(--menu-light-text-muted);
}

body.dropdown-theme-light .dropdown-link:hover,
body.dropdown-theme-light .dropdown-link:focus-visible {
    background: var(--menu-light-hover-bg);
}

.mega-menu-content {
    width: min(1320px, 100%);
    margin-inline: auto;
}

.mega-menu-main {
    display: grid;
    grid-template-columns: minmax(15rem, 0.45fr) minmax(0, 1.55fr);
    gap: clamp(1.25rem, 4vw, 3rem);
    align-items: start;
}

.mega-menu-kicker {
    margin-bottom: 0.75rem;
    color: var(--menu-text-soft);
    font-size: var(--text-sm);
    font-weight: 800;
}

.mega-menu-title {
    grid-column: 1;
    max-width: 14ch;
    margin-bottom: 0;
    color: var(--menu-text);
    font-size: clamp(1.9rem, 1.35rem + 1.5vw, 2.8rem);
    line-height: 0.98;
    font-weight: 900;
    letter-spacing: 0;
    text-wrap: balance;
}

.dropdown-list {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.15rem clamp(0.75rem, 2vw, 1.5rem);
    margin: 0;
    padding: 0;
}

.dropdown-item {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
    transition-delay: calc(var(--item-index, 0) * 32ms);
}

.dropdown-panel.is-open .dropdown-item {
    opacity: 1;
    transform: translateY(0);
}

.dropdown-link {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    min-block-size: 3.65rem;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius-lg);
    color: inherit;
    outline-offset: 4px;
    transition:
        background-color var(--transition-smooth),
        color var(--transition-smooth),
        transform var(--transition-smooth);
}

.dropdown-link::after {
    content: "";
    width: 0.72rem;
    height: 0.72rem;
    background: currentColor;
    mask: url("../images/svg/dropdown.svg") center / contain no-repeat;
    -webkit-mask: url("../images/svg/dropdown.svg") center / contain no-repeat;
    opacity: 0;
    transform: translateX(-6px) rotate(-90deg);
    transition:
        opacity var(--transition-smooth),
        transform var(--transition-smooth);
}

.dropdown-link:hover,
.dropdown-link:focus-visible {
    background: var(--menu-hover-bg);
    transform: translateX(4px);
}

.dropdown-link:hover::after,
.dropdown-link:focus-visible::after {
    opacity: 0.78;
    transform: translateX(0) rotate(-90deg);
}

.dropdown-label {
    display: block;
    color: var(--menu-text);
    font-size: clamp(1.05rem, 0.9rem + 0.45vw, 1.45rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
}

.dropdown-desc {
    display: block;
    margin-top: 0.25rem;
    color: var(--menu-text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.35;
}

@media (max-width: 1050px) {
    .mega-menu-main {
        grid-template-columns: 1fr;
    }

    .dropdown-list {
        grid-column: 1;
        grid-row: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mega-menu-title {
        max-width: 18ch;
        margin-bottom: 0.25rem;
    }
}

@media (max-width: 768px) {
    .dropdown-panel {
        display: none;
    }
}

@media (max-width: 640px) {
    .dropdown-list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dropdown-panel,
    .dropdown-item,
    .dropdown-link {
        transition: none;
    }
}