/* ==================================================================
   Ajustes do clone Mobbie

   Carregado por último em todas as páginas, depois dos CSS herdados
   do Elementor. É aqui que vão as sobrescritas: não edite main.css,
   item.css nem os bundles, que vieram do WordPress original.
   ================================================================== */

/* ------------------------------------------------------------------
   Tipografia: Poppins
   Arquivos locais em public/fonts, nada é buscado no Google.
   O bloco latin-ext cobre os acentos do português.
   ------------------------------------------------------------------ */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-300-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-300-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-500-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-700-latin.woff2') format('woff2');
}

/* O site herdou Montserrat em ~200 regras do Elementor, várias mais
   específicas que `body`, daí o !important. A lista é explícita de
   propósito: um seletor universal quebraria Font Awesome e eicons,
   que dependem da própria font-family para desenhar os ícones. */
html body,
body a,
body span,
body li,
body strong,
body button,
body input,
body select,
body textarea,
body h1, body h2, body h3, body h4, body h5, body h6,
body p,
body .elementor-widget-text-editor,
body .elementor-heading-title,
body .elementor-button,
body .elementor-button-text,
body .elementor-nav-menu .elementor-item,
body .elementor-nav-menu .elementor-sub-item,
body .elementor-icon-list-text,
body .masonryPostGrid,
body .masonryPostGridItemTitle,
body .masonryPostGridItemText,
body .masonryPostGridItemButton,
body .ue_taxonomy_item,
body .ue_taxonomy_item_title,
body .filter-button {
    font-family: 'Poppins', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Fontes de ícone não podem virar Poppins, senão o glifo some.
   `revert` não resolve aqui (o !important acima venceria), então a
   família é declarada explicitamente. */
body .fa,
body .fas,
body .fa-solid,
body .elementor-icon i.fa,
body .elementor-icon i.fas {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome !important;
    font-weight: 900 !important;
}

body .far,
body .fa-regular {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome !important;
    font-weight: 400 !important;
}

body .fab,
body .fa-brands {
    font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands' !important;
    font-weight: 400 !important;
}

body [class^="eicon"],
body [class*=" eicon"] {
    font-family: eicons !important;
}

/* ------------------------------------------------------------------
   Gradiente da marca
   Em texto o gradiente é recortado pelas letras (background-clip).
   Em botão isso apagaria o preenchimento e deixaria o rótulo
   ilegível, então ali o gradiente vai no fundo e o texto fica branco.
   ------------------------------------------------------------------ */
.highlight-gradient {
    background: linear-gradient(90deg, #13e0f4, #1e9cd7, #005b97);
    background-size: 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/* textos que antes eram azul sólido */
.elementor-115 .elementor-widget-text-editor a,
.elementor-115 .elementor-icon-list-item a:hover,
.elementor-widget-text-editor a:not(.elementor-button),
.masonryPostGridItemTitle a,
a.texto-destaque {
    background: linear-gradient(90deg, #13e0f4, #1e9cd7, #005b97);
    background-size: 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent !important;
    transition: filter .2s ease;
}

.elementor-115 .elementor-widget-text-editor a:hover,
.elementor-widget-text-editor a:not(.elementor-button):hover {
    filter: brightness(1.15) saturate(1.2);
    text-decoration: underline;
    text-decoration-color: #1e9cd7;
}

/* fundos que antes eram azul sólido */
.elementor-button,
a.elementor-button,
.elementor-button-link,
.ue_taxonomy_item.filtro-ativo,
.ue_taxonomy_item.uc-selected,
.filter-button,
.elementor-view-stacked .elementor-icon {
    background: linear-gradient(90deg, #13e0f4, #1e9cd7, #005b97) !important;
    background-size: 140% 100%;
    color: #fff !important;
}

.elementor-button .elementor-button-text,
.elementor-button-link .elementor-button-text,
.filter-button,
.ue_taxonomy_item.filtro-ativo .ue_taxonomy_item_title {
    color: #fff !important;
}

/* ------------------------------------------------------------------
   Botões de ação
   O original tinha três variações de padding/raio/peso para o mesmo
   botão. Aqui todos seguem a mesma medida. Nada de background é
   redefinido: o hover usa brightness, que preserva cor sólida ou
   gradiente, seja qual for.
   ------------------------------------------------------------------ */
.elementor-button,
a.elementor-button,
.elementor-button-link {
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    line-height: 1.2 !important;
    transition: filter .2s ease, transform .2s ease, box-shadow .2s ease !important;
    will-change: transform;
}

.elementor-button:hover,
a.elementor-button:hover,
.elementor-button-link:hover {
    filter: brightness(.93);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(1, 22, 64, .18);
}

.elementor-button:active,
a.elementor-button:active,
.elementor-button-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(1, 22, 64, .16);
}

.elementor-button:focus-visible,
a.elementor-button:focus-visible {
    outline: 2px solid #011640;
    outline-offset: 3px;
}

/* o botão do cabeçalho é menor que o do corpo da página */
.elementor-location-header .elementor-button,
.elementor-22540 .elementor-button,
.elementor-105 .elementor-button {
    padding: 12px 26px !important;
    font-size: 15px !important;
}

/* ------------------------------------------------------------------
   Cabeçalho
   Layout: menu à esquerda, logo ao centro, botão à direita, sobre
   fundo branco. No HTML do Elementor o menu e o botão vivem dentro de
   um mesmo container e a logo é irmã dele, então a logo é centralizada
   por posicionamento em vez de `order` (que não alcançaria os netos).
   ------------------------------------------------------------------ */
.elementor-location-header,
.elementor-22540,
.elementor-105 {
    background-color: #fff !important;
    border-bottom: 1px solid #eef1f5;
}

/* faixa do cabeçalho vira a referência para centralizar a logo */
.elementor-22540 .elementor-element-a049eda,
.elementor-105 .elementor-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 78px;
}

/* menu e botão ocupam a largura e se afastam para as pontas */
.elementor-22540 .elementor-element-31ca7cb {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px;
}

/* logo centralizada sobre a faixa */
.elementor-22540 .elementor-element-58ea1f1 {
    position: absolute !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    pointer-events: auto;
    z-index: 2;
}

/* --- páginas de campanha: mesmo desenho do cabeçalho do index ---
   Aqui a logo mora numa coluna de largura zero e o menu numa seção
   aninhada. A referência do posicionamento é o container externo:
   a coluna da logo precisa ser `static`, senão o `left: 50%` da logo
   se mede contra uma caixa de 0px e ela encosta na esquerda. */
/* a faixa das páginas vinha com 148px de altura e um container mais
   estreito; aqui fica igual à do index (93px, largura cheia) */
.elementor-105 .elementor-element-325e00ca {
    padding: 0 16px !important;
}

.elementor-105 .elementor-element-325e00ca > .elementor-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 93px;
    max-width: none !important;
    width: 100% !important;
}

.elementor-105 .elementor-element-8ef80a5 {
    padding: 0 !important;
    margin: 0 !important;
}

.elementor-105 .elementor-element-8ef80a5 > .elementor-container {
    max-width: none !important;
}

.elementor-105 .elementor-element-58b47ab > .elementor-widget-wrap {
    padding: 0 !important;
}

.elementor-105 .elementor-element-6616e570,
.elementor-105 .elementor-element-6616e570 > .elementor-widget-wrap {
    position: static !important;
    width: auto !important;
    flex: 0 0 auto;
}

.elementor-105 .elementor-element-304be13d {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: center !important;
    z-index: 2;
}

/* coluna do menu ocupa a faixa e afasta menu e botão */
.elementor-105 .elementor-element-58b47ab,
.elementor-105 .elementor-element-58b47ab > .elementor-widget-wrap {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto;
}

.elementor-105 .elementor-element-8ef80a5 > .elementor-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 20px;
}

/* a coluna do menu era col-50 e parava no meio da faixa: sobrava o
   espaço da coluna do antigo botão de login, já removido */
.elementor-105 .elementor-element-6428534,
.elementor-105 .elementor-element-6428534 > .elementor-widget-wrap {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
}

.elementor-105 .elementor-element-6c8fc66e {
    order: 1;
    flex: 0 1 auto;
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
}

/* O container interno das páginas para ~110px antes da borda, então o
   botão é ancorado na faixa do cabeçalho, como a logo. Para isso as
   caixas intermediárias precisam ser `static`: qualquer uma delas em
   `relative` viraria a âncora e o botão pararia antes. */
.elementor-105 .elementor-element-58b47ab,
.elementor-105 .elementor-element-58b47ab > .elementor-widget-wrap,
.elementor-105 .elementor-element-8ef80a5,
.elementor-105 .elementor-element-8ef80a5 > .elementor-container,
.elementor-105 .elementor-element-6428534,
.elementor-105 .elementor-element-6428534 > .elementor-widget-wrap {
    position: static !important;
}

.elementor-105 .elementor-element-cta-header {
    position: absolute !important;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: auto !important;
    margin: 0 !important;
    z-index: 2;
}

/* o menu encostava 10px mais à direita que no index */
.elementor-105 .elementor-element-6428534,
.elementor-105 .elementor-element-6428534 > .elementor-widget-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.elementor-22540 .elementor-element-58ea1f1 img,
.elementor-105 .elementor-element-304be13d img {
    width: 160px !important;
    max-width: none !important;
    height: auto !important;
}

/* itens do menu */
.elementor-location-header .elementor-nav-menu .elementor-item,
.elementor-22540 .elementor-nav-menu .elementor-item,
.elementor-105 .elementor-nav-menu .elementor-item {
    color: #011640 !important;
    fill: #011640 !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    padding: 8px 16px !important;
    transition: color .2s ease;
}

.elementor-location-header .elementor-nav-menu .elementor-item:hover,
.elementor-location-header .elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-22540 .elementor-nav-menu .elementor-item:hover,
.elementor-22540 .elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-105 .elementor-nav-menu .elementor-item:hover,
.elementor-105 .elementor-nav-menu .elementor-item.elementor-item-active {
    color: #1e9cd7 !important;
    fill: #1e9cd7 !important;
}

/* botão do cabeçalho em formato de pílula, com o gradiente da marca */
.elementor-location-header .elementor-button,
.elementor-22540 .elementor-button,
.elementor-105 .elementor-button {
    border-radius: 999px !important;
    padding: 13px 30px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border: 0;
    white-space: nowrap;
}

/* --- cabeçalho no mobile: logo à esquerda, hambúrguer à direita --- */
@media (max-width: 1024px) {
    .elementor-22540 .elementor-element-a049eda,
    .elementor-105 .elementor-container {
        min-height: 64px;
        padding: 8px 16px;
    }

    /* a logo volta ao fluxo: no mobile ela fica à esquerda */
    .elementor-22540 .elementor-element-58ea1f1,
    .elementor-105 .elementor-element-304be13d {
        position: static !important;
        transform: none !important;
        order: 1;
        flex: 0 0 auto;
        text-align: left !important;
    }

    /* nas páginas de campanha o botão do cabeçalho também some no mobile */
    .elementor-105 .elementor-element-cta-header {
        display: none !important;
    }

    .elementor-105 .elementor-container > .elementor-column:last-child,
    .elementor-105 .elementor-container > .elementor-column:last-child > .elementor-widget-wrap {
        width: auto !important;
        justify-content: flex-end !important;
    }

    .elementor-22540 .elementor-element-58ea1f1 img,
    .elementor-105 .elementor-element-304be13d img {
        width: 128px !important;
    }

    /* menu e botão continuam juntos; o botão some e sobra o hambúrguer */
    .elementor-22540 .elementor-element-31ca7cb {
        width: auto !important;
        flex: 0 0 auto;
        order: 2;
        justify-content: flex-end !important;
        gap: 8px;
    }

    .elementor-22540 .elementor-element-3a507b6,
    .elementor-location-header .elementor-widget-button {
        display: none !important;
    }

    /* botão do menu, sobre fundo claro */
    .elementor-menu-toggle {
        background-color: transparent !important;
        border: 1px solid #d8dee7 !important;
        border-radius: 10px !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: #011640 !important;
        transition: background-color .2s ease, border-color .2s ease;
    }

    .elementor-menu-toggle svg,
    .elementor-menu-toggle i {
        fill: #011640 !important;
        color: #011640 !important;
        font-size: 24px;
        width: 24px;
        height: 24px;
    }

    .elementor-menu-toggle:hover,
    .elementor-menu-toggle.elementor-active {
        background-color: #f2f6fa !important;
        border-color: #1e9cd7 !important;
    }

    /* painel que abre no toque */
    .elementor-nav-menu--dropdown {
        background-color: #fff !important;
        border-radius: 0 0 14px 14px;
        box-shadow: 0 20px 44px rgba(1, 22, 64, .16) !important;
        border-top: 1px solid #eef1f5;
        overflow: hidden;
    }

    .elementor-nav-menu--dropdown a,
    .elementor-nav-menu--dropdown .elementor-item,
    .elementor-nav-menu--dropdown .elementor-sub-item {
        color: #011640 !important;
        background-color: transparent !important;
        padding: 16px 22px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        border-bottom: 1px solid #f0f2f6;
    }

    .elementor-nav-menu--dropdown a:hover,
    .elementor-nav-menu--dropdown a.elementor-item-active,
    .elementor-nav-menu--dropdown .elementor-sub-item:hover {
        color: #1e9cd7 !important;
        background-color: #f6fafd !important;
    }

    /* o rodapé empilha */
    .elementor-115 .elementor-inner-section > .elementor-container {
        flex-wrap: wrap !important;
        gap: 22px;
    }
}

/* ------------------------------------------------------------------
   Filtro da galeria (versão estática)
   O original filtrava por AJAX; aqui o estado ativo vem do JS.
   ------------------------------------------------------------------ */
.ue_taxonomy_item {
    cursor: pointer;
    padding: 11px 20px !important;
    border-radius: 8px;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* o hover do tema pintava de azul sólido; aqui usa o mesmo gradiente */
.ue_taxonomy_item:hover,
.elementor-1701 .elementor-element-fc8759a .ue_taxonomy_item:hover {
    background: linear-gradient(90deg, #13e0f4, #1e9cd7, #005b97) !important;
    background-size: 140% 100% !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 178, 253, .3);
}

.ue_taxonomy_item:hover .ue_taxonomy_item_title {
    color: #fff !important;
}

.ue_taxonomy_item.filtro-ativo {
    color: #fff !important;
    background-color: #2cb2fd !important;
    box-shadow: 0 4px 12px rgba(2, 178, 253, .35);
}

.ue_taxonomy_item:focus-visible {
    outline: 2px solid #011640;
    outline-offset: 2px;
}

.ue_taxonomy {
    gap: 10px !important;
    padding: 0 16px 8px;
}

/* O widget do filtro vinha com margin-bottom de ~159px, o que abria um
   vão enorme entre as categorias e o grid. */
.elementor-element-fc8759a > .elementor-widget-container {
    margin-bottom: 32px !important;
}

/* o botão "Filtrar" do mobile acompanha os demais */
.filter-button {
    padding: 11px 20px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: 0;
    cursor: pointer;
    transition: filter .2s ease;
}

.filter-button:hover {
    filter: brightness(.93);
}

/* No desktop as categorias ficam sempre à vista, em linha. Em telas
   menores voltam a ficar atrás do botão "Filtrar". */
@media (min-width: 1025px) {
    #uc_ue_buttons_post_filter_elementor_fc8759a-toggle {
        display: none !important;
    }

    #uc_ue_buttons_post_filter_elementor_fc8759a-container {
        display: block !important;
        position: static;
    }

    #uc_ue_buttons_post_filter_elementor_fc8759a.ue_taxonomy {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center;
    }

    /* o Elementor fixa max-width:27% neste widget (era o dropdown mobile) */
    .elementor-element-fc8759a {
        width: 100% !important;
        max-width: 1140px !important;
        --container-widget-width: 100% !important;
        margin-inline: auto;
    }
}

/* ------------------------------------------------------------------
   Rodapé
   O reset do WordPress pinta todo link de #c36; aqui passa a usar o
   azul da marca. O tema também forçava capitalize nos títulos, o que
   transformava "Termos de uso" em "Termos De Uso".
   ------------------------------------------------------------------ */
.elementor-115 .elementor-heading-title,
.elementor-115 .elementor-widget-text-editor,
.elementor-115 .elementor-icon-list-text {
    text-transform: none !important;
}

.elementor-115 .elementor-widget-text-editor strong {
    display: inline-block;
    margin-block-end: 6px;
    color: #011640;
    font-weight: 600;
    font-size: 15px;
}

.elementor-115 .elementor-widget-text-editor a {
    color: #02b2fd;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s;
}

.elementor-115 .elementor-widget-text-editor a:hover,
.elementor-115 .elementor-widget-text-editor a:focus {
    color: #011640;
    text-decoration: underline;
}

.elementor-115 .elementor-widget-text-editor p {
    margin-block-end: .35rem;
}

/* o e-mail é um icon-list: o marcador do <li> aparecia solto */
.elementor-115 .elementor-icon-list-items,
.elementor-115 .elementor-icon-list-item {
    list-style: none !important;
}

.elementor-115 .elementor-icon-list-items {
    margin: 0;
    padding: 0;
}

.elementor-115 .elementor-icon-list-item a {
    color: #011640;
    transition: color .2s;
}

.elementor-115 .elementor-icon-list-item a:hover {
    color: #02b2fd;
}

/* linha inferior: copyright e links legais */
.elementor-115 .elementor-heading-title {
    line-height: 1.6;
    font-weight: 400;
}

/* os três links legais vinham com cores diferentes entre si */
.elementor-115 .elementor-element-5438b3f .elementor-heading-title,
.elementor-115 .elementor-element-4ef5ea9 .elementor-heading-title,
.elementor-115 .elementor-element-9686147 .elementor-heading-title,
.elementor-115 .elementor-element-5438b3f a,
.elementor-115 .elementor-element-4ef5ea9 a,
.elementor-115 .elementor-element-9686147 a,
.elementor-115 a .elementor-heading-title,
.elementor-115 .elementor-heading-title a {
    color: #606060 !important;
    transition: color .2s;
}

.elementor-115 .elementor-element-5438b3f a:hover,
.elementor-115 .elementor-element-4ef5ea9 a:hover,
.elementor-115 .elementor-element-9686147 a:hover,
.elementor-115 a:hover .elementor-heading-title,
.elementor-115 .elementor-heading-title a:hover {
    color: #02b2fd !important;
}

/* o copyright não é link: fica um tom mais escuro */
.elementor-115 .elementor-element-815a9a6 .elementor-heading-title {
    color: #011640 !important;
}

/* separa o rodapé do conteúdo */
.elementor-115 {
    border-top: 1px solid #e6e9ef;
}

/* A logo do rodapé era maior que a do cabeçalho (267px contra 213px).
   O widget tem max-width em %, e como a coluna está em flex:auto, pai e
   filho encolhiam um ao outro. A medida fica na própria imagem e os
   containers passam a acompanhar. */
.elementor-115 .elementor-element-32d2eca8,
.elementor-115 .elementor-element-32d2eca8 > .elementor-widget-container,
.elementor-115 .elementor-element-32d2eca8 a {
    width: auto !important;
    max-width: none !important;
}

.elementor-115 .elementor-element-32d2eca8 img {
    width: 180px !important;
    max-width: none !important;
    height: auto !important;
}

@media (min-width: 768px) {
    /* colunas distribuídas e alinhadas pelo topo */
    .elementor-115 .elementor-inner-section > .elementor-container {
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
    }

    .elementor-115 .elementor-inner-section > .elementor-container > .elementor-column {
        width: auto;
        flex: 0 1 auto;
    }

    /* A linha do copyright é um container grid com colunas de largura
       fixa: o texto (255px) estourava a célula (210px) e passava por
       cima de "Termos de uso". Com colunas automáticas cada item ocupa
       o que precisa. */
    .elementor-115 .e-con-inner:has(> .elementor-element-815a9a6) {
        grid-template-columns: auto auto auto auto !important;
        justify-content: start;
        column-gap: 36px;
        align-items: center;
    }

    .elementor-115 .elementor-element-815a9a6 .elementor-heading-title {
        white-space: nowrap;
    }

    /* alinha o copyright com o "Soluções" da coluna acima:
       o título da coluna tem 10px de recuo interno */
    .elementor-115 .elementor-element-815a9a6 {
        padding-left: 10px;
    }
}

/* ------------------------------------------------------------------
   Galeria de Formatos
   ------------------------------------------------------------------ */

/* As thumbs desta galeria são capturas do próprio criativo, sem moldura.
   Vários formatos têm fundo branco, então sem contorno o card se dissolve
   no fundo da página. O grid de campanhas não precisa disso porque lá as
   imagens já vinham com fundo do site. */
[data-galeria="formatos"] .masonryPostGridItem {
    border: 1px solid #e4e8ef;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

[data-galeria="formatos"] .ue-item-image-wrap {
    background: #f4f6f9;
}

/* ------------------------------------------------------------------
   Ponte para a galeria de formatos
   ------------------------------------------------------------------ */

/* O container do hero é flex em coluna, então dois widgets de botão soltos
   ficariam um embaixo do outro. Este wrapper os põe lado a lado sem alterar
   a estrutura que o Elementor gerou. */
.mobbie-hero-acoes {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 34px;
    width: 100%;
}

/* no mobile os dois empilham (flex-wrap): aí o espaço vertical pode ser menor */
@media (max-width: 767px) {
    .mobbie-hero-acoes {
        gap: 12px;
    }
}

.mobbie-hero-acoes > .elementor-widget-button {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Botão secundário: o gradiente sai do fundo e vai só para o rótulo, senão
   os dois botões competem. No hover ele assume o gradiente cheio, igual ao
   principal, e o texto volta a ser branco. */
.mobbie-btn-secundario .elementor-button,
.mobbie-btn-secundario a.elementor-button {
    background: #fff !important;
    border: 1.5px solid #cfe3f2 !important;
    padding: 12.5px 30px !important;
    box-shadow: none;
}

.mobbie-btn-secundario .elementor-button .elementor-button-text {
    background: linear-gradient(90deg, #13e0f4, #1e9cd7, #005b97);
    background-size: 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent !important;
}

.mobbie-btn-secundario .elementor-button:hover,
.mobbie-btn-secundario a.elementor-button:hover {
    background: linear-gradient(90deg, #13e0f4, #1e9cd7, #005b97) !important;
    border-color: transparent !important;
    filter: none;
}

.mobbie-btn-secundario .elementor-button:hover .elementor-button-text {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #fff !important;
}

/* Faixa entre o grid e o slogan */
.mobbie-faixa-formatos {
    margin: 4px 0 44px;
}

.mobbie-faixa-formatos__caixa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
    padding: 30px 36px;
    border: 1px solid #e4e8ef;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfdff, #f3f8fc);
}

.mobbie-faixa-formatos__titulo {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    color: #011640;
}

.mobbie-faixa-formatos__texto {
    flex: 1 1 auto;
    min-width: 0;
}

.mobbie-faixa-formatos__desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #4a5568;
}

.mobbie-faixa-formatos__acao .elementor-button {
    white-space: nowrap;
}

@media (max-width: 880px) {
    /* o elementor-container não põe recuo nesta largura, e a caixa encostava
       nas duas bordas da tela */
    .mobbie-faixa-formatos {
        padding: 0 16px;
        margin-bottom: 34px;
    }
    .mobbie-faixa-formatos__caixa {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }
    .mobbie-faixa-formatos__titulo { font-size: 19px; }
    .mobbie-faixa-formatos__acao,
    .mobbie-faixa-formatos__acao .elementor-button { width: 100%; }
    .mobbie-faixa-formatos__acao .elementor-button { text-align: center; }
}

/* ------------------------------------------------------------------
   Demo no celular
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
    /* O #mobileIframe vive na section 7390e6c, marcada com
       elementor-hidden-tablet e elementor-hidden-mobile. Em tela pequena ela
       desaparecia e o que restava na página era a moldura de celular
       decorativa, vazia e branca. Aqui a section volta. */
    .elementor-1898 .elementor-element-7390e6c.elementor-hidden-mobile,
    .elementor-1898 .elementor-element-7390e6c.elementor-hidden-tablet,
    .elementor-1898 .elementor-element-7390e6c {
        display: block !important;
    }

    /* a moldura decorativa sai: quem está no celular não precisa de um mockup
       de celular em volta do banner */
    .elementor-1898 .elementor-element-1cb73f6 {
        display: none !important;
    }

    /* o container do iframe volta ao fluxo. Os valores de origem
       (position:absolute, width:22%, top:31px, left:38.9%) são calibrados para
       a moldura do desktop e em tela pequena colapsavam para 0x0. */
    .elementor-1898 .elementor-element-bf80138 {
        position: static !important;
        width: 100% !important;
        max-width: 340px !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 auto 8px !important;
        z-index: auto !important;
    }

    .elementor-1898 .elementor-element-bf80138 > .elementor-widget-container {
        height: auto !important;
    }

    /* .mob_iframe e .desk_iframe posicionam o iframe por cima da moldura;
       sem moldura ele fica no fluxo. A altura quem define é o
       public/js/demo-mobile.js, que sabe a proporção de cada formato. */
    .elementor-1898 #mobileIframe,
    .elementor-1898 #mobileIframe.mob_iframe,
    .elementor-1898 #mobileIframe.desk_iframe {
        position: static !important;
        width: 100% !important;
        height: auto;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0 auto !important;
        display: block;
        border: 1px solid #e4e8ef;
        border-radius: 12px;
        background: #fff;
    }

    /* mais de um formato na mesma página: destaca o que está no ar */
    .demo-button.demo-button-ativo .elementor-button {
        box-shadow: 0 0 0 3px rgba(2, 178, 253, .28);
    }
}