/* ============================================================
   CABECALHO - logo solta a esquerda e dois "pods" brancos a
   direita (links | acoes). As bordas que se encaram sao
   concavas: um circulo e recortado do canto de cima e outro do
   de baixo via mask, deixando o meio saliente - as duas capsulas
   parecem se encaixar, como na referencia.
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    /* o header nao tem fundo proprio: ele se sobrepoe a hero escura,
       que e puxada para cima pela altura dele - so assim as capsulas
       brancas e a caixa do logo leem como na referencia */
    margin-bottom: -105px;
    background: transparent;
    transition: background .25s ease, border-color .25s ease;
    border-bottom: 1px solid transparent
}

.site-header.scrolled {
    background: transparent;
    backdrop-filter: none;
    border-bottom-color: transparent
}

/* ao rolar, a caixa do logo se funde com as capsulas: vira uma
   unica barra branca que vai da esquerda a direita, com a curva da
   imenda preservada entre links e acoes */
.site-header.scrolled .nav-shell {
    gap: 0
}

.site-header.scrolled .brand {
    flex: 1 1 auto;
    justify-items: start;
    height: 64px;
    padding: 0 0 0 32px;
    border-color: transparent;
    border-radius: 999px 0 0 999px
}

.site-header.scrolled .nav-pod--links {
    border-radius: 0;
    padding-left: 34px
}

.nav-pod--links {
    transition: border-radius .45s cubic-bezier(.4, 0, .2, 1), padding .45s cubic-bezier(.4, 0, .2, 1)
}

/* o cabecalho acompanha a largura das secoes: mesma caixa do
   .container, com o logo alinhado a coluna da esquerda e a
   capsula de acoes terminando na coluna da direita */
.nav-shell {
    width: min(1320px, calc(100% - 42px));
    margin: 0 auto;
    height: 104px;
    display: flex;
    align-items: center;
    gap: 26px;
    transition: gap .45s cubic-bezier(.4, 0, .2, 1), height .45s cubic-bezier(.4, 0, .2, 1)
}

.brand {
    display: grid;
    place-items: center;
    height: 64px;
    /* a capsula do logo nao encolhe: como item flex da .nav-shell ela
       era comprimida pelas duas capsulas de navegacao e, com o
       max-width:100% do reset, a imagem encolhia junto - a marca saia
       com 83px em vez dos 132px pedidos aqui embaixo. No mobile isso
       nao acontecia porque .nav-pods esta oculto, e por isso a logo
       lia bem maior la. O estado .scrolled sobrescreve com
       flex:1 1 auto, entao a fusao na barra branca segue igual. */
    flex: 0 0 auto;
    padding: 0 26px;
    border-radius: 999px;
    border: 2px solid rgba(9, 3, 23, .55);
    background: #fff;
    /* a fusao com as capsulas ao rolar e animada: largura, altura,
       recuo e o raio dos cantos correm juntos na mesma curva */
    transition: flex-grow .45s cubic-bezier(.4, 0, .2, 1), height .45s cubic-bezier(.4, 0, .2, 1), padding .45s cubic-bezier(.4, 0, .2, 1), border-radius .45s cubic-bezier(.4, 0, .2, 1), border-color .3s ease
}

.brand img {
    width: 132px;
    display: block
}

.nav-pods {
    display: flex;
    align-items: center;
    /* as duas capsulas se tocam: juntas leem como uma unica forma
       branca, estrangulada no encontro pelas mordidas circulares */
    gap: 0;
    margin-left: auto
}

.nav-pod {
    height: 64px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    background: #fff
}

/* a imenda usa a MESMA curva da fita dos logos rolantes: o cap e o
   proprio recorte do logo-scallop, com os mesmos pontos de controle
   e a mesma proporcao de pescoco (50% da altura), so espelhado para
   cada lado. Nada de mordida circular - a curva sai da borda cheia e
   chega ao pescoco em S, sem bico. */
.nav-pod--links {
    border-radius: 999px 0 0 999px;
    /* gap e recuos apertados em ~50px no total: e o espaco que a
       capsula do logo precisa para exibir a marca em 132px sem que a
       barra estoure a largura do .container */
    gap: 26px;
    padding: 0 44px 0 34px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2264%22%20viewBox%3D%220%200%2044%2064%22%3E%3Cpath%20d%3D%22M0%2C0%20C28.1%2C0%2031.8%2C13.9%2044%2C13.9%20L44%2C50.1%20C31.8%2C50.1%2028.1%2C64%200%2C64%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(#000, #000);
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2264%22%20viewBox%3D%220%200%2044%2064%22%3E%3Cpath%20d%3D%22M0%2C0%20C28.1%2C0%2031.8%2C13.9%2044%2C13.9%20L44%2C50.1%20C31.8%2C50.1%2028.1%2C64%200%2C64%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 44px 100%, calc(100% - 43px) 100%;
    mask-size: 44px 100%, calc(100% - 43px) 100%;
    -webkit-mask-position: right center, left center;
    mask-position: right center, left center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

.nav-pod--links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap
}

.nav-pod--links a i {
    font-size: 13px;
    opacity: .75
}

.nav-pod--links a:hover {
    color: var(--purple)
}

.nav-pod--actions {
    border-radius: 0 999px 999px 0;
    gap: 18px;
    padding: 0 7px 0 38px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2264%22%20viewBox%3D%220%200%2044%2064%22%3E%3Cpath%20d%3D%22M44%2C0%20C15.9%2C0%2012.2%2C13.9%200%2C13.9%20L0%2C50.1%20C12.2%2C50.1%2015.9%2C64%2044%2C64%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(#000, #000);
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2264%22%20viewBox%3D%220%200%2044%2064%22%3E%3Cpath%20d%3D%22M44%2C0%20C15.9%2C0%2012.2%2C13.9%200%2C13.9%20L0%2C50.1%20C12.2%2C50.1%2015.9%2C64%2044%2C64%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 44px 100%, calc(100% - 43px) 100%;
    mask-size: 44px 100%, calc(100% - 43px) 100%;
    -webkit-mask-position: left center, right center;
    mask-position: left center, right center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

.nav-enter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 22px;
    border-radius: 999px;
    background: #0b0712;
    color: #fff;
    font-family: Nunito, sans-serif;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease
}

.nav-enter:hover {
    transform: translateY(-2px);
    background: #21162f;
    box-shadow: 0 12px 24px rgba(9, 3, 23, .22)
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    height: 50px;
    padding: 0 30px;
    border-radius: 999px;
    color: #fff;
    font-family: Nunito, sans-serif;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--purple), #7436e7 58%, var(--pink));
    transition: transform .2s ease, box-shadow .2s ease
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(89, 50, 193, .32)
}

@media(max-width:1400px) {
    .site-header {
        margin-bottom: -92px
    }

    .nav-shell {
        height: 92px
    }

    .nav-pod {
        height: 58px
    }

    .nav-pod--links {
        gap: 20px;
        padding: 0 40px 0 28px
    }

    .nav-pod--links a {
        font-size: .9rem
    }

    .nav-pod--actions {
        gap: 16px;
        padding: 0 7px 0 34px
    }

    .nav-cta {
        height: 46px;
        padding: 0 22px;
        font-size: 14px
    }

    .nav-enter {
        height: 46px;
        padding: 0 18px;
        font-size: 14px
    }

    .brand img {
        width: 112px
    }
}

/* abaixo de ~1210px a barra ja nao comporta o logo em tamanho cheio:
   a capsula volta a ceder espaco (flex-shrink), como fazia antes, para
   a pagina nao ganhar rolagem horizontal. Acima disso ela nao encolhe e
   a marca aparece nos 132px pedidos. */
@media(max-width:1210px) {
    .brand {
        flex: 0 1 auto
    }
}

/* botao do menu: capsula branca de 52px (alvo de toque acima do
   minimo) com tres barras que viram um X ao abrir */
.menu-toggle {
    display: none;
    margin-left: auto;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--purple-dark);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s ease
}

.menu-toggle:active {
    transform: scale(.94)
}

.menu-toggle__bars {
    display: grid;
    gap: 5px;
    width: 20px
}

.menu-toggle__bars i {
    display: block;
    height: 2.5px;
    border-radius: 2px;
    background: var(--purple-dark);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .18s ease
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg)
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(2) {
    opacity: 0
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg)
}

.mobile-menu {
    display: none
}

.mobile-scrim {
    display: none
}

/* Reserva o mesmo espaco da LP anterior para o cabecalho flutuante. */
body > .site-header + main > .hero {
    padding-top: 160px
}

/* o cabecalho troca para a barra compacta em 1210px, e nao em 1080px:
   abaixo disso as duas capsulas de navegacao nao cabem mais ao lado do
   logo, e a capsula da marca era espremida ate a imagem sumir (0x0 em
   1081px, com a pagina ganhando rolagem horizontal). O resto do layout
   segue trocando em 1080px, no bloco logo abaixo. */
@media(max-width:1210px) {

    /* ---- cabecalho mobile: barra compacta com a capsula do logo e
       o botao do menu, respeitando a area segura do aparelho ---- */
    .nav-pods {
        display: none
    }

    .menu-toggle {
        display: grid
    }

    .site-header {
        margin-bottom: calc(-1px - 76px - env(safe-area-inset-top, 0px))
    }

    .nav-shell {
        width: 100%;
        height: calc(76px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) 18px 0;
        gap: 14px
    }

    .brand {
        height: 52px;
        padding: 0 20px
    }

    .brand img {
        width: 104px
    }

    .site-header.scrolled .nav-shell {
        gap: 14px
    }

    .site-header.scrolled .brand {
        flex: 0 0 auto;
        height: 52px;
        padding: 0 20px;
        border-color: rgba(9, 3, 23, .55);
        border-radius: 999px
    }

    /* nada de fundo na barra ao rolar: so as capsulas flutuam. Para
       nao passarem por cima do conteudo, o cabecalho se retrai
       durante a rolagem e volta quando ela para (classe .hidden
       controlada no script). */
    .site-header.scrolled {
        background: transparent;
        backdrop-filter: none
    }

    .site-header {
        transition: transform .32s cubic-bezier(.4, 0, .2, 1)
    }

    .site-header.hidden {
        transform: translateY(calc(-100% - 8px))
    }

    body.menu-open .site-header {
        transform: none
    }

    body > .site-header + main > .hero {
        /* a barra flutua sobre a hero: o topo reserva a altura dela
           (76px + area segura) mais uma folga curta */
        padding-top: calc(88px + env(safe-area-inset-top, 0px))
    }

    /* ---- painel: folha inteira, deslizando de cima ---- */
    .mobile-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 98;
        background: rgba(9, 3, 23, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease
    }

    .mobile-scrim.open {
        opacity: 1;
        pointer-events: auto
    }

    .mobile-menu {
        display: flex;
        position: fixed;
        inset: 0 0 auto;
        z-index: 99;
        flex-direction: column;
        gap: 26px;
        padding: calc(96px + env(safe-area-inset-top, 0px)) 20px calc(26px + env(safe-area-inset-bottom, 0px));
        border-radius: 0 0 30px 30px;
        background: var(--purple-dark);
        box-shadow: 0 26px 60px rgba(9, 3, 23, .4);
        transform: translateY(-102%);
        transition: transform .38s cubic-bezier(.4, 0, .2, 1), visibility .38s;
        max-height: 100dvh;
        /* fechado o painel nao existe para o navegador: sem isso a
           area rolavel dele desenha uma barra de rolagem sobre a
           pagina no mobile */
        visibility: hidden;
        overflow: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch
    }

    .mobile-menu::-webkit-scrollbar {
        display: none
    }

    .mobile-menu.open {
        transform: translateY(0);
        visibility: visible;
        overflow-y: auto
    }

    .mobile-menu__list {
        display: grid
    }

    .mobile-menu__list details {
        border-bottom: 1px solid rgba(255, 255, 255, .1)
    }

    .mobile-menu__list summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 60px;
        padding: 0 4px;
        color: #fff;
        font-family: "Plus Jakarta Sans", "Space Grotesk", Nunito, sans-serif;
        font-size: 19px;
        font-weight: 700;
        cursor: pointer;
        list-style: none;
        -webkit-tap-highlight-color: transparent
    }

    .mobile-menu__list summary::-webkit-details-marker {
        display: none
    }

    .mobile-menu__list summary:active,
    .mobile-menu__submenu a:active {
        color: #c6a6ff
    }

    .mobile-menu__list summary i {
        font-size: 15px;
        color: rgba(255, 255, 255, .45);
        transition: transform .25s ease
    }

    .mobile-menu__list details[open] summary i {
        transform: rotate(180deg)
    }

    .mobile-menu__submenu {
        display: grid;
        gap: 2px;
        padding: 0 4px 13px 20px
    }

    .mobile-menu__submenu a {
        min-height: 38px;
        display: flex;
        align-items: center;
        padding: 0 12px;
        border-left: 2px solid rgba(198, 166, 255, .35);
        color: rgba(255, 255, 255, .72);
        font-size: 14px;
        font-weight: 700
    }

    .mobile-menu__foot {
        display: grid;
        gap: 14px;
        text-align: center
    }

    .mobile-menu__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 56px;
        border-radius: 999px;
        background: var(--purple);
        color: #fff;
        font-family: Nunito, sans-serif;
        font-size: 16px;
        font-weight: 900
    }

    .mobile-menu__login {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 999px;
        background: #09030f;
        color: #fff;
        font-size: 15px;
        font-weight: 900
    }

}

/* ============================================================
   MEGA-MENU DE SOLUCOES - painel que abre no clique do item
   "Solucoes" do cabecalho. Quatro cartoes brancos numa grade
   2x2: dois de links por area, um cartao-destaque com arte e um
   de plataforma. Vive dentro do <header>, entao acompanha a
   barra fixa; fica fora dos .nav-pod porque eles usam mask e
   recortariam o painel.
   ============================================================ */

.megamenu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 97;
    padding: 14px 0 34px;
    /* fechado ele nao existe para o navegador: o atributo hidden do
       HTML cuida disso, e a transicao roda na classe .open */
    opacity: 0;
    transform: translateY(-10px);
    /* fechado ele sai do alcance do navegador por visibility, e nao por
       display/hidden: assim a transicao roda sem depender de um frame
       extra para o elemento entrar no layout */
    visibility: hidden;
    transition: opacity .22s ease, transform .26s cubic-bezier(.4, 0, .2, 1), visibility .26s;
    pointer-events: none
}

.megamenu.open {
    opacity: 1;
    transform: none;
    visibility: visible;
    /* o contêiner do painel ocupa a largura toda da tela e e
       transparente: se ele capturasse o clique, tocar no vao entre os
       cartoes ou nas laterais nao fecharia o menu. So os cartoes
       recebem clique; o resto atravessa e chega no veu. */
    pointer-events: none
}

.megamenu.open .megamenu__card {
    pointer-events: auto
}

.megamenu__inner {
    width: min(1320px, calc(100% - 42px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start
}

/* ---- cartoes ---- */

.megamenu__card {
    padding: 26px 28px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(9, 3, 23, .18)
}

.megamenu__title {
    margin: 0 0 2px;
    color: var(--purple-dark);
    font-family: "Plus Jakarta Sans", "Space Grotesk", Nunito, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em
}

.megamenu__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 26px
}

.megamenu__sub {
    margin: 0 0 14px;
    color: #6f6a7c;
    font-size: 14px;
    font-weight: 600
}

/* o subtitulo da primeira coluna sobe para a linha do titulo do
   cartao, como na referencia: titulo e subtitulos ficam alinhados */
.megamenu__card>.megamenu__title+.megamenu__cols {
    margin-top: 0
}

/* ---- item ---- */

.megamenu__item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: 0 -10px;
    padding: 10px;
    border-radius: 14px;
    transition: background .18s ease
}

.megamenu__item+.megamenu__item {
    margin-top: 2px
}

.megamenu__item:hover {
    background: #f6f2fe
}

.megamenu__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    /* circulo de cor chapada, com o icone em branco */
    border-radius: 50%;
    color: #fff;
    background: var(--purple)
}

.megamenu__icon i {
    font-size: 21px
}

.megamenu__item:hover .megamenu__icon {
    /* no hover a cor continua chapada: so escurece */
    background: var(--purple-dark)
}

.megamenu__text {
    display: grid;
    gap: 3px
}

.megamenu__text strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 800
}

.megamenu__text small {
    color: #6f6a7c;
    font-size: 12.5px;
    line-height: 1.45
}

/* ---- cartao-destaque ---- */

.megamenu__promo {
    display: grid;
    /* a arte pede mais largura que o texto: ela carrega detalhe fino
       (o contrato, as pilulas) que some se ficar pequena demais */
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #efeafb, #f7f4fe 55%, #fdf6ff)
}

.megamenu__promo-art {
    display: block;
    /* a arte tem fundo transparente e ja traz cartoes com sombra
       propria: sem moldura branca nem sombra, ela flutua sobre o
       degrade do cartao */
    border-radius: 0;
    overflow: visible;
    background: none;
    box-shadow: none
}

.megamenu__promo-art img {
    width: 100%;
    height: auto;
    display: block
}

.megamenu__promo-copy {
    display: grid;
    gap: 9px
}

.megamenu__promo-copy strong {
    color: var(--purple-dark);
    font-family: "Plus Jakarta Sans", "Space Grotesk", Nunito, sans-serif;
    font-size: 20px;
    font-weight: 700
}

.megamenu__promo-copy>span {
    color: #5f5872;
    font-size: 13.5px;
    line-height: 1.55
}

.megamenu__promo-copy em {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--purple);
    font-size: 13.5px;
    font-style: normal;
    font-weight: 900
}

.megamenu__promo:hover em i {
    transform: translateX(4px)
}

.megamenu__promo-copy em i {
    transition: transform .2s ease
}

/* ---- gatilho no cabecalho ---- */

.nav-trigger[aria-expanded="true"] {
    color: var(--purple)
}

.nav-trigger i {
    transition: transform .25s cubic-bezier(.4, 0, .2, 1)
}

.nav-trigger[aria-expanded="true"] i {
    transform: rotate(180deg)
}

/* veu atras do painel: vidro fosco. A pagina continua legivel por tras,
   mas desfocada e rebaixada, o que joga os cartoes para a frente. O
   cabecalho fica fora (z-index 100) e segue nitido. */
.mega-scrim {
    position: fixed;
    inset: 0;
    z-index: 96;
    background: rgba(23, 10, 58, .34);
    -webkit-backdrop-filter: blur(14px) saturate(120%) brightness(.82);
    backdrop-filter: blur(14px) saturate(120%) brightness(.82);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease
}

/* navegador sem backdrop-filter: cai num veu escuro chapado, para o
   contraste com os cartoes nao se perder */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .mega-scrim {
        background: rgba(9, 3, 23, .62)
    }
}

.mega-scrim.open {
    opacity: 1;
    pointer-events: auto
}

/* telas menores: o painel encolhe para uma coluna e ganha rolagem */
@media(max-width:1400px) {
    .megamenu__card {
        padding: 22px
    }

    .megamenu__text small {
        font-size: 12px
    }
}

/* abaixo de 1210px o cabecalho vira a barra compacta e a navegacao
   passa a ser o painel mobile: o mega-menu nao existe */
@media(max-width:1210px) {

    .megamenu,
    .mega-scrim {
        display: none !important
    }
}


/* o cartao "POR OPERACAO" tem so um item por coluna e fechava bem mais
   raso que o "POR AREA" ao lado (214px contra 280px). O rodape dele
   ganha folga para o par de cima nao ficar tao desigual.
   Fica depois das media queries do bloco acima, senao o padding
   compacto de <=1400px sobrescreveria este ajuste. */
.megamenu__card--setores {
    padding-bottom: 66px
}


/* ============================================================
   MEGA-MENU DE PLATAFORMA - layout diferente do de Solucoes:
   cartao estreito a esquerda com a lista do que a plataforma faz,
   e cartao largo a direita com a jornada do documento em cartoes
   de imagem (quatro numa grade 2x2 e o quinto alto na coluna da
   direita).
   ============================================================ */

.megamenu--plataforma .megamenu__inner {
    grid-template-columns: .46fr 1fr;
    /* os dois cartoes fecham na mesma altura: o da esquerda tem menos
       conteudo e parava 122px acima do da jornada. O .megamenu__inner
       usa align-items:start por padrao, que faz cada cartao encolher
       ate o proprio conteudo. */
    align-items: stretch
}

/* com a altura esticada, os itens se distribuem no espaco em vez de
   ficarem amontoados no topo */
.megamenu__card--oque {
    display: flex;
    flex-direction: column
}

.megamenu__card--oque .megamenu__item {
    flex: 1 1 auto;
    align-items: center
}

.megamenu__card--oque .megamenu__item {
    margin-top: 4px
}

/* ---- jornada em cartoes de imagem ---- */

.mm-journey {
    display: grid;
    grid-template-columns: 1fr 1fr .84fr;
    gap: 20px 18px;
    margin-top: 16px
}

.mm-journey__item {
    display: grid;
    align-content: start;
    gap: 6px
}

/* o quinto passo ocupa a coluna da direita inteira, nas duas linhas */
.mm-journey__item--tall {
    grid-column: 3;
    grid-row: 1 / span 2
}

.mm-journey__art {
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: #f2ecfd
}

.mm-journey__art img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    /* as artes da jornada trazem o titulo do passo desenhado na parte
       esquerda; o recorte parte da direita, onde estao os dispositivos,
       para nao cortar palavras pela metade */
    object-position: right center;
    display: block;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1)
}

/* na coluna alta a arte e retrato e preenche a altura das duas linhas */
.mm-journey__item--tall .mm-journey__art {
    height: 100%
}

.mm-journey__item--tall .mm-journey__art img {
    aspect-ratio: auto;
    min-height: 214px
}

.mm-journey__item:hover .mm-journey__art img {
    transform: scale(1.04)
}

.mm-journey__item strong {
    margin-top: 4px;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 800
}

.mm-journey__item:hover strong {
    color: var(--purple)
}

.mm-journey__item small {
    color: #6f6a7c;
    font-size: 12.5px;
    line-height: 1.45
}

/* o cartao alto tem a legenda embaixo da arte, que cresce ate sobrar
   so o espaco do texto */
.mm-journey__item--tall {
    grid-template-rows: 1fr auto auto
}

@media(max-width:1400px) {
    .mm-journey {
        gap: 16px 14px
    }

    .mm-journey__item small {
        font-size: 12px
    }
}


/* ============================================================
   MEGA-MENU DE RECURSOS - grade 2x2: integracoes a esquerda,
   autenticacao e governanca a direita, e embaixo um cartao de
   destaque colorido mais um cartao escuro com os cases.
   ============================================================ */

.megamenu--recursos .megamenu__inner {
    grid-template-columns: 1.08fr 1fr
}

/* neste painel os titulos vivem dentro de cada coluna, entao o
   espacamento do subtitulo encosta neles */
.megamenu__card--auth .megamenu__title {
    margin-bottom: 2px
}

/* ---- cartao de destaque colorido ---- */

.mm-destaque {
    display: grid;
    grid-template-columns: 1fr .92fr;
    align-items: center;
    gap: 20px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple) 62%, var(--lilac))
}

.mm-destaque__art {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(9, 3, 23, .32)
}

.mm-destaque__art img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    object-position: left center;
    display: block;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1)
}

.mm-destaque:hover .mm-destaque__art img {
    transform: scale(1.05)
}

.mm-destaque__copy {
    display: grid;
    gap: 9px
}

.mm-destaque__copy strong {
    font-family: "Plus Jakarta Sans", "Space Grotesk", Nunito, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2
}

.mm-destaque__copy>span {
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    line-height: 1.55
}

.mm-destaque__cta {
    justify-self: start;
    margin-top: 2px;
    padding: 10px 20px;
    border-radius: 999px;
    color: var(--purple-dark);
    background: #fff;
    font-size: 13.5px;
    font-style: normal;
    font-weight: 900
}



@media(max-width:1400px) {
    .mm-destaque__copy strong {
        font-size: 17px
    }
}


/* o painel de Integracoes usa a mesma grade 2x2 do de Solucoes; o
   destaque colorido dele tem titulo mais longo, entao a arte cede
   um pouco de largura */
.megamenu--integracoes .mm-destaque {
    grid-template-columns: .86fr 1fr
}

.megamenu--integracoes .mm-destaque__copy strong {
    font-size: 17px
}


/* o cartao "05 Acompanhar" do painel de Plataforma usa uma arte
   recortada (fundo transparente) em vez das artes retangulares dos
   outros passos: ela aparece inteira, apoiada no rodape do cartao,
   em vez de ser cortada por object-fit:cover */
.mm-journey__art--recorte {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 14px 10px 0;
    background: linear-gradient(180deg, #f6f1fe, #ece3fc)
}

.mm-journey__art--recorte img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    aspect-ratio: auto;
    min-height: 0;
    object-fit: contain;
    object-position: bottom center
}


/* o cartao de destaque de Recursos virou um banner unico: o texto e o
   botao ja vem desenhados na arte, entao o cartao nao tem padding nem
   grade - a imagem ocupa a peca inteira e define a altura (2:1) */
.mm-destaque--banner {
    display: block;
    padding: 0;
    overflow: hidden;
    background: none
}

.mm-destaque--banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1)
}

.mm-destaque--banner:hover img {
    transform: scale(1.02)
}

/* a linha de baixo passa a esticar: o cartao dos cases acompanha a
   altura do banner em vez de deixar um vao */
.megamenu--integracoes .megamenu__inner,
.megamenu--recursos .megamenu__inner {
    align-items: stretch
}


/* as legendas dos quatro passos da jornada reservam sempre 3 linhas:
   sem isso os cartoes da grade fechavam em alturas diferentes conforme
   o texto quebrava em 1, 2 ou 3 linhas. O quinto cartao fica de fora,
   porque ocupa a coluna alta e tem espaco proprio. */
.mm-journey__item:not(.mm-journey__item--tall) small {
    min-height: calc(3 * 1.45em)
}


/* as legendas do cartao "O que a plataforma faz" reservam 3 linhas,
   como as da jornada ao lado: em telas mais estreitas o texto pode
   quebrar em 4, entao e minimo e nao altura fixa */
.megamenu__card--oque .megamenu__item small {
    min-height: calc(3 * 1.45em)
}