/* Os quatro serviços existentes ganham superfície e se sobrepõem na rolagem. */
html[data-da-type-system]:has(body.da-services),body.da-services{overflow-x:clip}
.da-services .rail{left:auto;right:12px;gap:12px;opacity:1}
.da-services .rail a{font-size:9px}
.da-services .rail a i{width:5px}
.da-services .rail a.is-at i{width:12px}
.da-services .servicos-lista{--card-gap:16px;--card-offset:10px;display:block;position:relative;isolation:isolate;padding-bottom:32px}
.da-services .servico{
  --card-order:0;position:relative;z-index:calc(var(--card-order) + 1);min-height:calc(100svh - var(--nav-h) - 80px);
  margin-bottom:clamp(100px,24svh,260px);padding:clamp(24px,2.8vw,44px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(28px,4vw,64px);align-items:start;
  border:1px solid var(--color-border);border-radius:3px;
  background:linear-gradient(125deg,color-mix(in srgb,var(--color-canvas) 96%,var(--color-display)),var(--color-canvas) 64%);
  box-shadow:inset 2px 1px 1px color-mix(in srgb,var(--color-display) 16%,transparent),0 22px 48px -22px var(--color-shadow);
  scroll-margin-top:calc(var(--nav-h) + 16px);
}
.da-services .servico:nth-child(2){--card-order:1}
.da-services .servico:nth-child(3){--card-order:2}
.da-services .servico:nth-child(4){--card-order:3;margin-bottom:0}
.da-services .servicos-lista.can-stack>.servico{position:sticky;top:var(--card-pin-top)}
/* O teclado traz de volta um card coberto, sem esconder o controle em foco. */
.da-services .servicos-lista.can-stack>.servico:has(:focus-visible){position:relative;top:auto;z-index:5}
.da-services .servico-cabeca{gap:16px}
.da-services .servico-corpo{gap:20px}
.da-services .servico-desenho,.da-services .servico-prova{max-width:432px}
@media(max-width:900px){.da-services .servico{grid-template-columns:minmax(0,1fr);gap:32px;min-height:0}}
@media(max-width:600px){.da-services .servico{padding:22px;margin-bottom:100px}}
@media(max-width:340px){.da-services .servico{padding:18px}}
@media(prefers-reduced-motion:reduce){:where(html:not([data-motion="excesso"])) .da-services .servicos-lista.can-stack>.servico{position:relative;top:auto}:where(html:not([data-motion="excesso"])) .da-services .servico{margin-bottom:36px}}
@media print{.da-services .servicos-lista.can-stack>.servico{position:relative;top:auto}.da-services .servico{break-inside:avoid;margin-bottom:24px;box-shadow:none}}