:root {
  --azul: #38a9e8;
  --azul-escuro: #173b60;
  --azul-suave: #eaf6ff;
  --texto: #25364a;
  --cinza: #64748b;
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-family: Arial, sans-serif; color: var(--texto); background: #fff; }
a { text-decoration: none; }

.cabecalho {
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid #e5eef5;
  box-shadow: 0 2px 15px rgba(20,70,110,.04);
}

.marca { font-weight: 800; color: var(--azul-escuro); }
.marca span:last-child { color: var(--azul); }
.marca-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--azul-suave);
  color: var(--azul-escuro);
  margin-right: 8px;
}

.nav-link { color: var(--texto); font-weight: 500; }
.nav-link:hover { color: var(--azul); }

.btn-azul {
  background: var(--azul);
  color: #fff;
  border: 1px solid var(--azul);
  border-radius: 10px;
  padding: 11px 22px;
  font-weight: 600;
}
.btn-azul:hover { background: #168bcb; color: #fff; }

.btn-contorno {
  border: 1px solid #b7dff6;
  color: var(--azul-escuro);
  background: #fff;
  border-radius: 10px;
  padding: 11px 22px;
}
.btn-contorno:hover { background: var(--azul-suave); }

.hero {
  padding: 105px 0;
  background: linear-gradient(135deg, #fff 30%, #eaf6ff 100%);
}
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.14;
  color: var(--azul-escuro);
}
.hero h1 span { color: var(--azul); }
.hero-descricao {
  color: var(--cinza);
  font-size: 1.1rem;
  max-width: 580px;
  line-height: 1.8;
}

.etiqueta {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #1486c6;
}

.painel-hero {
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 25px 65px rgba(35,125,180,.14);
  transform: rotate(2deg);
}
.painel-topo {
  background: #e3f2fc;
  padding: 17px;
  display: flex;
  gap: 7px;
}
.painel-topo span {
  width: 10px;
  height: 10px;
  background: #8bc8ec;
  border-radius: 50%;
}
.painel-conteudo { padding: 45px 32px; text-align: center; }
.simbolo-codigo {
  font-size: 3rem;
  font-weight: 800;
  color: var(--azul);
}
.painel-conteudo h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--azul-escuro);
}
.painel-conteudo p { color: var(--cinza); }
.linha-decorativa {
  width: 65px;
  height: 5px;
  background: var(--azul);
  border-radius: 10px;
  margin: 25px auto;
}
.blocos-decorativos { display: flex; gap: 10px; }
.blocos-decorativos div {
  flex: 1;
  height: 42px;
  border-radius: 8px;
  background: var(--azul-suave);
}

.secao { padding: 90px 0; }
.secao-azul { background: #f0f9ff; }
.titulo-secao {
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 800;
  color: var(--azul-escuro);
}
.texto-secundario { color: var(--cinza); line-height: 1.8; }

.cartao-servico {
  height: 100%;
  padding: 30px 24px;
  background: #fff;
  border: 1px solid #e1eff8;
  border-radius: 17px;
  box-shadow: 0 8px 25px rgba(35,125,180,.05);
  transition: transform .2s, box-shadow .2s;
}
.cartao-servico:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(35,125,180,.12);
}
.icone-servico { font-size: 2rem; margin-bottom: 20px; }
.cartao-servico h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--azul-escuro);
}
.cartao-servico p { color: var(--cinza); line-height: 1.7; }

.cartao-experiencia, .cartao-projeto, .formulario {
  background: #fff;
  border: 1px solid #e1eff8;
  border-radius: 20px;
  padding: 35px;
  box-shadow: 0 10px 30px rgba(35,125,180,.06);
}
.cartao-experiencia h3 { font-size: 1.4rem; color: var(--azul-escuro); }
.item-experiencia {
  background: var(--azul-suave);
  border-radius: 9px;
  padding: 14px;
  font-size: .92rem;
  color: var(--azul-escuro);
}

.projeto-visual {
  min-height: 250px;
  border-radius: 15px;
  background: linear-gradient(135deg, #111317, #303841);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.projeto-visual span { font-size: 4rem; font-weight: 900; color: #e33131; }
.projeto-visual strong { font-size: 1.5rem; letter-spacing: 3px; }
.projeto-visual small { margin-top: 10px; color: #cbd5e1; }

.form-label { font-weight: 600; }
.form-control, .form-select {
  padding: 12px;
  border-color: #d6e7f3;
}
.form-control:focus, .form-select:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 .2rem rgba(56,169,232,.15);
}
.aviso { color: var(--cinza); font-size: .8rem; }

.rodape {
  padding: 25px 0;
  background: var(--azul-escuro);
  color: #fff;
  font-size: .9rem;
}
.rodape a { color: #d4efff; }

@media (max-width: 991px) {
  .hero { padding: 70px 0; }
  .painel-hero { transform: none; }
  .secao { padding: 65px 0; }
}
@media (max-width: 575px) {
  .cartao-experiencia, .cartao-projeto, .formulario { padding: 22px; }
  .hero { padding: 55px 0; }
}