/* rolagem suave ao clicar num link do Sumario (pula pro titulo em vez de
   "teleportar" direto) - escopado pro html quando a pagina do blog esta
   aberta, sem afetar o resto do site. */
html:has(.blogp-artigo-pagina, .blogp-lista-pagina){
    scroll-behavior: smooth;
}

.blogp-faixa-preview{
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--purple-1, #944CF5);
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
}

.blogp-lista-pagina,
.blogp-artigo-pagina{
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px 80px;
}

/* ---------- Masthead da central de noticias ---------- */
.blogp-masthead{
    text-align: center;
    border-bottom: 3px solid var(--purple-4, #11091B);
    padding-bottom: 20px;
    margin-bottom: 36px;
}

.blogp-masthead-kicker{
    display: block;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted, #7A6B94);
    margin-bottom: 6px;
}

.blogp-masthead-titulo{
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 48px;
    letter-spacing: 0.5px;
    color: var(--purple-4, #11091B);
    margin: 0;
}

.blogp-vazio{
    text-align: center;
    color: var(--muted, #7A6B94);
    padding: 60px 0;
    font-size: 16px;
}

/* ---------- Kicker (etiqueta de categoria) ---------- */
.blogp-kicker{
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--purple-1, #944CF5);
    margin-bottom: 8px;
}

/* ---------- Grid da listagem (destaque + coluna secundaria) ---------- */
.blogp-grid{
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 28px;
    margin-bottom: 56px;
}

.blogp-coluna-secundaria{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blogp-grid-restante{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ---------- Cards ---------- */
.blogp-card{
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.18s ease;
}

.blogp-card:hover{
    transform: translateY(-3px);
}

.blogp-card-imagem{
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--purple-4, #11091B), var(--purple-2, #7D45D3));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.35);
    font-size: 32px;
    overflow: hidden;
}

.blogp-card-imagem img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* ou contain, mesma logica do background-size */
    display: block;
}

.blogp-card-corpo{
    /* antes tinha quase nenhum respiro nas laterais (2px) - o titulo/resumo/
       data ficavam quase colados na borda do card, principalmente visivel
       nos cards com fundo branco (carrossel, grade) */
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
}

/* ---------- Card de destaque (foto de fundo + texto sobreposto) ---------- */
.blogp-card--destaque{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 480px;
}

.blogp-card--destaque .blogp-card-imagem{
    position: absolute;
    inset: 0;
    aspect-ratio: unset;
}

.blogp-card--destaque .blogp-card-corpo{
    position: relative;
    z-index: 2;
    padding: 20px 18px 16px;
    background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%);
}

.blogp-card--destaque .blogp-card-data{
    color: rgba(255,255,255,.75);
}

.blogp-card--destaque .blogp-kicker{
    color: #fff;
}

.blogp-card--destaque .blogp-card-titulo{
    color: #fff;
}

.blogp-card--destaque .blogp-card-resumo{
    color: rgba(255,255,255,.85);
}

/* ---------- Cards pequenos da coluna lateral (foto do lado do texto) ---------- */
.blogp-card--pequeno{
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.blogp-card--pequeno .blogp-card-imagem--pequena{
    width: 160px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 8px;
    font-size: 20px;
}

.blogp-card--pequeno .blogp-card-corpo{
    padding: 0;
}

.blogp-card-data{
    font-size: 12px;
    color: var(--muted, #7A6B94);
    margin-bottom: 4px;
}

.blogp-card-titulo{
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.25;
    color: var(--dark, #11091B);
    margin: 0 0 8px;
}

.blogp-card-titulo--pequeno{
    font-size: 16px;
    margin-bottom: 4px;
}

.blogp-card-resumo{
    font-size: 14px;
    color: #4a4458;
    line-height: 1.5;
    margin: 0;
}

.blogp-card--pequeno .blogp-card-resumo{
    font-size: 13px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   ARTIGO INDIVIDUAL
   ========================================================================== */

.blogp-voltar{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--purple-1, #944CF5);
    text-decoration: none;
    margin-bottom: 28px;
}

.blogp-voltar:hover{
    text-decoration: underline;
}

.blogp-artigo{
    max-width: 860px;
    margin: 0 auto;
}

.blogp-artigo-capa{
    width: 100vw;
    max-width: 900px; 
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    aspect-ratio: 21 / 9;
    border-radius: 14px;
    font-size: 40px;
    margin-bottom: 24px;
    overflow: hidden;
}
 
.blogp-artigo-capa img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blogp-artigo-titulo{
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 42px;
    line-height: 1.2;
    color: var(--dark, #11091B);
    margin: 4px 0 12px;
}

.blogp-artigo-subtitulo{
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 19px;
    color: #55506a;
    margin-bottom: 20px;
}

.blogp-artigo-meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    font-size: 13px;
    color: var(--muted, #7A6B94);
    border-top: 1px solid var(--border, #E8DDFB);
    border-bottom: 1px solid var(--border, #E8DDFB);
    padding: 14px 0;
    margin-bottom: 32px;
}

.blogp-artigo-meta span{
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blogp-artigo-meta i{
    color: var(--purple-1, #944CF5);
}

.blogp-artigo-meta__autor{
    font-weight: 600;
    color: var(--dark, #11091B);
}

.blogp-artigo-meta__avatar{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--purple-1, #944CF5);
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

.blogp-artigo-meta__avatar--grande{
    width: 44px;
    height: 44px;
    font-size: 20px;
}

/* empurra o bloco de compartilhar pra ponta direita da linha de meta */
.blogp-artigo-meta__compartilhar{
    margin-left: auto;
    gap: 10px !important;
}

.blogp-artigo-meta__compartilhar-label{
    display: none;
}

.blogp-artigo-meta__compartilhar a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--purple-5, #DFC9FD);
    color: var(--purple-3, #4C277C);
    font-size: 14px;
    transition: background 0.18s ease, color 0.18s ease;
}

.blogp-artigo-meta__compartilhar a:hover{
    color: #fff;
    background: var(--purple-1, #944CF5);
}

/* o icone (<i>) tem cor propria definida em ".blogp-artigo-meta i" - sem
   isso ela nao muda no hover, ja que a cor do icone nao "segue" a do link
   ao redor quando ja foi declarada direto nele */
.blogp-artigo-meta__compartilhar a:hover i{
    color: #fff;
}

/* ---------- Barra de progresso de leitura ---------- */
.blogp-progresso{
    position: sticky;
    top: 0;
    z-index: 50;
    height: 3px;
    background: transparent;
}

.blogp-progresso__barra{
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--purple-1, #944CF5), var(--purple-2, #7D45D3));
    transition: width 0.1s linear;
}

/* ---------- Card do autor no rodape do artigo ---------- */
.blogp-artigo-autor-card{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
    padding: 16px 18px;
    background: #FAF7FF;
    border-radius: 10px;
}

.blogp-artigo-autor-card__label{
    display: block;
    font-size: 12px;
    color: var(--muted, #7A6B94);
}

.blogp-artigo-autor-card__nome{
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    color: var(--dark, #11091B);
}

/* ---------- "Leia tambem" ---------- */
.blogp-leia-tambem{
    max-width: 1100px;
    margin: 56px auto 0;
    padding-top: 40px;
    border-top: 1px solid var(--border, #E8DDFB);
}

.blogp-artigo-corpo{
    font-family: 'Lora', serif;
    font-size: 18px;
    line-height: 1.8;
    color: #241a33;
    /* numeracao automatica do bloco "Passo" (tutorial) - reiniciada aqui,
       uma vez por artigo (ver .blogp-bloco-passo mais abaixo) */
    counter-reset: blogp-passo;
}

/* folga por cima do titulo quando a pagina rola ate ele via link do
   Sumario (scroll suave, ver "html:has" mais acima) - sem isso o titulo
   fica colado bem no topo da tela, meio sem ar */
.blogp-bloco-titulo1,
.blogp-bloco-titulo2,
.blogp-bloco-titulo3{
    scroll-margin-top: 90px;
}

.blogp-bloco-titulo1{ font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; margin: 34px 0 14px; }
.blogp-bloco-titulo2{ font-family: 'Playfair Display', serif; font-size: 23px; font-weight: 700; margin: 28px 0 12px; }
.blogp-bloco-titulo3{ font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 700; margin: 22px 0 10px; }

/* sumario - lista de titulos clicavel, gerada automaticamente. Os niveis
   (Titulo 1/2/3) ganham indentacao crescente pra dar a nocao de hierarquia
   das secoes/subsecoes do post. */
.blogp-sumario{
    margin: 28px 0;
    padding: 20px 24px;
    background: rgba(148, 76, 245, .04);
    border: 1px solid rgba(148, 76, 245, .2);
    border-radius: 12px;
}

.blogp-sumario__titulo{
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 16px;
    color: #241a33;
    margin-bottom: 12px;
}

.blogp-sumario__titulo i{
    color: var(--purple-1, #944CF5);
}

.blogp-sumario__lista{
    margin: 0;
    padding-left: 22px;
    list-style: decimal;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blogp-sumario__lista--marcadores{
    list-style: disc;
}

.blogp-sumario__item{
    display: list-item;
}

.blogp-sumario__item--nivel3{
    margin-left: 18px;
    list-style-type: circle;
}

.blogp-sumario__item--nivel4{
    margin-left: 36px;
    font-size: 14px;
    list-style-type: square;
}

.blogp-sumario__item a{
    color: #4a4458;
    font-size: 15px;
    text-decoration: none;
}

.blogp-sumario__item a:hover{
    color: var(--purple-1, #944CF5);
    text-decoration: underline;
}

.blogp-bloco-normal{ margin-bottom: 20px; }

/* links inseridos no meio do texto (editor rico ou docx) - sem isso, o reset
   global do site deixa um <a> igual a texto comum, sem parecer clicavel */
.blogp-artigo-corpo a{
    color: var(--purple-1, #944CF5);
    text-decoration: underline;
}
.blogp-artigo-corpo a:hover{ opacity: .8; }

/* termo do glossario - sublinhado pontilhado (diferente do link solido de
   cima) pra sinalizar "isso tem uma explicacao", nao "isso leva a algum
   lugar". O balaozinho em si (.blogp-glossario-balao) e UM SO elemento
   reaproveitado pra qualquer termo da pagina, posicionado via JS (ver
   script no fim de blog-especifico.php). */
.blogp-glossario-termo{
    text-decoration: underline dotted;
    text-decoration-color: var(--purple-1, #944CF5);
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    background: rgba(148, 76, 245, .08);
    border-radius: 3px;
    padding: 0 2px;
    cursor: help;
}

.blogp-glossario-balao{
    position: fixed;
    z-index: 999;
    max-width: 260px;
    padding: 10px 14px;
    background: #241a33;
    color: #fff;
    font-family: 'Lora', serif;
    font-size: 13.5px;
    line-height: 1.5;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
}

.blogp-glossario-balao--aberto{
    opacity: 1;
    transform: translateY(0);
}

/* letra capitular no primeiro paragrafo, pra reforcar a sensacao de jornal */
.blogp-bloco-normal--capitular::first-letter{
    font-family: 'Playfair Display', serif;
    font-size: 58px;
    font-weight: 900;
    float: left;
    line-height: 0.8;
    margin: 8px 8px 0 0;
    color: var(--purple-1, #944CF5);
}

.blogp-bloco-lista{
    margin: 0 0 20px 18px;
    padding: 4px 14px 4px 32px;
    border-left: 2px solid var(--purple-6, #cda8fd);
}

.blogp-bloco-lista li{
    margin-bottom: 8px;
    line-height: 1.6;
}

.blogp-bloco-lista li:last-child{
    margin-bottom: 0;
}

/* caixas de dica / atencao - disponiveis pra qualquer tipo de post */
.blogp-bloco-dica,
.blogp-bloco-atencao{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    margin: 24px 0;
    font-size: 15.5px;
    line-height: 1.6;
}

.blogp-bloco-dica{
    background: rgba(94, 221, 130, .1);
    border: 1px solid rgba(94, 221, 130, .35);
    color: #1c4d2c;
}

.blogp-bloco-dica i{ color: #1e9e4f; margin-top: 3px; }

.blogp-bloco-atencao{
    background: rgba(247, 158, 30, .1);
    border: 1px solid rgba(247, 158, 30, .4);
    color: #5a3d09;
}

.blogp-bloco-atencao i{ color: #c97400; margin-top: 3px; }

/* destaque numerico (metrica) - o "antes/depois" que o case usa, mas
   disponivel pra qualquer tipo */
.blogp-bloco-destaque{
    text-align: center;
    margin: 32px 0;
    padding: 28px 20px;
    background: linear-gradient(135deg, rgba(148,76,245,.06), rgba(125,69,211,.1));
    border: 1px solid rgba(148,76,245,.25);
    border-radius: 14px;
}

.blogp-bloco-destaque__numero{
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-weight: 900;
    color: var(--purple-1, #944CF5);
    line-height: 1.1;
}

.blogp-bloco-destaque__legenda{
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #4a4458;
}

/* passo numerado (tutorial) - numeracao 100% automatica via contador de
   CSS (reiniciado uma vez em .blogp-artigo-corpo), nunca digitada; a
   linha vertical (::after) so aparece entre um passo e o proximo, ligando
   visualmente a sequencia do tutorial. */
.blogp-bloco-passo{
    counter-increment: blogp-passo;
    position: relative;
    display: flex;
    gap: 20px;
    margin: 36px 0;
}

.blogp-bloco-passo::before{
    content: counter(blogp-passo);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #944CF5, #7D45D3);
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 900;
}

.blogp-bloco-passo:not(:last-child)::after{
    content: '';
    position: absolute;
    left: 27px;
    top: 56px;
    bottom: -36px;
    width: 2px;
    background: rgba(148, 76, 245, .2);
}

.blogp-bloco-passo__corpo{
    flex: 1;
    padding-top: 10px;
    min-width: 0;
}

.blogp-bloco-passo__titulo{
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    font-weight: 700;
    color: #241a33;
    margin-bottom: 6px;
}

.blogp-bloco-passo__descricao p{
    margin: 0 0 10px;
}

.blogp-bloco-passo__descricao p:last-child{
    margin-bottom: 0;
}

/* Depoimento de cliente/empresa - cartao com o texto em cima e, embaixo,
   foto (ou icone generico) + nome + cargo/empresa. Diferente de uma
   citacao comum (so a borda lateral), o objetivo aqui e deixar claro que e
   uma PESSOA REAL falando - por isso o rodape com a "assinatura" sempre
   visivel, nao so um texto solto. */
.blogp-bloco-depoimento{
    margin: 28px 0;
    padding: 24px 26px;
    background: var(--admin-superficie-2, #f7f3fc);
    border: 1px solid rgba(148, 76, 245, .15);
    border-radius: 14px;
}

.blogp-depoimento__texto{
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.6;
    font-style: italic;
    color: inherit;
}

.blogp-depoimento__texto::before{
    content: '\201C';
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    color: var(--purple-1, #944CF5);
    line-height: 0;
    margin-right: 4px;
    vertical-align: -2px;
    display: inline-block;
}

.blogp-depoimento__rodape{
    display: flex;
    align-items: center;
    gap: 12px;
}

.blogp-depoimento__foto{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.blogp-depoimento__foto--vazio{
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(148, 76, 245, .15);
    color: var(--purple-1, #944CF5);
    font-size: 18px;
}

.blogp-depoimento__identificacao{
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.blogp-depoimento__nome{
    font-weight: 700;
    font-size: 15px;
}

.blogp-depoimento__cargo{
    font-size: 13px;
    color: #64748b;
}

.blogp-bloco-imagem{
    width: 100%;
    margin: 24px 0;
}

.blogp-bloco-imagem img{
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

/* video (embed do YouTube/Vimeo ou arquivo local) - mesma proporcao 16:9,
   responsivo (o iframe/video preenche a caixa toda).
   "padding-top: 56.25%" (9/16) em vez de "aspect-ratio" de proposito: um
   filho com position:absolute + height:100% so consegue calcular a altura
   dele se o PAI tiver uma altura DEFINIDA - e "aspect-ratio" sozinho (sem
   nenhuma largura/altura fixa) nao conta como altura definida em alguns
   navegadores/casos, entao o filho cai pro tamanho NATURAL dele: o iframe
   do YouTube sem isso fica pequeno (o padrao de ~300x150 do navegador), e o
   <video> do arquivo local fica do tamanho real do video (podendo passar
   muito da largura da coluna). O truque do padding baseado na LARGURA (que
   essa, sim, e sempre definida) resolve os dois de vez, em qualquer navegador. */
.blogp-bloco-video{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 9/16 = proporcao 16:9 */
    margin: 28px 0;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.blogp-bloco-video iframe,
.blogp-bloco-video video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* mapa - mesma tecnica do video (padding-top baseado na largura), mas numa
   proporcao mais "paisagem" (4:3 em vez de 16:9) - mapa muito baixo/largo
   fica dificil de usar, principalmente em celular */
.blogp-bloco-mapa{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 75%; /* 3/4 = proporcao 4:3 */
    margin: 28px 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--admin-superficie-2, #f3ecfd);
}

.blogp-bloco-mapa iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* grafico - cartao branco com altura fixa segurando o <canvas> que o
   Chart.js desenha (via script no fim da pagina, ver blog-especifico.php) */
.blogp-bloco-grafico{
    position: relative;
    width: 100%;
    height: 360px;
    margin: 32px 0;
    padding: 20px;
    background: #fff;
    border: 1px solid rgba(148, 76, 245, .15);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
    box-sizing: border-box;
}

.blogp-bloco-grafico canvas{
    width: 100% !important;
    height: 100% !important;
}

/* bloco temporario - card fechado (mesma familia visual do destaque), com
   um selo no topo avisando que aquele conteudo e por tempo limitado. a
   contagem regressiva e so mais um selo que aparece ou nao, sem virar um
   elemento separado solto no card. */
.blogp-bloco-temporario{
    margin: 32px 0;
    padding: 20px 22px;
    background: linear-gradient(135deg, rgba(148,76,245,.06), rgba(125,69,211,.1));
    border: 1px solid rgba(148, 76, 245, .25);
    border-radius: 14px;
}

.blogp-bloco-temporario__cabecalho{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.blogp-bloco-temporario__selo,
.blogp-bloco-temporario__contagem{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 20px;
    line-height: 1.4;
}

.blogp-bloco-temporario__selo{
    color: var(--purple-1, #944CF5);
    background: #fff;
    border: 1px solid rgba(148, 76, 245, .3);
}

.blogp-bloco-temporario__contagem{
    color: #fff;
    background: var(--purple-1, #944CF5);
    margin-left: auto;
}

.blogp-bloco-temporario__conteudo{
    font-size: 15.5px;
    line-height: 1.6;
}

.blogp-bloco-temporario__conteudo p:last-child{
    margin-bottom: 0;
}

/* link "leia tambem" - pill roxo clicavel que leva pra outra pagina do
   proprio site; no desktop, passar o mouse (ver script condicional no fim
   de blog-especifico.php) abre uma janelinha com um iframe da pagina de
   destino - o icone de seta (::after) e so uma dica visual de que tem
   "mais" ali. */
.blogp-bloco-leiatambem{
    margin: 28px 0;
}

.blogp-link-leiatambem{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    background: rgba(148, 76, 245, .08);
    border: 1px solid rgba(148, 76, 245, .3);
    border-radius: 999px;
    color: var(--purple-1, #944CF5);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.blogp-link-leiatambem:hover{
    background: var(--purple-1, #944CF5);
    color: #fff;
}

/* janelinha de pre-visualizacao (iframe) - um unico elemento reaproveitado
   pra qualquer link "leia tambem" da pagina, posicionado via JS perto do
   link (ver script condicional no fim de blog-especifico.php) */
.blogp-preview-janela{
    position: fixed;
    z-index: 999;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0,0,0,.25);
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.blogp-preview-janela--aberta{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.blogp-preview-janela__barra{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    background: var(--purple-1, #944CF5);
    color: #fff;
}

.blogp-preview-janela__titulo{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blogp-preview-janela__fechar{
    flex-shrink: 0;
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
}

.blogp-preview-janela__fechar:hover{
    background: rgba(255,255,255,.3);
}

.blogp-preview-janela__corpo{
    position: relative;
    width: 100%;
    height: 220px;
    background: rgba(148, 76, 245, .06);
}

.blogp-preview-janela__iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.blogp-preview-janela__overlay{
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* so no modo touch (sem hover) a overlay vira clicavel - e ela quem recebe
   o "segundo toque" que confirma e navega pra pagina de verdade */
.blogp-preview-janela--toque .blogp-preview-janela__overlay{
    pointer-events: auto;
    cursor: pointer;
}

.blogp-preview-janela--toque .blogp-preview-janela__overlay::after{
    content: "Toque para abrir a página";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 7px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,.55);
}

/* comparativo - de 1 a 3 cards lado a lado, cada um com sua PROPRIA lista
   de atributos (nao e uma tabela com linhas em comum) - a cor do titulo
   muda por posicao (1o roxo/marca, 2o verde, 3o laranja) so pra ajudar a
   diferenciar visualmente, sem significado nenhum alem disso. */
.blogp-bloco-comparativo{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 32px 0;
}

.blogp-comparativo-card{
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.blogp-comparativo-card__titulo{
    padding: 16px 18px;
    text-align: center;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
    background: var(--purple-1, #944CF5);
}

.blogp-bloco-comparativo .blogp-comparativo-card:nth-child(2) .blogp-comparativo-card__titulo{
    background: #25D366;
}

.blogp-bloco-comparativo .blogp-comparativo-card:nth-child(3) .blogp-comparativo-card__titulo{
    background: #F2994A;
}

.blogp-comparativo-card__lista{
    list-style: none;
    margin: 0;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blogp-comparativo-atributo{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: #2c2438;
}

.blogp-comparativo-atributo i{
    margin-top: 3px;
    flex-shrink: 0;
}

.blogp-comparativo-atributo--tem i{
    color: #25D366;
}

.blogp-comparativo-atributo--nao-tem{
    color: #9c9099;
}

.blogp-comparativo-atributo--nao-tem i{
    color: #e95454;
}

/* audio - cartao com o nome do arquivo acima do player nativo (sem isso,
   um <audio controls> sozinho fica so uma barrinha fina solta no meio do
   texto, sem contexto nenhum de que arquivo e aquele) */
.blogp-bloco-audio{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 28px 0;
    padding: 16px 18px;
    background: #f6f1fd;
    border: 1px solid #e4d7fb;
    border-radius: 10px;
}

.blogp-bloco-audio__nome{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #4c277c;
}

.blogp-bloco-audio__nome i{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(148, 76, 245, .14);
    color: var(--purple-1, #944CF5);
    font-size: 13px;
    flex-shrink: 0;
}

.blogp-bloco-audio__nome span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blogp-bloco-audio audio{
    width: 100%;
    display: block;
}

/* Modelo 3D interativo (arquivo .stl) - o <canvas> recebe um visualizador
   Three.js vivo (ver assets/js/visualizador3d.js): gira sozinho devagar e
   reage a arrastar (girar manualmente) e ao scroll (zoom). */
.blogp-bloco-modelo3d{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 32px 0;
}

.blogp-modelo3d-area{
    position: relative;
    width: 100%;
    max-width: 560px;
    height: 360px;
    border-radius: 14px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 40%, #241a30, #120c19);
}

.blogp-modelo3d-area canvas{
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}

.blogp-modelo3d-area canvas:active{
    cursor: grabbing;
}

.blogp-modelo3d-dica{
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: rgba(255,255,255,.75);
    background: rgba(0,0,0,.4);
    padding: 5px 12px;
    border-radius: 20px;
    pointer-events: none;
    white-space: nowrap;
}

.blogp-modelo3d-legenda{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
}

@media (max-width: 600px){
    .blogp-modelo3d-area{
        height: 280px;
    }
    .blogp-modelo3d-dica{
        font-size: 11px;
        white-space: normal;
        text-align: center;
        max-width: 90%;
    }
}

/* botao CTA (call-to-action) - link estilizado como botao, centralizado na
   propria linha, com 3 variacoes visuais (ver select "Estilo" no editor) */
.blogp-bloco-cta{
    display: flex;
    margin: 32px 0;
}

/* alinhamento (o padrao, se o bloco nao tiver nenhum modificador, e
   centralizado - mesmo comportamento de antes) */
.blogp-bloco-cta,
.blogp-bloco-cta--centro{
    justify-content: center;
}

.blogp-bloco-cta--esquerda{
    justify-content: flex-start;
}

.blogp-bloco-cta--direita{
    justify-content: flex-end;
}

.blogp-bloco-cta--justificado{
    justify-content: stretch;
}

.blogp-bloco-cta--justificado .blogp-bloco-cta__botao{
    width: 100%;
}

/* seletor "encadeado" (.blogp-bloco-cta .blogp-bloco-cta__botao, nao so
   .blogp-bloco-cta__botao sozinho) DE PROPOSITO: o botao e um <a> dentro do
   corpo do artigo, e ".blogp-artigo-corpo a" (a cor/sublinhado padrao de
   QUALQUER link no texto) tem mais especificidade que uma unica classe -
   sem esse encadeamento, aquela regra generica vencia e o botao saia com a
   cor errada (roxo em vez de branco no solido/verde) e sublinhado, mesmo
   com "color"/"text-decoration" definidos aqui. */
.blogp-bloco-cta .blogp-bloco-cta__botao{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 34px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: transform .2s, box-shadow .2s;
}

.blogp-bloco-cta .blogp-bloco-cta__botao:hover{
    transform: translateY(-2px);
    text-decoration: none;
}

.blogp-bloco-cta .blogp-bloco-cta__botao--solido{
    background: linear-gradient(135deg, var(--purple-1, #944CF5), var(--purple-2, #7D45D3));
    color: #fff;
    box-shadow: 0 8px 20px rgba(148, 76, 245, .35);
}

.blogp-bloco-cta .blogp-bloco-cta__botao--solido:hover{
    box-shadow: 0 12px 26px rgba(148, 76, 245, .45);
}

.blogp-bloco-cta .blogp-bloco-cta__botao--contorno{
    background: transparent;
    border: 2px solid var(--purple-1, #944CF5);
    color: var(--purple-1, #944CF5);
}

.blogp-bloco-cta .blogp-bloco-cta__botao--contorno:hover{
    background: rgba(148, 76, 245, .08);
}

.blogp-bloco-cta .blogp-bloco-cta__botao--verde{
    background: #25D366;
    color: #fff;
    box-shadow: 0 8px 20px rgba(37, 211, 102, .35);
}

.blogp-bloco-cta .blogp-bloco-cta__botao--verde:hover{
    box-shadow: 0 12px 26px rgba(37, 211, 102, .45);
}

/* ---------- Divisor de secao ---------- */
/* base: duas linhas em gradiente (::before/::after) com um espaco no meio -
   cada estilo decide o que preenche esse meio (nada, icone, texto ou nem
   linha nenhuma no caso de "pontos"). */
.blogp-divisor{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 44px 0;
}

.blogp-divisor::before,
.blogp-divisor::after{
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(148, 76, 245, .35), transparent);
}

/* linha simples: sem conteudo no meio e sem gap, as duas metades da linha
   se encontram e viram uma linha continua */
.blogp-divisor--linha{
    gap: 0;
}

.blogp-divisor__texto{
    font-family: 'AcuminProWide', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--purple-1, #944CF5);
    white-space: nowrap;
    flex-shrink: 0;
}

/* pontos: sem as linhas em gradiente, so os 3 pontinhos centralizados */
.blogp-divisor--pontos::before,
.blogp-divisor--pontos::after{
    display: none;
}

.blogp-divisor__pontos{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.blogp-divisor__pontos i{
    font-size: 6px;
    color: rgba(148, 76, 245, .5);
}

.blogp-bloco-citacao{
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 22px;
    color: #4a4458;
    border-left: 4px solid var(--purple-1, #944CF5);
    padding: 4px 0 4px 20px;
    margin: 28px 0;
}

.blogp-bloco-imagem-placeholder{
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--purple-5, #DFC9FD), var(--purple-6, #cda8fd));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(76,39,124,.4);
    font-size: 28px;
    margin: 24px 0;
}

/* tabela vinda do editor/docx - o wrapper com overflow-x e so pra ela
   conseguir "rolar" na horizontal no celular em vez de espremer/quebrar o
   layout quando tem muitas colunas. Cores em hex literal (nao variavel) de
   proposito - esse arquivo ja redefine varias --purple-N como marca em
   outros lugares, entao uma var nova aqui corre risco de colidir. */
.blogp-bloco-tabela{
    width: 100%;
    margin: 28px 0;
    overflow-x: auto;
}

.blogp-bloco-tabela table{
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.blogp-bloco-tabela th,
.blogp-bloco-tabela td{
    border: 1px solid #e4d7fb;
    padding: 10px 14px;
    text-align: left;
}

.blogp-bloco-tabela th{
    background: #f3ecfd;
    color: #4c277c;
    font-weight: 700;
}

.blogp-bloco-tabela tbody tr:nth-child(even){
    background: #faf7ff;
}

.blogp-artigo-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--border, #E8DDFB);
}

.blogp-artigo-tags span{
    background: var(--purple-5, #DFC9FD);
    color: var(--purple-3, #4C277C);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: 'AcuminProWide', sans-serif;
}

/* ---------- "Veja tambem em" (links pra Instagram/Facebook da mesma materia) ---------- */
.blogp-artigo-veja-tambem{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border, #E8DDFB);
    font-size: 13px;
}

.blogp-artigo-veja-tambem__label{
    color: var(--muted, #7A6B94);
    font-weight: 600;
}

.blogp-artigo-veja-tambem a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--purple-3, #4C277C);
    background: var(--purple-5, #DFC9FD);
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.18s ease, color 0.18s ease;
}

.blogp-artigo-veja-tambem a:hover{
    background: var(--purple-1, #944CF5);
    color: #fff;
}
/* ---------- Carrossel "Mais noticias" ---------- */
/* Faixa FULL-WIDTH (ponta a ponta da tela, fora do container de 1100px da
   pagina) - truque classico de "quebrar" um elemento pra fora do container
   centralizado com max-width: da 100vw de largura e usa margin-left
   negativo de metade da viewport pra recentralizar. O titulo e o carrossel
   (filhos diretos) continuam limitados a 1100px e centralizados, senao
   ficariam esticados de ponta a ponta junto com o fundo. */
.blogp-carrossel-secao{
    width: 100vw;
    max-height: 560px;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-top: 56px;
    margin-bottom: 48px;
    /* Cor literal (nao var(--purple-N)) de proposito - esse projeto ja usa
       --purple-1 a --purple-7 pra tons FORTES da marca em outras paginas,
       entao um nome novo ia colidir com um valor ja existente (foi
       exatamente esse o bug: --purple-7 ja existia como um roxo vibrante
       em base.css, nao um tom claro). */
    background: #F8F4FE;
    padding: 40px 24px 48px;
    /* trava visualmente o carrossel dentro da faixa - sem isso, qualquer
       slide calculado a mais (a "espiadinha" do proximo card) vazava ate a
       borda da janela em vez de parar no limite. */
    overflow: hidden;
}

.blogp-secao-titulo{
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--purple-4, #11091B);
    max-width: 1100px;
    margin: 0 auto 22px;
}

.blogp-carrossel{
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 4px 4px 8px;
}

.blogp-carrossel .swiper-slide{
    height: auto;
}

/* Por padrao o swiper estica (align-items: stretch) todos os slides da
   fileira pra altura do slide mais alto - como o card com titulo mais
   comprido "empurra" os outros, sobrava uma faixa branca embaixo dos
   cards mais curtos antes da proxima secao. Sem stretch, cada card fica
   soh do tamanho do proprio conteudo. */
.blogp-carrossel .swiper-wrapper{
    align-items: flex-start;
}

.blogp-card--carrossel{
    background: var(--white, #fff);
    /* sombra sutil - o card fica sobre o painel lilas da secao, entao uma
       borda/sombra ajuda ele a se destacar como um "cartao" de verdade,
       em vez de ficar so uma retangulo branco solto */
    box-shadow: 0 4px 16px rgba(17,9,27,.08);
    cursor: grab;
}

.blogp-card--carrossel .blogp-card-titulo--pequeno{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blogp-card--carrossel:active{
    cursor: grabbing;
}

.blogp-carrossel .swiper-button-prev,
.blogp-carrossel .swiper-button-next{
    top: 40%;
    width: 36px;
    height: 36px;
    background: var(--white, #fff);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(17,9,27,.18);
    color: var(--purple-1, #944CF5);
}

.blogp-carrossel .swiper-button-prev::after,
.blogp-carrossel .swiper-button-next::after{
    font-size: 14px;
    font-weight: 900;
}

.blogp-carrossel .swiper-button-disabled{
    opacity: 0;
    pointer-events: none;
}

/* ---------- Botao "Ver todas" ---------- */
.blogp-ver-todas-wrap{
    display: flex;
    justify-content: center;
    margin: 16px 0 40px;
    padding-top: 40px;
    border-top: 1px solid var(--border, #E8DDFB);
}

.blogp-botao-ver-todas{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 1.5px solid var(--purple-1, #944CF5);
    color: var(--purple-1, #944CF5);
    font-family: 'AcuminProWide', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 26px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.blogp-botao-ver-todas:hover{
    background: var(--purple-1, #944CF5);
    color: var(--white, #fff);
}

.blogp-botao-ver-todas i{
    transition: transform 0.18s ease;
}

.blogp-botao-ver-todas--aberto i{
    transform: rotate(180deg);
}

.blogp-grid-restante--todas{
    margin-bottom: 40px;
}

.oculto{
    display: none;
}

/* ---------- Responsivo ---------- */
@media (max-width: 900px){
    .blogp-grid{ grid-template-columns: 1fr; }
    .blogp-grid-restante{ grid-template-columns: repeat(2, 1fr); }
    .blogp-masthead-titulo{ font-size: 34px; }
    .blogp-artigo-titulo{ font-size: 32px; }
}

@media (max-width: 560px){
    .blogp-grid-restante{ grid-template-columns: 1fr; }
    .blogp-card--destaque{ min-height: 320px; }
    .blogp-card--pequeno{ flex-direction: column; align-items: stretch; }
    .blogp-card--pequeno .blogp-card-imagem--pequena{ width: 100%; aspect-ratio: 16/9; }
}