/* ================================================================
   ARQUIVO: css/global.css
   USO:     Incluído em TODAS as páginas (index.html e portfolio.html)
   CONTÉM:  Variáveis, reset, tipografia, navbar, footer,
            cursor, botões, FABs, partículas, scroll reveal

   ÍNDICE:
   1.  Variáveis CSS (cores, fontes, espaçamentos)
   2.  Reset e base
   3.  Tipografia e utilitários
   4.  Cursor personalizado
   5.  Navbar
   6.  Botões reutilizáveis
   7.  Botões flutuantes (FABs — WhatsApp e Instagram)
   8.  Footer
   9.  Animações de entrada (Scroll Reveal)
   10. Correções de responsividade global
================================================================ */


/* ================================================================
   1. VARIÁVEIS CSS
   ★ COMO MUDAR AS CORES DO SITE INTEIRO:
     Edite os valores aqui embaixo. Todas as páginas serão afetadas.

   --bk   → fundo principal (mais escuro)
   --dk   → fundo de seções alternadas
   --card → fundo dos cards
   --bd   → azul escuro (botões primários)
   --bl   → azul claro / ciano (destaques, links)
   --bn   → neon ciano (brilhos, efeitos glow)
   --wh   → cor do texto principal
   --gr   → cor do texto secundário (suave)
================================================================ */
:root {
  /* Paleta */
  --bk:     #020610;
  --dk:     #060b18;
  --nv:     #080e20;
  --card:   #0a1020;
  --bd:     #0525e8;
  --bm:     #1a6fff;
  --bl:     #38c8ff;
  --bn:     #00f2ff;
  --wh:     #eef4ff;
  --gr:     #6b84a8;
  --gr2:    #4a6080;

  /* Tipografia
     ★ --T → fonte dos títulos grandes
       --B → fonte do corpo de texto
     Para trocar: altere o nome da fonte aqui e no <link> do HTML */
  --T: 'Bebas Neue', sans-serif;
  --B: 'Montserrat', sans-serif;

  /* Animações */
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Espaçamento lateral das seções
     ★ Aumentar = mais margem nas laterais */
  --px: clamp(18px, 6vw, 80px);

  /* Espaçamento vertical das seções */
  --py: clamp(72px, 10vw, 120px);
}


/* ================================================================
   2. RESET E BASE
================================================================ */

/* Zera margens e paddings; inclui border no cálculo de tamanho */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Scroll suave ao clicar em âncoras (#secao) */
html {
  scroll-behavior: smooth;
  /* Impede scroll horizontal em qualquer situação */
  overflow-x: hidden;
}

body {
  background: var(--bk);
  color: var(--wh);
  font-family: var(--B);
  /* Impede scroll horizontal (overflow: hidden no html não basta sozinho) */
  overflow-x: hidden;
  /* Cursor personalizado — ocultado no CSS, o JS desenha o nosso */
  cursor: none;
  line-height: 1.6;
  /* Tamanho mínimo evita que conteúdo some em telas muito pequenas */
  min-width: 320px;
}

/* Scrollbar estilizada (apenas Chrome/Edge/Safari) */
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: var(--bk); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--bd), var(--bl));
  border-radius: 3px;
}

/* Links sem sublinhado por padrão */
a {
  text-decoration: none;
  cursor: none; /* cursor personalizado */
  color: inherit;
}

/* Imagens responsivas por padrão */
img {
  max-width: 100%;
  display: block;
}

/* Canvas do fundo de partículas */
#pc {
  position: fixed;
  inset: 0;           /* atalho para top:0; right:0; bottom:0; left:0 */
  z-index: 0;
  pointer-events: none;
  opacity: .55;
}


/* ================================================================
   3. TIPOGRAFIA E UTILITÁRIOS
================================================================ */

/* Título de seção H2 padrão
   clamp(mín, preferido, máx) → escala suavemente entre tamanhos */
.h2 {
  font-family: var(--T);
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: .92;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
}
/* Palavra em destaque dentro do h2 */
.h2 .a { color: var(--bl); }

/* Subtítulo/descrição abaixo do h2 */
.sub {
  font-size: clamp(.84rem, 2vw, .93rem);
  color: var(--gr);
  line-height: 1.9;
  max-width: 540px;
  margin-bottom: 56px;
}

/* Tag pequena acima do título (ex: "O que fazemos") */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--bl);
  margin-bottom: 16px;
}
.tagline {
  width: 28px;
  height: 1px;
  background: var(--bl);
  flex-shrink: 0;
}

/* Linha separadora no topo de cada seção */
.sep {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(5,37,232,.5) 20%,
    var(--bl) 50%,
    rgba(5,37,232,.5) 80%,
    transparent
  );
}

/* Seção genérica com padding padrão */
.sec {
  position: relative;
  padding: var(--py) var(--px);
  z-index: 1;
}


/* ================================================================
   4. CURSOR PERSONALIZADO
   Dois elementos: ponto (cd) e anel com atraso (cr).
   Em celular (hover: none) são ocultados automaticamente.
================================================================ */

/* ── CURSOR PERSONALIZADO ──
   #cd = ponto neon que segue imediatamente
   #cr = anel maior com atraso (lerp)
   .cursor-ripple = círculo de clique (injetado pelo JS)
*/
#cd {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--bn);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 12px var(--bn), 0 0 24px rgba(0,242,255,.4);
  opacity: 0;
  transition: opacity .2s, width .2s, height .2s, background .2s;
}
#cr {
  position: fixed;
  width: 32px; height: 32px;
  border: 1.5px solid rgba(56,200,255,.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition:
    width .4s var(--ease),
    height .4s var(--ease),
    opacity .2s,
    border-color .3s,
    border-radius .3s;
}

/* Hover sobre clicável: ponto some, anel vira quadrado arredondado */
body.hov #cd {
  width: 4px; height: 4px;
  background: var(--bl);
}
body.hov #cr {
  width: 48px; height: 48px;
  border-color: var(--bl);
  border-radius: 10px;
  border-width: 1.5px;
}

/* Efeito de clique — ripple */
.cursor-ripple {
  position: fixed;
  width: 6px; height: 6px;
  border: 1.5px solid var(--bn);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
  transform: translate(-50%,-50%);
  animation: cripple .6s var(--ease) forwards;
}
@keyframes cripple {
  0%   { width:6px;  height:6px;  opacity:.9; border-color:var(--bn); }
  50%  { width:52px; height:52px; opacity:.4; border-color:var(--bl); }
  100% { width:72px; height:72px; opacity:0; }
}

@media (hover:none) and (pointer:coarse) {
  body { cursor:auto; }
  a, button { cursor:pointer; }
  #cd, #cr { display:none; }
}


/* ================================================================
   5. NAVBAR
================================================================ */

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding lateral usa var(--px) para consistência */
  padding: 20px var(--px);
  transition: padding .4s ease, background .5s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
}

/* Navbar compacta após rolar 60px (classe .sc adicionada pelo JS) */
nav.sc {
  padding: 12px var(--px);
  background: rgba(2,6,16,.96);
  backdrop-filter: blur(28px);
  border-bottom-color: rgba(56,200,255,.08);
}

/* ★ LOGO DA NAVBAR
   Para trocar por imagem: <img src="img/layout/logo.svg" alt="KLK Web"/>
   dentro de <a class="logo"> */
.logo {
  font-family: var(--T);
  font-size: 1.9rem;
  letter-spacing: 3px;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
}
.logo .a {
  color: var(--bl);
  text-shadow: 0 0 22px var(--bn);
}

/* Lista de links do menu */
.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  align-items: center;
}

/* Links individuais */
.nav-links a {
  color: var(--gr);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color .3s;
  position: relative;
  white-space: nowrap;
}

/* Underline animado sob cada link */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 0;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--bd), var(--bn));
  transition: width .35s;
}
.nav-links a:hover       { color: #fff; }
.nav-links a:hover::after,
.nav-links a.ativo::after { width: 100%; }
.nav-links a.ativo       { color: #fff; }

/* Botão "Fale conosco" */
.nav-cta {
  color: var(--bl) !important;
  border: 1px solid rgba(56,200,255,.35) !important;
  padding: 8px 20px !important;
  border-radius: 3px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  transition: all .35s !important;
  position: relative;
  overflow: hidden;
}
.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--bd), var(--bn));
  opacity: 0;
  transition: opacity .35s;
  z-index: 0;
}
.nav-cta:hover {
  color: #000 !important;
  border-color: transparent !important;
  box-shadow: 0 0 28px rgba(0,242,255,.35) !important;
}
.nav-cta:hover::before { opacity: 1; }
.nav-cta span { position: relative; z-index: 1; }
.nav-cta:hover span { color: #000; }
.nav-cta::after { display: none !important; }

/* ---- Menu hamburguer (mobile) ---- */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;  /* no mobile usa cursor normal */
  padding: 6px;
  z-index: 10;
}
.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
/* Animação do X quando aberto */
.hamburger.aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.aberto span:nth-child(2) { opacity: 0; }
.hamburger.aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ================================================================
   6. BOTÕES REUTILIZÁVEIS
================================================================ */

/* Botão primário (azul cheio com efeito shimmer) */
.btn-primario {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bd);
  color: #fff;
  padding: 14px 32px;
  border-radius: 4px;
  font-family: var(--B);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  cursor: none;
  transition: transform .3s, box-shadow .4s;
  white-space: nowrap;
  /* Tamanho mínimo para touch (44px recomendado) */
  min-height: 44px;
}
/* Efeito de luz passando (shimmer) */
.btn-primario::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition: left .65s;
}
.btn-primario:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 44px rgba(5,37,232,.6), 0 0 80px rgba(0,242,255,.18);
  color: #fff;
}
.btn-primario:hover::before { left: 100%; }

/* Botão secundário (contorno) */
.btn-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  padding: 13px 30px;
  border-radius: 4px;
  font-family: var(--B);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.18);
  cursor: none;
  transition: border-color .3s, background .3s, transform .3s;
  white-space: nowrap;
  min-height: 44px;
}
.btn-secundario:hover {
  border-color: var(--bl);
  background: rgba(56,200,255,.08);
  transform: translateY(-3px);
}

/* Em mobile, cursor normal nos botões */
@media (hover: none) and (pointer: coarse) {
  .btn-primario, .btn-secundario { cursor: pointer; }
}


/* ================================================================
   7. BOTÕES FLUTUANTES — FABs (WhatsApp e Instagram)
================================================================ */

.fab {
  position: fixed;
  /* ★ Distância da borda direita — aumente para afastar da borda */
  right: 24px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  text-decoration: none;
  transition: transform .35s, box-shadow .35s;
  /* Animação de entrada com atraso */
  animation: fabEntrada .6s ease both;
}
@keyframes fabEntrada {
  from { transform: scale(0) rotate(-90deg); opacity: 0; }
  to   { transform: scale(1) rotate(0);      opacity: 1; }
}

/* WhatsApp */
#fab-wa {
  bottom: 28px;
  background: #25D366;
  box-shadow: 0 4px 22px rgba(37,211,102,.5);
  animation-delay: 1.8s;
}
#fab-wa:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 32px rgba(37,211,102,.7);
}

/* Instagram */
#fab-ig {
  bottom: 94px;
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  box-shadow: 0 4px 22px rgba(188,24,136,.4);
  animation-delay: 2s;
}
#fab-ig:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 32px rgba(188,24,136,.6);
}

.fab svg { width: 26px; height: 26px; }

/* Tooltip ao passar o mouse */
.fab-tip {
  position: absolute;
  right: 64px;
  background: rgba(6,11,25,.95);
  border: 1px solid rgba(56,200,255,.2);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: .72rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .3s, transform .3s;
}
.fab:hover .fab-tip {
  opacity: 1;
  transform: translateX(0);
}


/* ================================================================
   8. FOOTER
================================================================ */

footer {
  position: relative;
  z-index: 1;
  background: var(--dk);
  border-top: 1px solid rgba(5,37,232,.14);
  padding: clamp(44px, 7vw, 70px) var(--px) clamp(22px, 4vw, 36px);
}

/* Grid do footer — 4 colunas no desktop, empilha no mobile */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(22px, 4vw, 48px);
  margin-bottom: 44px;
}

.footer-brand p {
  font-size: .82rem;
  color: var(--gr);
  line-height: 1.85;
  max-width: 300px;
  margin-top: 16px;
}

.footer-col h4 {
  font-family: var(--T);
  font-size: 1rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--bl);
  margin-bottom: 18px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul a {
  color: var(--gr);
  font-size: .81rem;
  transition: color .3s, padding-left .3s;
}
.footer-col ul a:hover { color: #fff; padding-left: 5px; }
.footer-col ul a[href^="mailto"] { color: rgba(56,200,255,.75); }
.footer-col ul a[href^="mailto"]:hover { color: var(--bn); }

/* Rodapé inferior */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.05);
  font-size: .73rem;
  color: var(--gr);
}


/* ================================================================
   9. ANIMAÇÕES DE ENTRADA (Scroll Reveal)
   O JS (global.js) usa IntersectionObserver para adicionar
   a classe .visivel quando o elemento entra na viewport.

   Classes disponíveis:
   .revelar     → sobe de baixo para cima
   .revelar-esq → desliza da esquerda
   .revelar-dir → desliza da direita

   Delays escalonados para efeito em cascata:
   .d1 .d2 .d3 .d4 .d5 .d6
================================================================ */

.revelar {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .8s ease, transform .8s ease;
}
.revelar-esq {
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity .8s ease, transform .8s ease;
}
.revelar-dir {
  opacity: 0;
  transform: translateX(44px);
  transition: opacity .8s ease, transform .8s ease;
}
.revelar.visivel,
.revelar-esq.visivel,
.revelar-dir.visivel {
  opacity: 1;
  transform: translate(0);
}

/* Delays escalonados */
.d1 { transition-delay: .07s; }
.d2 { transition-delay: .14s; }
.d3 { transition-delay: .21s; }
.d4 { transition-delay: .28s; }
.d5 { transition-delay: .35s; }
.d6 { transition-delay: .42s; }


/* ================================================================
   10. CORREÇÕES DE RESPONSIVIDADE GLOBAL

   REGRA PRINCIPAL: mobile-first
   Os estilos base valem para TODOS os tamanhos.
   Media queries adicionam comportamento para telas maiores.
================================================================ */

/* ---- Tablet e acima (≥ 768px) ---- */
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

/* ---- Mobile (< 768px) ---- */
@media (max-width: 767px) {
  /* Mostra hamburguer, oculta menu horizontal */
  .hamburger   { display: flex; }
  .nav-links   { display: none; }

  /* Menu mobile aberto (classe .aberto adicionada pelo JS) */
  .nav-links.aberto {
    display: flex;
    flex-direction: column;
    position: fixed;
    /* Começa abaixo da navbar */
    top: 58px;
    left: 0; right: 0;
    background: rgba(2,6,16,.98);
    padding: 28px var(--px) 36px;
    gap: 24px;
    border-bottom: 1px solid rgba(56,200,255,.1);
    /* Animação de entrada */
    animation: menuEntra .35s var(--ease) both;
    z-index: 999;
  }
  @keyframes menuEntra {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .nav-links.aberto a { font-size: .85rem; padding: 8px 0; }
  .nav-cta { padding: 12px 24px !important; }

  /* Footer empilhado */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* FABs menores e mais perto da borda */
  .fab     { right: 14px; width: 48px; height: 48px; }
  #fab-wa  { bottom: 20px; }
  #fab-ig  { bottom: 80px; }
}

/* ---- Mobile pequeno (< 480px) ---- */
@media (max-width: 479px) {
  .footer-grid { grid-template-columns: 1fr; }
}