.elementor-kit-9{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#B38B3D;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =====================================================
   STILL PRIME — HOME 3.2
   Astra + Elementor Pro

   Controles liberados no Elementor:
   - Espaçamento e altura da introdução
   - Altura e largura das imagens dos artigos
   - Enquadramento das imagens
   - Configurações responsivas das imagens

   Fundos da introdução e categorias livres no Elementor.
   Artigos com faixa de fundo em largura total e conteúdo centralizado.
   Categorias com faixa em largura total e conteúdo centralizado.
   Barra lateral: largura, flex e espaçamento editáveis no Elementor.
   Botões dos cartões alinhados na base, independentemente do texto.
   Demais seções preservadas.
   ===================================================== */


/* 1. CONFIGURAÇÕES GERAIS */

.sp21-hero,
.sp21-intro,
.sp21-featured,
.sp21-topics,
.sp21-cta {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}


/* 2. HERO */

.sp21-hero {
    display: block !important;
    background: #0b0c0c !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sp21-hero .elementor-widget-image,
.sp21-hero img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.sp21-hero img {
    height: auto !important;
}


/* =====================================================
   3. INTRODUÇÃO
   Espaçamento e altura controlados pelo Elementor.
   ===================================================== */

.sp21-intro {
    display: flex !important;
    flex-direction: row !important;
    /* Alinhamento e altura definidos pelo Elementor. */
    flex-wrap: nowrap !important;

    /* Fundo controlado em Estilo > Plano de fundo no Elementor. */

    padding-left: max(
        24px,
        calc((100vw - 1280px) / 2)
    ) !important;

    padding-right: max(
        24px,
        calc((100vw - 1280px) / 2)
    ) !important;
    /* Padding vertical, altura e alinhamento ficam no Elementor. */
}


/* TEXTO DA INTRODUÇÃO */

.sp21-intro-copy {
    flex: 0 0 44% !important;
    width: 44% !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    /* Alinhamento vertical definido pelo Elementor. */
}


/* IMAGEM DA INTRODUÇÃO */

.sp21-intro-photo {
    flex: 0 0 56% !important;
    width: 56% !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    /* Alinhamento vertical definido pelo Elementor. */
    overflow: hidden !important;
}

.sp21-intro-photo .elementor-widget-image,
.sp21-intro-photo .elementor-widget-container {
    width: 100% !important;
    min-height: 0 !important;
}

.sp21-intro-photo img {
    display: block;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center center;
}


/* =====================================================
   4. ARTIGOS EM DESTAQUE
   ===================================================== */

.sp21-featured {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;

    /* Espaçamento horizontal configurável no Elementor.
       Não use margem lateral para deslocar a sidebar. */

    /* Mantém os cartões centralizados na largura já aprovada. */
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 40px 24px 28px !important;

    /* O fundo ultrapassa a largura do conteúdo via ::before. */
    position: relative !important;
    isolation: isolate;
    box-sizing: border-box !important;
}

/* Faixa visual até as duas bordas da janela.
   Herda a cor definida em Estilo > Plano de fundo no Elementor. */
.sp21-featured::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: inherit;
    pointer-events: none;
}

/* Conteúdo acima da faixa; a largura da sidebar continua no Elementor. */
.sp21-featured > .sp21-main,
.sp21-featured > .sp21-sidebar {
    position: relative;
    z-index: 1;
    min-width: 0;
    box-sizing: border-box;
}

.sp21-main {
    flex: 1 1 0% !important;
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    max-width: none !important;
    gap: 18px;
}

.sp21-sidebar {
    min-width: 0;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    /* Largura definida no Elementor em px; sem flex-grow. */
}


.sp21-main > .sp21-featured-heading,
.sp21-main > .sp21-cards {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
}

.sp21-featured-heading,
.sp21-topics-heading {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 12px !important;
    width: 100% !important;
}

/* Limita apenas o conteúdo da faixa, não seu fundo. */
.sp21-topics-heading {
    max-width: 1232px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.sp21-featured-heading > .elementor-element,
.sp21-topics-heading > .elementor-element {
    width: auto !important;
    flex: 0 1 auto !important;
}


/* =====================================================
   5. CARTÕES DOS ARTIGOS
   ===================================================== */

.sp21-cards {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 16px !important;
    width: 100% !important;
}

.sp21-card {
    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;

    overflow: hidden !important;

    border: 1px solid #e4e6e8 !important;
    border-radius: 5px !important;

    background: #ffffff !important;
    box-shadow: 0 2px 9px #00000008 !important;
}


/* =====================================================
   6. IMAGENS DOS ARTIGOS

   IMPORTANTE:
   Sem altura, largura ou proporção forçadas na
   imagem. O Elementor controla esses valores.
   ===================================================== */

.sp21-card-image {
    min-width: 0;
    max-width: 100%;
}

.sp21-card-image .elementor-widget-container {
    max-width: 100%;
    margin: 0;
}

/* Preserva os controles do widget Elementor. */

.sp21-card-image img {
    display: block;
    max-width: 100%;
}

/* O ajuste de imagem, a altura e o posicionamento
   devem ser configurados no próprio Elementor. */


/* CORPO DOS CARTÕES */

.sp21-card-body {
    width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 8px !important;
    padding: 14px !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
}

.sp21-card-body .elementor-widget-heading,
.sp21-card-body .elementor-widget-text-editor,
.sp21-card-body .elementor-widget-button {
    width: 100% !important;
}

/* Mantém os botões na mesma altura nos três cartões. */
.sp21-card-body .elementor-widget-button {
    margin-top: auto !important;
}

/* Tipografia dos titulos e categorias liberada no Elementor.
   Removida a regra anterior com font-size e line-height !important.
   Ajuste cada widget em Estilo > Tipografia (desktop/tablet/mobile). */


/* =====================================================
   7. BARRA LATERAL
   ===================================================== */

.sp21-sidebar > .e-con:first-child {
    background: linear-gradient(
        125deg,
        #97732f,
        #bc964a
    ) !important;

    color: #ffffff !important;
    padding: 22px !important;
    border-radius: 6px !important;
}

.sp21-sidebar > .e-con:first-child * {
    color: #ffffff;
}


/* =====================================================
   8. CATEGORIAS
   ===================================================== */

.sp21-topics {
    display: flex !important;
    flex-direction: column !important;

    gap: 16px !important;

    /* A faixa ocupa a largura total do contêiner externo. */
    max-width: none !important;
    margin: 0 !important;
    padding: 14px max(24px, calc((100vw - 1280px) / 2)) 30px !important;
    /* Cor de fundo definida no Elementor, não neste CSS. */

    box-sizing: border-box !important;
}

.sp21-topic-rail {
    max-width: 1232px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;

    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;

    gap: 12px !important;
    width: 100% !important;
}

.sp21-topic-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

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

    gap: 8px !important;
    text-align: center !important;

    padding: 20px 10px !important;

    border: 1px solid #e7e7e7 !important;
    border-radius: 6px !important;

    background: #fafafa !important;
}

.sp21-topic-card .elementor-widget {
    width: 100% !important;
}

.sp21-topic-icon .elementor-icon {
    color: #b38b3d !important;
}

.sp21-topic-card .elementor-button {
    background: transparent !important;
    color: #9b772e !important;

    border: 0 !important;
    padding: 3px !important;

    font-size: 11px !important;
}


/* =====================================================
   9. BANNER INFERIOR
   ===================================================== */

.sp21-cta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 24px !important;

    max-width: 1280px !important;
    margin: 4px auto 45px !important;

    padding: 42px 5% !important;
    min-height: 235px !important;

    border-radius: 8px !important;
    overflow: hidden !important;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.78),
            rgba(0,0,0,.05) 48%,
            rgba(0,0,0,.68)
        ),
        url('https://stillprimemen.com/site/wp-content/themes/stillprime-astra-child/assets/images/cta-landscape-v12.webp')
        center / cover no-repeat !important;
}

.sp21-cta-left {
    flex: 0 1 55% !important;
    width: 55% !important;
    min-width: 0 !important;
}

.sp21-cta-right {
    flex: 0 1 40% !important;
    width: 40% !important;
    min-width: 0 !important;

    align-items: flex-end !important;
    text-align: right !important;
}

.sp21-cta .elementor-heading-title,
.sp21-cta .elementor-widget-text-editor,
.sp21-cta p {
    color: #ffffff !important;
    text-shadow: 0 2px 9px #000a !important;
}


/* =====================================================
   10. TABLET
   ===================================================== */

@media (max-width: 1024px) {

    .sp21-cards {
        gap: 10px !important;
    }

    /* Altura das imagens controlada pelo Elementor. */

    .sp21-topic-rail {
        gap: 8px !important;
    }
}


/* =====================================================
   11. CELULAR
   ===================================================== */

@media (max-width: 767px) {

    /* INTRODUÇÃO */

    .sp21-intro {
        flex-direction: column !important;

        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .sp21-intro-copy,
    .sp21-intro-photo {
        flex: 0 0 auto !important;
        width: 100% !important;
    }

    .sp21-intro-photo img {
        min-height: 0 !important;
    }


    /* ARTIGOS */

    .sp21-featured {
        flex-direction: column !important;
        padding: 30px 18px !important;
    }

    /* Colunas empilhadas no celular; larguras configuráveis
       no Elementor em modo responsivo. */
    .sp21-main,
    .sp21-sidebar {
        min-width: 0;
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    .sp21-cards {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Sem altura forçada nas imagens dos artigos. */




    /* CATEGORIAS */

    .sp21-topics {
        padding: 15px 18px 25px !important;
    }

    .sp21-topic-rail {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;
    }

    


    /* BANNER INFERIOR */

    .sp21-cta {
        margin: 8px 18px 32px !important;
        min-height: 260px !important;

        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: space-between !important;

        padding: 28px !important;
    }

    .sp21-cta-left,
    .sp21-cta-right {
        width: 100% !important;
        flex: 0 0 auto !important;

        text-align: left !important;
        align-items: flex-start !important;
    }
}



/* Center the final three topic cards below the first five. */
@media (min-width: 768px) {
  .sp21-topic-rail > .sp21-topic-card:nth-child(6) {
    grid-column: 2 !important;
  }
}/* End custom CSS */