@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body {
   
    font-family: 'Inter', sans-serif; 
    font-size: 1.1em; /* Mantenha o tamanho grande para conforto */
    line-height: 1.6; /* Mantenha o espaçamento entre linhas */
}

.container article-page{
    width: 50%;
  height: auto;
}



/* ===================================== */
/* ESTILOS ESPECÍFICOS DO ARTIGO (post-title, blog-post, etc.) */
/* ===================================== */

.blog-post {
    /* Garante que o conteúdo tenha um bom espaçamento interno e um limite de largura para leitura */
    max-width: 800px;
    margin: 0 auto; /* Centraliza o artigo */
    line-height: 1.7; /* Aumenta o espaçamento entre linhas para melhor leitura */
    font-size: 1.1em; /* Fonte um pouco maior para conforto visual */
    color: #363535; /* Cor de texto mais suave que o preto puro */
}

/* Títulos H2 e H3 */
.blog-post h2, .blog-post h3 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.blog-post h2 {
    font-size: 2em;
    border-bottom: 3px solid #eee; /* Linha de separação discreta */
    padding-bottom: 5px;
}

.blog-post h3 {
    font-size: 1.5em;
    color: #303030; /* Cor de destaque para os subtítulos (ajuste para a sua paleta) */
}

/* Imagens no Corpo do Artigo */
.post-image {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Cantos arredondados */
    margin: 25px 0; /* Espaçamento acima e abaixo da imagem */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para destacar */
}

/* Estilo para a imagem flutuante de comparação social (seção 2) */
.blog-post img[style*="float: right"] {
    max-width: 300px; /* Limite o tamanho máximo da imagem flutuante */
    margin: 10px 0 10px 30px; /* Espaçamento à esquerda e em cima/baixo */
}

/* Bloco de Citação de Pesquisa */
.research-quote1 {
    margin: 30px 0;
    padding: 20px;
    border-left: 5px solid #ffc907; /* Linha amarela de destaque (ajuste a cor) */
    background-color: #fff9e6; /* Fundo suave para a citação */
    font-style: italic;
    color: #555;
}
.research-quote2 {
    margin: 30px 0;
    padding: 20px;
    border-left: 5px solid #035e34; /* Linha amarela de destaque (ajuste a cor) */
    background-color: #d6fded; /* Fundo suave para a citação */
    font-style: italic;
    color: #555;
}

.research-quote3 {
    margin: 30px 0;
    padding: 20px;
    border-left: 5px solid #2f11f2; /* Linha amarela de destaque (ajuste a cor) */
    background-color: #b6dffd; /* Fundo suave para a citação */
    font-style: italic;
    color: #555;
}

.research-quote p {
    margin: 0;
}

/* Listas (ul) e Parágrafos */
.blog-post ul {
    margin: 20px 0 20px 20px;
    padding-left: 20px;
}

.blog-post li {
    margin-bottom: 10px;
}

.blog-post p {
    margin-bottom: 20px;
}

/* Divisores de Seção */
.section-divider {
    border: 0;
    height: 1px;
    background-color: #eee;
    margin: 40px 0;
}

/* Chamada para Ação Final */
.call-to-action {
    padding: 15px;
    border: 1px dashed #f2f3e4;
    text-align: center;
    font-weight: bold;
    margin: 40px 0;
    background-color: #c2fddc;
}

/* Responsividade para Imagens Flutuantes em Telas Pequenas */
@media (max-width: 768px) {
    .blog-post img[style*="float: right"] {
        float: none !important; /* Desabilita o float em telas pequenas */
        width: 100% !important; /* Faz a imagem flutuante ocupar a largura total */
        max-width: 100%;
        margin: 20px 0 !important;
    }
}

/* Estilo para o Card de Checklist (Ação, Tranquilidade e Mudança) */
.checklist-card {
    background-color: #e6f7ff; /* Azul Ciano Suave (Transmite Calma e Novo Início) */
    border: 1px solid #b3e0ff; /* Borda um pouco mais escura */
    border-radius: 10px; /* Cantos arredondados */
    padding: 30px;
    margin: 40px 0; /* Espaçamento para destacar o card */
    box-shadow: 0 4px 10px rgba(0, 50, 100, 0.1); /* Sombra suave para profundidade */
}

/* Ajuste de título e lista dentro do card para melhor contraste */
.checklist-card h3 {
    color: #303030; /* Azul mais forte para o título do card */
    margin-top: 0;
}

.checklist-card ol {
    list-style-type: decimal; /* Garante que a lista seja numerada */
    padding-left: 20px;
}

.checklist-card li {
    margin-bottom: 15px;
    font-weight: 500;
}
/* ======================================= */
/* ESTILOS PARA CARDS DE ARTIGOS RELACIONADOS (WC = WECOD) */
/* ======================================= */

.wc-related-posts {
    padding: 40px 0;
    background-color: #f9f9f9; /* Um fundo sutil para destacar a seção */
    border-top: 1px solid #eee;
}

.wc-container-blog {
    /* Centraliza e limita a largura se necessário */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.wc-posts-grid {
    display: grid;
    /* Cria 3 colunas de largura flexível, mas com no mínimo 280px */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px;
    margin-top: 20px;
}

.wc-post-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Garante que nada saia do card, especialmente imagens */
    transition: transform 0.3s, box-shadow 0.3s;
}

.wc-post-card:hover {
    transform: translateY(-5px); /* Efeito sutil de levantar ao passar o mouse */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.wc-post-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* 🖼️ CORREÇÃO DE IMAGEM PARA EVITAR CORTE PELA METADE */
.wc-card-image {
    width: 100%;
    height: 180px; /* Defina uma altura fixa para todas as imagens (ajuste se 180px for muito) */
    object-fit: cover; /* ESSENCIAL: Faz a imagem preencher o container sem distorção, cortando as bordas. */
    display: block; 
}

.wc-card-info {
    padding: 15px;
}

.wc-card-info h3 {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 10px;
    color: #303132; /* Cor primária para destaque */
}

.wc-card-info p {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 15px;
}

.wc-card-tag {
    display: inline-block;
    background-color: #e6f7ff;
    color: #0056b3;
    font-size: 0.75em;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 5px;
    font-weight: bold;
}

.wc-card-link {
    display: block;
    margin-top: 10px;
    font-size: 0.9em;
    color: #007bff;
    font-weight: 600;
}

/* RESPONSIVIDADE BÁSICA */
@media (max-width: 600px) {
    .wc-posts-grid {
        grid-template-columns: 1fr; /* Uma coluna em telas pequenas */
    }
}