/* ============================================================
   Serviços — o que é próprio desta página
   O sistema (tokens, chrome, pauta, secao, escada, fecho) vem de
   shared/pages-light.css.

   A página não tem preço. Então a função que o preço cumpre — situar
   a pessoa — precisa ser cumprida por outra coisa, ou a página vira
   folheto. Aqui quem faz isso é o par ESCOPO + PRAZO: cada serviço
   declara item por item o que entrega e em quanto tempo. Prazo
   comunica porte, e porte comunica ordem de grandeza sem prender
   ninguém a um número.
   ============================================================ */

/* ---------- ALT Gumbo: a voz dos titulos ----------
   os titulos desta pagina falam em ALT Gumbo Black no lugar da
   Synapsis, que segue no corpo e nas frases. a Gumbo e metricamente
   identica a Synapsis Black — mesmos advances, mesma versal 0.65,
   peso 900 real — entao os clamps medidos para a Synapsis valem sem
   retoque, o fallback nao salta, e a troca e so de desenho: cantos
   macios e corte quente onde a Synapsis e neutra. */
@font-face{font-family:"ALT Gumbo";src:url(../assets/fonts/altgumbo-black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2013-2014}
:root{--altgumbo:"ALT Gumbo",var(--synapsis)}

/* ---------- capa ---------- */
/* "CONSTRUO" nao se parte como "MANI/FESTO" do manifesto: e uma palavra
   so, e o corpo tem de caber inteiro na coluna. o teto do clamp sai da
   medida real da palavra na coluna larga, nao de um numero bonito — a
   8.4vw ela invadia o texto vizinho. a Gumbo e metricamente igual a
   Synapsis, entao a medida segue valendo. */
.servicos-h1{
  display:grid;gap:.03em;
  font-family:var(--altgumbo);font-weight:900;
  font-size:clamp(40px,5.9vw,94px);line-height:.88;letter-spacing:-.014em;
  text-transform:uppercase;color:var(--fg);
}
.servicos-h1 .com-barra{
  display:grid;grid-template-columns:max-content minmax(20px,1fr);
  align-items:stretch;gap:.1em;
}
.servicos-h1 i{display:block;margin:.06em 0 .08em;background:var(--accent)}
/* a coluna do titulo puxa mais peso: display de uma palavra longa precisa
   de trilho, e a voz da direita respira melhor estreita. */
.capa-grid{
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);
  gap:clamp(32px,4vw,84px);align-items:center;
}
@media (max-width:820px){
  .capa-grid{grid-template-columns:minmax(0,1fr)}
}
.capa-claim{
  max-width:20ch;font-family:var(--ivypresto);font-style:italic;font-weight:400;
  font-size:clamp(24px,2.8vw,44px);line-height:1.12;text-wrap:balance;color:var(--accent);
}
.capa-nota{
  margin-top:clamp(18px,2.6vh,28px);max-width:44ch;
  font-weight:400;font-size:clamp(15px,1.06vw,19px);line-height:1.56;
  text-wrap:pretty;color:color-mix(in srgb,var(--fg) 82%,transparent);
}

/* ---------- o serviço ----------
   cada um e um bloco fechado com numero, nome, tese e a ficha do que
   entrega. o numero e grande de proposito: e ele que da ao conjunto
   ritmo de catalogo, e catalogo e o que uma pagina de servico e. */
.servicos-lista{list-style:none;display:grid;gap:clamp(28px,4.4vh,56px)}
.servico{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(24px,3.6vw,64px);align-items:start;
  padding-top:clamp(24px,3.4vh,40px);
  border-top:1px solid var(--line);
}
.servico-cabeca{display:grid;gap:clamp(12px,1.8vh,20px);align-content:start;min-width:0;justify-items:start}
.servico-num{
  font-weight:900;font-size:clamp(26px,2.9vw,44px);line-height:1;
  letter-spacing:-.02em;color:var(--accent);
}
.servico-nome{
  font-family:var(--altgumbo);font-weight:900;
  font-size:clamp(28px,3.6vw,58px);line-height:.94;letter-spacing:-.006em;
  text-transform:uppercase;color:var(--fg);
}
.servico-tese{
  max-width:26ch;font-family:var(--ivypresto);font-style:italic;font-weight:400;
  font-size:clamp(19px,1.9vw,30px);line-height:1.16;text-wrap:pretty;color:var(--accent);
}
.servico-corpo{display:grid;gap:clamp(18px,2.6vh,28px);min-width:0}
.servico-desc{
  font-weight:400;font-size:clamp(15px,1.06vw,19px);line-height:1.56;
  text-wrap:pretty;color:var(--fg);
}

/* a ficha: o que entra. e o substituto direto do preco — quem le
   "ate 6 paginas, responsivo, 30 dias de ajuste" ja entende o porte. */
.ficha-rotulo{
  display:block;font-weight:300;font-size:11px;letter-spacing:.2em;
  color:color-mix(in srgb,var(--fg) 66%,transparent);
}
.ficha{
  list-style:none;display:grid;gap:0;margin-top:10px;
  border-top:1px solid var(--line);
}
.ficha li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;
  align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:clamp(14px,.98vw,18px);line-height:1.45;text-wrap:pretty;color:var(--fg);
}
.ficha li::before{
  content:"";display:block;width:6px;height:6px;background:var(--accent);
  transform:translateY(-2px);
}

/* ---------- o desenho do serviço ----------
   Cada serviço se DESENHA: um diagrama de construção que mostra a forma
   do entregável, não um ícone que ilustra a categoria. A landing e uma
   prancha com um caminho so; o institucional e a grade de plantas com a
   home ancorando; o sistema e fluxo com no de permissao; o autoral e a
   grade sendo rompida.
   Vale a mesma regra que o resto do site segue: geometria que faz
   trabalho estrutural, nao ornamento. Se o desenho nao informasse a
   forma do que se compra, nao entraria. */
.servico-desenho{
  width:100%;max-width:clamp(150px,17vw,230px);
  color:color-mix(in srgb,var(--fg) 34%,transparent);
  transition:color .28s var(--ease);
}
.servico-desenho svg{display:block;width:100%;height:auto;overflow:visible}
.servico-desenho .traco{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:square}
.servico-desenho .fino{fill:none;stroke:currentColor;stroke-width:.9;opacity:.62}
.servico-desenho .massa{fill:currentColor;stroke:none}
.servico-desenho .sol{fill:var(--accent);stroke:none}
/* apontar o servico acende o desenho: a relacao entre o que se le e o
   que se ve fica explicita, em vez de ficar sugerida. */
.servico:hover .servico-desenho,
.servico:focus-within .servico-desenho{color:color-mix(in srgb,var(--fg) 72%,transparent)}

/* ---------- a régua do prazo ----------
   O prazo era texto solto. Virou escala: oito semanas de pauta, a faixa
   do servico marcada em cima. Assim os quatro servicos ficam
   COMPARAVEIS num relance — que e exatamente o trabalho que uma faixa de
   preco faria, e o unico motivo de ela fazer falta.
   A faixa sai de classe, nao de style inline: a CSP de producao declara
   style-src-attr 'none'. */
.servico-prazo{
  display:grid;gap:clamp(10px,1.4vh,16px);
  padding-top:clamp(14px,2vh,20px);border-top:1px solid var(--line);
}
.prazo-topo{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(10px,1.6vw,20px)}
.prazo-valor{
  font-family:var(--synapsis);font-weight:900;
  font-size:clamp(17px,1.5vw,24px);letter-spacing:-.004em;color:var(--fg);
  white-space:nowrap;
}
.prazo-nota{
  font-weight:300;font-size:11px;letter-spacing:.14em;line-height:1.6;
  color:color-mix(in srgb,var(--fg) 60%,transparent);
}
.regua{
  --de:0;--ate:8;
  position:relative;height:22px;
  /* a pauta: oito tiques, um por semana, no passo real da escala */
  background-image:repeating-linear-gradient(to right,
    color-mix(in srgb,var(--fg) 30%,transparent) 0 1px,
    transparent 1px calc(100% / 8));
  background-size:100% 7px;background-repeat:no-repeat;background-position:0 100%;
  border-bottom:1px solid color-mix(in srgb,var(--fg) 22%,transparent);
}
.regua::after{
  content:"";position:absolute;bottom:0;height:3px;background:var(--accent);
  left:calc(var(--de) / 8 * 100%);
  width:calc((var(--ate) - var(--de)) / 8 * 100%);
}
.regua--1-2{--de:1;--ate:2}
.regua--3-5{--de:3;--ate:5}
.regua--4-8{--de:4;--ate:8}
/* escopo aberto nao pode desenhar barra cheia: cheia le como "oito
   semanas", que e o oposto de "ainda nao sei". vira traco interrompido —
   e o gradiente garante o corte, que a 3px o border dashed nao entrega —
   e some antes do fim da pauta, deixando o resto em aberto. */
.regua--aberta::after{
  left:0;width:62%;
  background:repeating-linear-gradient(to right,
    var(--accent) 0 9px, transparent 9px 16px);
}
/* a ponta que continua: o escopo nao termina na regua, ele e levantado */
.regua--aberta::before{
  content:"";position:absolute;bottom:-2.5px;left:calc(62% + 6px);
  width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;
  border-left:7px solid color-mix(in srgb,var(--accent) 60%,transparent);
}
.regua-legenda{
  display:flex;justify-content:space-between;
  font-weight:300;font-size:9px;letter-spacing:.16em;
  color:color-mix(in srgb,var(--fg) 48%,transparent);
}

/* ---------- processo ---------- */
.processo-intro{
  max-width:62ch;margin-bottom:clamp(32px,5vh,64px);
  font-weight:400;font-size:clamp(16px,1.14vw,21px);line-height:1.58;
  text-wrap:pretty;color:color-mix(in srgb,var(--fg) 84%,transparent);
}
/* a escada do sistema, com o passo do processo na coluna do termo */
.escada--processo .escada-termo{
  display:grid;grid-auto-flow:column;justify-content:start;align-items:baseline;gap:.5em;
}
.escada--processo .escada-passo{
  font-family:var(--synapsis);font-style:normal;font-weight:900;
  font-size:.42em;letter-spacing:.1em;color:color-mix(in srgb,var(--fg) 52%,transparent);
}
.escada--processo .escada-frase{
  font-size:clamp(16px,1.32vw,23px);line-height:1.4;text-wrap:pretty;
}


@media (max-width:900px){
  .servico{grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vh,28px)}
  /* empilhado o desenho encolhe e vai para o alto, junto do numero: no
     estreito ele e assinatura do bloco, nao mais peca de composicao. */
  .servico-desenho{max-width:118px}
}