/* =========================================
   VARIÁVEIS GLOBAIS E RESET
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root {
  /* Altere os hexadecimais se necessário para bater exato com o seu Canva */
  --cor-primaria: #D67A1F; /* Laranja dos botões e detalhes */
  --cor-texto-escuro: #222222;
  --cor-texto-claro: #F5F5F5;
  --cor-fundo-claro: #F8F8F8;
  --cor-fundo-escuro: #0F0E0E; /* Preto do rodapé */
  --cor-borda: #E0E0E0;
  
  --fonte-titulo: 'Playfair Display', serif;
  --fonte-texto: 'Inter', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--fonte-texto);
  color: var(--cor-texto-escuro);
  background-color: var(--cor-fundo-claro);
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s ease;
}

ul {
  list-style: none;
}

/* Botões Globais */
.btn-primario {
  background-color: var(--cor-primaria);
  color: #fff;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-primario:hover {
  background-color: #b56518; /* Laranja um pouco mais escuro */
}
/* =========================================
   CABEÇALHO (HEADER)
   ========================================= */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.header-principal {
  background-color: #ffffff;
  padding: 20px 0;
  border-bottom: 1px solid var(--cor-borda);
}

.flex-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 106 px; /* Ajuste conforme o tamanho do seu SVG */
}

.nav-principal ul {
  display: flex;
  gap: 30px;
}

.nav-principal a {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--cor-texto-escuro);
}

.nav-principal a.ativo, 
.nav-principal a:hover {
  color: var(--cor-primaria);
  border-bottom: 2px solid var(--cor-primaria);
  padding-bottom: 5px;
}

.header-acoes {
  display: flex;
  align-items: center;
  gap: 20px;
}

.btn-idioma {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}
/* =========================================
   ESTILOS DO MIOLO DA HOME
   ========================================= */

/* 2.1 Banner Hero */
.hero-home {
  position: relative;
  /* Certifique-se de salvar a imagem do Heráclito nesta pasta */
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('/img/sobral-pinto-home2.jpg') no-repeat center center/cover;
  padding: 200px 0;
  text-align: center;
  color: #ffffff;
  min-height: 700px;
}

.hero-conteudo {
  max-width: 800px;
  margin: 0 auto;
}

.hero-frase {
  font-family: var(--fonte-titulo);
  font-style: italic;
  color: var(--cor-primaria);
  font-size: 18px;
  margin-bottom: 20px;
}

.hero-titulo {
  font-family: var(--fonte-titulo);
  font-size: 52px;
  font-weight: 700;
  margin-bottom: 20px;
}

.hero-descricao {
  font-size: 16px;
  color: #e0e0e0;
  max-width: 600px;
  margin: 0 auto 40px;
  font-weight: 400;
}

.hero-botoes {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* Botão Secundário Transparente (Outlined) */
.btn-secundario {
  background-color: transparent;
  color: #fff;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  border: 2px solid #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secundario:hover {
  background-color: #ffffff;
  color: var(--cor-texto-escuro);
}

/* 2.2 Grid Legado e Últimas */
.secao-legado-noticias {
  padding: 80px 0;
  background-color: var(--cor-fundo-claro);
}

.grid-legado {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: start;
}

.tag-laranja {
  font-size: 11px;
  font-weight: 600;
  color: var(--cor-primaria);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 15px;
}

.titulo-serifado {
  font-family: var(--fonte-titulo);
  font-size: 36px;
  color: var(--cor-texto-escuro);
  line-height: 1.3;
  margin-bottom: 25px;
}

.texto-institucional {
  font-size: 15px;
  color: #555555;
  margin-bottom: 30px;
}

.lista-beneficios li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cor-texto-escuro);
  margin-bottom: 15px;
}

.icone-check {
  width: 20px;
  height: 20px;
 
}

/* Card de Últimas Notícias */
.card-ultimas {
  background-color: #ffffff;
  padding: 35px;
  border-radius: 8px;
  border-top: 4px solid var(--cor-primaria);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.titulo-card {
  font-family: var(--fonte-titulo);
  font-size: 22px;
  color: var(--cor-texto-escuro);
  margin-bottom: 25px;
}

.noticia-item {
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}

.noticia-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.noticia-item:first-of-type {
  padding-top: 0;
}

.noticia-data {
  font-size: 11px;
  color: #999999;
  display: block;
  margin-bottom: 6px;
}

.noticia-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--cor-texto-escuro);
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.2s ease;
}

.noticia-titulo:hover {
  color: var(--cor-primaria);
}

/* 2.3 Seção Citação Central */
.secao-citacao-home {
  padding: 80px 0 100px;
  background-color: #ffffff;
  text-align: center;
}

.conteudo-citacao {
  max-width: 750px;
  margin: 0 auto;
}

.aspas-grandes {
  font-family: var(--fonte-titulo);
  font-size: 80px;
  line-height: 1;
  color: #f7d3af; /* Tom suave de laranja/bege para as aspas */
  display: block;
  height: 40px;
  margin-bottom: 10px;
}

.texto-citacao {
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-style: italic;
  color: #444444;
  line-height: 1.6;
  margin-bottom: 25px;
}

.autor-citacao {
  font-family: var(--fonte-texto);
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-texto-escuro);
  display: block;
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: 0.5px;
}

.cargo-citacao {
  font-size: 11px;
  color: #888888;
  display: block;
  margin-top: 4px;
}
/* =========================================
   PÁGINA: O INSTITUTO
   ========================================= */

/* Utilitários */
.text-center { text-align: center; }
.mb-10 { margin-bottom: 10px; }
.mb-40 { margin-bottom: 40px; }
.texto-padrao { font-size: 15px; color: #555; line-height: 1.6; text-align: justify; }

/* 1. Palavra da Presidência */
.secao-presidencia {
  padding: 80px 0;
  background-color: var(--cor-fundo-claro);
}

.grid-presidencia {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
  align-items: center;
}

.foto-presidente {
  width: 100%;
  border-radius: 4px;
  display: block;
}

.legenda-foto {
  text-align: center;
  margin-top: 15px;
}

.legenda-foto strong {
  display: block;
  font-size: 14px;
  color: var(--cor-texto-escuro);
}

.legenda-foto span {
  font-size: 12px;
  color: #888;
}

/* 2. Nossos Pilares (Flip Cards) */
.secao-pilares {
  padding: 80px 0;
  background-color: #f0f0f0; /* Um cinza levemente diferente para destacar */
}

.subtitulo-italico {
  font-size: 14px;
  font-style: italic;
  color: #888;
  margin-bottom: 50px;
}

.grid-pilares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* O contêiner da perspectiva 3D */
.flip-card {
  background-color: transparent;
  height: 320px;
  perspective: 1000px; /* Cria o espaço 3D */
}

/* O card interno que vai girar */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d; /* Mantém os filhos no espaço 3D */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* O gatilho do giro ao passar o mouse */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Frente e Verso compartilhados */
.flip-card-frente, .flip-card-costas {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden; /* Esconde a parte de trás quando virado */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  border-radius: 4px;
}

/* Frente do Card */
.flip-card-frente {
  background-color: #ffffff;
  border-bottom: 4px solid #f7d3af; /* Aquele detalhe laranja claro na base */
}

.flip-card-frente h3 {
  font-family: var(--fonte-titulo);
  font-size: 24px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.ver-mais {
  font-size: 12px;
  font-weight: 700;
  color: var(--cor-primaria);
  text-transform: uppercase;
}

/* Verso do Card */
.flip-card-costas {
  background-color: var(--cor-fundo-escuro);
  color: #ffffff;
  transform: rotateY(180deg); /* Já começa virado para trás */
  border-bottom: 4px solid #f7d3af;
}

.flip-card-costas p {
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

/* 3. Membros Fundadores (Abas) */
.secao-membros {
  padding: 80px 0 120px;
  background-color: #ffffff;
}

.abas-navegacao {
  display: flex;
  justify-content: center;
  background-color: var(--cor-fundo-escuro);
  border-radius: 30px;
  padding: 5px;
  max-width: 400px;
  margin: 0 auto 50px;
}

.aba-btn {
  background-color: transparent;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 1px;
}

.aba-btn:hover {
  background-color: rgba(255,255,255,0.1);
}

.aba-btn.ativo {
  background-color: #ffffff;
  color: var(--cor-fundo-escuro);
}

.conteudo-aba {
  display: none; /* Esconde todas por padrão */
  animation: fadeEffect 0.5s; /* Efeito suave ao abrir */
}

.conteudo-aba.ativo {
  display: block; /* Mostra apenas a ativa */
}

/* Animação do JS */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

.membro-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  text-align: left;
  max-width: 900px;
  margin: 0 auto;
}

.membro-foto-placeholder {
  background-color: #e0e0e0;
  border-radius: 12px;
  height: 300px; /* Ajuste conforme necessário */
  width: 100%;
}

.membro-info h3 {
  font-family: var(--fonte-titulo);
  font-size: 28px;
  letter-spacing: 2px;
  margin-bottom: 5px;
}

.membro-cargo {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--cor-primaria);
  margin-bottom: 20px;
  letter-spacing: 1px;
}
/* =========================================
   PÁGINA: ACERVO HISTÓRICO
   ========================================= */

.cabecalho-acervo {
  padding: 60px 0 20px;
  background-color: #ffffff;
}

.text-left { text-align: left; }

/* 1. Galeria Grid */
.secao-galeria {
  padding: 0 0 60px;
  background-color: #ffffff;
}

.grid-galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.item-galeria {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  /* Proporção quadrada aproximada */
  aspect-ratio: 1 / 1; 
  cursor: zoom-in;
}

.item-galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.item-galeria:hover img {
  transform: scale(1.05); /* Efeito de leve zoom ao passar o mouse */
}

/* Faixa escura com o ID do Documento */
.overlay-id {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(30, 30, 30, 0.9);
  padding: 15px 0;
  text-align: center;
}

.overlay-id span {
  color: #ffffff;
  font-family: var(--fonte-texto);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
}

/* 2. Paginação */
/* Adicione no seu bloco geral de paginação no CSS */
.paginacao {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap; /* Permite que os números quebrem linha se forem muitos, ou alinhem corretamente */
  max-width: 100%;
  padding: 10px 0;
}

.btn-pagina {
  background: transparent;
  border: none;
  font-family: var(--fonte-texto);
  font-size: 16px;
  font-weight: 600;
  color: #cccccc;
  cursor: pointer;
  padding: 5px 10px;
  transition: color 0.2s;
}

.btn-pagina:hover {
  color: var(--cor-primaria);
}

.btn-pagina.ativo {
  color: var(--cor-primaria);
}
/* Adicione no seu bloco geral de paginação no CSS */
.paginacao {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap; /* Permite que os números quebrem linha se forem muitos, ou alinhem corretamente */
  max-width: 100%;
  padding: 10px 0;
}

/* 3. Cronologia do Mestre */
.secao-cronologia {
  padding: 60px 0 100px;
  background-color: #ffffff;
}

.caixa-cronologia {
  background-color: #FAF4EB; /* Fundo bege suave do protótipo */
  padding: 60px;
  border-radius: 8px;
  max-width: 900px;
  margin: 0 auto;
}

.timeline-container {
  position: relative;
  padding-left: 100px; /* Espaço para o ano */
  margin-top: 40px;
}

/* A Linha vertical da timeline */
.timeline-container::before {
  content: '';
  position: absolute;
  left: 120px; /* Posição exata da linha */
  top: 10px;
  bottom: 10px;
  width: 2px;
  background-color: #E2B28A; /* Cor da linha laranja/bege */
}

.timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 50px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-ano {
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 700;
  color: var(--cor-primaria);
  position: absolute;
  left: -100px;
  top: -2px;
}

/* Os pontos (bolinhas) na linha do tempo */
.timeline-ponto {
  position: absolute;
  left: 16px; /* Ajuste para alinhar com a linha */
  top: 5px;
  width: 10px;
  height: 10px;
  background-color: var(--cor-primaria);
  border-radius: 50%;
  z-index: 2;
}

.timeline-texto {
  padding-left: 50px; /* Afasta o texto do ponto/linha */
  font-size: 15px;
  color: #444444;
  line-height: 1.5;
}
/* =========================================
   PÁGINA: CONTATO
   ========================================= */

.bg-cinza-claro {
  background-color: #F4F4F4; /* Cor de fundo da página de contato */
}

.secao-contato {
  padding: 60px 0 100px;
}

.mb-20 { margin-bottom: 20px; }
.mt-40 { margin-top: 40px; }

/* Botões Toggle (Contato Geral x Associação) */
.toggle-contato {
  display: inline-flex;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
}

.btn-toggle {
  background: transparent;
  border: none;
  padding: 12px 30px;
  font-family: var(--fonte-texto);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-toggle.ativo {
  background-color: #111111;
  color: #ffffff;
}

/* Transição suave entre os forms */
.conteudo-form {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.conteudo-form.ativo {
  display: block;
  opacity: 1;
}

/* Form 1: Contato Geral Layout */
.grid-contato-geral {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.bloco-info {
  margin-bottom: 25px;
}

.bloco-info strong {
  display: block;
  font-size: 14px;
  color: var(--cor-texto-escuro);
  margin-bottom: 5px;
}

.bloco-info p {
  font-size: 14px;
  color: #666;
  font-style: italic;
}

.card-mensagem {
  background-color: #ffffff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.titulo-card-menor {
  font-family: var(--fonte-titulo);
  font-size: 24px;
  margin-bottom: 25px;
}

/* Estilização Base de Formulários e Inputs */
.grupo-input {
  margin-bottom: 20px;
}

.grupo-input label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--cor-primaria);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.input-padrao, .textarea-padrao {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  font-family: var(--fonte-texto);
  font-size: 14px;
  color: var(--cor-texto-escuro);
  background-color: #ffffff;
  transition: border-color 0.3s;
}

.input-padrao:focus, .textarea-padrao:focus {
  outline: none;
  border-color: var(--cor-primaria);
}

.textarea-padrao {
  resize: vertical; /* Permite redimensionar apenas na altura */
}

/* Form 2: Associação */
.card-associacao {
  background-color: #ffffff;
  padding: 50px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.titulo-sessao-form {
  font-family: var(--fonte-titulo);
  font-size: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
}

.radios-membro {
  display: flex;
  gap: 30px;
}

.radio-label {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* O grid de 2 colunas para organizar os campos (Nome ao lado de CPF, etc) */
.grid-form-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px; /* 0 de espaçamento vertical (pois o grupo-input já tem), 30px horizontal */
}

/* Botões de Upload Customizados (Oculta o botão nativo do navegador) */
.grupo-uploads {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.btn-upload {
  display: block;
  background-color: #F8F5F2; /* Cor de fundo levemente bege/cinza do protótipo */
  border: 1px solid #EAE0D5;
  border-radius: 4px;
  padding: 15px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--cor-primaria);
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-upload:hover {
  background-color: #F0EBE5;
}

/* Esconde o input file original que é feio */
.btn-upload input[type="file"] {
  display: none; 
}

/* Botão de Enviar Preto (usado na associação) */
.btn-preto {
  background-color: #111111;
  color: #fff;
  padding: 15px 30px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%; /* No protótipo parece ocupar uma boa largura, mas você pode ajustar */
  max-width: 300px;
}

.btn-preto:hover {
  background-color: #333333;
}
/* =========================================
   RODAPÉ (FOOTER)
   ========================================= */
.rodape-principal {
  background-color: var(--cor-fundo-escuro);
  color: var(--cor-texto-claro);
  padding: 60px 0 20px;
  
}

.grid-rodape {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.rodape-titulo-logo {
  font-family: var(--fonte-titulo);
  font-size: 18px;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

.rodape-citacao {
  
  font-size: 13px;
  color: #aaaaaa;
  margin-bottom: 20px;
  max-width: 300px;
}

.redes-sociais {
  display: flex;
  gap: 15px;
}

.redes-sociais img {
  width: 24px;
  height: 24px;
}

.coluna-rodape h4 {
  font-size: 12px;
  color: var(--cor-primaria);
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.links-uteis ul li {
  margin-bottom: 10px;
}

.links-uteis a {
  font-size: 13px;
  color: #cccccc;
}

.links-uteis a:hover {
  color: var(--cor-primaria);
}

.info-rodape p {
  font-size: 13px;
  color: #cccccc;
  margin-bottom: 10px;
}

.mt-15 { margin-top: 15px; display: inline-block; }

.rodape-direitos {
  text-align: center;
  border-top: 1px solid #333;
  padding-top: 20px;
  font-size: 11px;
  color: #777777;
  letter-spacing: 1px;
}
/* =========================================
   MENU HAMBÚRGUER (Desktop vs Mobile)
   ========================================= */

/* Esconde o botão hambúrguer no computador */
.btn-menu-mobile {
  display: none; 
  background: none;
  border: none;
  cursor: pointer;
}

/* Permite que o container "quebre" linha quando o menu mobile abrir */
.flex-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; 
}
/* =========================================
   RESPONSIVIDADE (MEDIA QUERIES)
   ========================================= */

/* 1. TABLETS E TELAS MÉDIAS (até 992px) */
@media (max-width: 992px) {
  /* Reduz os espaçamentos das grades */
  .grid-legado, .grid-presidencia, .membro-layout, .grid-contato-geral {
    gap: 30px;
  }
  
  /* Pilares passam a ter 2 colunas em vez de 3 */
  .grid-pilares {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Galeria passa a ter 3 colunas em vez de 4 */
  .grid-galeria {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Ajuste fino na linha do tempo para não encostar na borda */
  .timeline-ano {
    left: -80px; 
  }
}

/* 2. SMARTPHONES E TABLETS EM PÉ (até 768px) */
@media (max-width: 768px) {
  
  /* --- HEADER E FOOTER --- */
 /* --- HEADER MOBILE (MENU HAMBÚRGUER) --- */
  .btn-menu-mobile {
    display: block; /* Mostra o botão hambúrguer */
  }

  .nav-principal, .header-acoes {
    display: none; /* Esconde a lista e botões por padrão no celular */
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }

  /* Quando o menu é ativado pelo JS, essa classe é adicionada */
  .nav-principal.menu-aberto, .header-acoes.menu-aberto {
    display: flex;
    flex-direction: column;
  }

  .nav-principal ul {
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cor-borda);
  }

  .header-acoes {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding-top: 10px;
  }
  
  .grid-rodape {
    grid-template-columns: 1fr; /* Empilha as 3 colunas em 1 */
    gap: 40px;
    text-align: center;
  }
  
  .redes-sociais {
    justify-content: center;
  }
  
  .rodape-citacao {
    margin: 0 auto 20px;
  }

  /* --- HOME --- */
  .hero-home {
    padding: 80px 0;
    min-height: 350px;
    padding: 80px 0; /* Altura reduzida para mobile */
  }
  
  .hero-titulo {
    font-size: 32px; /* Diminui o título principal */
  }
  
  .hero-botoes {
    flex-direction: column; /* Coloca um botão em cima do outro */
  }
  
  .grid-legado {
    grid-template-columns: 1fr; /* Empilha texto e card de notícias */
  }

  /* --- O INSTITUTO --- */
  .grid-presidencia {
    grid-template-columns: 1fr; /* Foto em cima, texto embaixo */
  }
  
  .grid-pilares {
    grid-template-columns: 1fr; /* 1 card por linha */
  }
  
  .abas-navegacao {
    flex-direction: column;
    border-radius: 8px;
  }
  
  .aba-btn {
    border-radius: 4px;
    margin-bottom: 5px;
  }
  
  .membro-layout {
    grid-template-columns: 1fr; /* Foto do membro em cima, info embaixo */
  }
  
  .membro-foto-placeholder {
    height: 430px;
  }

  /* --- ACERVO HISTÓRICO --- */
  .grid-galeria {
    grid-template-columns: 1fr; /* Força 1 única foto por linha no celular */
  }
  
  .caixa-cronologia {
    padding: 30px 20px;
  }
  
  /* Ajuste crucial na linha do tempo para caber na tela do celular */
  .timeline-container {
    padding-left: 20px;
  }
  
  .timeline-container::before {
    left: 0px; /* Joga a linha vertical totalmente para a esquerda */
  }
  
  .timeline-item {
    flex-direction: column;
    margin-bottom: 30px;
  }
  
  .timeline-ano {
    position: static; /* Tira o ano da lateral e coloca acima do texto */
    margin-bottom: 5px;
  }
  
  .timeline-ponto {
    left: -5px; 
    top: 32px; /* Alinha a bolinha com o novo layout */
  }
  
  .timeline-texto {
    padding-left: 0;
  }

  /* --- CONTATO --- */
  .grid-contato-geral, .grid-form-2-col {
    grid-template-columns: 1fr; /* Empilha todos os formulários e campos duplos */
  }
  
  }
  
  .radios-membro {
    flex-direction: column;
    gap: 15px;
  }
  
  .toggle-contato {
    flex-direction: column;
    width: 100%;
  }
  
  .btn-toggle {
    width: 100%;
    border-radius: 0;
  }
  
  .card-associacao, .card-mensagem {
    padding: 25px; /* Reduz o padding interno dos quadros brancos */
  }

/* --- AJUSTES DE ESPAÇAMENTO PÁGINA CONTATO (MOBILE) --- */
  .secao-contato .titulo-serifado {
    padding: 0 20px;
  }

  .toggle-contato {
    margin: 0 20px 40px;
    width: calc(100% - 40px); /* Ajusta a largura respeitando a margem */
  }

  .info-contato-esquerda {
    padding: 0 20px;
    margin-bottom: 20px;
  }

/* 3. SMARTPHONES PEQUENOS (até 480px) */
@media (max-width: 480px) {
  .grid-galeria {
    grid-template-columns: 1fr; /* 1 foto por linha em telas muito finas */
  }
  
  .aspas-grandes {
    font-size: 60px;
  }
  
  .texto-citacao {
    font-size: 16px;
  }
}