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

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

/* === THEME VARIABLES === */
:root {
  --primary-color: #0052cc;
  --primary-dark: #003b99;
  --secondary-color: #003366;
  --light-bg: #f5f7fa;
  --dark-bg: #eef2f9;
  --text-primary: #333;
  --text-secondary: #555;
  --white-color: #fff;
  --border-color: #ddd;
  --shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  --border-radius: 8px;
}

/* === BASE === */
body, html {
  font-family: 'Poppins', sans-serif;
  color: var(--text-primary);
  background: var(--white-color);
  line-height: 1.6;
  width: 100%;
}
body.no-scroll { overflow: hidden; }

a {
  text-decoration: none;
  color: var(--primary-color);
  transition: color 0.3s;
}
a:hover { color: var(--primary-dark); }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

h1, h2, h3, h4 {
  font-weight: 600;
  color: var(--secondary-color);
}

/* === BUTTONS === */
.button {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: 500;
  font-size: 1rem;
  text-align: center;
  transition: all 0.3s ease;
}
.button-primary {
  background: var(--primary-color);
  color: var(--white-color);
}
.button-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}
.button-lg { padding: 1rem 2.5rem; font-size: 1.1rem; }
.button-full { width: 100%; }

/* === NAVBAR === */
.navbar {
  background: var(--white-color);
  padding: 1rem 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
}
.navbar .container{
  position: relative;               /* para posicionar o hamburguer */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar .logo{
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary-color);
}
.nav-links{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto;                /* empurra os links para direita no desktop */
}
.menu-hamburger{
  display: none;                    /* some no desktop */
  position: absolute;               /* fixa no canto direito da navbar */
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--secondary-color);
  cursor: pointer;
  z-index: 1101;                    /* acima do overlay do menu */
}


/* === HERO === */
.header-hero {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  color: var(--white-color);
  padding: 8rem 0 6rem;
  text-align: center;
  margin-top: 70px;
}
.header-hero h1 { color: var(--white-color); }

/* === SECTIONS & CARDS === */
.section { padding: 4rem 0; }
.section-light { background: var(--white-color); }
.section-dark { background: var(--light-bg); }

.cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card {
  background: var(--white-color);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  transition: transform 0.3s;
}
.card:hover { transform: translateY(-5px); }

/* === FOOTER === */
.footer {
  text-align: center;
  padding: 2rem;
  background: var(--light-bg);
  font-size: 0.9rem;
}

/* === LOGIN PAGE === */
.login-page-background {
  background: var(--secondary-color);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.login-container { max-width: 420px; width: 100%; }
.login-box {
  background: var(--white-color);
  padding: 2.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.logo-login {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}
.login-box h3 {
  text-align: center;
  margin-bottom: 2.5rem;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--text-secondary);
}
.form-group { margin-bottom: 1.5rem; }
.form-group label {
  font-size: 0.9rem;
  font-weight: 500;
  display: block;
  margin-bottom: 0.5rem;
}
.form-group input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 1rem;
}
.form-group input:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,82,204,0.2);
}

/* === DASHBOARD LAYOUT === */
.app-layout { display: flex; }
.sidebar {
  background: linear-gradient(180deg, var(--secondary-color), var(--primary-color));
  color: var(--white-color);
  width: 240px;
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
}
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 1.5rem;
}
.sidebar-links a {
  color: rgba(255,255,255,0.8);
  display: block;
  padding: 0.8rem 1.5rem;
  margin: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 500;
}
.sidebar-links a.active, .sidebar-links a:hover {
  background: rgba(255,255,255,0.2);
  color: var(--white-color);
}
.menu-hamburger-app { display: none; }
.content {
  margin-left: 240px;
  width: calc(100% - 240px);
  padding: 3rem;
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
  .app-layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; }
  .menu-hamburger-app { display: block; font-size: 1.5rem; cursor: pointer; }
  .sidebar-links { display: none; flex-direction: column; width: 100%; padding: 1rem 0; }
  .sidebar-links.active { display: flex; }
  .content { margin-left: 0; width: 100%; padding: 2rem; }
}
/* === MOBILE NAV === */
@media (max-width: 768px){
  .menu-hamburger{ display: block; }      /* mostra o botão */

  /* transforma a lista em overlay deslizante */
  .nav-links{
    position: fixed;
    top: 70px; left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background: var(--white-color);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 2rem;
    gap: 1.25rem;

    transform: translateY(-100%);
    transition: transform .3s ease-in-out;
  }
  .nav-links.active{ transform: translateY(0); }
  .nav-links li{ width: 100%; text-align: center; }
  .nav-links li a{ font-size: 1.1rem; }
}

/* ====== NEXT: COMPONENTES NOVOS (Onboarding, Kanban, Docs, Reports) ====== */

/* Progress / Steps */
.progress-wrap { margin: 1rem 0 2rem; }
.progress {
  background: #e8eef9; border-radius: 999px; height: 10px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}
.progress-bar {
  height: 10px; width: 0%;
  background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
  transition: width .3s ease;
}
.steps {
  display: grid; gap: .75rem; margin: 1rem 0 2rem;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
}
.step {
  background: #fff; border: 1px dashed #cfd7ea; border-radius: 10px; padding: .75rem 1rem;
  font-size: .95rem; color: #334; box-shadow: var(--shadow);
}
.step.done { border-style: solid; border-color: #8fb2ff; }

/* Wizard */
.wizard { display: grid; gap: 1.25rem; }
.wizard .card { margin: 0; }
.wizard .actions {
  display: flex; justify-content: space-between; gap: 1rem; margin-top: .25rem;
}

/* Form helpers */
.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(2,1fr); }
.grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(3,1fr); }
@media (max-width: 768px){ .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Kanban */
.board { display: grid; gap: 1rem; grid-template-columns: repeat(3,1fr); }
.column { background: var(--light-bg); border-radius: 12px; padding: 1rem; }
.column h3 { margin-bottom: .5rem; }
.task {
  background: #fff; border: 1px solid #e5e9f7; border-radius: 10px; padding: .75rem 1rem; margin-bottom: .75rem;
  box-shadow: var(--shadow);
}
.task .meta { display:flex; gap:.5rem; font-size:.8rem; color:#677; margin-top:.5rem; }
.badge { display:inline-block; font-size:.75rem; padding:.15rem .5rem; border-radius:999px; background:#eef3ff; color:#345; }

/* Docs */
.docs { display:grid; gap:1rem; }
.doc-item {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:#fff; border:1px solid #e5e9f7; border-radius:10px; padding:.75rem 1rem; box-shadow: var(--shadow);
}
.doc-item small { color:#678; }

/* Reports */
.report-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.report-card { background:#fff; border:1px solid #e5e9f7; border-radius:12px; padding:1rem; box-shadow:var(--shadow); }
.report-card h3{ margin-bottom:.25rem; }

/* Score (visual rápido) */
.score-pill {
  display:inline-flex; align-items:center; gap:.5rem; background:#f6f9ff; border:1px solid #e1e8ff; padding:.35rem .65rem; border-radius:999px;
}
.score-bar { height:10px; background:#e8eef9; border-radius:999px; overflow:hidden; }
.score-bar > span { display:block; height:10px; width:0%; background:linear-gradient(90deg, #1d7, #17a); transition:width .3s; }

/* Radar simples (placeholder) */
.radar {
  width: 320px; height: 320px; margin: 1rem auto;
  display:grid; place-items:center; background: radial-gradient(#f7f9ff, #eef3ff);
  border-radius: 50%; border: 1px solid #e1e8ff;
}
.radar svg { width: 80%; height: 80%; }


/* ===== Dashboard Pro ===== */
.dash-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.kpi-card,.chart-card{background:#fff;border:1px solid #e5e9f7;border-radius:12px;box-shadow:var(--shadow);padding:1rem}
.kpi-card{display:flex;flex-direction:column;justify-content:space-between;min-height:130px;animation:cardIn .4s ease both}
.kpi-title{font-size:.95rem;color:#5a6;letter-spacing:.2px}
.kpi-value{font-size:2rem;font-weight:700;color:#223;margin:.15rem 0}
.kpi-sub{font-size:.85rem;color:#667}
.kpi-row{display:flex;gap:1rem}
.kpi{flex:1}
.chart-card h3{margin-bottom:.25rem}
.chart-wrap{position:relative;min-height:280px}
.timeline{margin:0;padding:0;list-style:none}
.timeline li{display:flex;gap:.75rem;align-items:flex-start;padding:.65rem 0;border-bottom:1px dashed #e3e8ff}
.dot{width:10px;height:10px;border-radius:999px;background:#6aa3ff;margin-top:.4rem}
.legend{display:flex;gap:.75rem;margin-top:.5rem;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:#556}
.legend i{width:10px;height:10px;border-radius:2px;background:#cbd5ff;display:inline-block}
.card-animate{animation:cardIn .5s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:1200px){.dash-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:768px){.dash-grid{grid-template-columns:repeat(1,1fr)}.kpi-row{flex-direction:column}}

/* ===== Dashboard: charts em cards e responsivos ===== */
:root{
  --card-chart-h: 280px;          /* altura padrão dos gráficos */
}
.chart-card{
  background:#fff;border:1px solid #e5e9f7;border-radius:12px;
  box-shadow:var(--shadow);padding:1rem;display:flex;flex-direction:column;
}
.chart-card h3{margin-bottom:.25rem}
.chart-wrap{
  position:relative;width:100%;height:var(--card-chart-h); /* chave! */
}
.chart-wrap canvas{
  width:100% !important; height:100% !important; display:block; /* obedece a altura do card */
}

/* grid utilitário já existente, só garantindo quebra boa */
.dash-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
@media (max-width:1200px){
  :root{ --card-chart-h: 240px; }
  .dash-grid{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:768px){
  :root{ --card-chart-h: 220px; }
  .dash-grid{grid-template-columns:1fr}
}

/* ============ INDEX (Home) — melhorias visuais ============ */

/* util */
.nav-flex{display:flex;align-items:center;justify-content:space-between}
.grad-text{background:linear-gradient(90deg,#8ac4ff,#8ef3d9,#ffd498);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Hero com degradê animado */
.hero-animated{
  position:relative; overflow:hidden;
  background: radial-gradient(1200px 500px at 20% -20%, rgba(255,255,255,.25), transparent),
              radial-gradient(1200px 500px at 80% -30%, rgba(255,255,255,.18), transparent),
              linear-gradient(135deg, var(--secondary-color), var(--primary-color));
}
.hero-animated::before{
  content:""; position:absolute; inset:-20% -10%;
  background: conic-gradient(from 0deg, #78a2ff, #84f0d7, #ffd49a, #78a2ff);
  filter: blur(80px); opacity:.28; animation: spinGrad 18s linear infinite;
}
@keyframes spinGrad{ to{ transform: rotate(1turn); } }

.hero-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; align-items:center;
}
.hero-copy h1{color:#fff; line-height:1.15; margin-bottom:.65rem}
.hero-copy p{color:rgba(255,255,255,.9); max-width:640px}
.hero-ctas{display:flex; gap:.6rem; margin:1.1rem 0 1.2rem}
.hero-bullets{display:flex; gap:1rem; flex-wrap:wrap; color:#eaf1ff; font-size:.95rem}
.hero-bullets li{list-style:none}

.hero-card{
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px; padding: 1rem 1.25rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
  backdrop-filter: blur(6px);
}
.metric{display:flex; align-items:baseline; gap:.5rem; margin:.4rem 0}
.m-num{font-size:2.2rem; font-weight:700; color:#fff}
.m-label{color:#e7eeff; font-size:.9rem}

/* faixinha de métricas */
.strip{
  display:grid; grid-template-columns: repeat(4,1fr); gap:.75rem;
  margin-top:1.5rem; padding: .9rem 1rem;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25); border-radius:14px;
}
.strip div{display:flex; flex-direction:column; color:#f8fbff}
.strip b{font-size:1.2rem}
.strip span{opacity:.9; font-size:.9rem}

@media (max-width: 992px){
  .hero-grid{grid-template-columns:1fr}
}

/* títulos seção */
.section-title{ text-align:center; margin-bottom:.25rem; }
.section-subtitle{ text-align:center; color:#556; margin-bottom:1.5rem }

/* Cards “pro” (glass/hover) */
.pro-cards{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card-pro{
  position:relative; overflow:hidden;
  border:1px solid #e5e9f7; border-radius:16px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: 0 10px 30px rgba(20,40,90,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-pro:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(20,40,90,.12); }
.card-pro .icon-circle{
  width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center; margin-bottom:.6rem;
  background: linear-gradient(135deg,#eaf2ff,#fdf3e1);
  border:1px solid #e7edff;
}
.card-pro svg{ width:22px; height:22px; fill:#335; opacity:.9 }

/* Processo (passos) */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:.75rem }
.step{
  background:#fff; border:1px dashed #dfe7ff; border-radius:14px; padding:1rem;
  box-shadow: var(--shadow);
}
.badge-step{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px;
  background:#eaf2ff; color:#224; border:1px solid #dbe6ff; font-weight:600; margin-bottom:.4rem
}
@media (max-width:992px){ .process{grid-template-columns:repeat(2,1fr)} }
@media (max-width:768px){ .process{grid-template-columns:1fr} }

/* CTA central */
.cta-center{ display:flex; justify-content:center; margin-top:1.25rem }

/* Logos parceiros */
.logo-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; align-items:center }
.logo-item{
  height:66px; display:grid; place-items:center;
  background:#fff; border:1px solid #e5e9f7; border-radius:14px;
  color:#345; font-weight:600; box-shadow:var(--shadow)
}
@media (max-width:992px){ .logo-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:576px){ .logo-grid{grid-template-columns:repeat(2,1fr)} }

/* Depoimentos */
.testimonials .quote p{ font-style:italic }
.testimonials .quote span{ display:block; margin-top:.4rem; color:#667 }

/* FAQ (nativo) */
.faq details{
  background:#fff; border:1px solid #e5e9f7; border-radius:12px; padding:.8rem 1rem;
  box-shadow: var(--shadow); margin-bottom:.7rem
}
.faq summary{ cursor:pointer; font-weight:600; color:#223 }
.faq p{ margin-top:.5rem; color:#445 }

/* --- Navbar: garantir logo visível em fundo branco --- */
.navbar .logo {
  color: var(--primary-color) !important; /* força azul */
  position: relative;
  z-index: 2;
}

/* --- Hero animado: não bloquear cliques nos botões --- */
.header-hero.hero-animated { position: relative; }
.header-hero.hero-animated::before {
  pointer-events: none;   /* NÃO intercepta cliques */
  z-index: 0;             /* fica atrás de tudo */
}
.header-hero.hero-animated > .container,
.header-hero.hero-animated .strip {
  position: relative;
  z-index: 1;             /* conteúdo acima do ::before */
}

/* Opcional: rolagem suave para o "Ver como funciona" */
html { scroll-behavior: smooth; }