/* ============================================================
   QP3: páginas de serviço

   A página é uma GRADE DE DUAS METADES com um vão no meio, e no vão desce a
   trajetória: um traço dourado desenhado conforme a pessoa rola, com um nó
   em cada trecho. À esquerda do traço ficam o rótulo e o título, encostados
   nele e presos enquanto o trecho dura. À direita, o conteúdo.

   Assim as duas metades da tela trabalham: nada de coluna solta de um lado e
   vazio do outro. Abaixo de 1000px a grade colapsa, o traço vai para a
   margem esquerda e o conteúdo corre ao lado dele.

   O nome do serviço é um par travado em duas linhas, caixa alta em Archivo
   com o eixo de largura em 125, serifada dourada embaixo, e o corpo da
   fonte é calculado pelo servico.js a partir da largura real da coluna.

   Herda styles.css: fundo, ouro, barra, céu, grão, rolagem suavizada.
   ============================================================ */

.sv {
  --vao: clamp(64px, 8.5vw, 148px);
  position: relative;
  z-index: 1;
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- volta para o site ---------- */
.sv-voltar {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: calc(var(--nav-h) + 44px);
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  font-size: 11px;
  font-weight: 540;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.sv-voltar em { font-style: normal; transition: transform 0.3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .sv-voltar:hover { color: var(--ink); border-color: rgba(211, 170, 94, 0.34); }
  .sv-voltar:hover em { transform: translateX(-4px); }
}

/* ============================================================
   ABERTURA
   O nome ocupa a largura toda; o resumo e o botão já descem para a metade
   da direita, que é onde o conteúdo vai continuar página abaixo.
   ============================================================ */
.sv-abre {
  position: relative;
  padding: clamp(38px, 6vh, 72px) 0 clamp(56px, 9vh, 110px);
}
@media (min-width: 1000px) {
  .sv-abre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--vao) minmax(0, 1fr);
    align-items: start;
  }
  .sv-rotulo, .sv-nome { grid-column: 1 / -1; }
  .sv-abre-fim { grid-column: 3; }
}

.sv-rotulo {
  display: block;
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(16px, 2.4vh, 26px);
}

/* O nome. Largura em 125 e entreletra negativa: o Archivo fica largo e
   apertado ao mesmo tempo, que é o que dá peso sem virar bloco. O corpo vem
   do JS, `vw` não sabe quantas letras a palavra tem, e por isso IDENTIDADE
   estourava a coluna enquanto SITES ficava pequeno.

   As duas linhas empilham por FLEX, não por quebra de texto: assim o espaço
   entre elas é um número que eu controlo, e não o resto da caixa de linha de
   cada fonte. */
.sv-nome {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: clamp(46px, 11.5vw, 168px);
  font-weight: 700;
  font-variation-settings: "wdth" 125, "wght" 700;
  line-height: 0.84;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-bottom: clamp(24px, 3.4vh, 44px);
}
/* a palavra em caixa alta nunca quebra: é ela que define o corpo da fonte.
   a serifada quebra normalmente, porque tem mais letras e menos peso */
.sv-nome [data-letras]:not([data-serif]) { display: block; white-space: nowrap; }
.sv-nome .l {
  display: inline-block;
  /* cada letra responde ao cursor pelo eixo de largura da fonte */
  font-variation-settings: "wdth" var(--w-l, 125), "wght" 700;
}
.sv-nome i {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.6em;
  color: var(--gold);
  letter-spacing: -0.01em;
  /* a Instrument Serif tem ascendente alto; sem apertar a entrelinha sobrava
     meio corpo de letra entre as duas linhas */
  line-height: 0.72;
  margin-top: -0.04em;
}
.sv-nome i .l { font-variation-settings: normal; }

.sv-linha {
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.6;
  color: rgba(242, 240, 233, 0.76);
  max-width: 46ch;
  text-wrap: pretty;
}
.sv-abre-fim .sv-cta { margin-top: clamp(28px, 4vh, 44px); }

/* ============================================================
   CORPO: duas metades com a trajetória no vão
   ============================================================ */
.sv-corpo { position: relative; }

/* a trajetória mora no vão, e o vão fica exatamente no meio da grade */
.sv-trilha {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 34px;
  pointer-events: none;
  overflow: visible;
  /* Camada própria. O traço aceso muda a cada quadro de rolagem e tem
     brilho (drop-shadow); morando na mesma camada do texto, cada quadro
     obrigava o navegador a rasterizar de novo faixas da largura da tela
     inteira, com todo o texto dentro. Sozinho, só o traço é refeito. */
  will-change: transform;
}
@media (min-width: 1000px) {
  .sv-trilha { left: 50%; width: var(--vao); transform: translateX(-50%); }
}
.sv-trilha svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* o caminho apagado, que mostra o percurso inteiro desde o começo */
.sv-trilha .base { fill: none; stroke: rgba(211, 170, 94, 0.13); stroke-width: 1.2; }
/* o caminho aceso, revelado pela rolagem */
.sv-trilha .viva {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(211, 170, 94, 0.45));
}
html.q-leve .sv-trilha .viva { filter: none; }

.sv-no {
  position: relative;
  padding: clamp(56px, 9vh, 112px) 0 clamp(56px, 9vh, 112px) 46px;
}
.sv-corpo > .sv-no:first-of-type { padding-top: 0; }

@media (min-width: 1000px) {
  .sv-no {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--vao) minmax(0, 1fr);
    align-items: start;
    padding-left: 0;
  }
  /* rótulo e título encostam no traço; ficam presos enquanto o trecho dura,
     para a metade da esquerda acompanhar a leitura em vez de sumir */
  .sv-cabeca {
    grid-column: 1;
    text-align: right;
    position: sticky;
    top: calc(var(--nav-h) + 92px);
  }
  .sv-conteudo { grid-column: 3; }
  .sv-titulo { margin-left: auto; }
}

/* o nó, em cima do traço */
.sv-marca {
  position: absolute;
  left: 17px;
  top: clamp(58px, 9vh, 114px);
  width: 15px; height: 15px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 1px solid rgba(211, 170, 94, 0.4);
  background: var(--bg);
  transition: border-color 0.6s var(--ease), box-shadow 0.6s var(--ease), transform 0.6s var(--ease);
}
@media (min-width: 1000px) { .sv-marca { left: 50%; } }
.sv-corpo > .sv-no:first-of-type .sv-marca { top: 8px; }
.sv-marca::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.sv-no.aceso .sv-marca {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(211, 170, 94, 0.09), 0 0 18px rgba(211, 170, 94, 0.5);
  transform: scale(1.14);
}
.sv-no.aceso .sv-marca::after { opacity: 1; }

.sv-etapa {
  display: block;
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(211, 170, 94, 0.55);
  margin-bottom: clamp(14px, 2vh, 22px);
  transition: color 0.6s var(--ease);
}
.sv-no.aceso .sv-etapa { color: var(--gold); }

.sv-titulo {
  font-size: clamp(26px, 3.4vw, 46px);
  font-weight: 640;
  font-variation-settings: "wdth" 112, "wght" 640;
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 16ch;
  text-wrap: balance;
}
.sv-cabeca { margin-bottom: clamp(26px, 3.4vh, 44px); }
@media (min-width: 1000px) { .sv-cabeca { margin-bottom: 0; } }

.sv-texto {
  font-size: clamp(14.5px, 1.15vw, 17px);
  line-height: 1.72;
  color: rgba(242, 240, 233, 0.74);
  max-width: 58ch;
  text-wrap: pretty;
}
.sv-texto + .sv-texto { margin-top: 1.1em; }

/* ---------- as falas de quem chega ---------- */
.sv-dores {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 22px);
  margin-top: clamp(22px, 3vh, 34px);
}
.sv-dores li {
  position: relative;
  padding-left: 28px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.9vw, 27px);
  line-height: 1.28;
  color: rgba(242, 240, 233, 0.9);
}
.sv-dores li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 14px; height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

/* ---------- o ciclo ---------- */
.sv-passos {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: clamp(22px, 3vh, 34px);
  counter-reset: passo;
}
.sv-passo {
  position: relative;
  padding: clamp(20px, 2.6vh, 30px) 0;
  border-top: 1px solid var(--line-soft);
}
.sv-passo:last-child { border-bottom: 1px solid var(--line-soft); }
.sv-passo h3 {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 640;
  font-variation-settings: "wdth" 110, "wght" 640;
  letter-spacing: -0.012em;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.sv-passo h3::before {
  counter-increment: passo;
  content: counter(passo, decimal-leading-zero);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 560;
  font-variation-settings: normal;
  letter-spacing: 0.2em;
  color: var(--gold);
  flex-shrink: 0;
}
.sv-passo p {
  font-size: clamp(13.5px, 1.05vw, 15.5px);
  line-height: 1.68;
  color: rgba(242, 240, 233, 0.66);
  text-wrap: pretty;
  padding-left: 34px;
}
@media (hover: hover) and (pointer: fine) {
  .sv-passo { transition: border-color 0.4s; }
  .sv-passo:hover { border-color: rgba(211, 170, 94, 0.28); }
  .sv-passo:hover h3 { color: var(--ink); }
}

/* Nem toda lista é sequência. Onde os itens são entregas, e não etapas de um
   ciclo, o número sai e entra o losango dourado do site pai. */
.sv-passos.sem-num .sv-passo h3::before {
  counter-increment: none;
  content: "";
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  align-self: center;
  margin-right: 2px;
}

/* ---------- fichas ---------- */
.sv-entregas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  margin-top: clamp(22px, 3vh, 34px);
}
.sv-entregas li {
  padding: clamp(18px, 2vw, 26px);
  border-radius: var(--raio);
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.007));
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.5;
  color: rgba(242, 240, 233, 0.82);
}

.sv-plats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(22px, 3vh, 30px);
}
.sv-plats li {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  font-size: 12px;
  font-weight: 560;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242, 240, 233, 0.72);
}

/* ---------- prova ---------- */
.sv-prova {
  padding: clamp(26px, 3vw, 44px);
  border-radius: var(--raio);
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(211, 170, 94, 0.05), transparent 56%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.007));
  margin-top: clamp(22px, 3vh, 34px);
}
.sv-prova blockquote {
  font-size: clamp(17px, 1.6vw, 23px);
  font-weight: 380;
  line-height: 1.46;
  letter-spacing: -0.008em;
  text-wrap: pretty;
  margin-bottom: 24px;
}
.sv-prova blockquote::before { content: "\201C"; color: var(--gold); }
.sv-prova blockquote::after { content: "\201D"; color: var(--gold); }
.sv-prova mark {
  background: linear-gradient(to top,
    rgba(211, 170, 94, 0.34) 0%, rgba(211, 170, 94, 0.34) 36%, transparent 36%);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}
.sv-quem {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.sv-quem b {
  font-size: 13px;
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sv-quem span { font-size: 13px; color: var(--dim); }

/* ---------- perguntas ---------- */
.sv-faq { margin-top: clamp(22px, 3vh, 34px); border-top: 1px solid var(--line-soft); }
.sv-faq details { border-bottom: 1px solid var(--line-soft); }
.sv-faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 2.6vh, 28px) 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 560;
  font-variation-settings: "wdth" 108, "wght" 560;
  line-height: 1.35;
  transition: color 0.3s;
}
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary:hover { color: var(--gold); }
.sv-faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 13px; height: 13px;
  margin-top: 0.35em;
  background:
    linear-gradient(var(--gold), var(--gold)) center/100% 1.4px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center/1.4px 100% no-repeat;
  transition: transform 0.5s var(--ease), opacity 0.3s;
  opacity: 0.75;
}
.sv-faq details[open] summary::after { transform: rotate(135deg); opacity: 1; }
.sv-faq .resposta {
  overflow: hidden;
  font-size: clamp(13.5px, 1.05vw, 15.5px);
  line-height: 1.72;
  color: rgba(242, 240, 233, 0.68);
  text-wrap: pretty;
}
.sv-faq .resposta p { padding-bottom: clamp(20px, 2.6vh, 28px); }

/* ---------- convite ---------- */
.sv-fim {
  position: relative;
  text-align: center;
  padding: clamp(70px, 12vh, 150px) var(--pad) clamp(56px, 9vh, 110px);
}
.sv-fim h2 {
  font-size: clamp(34px, 6vw, 88px);
  font-weight: 700;
  font-variation-settings: "wdth" 118, "wght" 700;
  line-height: 0.94;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  margin-bottom: clamp(20px, 3vh, 34px);
}
.sv-fim h2 i {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: normal;
  text-transform: none;
  color: var(--gold);
}
.sv-fim p {
  font-size: clamp(14px, 1.2vw, 16.5px);
  line-height: 1.75;
  color: var(--dim);
  max-width: 44ch;
  margin: 0 auto clamp(30px, 4.5vh, 48px);
}

.sv-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 999px;
  background: var(--ink);
  color: #131313;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.3s, box-shadow 0.4s, transform 0.3s var(--ease);
}
.sv-cta em { font-style: normal; transition: transform 0.3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .sv-cta:hover {
    background: var(--gold);
    box-shadow: 0 0 40px rgba(211, 170, 94, 0.36);
    transform: translateY(-2px);
  }
  .sv-cta:hover em { transform: translateX(4px); }
}

/* ---------- os outros serviços ---------- */
.sv-outros {
  max-width: var(--w);
  margin: 0 auto;
  padding: clamp(48px, 7vh, 84px) var(--pad) clamp(56px, 8vh, 96px);
  border-top: 1px solid var(--line-soft);
}
.sv-outros h2 {
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: clamp(20px, 3vh, 32px);
}
.sv-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.sv-lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--raio);
  border: 1px solid var(--line-soft);
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 620;
  font-variation-settings: "wdth" 108, "wght" 620;
  letter-spacing: -0.01em;
  transition: border-color 0.35s, transform 0.35s var(--ease), background 0.35s;
}
.sv-lista a span { color: var(--dim); transition: transform 0.35s var(--ease), color 0.35s; }
@media (hover: hover) and (pointer: fine) {
  .sv-lista a:hover {
    border-color: rgba(211, 170, 94, 0.3);
    background: rgba(211, 170, 94, 0.04);
    transform: translateY(-3px);
  }
  .sv-lista a:hover span { color: var(--gold); transform: translateX(4px); }
}

/* ============================================================
   ENTRADAS
   Fluidez aqui é duração maior com o mesmo easing do site pai, não efeito
   a mais. Cada bloco entra depois do anterior, nunca todos de uma vez.
   ============================================================ */
.js .sv-sobe { opacity: 0; transform: translate3d(0, 26px, 0); }
.js .sv-sobe.vis {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease), transform 1.05s var(--ease);
}
/* a abertura entra sozinha, sem esperar rolagem */
.js .sv-abre .sv-rotulo,
.js .sv-abre .sv-linha,
.js .sv-abre .sv-cta { opacity: 0; transform: translate3d(0, 16px, 0); }
.js.pronto .sv-abre .sv-rotulo { opacity: 1; transform: none; transition: opacity 0.8s, transform 0.8s var(--ease); }
.js.pronto .sv-abre .sv-linha { opacity: 1; transform: none; transition: opacity 0.8s 0.5s, transform 0.9s var(--ease) 0.5s; }
.js.pronto .sv-abre .sv-cta { opacity: 1; transform: none; transition: opacity 0.8s 0.64s, transform 0.9s var(--ease) 0.64s; }

/* As duas linhas do nome entram letra a letra, e a serifada CONTINUA a
   contagem da caixa alta em vez de já estar na tela quando a página abre. */
.js .sv-nome .l { opacity: 0; transform: translate3d(0, 0.44em, 0); }
.js.pronto .sv-nome .l {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s linear var(--atraso, 0s), transform 1s var(--ease) var(--atraso, 0s);
}

/* ---------- telas estreitas ---------- */
@media (max-width: 560px) {
  .sv-nome { line-height: 0.9; letter-spacing: -0.028em; }
  .sv-dores li { font-size: clamp(17px, 5.6vw, 22px); }
  .sv-passo p { padding-left: 0; }
}

/* ---------- foco de teclado ---------- */
.sv-cta:focus-visible,
.sv-voltar:focus-visible,
.sv-lista a:focus-visible,
.sv-faq summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- movimento reduzido ---------- */
html.sobrio .sv-sobe { opacity: 1 !important; transform: none !important; }
html.sobrio .sv-nome .l,
html.sobrio .sv-abre .sv-rotulo,
html.sobrio .sv-abre .sv-linha,
html.sobrio .sv-abre .sv-cta { opacity: 1 !important; transform: none !important; }
html.sobrio .sv-trilha .viva { filter: none; }