/* ============================================
   NIE · Núcleo de Dados
   Stylesheet v3.0 — Tema Claro · Sem emojis
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;700&display=swap');

/* ============ VARIÁVEIS CSS ============ */
:root {
  --gradiente-azul: linear-gradient(90deg, #0a76f1, #053b6e);

  /* — Cores de fundo — */
  --cor-fundo:              #F7F9FD;
  --cor-fundo-alternativo:  #EEF3FB;
  --cor-fundo-cartao:       #FFFFFF;
  --cor-fundo-hero:         #EFF4FF;

  /* — Cores de marca — */
  --azul-principal:         #1852C8;
  --azul-destaque:          #2563EB;
  --azul-gelo:              #DBEAFE;
  --branco:                 #FFFFFF;

  /* — Cores de texto — */
  --texto-escuro:           #0F172A;
  --texto-corpo:            #374151;
  --texto-secundario:       #6B7280;
  --texto-claro:            #94A3B8;
  --texto-branco:           #ffffff;
  --texto-preto:            #000000;

  /* — Bordas — */
  --borda:                  rgba(0, 0, 0, 0.08);
  --borda-azul:             rgba(24, 82, 200, 0.18);
  --borda-cartao:           rgba(24, 82, 200, 0.12);

  /* — Sombras — */
  --sombra-suave:           0 2px 12px rgba(15, 23, 42, 0.06);
  --sombra-media:           0 8px 32px rgba(15, 23, 42, 0.10);
  --sombra-forte:           0 20px 56px rgba(15, 23, 42, 0.15);

  /* — Tipografia — */
  --fonte-titulo:           'Poppins', sans-serif;
  --fonte-syne:             'Syne', sans-serif;
  --fonte-corpo:            'Plus Jakarta Sans', sans-serif;
  --fonte-mono:             'JetBrains Mono', monospace;

  /* — Layout — */
  --raio-borda:             8px;
  --raio-borda-grande:      16px;
  --transicao:              all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --largura-maxima:         1200px;
  --padding-secao:          110px 0;
}

/* ===== RESET E BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--fonte-corpo);
  background: var(--cor-fundo);
  color: var(--texto-corpo);
  line-height: 1.65;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-titulo);
  color: var(--texto-escuro);
  line-height: 1.15;
}

.conteiner {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== UTILITÁRIOS ===== */
.etiqueta {
  font-family: var(--fonte-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--azul-destaque);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.etiqueta::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--azul-destaque);
}

.titulo-secao {
  font-family: var(--fonte-titulo);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--texto-escuro);
}

.subtitulo-secao {
  font-size: 1.05rem;
  color: var(--texto-secundario);
  font-weight: 300;
  max-width: 560px;
  margin-top: 16px;
  line-height: 1.75;
}

.botao-primario {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--azul-principal);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 30px;
  border-radius: var(--raio-borda);
  border: none;
  cursor: pointer;
  transition: var(--transicao);
  box-shadow: 0 4px 14px rgba(24, 82, 200, 0.25);
}
.botao-primario:hover {
  background: var(--azul-destaque);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.35);
}

.botao-secundario {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--texto-escuro);
  font-family: var(--fonte-titulo);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 12px 30px;
  border-radius: var(--raio-borda);
  border: 1.5px solid var(--borda-azul);
  cursor: pointer;
  transition: var(--transicao);
}
.botao-secundario:hover {
  border-color: var(--azul-destaque);
  color: var(--azul-destaque);
  background: var(--azul-gelo);
}

/* ===== ANIMAÇÕES DE ENTRADA ===== */
.revelar {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.revelar.visivel { opacity: 1; transform: translateY(0); }
.revelar-atraso-1 { transition-delay: 0.1s; }
.revelar-atraso-2 { transition-delay: 0.2s; }
.revelar-atraso-3 { transition-delay: 0.3s; }
.revelar-atraso-4 { transition-delay: 0.4s; }

/* ===== EFEITOS DE FUNDO ===== */
.fundo-grade {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(24, 82, 200, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 82, 200, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.fundo-brilho {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

/* ===== CABEÇALHO ===== */
#cabecalho {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: var(--transicao);
}
#cabecalho.rolado {
  background: rgba(247, 249, 253, 0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--borda);
  box-shadow: var(--sombra-suave);
}

.nav-interna {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 80px;
}

.nav-logo {
  display: inline-flex;
  align-items: center;   /* alinha NIE + divisor + bloco de texto no eixo vertical */
  gap: 11px;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo .logo-principal {
  font-family: var(--fonte-syne);
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--texto-escuro);
  letter-spacing: -0.02em;
}

/* Divisor vertical entre NIE e o bloco de texto */
.logo-divisor-vertical {
  display: block;
  width: 1.5px;
  height: 30px;
  background: var(--borda-azul);        /* já existe no :root */
  border-radius: 2px;
  flex-shrink: 0;
}

/* Coluna com as duas linhas de texto */
.logo-bloco-texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Linha superior — complemento, discreto */
.logo-nucleo {
  display: block;
  font-family: var(--fonte-mono);       /* JetBrains Mono */
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.27em;              /* tracking alto calibra a largura = "DADOS" */
  text-transform: uppercase;
  color: var(--texto-secundario);
  white-space: nowrap;
  line-height: 1.2;
}

/* Linha inferior — destaque principal */
.logo-dados {
  display: block;
  margin-top: -3px;
  font-family: var(--fonte-titulo);     /* Poppins */
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--azul-destaque);
  white-space: nowrap;
  line-height: 1.15;
}

.nav-itens {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-itens a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texto-secundario);
  transition: var(--transicao);
  position: relative;
}
.nav-itens a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--azul-destaque);
  transition: var(--transicao);
}
.nav-itens a:hover { color: var(--texto-escuro); }
.nav-itens a:hover::after { width: 100%; }

.nav-chamada { margin-left: auto; }

.nav-menu-mobile {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  cursor: pointer; padding: 4px;
}
.nav-menu-mobile span {
  display: block; height: 2px;
  background: var(--texto-escuro);
  border-radius: 2px;
  transition: var(--transicao);
}
.nav-menu-mobile.aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-menu-mobile.aberto span:nth-child(2) { opacity: 0; }
.nav-menu-mobile.aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-menu-expandido {
  display: none;
  flex-direction: column;
  background: rgba(247, 249, 253, 0.98);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--borda);
  padding: 24px; gap: 8px;
  box-shadow: var(--sombra-media);
}
.nav-menu-expandido a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--texto-secundario);
  padding: 12px 0;
  border-bottom: 1px solid var(--borda);
  transition: var(--transicao);
}
.nav-menu-expandido a:hover { color: var(--azul-destaque); }
.nav-menu-expandido .botao-primario { margin-top: 12px; justify-content: center; }
.nav-menu-expandido.aberto { display: flex; }

/* ===== HERÓI ===== */
#heroi {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 76px;
  background: linear-gradient(160deg, var(--cor-fundo) 0%, var(--cor-fundo-hero) 100%);
}

.heroi-brilho-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 70%);
  top: -150px; right: -150px;
}
.heroi-brilho-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(24, 82, 200, 0.08) 0%, transparent 70%);
  bottom: 0; left: -80px;
}

.heroi-conteudo {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  padding: 80px 0;
}

.heroi-sobrescrito {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.heroi-ponto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--azul-destaque);
  animation: piscar 2s infinite;
}
@keyframes piscar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.5); }
}
.heroi-texto-acima {
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azul-destaque);
}

.heroi-titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
  color: var(--texto-escuro);
}
.heroi-titulo em {
  font-style: normal;
  background: linear-gradient(135deg, var(--azul-principal), var(--azul-destaque));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.heroi-descricao {
  font-size: 1.1rem;
  color: var(--texto-secundario);
  font-weight: 400;
  max-width: 480px;
  margin-bottom: 40px;
  line-height: 1.75;
}

.heroi-acoes { display: flex; gap: 16px; flex-wrap: wrap; }

.heroi-estatisticas {
  display: flex;
  gap: 32px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--borda);
  flex-wrap: wrap;
}
.heroi-valor {
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 800;
  color: var(--texto-escuro);
  line-height: 1;
}
.heroi-valor span { color: var(--azul-destaque); }
.heroi-rotulo {
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--texto-secundario);
  text-transform: uppercase;
  margin-top: 6px;
}

/* ===== CARTÃO VISUAL DO HERÓI ===== */
.heroi-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heroi-cartao {
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-borda-grande);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  box-shadow: var(--sombra-forte);
}

/* — Cabeçalho — */
.heroi-cartao-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid var(--borda);
}
.cartao-titulo-bloco { display: flex; flex-direction: column; gap: 2px; }
.cartao-titulo-label {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 700;
  color: var(--texto-escuro);
  line-height: 1;
}
.cartao-titulo-sub {
  font-family: var(--fonte-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-claro);
}
.emblema-ao-vivo {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(22,163,74,0.07);
  border: 1px solid rgba(22,163,74,0.22);
  border-radius: 100px;
  padding: 4px 11px;
  font-family: var(--fonte-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #16a34a;
}
.ponto-ao-vivo {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #16a34a;
  animation: piscar 2s infinite;
}

/* — Bloco IVE Score — */
.cartao-score-bloco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(110deg, #EFF4FF 0%, #F7F9FD 100%);
  border-bottom: 1px solid var(--borda);
  gap: 12px;
}
.score-esquerda {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.score-rotulo {
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-claro);
}
.score-valor {
  font-family: var(--fonte-titulo);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--texto-escuro);
  letter-spacing: -0.03em;
}
.score-tendencia {
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: #16a34a;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Gauge semicircular */
.score-gauge-envolvente {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.score-gauge-svg {
  width: 80px;
  height: 44px;
  overflow: visible;
}
.gauge-fill {
  stroke-dasharray: 0 146;
  animation: gauge-entrar 1.4s cubic-bezier(0.4,0,0.2,1) 0.3s forwards;
}
@keyframes gauge-entrar {
  to { stroke-dasharray: 107 146; }
}
.score-gauge-label {
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--texto-claro);
  text-transform: uppercase;
}

/* — Linhas de zona — */
.cartao-linhas-zona {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.zona-linha {
  padding: 12px 20px;
  border-bottom: 1px solid var(--borda);
  border-left: 3px solid transparent;
  transition: background 0.2s ease;
}
.zona-linha:last-child { border-bottom: none; }

/* Sotaque lateral por zona */
.zona-linha-azul     { border-left-color: #2563EB; }
.zona-linha-amber    { border-left-color: #f59e0b; }
.zona-linha-verde    { border-left-color: #10b981; }
.zona-linha-vermelho { border-left-color: #ef4444; }

/* Hover sutil */
.zona-linha-azul:hover     { background: rgba(37,99,235,0.03); }
.zona-linha-amber:hover    { background: rgba(245,158,11,0.03); }
.zona-linha-verde:hover    { background: rgba(16,185,129,0.03); }
.zona-linha-vermelho:hover { background: rgba(239,68,68,0.03); }

.zona-linha-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}
.zona-linha-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.zona-linha-nome {
  font-family: var(--fonte-titulo);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-escuro);
  line-height: 1;
}
.zona-linha-detalhe {
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--texto-claro);
}

.zona-linha-direita {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Delta de variação */
.zona-delta {
  font-family: var(--fonte-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
}
.zona-delta-positivo {
  color: #15803d;
  background: rgba(22,163,74,0.10);
}
.zona-delta-neutro {
  color: var(--texto-secundario);
  background: var(--cor-fundo-alternativo);
}
.zona-delta-negativo {
  color: #b91c1c;
  background: rgba(239,68,68,0.09);
}

/* Percentual */
.zona-pct {
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--azul-destaque);
  line-height: 1;
  min-width: 40px;
  text-align: right;
}
.zona-pct-amber    { color: #d97706; }
.zona-pct-verde    { color: #059669; }
.zona-pct-vermelho { color: #dc2626; }

/* Barra de progresso com gradiente */
.zona-barra-trilha {
  height: 6px;
  background: var(--cor-fundo-alternativo);
  border-radius: 100px;
  overflow: hidden;
}
.zona-barra-fill {
  height: 100%;
  border-radius: 100px;
  width: 0;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

/* Gradientes por zona — do saturado ao claro */
.zona-barra-azul {
  background: linear-gradient(90deg, #1852C8 0%, #2563EB 45%, #93c5fd 100%);
}
.zona-barra-amber {
  background: linear-gradient(90deg, #b45309 0%, #f59e0b 50%, #fde68a 100%);
}
.zona-barra-verde {
  background: linear-gradient(90deg, #047857 0%, #10b981 50%, #6ee7b7 100%);
}
.zona-barra-vermelho {
  background: linear-gradient(90deg, #b91c1c 0%, #ef4444 55%, #fca5a5 100%);
}

/* — KPIs rodapé — */
.cartao-kpis {
  display: flex;
  align-items: center;
  background: var(--cor-fundo-alternativo);
}
.kpi-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 13px 8px;
}
.kpi-valor {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--azul-destaque);
  line-height: 1;
}
.kpi-rotulo {
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--texto-claro);
  text-transform: uppercase;
}
.kpi-divisor {
  width: 1px;
  height: 28px;
  background: var(--borda);
  flex-shrink: 0;
}

/* ===== SEGMENTOS ATENDIDOS ===== */
/*
  REDESIGN v3.0
  ─────────────────────────────────────────────────────────────────────────
  ANTES: faixa horizontal com fundo gradiente azul-escuro, itens separados
  por ♦︎, sem hierarquia, parecia rodapé de ticker.

  DEPOIS: painel institucional com fundo --texto-escuro (#0F172A), layout
  de duas colunas. Coluna esquerda ancora o posicionamento da empresa;
  coluna direita exibe lista numerada dos 7 cargos com nível institucional.
  
  Justificativa de design:
  • Fundo escuro cria ruptura visual intencional entre herói (claro) e sobre
    (branco), funcionando como âncora cromática que lembra o profissional
    de política que o NIE é uma empresa séria.
  • Numeração editorial (01–07) hierarquiza a lista e comunica amplitude
    de cobertura sem parecer verbose.
  • Coluna ".cliente-nivel" (grayed) dá contexto institucional sem competir
    com o cargo principal — visível em desktop, oculta em mobile para não
    sobrecarregar telas pequenas.
  ─────────────────────────────────────────────────────────────────────────
*/
#clientes {
  background: var(--texto-escuro);
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}
#clientes::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.clientes-envolvente {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Coluna esquerda */
.clientes-intro-col {
  padding-top: 8px;
}
.clientes-acento {
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #60a5fa;           /* blue-400: legível sobre escuro, diferente do azul de ação */
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.clientes-acento::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: #60a5fa;
}
.clientes-declaracao {
  font-family: var(--fonte-titulo);
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.08;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.clientes-descricao {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.65);  /* era 0.45 — ganho perceptível sem virar branco puro */
  line-height: 1.75;
  font-weight: 300;
  max-width: 320px;
  margin-bottom: 36px;
}
.clientes-indicador {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.clientes-indicador-numero {
  font-family: var(--fonte-titulo);
  font-size: 3.2rem;
  font-weight: 800;
  color: #60a5fa;              /* idem ao acento: azul claro legível */
  line-height: 1;
}
.clientes-indicador-rotulo {
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55); /* era 0.35 */
  line-height: 1.4;
}

/* Coluna direita: lista numerada */
.clientes-lista-col {
  border-top: 1px solid rgba(255,255,255,0.14); /* era 0.08 */
}
.cliente-linha {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  transition: var(--transicao);
  cursor: default;
}
.cliente-linha:hover {
  border-bottom-color: #60a5fa;
}
.cliente-linha:hover .cliente-cargo {
  color: #ffffff;
}
.cliente-num {
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.38); /* era 0.20 */
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.cliente-cargo {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.92); /* era 0.88 — quase branco puro */
  transition: color 0.25s ease;
}
.cliente-nivel {
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.48); /* era 0.25 */
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
}

/* ===== SOBRE ===== */
#sobre {
  padding: var(--padding-secao);
  position: relative;
  overflow: hidden;
  background: var(--cor-fundo-cartao);
}
.sobre-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.sobre-texto .titulo-secao { margin-top: 14px; }
.sobre-texto p {
  color: var(--texto-corpo);
  font-weight: 400;
  line-height: 1.8;
  margin-top: 18px;
  font-size: 1.05rem;
}
.sobre-valores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--raio-borda-grande);
  overflow: hidden;
  margin-top: 36px;
}
.valor-item {
  background: var(--cor-fundo-cartao);
  padding: 22px;
  transition: var(--transicao);
}
.valor-item:hover { background: var(--cor-fundo-alternativo); }

/*
  ÍCONE DOS VALORES:
  Antes: div com emoji (font-size: 15px).
  Agora: div com SVG inline, stroke-based, dimensões fixas.
  A cor é herdada via currentColor a partir de color: var(--azul-destaque).
*/
.valor-icone {
  width: 34px;
  height: 34px;
  background: var(--azul-gelo);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--azul-destaque);
  margin-bottom: 10px;
  flex-shrink: 0;
}
.valor-icone svg {
  width: 16px;
  height: 16px;
}

.valor-nome { font-family: var(--fonte-titulo); font-size: 0.9rem; font-weight: 700; color: var(--texto-escuro); margin-bottom: 4px; }
.valor-descricao { font-size: 0.78rem; color: var(--texto-secundario); line-height: 1.5; }

/* Visual do Sobre */
.sobre-visual { position: relative; }
.sobre-cartao-principal {
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-borda-grande);
  padding: 36px;
  box-shadow: var(--sombra-media);
}
.sobre-cartao-cabecalho {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--borda);
}
.sobre-avatar {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--azul-principal), var(--azul-destaque));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-titulo);
  font-size: 1.1rem; font-weight: 800;
  color: var(--branco); flex-shrink: 0;
}
.sobre-nome { font-family: var(--fonte-titulo); font-size: 1rem; font-weight: 700; color: var(--texto-escuro); }
.sobre-funcao { font-size: 0.8rem; color: var(--texto-secundario); margin-top: 2px; }
.sobre-citacao {
  font-size: 1rem;
  color: var(--texto-corpo);
  line-height: 1.75;
  font-style: italic;
  font-weight: 400;
}
.sobre-citacao strong { font-style: normal; color: var(--azul-destaque); font-weight: 600; }
.sobre-numeros {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--borda);
  margin-top: 28px; border-radius: var(--raio-borda); overflow: hidden;
}
.sobre-numero {
  background: var(--cor-fundo-alternativo);
  padding: 20px 14px; text-align: center;
}
.numero-valor {
  font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 800; color: var(--azul-destaque); line-height: 1;
}
.numero-rotulo {
  font-family: var(--fonte-mono); font-size: 9px; letter-spacing: 0.1em;
  color: var(--texto-secundario); text-transform: uppercase; margin-top: 6px;
}

/* ===== METODOLOGIA ===== */
#metodologia {
  padding: var(--padding-secao);
  background: var(--cor-fundo-alternativo);
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  position: relative;
}
.metodologia-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 64px;
}
.metodologia-intro .subtitulo-secao { margin: 16px auto 0; }

.grade-estrutura {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--raio-borda-grande);
  overflow: hidden;
  margin-bottom: 60px;
}
.grade-celula {
  background: var(--cor-fundo-cartao);
  padding: 40px 28px;
  position: relative;
  overflow: hidden;
  transition: var(--transicao);
}
.grade-celula::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--azul-principal), var(--azul-destaque));
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transicao);
}
.grade-celula:hover::before { transform: scaleX(1); }
.grade-celula:hover { background: var(--cor-fundo-alternativo); box-shadow: var(--sombra-suave); }
.grade-letra {
  font-family: var(--fonte-titulo);
  font-size: 4rem; font-weight: 800;
  color: rgba(24, 82, 200, 0.12);
  line-height: 1; margin-bottom: 16px;
  transition: var(--transicao);
}
.grade-celula:hover .grade-letra { color: rgba(24, 82, 200, 0.25); }
.grade-dimensao { font-family: var(--fonte-titulo); font-size: 1rem; font-weight: 700; color: var(--texto-escuro); margin-bottom: 8px; }
.grade-questao { font-family: var(--fonte-mono); font-size: 11px; color: var(--azul-destaque); margin-bottom: 12px; }
.grade-descricao { font-size: 0.82rem; color: var(--texto-secundario); line-height: 1.6; }

/* PDCA */
.pdca-secao { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--borda); }
.pdca-cabecalho {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 32px; flex-wrap: wrap; gap: 16px;
}
.pdca-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pdca-cartao {
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-borda);
  padding: 26px 22px;
  transition: var(--transicao);
  box-shadow: var(--sombra-suave);
}
.pdca-cartao:hover {
  border-color: var(--borda-azul);
  transform: translateY(-4px);
  box-shadow: var(--sombra-forte);
}
.pdca-fase { font-family: var(--fonte-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--azul-destaque); text-transform: uppercase; margin-bottom: 8px; }
.pdca-acao { font-family: var(--fonte-titulo); font-size: 1.05rem; font-weight: 700; color: var(--texto-escuro); margin-bottom: 8px; }
.pdca-descricao { font-size: 0.8rem; color: var(--texto-secundario); line-height: 1.6; }

/* ===== SERVIÇOS ===== */
#servicos { padding: var(--padding-secao); position: relative; background: var(--cor-fundo-cartao); }
.servicos-cabecalho {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 56px; flex-wrap: wrap; gap: 24px;
}
.linha-servico { margin-bottom: 44px; }
.linha-servico-cabecalho {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
}
.linha-numero { font-family: var(--fonte-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--texto-claro); }
.linha-nome { font-family: var(--fonte-titulo); font-size: 1.05rem; font-weight: 700; color: var(--texto-escuro); }
.linha-divisor { flex: 1; height: 1px; background: var(--borda); }

.servico-cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.servico-cartao {
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-borda-grande);
  padding: 26px;
  transition: var(--transicao);
  box-shadow: var(--sombra-suave);
}
.servico-cartao:hover {
  border-color: var(--borda-azul);
  background: var(--cor-fundo);
  transform: translateY(-4px);
  box-shadow: var(--sombra-forte);
}
.servico-id { font-family: var(--fonte-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--azul-destaque); margin-bottom: 12px; }
.servico-nome { font-family: var(--fonte-titulo); font-size: 0.95rem; font-weight: 700; color: var(--texto-escuro); margin-bottom: 10px; line-height: 1.3; }
.servico-descricao { font-size: 0.82rem; color: var(--texto-secundario); line-height: 1.65; margin-bottom: 18px; }
.servico-rodape { padding-top: 14px; border-top: 1px solid var(--borda); }
.servico-prazo {
  font-family: var(--fonte-mono); font-size: 10px; color: var(--texto-claro);
  display: flex; align-items: center; gap: 6px;
}
.servico-prazo::before { content: "\25F7"; color: var(--azul-destaque); }

/* ===== DIFERENCIAIS ===== */
#diferenciais {
  padding: var(--padding-secao);
  background: var(--cor-fundo-alternativo);
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
}
.diferenciais-envolvente {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px; align-items: start;
}
.diferenciais-fixo { position: sticky; top: 100px; }
.diferenciais-tabela {
  border: 1px solid var(--borda);
  border-radius: var(--raio-borda-grande);
  overflow: hidden;
  background: var(--cor-fundo-cartao);
  box-shadow: var(--sombra-suave);
}
.diferenciais-linha { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.diferenciais-linha + .diferenciais-linha { border-top: 1px solid var(--borda); }
.diferenciais-celula {
  padding: 14px 18px;
  border-right: 1px solid var(--borda);
  font-size: 0.82rem; line-height: 1.5;
}
.diferenciais-celula:last-child { border-right: none; }
.linha-cabecalho { background: var(--azul-gelo); }
.celula-cabecalho { font-family: var(--fonte-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-secundario); font-weight: 700; }
.celula-eixo { font-weight: 600; color: var(--texto-escuro); }
.celula-mercado { color: var(--texto-secundario); }
.celula-nie { color: var(--azul-destaque); font-weight: 500; }

/* ===== PACOTES ===== */
#pacotes { padding: var(--padding-secao); background: var(--cor-fundo-cartao); }
.pacotes-intro { text-align: center; max-width: 600px; margin: 0 auto 64px; }
.pacotes-intro .subtitulo-secao { margin: 16px auto 0; }

.pacotes-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; }
.pacote-cartao {
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-borda-grande);
  padding: 32px;
  position: relative;
  transition: var(--transicao);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
}
.pacote-cartao.destaque {
  border-color: rgba(37, 99, 235, 0.35);
  background: linear-gradient(160deg, var(--cor-fundo-cartao) 0%, var(--cor-fundo-alternativo) 100%);
  box-shadow: var(--sombra-media);
}
.pacote-cartao.destaque::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--azul-principal), var(--azul-destaque));
}
.pacote-cartao:hover { transform: translateY(-6px); box-shadow: var(--sombra-forte); }
.pacote-emblema {
  display: inline-block;
  background: var(--azul-gelo);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 100px;
  padding: 4px 12px;
  font-family: var(--fonte-mono); font-size: 9px; letter-spacing: 0.15em; color: var(--azul-destaque); text-transform: uppercase;
  margin-bottom: 18px;
}
.pacote-nome { font-family: var(--fonte-titulo); font-size: 1.2rem; font-weight: 700; color: var(--texto-escuro); margin-bottom: 8px; }
.pacote-descricao { font-size: 0.83rem; color: var(--texto-secundario); margin-bottom: 22px; line-height: 1.6; }
.pacote-recursos { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.pacote-recurso {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.83rem; color: var(--texto-corpo); line-height: 1.4;
}
.pacote-recurso::before { content: '✓'; color: var(--azul-destaque); font-weight: 700; flex-shrink: 0; }

.retencao-bloco { margin-top: 16px; }
.retencao-titulo { font-family: var(--fonte-titulo); font-size: 1.1rem; font-weight: 700; color: var(--texto-escuro); margin-bottom: 16px; }
.retencao-tabela {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--borda); border: 1px solid var(--borda);
  border-radius: var(--raio-borda-grande); overflow: hidden;
}
.retencao-celula { background: var(--cor-fundo-cartao); padding: 18px 14px; transition: var(--transicao); }
.retencao-cabecalho { background: var(--cor-fundo-alternativo); }
.retencao-celula:hover { background: var(--cor-fundo-alternativo); }
.retencao-nome { font-family: var(--fonte-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--texto-secundario); text-transform: uppercase; margin-bottom: 8px; }
.retencao-preco { font-family: var(--fonte-titulo); font-size: 1rem; font-weight: 700; color: var(--azul-destaque); }

/* ===== PERFIS ===== */
#perfis {
  padding: var(--padding-secao);
  background: var(--cor-fundo-alternativo);
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
}
.perfis-intro { text-align: center; max-width: 600px; margin: 0 auto 52px; }
.perfis-intro .subtitulo-secao { margin: 16px auto 0; }
.perfis-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.perfil-cartao {
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-borda-grande);
  padding: 26px;
  transition: var(--transicao);
  box-shadow: var(--sombra-suave);
}
.perfil-cartao:hover {
  border-color: var(--borda-azul);
  transform: translateY(-4px);
  box-shadow: var(--sombra-forte);
}
.perfil-cabecalho { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
.perfil-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-titulo); font-size: 0.8rem; font-weight: 800;
  flex-shrink: 0;
}
.perfil-nome { font-family: var(--fonte-titulo); font-size: 0.9rem; font-weight: 700; color: var(--texto-escuro); }
.perfil-funcao { font-size: 0.76rem; color: var(--texto-secundario); margin-top: 2px; }
.perfil-citacao { font-size: 0.82rem; color: var(--texto-corpo); font-style: italic; line-height: 1.6; margin-bottom: 14px; }
.perfil-recomendacao { font-family: var(--fonte-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--azul-destaque); text-transform: uppercase; }

/* ===== CONTATO ===== */
#contato { padding: var(--padding-secao); position: relative; overflow: hidden; background: var(--cor-fundo-cartao); }
.contato-brilho {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.contato-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contato-informacoes .titulo-secao { margin-top: 14px; }
.contato-informacoes > p { color: var(--texto-secundario); font-weight: 400; line-height: 1.75; margin-top: 16px; font-size: 1.05rem; }
.contato-pontos { display: flex; flex-direction: column; gap: 16px; margin-top: 36px; }
.ponto-contato { display: flex; align-items: flex-start; gap: 14px; }

/*
  ÍCONE DOS PONTOS DE CONTATO:
  Antes: div com emoji (🕒 🔒 📋 ✅).
  Agora: div com SVG inline, stroke-based.
  Mesmo sistema de .valor-icone — cor via currentColor.
*/
.ponto-icone {
  width: 36px;
  height: 36px;
  background: var(--azul-gelo);
  border-radius: var(--raio-borda);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--azul-destaque);
  flex-shrink: 0;
}
.ponto-icone svg {
  width: 18px;
  height: 18px;
}

.ponto-titulo { font-family: var(--fonte-titulo); font-size: 0.88rem; font-weight: 700; color: var(--texto-escuro); margin-bottom: 2px; }
.ponto-descricao { font-size: 0.8rem; color: var(--texto-secundario); line-height: 1.5; }

.formulario-envolvente {
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-borda-grande);
  padding: 40px;
  position: relative;
  z-index: 1;
  box-shadow: var(--sombra-media);
}
.formulario-titulo { font-family: var(--fonte-titulo); font-size: 1.1rem; font-weight: 700; color: var(--texto-escuro); margin-bottom: 28px; }
.formulario-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo-grupo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.campo-completo { grid-column: 1 / -1; }
.campo-rotulo { font-family: var(--fonte-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--texto-secundario); text-transform: uppercase; }
.campo-entrada, .campo-selecao, .campo-texto {
  background: var(--cor-fundo);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-borda);
  padding: 12px 16px;
  font-family: var(--fonte-corpo); font-size: 0.9rem;
  color: var(--texto-escuro); transition: var(--transicao); outline: none; width: 100%;
}
.campo-entrada::placeholder, .campo-texto::placeholder { color: var(--texto-claro); }
.campo-entrada:focus, .campo-selecao:focus, .campo-texto:focus {
  border-color: var(--azul-destaque);
  background: var(--branco);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.campo-selecao {
  cursor: pointer; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
  background-color: var(--cor-fundo);
}
.campo-selecao option { background: var(--branco); color: var(--texto-escuro); }
.campo-texto { resize: vertical; min-height: 110px; }
.campo-erro { font-size: 0.76rem; color: #dc2626; margin-top: 3px; display: none; }
.campo-grupo.campo-invalido .campo-entrada,
.campo-grupo.campo-invalido .campo-selecao,
.campo-grupo.campo-invalido .campo-texto { border-color: #dc2626; }
.campo-grupo.campo-invalido .campo-erro { display: block; }
.botao-enviar { width: 100%; justify-content: center; margin-top: 4px; padding: 16px; font-size: 1rem; }

/*
  ESTADO DE SUCESSO DO FORMULÁRIO:
  Antes: .sucesso-icone com font-size: 3rem contendo ✅.
  Agora: container circular 64×64px com borda verde, SVG checkmark interno.
  Resolve o problema de emojis renderizarem diferente por OS/navegador.
*/
.formulario-sucesso { display: none; text-align: center; padding: 40px 20px; }
.formulario-sucesso.visivel { display: block; }
.sucesso-icone {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(22, 163, 74, 0.10);
  border: 2px solid rgba(22, 163, 74, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
  margin-bottom: 18px;
}
.sucesso-icone svg {
  width: 30px;
  height: 30px;
}
.sucesso-titulo { font-family: var(--fonte-titulo); font-size: 1.4rem; font-weight: 700; color: var(--texto-escuro); margin-bottom: 8px; }
.sucesso-texto { color: var(--texto-secundario); font-size: 0.88rem; }

/* ===== RODAPÉ ===== */
#rodape {
  background: var(--cor-fundo-alternativo);
  border-top: 1px solid var(--borda);
  padding: 64px 0 36px;
}
.rodape-grade {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}
.rodape-marca .nav-logo { margin-bottom: 16px; }
.rodape-slogan-desc { font-size: 0.88rem; color: var(--texto-secundario); line-height: 1.65; max-width: 280px; font-weight: 300; }
.rodape-slogan { font-family: var(--fonte-mono); font-size: 11px; letter-spacing: 0.15em; color: var(--azul-destaque); text-transform: uppercase; margin-top: 20px; }
.rodape-coluna-titulo { font-family: var(--fonte-titulo); font-size: 0.85rem; font-weight: 700; color: var(--texto-escuro); margin-bottom: 18px; }
.rodape-links { display: flex; flex-direction: column; gap: 12px; }
.rodape-links a { font-size: 0.84rem; color: var(--texto-secundario); transition: var(--transicao); }
.rodape-links a:hover { color: var(--azul-destaque); }
.rodape-base {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 28px; border-top: 1px solid var(--borda);
  flex-wrap: wrap; gap: 16px;
}
.rodape-copyright { font-family: var(--fonte-mono); font-size: 11px; color: var(--texto-secundario); }
.rodape-legal { display: flex; gap: 24px; flex-wrap: wrap; }
.rodape-legal a { font-family: var(--fonte-mono); font-size: 10px; color: var(--texto-secundario); transition: var(--transicao); }
.rodape-legal a:hover { color: var(--texto-corpo); }
.lgpd-emblema {
  display: flex; align-items: center; gap: 8px;
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.2);
  border-radius: 100px; padding: 5px 14px;
}
.lgpd-ponto { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
.lgpd-texto { font-family: var(--fonte-mono); font-size: 9px; letter-spacing: 0.12em; color: #16a34a; text-transform: uppercase; }

/* ===== NOTIFICAÇÃO (TOAST) ===== */
.notificacao {
  position: fixed; bottom: 100px; right: 32px;
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--borda-azul);
  border-radius: var(--raio-borda); padding: 16px 20px;
  font-size: 0.88rem; color: var(--texto-escuro);
  z-index: 9999;
  transform: translateY(20px); opacity: 0;
  transition: var(--transicao);
  box-shadow: var(--sombra-forte);
  max-width: 320px;
}
.notificacao.visivel { transform: translateY(0); opacity: 1; }

/* ===== WHATSAPP ===== */
.whatsapp-contato-bloco { margin-top: 32px; }
.whatsapp-contato-divisor {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.whatsapp-contato-divisor::before,
.whatsapp-contato-divisor::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--borda);
}
.whatsapp-contato-divisor span {
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-claro);
  white-space: nowrap;
}

.botao-whatsapp-contato {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #16a34a;
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 14px 24px;
  border-radius: var(--raio-borda);
  border: none;
  cursor: pointer;
  transition: var(--transicao);
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.28);
  text-decoration: none;
}
.botao-whatsapp-contato:hover {
  background: #15803d;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(22, 163, 74, 0.38);
}
.botao-whatsapp-contato .whatsapp-icone { width: 22px; height: 22px; flex-shrink: 0; }
.botao-whatsapp-contato .whatsapp-seta {
  margin-left: auto;
  opacity: 0.7;
  font-size: 1.1rem;
  transition: var(--transicao);
}
.botao-whatsapp-contato:hover .whatsapp-seta { transform: translateX(4px); opacity: 1; }

.botao-whatsapp-flutuante {
  position: fixed;
  bottom: 32px; right: 32px;
  z-index: 9998;
  width: 56px; height: 56px;
  background: #16a34a;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(22, 163, 74, 0.45);
  transition: var(--transicao);
  text-decoration: none;
}
.botao-whatsapp-flutuante svg { width: 28px; height: 28px; }
.botao-whatsapp-flutuante:hover {
  background: #15803d;
  transform: scale(1.12);
  box-shadow: 0 8px 32px rgba(22, 163, 74, 0.55);
}
.botao-whatsapp-flutuante:hover .flutuante-tooltip { opacity: 1; transform: translateX(0); pointer-events: auto; }

.flutuante-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  background: var(--texto-escuro);
  color: #fff;
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: var(--raio-borda);
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: var(--transicao);
  box-shadow: var(--sombra-suave);
}
.flutuante-tooltip::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: var(--texto-escuro);
}

/* ===== SPINNER NO BOTÃO DE ENVIO ===== */
.spinner-envio {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ===== RESPONSIVIDADE ===== */
@media (max-width: 1024px) {
  :root { --padding-secao: 80px 0; }
  .heroi-conteudo { gap: 48px; }
  .sobre-grade { gap: 48px; }
  .grade-estrutura { grid-template-columns: repeat(2, 1fr); }
  .pdca-grade { grid-template-columns: repeat(2, 1fr); }
  .servico-cartoes { grid-template-columns: repeat(2, 1fr); }
  .pacotes-grade { grid-template-columns: 1fr 1fr; }
  .pacotes-grade .pacote-cartao:last-child { grid-column: 1 / -1; max-width: 400px; margin: 0 auto; width: 100%; }
  .perfis-grade { grid-template-columns: repeat(2, 1fr); }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .diferenciais-envolvente { grid-template-columns: 1fr; gap: 40px; }
  .diferenciais-fixo { position: static; }
  .retencao-tabela { grid-template-columns: 1fr 1fr; }
  .retencao-cabecalho { grid-column: 1 / -1; }
  .clientes-envolvente { grid-template-columns: 1fr; gap: 40px; }
  .clientes-intro-col { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
  .clientes-declaracao { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .nav-logo .logo-principal { font-size: 2rem; }
  .logo-dados  { font-size: 0.85rem; }
  .logo-nucleo { font-size: 0.44rem; }
  .logo-divisor-vertical { height: 24px; }
  .nav-itens, .nav-chamada { display: none; }
  .nav-menu-mobile { display: flex; }
  .heroi-conteudo { grid-template-columns: 1fr; gap: 40px; }
  .heroi-visual { display: none; }
  .sobre-grade { grid-template-columns: 1fr; }
  .sobre-valores { grid-template-columns: 1fr; }
  .sobre-numeros { grid-template-columns: 1fr 1fr; }
  .grade-estrutura { grid-template-columns: 1fr; }
  .pdca-grade { grid-template-columns: 1fr 1fr; }
  .servico-cartoes { grid-template-columns: 1fr; }
  .pacotes-grade { grid-template-columns: 1fr; }
  .pacotes-grade .pacote-cartao:last-child { grid-column: auto; max-width: none; }
  .perfis-grade { grid-template-columns: 1fr; }
  .contato-grade { grid-template-columns: 1fr; }
  .formulario-linha { grid-template-columns: 1fr; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .diferenciais-linha { grid-template-columns: 1fr; }
  .diferenciais-celula { border-right: none; }
  .linha-cabecalho { display: none; }
  .retencao-tabela { grid-template-columns: 1fr; }
  .retencao-cabecalho { grid-column: auto; }

  /* Clientes: oculta coluna institucional em telas pequenas */
  .cliente-nivel { display: none; }
  .cliente-linha { grid-template-columns: 36px 1fr; }
  .clientes-intro-col { flex-direction: column; gap: 20px; }

  .botao-whatsapp-flutuante { bottom: 24px; right: 20px; width: 52px; height: 52px; }
  .botao-whatsapp-flutuante svg { width: 26px; height: 26px; }
  .flutuante-tooltip { display: none; }
  .notificacao { bottom: 88px !important; right: 16px; }
}

@media (max-width: 480px) {
  .logo-divisor-vertical,
  .logo-bloco-texto { display: none; }
  .heroi-acoes { flex-direction: column; }
  .pdca-grade { grid-template-columns: 1fr; }
  .rodape-grade { grid-template-columns: 1fr; }
  .sobre-numeros { grid-template-columns: 1fr; }
  .rodape-base { flex-direction: column; align-items: flex-start; }
}