/* paginas.css — estilo ADITIVO das paginas do ciclo 008 (/servicos e /metodo).
   Carregado DEPOIS do estilo.css, que nao muda: a home esta congelada ate 2026-09-27
   e o portao check-paginas.mjs afirma o hash dela.  Nenhum seletor da home e redefinido
   aqui — so classes novas, com os tokens ja existentes. */

.pg-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem); max-width: 62ch; }
.pg-hero h1 { font-size: var(--fs-h2); line-height: 1.12; margin: 0.9rem 0 0; color: var(--navy); }

.site-nav a[aria-current="page"] { color: var(--navy); font-weight: 600; }

/* A navegação no celular vive no `estilo.css`, para valer também na home: desde que o
   autor mandou a home apontar para estas páginas (2026-08-17), o problema do beco sem
   saída era das quatro páginas, não só das novas. */

/* familia de problemas (o catalogo por classe) */
.familia {
  border-left: 3px solid var(--azul);
  padding: 0.4rem 0 0.4rem 1.4rem;
  margin: 2.2rem 0;
}
.familia h3 { margin: 0 0 0.3rem; color: var(--navy); }
.familia > p { margin: 0; color: var(--muted); max-width: 60ch; }
.pilulas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.pilula {
  font-family: var(--mono); font-size: 0.72rem; color: var(--navy);
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 0.3rem 0.85rem;
}

/* destaque escuro (diagnostico, como comeca) */
.painel-escuro {
  background: var(--dark); color: var(--dark-ink);
  border-radius: var(--r-md); padding: 1.6rem 1.8rem; margin: 2.4rem 0;
  box-shadow: var(--sombra);
}
.painel-escuro b { color: var(--ciano); display: block; margin-bottom: 0.4rem; }
.painel-escuro p { margin: 0; color: var(--dark-ink); max-width: 70ch; }
.painel-escuro a { color: var(--ciano); }

/* cartao de curso */
.curso {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.4rem 1.6rem; margin: 1.2rem 0;
  box-shadow: var(--sombra);
}
.curso h3 { margin: 0 0 0.2rem; color: var(--navy); }
.curso .meta { font-family: var(--mono); font-size: 0.72rem; color: var(--azul); margin: 0 0 0.7rem; }
.curso ul { margin: 0; padding-left: 1.2rem; color: var(--muted); }
.curso li { margin-bottom: 0.35rem; }

/* passos do metodo */
.passos { counter-reset: passo; margin: 2.2rem 0; padding: 0; list-style: none; }
.passos li {
  counter-increment: passo; position: relative;
  padding: 0 0 1.6rem 3.2rem; max-width: 62ch;
}
.passos li::before {
  content: counter(passo);
  position: absolute; left: 0; top: 0;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.85rem; font-weight: 700;
  color: #FFFFFF; background: linear-gradient(120deg, var(--navy), var(--azul));
}
.passos h3 { margin: 0 0 0.25rem; color: var(--navy); font-size: 1.05rem; }
.passos p { margin: 0; color: var(--muted); }

.nota-rodape-secao { font-size: 0.85rem; color: var(--muted); max-width: 70ch; }
.clientes-linha { color: var(--muted); max-width: 70ch; margin-top: 2rem; }
.clientes-linha b { color: var(--navy); }

/* ciclo 009: a entrada e as quatro saidas.  O verbo da camada fica acima do nome da
   familia, que continua o mesmo da home — a taxonomia validada no ciclo 008 nao muda,
   ganha so a posicao no metodo. */
.etapa {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 0.35rem;
}
.familia.entrada { border-left: 3px solid #237B92; padding-left: 1.1rem; }
.familia.entrada .etapa { color: #237B92; }