/* Serviços — as três etapas (Figma "Tabs" 8573:1797, instância 8587:2376 · mobile 8709:5717 / 5588 / 5463 + 8709:5854)
   Ordem no HTML: cabeçalho 1, painel 1, cabeçalho 2, painel 2, cabeçalho 3, painel 3, ilustração —
   no desktop a grade põe os cabeçalhos na coluna 1, a ilustração na 2 e o painel ativo na 3; ≤1023 fica tudo em sequência. */

/* 8587:2376: strokes gray-900 em cima e embaixo, desenhados sobre o conteúdo (não somam altura) */
.srv-steps {
  position: relative;
  background: var(--black-200);
}
.srv-steps::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: inset 0 1px 0 var(--gray-900), inset 0 -1px 0 var(--gray-900);
  pointer-events: none;
}

/* Colunas 572 · 296 · 572 (frame de 1440); a 4ª linha (1fr) recebe a sobra quando o painel é mais alto que a lista */
.srv-steps__grid {
  max-width: var(--frame-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 572fr) minmax(0, 296fr) minmax(0, 572fr);
  grid-template-rows: auto auto auto 1fr;
}

/* --------------------------------------------------------------------------
   Lista de etapas (Section 8573:1619: p 120/32, gap 32) — cada cabeçalho é um botão que abre o painel
   -------------------------------------------------------------------------- */
.srv-step__head {
  grid-column: 1;
  grid-row: var(--step);
  position: relative;
  margin-inline: var(--section-px);
}
.srv-step__head:nth-child(1) { margin-top: 120px; }
/* 8573:1624 / 8573:1632: stroke superior gray-900 de 508, 32 abaixo da etapa anterior, texto 24 abaixo do stroke */
.srv-step__head:not(:nth-child(1)) {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-900);
}
.srv-step__head:nth-child(5) { margin-bottom: 120px; }

.srv-step__heading { margin: 0; }

/* Platform Header 8573:1620: selo + título, gap 24, centralizados na vertical */
.srv-step__tab {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.srv-step__tab:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 4px; }

/* Tag 8573:1621 / Etapa 8573:1629: p 2/6 · Cabin Bold 12/1.3 (caixa 16) maiúsculo — inativa black-100, ativa blue-300 */
.srv-step__tag {
  flex: none;
  padding: 2px 6px;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--gray-0);
  background: var(--black-100);
  transition: background-color .3s ease, color .3s ease;
}
.srv-step__tab[aria-expanded="true"] .srv-step__tag { color: var(--black-200); background: var(--blue-300); }

/* 8573:1623 · Exo SemiBold 24/1.2 (caixa 29 por linha) */
.srv-step__title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
  color: var(--gray-0);
  text-wrap: pretty;
  transition: color .2s ease;
}
.srv-step__tab[aria-expanded="false"]:hover .srv-step__title { color: var(--gray-300); }

/* Divider Line 8573:1625: trilho gray-400 de 2 com a parte branca = progresso da etapa ativa (62 de 508 no Figma) */
.srv-step__bar {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gray-400);
}
.srv-step__bar--end { top: auto; bottom: 0; }
.srv-step__bar i {
  display: block;
  height: 100%;
  background: var(--gray-0);
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, .122));
}

/* Posição da barra e respiros de cada variante do Figma (etapa 1 · 2 · 3) */
[data-active="1"] .srv-step__head:nth-child(3) { padding-top: 34px; }               /* 2 da barra + 32 */
[data-active="1"] .srv-step__head:nth-child(3) .srv-step__bar:not(.srv-step__bar--end) { display: block; }
[data-active="2"] .srv-step__head:nth-child(5) { padding-top: 26px; }               /* 2 da barra + 24 */
[data-active="2"] .srv-step__head:nth-child(5) .srv-step__bar:not(.srv-step__bar--end) { display: block; }
[data-active="3"] .srv-step__head:nth-child(5) { padding-bottom: 26px; }            /* 24 + barra no pé */
[data-active="3"] .srv-step__head:nth-child(5) .srv-step__bar--end { display: block; }

/* --------------------------------------------------------------------------
   Painel da etapa (Section 8573:1636) — 3 blocos (2 na etapa 3): ícone 24 + gap 24 + texto, p 32
   -------------------------------------------------------------------------- */
.srv-step__panel {
  grid-column: 3;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
}
.srv-step__panel[hidden] { display: none; }

.srv-info {
  display: flex;
  gap: 24px;
  padding: 32px;
}
/* 8573:1643: strokes gray-900 em cima e embaixo do 2º bloco, no layout (149 = 147 + 2); sem 3º bloco, só em cima (8573:1767) */
.srv-info:nth-child(2) { border-block: 1px solid var(--gray-900); }
.srv-info:nth-child(2):last-child { border-bottom: 0; }

.srv-info__icon { flex: none; width: 24px; height: 24px; }
.srv-info__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 8573:1641 · Cabin Bold 18/1.5 */
.srv-info__label {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: var(--gray-0);
}
/* 8573:1642 · Cabin 16/1.5 gray-300 — lista com marcador, 6 entre itens, texto 24 à direita do início */
.srv-info__text,
.srv-info__list li {
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-300);
  text-wrap: pretty;
}
.srv-info__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.srv-info__list li { position: relative; padding-left: 24px; } /* quebra "pretty" do body em todas as etapas: sem palavra viúva (pedido do cliente) */
.srv-info__list li::before {
  content: "•";
  position: absolute;
  left: 9px;
  color: var(--gray-300);
}

/* --------------------------------------------------------------------------
   Ilustração (Frame 109): coluna black-100 de 296, desenho cortado nas bordas como no Figma
   -------------------------------------------------------------------------- */
.srv-steps__art {
  position: relative;
  grid-column: 2;
  grid-row: 1 / -1;
  overflow: hidden;
  background: var(--black-100);
}
/* Quadro do Figma (296×593), fora do fluxo: a coluna acompanha a altura da seção (593 · 569 · 496 conforme a etapa),
   o desenho não a define. 4 camadas do tamanho do quadro, empilhadas: base de código, tela, tracejado, selo —
   tiradas do export de cada recorte (desktop ilustra-*.svg · celular m-ilustra-*.svg, 375×421). */
.srv-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 296px;
  aspect-ratio: 296 / 593;
}
.srv-art__layer { position: absolute; inset: 0; }
.srv-art__layer img { display: block; width: 100%; max-width: none; height: 100%; }

/* --------------------------------------------------------------------------
   Montagem com o scroll — a mesma da Home (09-como-trabalhamos), na escala deste desenho (×1,5608)
   --p vai de 0 → 1 conforme a ilustração sobe na tela (assets/js/sections/servicos-02-etapas.js).
   Padrão 1 = desenho do Figma (sem JS / prefers-reduced-motion aparece pronta).
   Medidas em unidades do desenho (iguais nos dois exports) divididas pela altura do quadro (--h) → % da camada,
   que vale em qualquer escala (768–1023 o quadro do desktop cresce até 560 de largura).
   1. A tela começa encaixada sobre a camada de código (87,406 = 349,46 − 262,054, topo dos dois tampos)
      e sobe até a posição do Figma.
   2. O tracejado (69,708 de altura a partir de --line-y) se desenha de baixo para cima enquanto a tela sobe.
   3. O selo "Validação / Pendente" surge quando o tracejado chega nele, subindo 9,36 (6 × 1,5608).
   -------------------------------------------------------------------------- */
.srv-art { --p: 1; --h: 593; --line-y: 136.125; }

.srv-art__layer--screen {
  translate: 0 calc((1 - var(--p)) * 87.406 / var(--h) * 100%);
  will-change: translate;
}

.srv-art__layer--line { /* desenha de 15% a 85% do progresso — janela de 1,5 além do traço em cima e embaixo */
  clip-path: inset(
    calc((var(--line-y) - 1.5 + (1 - clamp(0, (var(--p) - 0.15) / 0.7, 1)) * 72.708) / var(--h) * 100%)
    0
    calc((var(--h) - var(--line-y) - 71.208) / var(--h) * 100%)
    0
  );
}

.srv-art__layer--badge { /* aparece nos últimos 20% */
  opacity: clamp(0, (var(--p) - 0.8) / 0.2, 1);
  translate: 0 calc((1 - clamp(0, (var(--p) - 0.8) / 0.2, 1)) * 9.365 / var(--h) * 100%);
}

/* Montada (.is-built, JS) e na tela (.is-looping — data-loop da biblioteca assets/js/motion.js), as camadas flutuam
   sem parar como na Home, cada uma no seu ritmo: a tela desce 7,8 (5 × 1,5608), o selo e o tracejado 6,24, a camada
   de código sobe 3,12 — o vão entre elas "respira". Fora da tela a biblioteca tira .is-looping e o desenho volta ao
   quadro do Figma (ninguém vê o salto). transform não briga com o translate da montagem. */
@keyframes srv-art-float { to { transform: translateY(var(--float)); } }
.srv-art.is-built.is-looping .srv-art__layer--screen {
  --float: calc(7.804 / var(--h) * 100%);
  animation: srv-art-float 2.8s ease-in-out infinite alternate;
}
.srv-art.is-built.is-looping .srv-art__layer--base {
  --float: calc(-3.122 / var(--h) * 100%);
  animation: srv-art-float 3.4s ease-in-out .6s infinite alternate;
}
.srv-art.is-built.is-looping :is(.srv-art__layer--badge, .srv-art__layer--line) {
  --float: calc(6.243 / var(--h) * 100%);
  animation: srv-art-float 2.3s ease-in-out .3s infinite alternate;
}

/* --------------------------------------------------------------------------
   Hover (mouse): só a etapa (botão de aba, clicável) cresce 10% a partir da esquerda, por cima da ilustração.
   Os textos do painel não têm hover: não são link, e crescer dava a impressão de clicável.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .srv-step__tab {
    transform-origin: 0 50%;
    transition: scale .45s cubic-bezier(.2, .7, .2, 1);
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .srv-step__head:hover { z-index: 2; }
  .srv-step__tab:hover { scale: 1.1; }
}

/* --------------------------------------------------------------------------
   Entrada dos textos (JS arma com .is-armed): sobem na diagonal, de baixo e da esquerda, como os estudos da Home.
   Etapas: uma por vez quando a lista chega na tela (.is-in). Painel: um item por vez (--i) quando chega na tela
   e a cada troca de etapa (.is-entering). Só com "backwards": terminada a entrada, o hover volta a valer.
   -------------------------------------------------------------------------- */
@keyframes srv-text-in { from { opacity: 0; transform: translate(var(--srv-in-x, -32px), 24px); } }

.srv-steps.is-armed .srv-step__head:not(.is-in) .srv-step__tab,
.srv-steps.is-armed .srv-step__panel:not(.is-entering) :is(.srv-info__icon, .srv-info__label, .srv-info__text, .srv-info__list li) { opacity: 0; }

.srv-step__head.is-in .srv-step__tab {
  animation: srv-text-in 1s cubic-bezier(.25, .6, .3, 1) backwards;
}
.srv-step__panel.is-entering :is(.srv-info__icon, .srv-info__label, .srv-info__text, .srv-info__list li) {
  animation: srv-text-in .8s cubic-bezier(.25, .6, .3, 1) calc(.1s + var(--i, 0) * 60ms) backwards;
}
@media (min-width: 1024px) { /* no desktop as três etapas chegam juntas: uma depois da outra */
  .srv-step__head.is-in .srv-step__tab { animation-delay: calc((var(--step) - 1) * 150ms); }
}

/* --------------------------------------------------------------------------
   ≤1023: etapas em sequência, todas abertas; ilustração no fim
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .srv-steps::after { content: none; }
  .srv-steps__grid { display: flex; flex-direction: column; }

  .srv-step__head,
  .srv-step__head:not(:nth-child(1)),
  [data-active] .srv-step__head:nth-child(n) {
    margin: 0;
    padding: 24px var(--section-px) 16px;
    border-top: 0;
  }
  .srv-step__bar,
  [data-active] .srv-step__bar { display: none !important; }

  .srv-step__tab { flex-direction: column; align-items: flex-start; cursor: default; }
  .srv-step__tab .srv-step__tag,
  .srv-step__tab[aria-expanded] .srv-step__tag { color: var(--black-200); background: var(--blue-300); }
  .srv-step__tab[aria-expanded="false"]:hover .srv-step__title { color: var(--gray-0); }
  .srv-step__title { flex: none; align-self: stretch; }

  /* Tabs 8709:5717: stroke inferior sobre o fim do painel */
  .srv-step__panel,
  .srv-step__panel[hidden] { display: flex; box-shadow: inset 0 -1px 0 var(--gray-900); }

  /* quadro do desktop (296×593) em escala, até 560 de largura */
  .srv-art { position: relative; width: min(100%, 560px); margin-inline: auto; overflow: hidden; }

  /* Entrada do texto: diagonal mais curta — com p 16, os 32px do desktop passariam da borda */
  .srv-steps { --srv-in-x: -14px; }
}

/* --------------------------------------------------------------------------
   Mobile (≤767) · Tabs 8709:5717 (375×869): cabeçalho p 24/16/16, selo e título empilhados (gap 24),
   blocos com o ícone em cima (gap 16, p 24/16) — na última etapa (8709:5573) o ícone fica ao lado, como no Figma
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* 8709:5722 · Exo SemiBold 20/1.2 */
  .srv-step__title { font-size: 20px; line-height: 24px; }

  .srv-info { flex-direction: column; gap: 16px; padding: 24px var(--section-px); }
  .srv-step__panel:nth-last-child(2) .srv-info { flex-direction: row; gap: 24px; }

  /* Frame 109 · 8709:5854: ilustração 375×421 na largura toda (camadas m-ilustra-*: o desenho 39,62 / 49 acima e à esquerda) */
  .srv-art { width: 100%; aspect-ratio: 375 / 421; --h: 421; --line-y: 87.125; }
}

@media (prefers-reduced-motion: reduce) {
  .srv-step__tag,
  .srv-step__title,
  .srv-step__tab,
  .srv-info__label,
  .srv-info__text,
  .srv-info__list li { transition: none; }
  .srv-art__layer,
  .srv-step__tab,
  .srv-step__panel * { animation: none !important; }
}

/* Impressão: textos prontos (mesmo os que ainda não entraram ou saíram da tela) e a ilustração no quadro do Figma */
@media print {
  .srv-steps.is-armed :is(.srv-step__tab, .srv-info__icon, .srv-info__label, .srv-info__text, .srv-info__list li) {
    opacity: 1 !important;
    animation: none !important;
  }
  .srv-art { --p: 1 !important; }
  .srv-art__layer { animation: none !important; }
}