/**
 * GME Header — cabeçalho + mega menu "Nossas Competências"
 *
 * Portado de header.html (widget estático) para asset do plugin.
 * O mega menu que antes ocupava a tela inteira (position:fixed;inset:0) virou
 * um DROPDOWN compacto ancorado abaixo do header (~70% menor), mantendo a mesma
 * pegada visual (tipografia itálica, cores da marca, 2 colunas, chips, botões).
 *
 * Escopo: tudo sob #gme-header-shell.
 *
 * @package RS_Gestao
 */

#gme-header-shell,
#gme-header-shell * {
    box-sizing: border-box
}

#gme-header-shell {
    --txt: #17171c;
    --muted: #6e6e78;
    --line: #ececf2;
    --soft: #f7f7fa;
    --soft-2: #fbfbfd;
    --accent: #d8303f;
    --accent-dark: #b8242f;
    --accent-soft: rgba(216, 48, 63, .08);
    --ghost: #b7b7c3;
    --shadow: 0 22px 55px rgba(15, 15, 20, .08);
    font-family: 'Nunito Sans', sans-serif;
    color: var(--txt);
    width: 100%;
    position: relative;
    z-index: 90
}

#gme-header-shell.is-mega-open {
    z-index: 99999
}

#gme-header-shell a {
    text-decoration: none;
    color: inherit
}

#gme-header-shell button {
    font: inherit;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    color: inherit
}

#gme-header-shell img {
    display: block;
    max-width: 100%;
    height: auto
}

#gme-header-shell svg {
    display: block
}

.gme-header {
    background: #fff;
    border-bottom: 1px solid rgba(23, 23, 28, .06)
}

.gme-header__inner {
    width: min(1600px, calc(100% - 32px));
    min-height: 76px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 26px
}

.gme-header__brand img {
    width: clamp(120px, 9vw, 158px)
}

.gme-header__nav {
    display: flex;
    justify-content: center
}

.gme-nav {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0
}

.gme-nav__item {
    position: relative
}

.gme-nav__link {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px 0 14px;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    background: #fff;
    border-radius: 999px;
    transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease
}

.gme-nav__link:hover {
    background: var(--soft);
    border-color: rgba(23, 23, 28, .08);
    color: var(--accent)
}

#gme-header-shell.is-mega-open [data-mega-trigger] {
    background: var(--accent-soft);
    border-color: rgba(216, 48, 63, .25);
    color: var(--accent)
}

.gme-nav__label {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    text-transform: uppercase;
    font-style: normal
}

.gme-nav__icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px
}

.gme-nav__icon svg {
    width: 18px;
    height: 18px
}

.gme-nav__chevron {
    width: 9px;
    height: 9px;
    margin-left: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform .22s ease
}

#gme-header-shell.is-mega-open [data-mega-trigger] .gme-nav__chevron {
    transform: rotate(-135deg) translateY(-1px)
}

.gme-header__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px
}

.gme-header__lang {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    overflow: hidden
}

.gtranslate_wrapper,
.gme-header__lang .gt_switcher_wrapper,
.gme-header__lang .gt_float_switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap
}

.glink,
.gme-header__lang a.nturl,
.gme-header__lang .gt_selector,
.gme-header__lang .gt-current-lang {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid transparent;
    opacity: .8;
    transition: opacity .2s ease, background .2s ease, border-color .2s ease, transform .2s ease
}

.glink:hover,
.glink.gt-current-lang,
.gme-header__lang a.nturl:hover,
.gme-header__lang .gt-current-lang {
    opacity: 1;
    background: var(--soft);
    border-color: rgba(23, 23, 28, .08);
    transform: translateY(-1px)
}

.glink img,
.gme-header__lang img {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    overflow: hidden;
    object-fit: cover
}

#google_translate_element2,
.gme-header__lang .gt_float_switcher .gt_options,
.gme-header__lang .goog-te-gadget {
    display: none !important
}

.gme-header__mobile-toggle {
    display: none;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff
}

.gme-header__mobile-toggle-lines {
    width: 18px;
    height: 14px;
    display: grid;
    align-content: space-between
}

.gme-header__mobile-toggle-lines span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: .2s ease
}

.gme-header.is-mobile-open .gme-header__mobile-toggle-lines span:nth-child(1) {
    transform: translateY(6px) rotate(45deg)
}

.gme-header.is-mobile-open .gme-header__mobile-toggle-lines span:nth-child(2) {
    opacity: 0
}

.gme-header.is-mobile-open .gme-header__mobile-toggle-lines span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg)
}

/* ============================================================
   MEGA MENU "COMPETÊNCIAS" — dropdown compacto ancorado
   ============================================================ */

.gme-mega {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 999999;
    padding: 0 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .26s ease, transform .26s ease, visibility 0s linear .26s
}

#gme-header-shell.is-mega-open .gme-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity .26s ease, transform .26s ease
}

.gme-mega__inner {
    width: min(1080px, 100%);
    max-height: min(72vh, 620px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    background-image: radial-gradient(760px 340px at 92% -20%, rgba(216, 48, 63, .05), transparent 60%);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
    overflow: hidden
}

.gme-mega__body {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain
}

/* ---- coluna esquerda: categorias ---- */

.gme-mega__rail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 22px 30px 18px 28px;
    border-right: 1px solid var(--line)
}

.gme-mega__eyebrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent)
}

.gme-mega__eyebrow:after {
    content: '';
    width: 30px;
    height: 1px;
    background: rgba(216, 48, 63, .4)
}

.gme-mega__cats {
    margin: auto 0;
    padding: 14px 0
}

.gme-cat {
    display: block;
    padding: 11px 0
}

.gme-cat+.gme-cat {
    border-top: 1px solid var(--line)
}

.gme-cat__link {
    display: block
}

.gme-cat__top {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px
}

.gme-cat__num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--accent)
}

.gme-cat__meta {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .25s ease
}

.gme-cat__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px
}

.gme-cat__word {
    position: relative;
    display: inline-block;
    font-size: clamp(24px, 2.1vw, 34px);
    line-height: 1.05;
    font-weight: 200;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .01em;
    padding: 0 .12em 5px 0;
    color: var(--ghost);
    transition: color .28s ease
}

.gme-cat__word:after {
    content: '';
    position: absolute;
    left: 2px;
    right: .14em;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .42s cubic-bezier(.22, .61, .36, 1)
}

.gme-cat.is-active .gme-cat__word {
    color: var(--txt)
}

.gme-cat.is-active .gme-cat__word:after {
    transform: scaleX(1)
}

.gme-cat.is-active .gme-cat__meta {
    color: var(--txt)
}

.gme-cat__go {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 999px;
    border: 1px solid rgba(216, 48, 63, .3);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .28s ease, transform .28s ease, background .22s ease, color .22s ease
}

.gme-cat__go svg {
    width: 17px;
    height: 17px
}

.gme-cat.is-active .gme-cat__go {
    opacity: 1;
    transform: none
}

.gme-cat:hover .gme-cat__go {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff
}

.gme-cat__caret {
    display: none
}

.gme-cat__slot {
    display: none
}

/* "Customize seu AGV" — vertente fixa (não alterna painel, sempre com aparência "pronta") */
.gme-cat--cta .gme-cat__word {
    color: var(--txt) !important
}

.gme-cat--cta .gme-cat__word:after {
    transform: scaleX(1)
}

.gme-cat--cta .gme-cat__go {
    display: inline-flex !important;
    opacity: 1;
    transform: none
}

.gme-mega__note {
    flex: 0 0 auto;
    max-width: 40ch;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--muted)
}

/* ---- coluna direita: painéis ---- */

.gme-mega__panels {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 22px 22px 20px 30px;
    overflow: auto;
    overscroll-behavior: contain
}

.gme-mega__panel {
    display: none
}

.gme-mega__panel.is-active {
    display: block;
    margin: auto 0
}

.gme-panel__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    margin-bottom: 18px
}

.gme-panel__eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent)
}

.gme-panel__title {
    margin: 0 0 8px;
    font-size: clamp(18px, 1.4vw, 22px);
    font-weight: 700;
    line-height: 1.18;
    max-width: 24ch;
    text-wrap: pretty
}

.gme-panel__copy {
    margin: 0;
    max-width: 56ch;
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--muted)
}

.gme-panel__go {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--txt);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease
}

.gme-panel__go:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-2px)
}

.gme-panel__go svg {
    width: 18px;
    height: 18px
}

/* cards (usados só na aba Serviços — fixos) */

.gme-feats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
}

.gme-feat {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 14px;
    border: 1px solid rgba(23, 23, 28, .07);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff 0%, var(--soft-2) 100%);
    transition: transform .2s ease, border-color .2s ease
}

.gme-feat:hover {
    transform: translateY(-2px);
    border-color: rgba(216, 48, 63, .25)
}

.gme-feat__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px
}

.gme-feat__icon svg {
    width: 19px;
    height: 19px
}

.gme-feat strong {
    display: block;
    margin-bottom: 3px;
    font-size: 13.5px;
    font-weight: 600;
    transition: color .2s ease
}

.gme-feat:hover strong {
    color: var(--accent)
}

.gme-feat span span {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--muted)
}

.gme-feat__hint {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    color: var(--accent);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity .22s ease, transform .22s ease
}

.gme-feat__hint svg {
    width: 100%;
    height: 100%
}

.gme-feat:hover .gme-feat__hint {
    opacity: 1;
    transform: none
}

.gme-panel__label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted)
}

.gme-panel__label:after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line)
}

.gme-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.gme-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 17px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 300;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease
}

.gme-chip:hover {
    background: var(--accent-soft);
    border-color: rgba(216, 48, 63, .35);
    color: var(--accent);
    transform: translateY(-1px)
}

.gme-panel__more {
    display: none
}

.gme-panel__empty {
    font-size: 12.5px;
    font-weight: 300;
    color: var(--muted)
}

/* ---- rodapé do mega ---- */

.gme-mega__foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 24px;
    border-top: 1px solid var(--line)
}

.gme-mega__foot-note {
    margin: 0;
    font-size: 12.5px;
    font-weight: 300;
    color: var(--muted)
}

.gme-mega__foot-note a {
    color: var(--accent);
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease
}

.gme-mega__foot-note a:hover {
    border-bottom-color: var(--accent)
}

.gme-mega__foot-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.gme-btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--accent);
    color: #fff;
    transition: background .22s ease, transform .22s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease
}

.gme-btn:hover {
    background: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(216, 48, 63, .28)
}

.gme-btn.-ghost {
    background: #fff;
    color: var(--txt);
    border: 1px solid var(--line);
    box-shadow: none
}

.gme-btn.-ghost:hover {
    background: var(--soft);
    border-color: rgba(216, 48, 63, .3);
    color: var(--accent);
    box-shadow: none
}

/* ---- animações ---- */

@keyframes gmeRise {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

#gme-header-shell.is-mega-open .gme-cat {
    animation: gmeRise .45s cubic-bezier(.22, .61, .36, 1) both
}

#gme-header-shell.is-mega-open .gme-cat:nth-child(2) {
    animation-delay: .06s
}

#gme-header-shell.is-mega-open .gme-cat:nth-child(3) {
    animation-delay: .12s
}

#gme-header-shell.is-mega-open .gme-mega__panel.is-active .gme-anim {
    animation: gmeRise .42s cubic-bezier(.22, .61, .36, 1) both
}

#gme-header-shell.is-mega-open .gme-mega__panel.is-active .gme-anim.-d2 {
    animation-delay: .06s
}

#gme-header-shell.is-mega-open .gme-mega__panel.is-active .gme-anim.-d3 {
    animation-delay: .12s
}

#gme-header-shell.is-mega-open .gme-mega__panel.is-active .gme-anim.-d4 {
    animation-delay: .18s
}

@media (prefers-reduced-motion: reduce) {

    #gme-header-shell *,
    #gme-header-shell *::before,
    #gme-header-shell *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important
    }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 1120px) {
    .gme-mega__body {
        grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr)
    }

    .gme-feats {
        grid-template-columns: 1fr
    }
}

@media (max-width: 980px) {
    .gme-header__inner {
        min-height: 72px;
        gap: 14px
    }

    .gme-header__mobile-toggle {
        display: inline-flex
    }

    .gme-header__nav {
        position: absolute;
        left: 16px;
        right: 16px;
        top: calc(100% + 10px);
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(10px);
        transition: .22s ease
    }

    .gme-header.is-mobile-open .gme-header__nav {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none
    }

    .gme-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 24px;
        background: #fff;
        box-shadow: var(--shadow)
    }

    .gme-nav__item {
        width: 100%
    }

    .gme-nav__link {
        width: 100%;
        min-height: 52px;
        justify-content: flex-start;
        border-color: rgba(23, 23, 28, .06)
    }

    .gme-nav__link .gme-nav__chevron {
        margin-left: auto;
        transform: rotate(-45deg)
    }

    /* ---- mega no mobile: acordeão por categoria dentro do dropdown ---- */

    .gme-mega {
        position: absolute;
        top: calc(100% + 8px);
        padding: 0 12px
    }

    .gme-mega__inner {
        width: 100%;
        max-height: min(78vh, 640px)
    }

    .gme-mega__body {
        display: block;
        overflow: auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch
    }

    .gme-mega__rail {
        display: block;
        min-height: auto;
        overflow: visible;
        padding: 16px 16px 6px;
        border-right: 0
    }

    .gme-mega__cats {
        margin: 0;
        padding: 8px 0 0
    }

    .gme-cat {
        padding: 12px 0
    }

    .gme-cat__top {
        margin-bottom: 6px
    }

    .gme-cat__word {
        font-size: clamp(26px, 8vw, 38px);
        font-weight: 300;
        line-height: 1.05;
        padding-bottom: 6px;
        color: var(--txt)
    }

    .gme-cat__word:after {
        height: 3px
    }

    .gme-mega__cats:has(.is-active) .gme-cat:not(.is-active) .gme-cat__word {
        color: var(--ghost)
    }

    .gme-cat__go {
        display: none
    }

    .gme-cat__caret {
        display: inline-flex;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 999px;
        border: 1px solid var(--line);
        align-items: center;
        justify-content: center;
        color: var(--muted);
        transition: background .25s ease, border-color .25s ease, color .25s ease
    }

    .gme-cat__caret:before {
        content: '';
        width: 9px;
        height: 9px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        transition: transform .3s ease
    }

    .gme-cat.is-active .gme-cat__caret {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff
    }

    .gme-cat.is-active .gme-cat__caret:before {
        transform: rotate(-135deg) translateY(-2px)
    }

    .gme-cat__slot {
        display: grid;
        grid-template-rows: 0fr;
        visibility: hidden;
        transition: grid-template-rows .4s cubic-bezier(.22, .61, .36, 1), visibility .4s
    }

    .gme-cat.is-active .gme-cat__slot {
        grid-template-rows: 1fr;
        visibility: visible
    }

    .gme-cat__slot .gme-mega__panel {
        display: block;
        min-height: 0;
        margin: 0;
        overflow: hidden;
        padding: 8px 2px 6px
    }

    .gme-mega__note {
        display: none
    }

    .gme-mega__panels {
        display: none
    }

    .gme-panel__head {
        display: block;
        margin-bottom: 12px
    }

    .gme-panel__eyebrow,
    .gme-panel__title,
    .gme-panel__go {
        display: none
    }

    .gme-panel__copy {
        font-size: 12.5px
    }

    .gme-panel__label {
        margin: 16px 0 10px
    }

    .gme-panel__more {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
        min-height: 42px;
        font-size: 12.5px;
        font-weight: 600;
        font-style: normal;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--accent)
    }

    .gme-panel__more svg {
        width: 16px;
        height: 16px
    }

    .gme-mega__foot {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        padding: 14px 16px calc(16px + env(safe-area-inset-bottom))
    }

    .gme-mega__foot-note {
        text-align: center
    }

    .gme-mega__foot-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 8px
    }

    .gme-mega__foot-cta .gme-btn {
        width: 100%
    }
}

@media (max-width: 680px) {
    .gme-header__inner {
        width: min(100% - 20px, 1400px);
        min-height: 68px;
        gap: 10px
    }

    .gme-header__brand img {
        width: 122px
    }

    .gme-header__lang {
        max-width: 124px;
        overflow-x: auto;
        scrollbar-width: none
    }

    .gme-header__lang::-webkit-scrollbar {
        display: none
    }

    .gtranslate_wrapper {
        gap: 4px
    }

    .glink {
        width: 28px;
        height: 28px
    }

    .gme-chip {
        min-height: 38px;
        padding: 0 14px;
        font-size: 12px
    }
}