/* =====================================================================
   Página de serviço — folha ADICIONAL, carregada depois do estilo.css.
   Nada aqui sobrescreve o site oficial: o estilo.css não é tocado, e esta
   folha só existe dentro de rascunho/.

   O que muda em relação à home, e por quê:
   - A home é centrada porque tem seis linhas de texto. Aqui são quatrocentas
     palavras, e texto corrido centrado obriga o olho a procurar o começo de
     cada linha. O CORPO passa a ser alinhado à esquerda; a capa e o fecho
     continuam centrados, para a página abrir e fechar com a cara do site.
   - Continua valendo: nenhuma linha divisória, nenhum ornamento gráfico,
     nenhuma caixa. O que separa as partes é espaço.
   - Continua valendo a disciplina das cores: o frio (--frio) só em rótulo,
     numeral e detalhe; o branco (--acento) só no botão e no título.
   ===================================================================== */

/* ------------------------------------------------------------------ capa */
/* Mais curta que o hero da home de propósito: quem chega aqui veio do Google
   atrás de uma resposta, e a resposta começa logo abaixo. Se a capa ocupar a
   tela inteira, a pessoa acha que a página é só o botão e volta. */
.capa{
  position:relative;
  padding:clamp(30px, 5vw, 60px) clamp(20px, 4vw, 52px) clamp(44px, 6vw, 76px);
  text-align:center;
}
.capa > *:not(.astro){position:relative;z-index:1}

/* O monograma sobe e encolhe: na home ele mora atrás de uma página inteira
   vazia, aqui atrás de uma capa baixa. Mantido o mesmo peso de atmosfera. */
.capa .astro{
  top:38%;
  width:min(50vw, 460px);
}

.migalha{
  margin:0 0 clamp(14px, 2vw, 22px);
  font-family:var(--rotulo);
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--frio);
}

/* 20ch, não 16: com 16 o "de" de "Gerenciamento de" não cabia na primeira
   linha e descia sozinho, e uma preposição sozinha no meio de um título em
   caixa alta lê como erro. O ch do Archivo 900 é estreito — 16ch dá menos
   largura do que os 16 caracteres realmente ocupam. */
.capa .titulo{max-width:20ch;margin-inline:auto}

.chamada{
  max-width:44ch;
  margin:clamp(18px, 2.4vw, 28px) auto 0;
  font-size:clamp(16px, 1.5vw, 20px);
  line-height:1.55;
  color:var(--apagado);
  text-wrap:balance;
}

/* ------------------------------------------------------------------ texto */
/* 62ch é o limite em que a linha ainda se lê sem o olho perder o retorno.
   Em 1440 isso dá uma coluna estreita no meio de muito preto — que é
   exatamente o efeito da home, e o motivo de a página não parecer outra. */
.texto{
  max-width:62ch;
  margin:0 auto;
  padding:0 clamp(20px, 4vw, 52px);
  text-align:left;
}

.bloco{margin:0 0 clamp(40px, 5.5vw, 72px)}

.texto h2{
  margin:0 0 clamp(12px, 1.4vw, 18px);
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(17px, 1.8vw, 23px);
  letter-spacing:-.025em;
  /* mesma trava da home: em caixa alta, abaixo de .98 a linha de baixo come
     o til e a cedilha */
  line-height:1.15;
  text-transform:uppercase;
  color:var(--tinta);
  text-wrap:balance;
}

.texto h3{
  margin:clamp(22px, 2.6vw, 32px) 0 6px;
  font-family:var(--corpo);
  font-weight:700;
  font-size:clamp(15px, 1.2vw, 17px);
  line-height:1.5;
  color:var(--tinta);
}

.texto p{
  margin:0 0 1em;
  color:var(--apagado);
}
.texto p:last-child{margin-bottom:0}

/* Ênfase em --tinta, não em --frio: o frio é rótulo e detalhe. Se ele entrar
   no meio da frase, a página inteira perde a hierarquia que o monograma tem. */
.texto b{font-weight:700;color:var(--tinta)}

/* Some com a margem da lista logo acima (1.2em) e chega em 1.4em — o
   suficiente para a nota não virar mais um item. */
.nota{margin-top:.2em;font-size:.92em}

/* ----------------------------------------------------------------- listas */
/* Os passos numerados com 01 02 03 em JetBrains Mono ciano — a mesma
   gramática do 270 e do 3 TOQUES lá na home. O numeral fora da coluna de
   texto: a frase começa toda no mesmo lugar, e é isso que faz a lista ler
   como escada em vez de bloco. */
.passos{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:passo;
}
.passos li{
  position:relative;
  margin:0 0 clamp(14px, 1.6vw, 20px);
  padding-left:3.1em;
  color:var(--apagado);
}
.passos li::before{
  counter-increment:passo;
  content:counter(passo, decimal-leading-zero);
  position:absolute;
  left:0;
  top:.08em;
  font-family:var(--rotulo);
  font-size:.85em;
  letter-spacing:.1em;
  color:var(--frio);
  font-variant-numeric:tabular-nums;
}
.passos li:last-child{margin-bottom:0}

/* Marcador de item: um travessão, que é tipografia. Ponto, quadrado ou ícone
   seriam ornamento — e o site não tem um só. */
/* A margem embaixo não é decoração: sem ela o parágrafo que vem depois da
   lista encosta no último item e se lê como mais um item — só que sem traço. */
.itens{
  list-style:none;
  margin:0 0 1.2em;
  padding:0;
}
.itens li{
  position:relative;
  margin:0 0 .55em;
  padding-left:1.6em;
  color:var(--apagado);
}
.itens li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--frio);
}

/* ----------------------------------------------------------------- fecho */
/* Segundo botão. Na home um só bastava, porque a página cabia na tela; aqui a
   pessoa rolou quatrocentas palavras e o primeiro botão ficou longe. */
.fecho{
  padding:clamp(16px, 3vw, 34px) clamp(20px, 4vw, 52px) clamp(40px, 5vw, 64px);
  text-align:center;
}
.fecho .chamada{margin-top:0}

.volta{
  margin:clamp(22px, 3vw, 34px) 0 0;
  font-size:clamp(13px, 1vw, 15px);
  color:var(--apagado-3);
}
.volta a{
  color:var(--apagado-2);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:rgba(var(--frio-rgb), .45);
}
.volta a:hover{color:var(--tinta)}

/* A home usa `main{flex:1}` para empurrar os trabalhos até o rodapé. Numa
   página que rola, isso não faz sentido: sem esta linha o conteúdo curto
   ficaria esticado no meio de um vão. */
.pagina{display:block}

/* ===== COSTURA 2026-08-26 — inicio ===== */
  /* A régua vive presa à janela, fora do fluxo, e não recebe clique.

     ⚠️ `body > .costura`, nunca `.costura` sozinha. O `estilo.css` tem
     `body > *:not(.ceu){position:relative; z-index:1}` — (0,0,1,1) — e ele
     ganha de uma classe solta (0,0,1,0). Resultado medido no site no ar: a
     régua virava `position:relative`, caía no fim do fluxo do documento e só
     aparecia quando a rolagem chegava ao pé da página (retângulo em
     3079..3979 numa janela de 900). É a MESMA armadilha que já derrubou a
     `.abertura` e o `.painel`, e nenhum conferidor tinha percebido porque
     todos liam o desenho por DENTRO do svg, nunca a posição da régua na tela.
     `body > .costura` empata em (0,0,1,1) e vence pela ordem: o `pagina.css`
     carrega depois do `estilo.css`. */
  body > .costura{
    position:fixed;
    left:clamp(10px, 2.2vw, 26px);
    top:0;
    bottom:0;
    width:22px;
    z-index:3;
    pointer-events:none;
  }
  .costura svg{ width:100%; height:100%; display:block; overflow:visible }

  /* o trilho apagado, que mostra o caminho inteiro */
  .costura .trilho{
    stroke:rgba(var(--frio-rgb), .13);
    stroke-width:1;
    fill:none;
  }
  /* o traço que desenha conforme a rolagem */
  .costura .linha{
    stroke:rgba(var(--frio-rgb), .55);
    stroke-width:1.5;
    fill:none;
    stroke-linecap:round;
  }
  /* os nós: um por bloco de conteúdo */
  .costura .no{
    fill:var(--preto);
    stroke:rgba(var(--frio-rgb), .30);
    stroke-width:1.2;
    transition:fill .45s var(--pousa), stroke .45s var(--pousa), r .45s var(--pousa);
  }
  .costura .no.aceso{
    fill:var(--frio);
    stroke:var(--frio);
  }

  /* No celular a régua sai: 22px de lateral numa tela de 390px é conteúdo
     perdido, e a página de serviço já é uma coluna só. */
  @media (max-width:760px){ .costura{ display:none } }

  @media (prefers-reduced-motion:reduce){
    /* a linha fica cheia e parada, e todos os nos acesos: ela é orientação,
       não enfeite — tirar a informação seria pior que tirar o movimento */
    .costura .linha{ stroke-dashoffset:0 !important }
    .costura .no{ fill:var(--frio); stroke:var(--frio); transition:none }
  }
/* ===== COSTURA 2026-08-26 — fim ===== */