/* ==========================================================================
   Tema Municipal — Portal do Munícipe de Quelimane
   Cores derivadas do brasão do M.C.Q. — usado por cima do Bootstrap 5.
   ========================================================================== */

:root {
  --mcq-verde: #1b8a3a;
  --mcq-verde-escuro: #0f5f2a;
  --mcq-verde-claro: #e8f5ec;
  --mcq-dourado: #f4c20d;
  --mcq-azul: #0b5394;
  --mcq-vermelho: #e23b2e;
  --mcq-cinza: #f5f7f5;
  --mcq-texto: #1f2a22;

  --bs-primary: #1b8a3a;
  --bs-primary-rgb: 27, 138, 58;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--mcq-texto);
  background: var(--mcq-cinza);
}

/* ----- Botões / cores utilitárias ----- */
.btn-mcq {
  background: var(--mcq-verde);
  border-color: var(--mcq-verde);
  color: #fff;
}
.btn-mcq:hover, .btn-mcq:focus {
  background: var(--mcq-verde-escuro);
  border-color: var(--mcq-verde-escuro);
  color: #fff;
}
.btn-outline-mcq {
  color: var(--mcq-verde);
  border-color: var(--mcq-verde);
}
.btn-outline-mcq:hover {
  background: var(--mcq-verde);
  color: #fff;
}
.btn-dourado {
  background: var(--mcq-dourado);
  border-color: var(--mcq-dourado);
  color: #3a2e00;
  font-weight: 600;
}
.btn-dourado:hover { filter: brightness(0.95); color: #3a2e00; }

.text-mcq { color: var(--mcq-verde) !important; }
.text-dourado { color: #b88a00 !important; }
.bg-mcq { background: var(--mcq-verde) !important; color: #fff; }
.bg-mcq-claro { background: var(--mcq-verde-claro) !important; }
.bg-azul { background: var(--mcq-azul) !important; color: #fff; }

/* ----- Barra superior institucional ----- */
.topo-gov {
  background: var(--mcq-verde-escuro);
  color: #d8f0df;
  font-size: .82rem;
}
.topo-gov a { color: #fff; text-decoration: none; }

/* ----- Navbar ----- */
.navbar-mcq {
  background: #fff;
  border-bottom: 3px solid var(--mcq-dourado);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.navbar-mcq .navbar-brand { font-weight: 700; color: var(--mcq-verde-escuro); }
.navbar-mcq .nav-link { color: #355041; font-weight: 500; }
.navbar-mcq .nav-link:hover, .navbar-mcq .nav-link.active { color: var(--mcq-verde); }
.brand-logo { height: 44px; width: auto; }

/* ----- Hero ----- */
.hero {
  position: relative;
  color: #fff;
  background:
    linear-gradient(120deg, rgba(15,95,42,.92), rgba(11,83,148,.78)),
    url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Cine_Teatro_Aguia_Quelimane_%289516168590%29.jpg/1280px-Cine_Teatro_Aguia_Quelimane_%289516168590%29.jpg") center/cover no-repeat;
  padding: 5rem 0 4.5rem;
}
.hero h1 { font-weight: 800; letter-spacing: -.5px; }
.hero .sol {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--mcq-vermelho); box-shadow: 0 0 0 6px rgba(226,59,46,.25);
  vertical-align: middle;
}

/* Barra de pesquisa do hero */
.hero-busca {
  background: #fff; border-radius: 50px; padding: .35rem .35rem .35rem 1.25rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.18); max-width: 620px;
}
.hero-busca input { border: 0; box-shadow: none !important; }

/* ----- Cartões de serviço ----- */
.card-servico {
  border: 1px solid #e6ece8; border-radius: 16px; transition: .15s ease;
  height: 100%; background: #fff;
}
.card-servico:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15,95,42,.12); border-color: var(--mcq-verde); }
.card-servico .ico {
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--mcq-verde-claro); color: var(--mcq-verde);
}

/* ----- Selos / badges de estado ----- */
.estado { font-size: .72rem; font-weight: 600; padding: .25rem .6rem; border-radius: 50px; }
.estado-novo { background: #fde8e6; color: #b8281c; }
.estado-andamento { background: #fff3cd; color: #8a6d00; }
.estado-resolvido { background: #d6f0dd; color: #146c30; }

/* ----- Secções ----- */
.secao { padding: 3.5rem 0; }
.secao-titulo { font-weight: 700; color: var(--mcq-verde-escuro); }
.linha-dourada { width: 56px; height: 4px; background: var(--mcq-dourado); border-radius: 4px; }

/* ----- Estatística ----- */
.stat-num { font-size: 2.2rem; font-weight: 800; color: var(--mcq-dourado); line-height: 1; }

/* ----- Mapa placeholder ----- */
.mapa-fake {
  background:
    repeating-linear-gradient(45deg, #eef5f0 0 14px, #e2ece6 14px 28px);
  border-radius: 14px; min-height: 360px; position: relative; overflow: hidden;
  border: 1px solid #d4e0d8;
}
.mapa-fake .pin {
  position: absolute; transform: translate(-50%, -100%);
  color: var(--mcq-vermelho); font-size: 1.8rem;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.3));
}

/* ----- Rodapé ----- */
.rodape { background: var(--mcq-verde-escuro); color: #cfe6d7; }
.rodape a { color: #fff; text-decoration: none; }
.rodape a:hover { color: var(--mcq-dourado); }
.rodape h6 { color: #fff; font-weight: 700; }

/* ----- Imagem com fallback de cor ----- */
.img-fallback { background: linear-gradient(135deg, var(--mcq-verde), var(--mcq-azul)); }