/*
    Author: Anansi UX
*/



/*============================================================================*/


/*------------------------------- css padrão de todos os titles --------------*/


.site-title {}

@media screen and (max-width: 1024px) {}

@media screen and (min-width: 1451px) and (max-width: 1600px) {}

@media screen and (min-width: 1025px) and (max-width: 1450px) {}

@media screen and (min-width: 1025px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 380px) {}


/*------------------------------- css padrão de todos os titles --------------*/


/*============================================================================*/





/*============================================================================*/


/*------------------------------- titles-sections -----------------------------*/

.cms-intro{
    background-image: url(/img/backgrounds/pattern-1.webp);
    background-position: bottom right;
    padding: 30px 0;
}
.cms-duvidas{
    background-image: url(/img/backgrounds/pattern-1.webp);
    background-position: bottom right;
    margin-top: 30px;
    margin-bottom: 30px;
}
.cms-sections-includes.cms-logo {text-align: center;background-image: url(/img/backgrounds/pattern-1.webp);background-position: bottom right;padding-top: 60px;padding-bottom: 60px;}
.cms-sections-includes.cms-logo .titles-sections .title{
    padding: 0!important;
}
.cms-sections-includes.cms-logo img{width: 40%;margin: auto;top: auto;}
.cms-sections-includes.cms-logo  .meta-description{margin: auto;}

.cms-sections-includes
.titles-sections {}

.titles-sections .col-img {
    position: relative;
}
.titles-sections .col-img .cms-card-btn{
    position: absolute;
    width: 50%;
    right: -10px;
    top: auto;
}

.titles-sections .layout {}

.titles-sections img.layout {
    position: relative;
}

.titles-sections .title {padding: 5vw 0vw 0 0vw;}

.titles-sections .title .tag {color: #5c676d;font-size: 18px;}

.titles-sections .title .titulo-seo {font-size: 1.6vw;font-weight: 900;line-height: 1.2;padding-top: 10px;}

.titles-sections .title .meta-description {color: #5c676d;line-height: 1.5;}

.titles-sections .title .bnt-link {}

.titles-sections .cms-thumbnails {}

@media screen and (min-width: 1451px) and (max-width: 1600px) {}

@media screen and (min-width: 1025px) and (max-width: 1450px) {}

@media screen and (min-width: 1025px) {}

@media screen and (max-width: 1024px) {
.cms-sections-includes {}

.titles-sections {}

.titles-sections .col-img { width: 60%; }

.titles-sections .layout {}

.titles-sections img.layout {}

.titles-sections .title {padding: 15px;margin-bottom: 15px;}

.titles-sections .title .tag { color: #5c676d; }

.titles-sections .title .titulo-seo { color: #0b3954; font-size: 5vw; font-weight: 900; line-height: 1.3; }

.titles-sections .title .meta-description { width: 100%; font-size: 12px; }

.titles-sections .title .bnt-link {}

.titles-sections .cms-thumbnails {
}

}

@media screen and (max-width: 380px) {}


/*------------------------------- titles-sections -----------------------------*/
/*============================================================================*/


/*============================================================================*/
/*--------------------- cms-intro-texto-img (intros/texto_img.blade.php) -----*/
/* Título serifado + parágrafo + grid 2x2 de ícones (itens_all) + botão pill à
   esquerda, colagem de 2 imagens com selo sobreposto à direita. Tudo escopado
   por .cms-intro-texto-img pra não vazar pros outros ~7 lugares que também
   usam itens_all (h1_blog_top, carrossel, tabs, etc.) nem no .cms-card-btn
   genérico (usado nos cards de thumbnail). */
.cms-intro-texto-img {padding: 60px 15px;}
.cms-intro-texto-img .titles-sections .title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    padding: 4vw 0;
}

.cms-intro-texto-img .titles-sections .title .titulo-seo {
    font-size: 2.6vw;
    font-weight: 500;
    line-height: 1.2;
    padding-top: 0;
    text-wrap: balance;
}

.cms-intro-texto-img .titles-sections .title .meta-description {
    width: 90%;
    font-size: 15px;
}

/* Grid 2x2 (2 colunas) - o padrão do itens_all em outros lugares é 4 ou 8
   colunas; aqui só cabem os 4 primeiros itens cadastrados no admin. */
.cms-intro-texto-img .itens-all-widget-index .lista-itens { margin-top: 0; width: 100%; }
.cms-intro-texto-img .itens-all-widget-index .lista-itens ul {}
.cms-intro-texto-img .itens-all-widget-index .lista-itens ul li {width: 25%;padding: 10px 0;}
.cms-intro-texto-img .itens-all-widget-index .lista-itens ul li::after { content: none; }
.cms-intro-texto-img .itens-all-widget-index .lista-itens .item-conteudo {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}
.cms-intro-texto-img .itens-all-widget-index .lista-itens img { width: 28px; height: 28px; margin: 0; float: none; }

/* Botão pill outline - .cms-card-btn já nasce com border-radius:20px (pill),
   só precisa parar de ser width:100% (herdado do uso em cards) aqui. */
.cms-intro-texto-img .titles-sections .title .cms-card-btn {
    width: auto !important;
    padding: 14px 32px !important;
    border-color: #1d1d1d !important;
    color: #1d1d1d !important;
    font-size: 12px;
}

/* Colagem das 2 imagens + selo (tag-selo, vindo de intro_tag) */
.cms-intro-texto-img .col-img { padding-top: 20px; padding-bottom: 20px; }

.cms-intro-texto-img .collage-imgs {
    position: relative;
    width: 100%;
    padding-bottom: 20%;
}

.cms-intro-texto-img .collage-imgs img.img-collage-principal {
    position: relative;
    margin-left: 12%;
    border-radius: 4px;
    object-fit: cover;
}

.cms-intro-texto-img .collage-imgs img.img-collage-secundaria {
    position: absolute;
    left: -80px;
    bottom: -50%;
    width: 85%;
    border-radius: 4px;
    object-fit: cover;
}

.cms-intro-texto-img .collage-imgs .tag-selo {
    position: absolute;
    right: -80px;
    bottom: 10%;
    background-color: #c39d19;
    color: #ffffff;
    text-align: center;
    padding: 22px 18px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media screen and (max-width: 1024px) {
    .cms-intro-texto-img {padding: 0 15px;margin-bottom: 15em;}
    .cms-intro-texto-img  .title{padding: 0 0;}
    .cms-intro-texto-img .titles-sections .title {gap: 20px;padding: 0;}
    .cms-intro-texto-img .titles-sections .title .titulo-seo { font-size: 8vw; }
    .cms-intro-texto-img .titles-sections .title .meta-description { width: 100%; font-size: 13px; }
    .cms-intro-texto-img .itens-all-widget-index .lista-itens ul li { width: calc(50% - 10px); font-size: 13px; }
    .cms-intro-texto-img .col-img {padding-top: 40px;width: 100%;}
    .cms-intro-texto-img .collage-imgs {        width: 100%;    }
    .cms-intro-texto-img .collage-imgs .tag-selo { padding: 15px 12px; font-size: 16px; }

    .cms-intro-texto-img .col-img { padding-top: 20px; padding-bottom: 20px; }

    .cms-intro-texto-img .collage-imgs {       
    }

    .cms-intro-texto-img .collage-imgs img.img-collage-principal {
        width: 100%;
        left: -40px;
    }

    .cms-intro-texto-img .collage-imgs img.img-collage-secundaria {
        left: -20px;
        bottom: -65%;
    }
    .titles-sections .col-img .cms-card-btn{
        width: 300px;
        left: 30px;
        right: auto;
        top: 30px;
    }
}

/*--------------------- cms-intro-texto-img (intros/texto_img.blade.php) -----*/
/*============================================================================*/