/* Etapa 4a · Serviços: nome claro como título + o "comando" F2 em etiqueta; o hover abre os entregáveis.
   A margem direita fica livre para a linha de caneta que desce apontando cada tópico (ver contato.js). */
.servicos { background: #fff; color: #000; padding: 40px var(--gutter) 40px; }
.servicos-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 28px; }
.servicos h2 { font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: clamp(28px, 3.2vw, 48px); letter-spacing: -0.02em; }

.servicos ol { list-style: none; margin: 0; padding: 0 clamp(0px, 9vw, 140px) 0 0; border-top: 1px solid #000; }
.servico {
  display: grid; grid-template-columns: 64px minmax(200px, 1fr) 1.3fr; gap: 24px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid #000; position: relative; cursor: default;
}
.servico::before { /* barra verde que cresce no hover */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--verde); z-index: 0; transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.servico > * { position: relative; z-index: 1; }
.servico:hover::before { width: 100%; }
.servico .num { font-family: Menlo, monospace; font-size: 12px; color: #666; }
.servico h3 { font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -0.02em; line-height: 1.1; }
.servico h3 small { display: block; font-size: 12px; letter-spacing: .02em; font-family: Menlo, monospace; font-weight: 400; color: #555; margin-top: 6px; }
.servico p { font-size: 15px; line-height: 1.5; color: #222; max-width: 52ch; }
.servico ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s ease, opacity .3s ease; }
.servico:hover ul, .servico:focus-within ul { max-height: 120px; opacity: 1; }
.servico li { font-family: Menlo, monospace; font-size: 11.5px; padding: 4px 9px; border: 1px solid #000; border-radius: 999px; background: #fff; }

@media (max-width: 900px) {
  .servico { grid-template-columns: 40px 1fr; }
  .servico .descr { grid-column: 2; }
  .servico ul { max-height: none; opacity: 1; }
  .servicos-topo { flex-direction: column; gap: 6px; }
}
@media (hover: none) { .servico ul { max-height: none; opacity: 1; } }