/* /servicos — Figma 25:783 (desktop 1440) e 55:3245 (celular 390). Rascunho, 2026-10-10.
   Medidas em calc(N * var(--px)), N em px do Figma. */

.sv-laranja{color:var(--laranja);}
.sv-escuro{color:var(--escuro);}
.sv-t28{font-weight:400;font-size:calc(28 * var(--px));line-height:1.18;letter-spacing:-.03em;}
.sv-t32{font-weight:400;font-size:calc(32 * var(--px));line-height:1.18;letter-spacing:-.03em;}
.botao.sv-btn{font-weight:400;}

/* ---------- Topo: foto com zoom lento, véu escuro 50% ---------- */
.sv-hero .fundo{position:absolute;inset:0;overflow:hidden;}
.sv-hero .fundo img{width:100%;height:100%;object-fit:cover;}
.sv-hero .veu{position:absolute;inset:0;background:var(--escuro);opacity:.5;}
.sv-hero .miolo{display:flex;flex-direction:column;align-items:center;gap:calc(12 * var(--px));
  padding:calc(260 * var(--px)) calc(96 * var(--px)) calc(200 * var(--px));text-align:center;}
.sv-hero h1{white-space:nowrap;}
/* Topo em cena presa (11/10). --a: a câmera avança na sala e o título sobe; --b: o véu escurece.
   Sem JS ou com movimento reduzido, fica o topo de antes (o zoom lento continua). */
.js .sv-hero-trilho>.percurso{display:block;height:70svh;}
.js .sv-hero-trilho .sv-hero{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;}
/* Safari (12/10): a foto e o texto sumiam às vezes na rolagem. Uma fonte de movimento só por elemento:
   com a cena ligada, o zoom lento por tempo sai (a rolagem já faz o zoom) e cada camada usa um transform 3D
   único, o que a mantém numa camada própria e estável enquanto a seção está presa. */
.js .sv-hero .fundo img.zoom-lento{animation:none;}
.sv-hero .fundo{transform:translateZ(0);}
.sv-hero .fundo img{transform-origin:50% 62%;transform:translate3d(0, calc(var(--a,0) * 28 * var(--px)), 0) scale(calc(1 + .16 * var(--a,0)));
  -webkit-backface-visibility:hidden;backface-visibility:hidden;}
.sv-hero .veu{opacity:calc(.5 + .22 * var(--b,0));}
.sv-hero .miolo{transform:translateZ(0);}
.sv-hero .miolo>.acento{transform:translate3d(0, calc(var(--a,0) * -44 * var(--px)), 0);opacity:calc(1 - .45 * var(--b,0));}
.sv-hero h1{transform:translate3d(0, calc(var(--a,0) * -44 * var(--px)), 0);}

/* ---------- Etapas: a sala fica parada à esquerda enquanto o texto rola ---------- */
/* o vídeo passa da sala (140%): corta na borda da seção sem virar contêiner de rolagem (o sticky continua valendo) */
.sv-etapas,.sv-lista{overflow-x:clip;}
.sv-etapas .miolo{display:grid;grid-template-columns:calc(560 * var(--px)) 1fr;column-gap:calc(96 * var(--px));
  align-items:start;padding:calc(140 * var(--px)) calc(96 * var(--px)) calc(160 * var(--px));}
.sala{position:sticky;top:calc(50vh - 280 * var(--px));width:calc(560 * var(--px));height:calc(560 * var(--px));}
/* o vídeo já vem com o fundo da seção: pode passar da área (140%) sem aparecer como caixa; as bordas
   se desfazem para quem entra pela beira (as pessoas) surgir aos poucos, e não cortado por uma linha */
.sala video{position:absolute;left:50%;top:50%;width:140%;height:auto;max-width:none;aspect-ratio:16/9;transform:translate(-50%,-50%);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
  mask-composite:intersect;}
/* a sala chega com a seção (--e do data-vista da seção): sobe e cresce um pouco, sem surgir do nada */
.js .sala{opacity:var(--e,1);scale:calc(.9 + var(--e,1) * .1);translate:0 calc((1 - var(--e,1)) * 60 * var(--px));}
.etapas-textos{display:flex;flex-direction:column;gap:calc(140 * var(--px));}
.etapa-servico{min-height:calc(560 * var(--px));display:flex;flex-direction:column;justify-content:center;gap:calc(16 * var(--px));}
.etapa-servico h2{white-space:nowrap;}
.etapa-servico .texto{font-weight:700;display:flex;flex-direction:column;gap:calc(27 * var(--px));}
/* a etapa no meio da tela fica em foco; as outras recuam (--v do data-vista: .5 = centrada) */
.etapa-servico{--foco:max(.28, 1 - max(var(--v,.5) - .5, .5 - var(--v,.5)) * 1.7);}
.etapa-servico>*{opacity:var(--foco);}
.etapa-servico h2{translate:calc((1 - var(--foco)) * 36 * var(--px)) 0;}
/* Sem JavaScript: cada etapa mostra a própria imagem */
html:not(.js) .sala{display:none;}
html:not(.js) .sv-etapas .miolo{display:block;}
.etapa-servico .sem-js{width:calc(560 * var(--px));height:auto;}

/* ---------- Os serviços ---------- */
.sv-cabeca{display:flex;flex-direction:column;gap:calc(8 * var(--px));}
.sv-lista .miolo{display:flex;flex-direction:column;gap:calc(56 * var(--px));padding:calc(120 * var(--px)) calc(96 * var(--px));}
.sv-colunas{display:flex;gap:calc(24 * var(--px));align-items:stretch;}
/* sem a linha de cima de cada etapa (11/10); as colunas entram uma depois da outra e os fios crescem */
.sv-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:calc(20 * var(--px));
  padding:0 calc(12 * var(--px)) calc(32 * var(--px)) 0;
  --k:clamp(0, (var(--e,1) - var(--atraso,0)) / .45, 1);translate:0 calc((1 - var(--k)) * 50 * var(--px));opacity:var(--k);}
.sv-col:nth-child(2){--atraso:.12;} .sv-col:nth-child(3){--atraso:.24;}
.sv-fio{display:block;height:1px;background:var(--escuro);transform:scaleX(var(--k,1));transform-origin:left;}
/* a dor do cliente, na voz dele, abre a descrição de cada produto */
/* a dor do cliente (11/10): logo abaixo da definição, menos destacada, em cinza e na Helvetica */
.sv-dor{font-family:var(--corpo);font-size:calc(14 * var(--px));line-height:1.45;letter-spacing:-.02em;color:#76726e;text-wrap:pretty;}
.sv-faixa.t-escuro .sv-dor{color:rgba(255,255,255,.55);}
.sv-faixa.t-laranja .sv-dor{color:rgba(20,20,20,.6);}
.sv-faixa.t-escuro .sv-faixa-rotulo,.sv-faixa.t-escuro .sv-faixa-texto>.h12:not(.sv-faixa-rotulo){color:var(--laranja);}
.sv-faixa.t-laranja .sv-faixa-texto>:not(h3):not(.sv-dor),.sv-faixa.t-laranja>.link{color:var(--escuro);}
.sv-item{display:flex;flex-direction:column;align-items:flex-start;gap:calc(10 * var(--px));}
.sv-item .link,.sv-faixa .link{transition:opacity .3s var(--ease);}
.sv-item .link:hover,.sv-faixa .link:hover{opacity:.6;}
.sv-faixa{display:flex;align-items:center;gap:calc(48 * var(--px));padding:calc(32 * var(--px));
  /* entrada igual nas duas faixas (12/10): sobem um pouco e aparecem, sem vir de lado; o texto vem logo atrás */
  --k:clamp(0, (var(--e,1) - .05) / .45, 1);translate:0 calc((1 - var(--k)) * 28 * var(--px));opacity:calc(.2 + .8 * var(--k));}
.sv-faixa>*{--k2:clamp(0, (var(--e,1) - .15) / .45, 1);opacity:var(--k2);translate:0 calc((1 - var(--k2)) * 12 * var(--px));}
.sv-faixa-texto{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:calc(8 * var(--px));}
.sv-faixa .link{white-space:nowrap;}

/* ---------- Chamada ---------- */
.sv-chamada .miolo{display:flex;justify-content:center;padding:calc(120 * var(--px)) calc(96 * var(--px));}
.sv-cta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:calc(20 * var(--px));padding-right:calc(64 * var(--px));}
.sv-cta-diag{padding:0;align-items:center;text-align:center;gap:calc(16 * var(--px));max-width:calc(820 * var(--px));}
.sv-cta-diag .display{font-size:calc(64 * var(--px));line-height:1;}
.sv-cta-diag .b16{color:rgba(255,255,255,.75);max-width:calc(560 * var(--px));}
.sv-cta-acoes{display:flex;align-items:center;gap:calc(24 * var(--px));margin-top:calc(8 * var(--px));}
.botao.sv-btn-contorno{background:transparent;box-shadow:inset 0 0 0 1px var(--branco);}
.botao.sv-btn-contorno:hover{background:var(--branco);color:var(--escuro);}
.sv-cta>*{--k:clamp(0, (var(--e,1) - var(--atraso,0)) / .4, 1);translate:0 calc((1 - var(--k)) * 24 * var(--px));opacity:var(--k);}
.sv-cta>:nth-child(2){--atraso:.08;} .sv-cta>:nth-child(3){--atraso:.16;} .sv-cta>:nth-child(4){--atraso:.24;}

/* ---------- Celular (quadro 390) ---------- */
@media (max-width:767px){
  .sv-t28{font-size:calc(21 * var(--px));}
  .sv-t32{font-size:calc(24 * var(--px));}
  .botao.sv-btn{padding:calc(18 * var(--px)) calc(20 * var(--px));}

  .sv-hero .miolo{gap:calc(8 * var(--px));padding:calc(200 * var(--px)) calc(12 * var(--px)) calc(140 * var(--px));}
  .sv-hero .a48{font-size:calc(26 * var(--px));}
  .sv-hero .d140{font-size:calc(64 * var(--px));}
  .sv-hero .costura{--w:74 !important;--x:86% !important;}

  /* A sala fica fixa em cima do texto e se transforma conforme desce (nota "/serviços mobile") */
  .sv-etapas .miolo{grid-template-columns:1fr;padding:calc(72 * var(--px)) calc(20 * var(--px)) calc(88 * var(--px));}
  /* 12/10: vídeo menor (a área presa passa de 350 para 250 de altura) para sobrar mais tela para o texto
     que passa embaixo; a faixa continua com a largura toda, para o texto não aparecer pelos lados */
  .sala{top:calc(80 * var(--px));width:calc(350 * var(--px));height:calc(250 * var(--px));z-index:2;
    background:var(--laranja);box-shadow:0 calc(14 * var(--px)) calc(14 * var(--px)) calc(-6 * var(--px)) var(--laranja);}
  .sala video{width:116%;}
  .etapas-textos{gap:calc(72 * var(--px));padding-top:calc(14 * var(--px));}
  .etapa-servico{min-height:0;gap:calc(14 * var(--px));}
  .etapa-servico .h14{font-size:calc(14 * var(--px));}
  .etapa-servico .d104{font-size:calc(48 * var(--px));line-height:1;}
  .etapa-servico .b18{font-size:calc(16 * var(--px));}
  .etapa-servico .texto{gap:calc(24 * var(--px));}
  .etapa-servico .sem-js{width:calc(350 * var(--px));}

  .sv-lista .miolo{gap:calc(28 * var(--px));padding:calc(72 * var(--px)) calc(24 * var(--px));}
  .sv-cabeca .a36{font-size:calc(26 * var(--px));}
  .sv-cabeca .d104{font-size:calc(48 * var(--px));line-height:1;}
  .sv-colunas{flex-direction:column;gap:calc(16 * var(--px));}
  .sv-faixa{flex-direction:column;align-items:flex-start;gap:calc(28 * var(--px));padding:calc(32 * var(--px)) calc(24 * var(--px));}
  .sv-faixa.t-laranja{gap:calc(16 * var(--px));}


  .sv-chamada .miolo{padding:calc(72 * var(--px)) calc(24 * var(--px));}
  .sv-cta{padding:0;gap:calc(16 * var(--px));}
  .sv-cta-diag .display{font-size:calc(36 * var(--px));}
  .sv-cta-acoes{flex-wrap:wrap;}
  .sv-chamada .a48{font-size:calc(26 * var(--px));}
  .sv-dor{font-size:calc(14 * var(--px));}
  .js .sv-hero-trilho>.percurso{height:50svh;}
}

/* Movimento reduzido: topo sem trilho */
@media (prefers-reduced-motion: reduce){
  .js .sv-hero-trilho .sv-hero{position:relative;min-height:0;display:block;}
}