/* Identidade visual MTI — azul claro, branco e degradê para azul escuro */
:root {
  --azul-900: #073b29;
  --azul-800: #07563b;
  --azul-700: #08714d;
  --azul-600: #008b5e;
  --azul-500: #00a874;
  --azul-400: #31c592;
  --azul-300: #a6f3d1;
  --azul-100: #e4f7ee;
  --azul-50:  #f3fbf7;

  --fundo: #f5faf7;
  --superficie: #ffffff;
  --texto: #142b22;
  --texto-suave: #597368;
  --borda: #dcebe3;

  --ok: #15a35a;
  --alerta: #e8a317;
  --perigo: #d83b3b;
  --info: var(--azul-500);

  --degrade: linear-gradient(135deg, var(--azul-400) 0%, var(--azul-600) 45%, var(--azul-900) 100%);
  --raio: 12px;
  --sombra: 0 1px 2px rgba(10, 31, 68, .06), 0 6px 20px rgba(10, 31, 68, .07);
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte); color: var(--texto); background: var(--fundo); line-height: 1.55; }
img, svg { max-width: 100%; }
a { color: var(--azul-600); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .7em 1.3em; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid var(--azul-300); outline-offset: 2px;
}
.btn-primario { background: var(--azul-500); color: #fff; box-shadow: 0 6px 16px rgba(43, 125, 233, .35); }
.btn-primario:hover { background: var(--azul-600); }
.btn-branco { background: #fff; color: var(--azul-700); }
.btn-contorno { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-contorno:hover { background: rgba(255,255,255,.12); }
.btn-whats { background: #25d366; color: #fff; }

.logo { display: inline-flex; align-items: center; gap: .5em; font-weight: 800; font-size: 1.25rem; text-decoration: none; color: inherit; letter-spacing: .03em; text-transform: uppercase; line-height: 1.05; }
.logo-marca { width: 38px; height: 38px; flex: none; }
.logo b { color: var(--azul-400); font-weight: 800; }
/* Linha "Soluções em informática" abaixo do nome (opcional: <small> dentro do <span> do logo) */
.logo small { display: block; font-size: .5em; font-weight: 600; letter-spacing: .14em; color: var(--azul-400); margin-top: .2em; }

.logo-marca{object-fit:contain;border-radius:8px}.logo b{color:inherit}