/* ============================================================
   PÁGINAS PÚBLICAS — home, entrar, admin
   ------------------------------------------------------------
   Arquivo separado do styles.css do app de propósito: aquele monta
   uma tela de reunião travada em 100vh, sem rolagem, com três colunas.
   Uma página que precisa ROLAR e explicar um produto quer o oposto.
   Misturar os dois faria cada ajuste na home arriscar a reunião.
   ============================================================ */

:root {
  --bg-app: #08090d;
  --bg-card: #101420;
  --bg-elev: #151a28;
  --border: #1f2536;
  --text-main: #f8fafc;
  --text-muted: #9aa7bd;
  --text-dim: #6b7890;
  --accent: #6366f1;
  --violeta: #8b5cf6;
  --ok: #10b981;
  --alerta: #f59e0b;
  --perigo: #ef4444;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --largura: 1140px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-app);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  /* Luz difusa no topo: dá profundidade sem pedir imagem nenhuma —
     e imagem de fundo é o que mais pesa numa landing. */
  background-image:
    radial-gradient(900px 500px at 15% -10%, rgba(99, 102, 241, .18), transparent 65%),
    radial-gradient(760px 460px at 88% 4%, rgba(139, 92, 246, .14), transparent 62%);
  background-repeat: no-repeat;
}

a { color: inherit; text-decoration: none; }
.envolto { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 24px; }

/* ---------------- Cabeçalho ---------------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px);
  background: rgba(8, 9, 13, .72);
  transition: border-color .2s ease;
}
.topo.rolou { border-bottom-color: var(--border); }
.topo-linha { display: flex; align-items: center; gap: 14px; height: 68px; }

.marca { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
.marca-glifo {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--violeta));
  font-size: 16px;
}
.marca-selo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(99, 102, 241, .16); color: #c7d2fe;
  border: 1px solid rgba(99, 102, 241, .3);
}

.topo-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.topo-nav a.link { font-size: 13.5px; color: var(--text-muted); font-weight: 600; }
.topo-nav a.link:hover { color: var(--text-main); }

/* ---------------- Botões ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 19px; border-radius: 10px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; font-family: inherit;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .12s ease, filter .15s ease, background .15s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primario {
  background: linear-gradient(135deg, var(--accent), var(--violeta));
  color: #fff; box-shadow: 0 6px 22px rgba(99, 102, 241, .32);
}
.btn-primario:hover:not(:disabled) { filter: brightness(1.08); }
.btn-fantasma { background: var(--bg-elev); border-color: var(--border); color: var(--text-main); }
.btn-fantasma:hover:not(:disabled) { background: #1c2333; }
.btn-perigo { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .34); color: #fca5a5; }
.btn-perigo:hover:not(:disabled) { background: rgba(239, 68, 68, .2); }
.btn-largo { width: 100%; padding: 13px 20px; font-size: 14px; }

/* ---------------- Tipografia de seção ---------------- */
.selo-secao {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
  background: rgba(99, 102, 241, .1); border: 1px solid rgba(99, 102, 241, .26);
  font-size: 12.5px; font-weight: 600; color: #c7d2fe;
}
.ponto-vivo {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, .6); animation: pulsa 2.4s infinite;
}
@keyframes pulsa {
  70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

h1.titulo {
  font-size: clamp(34px, 5.1vw, 58px); line-height: 1.08;
  font-weight: 800; letter-spacing: -1.4px;
}
.destaque {
  background: linear-gradient(120deg, #818cf8, #c084fc 55%, #38bdf8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2.titulo-secao {
  font-size: clamp(26px, 3.4vw, 38px); font-weight: 800;
  letter-spacing: -.9px; text-align: center; line-height: 1.18;
}
.subtitulo-secao {
  text-align: center; color: var(--text-muted); font-size: 16px;
  max-width: 660px; margin: 14px auto 0;
}
section { padding: 84px 0; }

/* ---------------- Cartões ---------------- */
.cartao {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 26px;
  transition: border-color .18s ease, transform .18s ease;
}
.cartao:hover { border-color: #2c3549; transform: translateY(-2px); }
.cartao-icone { font-size: 26px; margin-bottom: 14px; display: block; }
.cartao h3 { font-size: 17px; font-weight: 700; margin-bottom: 9px; letter-spacing: -.3px; }
.cartao p { color: var(--text-muted); font-size: 14px; }

.grade-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 46px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; }

/* ---------------- Formulários ---------------- */
.campo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.campo label { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.entrada, .area {
  background: #0b0e17; border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; color: var(--text-main); font-size: 14px; font-family: inherit;
  width: 100%; transition: border-color .15s ease;
}
.entrada:focus, .area:focus { outline: none; border-color: var(--accent); }
.entrada::placeholder, .area::placeholder { color: var(--text-dim); }
.area { min-height: 130px; resize: vertical; line-height: 1.55; }
.ajuda { font-size: 12px; color: var(--text-dim); }

/* ---------------- Avisos ---------------- */
.aviso {
  padding: 12px 15px; border-radius: 10px; font-size: 13.5px;
  border: 1px solid transparent; margin-bottom: 16px; line-height: 1.5;
}
.aviso.oculto { display: none; }
.aviso.erro { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .32); color: #fca5a5; }
.aviso.ok { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .32); color: #6ee7b7; }
.aviso.info { background: rgba(99, 102, 241, .1); border-color: rgba(99, 102, 241, .3); color: #c7d2fe; }
.aviso.alerta { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .34); color: #fcd34d; }

.oculto { display: none !important; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

/* ---------------- Rodapé ---------------- */
.rodape {
  border-top: 1px solid var(--border); padding: 34px 0;
  color: var(--text-dim); font-size: 13px;
}
.rodape-linha { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rodape a:hover { color: var(--text-main); }

@media (max-width: 860px) {
  .grade-2, .grade-3 { grid-template-columns: 1fr; }
  .topo-nav a.link { display: none; }
  section { padding: 58px 0; }
}