:root {
    --mx-blue: #075fc8;
    --mx-blue-dark: #073b82;
    --mx-blue-deep: #062b5c;
    --mx-yellow: #ffd21c;
    --mx-bg: #f5f6f8;
    --mx-line: #e5e8ed;
    --mx-text: #171a21;
    --mx-muted: #667085;
}

.makerx-connect {
    background: var(--mx-bg);
    color: var(--mx-text);
    font-family: Poppins, Arial, sans-serif;
}

.makerx-connect main {
    background: var(--mx-bg) !important;
    min-height: 60vh;
}

.makerx-connect .mx-topbar {
    background: var(--mx-blue-dark);
    color: #fff;
    font-size: 12px;
}

.makerx-connect .mx-topbar-inner {
    width: min(1440px, calc(100% - 48px));
    margin: 0 auto;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.makerx-connect .mx-main-header {
    background: #fff;
    border-bottom: 1px solid var(--mx-line);
    box-shadow: 0 3px 12px rgba(20, 30, 50, .06) !important;
}

.makerx-connect .mx-header-shell {
    min-height: 112px !important;
    display: grid !important;
    grid-template-columns: 190px minmax(320px, 1fr) auto;
    grid-template-areas:
        "logo search actions"
        "categories categories categories";
    gap: 0 28px;
    align-items: center;
    padding: 0 48px !important;
    border: 0 !important;
}

.makerx-connect .mx-header-left,
.makerx-connect .mx-header-right {
    display: contents !important;
}

.makerx-connect .mx-logo-link {
    grid-area: logo;
    display: flex;
    align-items: center;
}

.makerx-connect .mx-logo {
    width: auto !important;
    max-width: 168px;
    height: 48px !important;
    object-fit: contain;
}

.makerx-connect .mx-search-wrap {
    grid-area: search;
}

.makerx-connect .mx-search-wrap form {
    max-width: none !important;
    width: 100%;
}

.makerx-connect .mx-search-wrap input {
    min-height: 46px;
    border: 1px solid #d7dce3 !important;
    border-radius: 9px !important;
    background: #f7f8fa !important;
    font-size: 14px !important;
}

.makerx-connect .mx-search-wrap input:focus {
    border-color: var(--mx-blue) !important;
    box-shadow: 0 0 0 3px rgba(7, 95, 200, .10);
}

.makerx-connect .mx-actions {
    grid-area: actions;
    color: var(--mx-blue-dark);
    align-items: center;
}

.makerx-connect .mx-category-nav {
    grid-area: categories;
    width: 100%;
    border-top: 1px solid var(--mx-line);
    align-self: end;
}

.makerx-connect .mx-category-nav > div {
    min-height: 49px;
    justify-content: flex-start;
}

.makerx-connect .mx-category-nav a {
    font-size: 13px !important;
    font-weight: 600;
    color: #263244;
}

.makerx-connect .mx-category-nav a:hover {
    color: var(--mx-blue);
}

.makerx-connect .mx-quick-shell {
    width: min(1440px, calc(100% - 48px));
    margin: 28px auto 0;
}

.makerx-connect .mx-quick-title-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.makerx-connect .mx-eyebrow {
    color: var(--mx-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
}

.makerx-connect .mx-quick-title-row h1 {
    margin: 6px 0 0;
    max-width: 760px;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.035em;
}

.makerx-connect .mx-see-all {
    color: var(--mx-blue);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.makerx-connect .mx-quick-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.makerx-connect .mx-quick-card {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--mx-line);
    border-radius: 10px;
    padding: 16px;
    color: #263244;
    font-size: 13px;
    font-weight: 700;
    transition: .18s ease;
}

.makerx-connect .mx-quick-card:hover {
    border-color: var(--mx-blue);
    color: var(--mx-blue);
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(24, 45, 78, .08);
}

.makerx-connect .mx-home-banner {
    width: min(1440px, calc(100% - 48px));
    margin: 24px auto 0;
    overflow: hidden;
    border-radius: 12px;
}

.makerx-connect .mx-product-section,
.makerx-connect .mx-category-carousel {
    width: min(1440px, calc(100% - 48px)) !important;
    max-width: none !important;
    margin-top: 34px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.makerx-connect .mx-section-title {
    font-family: Poppins, Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -.025em;
    color: #172033;
}

.makerx-connect .mx-product-section > div:nth-child(2) {
    gap: 14px !important;
    margin-top: 18px !important;
}

.makerx-connect .mx-product-card {
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--mx-line);
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.makerx-connect .mx-product-card:hover {
    border-color: #cad3df;
    box-shadow: 0 10px 28px rgba(24, 45, 78, .10) !important;
    transform: translateY(-2px);
}

.makerx-connect .mx-product-card img {
    object-fit: contain !important;
    background: #fff !important;
}

.makerx-connect .mx-product-info {
    margin-top: 0 !important;
    transform: none !important;
    padding: 13px 14px 15px !important;
    gap: 7px !important;
    max-width: none !important;
}

.makerx-connect .mx-product-name {
    min-height: 42px;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    color: #202938;
}

.makerx-connect .mx-product-price {
    color: var(--mx-blue-dark);
    font-size: 18px !important;
    font-weight: 800 !important;
}

.makerx-connect .mx-buy-button,
.makerx-connect .primary-button {
    background: var(--mx-blue) !important;
    border-color: var(--mx-blue) !important;
    color: #fff !important;
}

.makerx-connect .mx-buy-button:hover,
.makerx-connect .primary-button:hover {
    background: var(--mx-blue-dark) !important;
}

.makerx-connect .mx-category-carousel a[class*="rounded-full"] {
    border-radius: 10px !important;
    border: 1px solid var(--mx-line);
    background: #fff !important;
    overflow: hidden;
}

.makerx-connect .mx-static-content {
    width: min(1440px, calc(100% - 48px));
    margin: 28px auto;
}

.makerx-connect .mx-footer {
    margin-top: 54px !important;
    background: var(--mx-blue-deep) !important;
    color: #fff;
}

.makerx-connect .mx-footer > div:first-child {
    background: var(--mx-blue-deep) !important;
}

.makerx-connect .mx-footer > div:last-child {
    background: #04234b !important;
}

.makerx-connect .mx-footer a,
.makerx-connect .mx-footer p {
    color: rgba(255,255,255,.86) !important;
}

.makerx-connect .mx-footer input {
    background: #fff !important;
    color: #111827 !important;
}

.makerx-connect .mx-footer button {
    background: var(--mx-yellow) !important;
    color: #111827 !important;
}

@media (max-width: 1180px) {
    .makerx-connect .mx-header-shell {
        padding-left: 28px !important;
        padding-right: 28px !important;
        grid-template-columns: 160px minmax(250px, 1fr) auto;
        gap: 0 18px;
    }

    .makerx-connect .mx-quick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .makerx-connect .mx-topbar-right {
        display: none;
    }

    .makerx-connect .mx-topbar-inner {
        justify-content: center;
        width: calc(100% - 32px);
    }

    .makerx-connect .mx-quick-shell,
    .makerx-connect .mx-home-banner,
    .makerx-connect .mx-product-section,
    .makerx-connect .mx-category-carousel,
    .makerx-connect .mx-static-content {
        width: calc(100% - 32px) !important;
    }
}

@media (max-width: 680px) {
    .makerx-connect .mx-quick-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .makerx-connect .mx-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .makerx-connect .mx-product-card {
        min-width: 175px;
    }
}

/* =========================================================
   MAKER X CONNECT V2 FIX
   ========================================================= */

.makerx-connect {
    --mx-blue: #4774f3;
    --mx-blue-dark: #15499a;
    --mx-blue-deep: #08275d;
    --mx-yellow: #ffc928;
    --mx-bg: #f5f6f8;
    --mx-line: #e2e6ec;
}

.makerx-connect main {
    background: #fff !important;
}

.makerx-connect .mx-category-nav {
    display: none !important;
}

.makerx-connect .mx-header-shell {
    min-height: 86px !important;
    height: 86px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 26px !important;
    padding: 0 44px !important;
    border: 0 !important;
}

.makerx-connect .mx-header-left {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 0 !important;
}

.makerx-connect .mx-header-right {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 24px !important;
}

.makerx-connect .mx-logo-link {
    width: 210px !important;
    height: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: var(--mx-blue-deep) !important;
}

.makerx-connect .mx-logo,
.makerx-connect header img[src*="logo-maker-x-oficial.png"] {
    width: 188px !important;
    max-width: 188px !important;
    height: auto !important;
    max-height: 50px !important;
    object-fit: contain !important;
}

.makerx-connect .mx-search-wrap {
    flex: 1 1 760px !important;
    width: auto !important;
    max-width: 940px !important;
}

.makerx-connect .mx-search-wrap form {
    width: 100% !important;
    max-width: none !important;
}

.makerx-connect .mx-search-wrap input {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    border: 1px solid #d6dce5 !important;
    border-radius: 8px !important;
    background: #f7f8fa !important;
    font-size: 14px !important;
}

.makerx-connect .mx-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 23px !important;
    margin-top: 0 !important;
}

.makerx-connect .mx-static-nav {
    display: block !important;
    background: #fff !important;
    border-top: 1px solid var(--mx-line) !important;
    border-bottom: 1px solid var(--mx-line) !important;
}

.makerx-connect .mx-static-nav-inner {
    width: min(1440px, calc(100% - 88px)) !important;
    height: 48px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.makerx-connect .mx-static-nav-inner::-webkit-scrollbar {
    display: none !important;
}

.makerx-connect .mx-static-nav a {
    height: 48px !important;
    padding: 0 19px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    color: #202b3c !important;
    border-bottom: 3px solid transparent !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
}

.makerx-connect .mx-static-nav a:hover {
    color: var(--mx-blue-dark) !important;
    border-bottom-color: var(--mx-yellow) !important;
}

.makerx-connect .mx-static-nav .mx-nav-all {
    padding-left: 0 !important;
    color: var(--mx-blue-dark) !important;
    font-weight: 800 !important;
}

.makerx-connect .mx-catalog-home {
    padding-top: 18px !important;
}

.makerx-connect .mx-home-banner {
    width: min(1440px, calc(100% - 88px)) !important;
    margin: 0 auto 24px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.makerx-connect .mx-product-section,
.makerx-connect .mx-category-carousel {
    width: min(1440px, calc(100% - 88px)) !important;
    max-width: none !important;
    margin-top: 30px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.makerx-connect .mx-product-card {
    background: #fff !important;
    border: 1px solid #e2e6ec !important;
    border-radius: 9px !important;
}

.makerx-connect .mx-product-card:hover {
    border-color: #c8d0dc !important;
    box-shadow: 0 9px 24px rgba(16, 35, 65, .10) !important;
}

.makerx-connect .mx-product-price {
    color: var(--mx-blue-dark) !important;
}

.makerx-connect .mx-buy-button,
.makerx-connect .primary-button {
    background: var(--mx-blue) !important;
    border-color: var(--mx-blue) !important;
    color: #fff !important;
}

@media (max-width: 1023px) {
    .makerx-connect .mx-static-nav {
        display: none !important;
    }

    .makerx-connect header img[src*="logo-maker-x-oficial.png"] {
        width: 130px !important;
        height: auto !important;
        max-height: 42px !important;
        padding: 4px 6px !important;
        border-radius: 6px !important;
        background: var(--mx-blue-deep) !important;
    }

    .makerx-connect .mx-home-banner,
    .makerx-connect .mx-product-section,
    .makerx-connect .mx-category-carousel {
        width: calc(100% - 32px) !important;
    }
}

@media (max-width: 1180px) and (min-width: 1024px) {
    .makerx-connect .mx-header-shell {
        padding-left: 28px !important;
        padding-right: 28px !important;
        gap: 18px !important;
    }

    .makerx-connect .mx-logo-link {
        width: 178px !important;
    }

    .makerx-connect .mx-logo {
        width: 160px !important;
    }

    .makerx-connect .mx-static-nav-inner {
        width: calc(100% - 56px) !important;
    }
}

/* =========================================================
   MAKER X CONNECT V3 - CACHE/HEADER GUARANTEE
   ========================================================= */

/*
 * O componente original do Bagisto pode manter um wrapper
 * renderizado pelo Vue mesmo quando o custom element recebe
 * display:none. Esta regra elimina a area antiga no desktop.
 */
@media (min-width: 1024px) {
    .makerx-connect .mx-header-left .mx-category-nav,
    .makerx-connect .mx-header-left v-desktop-category,
    .makerx-connect .mx-header-left [class*="category"] {
        display: none !important;
    }

    .makerx-connect .mx-header-shell {
        height: 84px !important;
        min-height: 84px !important;
        max-height: 84px !important;
        overflow: visible !important;
    }

    .makerx-connect .mx-header-left {
        min-height: 84px !important;
        height: 84px !important;
    }

    .makerx-connect .mx-header-right {
        min-height: 84px !important;
        height: 84px !important;
    }
}

/* Barra de categorias nova */
.makerx-connect .mx-static-nav {
    position: relative !important;
    z-index: 20 !important;
    width: 100% !important;
    min-height: 48px !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e6ec !important;
    border-bottom: 1px solid #e2e6ec !important;
}

.makerx-connect .mx-static-nav-inner {
    width: min(1440px, calc(100% - 88px)) !important;
    max-width: 1440px !important;
    height: 48px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
}

.makerx-connect .mx-static-nav-inner > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    line-height: 1 !important;
    text-decoration: none !important;
    color: #202b3c !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-bottom: 3px solid transparent !important;
}

.makerx-connect .mx-static-nav-inner > a:first-child {
    padding-left: 0 !important;
    padding-right: 22px !important;
    color: #15499a !important;
    font-weight: 800 !important;
}

.makerx-connect .mx-static-nav-inner > a:hover {
    color: #15499a !important;
    border-bottom-color: #ffc928 !important;
}

/* Home começa imediatamente após a navegação */
.makerx-connect .mx-catalog-home {
    margin-top: 0 !important;
    padding-top: 24px !important;
}

/* Corrige o fundo cinza excessivo */
.makerx-connect .mx-catalog-home,
.makerx-connect .mx-product-section {
    background: #ffffff !important;
}

/* Produto de teste: card mais compacto */
.makerx-connect .mx-product-card {
    max-width: 260px !important;
}


/* =========================================================
   MAKER X CONNECT V4 - CATALOGO
   ========================================================= */

/* Logo sem placa azul */
.makerx-connect .mx-logo-link {
    width: 205px !important;
    height: 66px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.makerx-connect .mx-logo,
.makerx-connect header img[src*="logo-maker-x-oficial.png"] {
    width: 190px !important;
    max-width: 190px !important;
    max-height: 62px !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Topo ligeiramente mais enxuto */
@media (min-width: 1024px) {
    .makerx-connect .mx-header-shell,
    .makerx-connect .mx-header-left,
    .makerx-connect .mx-header-right {
        height: 78px !important;
        min-height: 78px !important;
        max-height: 78px !important;
    }
}

/* Retira o compare do cabecalho para ficar mais limpo */
@media (min-width: 1024px) {
    .makerx-connect .mx-header-right > a:has(.icon-compare),
    .makerx-connect .mx-header-right > span.icon-compare {
        display: none !important;
    }
}

/* Titulo + Ver todos na mesma linha */
.makerx-connect .mx-section-head {
    align-items: center !important;
    min-height: 36px !important;
    border-bottom: 1px solid #e8ebef !important;
    padding-bottom: 10px !important;
}

.makerx-connect .mx-section-actions {
    gap: 18px !important;
}

.makerx-connect .mx-view-all {
    display: flex !important;
    align-items: center !important;
    color: #15499a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.makerx-connect .mx-view-all p {
    font-size: 13px !important;
    font-weight: 700 !important;
}

.makerx-connect .mx-view-all-bottom {
    display: none !important;
}

/* Vitrine mais densa */
.makerx-connect .mx-product-section {
    margin-top: 34px !important;
}

.makerx-connect .mx-products-row {
    gap: 14px !important;
    margin-top: 16px !important;
    padding-bottom: 10px !important;
}

/* Cards semelhantes a uma loja de catalogo */
.makerx-connect .mx-product-card {
    min-width: 218px !important;
    width: 218px !important;
    max-width: 218px !important;
    border: 1px solid #e3e6ea !important;
    border-radius: 8px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-shadow: none !important;
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease !important;
}

.makerx-connect .mx-product-card:hover {
    border-color: #c8cfd8 !important;
    box-shadow: 0 7px 20px rgba(20, 35, 60, .08) !important;
    transform: translateY(-2px) !important;
}

.makerx-connect .mx-product-media {
    width: 216px !important;
    height: 205px !important;
    max-width: 216px !important;
    max-height: 205px !important;
    background: #f7f7f8 !important;
}

.makerx-connect .mx-product-media > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.makerx-connect .mx-product-image {
    width: 100% !important;
    height: 100% !important;
    background: #f7f7f8 !important;
}

.makerx-connect .mx-product-image::after {
    padding-bottom: 205px !important;
}

.makerx-connect .mx-product-info {
    width: 100% !important;
    max-width: none !important;
    min-height: 134px !important;
    margin-top: 0 !important;
    padding: 12px 12px 11px !important;
    gap: 7px !important;
    transform: none !important;
    background: #fff !important;
}

.makerx-connect .mx-product-name {
    min-height: 38px !important;
    margin: 0 !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    color: #1d2633 !important;
    font-size: 13px !important;
    line-height: 19px !important;
    font-weight: 550 !important;
}

.makerx-connect .mx-product-price {
    min-height: 25px !important;
    color: #15499a !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 800 !important;
}

/* Em desktop a acao passa a fazer parte do card, sem salto no hover */
@media (min-width: 1024px) {
    .makerx-connect .mx-card-actions {
        display: flex !important;
        opacity: 1 !important;
        margin-top: 2px !important;
    }

    .makerx-connect .mx-buy-button {
        min-height: 34px !important;
        padding: 7px 10px !important;
        border-radius: 6px !important;
        background: #15499a !important;
        border-color: #15499a !important;
        color: #fff !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    .makerx-connect .mx-buy-button:hover {
        background: #0e377d !important;
    }

    .makerx-connect .mx-card-actions .icon-heart,
    .makerx-connect .mx-card-actions .icon-heart-fill,
    .makerx-connect .mx-card-actions .icon-compare {
        display: none !important;
    }
}

/* Secao ocupa uma largura semelhante ao header */
.makerx-connect .mx-product-section,
.makerx-connect .mx-category-carousel {
    width: min(1440px, calc(100% - 88px)) !important;
}

/* Mobile */
@media (max-width: 1023px) {
    .makerx-connect .mx-logo-link {
        width: auto !important;
        height: auto !important;
    }

    .makerx-connect header img[src*="logo-maker-x-oficial.png"] {
        width: 128px !important;
        max-width: 128px !important;
        max-height: 44px !important;
        background: transparent !important;
    }

    .makerx-connect .mx-product-card {
        min-width: 178px !important;
        width: 178px !important;
        max-width: 178px !important;
    }

    .makerx-connect .mx-product-media {
        width: 176px !important;
        height: 170px !important;
        max-width: 176px !important;
        max-height: 170px !important;
    }

    .makerx-connect .mx-product-image::after {
        padding-bottom: 170px !important;
    }
}

/* =========================================================
   MAKER X CONNECT V5B - IDENTIDADE
   ========================================================= */

.makerx-connect .mx-actions {
    gap: 28px !important;
}

.makerx-connect .mx-header-right {
    gap: 28px !important;
}

.makerx-connect .mx-logo {
    width: 196px !important;
    max-width: 196px !important;
}

.makerx-connect .mx-catalog-home {
    padding-top: 20px !important;
}


/* =========================================================
   MAKER X CONNECT V6
   PORTAL HOME - composição solicitada
   ========================================================= */

.makerx-connect {
    --mx-v6-blue: #4774f3;
    --mx-v6-blue-2: #2157d8;
    --mx-v6-blue-dark: #092d70;
    --mx-v6-yellow: #ffc92b;
    --mx-v6-black: #050505;
}

/* ---------- menu horizontal com icones ---------- */

.makerx-connect .mx-static-nav-inner {
    height: 52px !important;
    gap: 0 !important;
}

.makerx-connect .mx-static-nav-inner > a {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 15px !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-bottom: 0 !important;
}

.makerx-connect .mx-static-nav-inner > a svg {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px;
    fill: none;
    stroke: var(--mx-v6-blue-2);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.makerx-connect .mx-static-nav-inner > a:hover {
    color: var(--mx-v6-blue-2) !important;
}

.makerx-connect .mx-static-nav .mx-nav-all {
    width: 48px !important;
    padding: 0 !important;
    justify-content: flex-start !important;
}

.makerx-connect .mx-static-nav .mx-nav-all svg {
    width: 21px !important;
    height: 21px !important;
    stroke: #111 !important;
}

.makerx-connect .mx-static-nav .mx-nav-offers {
    margin-left: auto !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    background: var(--mx-v6-yellow) !important;
    color: #111 !important;
    font-weight: 800 !important;
}

.makerx-connect .mx-static-nav .mx-nav-offers svg {
    stroke: #111 !important;
}

/* ---------- portal ---------- */

.makerx-connect .mx-catalog-home {
    padding-top: 20px !important;
}

.makerx-connect .mx-portal {
    width: min(1500px, calc(100% - 80px));
    margin: 0 auto 36px;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(260px, 1fr);
    gap: 28px;
    align-items: stretch;
}

.makerx-connect .mx-portal-main {
    min-width: 0;
    display: grid;
    grid-template-rows: 395px 58px 105px;
    gap: 0;
}

/* ---------- banner principal ---------- */

.makerx-connect .mx-hero-slider {
    position: relative;
    overflow: hidden;
    border-radius: 29px;
    background:
        radial-gradient(circle at 76% 22%, rgba(71, 116, 243, .18), transparent 29%),
        radial-gradient(circle at 62% 105%, rgba(255, 201, 43, .25), transparent 31%),
        linear-gradient(105deg, #f8f9fb 0%, #edf1f7 63%, #e4e9f4 100%);
    box-shadow: inset 0 0 0 1px rgba(30, 45, 70, .04);
}

.makerx-connect .mx-hero-copy {
    position: relative;
    z-index: 4;
    width: 52%;
    height: 100%;
    padding: 48px 0 35px 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.makerx-connect .mx-hero-kicker {
    margin-bottom: 6px;
    color: var(--mx-v6-blue);
    font-size: 29px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.035em;
}

.makerx-connect .mx-hero-copy h1 {
    margin: 0;
    color: #030303;
    font-size: clamp(38px, 4.1vw, 66px);
    line-height: .98;
    font-weight: 800;
    letter-spacing: -.055em;
}

.makerx-connect .mx-hero-copy h1 strong {
    display: block;
    font-weight: 800;
}

.makerx-connect .mx-hero-copy p {
    max-width: 560px;
    margin: 18px 0 21px;
    color: #303845;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 500;
}

.makerx-connect .mx-hero-button {
    min-width: 240px;
    height: 56px;
    padding: 0 26px 0 35px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border-radius: 29px;
    background: #9ba0aa;
    color: #fff !important;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .12em;
    text-decoration: none !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

.makerx-connect .mx-hero-button span {
    font-size: 38px;
    line-height: 1;
    font-weight: 300;
}

.makerx-connect .mx-hero-button:hover {
    background: var(--mx-v6-blue-2);
}

/* arte criada apenas com CSS */

.makerx-connect .mx-hero-art {
    position: absolute;
    inset: 0 0 0 48%;
    overflow: hidden;
}

.makerx-connect .mx-orbit {
    position: absolute;
    border: 2px solid rgba(71, 116, 243, .19);
    border-radius: 999px;
    transform: rotate(-16deg);
}

.makerx-connect .mx-orbit-one {
    width: 460px;
    height: 230px;
    right: 22px;
    top: 55px;
}

.makerx-connect .mx-orbit-two {
    width: 365px;
    height: 182px;
    right: 86px;
    top: 108px;
}

.makerx-connect .mx-board-card {
    position: absolute;
    width: 112px;
    height: 178px;
    border-radius: 16px;
    background:
        linear-gradient(90deg, transparent 8px, rgba(255,255,255,.25) 9px, transparent 10px),
        linear-gradient(180deg, #173d91, #0b2763);
    border: 5px solid #d6d8db;
    box-shadow:
        0 18px 35px rgba(19, 35, 67, .22),
        inset 0 0 0 2px rgba(255,255,255,.12);
}

.makerx-connect .mx-board-card::before,
.makerx-connect .mx-board-card::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    height: 28px;
    border: 2px solid rgba(255,255,255,.45);
    border-radius: 5px;
}

.makerx-connect .mx-board-card::before {
    top: 34px;
}

.makerx-connect .mx-board-card::after {
    top: 78px;
}

.makerx-connect .mx-board-card span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    color: #fff;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
}

.makerx-connect .mx-board-one {
    right: 212px;
    top: 96px;
    transform: rotate(-5deg);
}

.makerx-connect .mx-board-two {
    right: 62px;
    top: 128px;
    transform: rotate(5deg);
    background:
        linear-gradient(90deg, transparent 8px, rgba(255,255,255,.22) 9px, transparent 10px),
        linear-gradient(180deg, #1e6c4e, #0a3d2d);
}

.makerx-connect .mx-robot-card {
    position: absolute;
    right: 330px;
    top: 144px;
    width: 130px;
    height: 160px;
    filter: drop-shadow(0 18px 24px rgba(24, 40, 70, .18));
}

.makerx-connect .mx-robot-head {
    width: 96px;
    height: 58px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border: 6px solid #e8ebef;
    border-radius: 25px 25px 18px 18px;
    background: #13213a;
}

.makerx-connect .mx-robot-head i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #5fd7ff;
    box-shadow: 0 0 11px #5fd7ff;
}

.makerx-connect .mx-robot-body {
    width: 118px;
    height: 90px;
    margin: -2px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 6px solid #e8ebef;
    border-radius: 28px 28px 22px 22px;
    background: linear-gradient(145deg, var(--mx-v6-blue), #173f9b);
    color: var(--mx-v6-yellow);
    font-size: 25px;
    font-weight: 900;
}

.makerx-connect .mx-x-mark {
    position: absolute;
    right: -13px;
    top: 6px;
    color: rgba(255, 201, 43, .68);
    font-size: 125px;
    line-height: 1;
    font-weight: 900;
    transform: rotate(6deg);
}

.makerx-connect .mx-hero-dots {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 14px;
    display: flex;
    gap: 10px;
}

.makerx-connect .mx-hero-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #fff;
    opacity: .86;
}

.makerx-connect .mx-hero-dots button.is-active {
    width: 28px;
    background: var(--mx-v6-blue);
}

/* ---------- faixa preta categorias ---------- */

.makerx-connect .mx-category-labels {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.makerx-connect .mx-category-labels a {
    min-width: 0;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 24px 24px;
    background: var(--mx-v6-black);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
}

.makerx-connect .mx-category-labels a:hover {
    background: var(--mx-v6-blue-dark);
}

/* ---------- mini vitrines ---------- */

.makerx-connect .mx-category-visuals {
    padding-top: 18px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.makerx-connect .mx-category-visual {
    position: relative;
    height: 84px;
    overflow: hidden;
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 110%, rgba(255,255,255,.28), transparent 45%),
        linear-gradient(135deg, #4774f3, #224fc4);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    text-decoration: none !important;
}

.makerx-connect .mx-category-visual:nth-child(even) {
    background:
        radial-gradient(circle at 50% 110%, rgba(255,255,255,.30), transparent 45%),
        linear-gradient(135deg, #5b83f4, #2d5bd0);
}

.makerx-connect .mx-category-visual strong {
    position: absolute;
    z-index: 3;
    left: 16px;
    bottom: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.makerx-connect .mx-category-visual i {
    position: absolute;
    z-index: 2;
    right: 16px;
    top: 15px;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background:
        linear-gradient(135deg, var(--mx-v6-yellow), #ffde67);
    transform: rotate(-10deg);
    box-shadow: 0 10px 18px rgba(10, 30, 75, .22);
}

.makerx-connect .mx-cat-sensores i {
    border-radius: 50%;
}

.makerx-connect .mx-cat-robotica i::before,
.makerx-connect .mx-cat-robotica i::after {
    content: "";
    position: absolute;
    top: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0d2c69;
}

.makerx-connect .mx-cat-robotica i::before {
    left: 12px;
}

.makerx-connect .mx-cat-robotica i::after {
    right: 12px;
}

.makerx-connect .mx-cat-3d i {
    clip-path: polygon(50% 0, 95% 24%, 95% 76%, 50% 100%, 5% 76%, 5% 24%);
    border-radius: 0;
}

.makerx-connect .mx-cat-modelismo i {
    border-radius: 50% 12px 50% 12px;
}

.makerx-connect .mx-cat-ia i {
    transform: rotate(45deg);
    border-radius: 14px;
}

.makerx-connect .mx-mini-glow {
    position: absolute;
    inset: auto auto -45px -15px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(255, 201, 43, .22);
}

/* ---------- painel lateral ---------- */

.makerx-connect .mx-portal-side {
    position: relative;
    min-height: 558px;
    overflow: hidden;
    padding: 34px 28px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 29px;
    background:
        radial-gradient(circle at 50% 30%, rgba(71,116,243,.28), transparent 35%),
        linear-gradient(180deg, #0b1220 0%, #101b31 48%, #061022 100%);
    color: #fff;
    box-shadow:
        0 12px 24px rgba(14, 25, 45, .16),
        inset 0 0 0 1px rgba(255,255,255,.07);
}

.makerx-connect .mx-portal-side::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    top: 0;
    height: 5px;
    border-radius: 0 0 12px 12px;
    background: var(--mx-v6-blue);
    box-shadow: 0 0 18px rgba(71,116,243,.75);
}

.makerx-connect .mx-side-brand img {
    width: 185px;
    max-height: 58px;
    object-fit: contain;
}

.makerx-connect .mx-side-kicker {
    margin-top: 18px;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--mx-v6-yellow);
    color: #111;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
}

.makerx-connect .mx-portal-side h2 {
    margin: 16px 0 8px;
    text-align: center;
    font-size: 31px;
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -.035em;
}

.makerx-connect .mx-side-device {
    position: relative;
    width: 170px;
    height: 245px;
    margin-top: 12px;
}

.makerx-connect .mx-side-device-screen {
    position: relative;
    z-index: 3;
    width: 132px;
    height: 86px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    border: 8px solid #e8edf5;
    border-radius: 31px 31px 20px 20px;
    background: #081222;
    box-shadow: 0 16px 28px rgba(0,0,0,.32);
}

.makerx-connect .mx-side-device-eye {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #74dcff;
    box-shadow: 0 0 14px #4fc9ff;
}

.makerx-connect .mx-side-device-body {
    position: relative;
    z-index: 2;
    width: 160px;
    height: 142px;
    margin: -5px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 9px solid #e8edf5;
    border-radius: 45px 45px 34px 34px;
    background:
        linear-gradient(145deg, var(--mx-v6-blue), #163c91);
    color: var(--mx-v6-yellow);
    font-size: 34px;
    font-weight: 900;
    box-shadow: 0 18px 30px rgba(0,0,0,.28);
}

.makerx-connect .mx-side-tag {
    margin-top: 2px;
    padding: 7px 14px;
    background: #fff;
    color: #0d1628;
    font-size: 12px;
    font-weight: 900;
    transform: rotate(-2deg);
}

.makerx-connect .mx-side-button {
    width: 100%;
    height: 44px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--mx-v6-yellow);
    color: #111 !important;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .05em;
    text-decoration: none !important;
}

/* ---------- banners extras administrativos ---------- */

.makerx-connect .mx-admin-banner {
    margin-top: 24px !important;
}

/* ---------- responsivo ---------- */

@media (max-width: 1280px) {
    .makerx-connect .mx-portal {
        width: calc(100% - 56px);
        grid-template-columns: minmax(0, 3.5fr) minmax(235px, 1fr);
        gap: 18px;
    }

    .makerx-connect .mx-portal-main {
        grid-template-rows: 350px 54px 96px;
    }

    .makerx-connect .mx-hero-copy {
        padding-left: 48px;
    }

    .makerx-connect .mx-hero-copy p {
        font-size: 16px;
    }

    .makerx-connect .mx-portal-side {
        min-height: 500px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .makerx-connect .mx-category-labels,
    .makerx-connect .mx-category-visuals {
        gap: 10px;
    }
}

@media (max-width: 1023px) {
    .makerx-connect .mx-portal {
        width: calc(100% - 32px);
        display: block;
        margin-bottom: 28px;
    }

    .makerx-connect .mx-portal-main {
        display: block;
    }

    .makerx-connect .mx-hero-slider {
        height: 330px;
        border-radius: 20px;
    }

    .makerx-connect .mx-hero-copy {
        width: 62%;
        padding: 30px 0 25px 28px;
    }

    .makerx-connect .mx-hero-kicker {
        font-size: 19px;
    }

    .makerx-connect .mx-hero-copy h1 {
        font-size: 38px;
    }

    .makerx-connect .mx-hero-copy p {
        max-width: 390px;
        font-size: 14px;
    }

    .makerx-connect .mx-hero-button {
        min-width: 175px;
        height: 44px;
        padding-left: 23px;
        font-size: 13px;
    }

    .makerx-connect .mx-hero-art {
        inset-left: 55%;
        opacity: .8;
    }

    .makerx-connect .mx-board-one {
        right: 120px;
    }

    .makerx-connect .mx-board-two {
        right: -15px;
    }

    .makerx-connect .mx-robot-card {
        display: none;
    }

    .makerx-connect .mx-category-labels,
    .makerx-connect .mx-category-visuals {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .makerx-connect .mx-category-labels {
        padding-top: 0;
    }

    .makerx-connect .mx-category-labels a {
        min-width: 145px;
        height: 52px;
        border-radius: 0 0 18px 18px;
    }

    .makerx-connect .mx-category-visuals {
        padding-top: 12px;
        padding-bottom: 4px;
    }

    .makerx-connect .mx-category-visual {
        min-width: 145px;
        height: 76px;
    }

    .makerx-connect .mx-portal-side {
        min-height: 360px;
        margin-top: 18px;
        border-radius: 20px;
    }

    .makerx-connect .mx-side-device {
        transform: scale(.72);
        margin-top: -12px;
        margin-bottom: -45px;
    }
}

@media (max-width: 640px) {
    .makerx-connect .mx-hero-slider {
        height: 310px;
    }

    .makerx-connect .mx-hero-copy {
        width: 74%;
        padding: 28px 20px;
    }

    .makerx-connect .mx-hero-copy h1 {
        font-size: 32px;
    }

    .makerx-connect .mx-hero-copy p {
        font-size: 13px;
        margin: 13px 0 18px;
    }

    .makerx-connect .mx-hero-art {
        inset: 0 0 0 66%;
        opacity: .45;
    }

    .makerx-connect .mx-board-card {
        transform: scale(.78);
    }

    .makerx-connect .mx-portal-side h2 {
        font-size: 27px;
    }
}


/* =========================================================
   MAKER X CONNECT V7
   RESTANTE DA HOME + RODAPE
   ========================================================= */

/* ---------- vitrines sucessivas ---------- */

.makerx-connect .mx-store-sections {
    padding-bottom: 12px;
}

.makerx-connect .mx-store-sections .mx-product-section {
    margin-top: 44px !important;
}

.makerx-connect .mx-store-sections .mx-section-head {
    min-height: 44px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #e7e9ed !important;
}

.makerx-connect .mx-store-sections .mx-section-title {
    font-size: 25px !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
}

.makerx-connect .mx-store-sections .mx-products-row {
    margin-top: 19px !important;
    gap: 15px !important;
}

/* ---------- banner intermediario ---------- */

.makerx-connect .mx-mid-promo {
    position: relative;
    width: min(1440px, calc(100% - 88px));
    min-height: 218px;
    margin: 46px auto 3px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    border-radius: 18px;
    background:
        radial-gradient(circle at 85% 40%, rgba(255,201,43,.25), transparent 30%),
        linear-gradient(110deg, #08275d 0%, #1649a4 65%, #4774f3 100%);
    color: #fff;
}

.makerx-connect .mx-mid-promo-copy {
    position: relative;
    z-index: 3;
    padding: 35px 48px;
}

.makerx-connect .mx-mid-promo-copy > span {
    color: #ffd135;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .17em;
}

.makerx-connect .mx-mid-promo-copy h2 {
    max-width: 720px;
    margin: 8px 0;
    color: #fff;
    font-size: 32px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.03em;
}

.makerx-connect .mx-mid-promo-copy p {
    margin: 0 0 21px;
    color: rgba(255,255,255,.82);
    font-size: 14px;
}

.makerx-connect .mx-mid-promo-copy a {
    min-width: 190px;
    height: 42px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border-radius: 22px;
    background: #ffc92b;
    color: #071225 !important;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
}

.makerx-connect .mx-mid-promo-copy a b {
    font-size: 24px;
    font-weight: 400;
}

.makerx-connect .mx-mid-promo-art {
    position: relative;
    min-height: 218px;
}

.makerx-connect .mx-chip {
    position: absolute;
    z-index: 4;
    right: 130px;
    top: 37px;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 12px solid #dadde3;
    border-radius: 14px;
    background: #123774;
    box-shadow: 0 20px 30px rgba(0,0,0,.24);
    transform: rotate(-8deg);
}

.makerx-connect .mx-chip::before,
.makerx-connect .mx-chip::after {
    content: "";
    position: absolute;
    left: -25px;
    right: -25px;
    height: 8px;
    background:
        repeating-linear-gradient(
            90deg,
            #d5d8df 0 7px,
            transparent 7px 15px
        );
}

.makerx-connect .mx-chip::before {
    top: 23px;
}

.makerx-connect .mx-chip::after {
    bottom: 23px;
}

.makerx-connect .mx-chip span {
    color: #ffc92b;
    font-size: 26px;
    font-weight: 900;
}

.makerx-connect .mx-promo-x {
    position: absolute;
    right: 5px;
    top: -28px;
    color: rgba(255,201,43,.48);
    font-size: 210px;
    line-height: 1;
    font-weight: 900;
    transform: rotate(9deg);
}

/* ---------- dois banners ---------- */

.makerx-connect .mx-dual-promo {
    width: min(1440px, calc(100% - 88px));
    margin: 46px auto 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.makerx-connect .mx-dual-card {
    position: relative;
    min-height: 210px;
    overflow: hidden;
    padding: 32px 34px;
    border-radius: 18px;
    color: #fff !important;
    text-decoration: none !important;
}

.makerx-connect .mx-dual-card > div:first-child {
    position: relative;
    z-index: 4;
    width: 60%;
}

.makerx-connect .mx-dual-card span {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .15em;
}

.makerx-connect .mx-dual-card h3 {
    margin: 5px 0 3px;
    font-size: 31px;
    line-height: 1;
    font-weight: 800;
}

.makerx-connect .mx-dual-card p {
    margin: 0 0 19px;
    font-size: 13px;
    opacity: .85;
}

.makerx-connect .mx-dual-card strong {
    font-size: 11px;
    letter-spacing: .08em;
}

.makerx-connect .mx-dual-3d {
    background:
        radial-gradient(circle at 83% 55%, rgba(255,201,43,.35), transparent 35%),
        linear-gradient(120deg, #10234c, #2559c3);
}

.makerx-connect .mx-dual-rc {
    background:
        radial-gradient(circle at 82% 45%, rgba(71,116,243,.38), transparent 34%),
        linear-gradient(120deg, #07090e, #252a35);
}

.makerx-connect .mx-printer-art {
    position: absolute;
    right: 42px;
    top: 30px;
    width: 145px;
    height: 145px;
    border: 11px solid rgba(255,255,255,.84);
    border-bottom-width: 17px;
}

.makerx-connect .mx-printer-art::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 24px;
    height: 8px;
    background: #ffc92b;
    box-shadow: 0 34px 0 rgba(255,255,255,.78);
}

.makerx-connect .mx-printer-art i {
    position: absolute;
    left: 48px;
    top: 50px;
    width: 29px;
    height: 33px;
    border: 4px solid #ffc92b;
    border-radius: 3px;
}

.makerx-connect .mx-printer-art b {
    position: absolute;
    right: 8px;
    bottom: 4px;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.makerx-connect .mx-rc-art {
    position: absolute;
    right: 30px;
    top: 54px;
    width: 180px;
    height: 94px;
    border-radius: 56px 56px 25px 25px;
    background: #ffc92b;
    transform: skewX(-8deg);
    box-shadow: 0 20px 30px rgba(0,0,0,.28);
}

.makerx-connect .mx-rc-art::before {
    content: "";
    position: absolute;
    left: 33px;
    top: -35px;
    width: 85px;
    height: 47px;
    border-radius: 45px 45px 8px 8px;
    background: #4774f3;
}

.makerx-connect .mx-rc-art i {
    position: absolute;
    bottom: -17px;
    width: 42px;
    height: 42px;
    border: 9px solid #111;
    border-radius: 50%;
    background: #444;
}

.makerx-connect .mx-rc-art i:first-child {
    left: 25px;
}

.makerx-connect .mx-rc-art i:nth-child(2) {
    right: 25px;
}

.makerx-connect .mx-rc-art b {
    position: absolute;
    right: 18px;
    top: 30px;
    color: #0b2457;
    font-size: 18px;
    font-weight: 900;
}

/* ---------- faixa de confianca ---------- */

.makerx-connect .mx-trust-strip {
    width: min(1440px, calc(100% - 88px));
    margin: 54px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid #e1e5eb;
    border-radius: 14px;
    background: #fff;
}

.makerx-connect .mx-trust-item {
    min-height: 92px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-right: 1px solid #e7e9ed;
}

.makerx-connect .mx-trust-item:last-child {
    border-right: 0;
}

.makerx-connect .mx-trust-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #edf3ff;
}

.makerx-connect .mx-trust-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #2559c3;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.makerx-connect .mx-trust-item strong,
.makerx-connect .mx-trust-item small {
    display: block;
}

.makerx-connect .mx-trust-item strong {
    color: #111827;
    font-size: 13px;
    font-weight: 800;
}

.makerx-connect .mx-trust-item small {
    margin-top: 3px;
    color: #667085;
    font-size: 11px;
}

/* ---------- rodape completo ---------- */

.makerx-connect .mx-footer-v7 {
    margin-top: 34px;
    background: #071b40;
    color: #fff;
}

.makerx-connect .mx-footer-main {
    width: min(1440px, calc(100% - 88px));
    margin: 0 auto;
    padding: 48px 0 40px;
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr 1.15fr;
    gap: 48px;
}

.makerx-connect .mx-footer-logo {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,.04);
}

.makerx-connect .mx-footer-logo img {
    width: 210px;
    max-height: 66px;
    object-fit: contain;
}

.makerx-connect .mx-footer-brand p {
    max-width: 420px;
    margin: 18px 0 20px;
    color: rgba(255,255,255,.72) !important;
    font-size: 13px;
    line-height: 1.65;
}

.makerx-connect .mx-footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.makerx-connect .mx-footer-badges span {
    padding: 6px 10px;
    border-radius: 7px;
    background: rgba(255,255,255,.09);
    color: rgba(255,255,255,.9);
    font-size: 10px;
    font-weight: 700;
}

.makerx-connect .mx-footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.makerx-connect .mx-footer-column h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.makerx-connect .mx-footer-column a {
    color: rgba(255,255,255,.72) !important;
    font-size: 12px;
    text-decoration: none !important;
}

.makerx-connect .mx-footer-column a:hover {
    color: #ffc92b !important;
}

.makerx-connect .mx-footer-contact p {
    margin: 0;
    color: rgba(255,255,255,.72) !important;
    font-size: 12px;
    line-height: 1.55;
}

.makerx-connect .mx-footer-social {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.makerx-connect .mx-footer-social span {
    padding: 7px 10px;
    border-radius: 7px;
    background: #fff;
    color: #071b40;
    font-size: 10px;
    font-weight: 800;
}

.makerx-connect .mx-footer-bottom {
    min-height: 58px;
    padding: 0 max(44px, calc((100% - 1440px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255,255,255,.10);
    background: #04122d;
    color: rgba(255,255,255,.63);
    font-size: 11px;
}

/* ---------- responsivo ---------- */

@media (max-width: 1023px) {
    .makerx-connect .mx-mid-promo,
    .makerx-connect .mx-dual-promo,
    .makerx-connect .mx-trust-strip,
    .makerx-connect .mx-footer-main {
        width: calc(100% - 32px);
    }

    .makerx-connect .mx-mid-promo {
        grid-template-columns: 1fr;
    }

    .makerx-connect .mx-mid-promo-art {
        display: none;
    }

    .makerx-connect .mx-dual-promo {
        grid-template-columns: 1fr;
    }

    .makerx-connect .mx-trust-strip {
        grid-template-columns: 1fr 1fr;
    }

    .makerx-connect .mx-trust-item:nth-child(2) {
        border-right: 0;
    }

    .makerx-connect .mx-trust-item:nth-child(-n+2) {
        border-bottom: 1px solid #e7e9ed;
    }

    .makerx-connect .mx-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .makerx-connect .mx-footer-bottom {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 640px) {
    .makerx-connect .mx-mid-promo-copy {
        padding: 28px 24px;
    }

    .makerx-connect .mx-mid-promo-copy h2 {
        font-size: 27px;
    }

    .makerx-connect .mx-dual-card {
        min-height: 190px;
        padding: 26px 24px;
    }

    .makerx-connect .mx-dual-card > div:first-child {
        width: 68%;
    }

    .makerx-connect .mx-dual-card h3 {
        font-size: 27px;
    }

    .makerx-connect .mx-printer-art,
    .makerx-connect .mx-rc-art {
        transform: scale(.72);
        transform-origin: right center;
        right: 8px;
    }

    .makerx-connect .mx-trust-strip {
        grid-template-columns: 1fr;
    }

    .makerx-connect .mx-trust-item {
        border-right: 0;
        border-bottom: 1px solid #e7e9ed;
    }

    .makerx-connect .mx-trust-item:last-child {
        border-bottom: 0;
    }

    .makerx-connect .mx-footer-main {
        grid-template-columns: 1fr;
        padding-top: 36px;
        gap: 26px;
    }

    .makerx-connect .mx-footer-bottom {
        padding-top: 14px;
        padding-bottom: 14px;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}

/* =========================================================
   MAKER X CONNECT V8
   PRATELEIRAS ESTILO MARKETPLACE
   ========================================================= */

.makerx-connect .mx-market-shelves {
    width: min(1440px, calc(100% - 88px));
    margin: 36px auto 10px;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

/* ---------- caixa da categoria ---------- */

.makerx-connect .mx-market-shelf {
    overflow: hidden;
    border: 1px solid #dfe3e9;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(20, 35, 60, .025);
}

.makerx-connect .mx-market-shelf-head {
    height: 54px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #e6e9ee;
    background: #fbfbfc;
}

.makerx-connect .mx-market-shelf-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #151b25;
}

.makerx-connect .mx-market-shelf-title strong {
    font-size: 14px;
    font-weight: 800;
}

.makerx-connect .mx-shelf-title-icon {
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #4774f3;
}

.makerx-connect .mx-shelf-title-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.makerx-connect .mx-market-shelf-tools {
    display: flex;
    align-items: center;
    gap: 7px;
}

.makerx-connect .mx-market-shelf-tools a {
    margin-right: 4px;
    color: #737b88 !important;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none !important;
}

.makerx-connect .mx-market-shelf-tools button {
    width: 28px;
    height: 28px;
    padding: 0 0 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #cbd0d7;
    color: #fff;
    font-size: 21px;
    line-height: 1;
    cursor: default;
}

.makerx-connect .mx-market-shelf-body {
    min-height: 300px;
    padding: 14px 15px 15px;
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.makerx-connect .mx-market-shelf-body-full {
    padding-left: 15px;
}

/* ---------- banner vertical na primeira posicao ---------- */

.makerx-connect .mx-shelf-promo {
    position: relative;
    width: 235px;
    min-width: 235px;
    height: 272px;
    overflow: hidden;
    padding: 23px 20px;
    border-radius: 15px;
    background:
        radial-gradient(circle at 68% 77%, rgba(255,201,43,.35), transparent 28%),
        radial-gradient(circle at 95% 10%, rgba(111,150,255,.35), transparent 35%),
        linear-gradient(150deg, #082a72 0%, #1552bf 58%, #4774f3 100%);
    color: #fff !important;
    text-decoration: none !important;
}

.makerx-connect .mx-shelf-promo::before {
    content: "";
    position: absolute;
    left: -45px;
    bottom: -60px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(255,201,43,.18);
}

.makerx-connect .mx-shelf-promo-brand {
    position: relative;
    z-index: 3;
    color: #ffc92b;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
}

.makerx-connect .mx-shelf-promo h3 {
    position: relative;
    z-index: 3;
    margin: 8px 0 7px;
    color: #fff;
    font-size: 25px;
    line-height: .97;
    font-weight: 900;
    letter-spacing: -.03em;
}

.makerx-connect .mx-shelf-promo p {
    position: relative;
    z-index: 3;
    width: 145px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 11px;
    line-height: 1.4;
}

.makerx-connect .mx-shelf-promo-board {
    position: absolute;
    z-index: 2;
    right: 20px;
    bottom: 36px;
    width: 91px;
    height: 137px;
    border: 7px solid #d9dce2;
    border-radius: 10px;
    background: #0e326f;
    transform: rotate(-11deg);
    box-shadow: 0 17px 24px rgba(0,0,0,.23);
}

.makerx-connect .mx-shelf-promo-board::before,
.makerx-connect .mx-shelf-promo-board::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    height: 21px;
    border: 2px solid rgba(255,255,255,.4);
    border-radius: 4px;
}

.makerx-connect .mx-shelf-promo-board::before {
    top: 24px;
}

.makerx-connect .mx-shelf-promo-board::after {
    top: 57px;
}

.makerx-connect .mx-shelf-promo-board > span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    text-align: center;
    color: #ffc92b;
    font-size: 10px;
    font-weight: 900;
}

.makerx-connect .mx-shelf-promo-board > i {
    position: absolute;
    left: -12px;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: #d8dbe0;
    box-shadow:
        0 16px 0 #d8dbe0,
        0 32px 0 #d8dbe0,
        0 48px 0 #d8dbe0,
        0 64px 0 #d8dbe0;
}

.makerx-connect .mx-shelf-promo-board > i:first-of-type {
    top: 15px;
}

.makerx-connect .mx-shelf-promo-board > i:nth-of-type(2) {
    top: 23px;
    left: auto;
    right: -12px;
}

.makerx-connect .mx-shelf-promo-board > i:nth-of-type(3) {
    display: none;
}

.makerx-connect .mx-shelf-promo-cta {
    position: absolute;
    z-index: 4;
    left: 20px;
    bottom: 18px;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

/* ---------- carrossel Bagisto dentro da caixa ---------- */

.makerx-connect .mx-shelf-products {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.makerx-connect .mx-shelf-products .mx-product-section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.makerx-connect .mx-shelf-products .mx-section-head {
    display: none !important;
}

.makerx-connect .mx-shelf-products .mx-products-row {
    height: 272px !important;
    margin: 0 !important;
    padding: 0 2px 4px !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 10px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.makerx-connect .mx-shelf-products .mx-products-row::-webkit-scrollbar {
    display: none !important;
}

/* cards mais estreitos dentro dessa secao */
.makerx-connect .mx-shelf-products .mx-product-card {
    position: relative !important;
    min-width: 190px !important;
    width: 190px !important;
    max-width: 190px !important;
    height: 270px !important;
    border: 1px solid #dfe3e9 !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.makerx-connect .mx-shelf-products .mx-product-card:hover {
    transform: none !important;
    border-color: #cbd2dd !important;
    box-shadow: 0 4px 12px rgba(30,45,70,.06) !important;
}

.makerx-connect .mx-shelf-products .mx-product-media {
    width: 188px !important;
    height: 136px !important;
    max-width: 188px !important;
    max-height: 136px !important;
    background: #fff !important;
}

.makerx-connect .mx-shelf-products .mx-product-image {
    height: 136px !important;
    background: #fff !important;
}

.makerx-connect .mx-shelf-products .mx-product-image::after {
    padding-bottom: 136px !important;
}

.makerx-connect .mx-shelf-products .mx-product-info {
    min-height: 132px !important;
    height: 132px !important;
    padding: 8px 11px 10px !important;
    gap: 4px !important;
}

.makerx-connect .mx-shelf-products .mx-product-name {
    min-height: 37px !important;
    color: #111 !important;
    font-size: 10px !important;
    line-height: 13px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.makerx-connect .mx-shelf-products .mx-product-price {
    margin-top: auto !important;
    padding-top: 8px !important;
    border-top: 1px solid #e6e9ed !important;
    color: #15499a !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 900 !important;
    justify-content: center !important;
}

/* transforma Adicionar ao carrinho em botao pequeno */
@media (min-width: 1024px) {
    .makerx-connect .mx-shelf-products .mx-card-actions {
        position: static !important;
        height: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    .makerx-connect .mx-shelf-products .mx-buy-button {
        position: absolute !important;
        right: 9px !important;
        bottom: 8px !important;
        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;
        height: 29px !important;
        min-height: 29px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        background: #4774f3 !important;
        border: 1px solid #4774f3 !important;
        color: transparent !important;
        font-size: 0 !important;
    }

    .makerx-connect .mx-shelf-products .mx-buy-button::before {
        content: "+";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 20px;
        line-height: 1;
        font-weight: 500;
    }
}

/* ---------- quatro cards inferiores ---------- */

.makerx-connect .mx-market-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.makerx-connect .mx-market-info-card {
    position: relative;
    min-height: 135px;
    overflow: hidden;
    padding: 24px 18px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 88% 50%, rgba(255,201,43,.33), transparent 34%),
        linear-gradient(135deg, #15499a, #4774f3);
    color: #fff;
}

.makerx-connect .mx-market-info-card:nth-child(even) {
    background:
        radial-gradient(circle at 88% 50%, rgba(255,201,43,.28), transparent 34%),
        linear-gradient(135deg, #082a72, #2157d8);
}

.makerx-connect .mx-market-info-card > div:first-child {
    position: relative;
    z-index: 3;
    width: 59%;
}

.makerx-connect .mx-market-info-card h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    font-weight: 800;
}

.makerx-connect .mx-market-info-card p {
    margin: 0;
    color: rgba(255,255,255,.83);
    font-size: 11px;
    line-height: 1.45;
}

.makerx-connect .mx-info-art {
    position: absolute;
    right: 10px;
    top: 7px;
    width: 112px;
    height: 121px;
}

/* Cartao / PIX */
.makerx-connect .mx-info-art-card {
    top: 27px;
    right: -8px;
    width: 118px;
    height: 73px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255,255,255,.85);
    border-radius: 13px;
    background: linear-gradient(145deg, #ffc92b, #ffe077);
    color: #0a2d70;
    font-size: 18px;
    font-weight: 900;
    transform: rotate(-15deg);
    box-shadow: 0 15px 22px rgba(0,0,0,.18);
}

/* Caixa de retirada */
.makerx-connect .mx-info-art-box {
    right: 6px;
    top: 20px;
    width: 105px;
    height: 90px;
    border-radius: 7px;
    background: #ffc92b;
    transform: rotate(7deg);
    box-shadow: 0 15px 22px rgba(0,0,0,.15);
}

.makerx-connect .mx-info-art-box::before,
.makerx-connect .mx-info-art-box::after {
    content: "";
    position: absolute;
    background: #0e347a;
}

.makerx-connect .mx-info-art-box::before {
    left: 48px;
    top: 0;
    width: 9px;
    height: 90px;
}

.makerx-connect .mx-info-art-box::after {
    left: 0;
    top: 38px;
    width: 105px;
    height: 9px;
}

/* Escudo */
.makerx-connect .mx-info-art-shield {
    right: 9px;
    top: 14px;
    width: 94px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(50% 0, 92% 15%, 85% 72%, 50% 100%, 15% 72%, 8% 15%);
    background: #ffc92b;
    color: #0b347b;
    font-size: 41px;
    font-weight: 900;
    filter: drop-shadow(0 13px 13px rgba(0,0,0,.18));
}

/* Headset */
.makerx-connect .mx-info-art-headset {
    right: 6px;
    top: 20px;
    width: 105px;
    height: 96px;
    border: 13px solid #ffc92b;
    border-bottom-color: transparent;
    border-radius: 55px 55px 23px 23px;
    transform: rotate(-7deg);
}

.makerx-connect .mx-info-art-headset::before,
.makerx-connect .mx-info-art-headset::after {
    content: "";
    position: absolute;
    bottom: -12px;
    width: 18px;
    height: 39px;
    border-radius: 9px;
    background: #ffc92b;
}

.makerx-connect .mx-info-art-headset::before {
    left: -13px;
}

.makerx-connect .mx-info-art-headset::after {
    right: -13px;
}

/* ---------- responsivo ---------- */

@media (max-width: 1180px) {
    .makerx-connect .mx-market-shelves {
        width: calc(100% - 56px);
    }

    .makerx-connect .mx-shelf-promo {
        width: 210px;
        min-width: 210px;
    }

    .makerx-connect .mx-market-info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1023px) {
    .makerx-connect .mx-market-shelves {
        width: calc(100% - 32px);
        margin-top: 28px;
    }

    .makerx-connect .mx-market-shelf-head {
        height: 50px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .makerx-connect .mx-market-shelf-tools button {
        display: none;
    }

    .makerx-connect .mx-market-shelf-body {
        overflow-x: auto;
    }

    .makerx-connect .mx-shelf-promo {
        width: 190px;
        min-width: 190px;
        height: 252px;
    }

    .makerx-connect .mx-shelf-products {
        min-width: 610px;
    }

    .makerx-connect .mx-shelf-products .mx-products-row {
        height: 252px !important;
    }

    .makerx-connect .mx-shelf-products .mx-product-card {
        min-width: 172px !important;
        width: 172px !important;
        max-width: 172px !important;
        height: 250px !important;
    }

    .makerx-connect .mx-shelf-products .mx-product-media {
        width: 170px !important;
        height: 125px !important;
        max-width: 170px !important;
        max-height: 125px !important;
    }

    .makerx-connect .mx-shelf-products .mx-product-image,
    .makerx-connect .mx-shelf-products .mx-product-image::after {
        height: 125px !important;
        padding-bottom: 125px !important;
    }

    .makerx-connect .mx-shelf-products .mx-product-info {
        height: 123px !important;
        min-height: 123px !important;
    }
}

@media (max-width: 640px) {
    .makerx-connect .mx-market-info-grid {
        grid-template-columns: 1fr;
    }

    .makerx-connect .mx-market-info-card {
        min-height: 120px;
    }

    .makerx-connect .mx-market-info-card > div:first-child {
        width: 65%;
    }
}

/* =========================================================
   MAKER X CONNECT V10
   CONSOLIDACAO DA HOME
   ========================================================= */

/* A V10 usa somente as prateleiras unificadas. */
.makerx-connect .mx-market-shelves {
    width: min(1440px, calc(100% - 88px)) !important;
    margin: 34px auto 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

/* Categoria sem produto: desaparece por completo. */
.makerx-connect .mx-market-shelf.mx-count-0 {
    display: none !important;
}

/* Pequenas quantidades não deixam uma caixa gigantesca vazia. */
@media (min-width: 1024px) {
    .makerx-connect .mx-market-shelf.mx-count-1 {
        width: min(100%, 560px) !important;
    }

    .makerx-connect .mx-market-shelf.mx-count-2 {
        width: min(100%, 790px) !important;
    }

    .makerx-connect .mx-market-shelf.mx-count-3 {
        width: min(100%, 1020px) !important;
    }

    .makerx-connect .mx-market-shelf-featured.mx-count-1 {
        width: min(100%, 790px) !important;
    }

    .makerx-connect .mx-market-shelf-featured.mx-count-2 {
        width: min(100%, 1020px) !important;
    }

    .makerx-connect .mx-market-shelf-featured.mx-count-3 {
        width: min(100%, 1240px) !important;
    }
}

/* Cabeçalho das prateleiras. */
.makerx-connect .mx-market-shelf {
    overflow: hidden !important;
    border: 1px solid #dfe3e9 !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.makerx-connect .mx-market-shelf-head {
    height: 50px !important;
    padding: 0 14px !important;
    background: #fbfbfc !important;
    border-bottom: 1px solid #e5e8ed !important;
}

.makerx-connect .mx-market-shelf-title {
    gap: 9px !important;
}

.makerx-connect .mx-shelf-title-icon {
    width: auto !important;
    min-width: 28px !important;
    height: 24px !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
    background: #4774f3 !important;
    color: #fff !important;
    font-size: 8px !important;
    line-height: 24px !important;
    font-weight: 900 !important;
    letter-spacing: .03em !important;
}

.makerx-connect .mx-market-shelf-title strong {
    color: #161d29 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.makerx-connect .mx-market-shelf-tools a {
    color: #687180 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
}

.makerx-connect .mx-market-shelf-tools button {
    width: 27px !important;
    height: 27px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #c7ccd3 !important;
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.makerx-connect .mx-market-shelf-tools button:disabled {
    opacity: .35 !important;
    cursor: default !important;
}

/* Corpo compacto. */
.makerx-connect .mx-market-shelf-body {
    min-height: 0 !important;
    height: auto !important;
    padding: 13px 14px 14px !important;
    gap: 12px !important;
}

/* Banner vertical da primeira categoria. */
.makerx-connect .mx-shelf-promo {
    width: 228px !important;
    min-width: 228px !important;
    height: 268px !important;
    border-radius: 14px !important;
}

/* O componente Bagisto interno perde seu próprio cabeçalho:
   usamos somente o cabeçalho da caixa V10. */
.makerx-connect .mx-shelf-products .mx-product-section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.makerx-connect .mx-shelf-products .mx-section-head {
    display: none !important;
}

.makerx-connect .mx-shelf-products .mx-products-row {
    height: 268px !important;
    min-height: 268px !important;
    margin: 0 !important;
    padding: 0 2px 2px !important;
    gap: 10px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.makerx-connect .mx-shelf-products .mx-products-row::-webkit-scrollbar {
    display: none !important;
}

/* Card de prateleira. */
.makerx-connect .mx-shelf-products .mx-product-card {
    min-width: 188px !important;
    width: 188px !important;
    max-width: 188px !important;
    height: 266px !important;
    border: 1px solid #dfe3e9 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}

.makerx-connect .mx-shelf-products .mx-product-media {
    width: 186px !important;
    max-width: 186px !important;
    height: 137px !important;
    max-height: 137px !important;
    background: #fff !important;
}

.makerx-connect .mx-shelf-products .mx-product-image {
    height: 137px !important;
    background: #fff !important;
}

.makerx-connect .mx-shelf-products .mx-product-image::after {
    padding-bottom: 137px !important;
}

.makerx-connect .mx-shelf-products .mx-product-info {
    width: 100% !important;
    max-width: none !important;
    min-height: 127px !important;
    height: 127px !important;
    margin: 0 !important;
    padding: 8px 10px 9px !important;
    gap: 4px !important;
}

.makerx-connect .mx-shelf-products .mx-product-name {
    min-height: 36px !important;
    font-size: 10px !important;
    line-height: 13px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.makerx-connect .mx-shelf-products .mx-product-price {
    margin-top: auto !important;
    padding-top: 7px !important;
    border-top: 1px solid #e5e8ed !important;
    color: #15499a !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 900 !important;
    justify-content: center !important;
}

/* Botão pequeno de adicionar. */
@media (min-width: 1024px) {
    .makerx-connect .mx-shelf-products .mx-card-actions {
        position: static !important;
        height: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    .makerx-connect .mx-shelf-products .mx-buy-button {
        position: absolute !important;
        right: 8px !important;
        bottom: 8px !important;
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 8px !important;
        background: #4774f3 !important;
        border-color: #4774f3 !important;
        color: transparent !important;
        font-size: 0 !important;
    }

    .makerx-connect .mx-shelf-products .mx-buy-button::before {
        content: "+";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 19px;
        font-weight: 500;
    }
}

/* Cards de informação ficam integrados às prateleiras. */
.makerx-connect .mx-market-info-grid {
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 13px !important;
}

.makerx-connect .mx-market-info-card {
    min-height: 132px !important;
    border-radius: 13px !important;
}

/* Não há animações/reveal da V9 na V10. */
.makerx-connect .mx-reveal,
.makerx-connect .mx-reveal-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* Mobile sempre ocupa toda a largura. */
@media (max-width: 1023px) {
    .makerx-connect .mx-market-shelves {
        width: calc(100% - 32px) !important;
    }

    .makerx-connect .mx-market-shelf.mx-count-1,
    .makerx-connect .mx-market-shelf.mx-count-2,
    .makerx-connect .mx-market-shelf.mx-count-3,
    .makerx-connect .mx-market-shelf.mx-count-many {
        width: 100% !important;
        max-width: none !important;
    }

    .makerx-connect .mx-market-shelf-body {
        overflow-x: auto !important;
    }

    .makerx-connect .mx-shelf-products {
        min-width: 590px !important;
    }

    .makerx-connect .mx-market-info-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 640px) {
    .makerx-connect .mx-market-info-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   MAKER X CONNECT V11
   EFEITOS SEGUROS — CSS ONLY
   Nenhum elemento e ocultado durante o carregamento.
   ========================================================= */

/* ---------------------------------------------------------
   1. CABECALHO
   --------------------------------------------------------- */

@media (min-width: 1024px) {
    .makerx-connect .mx-main-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 80 !important;
        background: rgba(255, 255, 255, .97) !important;
        box-shadow:
            0 4px 16px rgba(18, 35, 60, .055) !important;
        backdrop-filter: blur(9px) saturate(120%);
        -webkit-backdrop-filter: blur(9px) saturate(120%);
    }
}

.makerx-connect .mx-logo {
    transition:
        transform .22s cubic-bezier(.2, .7, .2, 1),
        filter .22s ease !important;
}

.makerx-connect .mx-logo-link:hover .mx-logo {
    transform: scale(1.025);
    filter: saturate(1.07);
}

/* ---------------------------------------------------------
   2. BUSCA
   --------------------------------------------------------- */

.makerx-connect .mx-search-wrap {
    transition:
        transform .2s ease,
        filter .2s ease !important;
}

.makerx-connect .mx-search-wrap:focus-within {
    transform: translateY(-1px);
    filter: drop-shadow(0 7px 13px rgba(21, 73, 154, .09));
}

.makerx-connect .mx-search-wrap input {
    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease !important;
}

.makerx-connect .mx-search-wrap input:focus {
    background: #fff !important;
    border-color: #4774f3 !important;
    box-shadow:
        0 0 0 3px rgba(71, 116, 243, .11) !important;
}

/* ---------------------------------------------------------
   3. MENU DE CATEGORIAS
   --------------------------------------------------------- */

.makerx-connect .mx-static-nav-inner > a {
    position: relative !important;
    transition:
        color .18s ease,
        transform .18s ease,
        background-color .18s ease !important;
}

.makerx-connect .mx-static-nav-inner > a:not(.mx-nav-all):not(.mx-nav-offers)::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    border-radius: 999px;
    background: #ffc92b;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
}

.makerx-connect .mx-static-nav-inner > a:hover {
    color: #15499a !important;
    transform: translateY(-1px);
}

.makerx-connect .mx-static-nav-inner > a:hover::after {
    transform: scaleX(1);
}

.makerx-connect .mx-nav-all svg {
    transition: transform .2s ease;
}

.makerx-connect .mx-nav-all:hover svg {
    transform: scale(1.1);
}

.makerx-connect .mx-nav-offers {
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}

.makerx-connect .mx-nav-offers:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 14px rgba(255, 201, 43, .25);
    filter: saturate(1.08);
}

/* ---------------------------------------------------------
   4. HERO PRINCIPAL
   --------------------------------------------------------- */

.makerx-connect .mx-hero-slider {
    isolation: isolate;
    transition:
        box-shadow .28s ease,
        transform .28s cubic-bezier(.2, .7, .2, 1) !important;
}

.makerx-connect .mx-hero-slider::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -35%;
    bottom: -35%;
    left: -22%;
    width: 16%;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.32),
            transparent
        );
    transform: skewX(-18deg);
    opacity: 0;
    transition:
        left .65s ease,
        opacity .2s ease;
}

.makerx-connect .mx-hero-slider:hover {
    box-shadow: 0 14px 32px rgba(30, 53, 92, .10);
}

.makerx-connect .mx-hero-slider:hover::after {
    left: 112%;
    opacity: 1;
}

.makerx-connect .mx-hero-copy,
.makerx-connect .mx-hero-art {
    position: relative;
    z-index: 3;
}

.makerx-connect .mx-hero-button {
    transition:
        transform .18s ease,
        background-color .18s ease,
        box-shadow .18s ease !important;
}

.makerx-connect .mx-hero-button:hover {
    transform: translateY(-2px);
    background: #4774f3 !important;
    box-shadow: 0 9px 18px rgba(32, 77, 170, .18);
}

.makerx-connect .mx-hero-button:active {
    transform: translateY(0) scale(.985);
}

/* Flutuacao somente dos desenhos — nenhum layout muda. */

@keyframes mxV11BoardOne {
    0%,
    100% {
        transform: rotate(-5deg) translateY(0);
    }

    50% {
        transform: rotate(-4deg) translateY(-6px);
    }
}

@keyframes mxV11BoardTwo {
    0%,
    100% {
        transform: rotate(5deg) translateY(0);
    }

    50% {
        transform: rotate(4deg) translateY(5px);
    }
}

@keyframes mxV11Robot {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.makerx-connect .mx-board-one {
    animation: mxV11BoardOne 5s ease-in-out infinite;
}

.makerx-connect .mx-board-two {
    animation: mxV11BoardTwo 5.4s ease-in-out infinite;
}

.makerx-connect .mx-robot-card {
    animation: mxV11Robot 4.6s ease-in-out infinite;
}

/* ---------------------------------------------------------
   5. CATEGORIAS ABAIXO DO HERO
   --------------------------------------------------------- */

.makerx-connect .mx-category-labels a {
    transition:
        transform .2s ease,
        background-color .2s ease,
        box-shadow .2s ease !important;
}

.makerx-connect .mx-category-labels a:hover {
    transform: translateY(-3px);
    background: #15499a !important;
    box-shadow: 0 7px 14px rgba(21, 73, 154, .15);
}

.makerx-connect .mx-category-visual {
    transition:
        transform .22s cubic-bezier(.2, .7, .2, 1),
        box-shadow .22s ease,
        filter .22s ease !important;
}

.makerx-connect .mx-category-visual i {
    transition:
        transform .25s cubic-bezier(.2, .7, .2, 1),
        filter .25s ease !important;
}

.makerx-connect .mx-category-visual:hover {
    transform: translateY(-4px);
    box-shadow: 0 11px 20px rgba(27, 61, 132, .14);
    filter: saturate(1.05);
}

.makerx-connect .mx-category-visual:hover i {
    transform: rotate(0deg) scale(1.07);
    filter: brightness(1.03);
}

/* ---------------------------------------------------------
   6. PAINEL LATERAL
   --------------------------------------------------------- */

.makerx-connect .mx-portal-side {
    transition:
        transform .25s ease,
        box-shadow .25s ease !important;
}

.makerx-connect .mx-portal-side:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(9, 25, 56, .18);
}

.makerx-connect .mx-side-device {
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

.makerx-connect .mx-portal-side:hover .mx-side-device {
    transform: translateY(-4px);
}

.makerx-connect .mx-side-button {
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}

.makerx-connect .mx-side-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(255, 201, 43, .19);
    filter: brightness(1.03);
}

/* ---------------------------------------------------------
   7. PRATELEIRAS
   --------------------------------------------------------- */

.makerx-connect .mx-market-shelf {
    transition:
        border-color .22s ease,
        box-shadow .22s ease !important;
}

.makerx-connect .mx-market-shelf:hover {
    border-color: #cfd6e0 !important;
    box-shadow: 0 8px 22px rgba(26, 44, 74, .065) !important;
}

.makerx-connect .mx-market-shelf-tools a {
    transition:
        color .18s ease,
        transform .18s ease !important;
}

.makerx-connect .mx-market-shelf-tools a:hover {
    color: #15499a !important;
    transform: translateX(-2px);
}

.makerx-connect .mx-market-shelf-tools button {
    transition:
        transform .16s ease,
        background-color .16s ease,
        opacity .16s ease !important;
}

.makerx-connect .mx-market-shelf-tools button:not(:disabled):hover {
    transform: scale(1.08);
    background: #4774f3 !important;
}

.makerx-connect .mx-market-shelf-tools button:not(:disabled):active {
    transform: scale(.94);
}

/* ---------------------------------------------------------
   8. BANNER VERTICAL DA PRATELEIRA
   --------------------------------------------------------- */

.makerx-connect .mx-shelf-promo {
    transition:
        transform .23s ease,
        box-shadow .23s ease,
        filter .23s ease !important;
}

.makerx-connect .mx-shelf-promo-board {
    transition:
        transform .3s cubic-bezier(.2, .7, .2, 1) !important;
}

.makerx-connect .mx-shelf-promo:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(20, 57, 130, .15);
    filter: saturate(1.06);
}

.makerx-connect .mx-shelf-promo:hover .mx-shelf-promo-board {
    transform: rotate(-6deg) translateY(-4px);
}

/* ---------------------------------------------------------
   9. CARDS DE PRODUTO
   --------------------------------------------------------- */

@media (pointer: fine) {
    .makerx-connect .mx-product-card,
    .makerx-connect .mx-shelf-products .mx-product-card {
        transition:
            transform .2s cubic-bezier(.2, .7, .2, 1),
            border-color .2s ease,
            box-shadow .2s ease !important;
    }

    .makerx-connect .mx-product-card:hover,
    .makerx-connect .mx-shelf-products .mx-product-card:hover {
        transform: translateY(-4px) !important;
        border-color: #c7d2e4 !important;
        box-shadow:
            0 10px 22px rgba(24, 45, 78, .085) !important;
    }

    .makerx-connect .mx-product-card img {
        transition:
            transform .3s cubic-bezier(.2, .7, .2, 1),
            filter .3s ease !important;
    }

    .makerx-connect .mx-product-card:hover img {
        transform: scale(1.045);
        filter: saturate(1.04);
    }
}

.makerx-connect .mx-buy-button {
    transition:
        transform .16s ease,
        background-color .16s ease,
        box-shadow .16s ease !important;
}

.makerx-connect .mx-buy-button:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 5px 11px rgba(21, 73, 154, .16);
}

.makerx-connect .mx-buy-button:active {
    transform: scale(.95);
}

/* ---------------------------------------------------------
   10. CARDS INFORMATIVOS
   --------------------------------------------------------- */

.makerx-connect .mx-market-info-card {
    transition:
        transform .22s cubic-bezier(.2, .7, .2, 1),
        box-shadow .22s ease,
        filter .22s ease !important;
}

.makerx-connect .mx-info-art {
    transition:
        transform .28s cubic-bezier(.2, .7, .2, 1) !important;
}

.makerx-connect .mx-market-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 11px 22px rgba(21, 73, 154, .14);
    filter: saturate(1.04);
}

.makerx-connect .mx-market-info-card:hover .mx-info-art {
    transform: translateY(-4px) rotate(2deg);
}

/* ---------------------------------------------------------
   11. RODAPE
   --------------------------------------------------------- */

.makerx-connect .mx-footer-column a {
    transition:
        color .18s ease,
        transform .18s ease !important;
}

.makerx-connect .mx-footer-column a:hover {
    color: #ffc92b !important;
    transform: translateX(3px);
}

.makerx-connect .mx-footer-social span {
    transition:
        transform .18s ease,
        background-color .18s ease !important;
}

.makerx-connect .mx-footer-social span:hover {
    transform: translateY(-2px);
    background: #ffc92b !important;
}

/* ---------------------------------------------------------
   12. TECLADO / ACESSIBILIDADE
   --------------------------------------------------------- */

.makerx-connect a:focus-visible,
.makerx-connect button:focus-visible,
.makerx-connect input:focus-visible {
    outline: 3px solid rgba(71, 116, 243, .34) !important;
    outline-offset: 3px !important;
}

/* ---------------------------------------------------------
   13. REDUCAO DE MOVIMENTO
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .makerx-connect,
    .makerx-connect *,
    .makerx-connect *::before,
    .makerx-connect *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}


/* =========================================================
   MAKER X CONNECT V14
   Painel lateral com a mesma altura do bloco principal
   ========================================================= */

@media (min-width: 1200px) {

    /* Garante que a linha principal trabalhe em stretch */
    .makerx-connect .mx-portal-grid,
    .makerx-connect .mx-home-portal,
    .makerx-connect .mx-hero-portal,
    .makerx-connect .mx-hero-grid {
        align-items: stretch !important;
    }

    /* Coluna esquerda */
    .makerx-connect .mx-portal-main,
    .makerx-connect .mx-home-main,
    .makerx-connect .mx-hero-main {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    /* Coluna direita */
    .makerx-connect .mx-portal-side,
    .makerx-connect .mx-home-side,
    .makerx-connect .mx-hero-side {
        display: flex !important;
        align-self: stretch !important;
        height: auto !important;
        min-height: 100% !important;
    }

    /* O card azul lateral deve ocupar toda a coluna */
    .makerx-connect .mx-portal-side > *,
    .makerx-connect .mx-home-side > *,
    .makerx-connect .mx-hero-side > * {
        flex: 1 1 auto !important;
        height: 100% !important;
        min-height: 100% !important;
    }

    /* Se o painel usar o card principal abaixo, ele também estica */
    .makerx-connect .mx-side-card,
    .makerx-connect .mx-side-highlight,
    .makerx-connect .mx-portal-side-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        height: 100% !important;
        min-height: 100% !important;
    }

    /* Bloco esquerdo: hero + faixas de categoria mais coesos */
    .makerx-connect .mx-hero-slider {
        flex: 1 0 auto !important;
    }

    .makerx-connect .mx-category-labels,
    .makerx-connect .mx-category-visual-grid,
    .makerx-connect .mx-category-visuals {
        flex: 0 0 auto !important;
    }
}

/* Em telas menores, mantem comportamento empilhado */
@media (max-width: 1199.98px) {
    .makerx-connect .mx-portal-side,
    .makerx-connect .mx-home-side,
    .makerx-connect .mx-hero-side {
        min-height: unset !important;
        height: auto !important;
    }
}


/* =========================================================
   MAKER X CONNECT V15
   MOTION PREMIUM
   Inspiracao: comportamento de grandes vitrines de ecommerce.
   Nenhum elemento fica invisivel durante o carregamento.
   ========================================================= */

:root {
    --mx-v15-blue: #2455d6;
    --mx-v15-blue-deep: #123d9d;
    --mx-v15-yellow: #ffc629;
    --mx-v15-shadow:
        0 14px 35px rgba(23, 40, 72, .11),
        0 3px 9px rgba(23, 40, 72, .055);
}

/* ---------------------------------------------------------
   1. CABECALHO / PESQUISA / ICONES
   --------------------------------------------------------- */

@media (min-width: 1024px) {
    .makerx-connect .mx-main-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 90 !important;
        background: rgba(255, 255, 255, .965) !important;
        box-shadow:
            0 1px 0 rgba(22, 40, 70, .07),
            0 8px 23px rgba(22, 40, 70, .045) !important;
        backdrop-filter: blur(12px) saturate(130%);
        -webkit-backdrop-filter: blur(12px) saturate(130%);
    }
}

.makerx-connect .mx-search-wrap {
    border-radius: 13px !important;
    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .22s ease !important;
}

.makerx-connect .mx-search-wrap:focus-within {
    transform: translateY(-1px) scale(1.002);
    box-shadow:
        0 0 0 3px rgba(36,85,214,.085),
        0 9px 24px rgba(29,55,100,.08) !important;
}

.makerx-connect .mx-header-actions a,
.makerx-connect .mx-header-actions button {
    position: relative;
    transition:
        transform .18s cubic-bezier(.2,.8,.2,1),
        background-color .18s ease,
        box-shadow .18s ease !important;
}

.makerx-connect .mx-header-actions a:hover,
.makerx-connect .mx-header-actions button:hover {
    transform: translateY(-2px) scale(1.06);
    background: #f4f7ff !important;
    box-shadow: 0 6px 13px rgba(31,65,140,.10);
}

/* ---------------------------------------------------------
   2. MENU — resposta rapida, estilo marketplace
   --------------------------------------------------------- */

.makerx-connect .mx-static-nav-inner > a {
    position: relative !important;
    transition:
        transform .2s cubic-bezier(.2,.8,.2,1),
        color .2s ease,
        background-color .2s ease !important;
}

.makerx-connect .mx-static-nav-inner > a:not(.mx-nav-offers)::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    border-radius: 20px 20px 0 0;
    background: var(--mx-v15-blue);
    transform: translateX(-50%);
    transition: width .22s cubic-bezier(.2,.8,.2,1);
}

.makerx-connect .mx-static-nav-inner > a:hover {
    color: var(--mx-v15-blue-deep) !important;
    transform: translateY(-1px);
}

.makerx-connect .mx-static-nav-inner > a:hover::before {
    width: calc(100% - 24px);
}

.makerx-connect .mx-static-nav-inner > a svg {
    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        stroke .2s ease !important;
}

.makerx-connect .mx-static-nav-inner > a:hover svg {
    transform: translateY(-1px) scale(1.12);
}

.makerx-connect .mx-nav-offers {
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .2s cubic-bezier(.2,.8,.2,1),
        box-shadow .2s ease,
        filter .2s ease !important;
}

.makerx-connect .mx-nav-offers::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -100%;
    bottom: -100%;
    left: -30%;
    width: 18%;
    background: rgba(255,255,255,.58);
    transform: skewX(-20deg);
    transition: left .52s ease;
}

.makerx-connect .mx-nav-offers:hover {
    transform: translateY(-2px) scale(1.025) !important;
    box-shadow: 0 8px 18px rgba(255,198,41,.28);
    filter: saturate(1.08);
}

.makerx-connect .mx-nav-offers:hover::after {
    left: 120%;
}

/* ---------------------------------------------------------
   3. HERO — profundidade e movimento em camadas
   --------------------------------------------------------- */

.makerx-connect .mx-hero-slider {
    overflow: hidden !important;
    isolation: isolate;
    box-shadow:
        inset 0 0 0 1px rgba(38,75,150,.03);
    transition:
        box-shadow .3s ease,
        transform .3s cubic-bezier(.2,.8,.2,1) !important;
}

.makerx-connect .mx-hero-slider::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at var(--mx-pointer-x, 72%) var(--mx-pointer-y, 45%),
            rgba(255,255,255,.75) 0,
            rgba(255,255,255,.22) 15%,
            transparent 37%
        );
    opacity: .55;
    transition: opacity .25s ease;
}

.makerx-connect .mx-hero-slider::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -45%;
    left: -26%;
    width: 17%;
    height: 190%;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );
    transform: skewX(-18deg);
    opacity: 0;
}

.makerx-connect .mx-hero-slider:hover {
    box-shadow:
        0 17px 38px rgba(25,48,90,.10),
        inset 0 0 0 1px rgba(36,85,214,.06);
}

.makerx-connect .mx-hero-slider:hover::after {
    opacity: 1;
    animation: mxV15HeroSweep .72s ease both;
}

@keyframes mxV15HeroSweep {
    from {
        left: -26%;
    }

    to {
        left: 120%;
    }
}

.makerx-connect .mx-hero-copy {
    position: relative;
    z-index: 5;
}

.makerx-connect .mx-hero-art {
    z-index: 4;
    transform:
        translate3d(
            var(--mx-shift-x, 0px),
            var(--mx-shift-y, 0px),
            0
        ) !important;
    transition:
        transform .22s cubic-bezier(.2,.8,.2,1) !important;
}

.makerx-connect .mx-hero-kicker {
    transition:
        letter-spacing .25s ease,
        color .25s ease;
}

.makerx-connect .mx-hero-slider:hover .mx-hero-kicker {
    letter-spacing: .025em;
    color: var(--mx-v15-blue-deep);
}

/* Desenhos do hero com movimento independente */

@keyframes mxV15FloatA {
    0%,100% {
        transform: rotate(-5deg) translate3d(0,0,0);
    }
    50% {
        transform: rotate(-3.8deg) translate3d(0,-7px,0);
    }
}

@keyframes mxV15FloatB {
    0%,100% {
        transform: rotate(5deg) translate3d(0,0,0);
    }
    50% {
        transform: rotate(3.8deg) translate3d(0,6px,0);
    }
}

@keyframes mxV15FloatRobot {
    0%,100% {
        transform: translate3d(0,0,0);
        filter: drop-shadow(0 9px 12px rgba(20,55,120,.10));
    }
    50% {
        transform: translate3d(0,-6px,0);
        filter: drop-shadow(0 15px 16px rgba(20,55,120,.16));
    }
}

@keyframes mxV15XGlow {
    0%,100% {
        filter: drop-shadow(0 0 0 rgba(255,198,41,0));
    }
    50% {
        filter: drop-shadow(0 7px 11px rgba(255,198,41,.22));
    }
}

.makerx-connect .mx-board-one {
    animation: mxV15FloatA 4.5s ease-in-out infinite !important;
}

.makerx-connect .mx-board-two {
    animation: mxV15FloatB 5.1s ease-in-out infinite !important;
}

.makerx-connect .mx-robot-card {
    animation: mxV15FloatRobot 4.2s ease-in-out infinite !important;
}

.makerx-connect .mx-x-mark {
    animation: mxV15XGlow 3.4s ease-in-out infinite;
}

.makerx-connect .mx-hero-button,
.makerx-connect .mx-side-button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .18s cubic-bezier(.2,.8,.2,1),
        box-shadow .18s ease,
        filter .18s ease !important;
}

.makerx-connect .mx-hero-button::after,
.makerx-connect .mx-side-button::after {
    content: "";
    position: absolute;
    top: -80%;
    bottom: -80%;
    left: -35%;
    width: 20%;
    background: rgba(255,255,255,.55);
    transform: skewX(-20deg);
    transition: left .45s ease;
}

.makerx-connect .mx-hero-button:hover,
.makerx-connect .mx-side-button:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 9px 18px rgba(23,55,125,.16);
    filter: saturate(1.06);
}

.makerx-connect .mx-hero-button:hover::after,
.makerx-connect .mx-side-button:hover::after {
    left: 120%;
}

/* ---------------------------------------------------------
   4. CATEGORIAS — efeito de profundidade
   --------------------------------------------------------- */

.makerx-connect .mx-category-labels a {
    overflow: hidden;
    transition:
        transform .2s cubic-bezier(.2,.8,.2,1),
        background-color .2s ease,
        box-shadow .2s ease !important;
}

.makerx-connect .mx-category-labels a:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 8px 17px rgba(10,19,35,.16);
}

.makerx-connect .mx-category-visual {
    position: relative;
    isolation: isolate;
    transform:
        perspective(650px)
        rotateX(var(--mx-tilt-x, 0deg))
        rotateY(var(--mx-tilt-y, 0deg));
    transform-style: preserve-3d;
    transition:
        transform .18s cubic-bezier(.2,.8,.2,1),
        box-shadow .22s ease,
        filter .22s ease !important;
}

.makerx-connect .mx-category-visual::after {
    content: "";
    position: absolute;
    z-index: 6;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(
            circle at var(--mx-pointer-x, 50%) var(--mx-pointer-y, 50%),
            rgba(255,255,255,.28),
            transparent 42%
        );
    opacity: 0;
    transition: opacity .18s ease;
}

.makerx-connect .mx-category-visual:hover {
    transform:
        perspective(650px)
        translateY(-5px)
        rotateX(var(--mx-tilt-x, 0deg))
        rotateY(var(--mx-tilt-y, 0deg));
    box-shadow: 0 13px 24px rgba(21,57,135,.17);
    filter: saturate(1.08);
}

.makerx-connect .mx-category-visual:hover::after {
    opacity: 1;
}

.makerx-connect .mx-category-visual strong,
.makerx-connect .mx-category-visual i {
    transform: translateZ(12px);
}

/* ---------------------------------------------------------
   5. PAINEL LATERAL — sem mudar sua altura
   --------------------------------------------------------- */

.makerx-connect .mx-portal-side {
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
    transform:
        perspective(1000px)
        rotateX(var(--mx-tilt-x, 0deg))
        rotateY(var(--mx-tilt-y, 0deg));
    transform-style: preserve-3d;
    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .25s ease !important;
}

.makerx-connect .mx-portal-side::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at var(--mx-pointer-x, 50%) var(--mx-pointer-y, 35%),
            rgba(77,128,255,.18),
            transparent 34%
        );
}

.makerx-connect .mx-portal-side::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: -15%;
    right: -15%;
    top: -30%;
    height: 32%;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(86,138,255,.10),
            transparent
        );
    animation: mxV15SideScan 6.5s linear infinite;
}

@keyframes mxV15SideScan {
    from {
        top: -38%;
    }

    to {
        top: 115%;
    }
}

.makerx-connect .mx-portal-side > * {
    position: relative;
    z-index: 2;
}

.makerx-connect .mx-portal-side:hover {
    box-shadow:
        0 18px 38px rgba(7,24,59,.20),
        inset 0 0 0 1px rgba(104,148,255,.12);
}

.makerx-connect .mx-side-device {
    transform:
        translate3d(
            calc(var(--mx-shift-x, 0px) * .45),
            calc(var(--mx-shift-y, 0px) * .45),
            18px
        );
    transition: transform .2s cubic-bezier(.2,.8,.2,1);
}

/* ---------------------------------------------------------
   6. PRATELEIRAS
   --------------------------------------------------------- */

.makerx-connect .mx-market-shelf {
    border-color: #dfe4eb !important;
    transition:
        box-shadow .25s ease,
        border-color .25s ease,
        transform .25s cubic-bezier(.2,.8,.2,1) !important;
}

.makerx-connect .mx-market-shelf:hover {
    border-color: #cbd6e7 !important;
    box-shadow: var(--mx-v15-shadow) !important;
}

.makerx-connect .mx-market-shelf-head {
    transition: background-color .2s ease;
}

.makerx-connect .mx-market-shelf:hover .mx-market-shelf-head {
    background: #fafcff !important;
}

.makerx-connect .mx-market-shelf-tools a {
    position: relative;
    transition:
        color .18s ease,
        transform .18s ease !important;
}

.makerx-connect .mx-market-shelf-tools a:hover {
    color: var(--mx-v15-blue) !important;
    transform: translateX(-2px);
}

.makerx-connect .mx-market-shelf-tools button {
    transition:
        background-color .16s ease,
        transform .16s cubic-bezier(.2,.8,.2,1),
        box-shadow .16s ease !important;
}

.makerx-connect .mx-market-shelf-tools button:not(:disabled):hover {
    background: var(--mx-v15-blue) !important;
    transform: scale(1.11);
    box-shadow: 0 5px 10px rgba(36,85,214,.19);
}

.makerx-connect .mx-market-shelf-tools button:not(:disabled):active {
    transform: scale(.91);
}

/* ---------------------------------------------------------
   7. PRODUTO — principal ganho visual
   --------------------------------------------------------- */

@media (pointer: fine) {
    .makerx-connect .mx-product-card {
        position: relative !important;
        isolation: isolate;
        overflow: hidden !important;
        transform:
            perspective(850px)
            rotateX(var(--mx-tilt-x, 0deg))
            rotateY(var(--mx-tilt-y, 0deg));
        transform-style: preserve-3d;
        transition:
            transform .17s cubic-bezier(.2,.8,.2,1),
            box-shadow .22s ease,
            border-color .22s ease !important;
    }

    .makerx-connect .mx-product-card::before {
        content: "";
        position: absolute;
        z-index: 8;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background:
            radial-gradient(
                circle at var(--mx-pointer-x, 50%) var(--mx-pointer-y, 50%),
                rgba(255,255,255,.72) 0,
                rgba(255,255,255,.16) 18%,
                transparent 43%
            );
        opacity: 0;
        transition: opacity .18s ease;
    }

    .makerx-connect .mx-product-card:hover {
        transform:
            perspective(850px)
            translateY(-6px)
            rotateX(var(--mx-tilt-x, 0deg))
            rotateY(var(--mx-tilt-y, 0deg)) !important;
        border-color: #bfcee7 !important;
        box-shadow:
            0 18px 32px rgba(22,44,79,.12),
            0 4px 10px rgba(22,44,79,.055) !important;
    }

    .makerx-connect .mx-product-card:hover::before {
        opacity: .42;
    }

    .makerx-connect .mx-product-card .mx-product-media,
    .makerx-connect .mx-product-card .mx-product-image {
        overflow: hidden !important;
    }

    .makerx-connect .mx-product-card img {
        transform:
            translate3d(
                var(--mx-shift-x, 0px),
                var(--mx-shift-y, 0px),
                20px
            )
            scale(1);
        transition:
            transform .28s cubic-bezier(.2,.8,.2,1),
            filter .28s ease !important;
    }

    .makerx-connect .mx-product-card:hover img {
        transform:
            translate3d(
                var(--mx-shift-x, 0px),
                var(--mx-shift-y, 0px),
                20px
            )
            scale(1.065);
        filter:
            saturate(1.06)
            contrast(1.015);
    }

    .makerx-connect .mx-product-info {
        position: relative;
        z-index: 10;
        transform: translateZ(9px);
    }
}

/* preço responde de modo independente */
.makerx-connect .mx-product-price {
    transition:
        transform .2s ease,
        color .2s ease !important;
}

.makerx-connect .mx-product-card:hover .mx-product-price {
    transform: scale(1.025);
    color: var(--mx-v15-blue-deep) !important;
}

/* botão de compra tipo action-chip */
.makerx-connect .mx-buy-button {
    overflow: hidden !important;
    transition:
        transform .17s cubic-bezier(.2,.8,.2,1),
        box-shadow .17s ease,
        filter .17s ease !important;
}

.makerx-connect .mx-buy-button:hover {
    transform: translateY(-2px) scale(1.08) !important;
    box-shadow:
        0 7px 14px rgba(36,85,214,.20) !important;
    filter: brightness(1.04);
}

.makerx-connect .mx-buy-button:active {
    transform: scale(.92) !important;
}

/* ---------------------------------------------------------
   8. BANNER VERTICAL DE ARDUINO
   --------------------------------------------------------- */

.makerx-connect .mx-shelf-promo {
    overflow: hidden !important;
    isolation: isolate;
    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .22s ease,
        filter .22s ease !important;
}

.makerx-connect .mx-shelf-promo::after {
    content: "";
    position: absolute;
    z-index: 7;
    top: -80%;
    bottom: -80%;
    left: -30%;
    width: 20%;
    pointer-events: none;
    background: rgba(255,255,255,.28);
    transform: skewX(-18deg);
}

.makerx-connect .mx-shelf-promo:hover {
    transform: translateY(-4px);
    box-shadow: 0 13px 25px rgba(18,53,128,.18);
    filter: saturate(1.08);
}

.makerx-connect .mx-shelf-promo:hover::after {
    animation: mxV15PromoSweep .7s ease both;
}

@keyframes mxV15PromoSweep {
    from { left: -30%; }
    to { left: 125%; }
}

.makerx-connect .mx-shelf-promo-board {
    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        filter .3s ease !important;
}

.makerx-connect .mx-shelf-promo:hover .mx-shelf-promo-board {
    transform: rotate(-5deg) translateY(-5px) scale(1.025);
    filter: drop-shadow(0 12px 12px rgba(5,20,55,.20));
}

/* ---------------------------------------------------------
   9. CARDS INFORMATIVOS
   --------------------------------------------------------- */

.makerx-connect .mx-market-info-card {
    overflow: hidden !important;
    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .22s ease,
        filter .22s ease !important;
}

.makerx-connect .mx-market-info-card::after {
    content: "";
    position: absolute;
    top: -100%;
    bottom: -100%;
    left: -28%;
    width: 17%;
    background: rgba(255,255,255,.22);
    transform: skewX(-19deg);
}

.makerx-connect .mx-market-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 27px rgba(26,62,145,.17);
    filter: saturate(1.07);
}

.makerx-connect .mx-market-info-card:hover::after {
    animation: mxV15InfoSweep .65s ease both;
}

@keyframes mxV15InfoSweep {
    from { left: -28%; }
    to { left: 122%; }
}

.makerx-connect .mx-info-art {
    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        filter .28s ease !important;
}

.makerx-connect .mx-market-info-card:hover .mx-info-art {
    transform: translateY(-5px) rotate(2deg) scale(1.025);
    filter: drop-shadow(0 9px 10px rgba(8,28,75,.15));
}

/* ---------------------------------------------------------
   10. RODAPE
   --------------------------------------------------------- */

.makerx-connect .mx-footer-column a {
    position: relative;
    transition:
        color .18s ease,
        transform .18s ease !important;
}

.makerx-connect .mx-footer-column a::before {
    content: "›";
    position: absolute;
    left: -10px;
    opacity: 0;
    transition:
        opacity .18s ease,
        transform .18s ease;
}

.makerx-connect .mx-footer-column a:hover {
    color: var(--mx-v15-yellow) !important;
    transform: translateX(8px);
}

.makerx-connect .mx-footer-column a:hover::before {
    opacity: 1;
    transform: translateX(2px);
}

/* ---------------------------------------------------------
   11. ACESSIBILIDADE E PERFORMANCE
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .makerx-connect *,
    .makerx-connect *::before,
    .makerx-connect *::after {
        animation: none !important;
        transition-duration: .001ms !important;
    }

    .makerx-connect .mx-product-card,
    .makerx-connect .mx-category-visual,
    .makerx-connect .mx-portal-side,
    .makerx-connect .mx-hero-art {
        transform: none !important;
    }
}

@media (pointer: coarse) {
    .makerx-connect .mx-product-card,
    .makerx-connect .mx-category-visual,
    .makerx-connect .mx-portal-side {
        transform: none !important;
    }
}

/* =========================================================
   MAKER X CONNECT V17
   VIMEO NO PAINEL LATERAL
   ========================================================= */

/*
 * Mantem exatamente a coluna que ja existia no layout.
 * O proprio aside e a mascara.
 */
.makerx-connect .mx-portal-side.mx-video-side {
    position: relative !important;
    align-self: stretch !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;

    /* Mesmo desenho arredondado do painel atual */
    border-radius: 30px !important;

    background: #061226 !important;

    /*
     * Neutraliza somente o tilt/parallax V15 nesta coluna.
     * O restante dos efeitos da pagina continua funcionando.
     */
    transform: none !important;
    perspective: none !important;
    transform-style: flat !important;

    box-shadow:
        0 10px 28px rgba(13, 31, 65, .12) !important;
}

/* Remove glow/scan do antigo painel azul sobre o video. */
.makerx-connect .mx-portal-side.mx-video-side::before,
.makerx-connect .mx-portal-side.mx-video-side::after {
    display: none !important;
    content: none !important;
}

/*
 * Mascara interna.
 * O overflow hidden corta o Vimeo exatamente no formato do retangulo.
 */
.makerx-connect .mx-vimeo-mask {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;

    overflow: hidden !important;
    border-radius: inherit !important;

    background: #061226 !important;
    isolation: isolate;
}

/*
 * Player preenchendo 100% da mascara.
 * O video "ysgo recorte" foi preparado como conteudo vertical,
 * portanto mantemos o iframe preenchendo integralmente a coluna.
 */
.makerx-connect .mx-vimeo-player {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #061226 !important;

    transform: translateZ(0);
}

/*
 * Remove estilos herdados da antiga regra V14/V15 que aplicava
 * flex/height nos filhos do painel.
 */
.makerx-connect .mx-video-side > .mx-vimeo-mask {
    flex: none !important;
}

/*
 * Hover discreto apenas na mascara.
 * Nao inclina o video e nao muda as dimensoes.
 */
.makerx-connect .mx-video-side {
    transition:
        box-shadow .24s ease,
        filter .24s ease !important;
}

@media (pointer: fine) {
    .makerx-connect .mx-video-side:hover {
        transform: none !important;
        filter: saturate(1.025);
        box-shadow:
            0 17px 35px rgba(13, 31, 65, .18) !important;
    }
}

/*
 * Desktop: acompanha exatamente a altura total do bloco esquerdo.
 */
@media (min-width: 1200px) {
    .makerx-connect .mx-portal {
        align-items: stretch !important;
    }

    .makerx-connect .mx-video-side {
        align-self: stretch !important;
        height: auto !important;
        min-height: 100% !important;
    }

    .makerx-connect .mx-vimeo-mask {
        height: 100% !important;
    }
}

/*
 * Tablet/mobile: vira um player horizontal/mais baixo,
 * evitando uma coluna vertical gigante.
 */
@media (max-width: 1199.98px) {
    .makerx-connect .mx-video-side {
        position: relative !important;
        width: 100% !important;
        min-height: 420px !important;
        height: 420px !important;
    }
}

@media (max-width: 768px) {
    .makerx-connect .mx-video-side {
        min-height: 520px !important;
        height: 520px !important;
        border-radius: 22px !important;
    }
}


/* =========================================================
   MAKER X CONNECT V18
   AJUSTE DE PROPORCAO / VIDEO COVER
   ========================================================= */

/*
 * Objetivo:
 * - preencher 100% do player lateral;
 * - eliminar barras internas;
 * - permitir zoom/crop controlado;
 * - preservar a mascara arredondada.
 */

.makerx-connect .mx-video-side .mx-vimeo-mask {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    border-radius: inherit !important;
    isolation: isolate !important;
    background: #061226 !important;
}

/*
 * DESKTOP:
 * O painel lateral e alto/vertical. Para o Vimeo preencher toda a area,
 * ampliamos o iframe e centralizamos.
 */
@media (min-width: 1200px) {
    .makerx-connect .mx-video-side .mx-vimeo-player {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;

        /*
         * Zoom horizontal para "cover" real dentro do painel vertical.
         * Ajustado para remover sobras e encaixar totalmente.
         */
        width: 235% !important;
        height: 100% !important;
        min-width: 235% !important;
        min-height: 100% !important;

        transform: translate(-50%, -50%) scale(1.04) !important;
        transform-origin: center center !important;

        border: 0 !important;
        display: block !important;
        background: #061226 !important;
    }
}

/*
 * NOTEBOOK/TABLET:
 * reduzimos um pouco o zoom para manter bom enquadramento.
 */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .makerx-connect .mx-video-side .mx-vimeo-player {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;

        width: 140% !important;
        height: 100% !important;
        min-width: 140% !important;
        min-height: 100% !important;

        transform: translate(-50%, -50%) scale(1.03) !important;
        transform-origin: center center !important;

        border: 0 !important;
        display: block !important;
        background: #061226 !important;
    }
}

/*
 * MOBILE:
 * quando o painel vira horizontal/empilhado, o melhor "cover"
 * e manter 100% da largura e ampliar a altura.
 */
@media (max-width: 767.98px) {
    .makerx-connect .mx-video-side .mx-vimeo-player {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;

        width: 100% !important;
        height: 177.78% !important;
        min-width: 100% !important;
        min-height: 177.78% !important;

        transform: translate(-50%, -50%) scale(1.02) !important;
        transform-origin: center center !important;

        border: 0 !important;
        display: block !important;
        background: #061226 !important;
    }
}

/*
 * Mantem a area clicavel e o mask sem vibracao visual.
 */
.makerx-connect .mx-video-side,
.makerx-connect .mx-video-side .mx-vimeo-mask,
.makerx-connect .mx-video-side .mx-vimeo-player {
    will-change: transform !important;
}

/*
 * Sem borda azul extra ou pseudo-camadas sobre o video.
 */
.makerx-connect .mx-video-side::before,
.makerx-connect .mx-video-side::after,
.makerx-connect .mx-video-side .mx-vimeo-mask::before,
.makerx-connect .mx-video-side .mx-vimeo-mask::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   MAKER X CONNECT V20
   IMAGENS FICTICIAS PARA SIMULACAO VISUAL
   ========================================================= */

/* ---------- HERO COM IMAGEM GERADA ---------- */

.makerx-connect .mx-demo-hero-enabled {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #eef3ff !important;
}

.makerx-connect .mx-demo-hero-image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: inherit !important;
    transition:
        transform .55s cubic-bezier(.2,.8,.2,1),
        filter .35s ease !important;
}

.makerx-connect .mx-demo-hero-enabled:hover .mx-demo-hero-image {
    transform: scale(1.018);
    filter: saturate(1.025);
}

/* Esconde os desenhos/textos antigos apenas dentro do hero de demo. */
.makerx-connect .mx-demo-hero-enabled > .mx-hero-copy,
.makerx-connect .mx-demo-hero-enabled > .mx-hero-art,
.makerx-connect .mx-demo-hero-enabled > .mx-hero-dots {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---------- IMAGENS DOS CARDS DE CATEGORIA ---------- */

.makerx-connect .mx-category-visual {
    isolation: isolate !important;
}

.makerx-connect .mx-demo-category-image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: inherit !important;
    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        filter .3s ease !important;
}

.makerx-connect .mx-category-visual:has(.mx-demo-category-image) > strong,
.makerx-connect .mx-category-visual:has(.mx-demo-category-image) > i,
.makerx-connect .mx-category-visual:has(.mx-demo-category-image) > .mx-mini-glow {
    opacity: 0 !important;
}

@media (pointer: fine) {
    .makerx-connect .mx-category-visual:hover .mx-demo-category-image,
    .makerx-connect .mx-category-visual.mx-connect-hover-active .mx-demo-category-image {
        transform: scale(1.07);
        filter: saturate(1.07) contrast(1.02);
    }
}

/* ---------- SECAO DE PRODUTOS FICTICIOS ---------- */

.makerx-connect .mx-demo-products-v20 {
    width: min(1440px, calc(100% - 88px));
    margin: 34px auto 22px;
}

.makerx-connect .mx-demo-section-head {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
}

.makerx-connect .mx-demo-kicker {
    display: inline-block;
    margin-bottom: 3px;
    color: #4774f3;
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .14em;
}

.makerx-connect .mx-demo-section-head h2 {
    margin: 0;
    color: #111827;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.025em;
}

.makerx-connect .mx-demo-note {
    color: #8a93a3;
    font-size: 10px;
}

.makerx-connect .mx-demo-product-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.makerx-connect .mx-demo-product-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e0e4eb;
    border-radius: 14px;
    background: #fff;
    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        border-color .22s ease,
        box-shadow .22s ease;
}

.makerx-connect .mx-demo-product-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f7fb;
}

.makerx-connect .mx-demo-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .32s cubic-bezier(.2,.8,.2,1),
        filter .32s ease;
}

.makerx-connect .mx-demo-badge {
    position: absolute;
    z-index: 3;
    top: 9px;
    left: 9px;
    padding: 5px 7px;
    border-radius: 6px;
    background: #ffc92b;
    color: #0a1732;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .04em;
}

.makerx-connect .mx-demo-product-content {
    padding: 11px 11px 12px;
}

.makerx-connect .mx-demo-product-content small {
    display: block;
    margin-bottom: 5px;
    color: #98a0ae;
    font-size: 9px;
}

.makerx-connect .mx-demo-product-content h3 {
    min-height: 38px;
    margin: 0 0 10px;
    color: #161b26;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 750;
}

.makerx-connect .mx-demo-price {
    min-height: 42px;
    padding-top: 8px;
    border-top: 1px solid #eceef2;
}

.makerx-connect .mx-demo-price strong,
.makerx-connect .mx-demo-price span {
    display: block;
}

.makerx-connect .mx-demo-price strong {
    color: #15499a;
    font-size: 15px;
    font-weight: 900;
}

.makerx-connect .mx-demo-price span {
    margin-top: 2px;
    color: #8b93a0;
    font-size: 8px;
}

.makerx-connect .mx-demo-product-content button {
    width: 100%;
    min-height: 35px;
    margin-top: 9px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: #4774f3;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    cursor: default;
    transition:
        transform .17s ease,
        background-color .17s ease,
        box-shadow .17s ease;
}

@media (pointer: fine) {
    .makerx-connect .mx-demo-product-card:hover {
        transform: translateY(-5px);
        border-color: #c8d3e5;
        box-shadow: 0 14px 28px rgba(23,43,76,.10);
    }

    .makerx-connect .mx-demo-product-card:hover img {
        transform: scale(1.055);
        filter: saturate(1.045);
    }

    .makerx-connect .mx-demo-product-content button:hover {
        background: #2455d6;
        transform: translateY(-1px);
        box-shadow: 0 7px 13px rgba(36,85,214,.17);
    }
}

/* ---------- QUATRO BANNERS PROMOCIONAIS ---------- */

.makerx-connect .mx-demo-promo-grid {
    width: min(1440px, calc(100% - 88px));
    margin: 28px auto 28px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.makerx-connect .mx-demo-promo-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 15px;
    background: #0d2d70;
    box-shadow: 0 5px 15px rgba(23,43,76,.06);
    transition:
        transform .23s cubic-bezier(.2,.8,.2,1),
        box-shadow .23s ease;
}

.makerx-connect .mx-demo-promo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .34s cubic-bezier(.2,.8,.2,1),
        filter .3s ease;
}

@media (pointer: fine) {
    .makerx-connect .mx-demo-promo-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 30px rgba(20,47,108,.16);
    }

    .makerx-connect .mx-demo-promo-card:hover img {
        transform: scale(1.045);
        filter: saturate(1.04);
    }
}

/* ---------- RESPONSIVO ---------- */

@media (max-width: 1279px) {
    .makerx-connect .mx-demo-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .makerx-connect .mx-demo-promo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .makerx-connect .mx-demo-products-v20,
    .makerx-connect .mx-demo-promo-grid {
        width: calc(100% - 32px);
    }
}

@media (max-width: 640px) {
    .makerx-connect .mx-demo-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .makerx-connect .mx-demo-promo-grid {
        grid-template-columns: 1fr;
    }

    .makerx-connect .mx-demo-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .makerx-connect .mx-demo-hero-enabled {
        min-height: 360px !important;
    }

    .makerx-connect .mx-demo-hero-image {
        object-position: 53% center !important;
    }
}

/* =========================================================
   MAKER X V21
   mx-topbar-inner removido
   ========================================================= */

.makerx-connect .mx-topbar-inner {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Se o pai mx-topbar permanecer no DOM vazio, nao ocupa espaco. */
.makerx-connect .mx-topbar:empty {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove a propria barra superior caso ainda exista como wrapper. */
.makerx-connect .mx-topbar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}


/* =========================================================
   MAKER X CONNECT V22
   REMOVE CATEGORIAS PRETAS + EXPANDE HERO + CONTROLE DE SOM
   ========================================================= */

.makerx-connect .mx-category-labels {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/*
 * A fileira preta ocupava aproximadamente 58px.
 * Transferimos essa altura para o banner.
 */
@media (min-width: 1200px) {
    .makerx-connect .mx-hero-slider,
    .makerx-connect .mx-demo-hero-enabled {
        height: 453px !important;
        min-height: 453px !important;
        max-height: 453px !important;
    }

    .makerx-connect .mx-demo-hero-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .makerx-connect .mx-category-visuals {
        margin-top: 0 !important;
    }
}

@media (min-width: 769px) and (max-width: 1199.98px) {
    .makerx-connect .mx-hero-slider,
    .makerx-connect .mx-demo-hero-enabled {
        min-height: 430px !important;
    }
}

/* ---------- SOM DO VIMEO ---------- */

.makerx-connect .mx-video-side {
    position: relative !important;
}

.makerx-connect .mx-video-sound-toggle {
    position: absolute !important;
    z-index: 50 !important;
    left: 50% !important;
    bottom: 18px !important;

    min-width: 132px !important;
    height: 40px !important;
    padding: 0 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    transform: translateX(-50%) !important;

    border: 1px solid rgba(255,255,255,.38) !important;
    border-radius: 999px !important;

    background: rgba(5,18,42,.76) !important;
    color: #fff !important;

    backdrop-filter: blur(10px) saturate(135%);
    -webkit-backdrop-filter: blur(10px) saturate(135%);

    box-shadow:
        0 8px 22px rgba(5,18,42,.25),
        inset 0 1px 0 rgba(255,255,255,.14) !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    cursor: pointer !important;

    transition:
        transform .18s cubic-bezier(.2,.8,.2,1),
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
}

.makerx-connect .mx-video-sound-toggle:hover {
    transform: translateX(-50%) translateY(-2px) scale(1.025) !important;
    background: rgba(20,63,160,.90) !important;
    border-color: rgba(255,255,255,.58) !important;
    box-shadow:
        0 11px 25px rgba(5,18,42,.30),
        0 0 0 3px rgba(71,116,243,.14) !important;
}

.makerx-connect .mx-video-sound-toggle:active {
    transform: translateX(-50%) scale(.97) !important;
}

.makerx-connect .mx-video-sound-toggle.is-sound-on {
    background: rgba(255,198,41,.96) !important;
    border-color: rgba(255,214,93,.98) !important;
    color: #071a3b !important;
}

.makerx-connect .mx-sound-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
}

.makerx-connect .mx-sound-icon svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.makerx-connect .mx-sound-wave,
.makerx-connect .mx-sound-muted {
    fill: none !important;
}

.makerx-connect .mx-video-sound-toggle.is-sound-on .mx-sound-muted {
    display: none !important;
}

.makerx-connect .mx-video-sound-toggle:not(.is-sound-on) .mx-sound-wave {
    display: none !important;
}

@media (max-width: 768px) {
    .makerx-connect .mx-video-sound-toggle {
        bottom: 12px !important;
        min-width: 118px !important;
        height: 38px !important;
        padding: 0 12px !important;
        font-size: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .makerx-connect .mx-video-sound-toggle {
        transition-duration: .001ms !important;
    }
}

/* =========================================================
   MAKER X V22.1
   CORRECAO DO BOTAO DE SOM
   ========================================================= */

/*
 * IMPORTANTE:
 * regras antigas usam:
 * .mx-portal-side > * { height:100%; min-height:100%; flex:1 }
 *
 * O seletor abaixo neutraliza isso especificamente no botão.
 */
.makerx-connect
.mx-portal-side.mx-video-side
> .mx-video-sound-toggle.mx-video-sound-toggle-compact {
    all: unset !important;

    position: absolute !important;
    z-index: 100 !important;

    right: 12px !important;
    bottom: 12px !important;
    left: auto !important;
    top: auto !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 34px !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 1px solid rgba(255,255,255,.42) !important;
    border-radius: 50% !important;

    background: rgba(5,18,42,.76) !important;
    color: #fff !important;

    box-shadow:
        0 5px 14px rgba(5,18,42,.26),
        inset 0 1px 0 rgba(255,255,255,.12) !important;

    -webkit-backdrop-filter: blur(8px) saturate(135%);
    backdrop-filter: blur(8px) saturate(135%);

    cursor: pointer !important;

    transform: none !important;

    transition:
        transform .16s ease,
        background-color .16s ease,
        border-color .16s ease,
        box-shadow .16s ease !important;
}

.makerx-connect
.mx-video-sound-toggle-compact
svg {
    display: block !important;

    width: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;

    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;

    overflow: visible !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.makerx-connect
.mx-video-sound-toggle-compact
.mx-speaker-fill {
    fill: currentColor !important;
    stroke: none !important;
}

.makerx-connect
.mx-video-sound-toggle-compact
.mx-speaker-wave {
    display: none !important;
}

.makerx-connect
.mx-video-sound-toggle-compact
.mx-speaker-x {
    display: block !important;
}

.makerx-connect
.mx-video-sound-toggle-compact.is-sound-on {
    background: #ffc629 !important;
    color: #071a3b !important;
    border-color: rgba(255,218,102,.98) !important;

    box-shadow:
        0 6px 16px rgba(255,198,41,.30) !important;
}

.makerx-connect
.mx-video-sound-toggle-compact.is-sound-on
.mx-speaker-wave {
    display: block !important;
}

.makerx-connect
.mx-video-sound-toggle-compact.is-sound-on
.mx-speaker-x {
    display: none !important;
}

@media (pointer: fine) {
    .makerx-connect
    .mx-portal-side.mx-video-side
    > .mx-video-sound-toggle.mx-video-sound-toggle-compact:hover {
        transform: translateY(-1px) scale(1.06) !important;
        background: rgba(30,75,180,.92) !important;
        border-color: rgba(255,255,255,.70) !important;
    }

    .makerx-connect
    .mx-portal-side.mx-video-side
    > .mx-video-sound-toggle.mx-video-sound-toggle-compact.is-sound-on:hover {
        background: #ffd24d !important;
    }
}

.makerx-connect
.mx-video-sound-toggle-compact:active {
    transform: scale(.92) !important;
}

.makerx-connect
.mx-video-sound-toggle-compact.is-busy {
    opacity: .65 !important;
    cursor: wait !important;
}

.makerx-connect
.mx-video-sound-toggle-compact.is-api-error {
    opacity: .45 !important;
}

.makerx-connect .mx-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 640px) {
    .makerx-connect
    .mx-portal-side.mx-video-side
    > .mx-video-sound-toggle.mx-video-sound-toggle-compact {
        right: 10px !important;
        bottom: 10px !important;

        flex-basis: 32px !important;

        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;

        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }
}


/* =========================================================
   MAKER X CONNECT V20
   IMAGENS FICTICIAS PARA SIMULACAO VISUAL
   ========================================================= */

/* ---------- HERO COM IMAGEM GERADA ---------- */

.makerx-connect .mx-demo-hero-enabled {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #eef3ff !important;
}

.makerx-connect .mx-demo-hero-image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: inherit !important;
    transition:
        transform .55s cubic-bezier(.2,.8,.2,1),
        filter .35s ease !important;
}

.makerx-connect .mx-demo-hero-enabled:hover .mx-demo-hero-image {
    transform: scale(1.018);
    filter: saturate(1.025);
}

/* Esconde os desenhos/textos antigos apenas dentro do hero de demo. */
.makerx-connect .mx-demo-hero-enabled > .mx-hero-copy,
.makerx-connect .mx-demo-hero-enabled > .mx-hero-art,
.makerx-connect .mx-demo-hero-enabled > .mx-hero-dots {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---------- IMAGENS DOS CARDS DE CATEGORIA ---------- */

.makerx-connect .mx-category-visual {
    isolation: isolate !important;
}

.makerx-connect .mx-demo-category-image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: inherit !important;
    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        filter .3s ease !important;
}

.makerx-connect .mx-category-visual:has(.mx-demo-category-image) > strong,
.makerx-connect .mx-category-visual:has(.mx-demo-category-image) > i,
.makerx-connect .mx-category-visual:has(.mx-demo-category-image) > .mx-mini-glow {
    opacity: 0 !important;
}

@media (pointer: fine) {
    .makerx-connect .mx-category-visual:hover .mx-demo-category-image,
    .makerx-connect .mx-category-visual.mx-connect-hover-active .mx-demo-category-image {
        transform: scale(1.07);
        filter: saturate(1.07) contrast(1.02);
    }
}

/* ---------- SECAO DE PRODUTOS FICTICIOS ---------- */

.makerx-connect .mx-demo-products-v20 {
    width: min(1440px, calc(100% - 88px));
    margin: 34px auto 22px;
}

.makerx-connect .mx-demo-section-head {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
}

.makerx-connect .mx-demo-kicker {
    display: inline-block;
    margin-bottom: 3px;
    color: #4774f3;
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .14em;
}

.makerx-connect .mx-demo-section-head h2 {
    margin: 0;
    color: #111827;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.025em;
}

.makerx-connect .mx-demo-note {
    color: #8a93a3;
    font-size: 10px;
}

.makerx-connect .mx-demo-product-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.makerx-connect .mx-demo-product-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e0e4eb;
    border-radius: 14px;
    background: #fff;
    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        border-color .22s ease,
        box-shadow .22s ease;
}

.makerx-connect .mx-demo-product-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f7fb;
}

.makerx-connect .mx-demo-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .32s cubic-bezier(.2,.8,.2,1),
        filter .32s ease;
}

.makerx-connect .mx-demo-badge {
    position: absolute;
    z-index: 3;
    top: 9px;
    left: 9px;
    padding: 5px 7px;
    border-radius: 6px;
    background: #ffc92b;
    color: #0a1732;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .04em;
}

.makerx-connect .mx-demo-product-content {
    padding: 11px 11px 12px;
}

.makerx-connect .mx-demo-product-content small {
    display: block;
    margin-bottom: 5px;
    color: #98a0ae;
    font-size: 9px;
}

.makerx-connect .mx-demo-product-content h3 {
    min-height: 38px;
    margin: 0 0 10px;
    color: #161b26;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 750;
}

.makerx-connect .mx-demo-price {
    min-height: 42px;
    padding-top: 8px;
    border-top: 1px solid #eceef2;
}

.makerx-connect .mx-demo-price strong,
.makerx-connect .mx-demo-price span {
    display: block;
}

.makerx-connect .mx-demo-price strong {
    color: #15499a;
    font-size: 15px;
    font-weight: 900;
}

.makerx-connect .mx-demo-price span {
    margin-top: 2px;
    color: #8b93a0;
    font-size: 8px;
}

.makerx-connect .mx-demo-product-content button {
    width: 100%;
    min-height: 35px;
    margin-top: 9px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: #4774f3;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    cursor: default;
    transition:
        transform .17s ease,
        background-color .17s ease,
        box-shadow .17s ease;
}

@media (pointer: fine) {
    .makerx-connect .mx-demo-product-card:hover {
        transform: translateY(-5px);
        border-color: #c8d3e5;
        box-shadow: 0 14px 28px rgba(23,43,76,.10);
    }

    .makerx-connect .mx-demo-product-card:hover img {
        transform: scale(1.055);
        filter: saturate(1.045);
    }

    .makerx-connect .mx-demo-product-content button:hover {
        background: #2455d6;
        transform: translateY(-1px);
        box-shadow: 0 7px 13px rgba(36,85,214,.17);
    }
}

/* ---------- QUATRO BANNERS PROMOCIONAIS ---------- */

.makerx-connect .mx-demo-promo-grid {
    width: min(1440px, calc(100% - 88px));
    margin: 28px auto 28px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.makerx-connect .mx-demo-promo-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 15px;
    background: #0d2d70;
    box-shadow: 0 5px 15px rgba(23,43,76,.06);
    transition:
        transform .23s cubic-bezier(.2,.8,.2,1),
        box-shadow .23s ease;
}

.makerx-connect .mx-demo-promo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .34s cubic-bezier(.2,.8,.2,1),
        filter .3s ease;
}

@media (pointer: fine) {
    .makerx-connect .mx-demo-promo-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 30px rgba(20,47,108,.16);
    }

    .makerx-connect .mx-demo-promo-card:hover img {
        transform: scale(1.045);
        filter: saturate(1.04);
    }
}

/* ---------- RESPONSIVO ---------- */

@media (max-width: 1279px) {
    .makerx-connect .mx-demo-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .makerx-connect .mx-demo-promo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .makerx-connect .mx-demo-products-v20,
    .makerx-connect .mx-demo-promo-grid {
        width: calc(100% - 32px);
    }
}

@media (max-width: 640px) {
    .makerx-connect .mx-demo-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .makerx-connect .mx-demo-promo-grid {
        grid-template-columns: 1fr;
    }

    .makerx-connect .mx-demo-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .makerx-connect .mx-demo-hero-enabled {
        min-height: 360px !important;
    }

    .makerx-connect .mx-demo-hero-image {
        object-position: 53% center !important;
    }
}