/* =============================================================
   inicio.css — página inicial da EDUC
   Controla cores, seções (quem somos, projetos, territórios,
   blogs, contato), carrossel e versão mobile.
   ============================================================= */

/* ---------- Variáveis globais ---------- */
:root {
  --verde-escuro:  #020d02;   /* fundo das seções Projetos e Blogs */
  --verde-card:    #0a1f14;   /* fundo de cada card do carrossel */
  --dourado:       #c9a24a;   /* títulos pequenos, bordas e hover */
  --dourado-claro: #e4c074;   /* variação mais clara do dourado */
  --fundo-claro:   #e5e8dc;   /* fundo da página e seções claras */
  --branco:        #ffffff;   /* texto sobre fundo verde */
  --texto-escuro:  #333333;   /* texto padrão do body */
  --texto-suave:   #444444;   /* parágrafos e títulos em fundo claro */
  --texto-claro:   rgba(255, 255, 255, 0.82); /* texto suave no verde */
}

/* ---------- Reset ---------- */
* {
  margin: 0;                 /* tira margem padrão do navegador */
  padding: 0;                /* tira padding padrão */
  box-sizing: border-box;    /* padding entra na largura total */
}

body {
  font-family: 'Poppins', sans-serif; /* fonte da home */
  line-height: 1.6;                   /* espaço entre linhas */
  background-color: var(--fundo-claro); /* cor de fundo da página */
  color: var(--texto-escuro);           /* cor do texto corrido */
}

/* ---------- Banner do topo ---------- */
.section-cabecalho {
  display: flex;             /* alinha o conteúdo com flex */
  justify-content: center;   /* centraliza na horizontal */
  align-items: center;       /* centraliza na vertical */
  background-color: var(--fundo-claro);
  max-width: 1200px;         /* não passa de 1200px */
  margin: 0 auto;            /* centraliza o bloco na tela */
  padding: 20px;             /* espaço interno */
  transition: transform 0.3s ease; /* anima o hover */
}

.section-cabecalho:hover {
  transform: translateY(-5px); /* sobe 5px quando o mouse passa */
}

.fundo {
  width: 100%;               /* ocupa a largura do header */
  overflow: hidden;          /* corta o que passar da caixa */
  background: var(--fundo-claro);
  border-radius: 8px;        /* cantos arredondados */
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* sombra leve */
}

.fundo img {
  width: 100%;               /* imagem do banner em largura total */
  height: auto;              /* mantém proporção */
  display: block;            /* remove espaço embaixo da imagem */
}

/* ---------- Todas as <section> ---------- */
section {
  padding: 24px;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 20px auto;         /* espaço entre seções + centro */
  max-width: 1200px;
}

.section-quemsomos  { background: var(--fundo-claro); } /* fundo claro */
.section-projetos   { background: var(--verde-escuro); color: var(--branco); text-align: left; padding: 64px 28px; } /* bloco escuro */
.section-territorio { background: var(--fundo-claro); text-align: left; padding: 48px 28px; }
.section-blogs      { background: var(--verde-escuro); color: var(--branco); text-align: left; padding: 64px 28px; }
.section-contato    { background: var(--fundo-claro); }

/* ---------- Quem Somos ---------- */
.divCardquemsomos {
  display: flex;             /* texto, foto e números em linha */
  flex-wrap: wrap;           /* quebra linha no mobile */
  justify-content: center;
  align-items: center;
  gap: 24px;                 /* espaço entre as colunas */
  margin-top: 20px;
}

.cardquemsomos,
.cardcontato {
  flex: 1;                   /* cada card divide o espaço */
  min-width: 260px;          /* abaixo disso, desce para outra linha */
  padding: 8px 0;
  text-align: left;
}

.cardquemsomos h5,
.cardcontato h5 {
  margin: 0 0 20px 0;        /* só margem embaixo */
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 4px;       /* letras espaçadas (rótulo) */
  color: var(--dourado);
  text-align: left;
  line-height: 1.4;
}

.cardquemsomos h4,
.cardcontato h4 {
  margin: 0 0 16px 0;
  color: var(--texto-suave);
  text-align: left;
  font-size: clamp(30px, 3vw, 44px); /* 30px a 44px conforme a tela */
  line-height: 1.08;
  font-weight: 700;
}

.cardquemsomos h4 span,
.cardcontato h4 span {
  display: block;            /* cada <span> vira uma linha do título */
}

.info-text {
  margin: 5px 0;
  color: var(--texto-suave);
  text-align: left;
  line-height: 1.5;
}

.imagem-quemsomos {
  flex: 1 1 320px;           /* cresce/encolhe; base 320px */
  min-width: 0;              /* permite encolher no flex */
  max-width: 100%;
}

.imagem-quemsomos img {
  width: 100%;
  height: auto;
  max-width: 900px;
  object-fit: cover;         /* preenche sem distorcer */
  border-radius: 10px;
  transition: transform 0.3s ease;
  display: block;
}

/* ---------- Infográficos ---------- */
.infografico-card {
  flex: 1 1 260px;
  max-width: 460px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  text-align: center;
}

.infografico {
  flex: 1 1 120px;
  min-width: 110px;
  display: flex;
  flex-direction: column;    /* ícone, número e rótulo em coluna */
  align-items: center;
  gap: 6px;
}

.infografico img {
  width: 34px;
  height: 34px;
  margin-bottom: 4px;
  object-fit: contain;       /* ícone inteiro, sem corte */
  transition: transform 0.3s ease;
}

.infografico-numero {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  color: var(--texto-escuro);
  margin: 0;
}

.infografico-label {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #555;
  text-transform: uppercase;
  margin: 2px 0 0 0;
}

/* Resumo do card de projeto no carrossel (texto branco visível). */
.cardprojetos__descricao {
  display: block !important;           /* garante que aparece */
  color: #f2f2f2 !important;           /* contraste no card verde */
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 18px 16px 18px !important; /* alinhado ao título do card */
  height: auto !important;
  max-height: none !important;         /* não use auto aqui */
  overflow: visible !important;        /* não corta o texto */
}

/* ---------- Territórios ---------- */
.section-territorio {
  background: var(--fundo-claro);
  text-align: left;
  padding: 48px 28px;
}

.divCardsterritorios {
  display: grid;             /* 3 áreas: texto, mapa, fotos */
  grid-template-columns: minmax(240px, 1fr) auto minmax(200px, 1fr);
  grid-template-areas: "texto mapa fotos";
  column-gap: 28px;
  align-items: start;
  text-align: left;
}

.divCardsterritorios .cardterritorios {
  grid-area: texto;          /* coluna da esquerda */
  min-width: 0;
  padding: 0;
  text-align: left;
}

.divCardsterritorios .imagem-territorios {
  grid-area: mapa;           /* coluna do meio (mapa) */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
}

.divCardsterritorios .foto-territorios {
  grid-area: fotos;          /* coluna da direita */
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 miniaturas por linha */
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;          /* rola se passar da altura */
}

.divCardsterritorios .imagem-territorios img {
  width: 100%;
  max-width: 280px;
  height: auto;
  object-fit: contain;       /* mapa inteiro */
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.divCardsterritorios .foto-territorios img {
  width: 100%;
  height: 58px;              /* miniaturas iguais */
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;           /* abre o modal no JS */
}

/* Tablet: texto em cima; mapa e fotos embaixo. */
@media (max-width: 992px) {
  .divCardsterritorios {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "texto texto"
      "mapa fotos";
    row-gap: 24px;
  }
}

/* Celular: uma coluna só. */
@media (max-width: 600px) {
  .divCardsterritorios {
    grid-template-columns: 1fr;
    grid-template-areas:
      "texto"
      "mapa"
      "fotos";
  }
  .divCardsterritorios .foto-territorios {
    grid-template-columns: repeat(4, 1fr); /* 4 miniaturas na linha */
    max-height: none;
    overflow: visible;
  }
}

/* ---------- Projetos e Blogs ---------- */
.divCardsprojetos,
.divCardsblogs {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 1.7fr; /* texto | carrossel */
  column-gap: 48px;
  align-items: center;
}

.apresentacao {
  grid-column: 1;            /* coluna da esquerda */
  grid-row: 1 / span 2;      /* ocupa as 2 linhas */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.apresentacao .cor-projeto1,
.apresentacao .cor-blog1 {
  color: var(--dourado);     /* rótulo “PROJETOS” / “BLOGS” */
  letter-spacing: 4px;
  text-transform: uppercase;
}

.apresentacao .cor-projeto2,
.apresentacao .cor-blog2 {
  color: var(--branco);      /* título branco grande */
  font-size: clamp(34px, 3.2vw, 52px);
  text-transform: uppercase;
}

.apresentacao .cor-projeto3,
.apresentacao .cor-blog3 {
  color: var(--dourado);     /* subtítulo dourado */
  text-transform: uppercase;
}

.cta-todos {
  display: inline-flex;      /* texto + linha + seta */
  align-items: center;
  gap: 12px;
  color: var(--branco);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 26px;
}

.cta-todos:hover { color: var(--dourado); } /* hover no link */
.cta-todos:hover .cta-todos__seta { transform: translateX(5px); } /* seta anda */

.projetos-seta,
.blogs-seta {
  width: 46px;
  height: 46px;
  border-radius: 50%;        /* botão redondo */
  border: 2px solid var(--dourado);
  color: var(--dourado);
  background: transparent;
  cursor: pointer;
}

.cards-rolagem {
  grid-column: 2;            /* coluna da direita */
  grid-row: 2;
  display: flex;             /* cards em fila */
  gap: 20px;
  overflow-x: auto;          /* rola na horizontal */
  scroll-snap-type: x mandatory; /* para no início de cada card */
}

.cardprojetos,
.cardblogs {
  flex: 0 0 auto;            /* largura fixa; não esmaga */
  width: 320px;
  scroll-snap-align: start;
  background: var(--verde-card);
  border: 1px solid rgba(201, 162, 74, 0.25);
  border-radius: 8px;
  overflow: hidden;          /* foto não vaza do card */
}

.cardprojetos:hover,
.cardblogs:hover {
  transform: translateY(-5px); /* card sobe no hover */
  border-color: var(--dourado);
}

/* ---------- Modal das fotos do território ---------- */
.modal {
  display: none;             /* escondido; o JS mostra */
  position: fixed;           /* cobre a tela */
  z-index: 1000;             /* acima de tudo */
  inset: 0;                  /* top/right/bottom/left = 0 */
  padding-top: 60px;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80%;
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
}

/* ---------- Contato ---------- */
.divcontato {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.info {
  display: flex;             /* ícone + texto lado a lado */
  align-items: center;
  gap: 10px;
}

.icones img:hover,
.imagem-contato img:hover,
.imagem-quemsomos img:hover {
  transform: scale(1.05);    /* zoom leve no hover */
}

/* ---------- Responsivo geral ---------- */
@media (max-width: 992px) {
  .divCardsprojetos,
  .divCardsblogs { grid-template-columns: 1fr; } /* uma coluna */
  .apresentacao,
  .projetos-controles,
  .blogs-controles,
  .cards-rolagem {
    grid-column: 1;
    grid-row: auto;          /* empilha na ordem do HTML */
  }
  .divCardquemsomos { flex-direction: column; } /* quem somos em coluna */
}

@media (max-width: 600px) {
  .cardprojetos,
  .cardblogs { width: 84vw; } /* card quase na largura do celular */
  .divcontato { flex-direction: column; align-items: center; }
}