/* ============================================================
   wecomply.css — melhorias visuais sobre style.css base
   ============================================================ */

/* ── Variáveis de cor ─────────────────────────────────────── */
:root {
  --wc-purple:    #802FF1;
  --wc-purple-dk: #6120c4;
  --wc-dark:      #111118;
  --wc-gray:      #f4f5f7;
  --wc-text:      #292929;
  --wc-text-muted:#666;
  --wc-radius:    8px;
  --wc-shadow:    0 4px 20px rgba(128,47,241,.12);
}

/* ── Reset global mínimo ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Tipografia ────────────────────────────────────────────── */
body {
  font-family: 'Montserrat', sans-serif;
  color: var(--wc-text);
  -webkit-font-smoothing: antialiased;
}

h1 span, h2 span, h3 span, h4 span { color: var(--wc-purple); }

/* ── Seção padrão ─────────────────────────────────────────── */
.section { padding: 80px 0 !important; }
.title { font-size: clamp(24px, 3.5vw, 38px); font-weight: 800; letter-spacing: -0.5px; }

/* ── Box de serviços / portfólio ──────────────────────────── */
.box-services {
  background: #fff !important;
  border: 1px solid #e8e8ee !important;
  border-bottom: 3px solid var(--wc-purple) !important;
  border-radius: var(--wc-radius) !important;
  padding: 24px 24px 20px !important;
  margin-bottom: 28px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.05) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.box-services:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--wc-shadow) !important;
}

/* Ícone dentro do h4 — alinhamento e cor */
.box-services h4.heading {
  color: var(--wc-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: left !important;
}
.box-services h4.heading i {
  vertical-align: middle !important;
}
.box-services p,
.box-services ul {
  text-align: left !important;
}
.box-services p {
  color: #555 !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  text-align: left !important;
}
.box-services .list-unstyled li {
  color: #555;
  font-size: 13.5px;
  line-height: 1.6;
  text-align: left;
}
.heading:after { border-color: rgba(128,47,241,.2) !important; }

/* ── Seção Portfólio (fundo cinza claro) ──────────────────── */
.transprant-bg { background: var(--wc-gray) !important; }
.transprant-bg::after { background-color: var(--wc-gray) !important; }
.transprant-bg h1, .transprant-bg h2, .transprant-bg p, .transprant-bg .lead {
  color: var(--wc-text) !important;
}
.transprant-bg .box-services { background: #fff !important; }

/* ── Ícones coloridos ─────────────────────────────────────── */
.colored { color: var(--wc-purple) !important; }

/* Corrige cor vermelha dos ícones dos cards (style.css usa #F13647) */
.box-services .icon { color: var(--wc-purple) !important; }

/* ── Botões ───────────────────────────────────────────────── */
.btn-default {
  background: var(--wc-purple) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--wc-radius) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  padding: 9px 20px !important;
  min-width: 140px !important;
  transition: background .2s, transform .15s, box-shadow .2s !important;
}
.btn-default:hover, .btn-default:focus {
  background: var(--wc-purple-dk) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(128,47,241,.35) !important;
}
.btn-blue {
  background: #1a73e8 !important;
  border: none !important;
  color: #fff !important;
}
.btn-blue:hover, .btn-blue:focus {
  background: #1558b0 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(26,115,232,.35) !important;
}

/* ── Formulário de contato (no footer escuro) ─────────────── */
.form-control {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: var(--wc-radius) !important;
  color: #fff !important;
  height: 46px !important;
  font-size: 14px !important;
  transition: border-color .2s, background .2s !important;
}
.form-control:focus {
  background: rgba(255,255,255,.12) !important;
  border-color: var(--wc-purple) !important;
  box-shadow: 0 0 0 3px rgba(128,47,241,.2) !important;
  outline: none !important;
}
.form-control::placeholder { color: rgba(255,255,255,.45) !important; }

/* Select: fix texto invisível */
select.form-control {
  color: #fff !important;
  background-color: #1e1e30 !important;
}
select.form-control option {
  background: #1e1e30 !important;
  color: #fff !important;
}

textarea.form-control {
  height: auto !important;
  min-height: 140px !important;
  resize: vertical !important;
}

/* Botão enviar */
#submit {
  background: var(--wc-purple) !important;
  border: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 12px 32px !important;
  border-radius: var(--wc-radius) !important;
  min-width: 160px !important;
  transition: background .2s, box-shadow .2s !important;
}
#submit:hover {
  background: var(--wc-purple-dk) !important;
  box-shadow: 0 4px 14px rgba(128,47,241,.4) !important;
}

/* ── Scroll to top ────────────────────────────────────────── */
.scrollToTop {
  background: var(--wc-purple) !important;
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  line-height: 42px !important;
}

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .section { padding: 56px 0 !important; }
  .secPadding { padding: 48px 0 !important; }
  .space { padding: 12px 0 !important; }
  h1.title { font-size: 26px !important; }

  /* Navbar mobile */
  .navbar-collapse {
    background: rgba(17,17,24,.98);
    border-top: 1px solid rgba(128,47,241,.2);
    padding: 10px 0;
  }

  /* Cards de portfólio full-width */
  .box-services { padding: 24px 18px 20px !important; }

  /* Colunas de certificações centralizadas */
  .col-md-2 ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .col-md-2 ul li { display: inline-block; }

  /* Footer form full-width */
  .col-sm-7, .col-sm-5 { width: 100% !important; float: none !important; }
  .col-sm-5 { margin-top: 32px; }

  /* Botão enviar full-width */
  #submit, .btn-default { min-width: 100% !important; width: 100%; }
}