/* ============================================================
   01. VARIÁVEIS
   ============================================================ */
:root {
  /* Cores principais */
  --orange: #F6AA3C;
  --gold: #FED52D;

  /* Verde (paleta principal) */
  --verde-claro: #e2f4df;
  --celadon-pale: #eff4f1;   /* fundo seção alternada */
  --celadon-soft:#e4efe8;   /* fundo navbar */
  --celadon: #A9C9A5;
  --celadon-dark: #8aa287;

  /* Neutros */
  --porcelain: #F9FCFA;   /* fundo seção principal / cards */
  --porcelain2: #F2F7F4;   /* fundo body */
  --silver: #CAC9C6;
  --dark: #7d7d7d;
  --white: #FFFFFF;

  /* Espaçamento padrão de seção */
  --section-padding: 3rem 2rem;
}


/* ============================================================
   02. BASE
   ============================================================ */
body {
  background-color: var(--porcelain2);
  color: var(--dark);
  font-family: 'Open Sans', sans-serif;
}


/* ============================================================
   03. NAVBAR
   ============================================================ */
.navbar {
  background-color: var(--celadon-soft);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.navbar-item {
  color: var(--celadon-dark);
  font-weight: 500;
}

.navbar-item:hover {
  color: var(--orange) !important;
  background-color: var(--porcelain2) !important;
}

.imagem-logo {
  height: 60px;
  width: 50px;
  display: block;
}


/* ============================================================
   04. HERO BANNER
   ============================================================ */
.hero-banner {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
}

.hero-content h1 {
  font-size: 4rem;
  font-weight: 700;
  color: var(--white);
}

@media (max-width: 768px) {
  .hero-banner {
    height: 350px;
  }

  .hero-content h1 {
    font-size: 2.2rem;
  }

  .hero-content p {
    font-size: 1rem;
  }
}

.hero-content p {
  font-size: 1.2rem;
  margin-top: 10px;
}

.hero-home {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url('../img/apaefoto.jpeg');
}

.hero-artesanato {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url('../img/artesanatoGoogle.jpg');
}

.hero-horta {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url('../img/hortaGoogle.avif');
}

.hero-picole {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url('../img/picoleGoogle.jpg');
}

.hero-cafe {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url('../img/cafe.jpg');
}

.hero-moto {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url('../img/heroMoto.jpg');
}

.hero-leilao {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url('../img/leilao.jpg');
}

.hero-festaJunina {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url('../img/festaJuninaHero.jpg');
}

.hero-truco {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url('../img/trucoHero.jpg');
}


/* ============================================================
   05. SEÇÕES DE CONTEÚDO
   
   .section-branca  → fundo branco/porcelana  (seções "claras")
   .section-verde   → fundo verde-pálido      (seções "alternadas")
   .section-destaque → fundo verde-claro, CTA de doação/voluntário
   ============================================================ */
.section-branca {
  background-color: var(--porcelain);
  padding: var(--section-padding);
  
}

.section-verde {
  background-color: var(--celadon-pale);
  padding: var(--section-padding);
}

.section-verde p {
  color: var(--dark);
  margin-bottom: 15px;
}

.section-branca p {
  color: var(--dark);
  margin-bottom: 15px;
}

.section-destaque {
  background-color: var(--verde-claro);
  padding: 2rem;
  text-align: center;
}

.section-destaque .title {
  color: var(--celadon-dark);
}


/* ============================================================
   06. TÍTULOS
   ============================================================ */
.title {
  font-family: 'Poppins', sans-serif;
  color: var(--orange);
  font-weight: 550;
}


/* ============================================================
   07. CARDS GENÉRICOS
   Usados nas páginas internas (artesanato, horta, picolé, doação)
   ============================================================ */
.card {
  background-color: var(--porcelain);
  border-radius: 18px;
  padding: 20px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  
}

.card-doacao {
    height: 100%;
    width: 100%;

}

    


/* Cards do impacto com mesma altura */
.columns {
    align-items: stretch;
}

.columns .column-card {
    display: flex;
}

.card-doacao{
    position: relative;
}

.icone-card{
    position: absolute;
    top: 30px;
    left: 30px;
}

.card .title {
  color: var(--celadon);
  margin-bottom: 10px;
}

.card p {
  line-height: 1.6;
}

/* Colunas dentro de card ficam verticalmente centralizadas */
.card .column {
  display: flex;
  align-items: center;
}

/* Texto alinhado à esquerda nos cards informativos */
.texto-info {
  text-align: left;
}

/* Card com hover (eventos da home, café) */
.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}


/* ============================================================
   08. CARDS DE SERVIÇOS (home)
   ============================================================ */
.card-servicos {
  background-color: var(--porcelain);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 20px;
  padding: 0;
  height: 100%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card-servicos .title {
  color: var(--celadon);
}

.card-servicos:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}


/* ============================================================
   09. CARDS DE EVENTOS (carrossel)
   ============================================================ */
.card-evento {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 20px;
}

.info-evento {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.info-evento .button {
  width: 180px;
  height: 45px;
}

/* alias mantido para compatibilidade com Bulma card-content */
.card-conteudo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 20px;
}

@media (max-width: 768px) {
  .card-conteudo {
    flex-direction: column;
    gap: 15px;
  }

  .info-evento .button {
    width: 140px;
  }
}

/* card-mexe = card com hover (usado nas páginas atuais) */
.card-mexe:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.card-mexe .button {
  background-color: var(--celadon);
  color: var(--porcelain);
}

.card-mexe .button:hover {
  background-color: var(--celadon-dark);
}


/* ============================================================
   10. IMAGENS
   ============================================================ */
.imagem-sobre {
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  height: 300px;
  width: 100%;
  max-width: 400px;
  display: block;
  margin: 0 auto;
  object-fit: cover;
}

.imagem-card {
  width: 100%;
  height: 150px;
  border-radius: 10px;
  object-fit: cover;
  filter: brightness(70%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  margin-bottom: 15px;
}

.imagem-info {
  width: 90%;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
  filter: brightness(70%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: block;
  margin: 0 auto 15px;
}

.imagem-despesa {
  width: 90%;
  height: 600px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: block;
  margin: 0 auto 15px;
}

.imagem-evento {
  width: 100%;
  max-width: 350px;
  height: 150px;
  border-radius: 10px;
  object-fit: cover;
  filter: brightness(70%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  margin-bottom: 15px;
}

.imagem-pix {
  height: 150px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  margin-bottom: 15px;
}


/* ============================================================
   11. GALERIA
   ============================================================ */
.galeria-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.galeria-card {
  width: 320px;
  background-color: var(--porcelain);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s;
}

.galeria-card:hover {
  transform: translateY(-5px);
}

.imagem-galeria {
  width: 100%;
  height: 250px;
  object-fit: cover;
  filter: brightness(70%);
  display: block;
}


/* ============================================================
   12. BOTÕES
   ============================================================ */
.button {
  border-radius: 12px;
  background-color: var(--porcelain);
  color: var(--celadon);
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  padding: 10px 0;
  text-align: center;
  transition: background-color 0.2s;
}

.button:hover {
  background-color: var(--porcelain2);
}

.button.is-warning {
  background-color: var(--orange);
  color: var(--white);
}

.button.is-warning:hover {
  background-color: #e09530;
}

.button.is-light {
  background-color: var(--gold);
  color: var(--porcelain);
}

.button.is-light:hover {
  background-color: #e8c125;
}


/* ============================================================
   13. LINHAS DECORATIVAS
   
   .linha-curta    → alinhada à esquerda, subtítulos de seção
   .linha-media    → centralizada, CTA e separações
   .linha-longa    → centralizada, doação e voluntários
   .linha-galeria  → centralizada, separação da galeria
   ============================================================ */
.linha-curta,
.linha-media,
.linha-longa,
.linha-galeria {
  border: none;
  height: 1px;
}

.linha-curta {
  width: 220px;
  margin-left: 0;
  background: linear-gradient(to right, var(--gold), var(--orange), transparent);
}

.linha-media {
  width: 300px;
  margin: 10px auto;
  background: linear-gradient(to right, transparent, var(--celadon-dark), transparent);
}

.linha-longa {
  width: 600px;
  max-width: 90%;
  margin: 10px auto;
  background: linear-gradient(to right, transparent, var(--celadon-dark), transparent);
}

.linha-galeria {
  width: 220px;
  margin: 15px auto 30px;
  background: linear-gradient(to right, transparent, var(--orange), transparent);
}

/* Aliases mantidos para não quebrar HTMLs existentes */
.linha1 { width: 220px; margin-left: 0;     background: linear-gradient(to right, var(--gold), var(--orange), transparent); }
.linha2 { width: 300px; margin: 10px auto;  background: linear-gradient(to right, transparent, var(--celadon-dark), transparent); }
.linha3 { width: 600px; max-width: 90%; margin: 10px auto;  background: linear-gradient(to right, transparent, var(--celadon-dark), transparent); }
.linha4 { width: 220px; margin: 15px auto 30px; background: linear-gradient(to right, transparent, var(--orange), transparent); }
.linha1, .linha2, .linha3, .linha4 { border: none; height: 1px; }

hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, var(--celadon), transparent);
}


/* ============================================================
   14. CARROSSEL SWIPER
   ============================================================ */
.swiper {
  padding: 20px 10px 50px;
}

.swiper-slide {
  height: auto;
}

.swiper-pagination {
  position: absolute;
  bottom: -5px !important;
}

.swiper-pagination-bullet {
  background: var(--silver);
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: var(--gold)!important;
}

.meuSwiper {
    width: 80%;
    max-width: 800px;
    height: 400px;
    margin: auto;
    padding-bottom: 50px;
}

.meuSwiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}



.swiper-pagination {
    bottom: 0 !important;
}



/* ============================================================
   15. TEXTO CORRIDO (voluntários, doação)
   ============================================================ */
.texto-padrao {
  max-width: 900px;
  margin: 30px auto;
  padding: 30px 20px;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.7;
  color: #444;
}

.texto-padrao h1 {
  font-size: 32px;
  margin-bottom: 15px;
}

.texto-padrao p {
  margin-bottom: 16px;
  text-align: justify;
}


/* ============================================================
   16. UTILITÁRIOS
   ============================================================ */
.link {
  color: var(--dark);
}

.icon.is-large {
  color: var(--celadon);
  margin-bottom: 15px;
}

.columns.is-vcentered {
  align-items: center;
}