/* 
======================================================
 Projeto: Kiva – Inovação que Conecta
 Módulo: Tema Global do Site (CSS)
 Idealizadora: Valdelir da Graça dos Santos Souza
 Versão: 2.0.0  •  Build: 06/09/2025
 Direitos Autorais Preservados – Não remover este cabeçalho
======================================================
*/
:root{
  /* Paleta Kiva (ajuste aqui suas cores oficiais) */
  --kiva-bg:#0e0b16;
  --kiva-surface:#181325;
  --kiva-ink:#fafafa;
  --kiva-muted:#c8c1e9;
  --kiva-brand:#7a5cff;   /* roxo Kiva */
  --kiva-brand-d:#5b44c0; /* roxo escuro */
  --kiva-accent:#a78bfa;
 --kiva-link:#facc15;        /* amarelo visível */
  --kiva-link-hover:#fde68a;  /* amarelo mais claro no hover */
  --radius:12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  color: var(--kiva-ink);
  background: linear-gradient(180deg, #0f0b1a 0%, #0b0914 100%);
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;                /* espaço entre logo e texto */
  text-decoration: none;   /* sem sublinhado */
}

.logo img {
  max-height: 54px;     /* controla o tamanho REAL */
  width: auto;
  object-fit: contain;  /* evita estourar o layout */
  display: block;
}


.logo-text {
  font-size: 1.6rem;       /* maior que o normal */
  font-weight: 700;        /* negrito */
  color: #ffffff;          /* branco no fundo escuro */
  letter-spacing: 0.5px;   /* leve espaçamento */
}
.logo:hover .logo-text {
  color: #a78bfa; /* roxo suave ou qualquer cor da paleta */
}
.logo img {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* Header / Nav */
.header{
  position: sticky; top:0; z-index: 50;
  background: var(--kiva-surface);
  border-bottom: 1px solid #2a2042;
  padding: 12px 16px;
}
.header .nav{
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
}
.header .nav a{
  color: var(--kiva-muted); text-decoration: none; padding: 8px 10px; border-radius: 8px;
}
.header .nav a:hover{ color: var(--kiva-ink); background: #140f25; }

.hero-center {
  text-align: center;            /* Centraliza texto */
  display: flex;
  flex-direction: column;        /* Empilha em coluna */
  align-items: center;           /* Centraliza horizontal */
  justify-content: center;       /* Centraliza vertical */
  margin: 0 auto;
  max-width: 800px;              /* Limita largura para não ficar esticado */
  padding: 40px 20px;            /* Espaçamento confortável */
}

.hero h1 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: #ffffff;                /* branco ou cor principal */
}

.hero .slogan {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 8px;
  color: #e4e4e7;                /* cinza claro, menos chamativo que o h1 */
}

.hero .lead {
  font-size: 1rem;
  opacity: 0.85;                 /* texto mais suave */
}
/* ===== Logo no header ===== */
.logo{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}

/* força a logo a ter altura fixa no header, independente do tamanho do arquivo */
.logo img{
  height:40px !important;     /* controla o tamanho */
  max-height:40px !important; /* ceifador de exageros */
  width:auto !important;      /* mantém proporção */
  display:block;
  object-fit:contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); /* realce opcional p/ fundo escuro */
}

/* texto "Kiva" ao lado da logo */
.logo-text{
  font-size:1.6rem;
  font-weight:700;
  color:#fff;
  letter-spacing:.5px;
}
/* ===== Header & Nav ===== */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--kiva-surface, #0b0b12); /* cor do fundo */
  border-bottom: 1px solid #2a2042;
  padding: 8px 16px;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.logo img {
  height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

.logo-text {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .5px;
}

/* Links de navegação */
.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  color: #cfcde7;
  font-weight: 500;
  text-decoration: none;
  font-size: 1rem;
  transition: color .2s;
}

.nav-links a:hover {
  color: #a78bfa; /* roxo claro no hover */
}

/* Cards genéricos (para destaques/kits) */
#kits-destaque.grid{ justify-items: center; }

/* 1) Garante centralização do bloco que contém a grid (caso o pai esteja desalinhando) */
#kits-destaque, .kits-wrap, .wrap-kits {
  max-width: 1100px;      /* ajuste se quiser */
  margin: 0 auto;         /* centraliza o container */
}

/* 2) Sua grid genérica (mantida), com reforços de alinhamento */
.grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  justify-items: stretch;   /* cada card ocupa sua coluna por completo */
  align-items: stretch;     /* altura consistente */
}

/* 3) Se for um grid SÓ dos kits, pode usar um id/classe mais específica */
#kits-destaque.grid{
  justify-items: center;    /* centraliza os cards dentro da coluna (opcional) */
}

/* 4) Card base com melhorias e fallbacks de variáveis */
:root{
  --radius: 16px;                  /* fallback se não existir */
  --kiva-muted: #b5b5c9;           /* fallback de cor */
}
.card{
  background: #120e20;
  border: 1px solid #2a2042;
  border-radius: var(--radius, 16px);
  padding: 16px;
  color: #fff;                     /* garante contraste */
  box-sizing: border-box;
}
/* 5) Extensões para grids fixos e equalização de altura */
@media(min-width: 900px){
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
}

.card-wrap { display:flex; }
.card-wrap .card { width:100%; }

/* 6) Título e texto */
.card h3{ margin: 0 0 8px; }
.muted{ color: var(--kiva-muted, #b5b5c9); }

/* 7) Se seus links/botões estiverem “colando” à direita, força visual uniforme */
.card .btn, 
#kits-destaque .btn, 
#kits-destaque a{
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
}

/* 8) Caso algum elemento pai esteja empurrando tudo p/ direita (defesa contra vazamentos) */
#kits-destaque, 
#kits-destaque *{
  text-align: initial;             /* neutraliza text-align:right herdado */
}
.muted{ color: var(--kiva-muted); }
/* ===== Ajuste definitivo da logo no header ===== */
.logo img {
  height: 40px !important;   /* força altura */
  max-height: 40px !important;
  width: auto !important;    /* mantém proporção */
  display: block;
  object-fit: contain;
}

/* Footer */
.footer{
  border-top:1px solid #2a2042; color: var(--kiva-muted);
  padding: 24px 16px; text-align:center; margin-top: 40px;
}
/* —— Layout base —— */
:root{
  /* escala de espaçamento e tipografia */
  --space-1: 6px;  --space-2: 10px; --space-3: 14px; --space-4: 18px;
  --space-5: 22px; --space-6: 28px; --space-7: 36px; --space-8: 48px;
  --radius-16: 16px; --radius-20: 20px;
}
.container, .wrap{ max-width: 1100px; margin: 0 auto; padding: 0 var(--space-4); }

/* —— Seções com respiro consistente —— */
.section{ padding: var(--space-7) 0; }
.section:first-of-type{ padding-top: var(--space-6); }
.section:last-of-type{ padding-bottom: var(--space-8); }

/* —— Títulos e subtítulos (hierarquia) —— */
.section h1, .hero h1{ font-size: clamp(26px, 3.6vw, 38px); line-height: 1.15; margin: 0 0 var(--space-2); }
.section h2{ font-size: clamp(20px, 2.8vw, 28px); line-height: 1.2; margin: 0 0 var(--space-3); }
.section h3{ font-size: clamp(18px, 2.2vw, 22px); margin: 0 0 var(--space-2); }
.section .muted{ margin-top: 0; }

/* —— Grid responsiva uniforme —— */
.grid{ display: grid; gap: var(--space-3); }
@media(min-width: 760px){ .grid.cols-2{ grid-template-columns: repeat(2, 1fr); } }
@media(min-width: 920px){ .grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
                           .grid.cols-4{ grid-template-columns: repeat(4, 1fr); } }

/* —— Cards com altura nivelada e padding padrão —— */
.card{
  padding: var(--space-4);
  border-radius: var(--radius-16);
  display: flex; flex-direction: column;
  min-height: 100%;
}
.card .actions{ margin-top: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Equal height em grades: envolva cards em .grid .card-wrap para estabilidade */
.card-wrap{ display:flex; }
.card-wrap .card{ width:100%; }

/* —— Botões com tamanhos e contraste consistentes —— */
.btn{ 
  padding: 10px 14px; border-radius: 12px; font-weight: 700; 
  line-height: 1; min-height: 38px;
}
.btn.primary{ filter: saturate(1.05); }
.btn:focus-visible{ outline: 2px solid var(--accent, #7a5cff); outline-offset: 2px; }

/* —— Imagens e ícones em cards —— */
.card img, .card .thumb{
  width:100%; height:auto; border-radius: 12px; display:block;
}
.thumb-cover{ aspect-ratio: 16 / 9; object-fit: cover; }

/* —— Hero: respiro e alinhamento —— */
.hero{ padding: var(--space-6); border-radius: var(--radius-20); }
.hero .actions{ margin-top: var(--space-3); display:flex; gap: var(--space-2); flex-wrap:wrap; }

/* —— Contraste em modo dark (só se o fundo for escuro) —— */
body{ color: var(--fg, #f2f2f7); }
.muted{ color: var(--muted, #b5b5c9); }
.card:is(.light){ background:#f9f9fb; color:#1a1a1a; border:1px solid #e5e5ee; }
.card.light .muted{ color:#555; }

/* —— Rodapé compacto e alinhado —— */
footer .legal, footer p{ margin: var(--space-3) 0 0; line-height:1.5; }

/* —— Quebras comuns: evita “saltos” entre seções —— */
.section + .section{ border-top: 1px solid rgba(255,255,255,.06); }
/* ===== Projetos em construção (escopo isolado) ===== */
.projects { padding: 24px 0; }
.projects .hero {
  margin: 18px 0;
  border-radius: 20px;
  padding: 24px;
  background: linear-gradient(135deg, var(--accent2,#ad8bff), var(--glow,#ffd97a));
  color: #1a132f;
  border: 1px solid rgba(255,255,255,.10);
}
.projects .muted { color: var(--muted, #b5b5c9); }

/* grid própria dos projetos */
.projects .proj-grid { display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
@media(min-width: 900px){ .projects .proj-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* equalização de altura dos cards (só nos projetos) */
.projects .proj-wrap { display:flex; }
.projects .proj-wrap .proj-card { width:100%; }

/* card dos projetos: dark por padrão (ou troque por .light se quiser claro) */
.projects .proj-card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 16px;
  display:flex; flex-direction:column; min-height: 160px;
}
.projects .proj-card .head{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.projects .proj-card .actions{ margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; }
.projects .badge{ padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.18); font-size:12px }
.projects .badge.ok{ background:rgba(38,208,124,.12); border-color:rgba(38,208,124,.45); color:#26d07c }
.projects .badge.pro{ background:rgba(255,217,122,.12); border-color:rgba(255,217,122,.45); color:#7a5d00 }

/* opcional: versão clara só para esta seção */
.projects .proj-card.light{ background:#f9f9fb; color:#1a1a1a; border:1px solid #e5e5ee; }
.projects .proj-card.light .muted{ color:#555; }
/* ===============================
   BLOCO INTERATIVO: Kiva Play
   Componentes do modo "Ordene os Passos"
   =============================== */

.kiva-step-box,
.kiva-step-item,
.sortable-step,
.step-box {
  background-color: var(--kiva-ink);      /* fundo claro */
  color: var(--kiva-bg);                  /* texto escuro */
  border: 1px solid var(--kiva-muted);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 6px;
  font-weight: 500;
  transition: all 0.3s ease-in-out;
}

/* Efeito de hover e arraste */
.kiva-step-box:hover,
.kiva-step-item:hover,
.sortable-step:hover {
  background-color: var(--kiva-surface);
  border-color: var(--kiva-brand);
  cursor: grab;
}

/* Quando o modo escuro estiver ativo */
body.dark-mode .kiva-step-box,
body.dark-mode .kiva-step-item,
body.dark-mode .sortable-step {
  background-color: #f5f5f5;  /* fundo mais claro pro contraste */
  color: #111;                /* texto bem visível */
  border: 1px solid #666;
}
/* ===============================
   Ajuste de contraste para modo escuro
   =============================== */
body.dark-mode .kiva-step-box,
body.dark-mode .kiva-step-item,
body.dark-mode .sortable-step,
body.dark-mode .step-box {
  background-color: #f7f7f7; /* fundo claro para contraste */
  color: #121212;            /* texto escuro */
  border: 1px solid #666;
}

/* Efeito de hover no modo escuro */
body.dark-mode .kiva-step-box:hover,
body.dark-mode .kiva-step-item:hover,
body.dark-mode .sortable-step:hover {
  background-color: var(--kiva-surface);
  border-color: var(--kiva-brand);
}
/* Acessibilidade: Skip link visível ao focar */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:8px; width:auto; height:auto;
  background:#fff; color:#000; padding:8px 12px; border-radius:8px; z-index:1000;
}

/* Destaque do item ativo no menu */
.main-nav a.is-active{
  border-bottom:2px solid var(--acc, #7c4dff);
}
/* Links dentro do conteúdo (principalmente Kiva Caminhos, políticas etc.) */
main a,
section a,
.article a,
.page-content a {
  color: var(--kiva-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

main a:hover,
section a:hover,
.article a:hover,
.page-content a:hover {
  color: var(--kiva-link-hover);
}
/* Logo específica da página Quem Somos */
.logo-quem-somos {
  max-width: 180px;      /* tamanho final da logo na página */
  height: auto;
  display: block;
  margin: 32px auto 24px auto;  /* centralizada, com respiro em cima/baixo */
}