/* ===== CORES (tiradas do logo): mude aqui e o site inteiro muda ===== */
:root {
  --fundo: #05070c;   /* preto azulado do logo */
  --fundo2: #0a0f18;  /* seções alternadas */
  --painel: #0d1420;
  --linha: #1c2838;
  --texto: #e8edf4;
  --apoio: #98a6ba;   /* textos secundários */
  --azul: #2b7fff;    /* azul "Informática" */
  --azul-esc: #1a63d6;
  --cobre: #d99a4e;   /* cobre dos circuitos */
  --zap: #12803f;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; font: 400 1.05rem/1.65 "Manrope", system-ui, sans-serif; color: var(--texto); background: var(--fundo); }
h1, h2, h3 { font-family: "Sora", "Manrope", sans-serif; line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cobre); outline-offset: 3px; }
.wrap { width: min(1100px, 100% - 40px); margin-inline: auto; }
.metal { background: linear-gradient(180deg, #fff 25%, #8d9bb0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin-top: 18px; max-width: 52ch; color: var(--apoio); font-size: 1.12rem; }

/* ===== TOPO ===== */
.topo { position: sticky; top: 0; z-index: 10; background: #05070cee; backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.barra { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img { width: 40px; height: 40px; }
.nome b { display: block; font: 700 1.05rem "Sora", sans-serif; letter-spacing: .16em; text-transform: uppercase; line-height: 1.1; }
.nome small { display: block; color: var(--azul); font-size: .68rem; letter-spacing: .42em; text-transform: uppercase; }
nav { display: flex; gap: 28px; }
nav a { text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--apoio); padding: 6px 0; border-bottom: 2px solid transparent; }
nav a:hover { color: #fff; border-color: var(--cobre); }
.menu-btn { display: none; background: none; color: #fff; border: 1px solid var(--linha); border-radius: 6px; padding: 8px 14px; font: inherit; cursor: pointer; }

/* ===== INÍCIO ===== */
.hero { padding: 56px 0 64px; background: radial-gradient(55% 75% at 78% 45%, #0b2a5e88, transparent 70%); }
.hero-grade { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 700; max-width: 15ch; }
.hero .acoes { margin-top: 32px; }
.hero-logo { width: 100%; height: auto; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); }
.trilha { height: 1px; background: linear-gradient(90deg, transparent, var(--cobre) 30%, var(--azul) 70%, transparent); }

/* ===== SEÇÕES ===== */
.secao { padding: 84px 0; }
.fundo2 { background: var(--fundo2); }
.secao h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 36px; color: #fff; }
.remoto-grade h2, .contato-grade h2 { margin-bottom: 0; }
.estreito { max-width: 720px; margin-left: max(20px, calc((100% - 1100px) / 2)); }

.servicos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 34px 56px; }
.servicos li { border-left: 3px solid var(--cobre); padding-left: 20px; }
.servicos h3, .passos h3 { font-size: 1.15rem; color: #fff; margin-bottom: 6px; }
.servicos p, .passos p { color: var(--apoio); }

.passos { list-style: none; counter-reset: passo; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.passos li { counter-increment: passo; border-top: 2px solid var(--azul); padding-top: 16px; }
.passos li::before { content: counter(passo); display: block; font: 700 2rem "Sora", sans-serif; color: var(--cobre); margin-bottom: 4px; }
.passos.col { grid-template-columns: 1fr; gap: 22px; margin-top: 32px; }
.passos.col li { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; border-top: 0; border-left: 2px solid var(--azul); padding: 0 0 0 16px; }
.passos.col li::before { grid-row: span 2; font-size: 1.6rem; margin: 0; }

/* ===== SUPORTE REMOTO ===== */
.remoto-grade { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
.painel { background: var(--painel); border: 1px solid var(--linha); border-top: 3px solid var(--azul); border-radius: 10px; padding: 28px; display: grid; gap: 14px; }
.painel h3 { font-size: 1.3rem; color: #fff; margin-bottom: 4px; }
.aviso { margin-top: 28px; padding-left: 14px; border-left: 3px solid var(--cobre); color: var(--apoio); font-size: .95rem; }

/* ===== BOTÕES ===== */
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-block; text-align: center; text-decoration: none; font: 700 1rem "Manrope", sans-serif; padding: 14px 22px; border-radius: 8px; border: 2px solid var(--azul-esc); background: var(--azul-esc); color: #fff; cursor: pointer; }
.btn.wa { background: var(--zap); border-color: var(--zap); }
.btn.sec { background: transparent; border-color: #3a4a60; color: var(--texto); }
.btn:hover { filter: brightness(1.2); }

/* ===== CONTATO ===== */
.contato-grade { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.direto { margin-top: 24px; color: var(--apoio); }
.direto a { color: var(--cobre); font-weight: 700; cursor: pointer; }
form { background: var(--painel); border: 1px solid var(--linha); border-radius: 10px; padding: 28px; display: grid; gap: 18px; }
label { display: grid; gap: 6px; font-weight: 700; font-size: .95rem; }
input, select, textarea { font: inherit; font-weight: 400; padding: 12px; border: 2px solid var(--linha); border-radius: 6px; background: var(--fundo); color: var(--texto); }
input:focus, select:focus, textarea:focus { border-color: var(--azul); outline: none; }
input:invalid.tocado, textarea:invalid.tocado { border-color: #e5484d; }

/* ===== RODAPÉ ===== */
.rodape { border-top: 1px solid var(--linha); padding: 28px 0; color: var(--apoio); font-size: .92rem; }
.rodape .wrap { display: flex; align-items: center; gap: 12px; }
.flutuante { position: fixed; right: 18px; bottom: 18px; z-index: 20; background: var(--zap); color: #fff; font-weight: 700; text-decoration: none; padding: 14px 20px; border-radius: 999px; box-shadow: 0 4px 16px #000a; cursor: pointer; }

/* ===== CELULAR ===== */
@media (max-width: 860px) {
  .hero-grade, .contato-grade, .remoto-grade, .servicos { grid-template-columns: 1fr; }
  .hero-logo { max-width: 420px; margin-inline: auto; order: -1; }
  .passos { grid-template-columns: 1fr 1fr; }
  .secao { padding: 56px 0; }
  .menu-btn { display: block; }
  nav { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--fundo); border-bottom: 1px solid var(--linha); flex-direction: column; gap: 0; padding: 8px 20px 16px; }
  nav.aberto { display: flex; }
  nav a { padding: 14px 0; border-bottom: 1px solid var(--linha); }
}
@media (max-width: 520px) { .passos { grid-template-columns: 1fr; } }