/* ═══════════════════════════════════════════════════════════
   sistemas.css — overrides específicos de /sistemas, migrados do
   <style> inline do mockup (mockups/sistemas-mockup/hero-sistemas-v1.html,
   2026-07-21). Não entram nos arquivos compartilhados (hero-servico.css,
   trabalhos.css, como-funciona.css) porque /criacao-de-sites depende
   dos valores default deles — ver project_hero_sistemas_mockup_overrides
   na memória pro histórico de cada ajuste.
═══════════════════════════════════════════════════════════ */

/* Hero — CTA "Tirar minha ideia do papel" é mais longo que o de
   /criacao-de-sites; sem isso, o max-width mobile herdado de
   hero-servico.css quebra o texto em duas linhas. */
.btn {
  max-width: unset !important;
}

/* Hero — imagens de /sistemas (diagrama hub com 3 nós) têm muito
   espaço negativo embutido na imagem; a mesma % usada pro criacao.webp
   deixava o diagrama pequeno demais. */
.bloco-imagem img {
  width: 85%;
  height: auto;
  display: block;
  position: relative;
  bottom: 15px;
}

@media (max-width: 480px) and (max-height: 700px) {
  .bloco-imagem img {
    width: 78% !important;
    max-width: unset;
    bottom: -10px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 480px) {
  .bloco-imagem img {
    width: 85% !important;
    max-width: unset;
    margin: 0 auto !important;
    bottom: 0 !important;
  }
}

/* Nome do projeto em negrito, acima da lista de features. */
.trabalho-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
  flex-shrink: 0;
}

/* Lista de features do sistema, acima do depoimento — antes era um
   parágrafo em itálico embaixo do ícone de aspas, o que fazia a
   descrição do sistema parecer um depoimento real. */
.trabalho-features {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.trabalho-features li {
  position: relative;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text2);
}

.trabalho-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
}

/* Depoimento (3 parágrafos) — wrapper cresce pra preencher o espaço
   restante do card (altura fixa via --trab-card-h, herdada de
   trabalhos.css) e corta o excesso: trabalho-text sozinho (flex:1 +
   line-clamp) só funciona com um parágrafo, não vários irmãos. */
.trabalho-quote {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin-bottom: 14px;
}

.trabalho-quote .trabalho-text {
  flex: none;
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  margin-bottom: 8px;
}

.trabalho-quote .trabalho-text:last-child {
  margin-bottom: 0;
}

/* Link "Ver Online" (case público) ou aviso desabilitado (ferramenta
   interna, sem site pra linkar), entre o depoimento e o rodapé de
   nome/cargo do card. */
.trabalho-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  flex-shrink: 0;
}

.trabalho-link svg {
  flex-shrink: 0;
  color: var(--muted);
}

.trabalho-link:hover {
  text-decoration: underline;
}

.trabalho-link--disabled {
  color: var(--muted);
  font-weight: 500;
  pointer-events: none;
}

/* Seção 4 — os cards de /sistemas levam lista de features + depoimento +
   link, bem mais conteúdo que os de /criacao-de-sites; a altura fixa de
   trabalhos.css (560/520/500px) cortava o depoimento. Só /sistemas sobe. */
.trabalhos-stage {
  --trab-card-h: 760px;
}

@media (max-width: 870px) {
  .trabalhos-stage {
    --trab-card-h: 690px;
  }
}

@media (max-width: 700px) {
  .trabalhos-stage {
    --trab-card-h: 732px;
  }
}

/* Seção 4 — background dos cards só em /sistemas; /criacao-de-sites
   mantém o background original de trabalhos.css (#cadfde66). */
.trabalho-card {
  background: #dfdfca2e;
}

/* Seção 6 (Como Funciona) — /sistemas tem 5 etapas, não 4 como
   /criacao-de-sites; como-funciona.css tem grid-template-columns e
   regras :nth-child de trilho fixas em 4. */
.cf-grid {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 860px) {
  .cf-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 5 etapas em 2 colunas = linhas (1,2) (3,4) (5) — a 5ª sobra
     sozinha na última linha. */
  .cf-step:nth-child(4) .cf-rail::after {
    display: none;
  }

  .cf-step:nth-child(5) .cf-rail::before {
    display: none;
  }

  .cf-step:nth-child(5) {
    grid-column: 1 / -1;
  }

  .cf-step:nth-child(5) .cf-rail::before,
  .cf-step:nth-child(5) .cf-rail::after {
    display: none;
  }
}