/* ==========================================================================
   GeoPonto — estilos do site
   Identidade: verde e laranja da marca, Poppins (títulos e textos) e
   Roboto (menu, formulário e rodapé).
   ========================================================================== */

:root {
  /* Cores da marca */
  --verde: #6cb96f;
  --verde-escuro: #3d8741;   /* textos verdes, topo e rodapé (contraste AA) */
  --verde-suave: #f1f7f0;    /* fundo de seções alternadas */
  --verde-linha: #cfe5cf;    /* bordas e divisórias */
  --laranja: #f39a1e;
  --laranja-escuro: #e0621f;
  --tinta: #4f564f;          /* texto principal */
  --tinta-suave: #6f766f;    /* textos secundários */

  /* Escala tipográfica (razão ~1,3) */
  --fs-xs: 15px;
  --fs-base: 17px;
  --fs-md: 20px;
  --fs-lg: 26px;
  --fs-xl: 34px;
  --fs-2xl: 46px;

  --medida: 68ch;            /* largura máxima de texto corrido */
  --max: 1140px;
  --raio: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
a, button, input, select, textarea, label { touch-action: manipulation; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
body {
  font-family: "Poppins", Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--tinta);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 16px; }

/* --------------------------------------------------------------------------
   Topo e cabeçalho
   -------------------------------------------------------------------------- */
.topbar { background: var(--verde-escuro); color: #fff; font-size: 14px; }
.topbar .container {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 7px;
  padding-bottom: 7px;
  flex-wrap: wrap;
  max-width: 980px;
}
.topbar a:hover { text-decoration: underline; }

.header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 var(--verde-linha);
}
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 85px;
}
.logo img { height: 44px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav > a, .nav .dropdown > button {
  font: 500 16px "Roboto", Arial, sans-serif;
  color: #5c625c;
  padding: 28px 18px 26px;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav > a:hover, .nav .dropdown > button:hover { color: var(--verde-escuro); }
.nav > a.active, .nav .dropdown > button.active { color: var(--verde-escuro); border-bottom-color: var(--verde); }
.caret {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(40, 70, 40, .12);
  border-top: 3px solid var(--verde);
  border-radius: 0 0 10px 10px;
  padding: 6px 0;
  display: none;
}
.dropdown-menu a { display: block; padding: 11px 18px; font: 15px "Roboto", Arial, sans-serif; color: #5c625c; }
.dropdown-menu a:hover, .dropdown-menu a[aria-current="page"] { background: var(--verde-suave); color: var(--verde-escuro); }
.dropdown:hover .dropdown-menu,
.dropdown.open .dropdown-menu { display: block; }

.menu-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.menu-toggle span { display: block; height: 3px; margin: 6px 8px; background: var(--verde); border-radius: 2px; }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: 12px 26px;
  font: 600 var(--fs-xs) "Poppins", Arial, sans-serif;
  line-height: 1.3;
  color: #fff;
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn-laranja { background: var(--laranja); }
.btn-laranja:hover { background: #e58c10; }
.btn-vermelho { background: var(--laranja-escuro); }
.btn-vermelho:hover { background: #cc5314; }
.btn-verde { background: var(--verde-escuro); }
.btn-verde:hover { background: #33743a; }
.btn-branco { background: #fff; color: var(--verde-escuro); }
.btn-branco:hover { background: var(--verde-suave); }
.btn-contorno { background: transparent; color: var(--verde-escuro); box-shadow: inset 0 0 0 2px var(--verde); }
.btn-contorno:hover { background: var(--verde-suave); }
.btn-contato { padding: 11px 24px; }

/* --------------------------------------------------------------------------
   Seções e títulos
   -------------------------------------------------------------------------- */
.secao { padding: 80px 0; }
.secao-suave { background: var(--verde-suave); }
.titulo-laranja { color: var(--laranja); font-weight: 700; line-height: 1.15; }
.titulo-verde { color: var(--verde-escuro); font-weight: 700; line-height: 1.2; }
.titulo-secao { font-size: var(--fs-xl); text-align: center; margin-bottom: 18px; }
.titulo-pagina { font-size: var(--fs-2xl); text-align: center; margin-bottom: 28px; }
.lead {
  font-size: var(--fs-md);
  color: var(--tinta-suave);
  max-width: var(--medida);
  margin: 0 auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Home — banner principal
   -------------------------------------------------------------------------- */
.hero-home {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
  background: #fff;
}
.hero-home .foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.hero-home .container { position: relative; }
.hero-home .texto { max-width: 600px; }
.hero-home h1 {
  font-size: var(--fs-2xl);
  color: var(--laranja);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
.hero-home .sub {
  font-size: var(--fs-md);
  color: var(--verde-escuro);
  line-height: 1.45;
  max-width: 30ch;
  margin-bottom: 30px;
}

/* --------------------------------------------------------------------------
   Home — Missão, Visão e Valores
   -------------------------------------------------------------------------- */
.mvv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.mvv-item { padding: 8px 40px; }
.mvv-item + .mvv-item { border-left: 1px solid var(--verde-linha); }
.mvv-item:first-child { padding-left: 0; }
.mvv-item:last-child { padding-right: 0; }
.mvv-item img { width: 64px; height: 64px; margin: 0 0 14px -6px; }
.mvv-item h2 { font-size: var(--fs-lg); color: var(--laranja); font-weight: 700; line-height: 1.2; margin-bottom: 10px; }
.mvv-item p { color: var(--tinta); }
.valores-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.valores-lista li {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--verde-escuro);
  background: var(--verde-suave);
  border: 1px solid var(--verde-linha);
  border-radius: 999px;
  padding: 4px 14px;
}

/* --------------------------------------------------------------------------
   Home — faixa verde da plataforma
   -------------------------------------------------------------------------- */
.plataforma {
  background: linear-gradient(120deg, #5fae63, #84c886);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.plataforma .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 30px;
  padding-top: 40px;
}
.plataforma .texto { align-self: center; padding-bottom: 60px; }
.plataforma h2 { font-size: var(--fs-xl); font-weight: 700; line-height: 1.15; margin-bottom: 22px; max-width: 16ch; }
.plataforma p { font-size: var(--fs-md); line-height: 1.5; margin-bottom: 18px; max-width: 34ch; }
.plataforma p.destaque { font-weight: 600; margin-top: 8px; }
.plataforma img { width: 100%; max-width: 520px; margin: 0 auto; }

.triangulos { position: absolute; width: 280px; height: 100px; opacity: .35; pointer-events: none; }

/* --------------------------------------------------------------------------
   Home — desafios
   -------------------------------------------------------------------------- */
.desafios { padding-bottom: 0; }
.desafios .container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
.desafios h2 { font-size: var(--fs-xl); margin-bottom: 24px; max-width: 18ch; }
.desafios ul { list-style: none; margin-bottom: 30px; }
.desafios li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 12px;
  max-width: 46ch;
}
.desafios li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* --------------------------------------------------------------------------
   Mapa (Home)
   -------------------------------------------------------------------------- */
.faixa-cores { display: grid; grid-template-columns: 2fr 2fr 1.1fr; height: 24px; }
.faixa-cores span:nth-child(1), .faixa-cores span:nth-child(3) { background: var(--verde); }
.faixa-cores span:nth-child(2) { background: var(--laranja); }
.mapa iframe { width: 100%; height: 480px; border: 0; display: block; }
.mapa .acao { background: var(--verde); text-align: center; padding: 24px 16px 56px; }

/* --------------------------------------------------------------------------
   Banners das páginas internas (mesma altura do banner da Home)
   -------------------------------------------------------------------------- */
.hero-banner { position: relative; }
.hero-img { width: 100%; height: 600px; object-fit: cover; object-position: center 40%; }
.hero-overlay { position: absolute; inset: 0; display: flex; align-items: center; color: #fff; }
.hero-overlay h1 {
  font-size: 72px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.015em;
  max-width: 8ch;
  text-shadow: 0 2px 18px rgba(30, 70, 32, .25);
}
.hero-overlay p {
  font: 28px/1.25 "Roboto", Arial, sans-serif;
  margin-top: 22px;
  text-shadow: 0 1px 12px rgba(30, 70, 32, .3);
}
.hero-overlay.centro { text-align: center; }
.hero-overlay.centro h1 { max-width: none; font-size: 58px; }

/* --------------------------------------------------------------------------
   Quem somos
   -------------------------------------------------------------------------- */
.sobre-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.sobre-titulo { font-size: var(--fs-2xl); margin-bottom: 24px; }
.sobre-texto p { max-width: 60ch; text-wrap: wrap; font-size: var(--fs-md); line-height: 1.75; margin-bottom: 20px; }
.sobre-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.sobre-foto { width: 100%; max-width: 480px; justify-self: end; border-radius: 24px; aspect-ratio: 4 / 5; object-fit: cover; }

/* --------------------------------------------------------------------------
   Serviços
   -------------------------------------------------------------------------- */
.cards-servicos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.card-servico .img { border-radius: var(--raio); overflow: hidden; }
.card-servico .img img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; }
.card-servico h3 { color: var(--verde-escuro); font-size: var(--fs-md); font-weight: 700; margin: 20px 0 6px; line-height: 1.3; }
.card-servico p { font-size: var(--fs-xs); color: var(--tinta-suave); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Contatos
   -------------------------------------------------------------------------- */
.form-box {
  max-width: 580px;
  margin: 0 auto;
  border: 1px solid var(--verde-linha);
  border-radius: 20px;
  padding: 36px 48px 40px;
  box-shadow: 0 10px 30px rgba(40, 70, 40, .06);
}
.form-box h2 { font-size: var(--fs-lg); text-align: center; margin-bottom: 6px; }
.form-box .instrucao { text-align: center; font-size: var(--fs-xs); color: var(--tinta-suave); margin-bottom: 28px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.form-grid .full { grid-column: 1 / -1; }
.campo label { display: block; font: 500 14px "Roboto", Arial, sans-serif; color: var(--tinta); margin-bottom: 6px; }
.campo label small { font-weight: 400; color: var(--tinta-suave); font-size: 13px; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  border: 1px solid #c9d3c9;
  border-radius: 12px;
  padding: 11px 14px;
  font: 15px "Roboto", Arial, sans-serif;
  color: #333;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #9aa29a; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(108, 185, 111, .25);
}
.check { display: flex; gap: 10px; align-items: flex-start; font: 14px/1.45 "Roboto", Arial, sans-serif; color: var(--tinta); margin: 20px 0 22px; }
.check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--verde-escuro); flex: none; }
.check a { color: var(--verde-escuro); text-decoration: underline; }
.form-box .btn { width: 100%; padding: 14px 26px; font-size: 16px; }
.form-msg { font: 14px "Roboto", Arial, sans-serif; margin-top: 14px; min-height: 20px; text-align: center; }
.form-msg.erro { color: #b3261e; }
.campo [aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, .15); }
.check.invalido { color: #b3261e; }
.form-msg.ok { color: var(--verde-escuro); }

.contato-mapa { max-width: 1100px; margin: 64px auto 0; text-align: center; }
.contato-mapa iframe { display: block; width: 100%; height: 460px; border: 0; border-radius: 20px; }
.contato-mapa .btn { margin-top: 24px; padding: 12px 34px; }

/* --------------------------------------------------------------------------
   Termos de Uso e Política de Privacidade
   -------------------------------------------------------------------------- */
.termos { max-width: calc(var(--medida) + 32px); }
.termos .intro { font-size: var(--fs-md); margin-bottom: 36px; }
.termos h2 { font-size: var(--fs-md); color: var(--verde-escuro); text-align: left; margin: 36px 0 12px; line-height: 1.3; }
.termos p { margin-bottom: 10px; }
.termos strong { color: #3d433d; }
.termos a { color: var(--verde-escuro); text-decoration: underline; }
.termos .btn { margin-top: 32px; color: #fff; text-decoration: none; }
.termos ul { margin: 0 0 16px 22px; }
.termos li { margin-bottom: 8px; }
.termos li::marker { color: var(--verde); }
.termos .fechamento { margin-top: 34px; }
.termos .atualizada { margin-top: 40px; font-style: italic; color: var(--tinta-suave); }

/* --------------------------------------------------------------------------
   Página 404
   -------------------------------------------------------------------------- */
.pagina-404 { text-align: center; padding: 100px 0 120px; }
.pagina-404 img { margin: 0 auto 24px; width: 96px; height: 96px; }
.pagina-404 h1 { font-size: var(--fs-2xl); margin-bottom: 14px; }
.pagina-404 p { font-size: var(--fs-md); max-width: 40ch; margin: 0 auto 30px; }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.footer { background: var(--verde-escuro); color: #fff; padding: 48px 0 28px; }
.footer .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer h2 { font-size: var(--fs-md); font-weight: 600; margin-bottom: 14px; }
.footer p { font: 15px/1.75 "Roboto", Arial, sans-serif; color: rgba(255, 255, 255, .92); }
.footer a:hover { text-decoration: underline; }
.footer .legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .2);
  padding-top: 20px;
  margin-top: 10px;
  font: 13px "Roboto", Arial, sans-serif;
  color: rgba(255, 255, 255, .85);
}
.footer .legal nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer .legal a { text-decoration: underline; text-underline-offset: 3px; }

.whats-float {
  position: fixed;
  right: 28px;
  bottom: calc(28px + env(safe-area-inset-bottom));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  z-index: 60;
  transition: transform .15s;
}
.whats-float:hover { transform: scale(1.06); }
.whats-float svg { width: 34px; height: 34px; fill: #fff; }

/* --------------------------------------------------------------------------
   Acessibilidade
   -------------------------------------------------------------------------- */
.pular {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--verde-escuro);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  z-index: 100;
}
.pular:focus { top: 10px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 3px;
}
.sem-quebra { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  :root { --fs-2xl: 36px; --fs-xl: 28px; --fs-lg: 23px; --fs-md: 18px; }
  .secao { padding: 56px 0; }

  .menu-toggle { display: block; }
  .header .btn-contato { display: none; }
  .nav {
    position: absolute;
    top: 85px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
    display: none;
  }
  .nav.open { display: flex; }
  .nav > a, .nav .dropdown > button { padding: 14px 20px; width: 100%; border-bottom: 1px solid #eee; }
  .nav > a.active, .nav .dropdown > button.active { border-bottom-color: #eee; }
  .dropdown-menu { position: static; box-shadow: none; border-top: 0; padding: 0 0 0 16px; }
  .dropdown:hover .dropdown-menu { display: none; }
  .dropdown.open .dropdown-menu { display: block; }

  .hero-home { min-height: 0; flex-direction: column; padding: 0 0 48px; }
  .hero-home picture { display: block; }
  .hero-home .foto { position: static; width: 100%; height: auto; object-fit: initial; }
  .hero-home .container { margin-top: -170px; }

  .mvv { grid-template-columns: 1fr; gap: 28px; }
  .mvv-item, .mvv-item:first-child, .mvv-item:last-child { padding: 0; }
  .mvv-item + .mvv-item { border-left: 0; border-top: 1px solid var(--verde-linha); padding-top: 28px; }

  .plataforma .container, .desafios .container, .footer .container { grid-template-columns: 1fr; }
  .plataforma .texto { padding-bottom: 0; }
  .desafios .container > div:first-child { order: 2; }

  .cards-servicos { grid-template-columns: 1fr 1fr; gap: 28px 20px; }

  .sobre-grid { grid-template-columns: 1fr; gap: 36px; }
  .sobre-foto { justify-self: center; max-width: 420px; }

  .hero-img { height: 340px; }
  .hero-overlay h1, .hero-overlay.centro h1 { font-size: 38px; }
  .hero-overlay p { font-size: 19px; margin-top: 12px; }
  .hero-overlay:not(.centro) {
    align-items: flex-end;
    padding-bottom: 24px;
    background: linear-gradient(180deg, rgba(61, 135, 65, 0) 25%, rgba(61, 135, 65, .92) 85%);
  }

  .mapa iframe { height: 360px; }
  .contato-mapa iframe { height: 360px; border-radius: 14px; }
  .footer .legal { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .topbar .container { flex-direction: column; align-items: center; gap: 0; font-size: 13px; }
  .logo img { height: 36px; }
  .hero-home h1 { font-size: 30px; }
  .hero-home .sub { font-size: 17px; }
  .cards-servicos { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; }
  .form-box { padding: 28px 18px 32px; }
  .form-grid { grid-template-columns: 1fr; }
  .whats-float { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 54px; height: 54px; }
}