@charset "UTF-8";  
/* 
   🔰 Define a codificação de caracteres usada no arquivo.
   Garante que acentos e símbolos especiais em português
   sejam interpretados corretamente por todos os navegadores.
*/

/* ================================================================
   🧱 BLOCO 1 — RESET GLOBAL
   Remove margens e paddings padrão de todos os elementos,
   e ajusta o modelo de caixa (box model) para um controle preciso.
================================================================ */
* {
  margin: 0;               /* Remove margens padrão. */
  padding: 0;              /* Remove espaçamentos internos padrão. */
  box-sizing: border-box;  /* Inclui padding e border no cálculo de width/height. */
}

/* ================================================================
   🧍 BLOCO 2 — BASE DO DOCUMENTO
   Define estilo geral de texto e comportamento padrão do corpo.
================================================================ */
body {
  font-family: 'Nunito Sans', 'Segoe UI', Arial; /* Define fonte padrão legível. */
  line-height: 1.6;                              /* Melhora a leitura do texto. */
  background: #fff;                           /* Fundo branco limpo. */
  color: #333;                                /* Texto em cinza escuro, bom contraste. */
}

/* ================================================================
   📦 BLOCO 3 — CONTAINER PADRÃO
   Centraliza o conteúdo e controla margens internas.
================================================================ */
.container {
  max-width: 1100px;        /* Largura máxima para não estourar o layout. */
  margin: 40px auto 0 auto; /* Centraliza horizontalmente e adiciona espaço no topo. */
  padding: 0 16px 0 32px;   /* Espaçamento lateral interno. */
}

/* ================================================================
   🧭 BLOCO 4 — TOPO / BARRA DE NAVEGAÇÃO
   Fica sobreposta ao fundo principal (transparente sobre o HERO).
================================================================ */
.topbar {
  background: transparent; /* Transparente para deixar o fundo visível. */
  color: #fff;             /* Texto e ícones brancos. */
  padding: 25px 0;         /* Altura vertical da barra. */
  position: absolute;      /* Sobrepõe o conteúdo (posição fixa no topo). */
  top: 0;                  /* Encosta no topo da página. */
  left: 0;                 /* Encosta na lateral esquerda. */
  width: 100%;             /* Ocupa toda a largura da tela. */
  z-index: 10;             /* Garante que fique sobre tudo (hero, imagens, etc). */
}
/* === DEIXA A PÁGINA CONTATO IDÊNTICA À PÁGINA SOBRE === */
body.contato .topbar,
body.contato header.topbar {
  position: absolute !important;  /* igual à 'sobre' */
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;        /* mesma transparência da 'sobre' */
  z-index: 9999 !important;       /* garante que fique por cima */
}

.logo-img {
  height: 80px; /* Define altura fixa da logo no topo. */
}

/* ================================================================
   🔗 BLOCO 5 — LINKS DO MENU DE NAVEGAÇÃO
   Define cor, espaçamento e estilos interativos (hover e active).
================================================================ */
.nav a {
  color: #fff !important;  /* Força branco (mesmo que outros estilos existam). */
  text-decoration: none;   /* Remove sublinhado padrão. */
  margin: 0 10px;          /* Espaçamento horizontal entre os links. */
  padding-bottom: 4px;     /* Espaço reservado para a barrinha azul inferior. */
  font-weight: 400;        /* Peso de fonte regular. */
}

.nav a:visited,
.nav a:focus {
  color: #fff !important;  /* Mantém o branco também para estados visitado e focado. */
}

/* Estado ATIVO: link da página atual */
.nav a.active {
  border-bottom: 2px solid #39c5f1; /* Linha azul indicando página ativa. */
}

/* Estado HOVER: feedback visual ao passar o mouse */
.nav a:hover {
  border-bottom: 2px solid #39c5f1; /* Linha azul aparece no hover também. */
}


/* ================================================================
   🌄 BLOCO 6 — HERO (SEÇÃO PRINCIPAL)
   Imagem de fundo, texto centralizado e título de destaque.
================================================================ */
.hero {
  background: url("fundo.jpg") no-repeat center center/cover;
  /* Fundo com imagem centralizada e expandida para cobrir a tela toda. */
  color: #ffffff;             /* Texto branco contrastando com a imagem. */
  min-height: 100vh;       /* Ocupa toda a altura da janela (viewport). */
  position: relative;      /* Cria contexto para o posicionamento do conteúdo interno. */
}

/* ---------------------------------------------------------------
   🎯 Sub-bloco: Conteúdo dentro do HERO
   Contém o título principal e parágrafo descritivo.
---------------------------------------------------------------- */
.hero-content {
  position: absolute;         /* Posiciona sobre a imagem do hero. */
  top: 40%;                   /* Move o bloco verticalmente (40% da altura da seção). */
  left: 18%;                  /* Afasta da lateral esquerda. */
  transform: translateY(-50%);/* Centraliza verticalmente com precisão. */
  padding: 0;                 /* Remove padding interno. */
  width: auto;                /* Largura automática, acompanha o conteúdo. */
}

/* TMANHO E FONTE DA PABARA "Bem-vindo!" */
.hero-content h1 {
  font-family: 'Lucida Bright', 'DejaVu Serif', Georgia, serif;
  font-size: 50px;            /* Grande o suficiente para impacto visual. */
  margin-bottom: 20px;        /* Espaço abaixo do título antes do parágrafo. */
}

/* ---------------------------------------------------------------
   ✍️ TEXTO ESPECÍFICO — Mensagem “site em construção”
   Aplica AvenirLTPro apenas nesse parágrafo.
---------------------------------------------------------------- */
.texto-intro-hero {
  font-family: 'Nunito Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.3;
  letter-spacing: 0.3px;
}

/* Subtítulo / parágrafo explicativo */
.hero-content p {
  font-size: 18px;            /* Tamanho médio, legível em fundo de imagem. */
}

/* ---------------------------------------------------------------------
   ✍️ TEXTO ESPECÍFICO — Mensagem “Cadastre seu e-mail gratuitamente...”
   -------------------------------------------------------------------- */
.texto-formulario {
  font-family: 'Nunito Sans', sans-serif; 
  font-size: 16px; 
  line-height: 1.5;"
}

/* ================================================================
   📩 BLOCO 7 — TARJA PRETA COM FORMULÁRIO
   Seção usada na página inicial para capturar mensagens do visitante.
================================================================ */
.formulario-section {
  background: #333333; /* Fundo preto/cinza-escuro para destaque. */
  color: #fff;         /* Texto branco sobre fundo escuro. */
  padding: 60px 20px;  /* Espaçamento interno generoso. */
}

.formulario-container {
  max-width: 1100px;       /* Largura máxima do formulário. */
  margin: 0 auto;          /* Centraliza horizontalmente. */
  display: flex;           /* Usa flexbox para layout em duas colunas. */
  flex-wrap: wrap;         /* Permite quebrar em linhas menores no mobile. */
  justify-content: space-between; /* Espaço equilibrado entre texto e campos. */
  align-items: center;     /* Alinha verticalmente centro-a-centro. */
  gap: 40px;               /* Espaçamento entre colunas. */
}

.formulario-texto {
  font-family: 'Nunito Sans' !important;
  flex: 1;           /* Ocupa metade da largura disponível. */
  font-size: 20px;   /* Tamanho confortável de leitura. */
  line-height: 1.6;  /* Aumenta o espaçamento entre linhas. */
}

.formulario-campos {
  flex: 1;           /* Outra metade da largura. */
  max-width: 450px;  /* Impede campos muito largos em telas grandes. */
}

.formulario-campos form {
  display: flex;              /* Organiza os campos verticalmente. */
  flex-direction: column;
  gap: 20px;                  /* Espaçamento uniforme entre inputs. */
}

.formulario-campos input {
  padding: 12px;              /* Altura e conforto de clique. */
  border: 1px solid #fff;     /* Bordas brancas sutis. */
  background: transparent;    /* Fundo transparente para harmonia. */
  color: #fff;                /* Texto branco no campo. */
  font-size: 16px;
}

.formulario-campos input::placeholder {
  color: #ccc; /* Cinza-claro para contraste sem roubar atenção. */
}

.formulario-campos button {
  background-color: #39c5f1; /* Azul principal do tema. */
  color: #fff;               /* Texto branco. */
  padding: 12px;             /* Altura padrão de botão. */
  font-size: 16px;
  border: none;              /* Remove bordas nativas. */
  cursor: pointer;           /* Mostra cursor de clique. */
  font-weight: bold;         /* Destaque no texto do botão. */
}

.formulario-campos button:hover {
  background-color: #2fa9d0; /* Azul mais escuro ao passar o mouse. */
}

/* ================================================================
   📖 BLOCO 8 — TARJA BRANCA “MEU PROPÓSITO”
   Seção posterior à tarja preta; alterna o fundo para contraste.
================================================================ */
.conteudo {
  background: #fff; /* Fundo branco limpo. */
  padding: 0;       /* Sem espaçamento vertical extra. */
}

.prop-section {
  max-width: 80%;                  /* Ocupa 80% da tela no desktop. */
  margin: 0;                       /* Remove margens externas. */
  display: grid;                   /* Usa grid para duas colunas. */
  grid-template-columns: 1fr 1fr;  /* 50%/50% texto e imagem. */
  align-items: stretch;            /* Estica ambos igualmente na vertical. */
  min-height: 500px;               /* Altura mínima confortável. */
}

.prop-image {
  display: flex;
  align-items: stretch;   /* A imagem preenche todo o container vertical. */
  justify-content: stretch;
}

.prop-image img {
  width: 100%;             /* Ocupa 100% da coluna de imagem. */
  height: 100%;            /* Mantém altura total da seção. */
  object-fit: contain;     /* Mantém proporção sem cortar. */
  display: block;          /* Remove espaço inferior padrão de imagens inline. */
}

.prop-text {
  padding: 40px 40px 40px 32px; /* Espaçamento interno confortável. */
  display: flex;
  flex-direction: column;       /* Coloca título, texto e botão em coluna. */
  justify-content: center;      /* Centraliza verticalmente o conteúdo. */
  background: #fff;             /* Fundo branco sólido. */
  max-width: 750px;             /* Limite para colunas largas. */
}

/* 👤 TEXTO DA AUTOBIOGRAFIA (index) */
.prop-text .texto-biografia {
  font-family: 'Nunito Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  text-align: justify !important;
  letter-spacing: 0px !important;
  color: #1a1a1a !important;
}


.prop-text h2 {
  font-family: Baskerville, 'Lucida Bright', 'Century Schoolbook L', 'Times New Roman', serif;
  /* Tipografia clássica e elegante. */
  font-size: 40px;      /* Destaque para o título. */
  margin-bottom: 28px;  /* Espaço entre título e texto. */
}

.prop-text p {
  margin-bottom: 18px; /* Espaço entre parágrafos. */
  color: #333;          /* Texto escuro sobre fundo branco. */
}

.btn-primary {
  display: inline-block;           /* Permite definir dimensões e margens. */
  background: #58c5df;             /* Azul principal. */
  color: #fff;
  padding: 14px 36px;              /* Tamanho confortável do botão. */
  text-decoration: none;           /* Remove sublinhado. */
  font-weight: 700;
  border-radius: 2px;              /* Canto levemente arredondado. */
  transition: background 0.2s ease;/* Efeito suave de transição. */
  margin-top: 14px;                /* Espaço entre texto e botão. */
}

.btn-primary:hover {
  background: #43b2cd; /* Azul escurecido ao passar o mouse. */
}

/* ================================================================
   💻 BLOCO 9 — RESPONSIVO TABLET (ATÉ 900 PX)
   Ajusta grid e paddings para tablets ou telas intermediárias.
================================================================ */
@media (max-width: 900px) {
  .prop-section {
    grid-template-columns: 1fr; /* Empilha imagem e texto (uma coluna). */
  }
  .prop-text {
    padding: 32px 24px 40px;    /* Reduz espaçamento lateral. */
  }
}
/* ================================================================
   🧾 BLOCO 10 — CAIXA DE SCROLL (PRINCIPAL BIOGRAFIA OU SOBRE)
   Define o container com rolagem personalizada e espaçamento fixo.
================================================================ */
.caixa-scroll {
  width: 45vw;           /* Ocupa 45% da largura da viewport. */
  max-width: 800px;      /* Limita largura máxima para boa leitura. */
  height: 700px;         /* Altura total da área de rolagem. */
  background: transparent; /* Fundo transparente para mostrar o hero. */
  border-radius: 4px;    /* Cantos levemente arredondados. */
  color: #fff;           /* Texto branco sobre fundo escuro. */
  padding: 20px;         /* Respiro interno do conteúdo. */
  margin: 0 auto;        /* Centraliza horizontalmente. */
  overflow-y: auto;      /* Habilita rolagem vertical. */
}

/* ================================================================
   🏷 BLOCO 11 — TÍTULO DENTRO DA CAIXA SCROLL
================================================================ */
.caixa-scroll h1 {
  font-family: Baskerville, 'Times New Roman', serif; /* Fonte clássica. */
  font-size: 36px;            /* Tamanho de destaque. */
  margin-bottom: 24px;        /* Espaço abaixo do título. */
  color: #fff;                /* Mantém texto branco. */
}

/* ================================================================
   ✍️ BLOCO 12 — PARÁGRAFOS DA CAIXA SCROLL
================================================================ */
.caixa-scroll p {
  line-height: 1.8;  /* Espaçamento entre linhas para leitura suave. */
  text-align: justify; /* Texto justificado nas margens. */
}

/* ================================================================
   🎨 BLOCO 13 — SCROLLBAR AZUL PERSONALIZADA
   Substitui a barra padrão por uma azul elegante.
================================================================ */
.caixa-scroll::-webkit-scrollbar {
  width: 10px; /* Define espessura da barra. */
}
.caixa-scroll::-webkit-scrollbar-track {
  background: transparent; /* Remove fundo do trilho. */
}
.caixa-scroll::-webkit-scrollbar-thumb {
  background-color: #39c5f1; /* Azul do tema. */
  border-radius: 10px;       /* Bordas arredondadas. */
  border: 2px solid transparent; /* Cria efeito de margem interna. */
  background-clip: content-box;  /* Mantém brilho interno. */
}

/* ================================================================
   📌 BLOCO 14 — TÍTULO FIXO (SCROLL COM CABEÇALHO GRUDADO)
================================================================ */
.titulo-fixo {
  position: sticky;     /* Fixa no topo ao rolar. */
  top: 0;               /* Gruda na borda superior. */
  background: transparent; /* Não bloqueia fundo. */
  z-index: 10;          /* Fica acima do conteúdo rolável. */
  padding-bottom: 10px; /* Espaço inferior opcional. */
}

/* ================================================================
   📜 BLOCO 15 — TEXTO ROLÁVEL SECUNDÁRIO
   Usado em seções com título fixo (biografia, etc.)
================================================================ */
.texto-rolavel {
  height: 70vh;       /* Define altura da área visível. */
  overflow-y: auto;   /* Ativa rolagem vertical. */
  margin-top: -30px; /* Sobe tudo um pouco */
}

/* ================================================================
   📰 BLOCO 16 — CAPA “TODOS OS ARTIGOS”
   Controla a imagem de fundo e texto sobreposto.
================================================================ */
.capa-artigos {
  position: relative;               /* Permite sobreposição do texto. */
  height: 420px;                    /* Altura da capa. */
  background-image: url('fundo-todos-os-artigos.jpg'); /* Imagem da capa. */
  background-size: cover;           /* Cobre toda a área. */
  background-position: center center; /* Centraliza imagem. */
  background-repeat: no-repeat;     /* Evita repetição. */
  color: #fff;                      /* Texto branco sobre imagem. */
}

/* ---------------------------------------------------------------
   Texto sobreposto à imagem de capa.
---------------------------------------------------------------- */
.capa-artigos .texto {
  position: absolute;   /* Posiciona sobre o fundo. */
  left: 420px;          /* Afasta da lateral esquerda. */
  bottom: 45px;         /* Sobe um pouco do rodapé da imagem. */
  color: #fff;
  font-family: Baskerville, 'Times New Roman', serif; /* Estilo elegante. */
}

/* Subtítulo da capa (“categoria”) */
.capa-artigos .texto h2 {
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 1px; /* Espaçamento entre letras. */
  color: #c0bebe;      /* Cinza claro suave. */
  margin-bottom: 10px; /* Espaço antes do título principal. */
}

/* Título principal da capa (“Todos os Artigos”) */
.capa-artigos .texto h1 {
  font-size: 48px; /* Tamanho grande e imponente. */
  margin: 0;       /* Remove margens extras. */
}

/* ================================================================
   🔍 BLOCO 17 — CAIXA DE PESQUISA
   Campo centralizado usado para buscar artigos.
================================================================ */
.caixa-pesquisa {
  display: flex;              /* Organiza input + botão lado a lado. */
  justify-content: center;    /* Centraliza horizontalmente. */
  margin: 30px auto 30px;     /* Espaço acima e abaixo. */
  max-width: 1000px;          /* Largura máxima do componente. */
}

.caixa-pesquisa form {
  display: flex;              /* Layout horizontal. */
  width: 100%;
  border: 1px solid #5a4a3c;  /* Contorno marrom suave. */
  border-radius: 6px;         /* Bordas arredondadas. */
  overflow: hidden;           /* Esconde cantos do conteúdo interno. */
  background: #fff;           /* Fundo branco. */
}

.caixa-pesquisa input {
  flex: 1;                    /* Ocupa o espaço restante do formulário. */
  padding: 12px 16px;         /* Espaçamento interno confortável. */
  border: none;               /* Remove bordas padrão. */
  font-size: 12px;            /* Texto pequeno e discreto. */
  outline: none;              /* Remove borda azul ao clicar. */
}

.caixa-pesquisa input::placeholder {
  color: #7a6f65;             /* Cor do placeholder. */
  text-align: center;         /* Centraliza o texto do placeholder. */
}

.caixa-pesquisa button {
  background: transparent;    /* Fundo limpo. */
  border: none;
  padding: 0 16px;            /* Largura lateral do botão. */
  font-size: 14px;
  cursor: pointer;            /* Mostra cursor clicável. */
  color: #5a4a3c;             /* Tom marrom igual à borda. */
}

/* ================================================================
   🧭 BLOCO 18 — LINKS DE CATEGORIAS
   Links logo abaixo da pesquisa para filtrar artigos.
================================================================ */
.links-categorias {
  display: flex;              /* Organiza links lado a lado. */
  justify-content: center;    /* Centraliza o grupo. */
  gap: 32px;                  /* Espaçamento entre links. */
  margin: -11px auto 26px;    /* Move o grupo ligeiramente pra cima. */
}

.links-categorias a {
  color: #000 !important;     /* Texto preto. */
  text-decoration: none;      /* Remove sublinhado. */
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 4px;        /* Espaço pra barrinha inferior. */
  border-bottom: 2px solid transparent; /* Sem linha até hover. */
  transition: border-color .2s; /* Transição suave. */
}

.links-categorias a:hover {
  border-bottom-color: #39c5f1; /* Linha azul ao passar o mouse. */
}
/* ================================================================
   📣 BLOCO 19 — ÁREA DE COMPARTILHAMENTO (SOCIAL SHARE)
   Exibe ícones de redes sociais abaixo de cada artigo.
================================================================ */
.compartilhar {
  margin: 20px auto 20px;      /* Espaço acima e abaixo. */
  display: flex;               /* Coloca ícones lado a lado. */
  align-items: center;         /* Centraliza verticalmente. */
  justify-content: center;     /* Centraliza horizontalmente. */
  gap: 16px;                   /* Espaço entre ícones. */
  font-size: 16px;             /* Tamanho de texto dos rótulos. */
  color: #333;                 /* Cor neutra de texto. */
  flex-wrap: wrap;             /* Permite quebra em duas linhas em telas pequenas. */
  text-align: center;          /* Centraliza qualquer texto. */
}

.compartilhar img {
  width: 26px;                 /* Tamanho dos ícones. */
  height: 26px;
  transition: transform 0.2s ease; /* Efeito suave no hover. */
}

.compartilhar a:hover img {
  transform: scale(1.2);       /* Amplia o ícone ao passar o mouse. */
}

/* ================================================================
   🖼 BLOCO 20 — CARDS DE ARTIGOS (COM IMAGEM E TÍTULO)
================================================================ */
.artigo-card img {
  width: 100%;                 /* Imagem ocupa todo o card. */
  aspect-ratio: 16 / 9;        /* Mantém proporção de vídeo. */
  object-fit: cover;           /* Preenche sem distorcer. */
  border-radius: 4px;          /* Cantos suaves. */
  margin-bottom: 10px;         /* Espaço abaixo da imagem. */
}

/* ================================================================
   🧩 BLOCO 21 — LAYOUT ESTRUTURAL (GERAL)
   Define altura total, flexbox para fixar rodapé no final da página.
================================================================ */
html, body {
  height: 100%;   /* Ocupam 100% da janela. */
  margin: 0;      /* Remove margens externas. */
}

body {
  min-height: 100vh;           /* Garante altura mínima = tela inteira. */
  display: flex;               /* Ativa flexbox. */
  flex-direction: column;      /* Empilha conteúdo verticalmente. */
}

main {
  flex: 1 0 auto;              /* Faz o main expandir e empurrar rodapé pra baixo. */
}

.footer {
  flex-shrink: 0;              /* Impede o rodapé de ser reduzido. */
}

/* ================================================================
   📜 BLOCO 22 — TEXTO INTRODUTÓRIO (PEQUENAS FALAS)
================================================================ */
.texto-intro {
  font-family: Segoe UI, sans-serif; /* Fonte leve e legível. */
  font-size: 12px;                  /* Tamanho pequeno. */
  color: #fff;                      /* Texto branco. */
  margin-bottom: 10px;              /* Espaçamento abaixo. */
  display: block;
  max-width: 100%;                  /* Evita estouro em containers. */
  overflow-wrap: break-word;        /* Quebra palavras longas. */
  word-wrap: break-word;
  white-space: normal;              /* Permite quebras automáticas. */
}

/* ================================================================
   🧭 BLOCO 23 — BARRA DO TOPO PADRONIZADA (EM TODAS AS PÁGINAS)
================================================================ */
.topbar {
  min-height: 40px;          /* Altura mínima. */
  padding: 0px 0;            /* Remove espaço extra. */
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo-img {
  height: 70px;              /* Ajusta logo. */
  margin: 0 !important;
  display: block;
}
.nav {
  display: flex;
  align-items: center;
}
.nav a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 20px 10px;        /* Espaçamento para clicabilidade. */
  margin: 0 10px;
  border-bottom: 2px solid transparent; /* Linha aparece apenas no hover/active. */
}

/* ================================================================
   🦶 BLOCO 24 — RODAPÉ NOVO (ESTILO AMAZON)
================================================================ */
.new-footer {
  flex-shrink: 0; /* Impede o rodapé de encolher. */
}

/* ---------------------------------------------------------------
   Botão “Voltar ao início”.
---------------------------------------------------------------- */
.back-to-top {
  background-color: #37475a; /* Cinza-azulado. */
  padding: 15px 0;
  text-align: center;
}
.back-to-top a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}
.back-to-top:hover {
  background-color: #485769; /* Escurece no hover. */
}

/* -------------------------------------------------------------
   Corpo principal do rodapé.
---------------------------------------------------------------- */
.new-footer {
  background-color: #232f3e; /* Azul-escuro Amazon. */
  color: #fff;
  padding: 40px 20px 0 20px;
}

/* ---------------------------------------------------------------
   Colunas NAVEGAÇÃO, CATEGORIAS, FALE COMIGO E REDS SOCIAIS
---------------------------------------------------------------- */
.footer-links-container {
  display: flex;
  justify-content: center;   /* mantém o bloco centralizado */
  align-items: flex-start;
  gap: 0px;
  max-width: 1100px;
  margin: 0 auto;            /* centraliza horizontalmente */
  flex-wrap: nowrap;
  padding: 0 50px;
  text-align: left;
  transform: translateX(90px);
  /* REMOVA ou comente esta linha: margin-left: 200px; */
}


/* Mantém "Redes Sociais" alinhado com outras colunas. */
.footer-links-container .footer-column:nth-child(4) {
  margin-top: 0;
}

/* ---------------------------------------------------------------
   Estilos de cada coluna de link.
---------------------------------------------------------------- */
.footer-column {
  min-width: 280px;
}
.footer-column h4 {
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: bold;
}
.footer-column ul {
  list-style: none; /* Remove bolinhas. */
  padding: 0;
  margin: 0;
}
.footer-column ul li {
  margin-bottom: 10px;
}
.footer-column a {
  color: #ddd;
  text-decoration: none;
  font-size: 14px;
}
.footer-column a:hover {
  text-decoration: underline;
}

/* Ícones de redes sociais. */
.footer-column .social-link {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-column .social-icon {
  width: 20px;
  height: 20px;
}

/* Alinha coluna de redes sociais com padding. */
.footer-links-container .footer-column:nth-child(4) ul {
  padding-left: 0px;
}

/* ---------------------------------------------------------------
   Bloco interior do rodapé – logo + newsletter.
---------------------------------------------------------------- */
.footer-logo-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding-top: 30px;
  margin-top: 30px;
  border-top: 1px solid #3a4553; /* Linha divisória. */
}
.footer-logo-img {
  height: 70px;
  width: auto;
}

/* Selecionador de país (opcional). */
.country-selector {
  color: #ccc;
  border: 1px solid #888;
  padding: 6px 12px;
  border-radius: 3px;
  text-decoration: none;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.country-selector:hover {
  background-color: #37475a;
  border-color: #aaa;
}

/* ---------------------------------------------------------------
   Base inferior – direitos autorais.
---------------------------------------------------------------- */
.footer-bottom {
  background-color: #131a22;
  color: #ddd;
  text-align: center;
  padding: 20px;
  margin: 30px -20px 0 -20px;
  font-size: 14px;
}
.footer-bottom-nav {
  margin-bottom: 15px;
}
.footer-bottom-nav a {
  color: #ddd;
  text-decoration: none;
  font-size: 13px;
  margin: 0 10px;
}
.footer-bottom-nav a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Informações legais e créditos finais.
---------------------------------------------------------------- */
.footer-legal-info {
  font-size: 12px;
  color: #aaa;
  margin-top: 20px;
  line-height: 1.5;
}
.footer-legal-info p {
  margin-bottom: 5px;
}

/* ================================================================
   📨 BLOCO 25 — NEWSLETTER (ASSINATURA DE EMAIL)
================================================================ */
.footer-logo-section {
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-newsletter {
  color: #fff;
  max-width: 400px;
  flex-grow: 1;
}
.footer-newsletter h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}
.newsletter-form {
  display: flex;
}
.newsletter-form input[type="email"] {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #888;
  background-color: #fff;
  color: #000;
  border-radius: 3px 0 0 3px;
  font-size: 14px;
}
.newsletter-form button {
  padding: 10px 20px;
  border: none;
  background-color: #39c5f1;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  border-radius: 0 3px 3px 0;
  font-size: 14px;
  white-space: nowrap;
}
.newsletter-form button:hover {
  background-color: #2da7cd;
}
.newsletter-message {
  font-size: 13px;
  margin-top: 8px;
  height: 18px;
  text-align: left;
}
/* ================================================================
  📱 BLOCO 26 — RESPONSIVO UNIFICADO (ATÉ 768PX)
  Aplica regras específicas para telas pequenas.
================================================================ */
@media (max-width: 768px) {

  /* ---------------------------------------------------------------
     🔝 BLOCO 26.1 — TOPO E NAVEGAÇÃO MOBILE
     Ajusta a barra superior, logo e links para empilhamento vertical.
  ---------------------------------------------------------------- */
  .topbar .container {
    display: flex;
    flex-direction: column;  /* Coloca logo e links um abaixo do outro. */
    align-items: center;     /* Centraliza horizontalmente. */
    gap: 5px;                /* Espaço entre elementos. */
  }

  .logo-img {
    max-width: 300px;        /* Limita largura da logo. */
    height: auto;
    margin-top: -40px;       /* Sobe um pouco para compensar topo. */
    margin-bottom: 20px;
    margin-left: -30px;      /* Corrige alinhamento visual. */
  }

  .nav span {
    display: flex;
    flex-wrap: wrap;         /* Permite quebra de linha dos links. */
    gap: 10px;               /* Espaço entre links. */
    justify-content: center;
    position: relative;
    top: 5px;
    left: -10px;
  }

  .nav a {
    display: inline-block;
    padding: 0;
    font-size: 18px;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* ---------------------------------------------------------------
     📰 BLOCO 26.2 — CAPA DOS ARTIGOS (VERSÃO MOBILE)
  ---------------------------------------------------------------- */
  .capa-artigos {
    height: 300px; /* Reduz altura da imagem de capa. */
  }

  .capa-artigos .texto {
    left: 24px;     /* Move texto para a esquerda. */
    bottom: 70px;   /* Sobe um pouco o texto. */
  }

  .capa-artigos h1 {
    position: relative;
    top: 40px;
    left: -8px;
    font-size: 26px;   /* Título menor para caber na tela. */
    text-align: center;
  }

  /* ---------------------------------------------------------------
     🧾 BLOCO 26.3 — CORPO DO POST (AJUSTE DE FONTE)
  ---------------------------------------------------------------- */
  .post div[style*="font-size: 22px"] {
    font-size: 18px !important; /* Diminui fonte para leitura no celular. */
  }

  /* ---------------------------------------------------------------
     🦶 BLOCO 26.4 — RODAPÉ (COLUNAS EMPILHADAS)
  ---------------------------------------------------------------- */
  .footer-links-container {
    flex-direction: column; /* Empilha as colunas. */
    align-items: center;    /* Centraliza cada coluna. */
    text-align: center;
    gap: 30px;
    padding-left: 60px;     /* Pequeno deslocamento visual. */
  }

  .footer-logo-section {
    justify-content: center;
    text-align: center;
  }

  /* ---------------------------------------------------------------
     🏠 BLOCO 26.5 — PÁGINA INICIAL (index.html)
     Ajusta hero, formulário e seção de propósito no celular.
  ---------------------------------------------------------------- */
  .hero {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 96vh;
    padding: 48px 16px;
    background-position: center top;
    background-size: cover;
    text-align: left;
  }

  .hero .hero-content {
    max-width: 640px;
    position: relative;
    margin-left: 10vw;  /* Afasta um pouco do canto esquerdo. */
    top: 100px;
    left: 0;
  }

  .hero .hero-content h1 {
    font-size: 36px;
    line-height: 1.1;
    margin-bottom: 12px;
  }

  .hero .hero-content p {
    font-size: 16px;
    line-height: 1.5;
  }

  .hero .hero-content p br {
    display: none;  /* Remove quebras de linha visuais no mobile. */
  }

  .formulario-section .formulario-container {
    display: block;       /* Empilha texto e campos. */
    padding: 24px 16px;
  }

  .formulario-texto {
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.5;
  }

  .formulario-texto p br {
    display: none; /* Evita quebras forçadas. */
  }

  .formulario-campos form {
    display: grid;
    gap: 12px;
  }

  .formulario-campos input,
  .formulario-campos button {
    width: 100%; /* Campos ocupam largura total. */
    box-sizing: border-box;
  }

  /* ---------------------------------------------------------------
     👨‍👩‍👧 BLOCO 26.6 — SEÇÃO FAMÍLIA (IMAGEM + TEXTO)
  ---------------------------------------------------------------- */
  .prop-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 0;
  }

  .prop-text {
    width: 100%;
    padding: 20px 16px;
    text-align: justify;
  }

  .btn-primary {
    display: block;
    width: 500%;
    max-width: 200px;
    margin: 20px 0 0 130px;
    text-align: center;
  }

  /* ---------------------------------------------------------------
     📜 BLOCO 26.7 — PÁGINA SOBRE (sobre.html)
  ---------------------------------------------------------------- */
  .hero-content {
    position: static;
    transform: none;
    width: 100%;
    margin: 0 auto;
  }

  .caixa-scroll {
    width: 100vw;
    height: 80vh;
    padding: 16px;
    background: rgba(0, 0, 0, 0.4); /* Fundo escurecido translúcido. */
    border-radius: 50px;
    position: relative;
    top: 140px;
    left: -10px;
  }

  .titulo-fixo h1 {
    font-size: 28px;
    text-align: center;
  }

  .texto-rolavel {
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 10px;
  }

  .texto-rolavel p {
    font-size: 15px;
    line-height: 1.6;
  }

  .texto-rolavel::-webkit-scrollbar {
    width: 10px;
  }

  .texto-rolavel::-webkit-scrollbar-track {
    background: transparent;
  }

  .texto-rolavel::-webkit-scrollbar-thumb {
    background-color: #39c5f1;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
  }

  /* ---------------------------------------------------------------
     👨‍👩‍👧 BLOCO 26.8 — REPETE FAMÍLIA (VERSÃO MOBILE)
  ---------------------------------------------------------------- */
  .prop-section {
    display: block;
    padding: 0;
  }

  .prop-image img {
    width: 125%;     /* Expande levemente imagem pra destaque. */
    height: auto;
    display: block;
  }

  .prop-text {
    width: 125%;
    padding: 16px;
    text-align: left;
  }

  .btn-primary {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }

  /* ---------------------------------------------------------------
     🦶 BLOCO 26.9 — RODAPÉ SECUNDÁRIO MOBILE
  ---------------------------------------------------------------- */
  .footer-contacts {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .footer .contact {
    font-size: 14px;
  }
} /* 🔚 Fecha media query principal */



/* ================================================================
   ⚙️ BLOCO 27 — ALTURA GLOBAL PADRÃO PARA TODAS AS CAPAS.
================================================================ */
.capa-artigos {
  background-image: url('/assets/fundo-todos-os-artigos.jpg?v=20251101') !important;
  min-height: 40vh !important; /* 🔚 ALTURA DA IMAGEM DO TOPO */
  height: auto !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

/* ================================================================
   ⚙️ BLOCO 28 — CONTADOR DE VISITANTES.
================================================================ */
#contador-visitas {
  position: absolute;        /* deixa flutuando na imagem */
  top: 350%;                  /* ajuste fino */
  left: 0%;
  font-size: 16px;
  font-family: 'Nunito Sans', sans-serif;
  color: #fbff00;
  text-shadow: 1px 1px 3px #000;
  letter-spacing: 0.5px;
}