/* ─────────────────────────────────────────────────────────
   Condo Guardian — Design System do site institucional
   Escopo: usado SOMENTE por index.html. Não é compartilhado
   com o app (dashboard/admin/login/portfolio), que continua
   usando css/main.css. Ver decisão registrada no histórico
   do projeto: isolamento total evita regressão no produto.
   ───────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* Paleta institucional */
  --cg-azul-guardian: #0D1B2A;
  --cg-azul-guardian-2: #142943;
  --cg-azul-confianca: #1E5AA8;
  --cg-azul-confianca-dark: #164682;
  --cg-azul-interacao: #1677D2;
  --cg-verde-tecnologia: #25B4A4;
  --cg-cinza-escuro: #495566;
  --cg-cinza-medio: #6B7280;
  --cg-cinza-claro: #F2F4F7;
  --cg-branco: #FFFFFF;
  --cg-borda: #E4E7EC;
  --cg-texto: #162235;

  /* Semânticas */
  --cg-sucesso-bg: #ECFDF3; --cg-sucesso-texto: #027A48; --cg-sucesso: #12B76A;
  --cg-atencao-bg: #FFFAEB; --cg-atencao-texto: #B54708; --cg-atencao: #F79009;
  --cg-erro-bg: #FEF3F2;    --cg-erro-texto: #B42318;    --cg-erro: #D92D20;
  --cg-info-bg: #EFF8FF;    --cg-info-texto: #175CD3;    --cg-info: #2E90FA;

  /* Espaçamento (múltiplos de 4) */
  --cg-sp-1: 4px;  --cg-sp-2: 8px;  --cg-sp-3: 12px; --cg-sp-4: 16px;
  --cg-sp-5: 20px; --cg-sp-6: 24px; --cg-sp-8: 32px; --cg-sp-10: 40px;
  --cg-sp-12: 48px; --cg-sp-16: 64px;

  /* Raios */
  --cg-radius-card: 14px;
  --cg-radius-field: 10px;
  --cg-radius-btn: 10px;
  --cg-radius-pill: 999px;

  /* Sombra leve */
  --cg-shadow-sm: 0 1px 3px rgba(13,27,42,.08), 0 1px 2px rgba(13,27,42,.05);

  --cg-container: 1200px;
  --cg-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Base ── */
.cg-page * { box-sizing: border-box; }
.cg-page {
  font-family: var(--cg-font);
  color: var(--cg-texto);
  background: var(--cg-branco);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.cg-page img { max-width: 100%; display: block; }
/* :where() zera a especificidade do seletor "a" para que classes de
   componente (.cg-btn-*, .cg-entrar etc.) sempre consigam sobrescrever
   esta cor-base sem precisar de seletores mais específicos. */
.cg-page :where(a) { color: inherit; text-decoration: none; }
.cg-page ul { list-style: none; margin: 0; padding: 0; }
.cg-page h1, .cg-page h2, .cg-page h3, .cg-page p { margin: 0; }
.cg-page svg { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .cg-page * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.cg-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cg-azul-confianca); color: #fff; padding: 10px 18px;
  border-radius: 0 0 8px 0; font-weight: 600;
}
.cg-skip-link:focus { left: 0; }

.cg-page a:focus-visible,
.cg-page button:focus-visible {
  outline: 2px solid var(--cg-azul-interacao);
  outline-offset: 2px;
  border-radius: 4px;
}

.cg-container { max-width: var(--cg-container); margin: 0 auto; padding: 0 var(--cg-sp-6); }

/* ── Tipografia utilitária ── */
.cg-eyebrow {
  display: inline-flex; align-items: center; gap: var(--cg-sp-2);
  font-size: 13px; font-weight: 600; color: var(--cg-azul-confianca);
  background: var(--cg-info-bg); padding: 6px 14px; border-radius: var(--cg-radius-pill);
  margin-bottom: var(--cg-sp-4);
}
.cg-titulo-secao {
  font-size: 24px; font-weight: 600; color: var(--cg-azul-guardian);
  margin-bottom: var(--cg-sp-3); letter-spacing: -.01em;
}
.cg-sub-secao {
  font-size: 16px; color: var(--cg-cinza-medio); max-width: 620px;
  line-height: 1.6; margin-bottom: var(--cg-sp-10);
}
.cg-secao-header { text-align: center; margin: 0 auto var(--cg-sp-10); max-width: 720px; }
.cg-secao-header .cg-sub-secao { margin-left: auto; margin-right: auto; margin-bottom: 0; }

.cg-secao { padding: var(--cg-sp-16) 0; }
.cg-secao-alt { background: var(--cg-cinza-claro); }

@media (max-width: 768px) {
  .cg-secao { padding: var(--cg-sp-10) 0; }
  .cg-titulo-secao { font-size: 22px; }
}

/* ── Botões ── */
.cg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cg-sp-2);
  font-family: var(--cg-font); font-size: 15px; font-weight: 600;
  border-radius: var(--cg-radius-btn); cursor: pointer; border: 1.5px solid transparent;
  transition: background-color .15s, border-color .15s, color .15s, transform .1s;
  white-space: nowrap;
}
.cg-btn:active { transform: translateY(1px); }
.cg-btn-lg { height: 50px; padding: 0 28px; font-size: 16px; }
.cg-btn-md { height: 44px; padding: 0 22px; }
.cg-btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }

.cg-btn-primario { background: var(--cg-azul-confianca); color: #fff; }
.cg-btn-primario:hover { background: var(--cg-azul-confianca-dark); }
.cg-btn-primario:disabled { background: var(--cg-cinza-medio); cursor: not-allowed; }

.cg-btn-secundario { background: #fff; color: var(--cg-azul-confianca); border-color: var(--cg-azul-confianca); }
.cg-btn-secundario:hover { background: var(--cg-info-bg); }

.cg-btn-terciario { background: transparent; color: var(--cg-azul-confianca); padding-left: 4px; padding-right: 4px; }
.cg-btn-terciario:hover { color: var(--cg-azul-interacao); }

.cg-btn-ghost-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.cg-btn-ghost-claro:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* ── Ícones ── */
.cg-icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-icon-sm { width: 16px; height: 16px; }
.cg-icon-lg { width: 24px; height: 24px; }

/* ── Header ── */
.cg-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--cg-azul-guardian);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cg-header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: var(--cg-sp-6); }
.cg-logo { display: flex; align-items: center; gap: var(--cg-sp-3); color: #fff; flex-shrink: 0; }
.cg-logo img { height: 34px; width: auto; }
.cg-logo-txt { display: flex; flex-direction: column; line-height: 1.15; }
.cg-logo-txt strong { font-size: 16px; font-weight: 700; }
.cg-logo-txt span { font-size: 11px; color: rgba(255,255,255,.65); font-weight: 400; }

.cg-nav { display: flex; align-items: center; gap: var(--cg-sp-6); }
.cg-nav a {
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,.82);
  padding: 8px 2px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.cg-nav a:hover { color: #fff; border-color: var(--cg-verde-tecnologia); }
/* "Entrar no sistema" e "Solicitar demonstração" já aparecem em
   .cg-header-actions no desktop; dentro do nav eles só existem para
   o menu mobile (ver media query abaixo). */
.cg-nav .cg-entrar, .cg-nav .cg-nav-cta { display: none; }

.cg-header-actions { display: flex; align-items: center; gap: var(--cg-sp-4); flex-shrink: 0; }
.cg-header .cg-entrar { font-size: 14px; font-weight: 600; color: #fff; }
.cg-header .cg-entrar:hover { color: var(--cg-verde-tecnologia); }

.cg-nav-toggle {
  display: none; background: none; border: none; color: #fff; padding: 8px;
  cursor: pointer; border-radius: 8px;
}
.cg-nav-toggle:hover { background: rgba(255,255,255,.08); }

@media (max-width: 1024px) {
  .cg-nav { display: none; }
  .cg-nav-toggle { display: inline-flex; }
  .cg-header-actions .cg-entrar, .cg-header-actions .cg-header-cta { display: none; }
  .cg-page.cg-nav-open .cg-nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: fixed; top: 76px; left: 0; right: 0; bottom: 0; background: var(--cg-azul-guardian);
    padding: var(--cg-sp-2) var(--cg-sp-6) var(--cg-sp-6); box-shadow: var(--cg-shadow-sm);
    overflow-y: auto;
  }
  .cg-page.cg-nav-open .cg-nav a:not(.cg-nav-cta) { width: 100%; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .cg-page.cg-nav-open .cg-nav .cg-entrar { display: block; }
  .cg-page.cg-nav-open .cg-nav .cg-nav-cta { display: inline-flex; width: 100%; margin: var(--cg-sp-4) 0 var(--cg-sp-2); }
}

/* ── Hero ── */
.cg-hero { background: linear-gradient(180deg, var(--cg-azul-guardian) 0%, var(--cg-azul-guardian-2) 100%); padding: var(--cg-sp-16) 0; overflow: hidden; }
.cg-hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--cg-sp-16); align-items: center; }
.cg-hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--cg-sp-2); font-size: 13px; font-weight: 600;
  color: var(--cg-verde-tecnologia); background: rgba(37,180,164,.12); padding: 6px 14px;
  border-radius: var(--cg-radius-pill); margin-bottom: var(--cg-sp-5);
}
.cg-hero h1 { font-size: 40px; font-weight: 700; line-height: 1.2; color: #fff; margin-bottom: var(--cg-sp-5); letter-spacing: -.01em; }
.cg-hero p { font-size: 17px; color: rgba(255,255,255,.78); line-height: 1.65; max-width: 540px; margin-bottom: var(--cg-sp-8); }
.cg-hero-btns { display: flex; gap: var(--cg-sp-4); flex-wrap: wrap; margin-bottom: var(--cg-sp-8); }
.cg-hero-trust { display: flex; align-items: center; gap: var(--cg-sp-5); flex-wrap: wrap; color: rgba(255,255,255,.6); font-size: 13px; }
.cg-hero-trust span { display: flex; align-items: center; gap: 6px; }
.cg-hero-trust .cg-icon { color: var(--cg-verde-tecnologia); }

@media (max-width: 1024px) {
  .cg-hero-inner { grid-template-columns: 1fr; }
  .cg-hero h1 { font-size: 30px; }
  .cg-hero p { max-width: none; }
}
@media (max-width: 480px) {
  .cg-hero h1 { font-size: 26px; }
  .cg-hero-btns .cg-btn { width: 100%; }
}

/* ── Mockup do dashboard (ilustrativo, sem dados reais) ── */
.cg-mockup {
  background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden; border: 1px solid rgba(255,255,255,.08);
}
.cg-mockup-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--cg-cinza-claro); border-bottom: 1px solid var(--cg-borda); }
.cg-mockup-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cg-borda); }
.cg-mockup-body { display: grid; grid-template-columns: 44px 1fr; }
.cg-mockup-side { background: var(--cg-azul-guardian); padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cg-mockup-side .cg-icon { color: rgba(255,255,255,.5); width: 17px; height: 17px; }
.cg-mockup-side .cg-icon.is-active { color: var(--cg-verde-tecnologia); }
.cg-mockup-main { padding: 18px; }
.cg-mockup-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.cg-mockup-kpi { border: 1px solid var(--cg-borda); border-radius: 10px; padding: 10px; }
.cg-mockup-kpi b { display: block; font-size: 20px; font-weight: 700; color: var(--cg-azul-guardian); }
.cg-mockup-kpi span { font-size: 10px; color: var(--cg-cinza-medio); font-weight: 500; }
.cg-mockup-kpi.is-alerta b { color: var(--cg-erro); }
.cg-mockup-kpi.is-ok b { color: var(--cg-sucesso); }
.cg-mockup-bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 46px; margin-bottom: 16px; padding: 10px; background: var(--cg-cinza-claro); border-radius: 10px; }
.cg-mockup-bar-chart i { flex: 1; background: var(--cg-azul-interacao); border-radius: 3px 3px 0 0; opacity: .85; }
.cg-mockup-list { border: 1px solid var(--cg-borda); border-radius: 10px; overflow: hidden; }
.cg-mockup-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--cg-borda); }
.cg-mockup-row:last-child { border-bottom: none; }
.cg-mockup-row .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cg-mockup-row .dot.blue { background: var(--cg-azul-interacao); }
.cg-mockup-row .dot.green { background: var(--cg-sucesso); }
.cg-mockup-row .dot.amber { background: var(--cg-atencao); }
.cg-mockup-row .txt { flex: 1; }
.cg-mockup-row .txt b { display: block; font-size: 11px; font-weight: 600; color: var(--cg-texto); }
.cg-mockup-row .txt span { font-size: 10px; color: var(--cg-cinza-medio); }
.cg-mockup-row .tag { font-size: 9px; font-weight: 600; padding: 3px 8px; border-radius: var(--cg-radius-pill); }
.cg-mockup-row .tag.ok { background: var(--cg-sucesso-bg); color: var(--cg-sucesso-texto); }
.cg-mockup-row .tag.warn { background: var(--cg-atencao-bg); color: var(--cg-atencao-texto); }

@media (max-width: 1024px) { .cg-mockup { max-width: 480px; margin: 0 auto; } }
@media (max-width: 480px) { .cg-mockup-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ── Lista de problemas / soluções ── */
.cg-lista-pontos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--cg-sp-5); max-width: 920px; margin: 0 auto; }
.cg-ponto {
  display: flex; gap: var(--cg-sp-4); align-items: flex-start;
  padding: var(--cg-sp-5); background: #fff; border: 1px solid var(--cg-borda); border-radius: var(--cg-radius-card);
}
.cg-ponto-icone {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.cg-ponto-icone.is-problema { background: var(--cg-erro-bg); color: var(--cg-erro); }
.cg-ponto-icone.is-solucao { background: var(--cg-sucesso-bg); color: var(--cg-sucesso); }
.cg-ponto h3 { font-size: 15px; font-weight: 600; color: var(--cg-texto); margin-bottom: 4px; }
.cg-ponto p { font-size: 13.5px; color: var(--cg-cinza-medio); line-height: 1.55; }

@media (max-width: 768px) { .cg-lista-pontos { grid-template-columns: 1fr; } }

/* ── Cards de recursos ── */
.cg-grid-recursos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--cg-sp-5); }
.cg-card-recurso {
  background: #fff; border: 1px solid var(--cg-borda); border-radius: var(--cg-radius-card);
  padding: var(--cg-sp-6); box-shadow: var(--cg-shadow-sm); transition: border-color .15s, transform .15s;
}
.cg-card-recurso:hover { border-color: var(--cg-azul-confianca); transform: translateY(-2px); }
.cg-card-recurso-icone {
  width: 44px; height: 44px; border-radius: 10px; background: var(--cg-info-bg); color: var(--cg-azul-confianca);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--cg-sp-4);
}
.cg-card-recurso h3 { font-size: 16px; font-weight: 600; color: var(--cg-texto); margin-bottom: 6px; }
.cg-card-recurso p { font-size: 13.5px; color: var(--cg-cinza-medio); line-height: 1.55; }

/* ── Para quem é ── */
.cg-grid-publico { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--cg-sp-4); }
.cg-item-publico {
  display: flex; align-items: center; gap: var(--cg-sp-3);
  padding: var(--cg-sp-4) var(--cg-sp-5); background: #fff; border: 1px solid var(--cg-borda); border-radius: var(--cg-radius-card);
}
.cg-item-publico-icone {
  width: 38px; height: 38px; border-radius: 9px; background: var(--cg-cinza-claro); color: var(--cg-azul-guardian);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cg-item-publico span { font-size: 14px; font-weight: 500; color: var(--cg-texto); }

/* ── Benefícios ── */
.cg-grid-beneficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--cg-sp-5); }
.cg-beneficio { display: flex; gap: var(--cg-sp-3); align-items: flex-start; }
.cg-beneficio .cg-icon { color: var(--cg-verde-tecnologia); flex-shrink: 0; margin-top: 2px; }
.cg-beneficio p { font-size: 14.5px; font-weight: 500; color: var(--cg-texto); line-height: 1.5; }

/* ── Chamada final ── */
.cg-cta-final {
  background: var(--cg-azul-guardian); padding: var(--cg-sp-16) 0; text-align: center;
}
.cg-cta-final h2 { font-size: 28px; font-weight: 700; color: #fff; max-width: 720px; margin: 0 auto var(--cg-sp-3); line-height: 1.3; }
.cg-cta-final p { font-size: 16px; color: rgba(255,255,255,.72); max-width: 560px; margin: 0 auto var(--cg-sp-8); }

@media (max-width: 768px) { .cg-cta-final h2 { font-size: 22px; } }

/* ── Rodapé ── */
.cg-footer { background: var(--cg-azul-guardian-2); padding: var(--cg-sp-12) 0 var(--cg-sp-6); color: rgba(255,255,255,.65); }
.cg-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--cg-sp-8); padding-bottom: var(--cg-sp-10); border-bottom: 1px solid rgba(255,255,255,.1); }
.cg-footer-brand { display: flex; align-items: center; gap: var(--cg-sp-3); margin-bottom: var(--cg-sp-4); color: #fff; }
.cg-footer-brand img { height: 30px; }
.cg-footer p.cg-footer-desc { font-size: 13.5px; line-height: 1.6; max-width: 280px; }
.cg-footer h4 { font-size: 13px; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--cg-sp-4); }
.cg-footer ul li { margin-bottom: var(--cg-sp-3); }
.cg-footer ul a { font-size: 14px; transition: color .15s; }
.cg-footer ul a:hover { color: #fff; }
.cg-footer .cg-contato-item { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: var(--cg-sp-3); }
.cg-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--cg-sp-3); padding-top: var(--cg-sp-6); font-size: 12.5px; }
.cg-footer-bottom-links { display: flex; gap: var(--cg-sp-5); flex-wrap: wrap; }

@media (max-width: 900px) {
  .cg-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cg-footer-grid { grid-template-columns: 1fr; }
  .cg-footer-bottom { flex-direction: column; align-items: flex-start; }
}