/* ============================================================
   PROJETO SIGMA — Design System compartilhado
   Portal · Sigma City · Sigma Sky
   Paleta institucional: azul #004aad · ciano #5de0e6 (acento)
   ============================================================ */

:root {
  --azul: #004aad;
  --azul-medio: #0066cc;
  --azul-escuro: #00337a;
  --ciano: #5de0e6;                 /* somente acento decorativo */
  --grad-hero: linear-gradient(135deg, #004aad 0%, #0066cc 55%, #5de0e6 100%);
  --grad-navbar: linear-gradient(90deg, #00337a 0%, #004aad 100%);
  --tinta: #2c3e50;
  --tinta-2: #5a6b7b;
  --tinta-3: #7f8c8d;
  --superficie: #f5f7fa;
  --card: #ffffff;
  --borda: #e2e8f0;
  --borda-forte: #cbd5e1;
  --ok-bg: #d4edda;   --ok-tx: #155724;
  --no-bg: #f8d7da;   --no-tx: #721c24;
  --aviso-bg: #fff3cd; --aviso-tx: #856404;
  --sombra: 0 4px 18px rgba(15, 40, 80, 0.08);
  --sombra-hover: 0 10px 30px rgba(15, 40, 80, 0.14);
  --raio: 12px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: var(--tinta);
  background: var(--superficie);
  line-height: 1.6;
}

img { max-width: 100%; }

a { color: var(--azul); }

/* ============================================================
   NAVBAR
   ============================================================ */

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  background: var(--grad-navbar);
  box-shadow: 0 2px 10px rgba(0, 30, 70, 0.25);
}

.navbar-logo img { height: 40px; display: block; }

.navbar-titulo {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-decoration: none;
  white-space: nowrap;
}

.navbar-titulo small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.75;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.navbar-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nav-pill {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.nav-pill:hover { background: rgba(255, 255, 255, 0.28); }

.nav-pill.ativo { background: #fff; color: var(--azul); }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  background: var(--grad-hero);
  color: #fff;
  text-align: center;
  padding: 64px 24px 56px;
}

.hero-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 42px;
  margin-bottom: 34px;
}

.hero-logos img { height: 88px; transition: transform 0.3s ease; }
.hero-logos img:hover { transform: scale(1.07); }
.hero-logos .logo-claro { filter: brightness(0) invert(1); }

.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 800;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
}

.hero .hero-sub {
  max-width: 860px;
  margin: 0 auto;
  font-size: 18px;
  opacity: 0.95;
}

.hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 5px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.hero-stat .num { display: block; font-size: 34px; font-weight: 800; }
.hero-stat .lbl {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ============================================================
   ESTRUTURA DE PÁGINA
   ============================================================ */

.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

.secao { padding: 56px 0; }

.secao-alt { background: #fff; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }

.secao-titulo {
  text-align: center;
  color: var(--azul);
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 8px;
}

.secao-sub {
  text-align: center;
  color: var(--tinta-3);
  font-size: 15px;
  margin: 0 0 36px;
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 28px;
}

.card-clique { cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card-clique:hover { transform: translateY(-5px); box-shadow: var(--sombra-hover); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }

/* Cards de projeto (portal) */
.projeto-card {
  display: flex;
  flex-direction: column;
  border-top: 5px solid var(--azul);
  text-align: center;
}

.projeto-card .projeto-logo {
  width: 92px;
  height: 92px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--grad-hero);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 40px;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(0, 74, 173, 0.30);
}

.projeto-card h3 { color: var(--azul); font-size: 24px; margin: 0 0 10px; }

.projeto-card p { color: var(--tinta-2); font-size: 15px; flex: 1; }

/* ============================================================
   BOTÕES
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 8px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primario {
  background: linear-gradient(135deg, #004aad 0%, #0066cc 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 74, 173, 0.30);
}

.btn-primario:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 74, 173, 0.40); }

.btn-contorno {
  background: transparent;
  color: var(--azul);
  border: 2px solid var(--azul);
}

.btn-contorno:hover { background: var(--azul); color: #fff; }

.btn-suave {
  background: #eef2fb;
  color: var(--azul);
}

.btn-suave:hover { background: #dde7f7; }

.btn-desativado {
  background: #e9ecef;
  color: #95a5a6;
  cursor: not-allowed;
}

.btn-bloco { width: 100%; }

/* ============================================================
   BADGES E CHIPS
   ============================================================ */

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.badge-city { background: #eef2fb; color: var(--azul); border: 1px solid #c6d6f2; }
.badge-sky { background: #e6f7f8; color: #0e7c86; border: 1px solid #b8e8ec; }
.badge-disponivel { background: var(--ok-bg); color: var(--ok-tx); }
.badge-andamento { background: var(--aviso-bg); color: var(--aviso-tx); }
.badge-desenvolvimento { background: #e9ecef; color: #6c757d; }

.chip {
  display: inline-block;
  background: #fff;
  border: 1.5px solid var(--borda-forte);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-2);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}

.chip:hover { border-color: var(--azul); color: var(--azul); }

.chip.on { background: var(--azul); border-color: var(--azul); color: #fff; }

/* ============================================================
   EQUIPE
   ============================================================ */

.equipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px 44px;
  padding: 8px 0;
}

.membro-card {
  width: 170px;
  text-align: center;
  transition: transform 0.3s ease;
}

.membro-card:hover { transform: translateY(-6px); }

.membro-card.coordenador { width: 210px; }

.membro-foto {
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--ciano);
  box-shadow: 0 6px 16px rgba(0, 40, 90, 0.18);
  background: #e6ecf3;
}

.membro-card.coordenador .membro-foto {
  width: 165px;
  height: 165px;
  border-width: 4px;
  border-color: var(--azul);
}

.membro-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(1); transition: filter 0.35s ease; }
.membro-card:hover .membro-foto img { filter: grayscale(0.55); }

.membro-nome { font-weight: 700; font-size: 14px; color: var(--tinta); margin-bottom: 4px; }

.membro-papel { font-size: 12px; color: var(--tinta-3); margin-bottom: 8px; }

.linkedin-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: var(--azul);
  color: #fff !important;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.linkedin-icone:hover { background: var(--azul-medio); }

/* ============================================================
   TABELAS
   ============================================================ */

.tabela-scroll { overflow: auto; max-height: 65vh; border: 1px solid var(--borda); border-radius: 8px; }

table.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
}

table.tabela th {
  position: sticky;
  top: 0;
  background: #f1f5fb;
  color: var(--azul-escuro);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--borda-forte);
  white-space: nowrap;
}

table.tabela td { padding: 8px 12px; border-bottom: 1px solid var(--borda); vertical-align: top; }

table.tabela tbody tr:nth-child(even) { background: #fafbfd; }

table.tabela tbody tr:hover { background: #eef4fd; }

.celula-aceito { background: var(--ok-bg); color: var(--ok-tx); font-weight: 700; text-align: center; border-radius: 4px; }
.celula-rejeitado { background: var(--no-bg); color: var(--no-tx); font-weight: 700; text-align: center; border-radius: 4px; }

/* ============================================================
   BUSCA
   ============================================================ */

.busca-linha { display: flex; gap: 10px; align-items: center; }

.busca-input {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border: 2px solid var(--borda-forte);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
}

.busca-input:focus { border-color: var(--azul); }

/* ============================================================
   ABAS
   ============================================================ */

.abas { display: flex; gap: 4px; border-bottom: 2px solid var(--borda); margin-bottom: 20px; flex-wrap: wrap; }

.aba {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta-3);
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.aba:hover { color: var(--azul); }

.aba.on { color: var(--azul); border-bottom-color: var(--azul); }

/* ============================================================
   AVISOS
   ============================================================ */

.aviso {
  background: var(--aviso-bg);
  color: var(--aviso-tx);
  border-left: 4px solid #ffc107;
  border-radius: 6px;
  padding: 22px;
  text-align: center;
}

.destaque {
  background: #eef6fc;
  border-left: 4px solid var(--azul);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
}

/* ============================================================
   RODAPÉ
   ============================================================ */

.rodape {
  background: linear-gradient(90deg, #22313f 0%, #2c3e50 100%);
  color: #fff;
  text-align: center;
  padding: 38px 24px;
  margin-top: 64px;
}

.rodape a { color: var(--ciano); text-decoration: none; }

.rodape a:hover { text-decoration: underline; }

.rodape .ted { font-size: 13px; opacity: 0.75; margin-top: 8px; }

.rodape .copy { font-size: 12px; opacity: 0.55; margin-top: 16px; }

.rodape-social {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff !important; text-decoration: none; font-size: 14px; font-weight: 600;
}
.rodape-social .in {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 5px;
  background: var(--ciano); color: var(--azul-escuro); font-size: 12px; font-weight: 800;
}
.rodape-social:hover { text-decoration: underline; }

/* ============================================================
   ANIMAÇÕES — scroll-reveal e hero
   ============================================================ */

.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.rv.rv-on { opacity: 1; transform: none; }

.rv-d1 { transition-delay: 0.12s; }
.rv-d2 { transition-delay: 0.24s; }
.rv-d3 { transition-delay: 0.36s; }
.rv-d4 { transition-delay: 0.48s; }

@keyframes surgir {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes deriva-gradiente {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-animado {
  background: linear-gradient(120deg, #00337a, #004aad, #0066cc, #17a8c4, #5de0e6);
  background-size: 260% 260%;
  animation: deriva-gradiente 16s ease infinite;
}

.hero-animado > * { animation: surgir 0.9s ease both; }
.hero-animado > *:nth-child(2) { animation-delay: 0.15s; }
.hero-animado > *:nth-child(3) { animation-delay: 0.3s; }
.hero-animado > *:nth-child(4) { animation-delay: 0.45s; }
.hero-animado > *:nth-child(5) { animation-delay: 0.6s; }

.flutuante { animation: flutuar 5s ease-in-out infinite; }

.secao-titulo::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--azul), var(--ciano));
}

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .hero-animado { animation: none; }
  .hero-animado > * { animation: none; }
  .flutuante { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */

img.zoomavel { cursor: zoom-in; transition: transform 0.25s ease, box-shadow 0.25s ease; }

img.zoomavel:hover { transform: scale(1.015); box-shadow: 0 10px 28px rgba(0, 30, 70, 0.25); }

#sigma-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 22, 40, 0.88);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#sigma-lightbox.aberto { opacity: 1; pointer-events: auto; }

#sigma-lightbox img {
  max-width: 92vw;
  max-height: 90vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  cursor: zoom-out;
  transform: scale(0.96);
  transition: transform 0.25s ease;
}

#sigma-lightbox.aberto img { transform: scale(1); }

#sigma-lightbox .lb-fechar {
  position: absolute;
  top: 20px;
  right: 26px;
  background: none;
  border: none;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  opacity: 0.8;
}

#sigma-lightbox .lb-fechar:hover { opacity: 1; }

/* ============================================================
   RESPONSIVIDADE
   ============================================================ */

@media (max-width: 768px) {
  .navbar { flex-wrap: wrap; }
  .navbar-links { margin-left: 0; width: 100%; justify-content: flex-start; }
  .hero { padding: 44px 18px 40px; }
  .hero-logos { gap: 24px; }
  .hero-logos img { height: 64px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .secao { padding: 40px 0; }
}