/* =========================================================================
   VATSE · arte de cada serviço e console do herói (/servicos)
   -------------------------------------------------------------------------
   Aqui viviam sete cenas desenhadas em CSS. Elas eram coerentes entre si, mas
   não eram as artes que a home usa para os mesmos sete serviços: quem navegava
   via duas linguagens visuais para a mesma coisa. A página passou a
   reaproveitar as artes de "Nossos Serviços" e o trabalho deste ficheiro é
   apresentá-las: halo na cor do serviço, selos flutuantes com o que o próprio
   serviço entrega, e movimento discreto.

   A cor vem de --svc-color, definida na seção pelo Blade.
   ========================================================================= */

/* As sete artes são retratos 5:7 (500x700). A caixa segue essa proporção com
   folga para os selos, senão a arte transborda em cima e embaixo. */
.sc-svc-arte{position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:5/6;width:100%;max-width:560px;margin:0 auto;isolation:isolate}

/* Mancha de cor atrás da arte. Fica no fundo da pilha para nunca cobrir a
   imagem nem os selos. */
.sc-svc-arte-halo{position:absolute;inset:8% 6%;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--svc-color) 34%,transparent),transparent 68%);
  filter:blur(26px)}

.sc-svc-arte-img{position:relative;z-index:1;display:block;
  width:auto;height:auto;max-width:min(100%,420px);max-height:100%;
  /* A mesma dissolvência do rodapé que a home aplica, para a arte encostar no
     fundo escuro sem linha de corte. */
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 82%,rgba(0,0,0,0) 98%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 82%,rgba(0,0,0,0) 98%);
  animation:scSvcArteFlutua 7s ease-in-out infinite}

/* Selos flutuantes ------------------------------------------------------- */
.sc-svc-selo{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;max-width:46%;
  padding:9px 13px;border-radius:999px;background:rgba(18,18,20,.82);
  border:1px solid color-mix(in srgb,var(--svc-color) 34%,rgba(255,255,255,.14));
  box-shadow:0 14px 34px rgba(0,0,0,.46);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  color:#f4f4f5;font-size:.72rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;text-align:left;
  animation:scSvcSeloFlutua 6s ease-in-out infinite}
.sc-svc-selo i{flex:0 0 auto;font-size:.68rem;color:var(--svc-color)}
.sc-svc-selo-num{gap:8px;padding:10px 15px;font-size:.66rem;font-weight:600;color:rgba(244,244,245,.72)}
.sc-svc-selo-num b{font-size:1.05rem;font-weight:900;letter-spacing:-.03em;color:var(--svc-color)}

/* Quatro cantos, com defasagem no tempo para não subirem juntos. */
.sc-svc-selo-a{top:6%;left:0;animation-delay:-.4s}
.sc-svc-selo-b{top:30%;right:0;animation-delay:-2.1s}
.sc-svc-selo-c{bottom:20%;left:2%;animation-delay:-3.6s}
.sc-svc-selo-num{bottom:6%;right:2%;animation-delay:-1.2s}

@keyframes scSvcArteFlutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes scSvcSeloFlutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@media(max-width:900px){
  .sc-svc-arte{aspect-ratio:5/6;max-width:420px}
  .sc-svc-selo{font-size:.66rem;padding:7px 11px;max-width:42%}
  .sc-svc-selo-num b{font-size:.92rem}
}
@media(max-width:560px){
  .sc-svc-arte{aspect-ratio:5/6;max-width:320px}
  .sc-svc-arte-img{max-width:250px}
  /* Em tela estreita os quatro selos brigariam com a arte: ficam os dois que
     carregam informação nova. */
  .sc-svc-selo-a,.sc-svc-selo-c{display:none}
  .sc-svc-selo-b{top:8%;right:0}
}

/* Movimento é tempero, não conteúdo. */
@media(prefers-reduced-motion:reduce){
  .sc-svc-arte-img,.sc-svc-selo{animation:none}
}

/* =========================================================================
   Console do herói: a prévia do orçamento que substituiu a pilha de
   miniaturas em perspectiva.
   ========================================================================= */
.svc-console{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:22px;backdrop-filter:blur(18px);
  box-shadow:0 34px 80px rgba(0,0,0,.5);max-width:460px;margin-left:auto;display:grid;gap:16px}
.svc-console-head{display:flex;align-items:center;gap:12px}
.svc-console-dot{width:10px;height:10px;border-radius:50%;background:var(--sc-primary);
  box-shadow:0 0 0 4px rgba(var(--sc-primary-rgb),.18);flex:0 0 auto}
.svc-console-head strong{display:block;font-size:.95rem;color:#fff;letter-spacing:-.02em}
.svc-console-head small{display:block;font-size:.68rem;color:rgba(255,255,255,.55);margin-top:2px}
.svc-console-list{display:grid;gap:8px}
.svc-console-item{display:grid;grid-template-columns:22px 30px 1fr auto;gap:10px;align-items:center;
  padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);transition:.22s}
.svc-console-item.is-on{background:color-mix(in srgb,var(--svc-color) 14%,transparent);
  border-color:color-mix(in srgb,var(--svc-color) 40%,transparent)}
.svc-console-check{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);color:transparent;font-size:.6rem}
.svc-console-item.is-on .svc-console-check{background:var(--svc-color);border-color:var(--svc-color);color:#0b0b0d}
.svc-console-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--svc-color) 20%,transparent);color:var(--svc-color);font-size:.78rem}
.svc-console-name{font-size:.82rem;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svc-console-tag{font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}
.svc-console-range{border-top:1px solid rgba(255,255,255,.09);padding-top:15px}
.svc-console-range-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.svc-console-range-top span{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.svc-console-range-top b{font-size:1.08rem;color:#fff;letter-spacing:-.02em;white-space:nowrap}
.svc-console-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.09);margin:11px 0 12px;overflow:hidden}
.svc-console-bar i{display:block;height:100%;width:62%;border-radius:99px;
  background:linear-gradient(90deg,var(--sc-primary),color-mix(in srgb,var(--sc-primary) 45%,#fff))}
.svc-console-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.66rem;color:rgba(255,255,255,.6)}
.svc-console-meta i{color:var(--sc-primary);margin-right:5px}
.svc-console-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
  border-radius:13px;background:var(--sc-primary);color:#fff;font-weight:800;font-size:.82rem;text-decoration:none;transition:.2s}
.svc-console-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(var(--sc-primary-rgb),.32)}
@media(max-width:960px){.svc-console{margin:0 auto;max-width:520px}}
@media(max-width:720px){
  .svc-console{padding:17px;gap:13px}
  .svc-console-item{grid-template-columns:20px 26px 1fr;row-gap:4px}
  .svc-console-tag{grid-column:3;font-size:.52rem}
  .svc-console-range-top{flex-direction:column;gap:4px}
}

/* =========================================================================
   Vitrine giratória do herói (/servicos)
   -------------------------------------------------------------------------
   O lado direito do herói já foi pilha de miniaturas em perspectiva, com os
   rótulos ilegíveis, e depois uma lista parada. Agora gira as próprias artes
   dos serviços que aparecem logo abaixo: a cor, o nome e o número trocam
   juntos, então o herói é uma prévia honesta do resto da página.
   ========================================================================= */
.svc-vitrine{position:relative;width:100%;max-width:520px;margin-left:auto;aspect-ratio:5/6;
  display:grid;place-items:center;isolation:isolate}

.svc-vitrine-halo{position:absolute;inset:6%;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--svc-halo,var(--sc-primary)) 38%,transparent),transparent 68%);
  filter:blur(30px);transition:background .7s ease}

/* Todos os slides ocupam a mesma célula; só o ativo aparece. */
.svc-vitrine-slide{grid-area:1/1;position:relative;z-index:1;margin:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);
  transition:opacity .62s ease,transform .62s cubic-bezier(.16,1,.3,1),visibility 0s linear .62s;
  pointer-events:none}
.svc-vitrine-slide.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s;pointer-events:auto}

.svc-vitrine-slide img{width:auto;height:auto;max-width:min(100%,360px);max-height:76%;display:block;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 80%,rgba(0,0,0,0) 99%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 80%,rgba(0,0,0,0) 99%)}

.svc-vitrine-slide figcaption{display:flex;flex-direction:column;align-items:center;gap:7px;
  margin-top:-6px;text-align:center}
.svc-vitrine-cat{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;
  background:rgba(18,18,20,.8);border:1px solid color-mix(in srgb,var(--svc-color) 40%,rgba(255,255,255,.14));
  font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,244,245,.8)}
.svc-vitrine-cat i{font-size:.66rem;color:var(--svc-color)}
.svc-vitrine-slide figcaption strong{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:900;
  letter-spacing:-.03em;color:#fff;line-height:1.15;max-width:22ch}
.svc-vitrine-num{display:inline-flex;align-items:baseline;gap:7px;font-size:.7rem;color:rgba(255,255,255,.55)}
.svc-vitrine-num b{font-size:1.05rem;font-weight:900;letter-spacing:-.03em;color:var(--svc-color)}

/* Trilhos: um por serviço, o ativo se enche no tempo da troca. */
.svc-vitrine-trilhos{position:absolute;left:50%;bottom:0;z-index:2;transform:translateX(-50%);
  display:flex;gap:7px;padding:0}
.svc-vitrine-trilho{width:34px;height:4px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.16);overflow:hidden;transition:width .35s ease,background .35s ease}
.svc-vitrine-trilho i{display:block;height:100%;width:0;border-radius:99px;background:var(--svc-color)}
.svc-vitrine-trilho.is-on{width:56px;background:rgba(255,255,255,.22)}
.svc-vitrine-trilho.is-on i{width:100%;transition:width var(--svc-giro,4s) linear}
.svc-vitrine-trilho:focus-visible{outline:2px solid var(--svc-color);outline-offset:3px}

@media(max-width:960px){
  .svc-vitrine{margin:0 auto;max-width:420px}
}
@media(max-width:560px){
  .svc-vitrine{max-width:320px;aspect-ratio:4/5}
  .svc-vitrine-slide img{max-width:240px;max-height:66%}
  .svc-vitrine-trilho{width:24px}
  .svc-vitrine-trilho.is-on{width:40px}
}

/* Sem movimento: a vitrine vira uma imagem parada, sem troca automática. */
@media(prefers-reduced-motion:reduce){
  .svc-vitrine-slide{transition:opacity .2s linear}
  .svc-vitrine-trilho.is-on i{transition:none;width:100%}
}