/*
  Cap 4 · Serviços (Figma 123:2 › "CAP 4 · Serviços" 127:2), 1440 × 1148.
  Medidas do Figma:
    título centralizado a 120px do topo (Geist Medium 56); palco a 300px;
    card do centro 440 × 580: superficie/janela, borda 1,5 destaque, raio 40,
      padding 36, gap 20, sombra 0 40 80 #000 a 55%;
      nome Geist Medium 32 (−1,5%); "A partir de" Geist 14; preço Geist Medium
      56 (−3%); descrição Geist 17/150%; botão cta/fundo com seta de 48;
      Personalizado sem preço;
    laterais (mesmo conteúdo, em perspectiva): ±1 com 290 × 520 a ±325px do
      centro e opacidade 0,85; ±2 com 220 × 410 a ±550px e opacidade 0,45;
      borda linha, botão em superficie/sutil;
    controles 48px abaixo do palco: setas de 52 (superficie/janela, borda
      linha) e paginação de pontos de 8 (o atual com 28, destaque);
    "Não sabe qual escolher? Entre em contato" 28px abaixo (Geist 15, link
      sublinhado); 120px de respiro embaixo;
    fundo: mármore a 35% a partir de 280px, véu do topo (fundo 100% → 0 em
      300px) e luz destaque a 18% (elipse 700 × 420, desfoque 140) no palco.

  No Figma a perspectiva é simulada com trapézios; aqui é perspective +
  translateZ + rotateY de verdade, com perspectiva de 1400px. Trapézios do
  Figma (a partir do centro do palco): ±1 de 180 a 470px, borda de dentro com
  520 de altura e a de fora com 430; ±2 de 440 a 660px, 410 e 330. Os
  trapézios não são uma projeção coerente, então os valores abaixo acertam as
  bordas (pensados para o card de 580): ±1 translateX ±397px, translateZ
  −261px, rotateY 27°; ±2 translateX ±822px, translateZ −674px, rotateY 25°.
  No modo 3D os laterais têm a altura do centro (ver "Modo 3D"), então
  ficam mais baixos que no Figma.
*/
/* A partir de 1024px (faixas B e C), esta seção tem regras em assets/css/encaixe.css */

.secao-servicos {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--secao-respiro);
  background-color: var(--fundo);
}

/* ------------------------------------------------------------------
   Fundo: mármore a 35%, véu do topo e luz no palco
   ------------------------------------------------------------------ */
.servicos-fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.servicos-marmore {
  position: absolute;
  top: 280px;
  left: 0;
  width: 100%;
  height: 900px;
  object-fit: cover;
  opacity: 0.35;
}

.servicos-marmore-claro,
[data-tema="claro"] .servicos-marmore-escuro {
  display: none;
}

[data-tema="claro"] .servicos-marmore-claro {
  display: block;
}

.servicos-veu {
  position: absolute;
  top: 280px;
  left: 0;
  width: 100%;
  height: 300px;
  background: linear-gradient(to bottom, var(--fundo), transparent);
}

/* Luz: elipse de 700 × 420 com desfoque 140 (curva gaussiana, como no hero),
   centrada no palco (590px do topo) */
.servicos-luz {
  position: absolute;
  inset: 0;
  background: radial-gradient(350px 210px at 50% var(--luz-y, 590px),
    color-mix(in srgb, var(--destaque) 18%, transparent) 0%,
    color-mix(in srgb, var(--destaque) 17.1%, transparent) 60%,
    color-mix(in srgb, var(--destaque) 14.4%, transparent) 80%,
    color-mix(in srgb, var(--destaque) 9%, transparent) 100%,
    color-mix(in srgb, var(--destaque) 3.6%, transparent) 120%,
    color-mix(in srgb, var(--destaque) 0.9%, transparent) 140%,
    transparent 170%);
}

/* ------------------------------------------------------------------
   Título
   ------------------------------------------------------------------ */
.servicos-titulo {
  max-width: 900px;
  margin-inline: auto;
  color: var(--texto);
  font-size: clamp(2rem, 3.89vw, var(--titulo-secao));
  font-weight: var(--peso-medio);
  line-height: var(--titulo-secao-altura);
  letter-spacing: var(--titulo-secao-letra);
  text-align: center;
  /* Se quebrar em duas linhas, elas ficam parecidas */
  text-wrap: balance;
}

/* ------------------------------------------------------------------
   Card (visual do card do centro: é o padrão, sem JavaScript e no celular)
   ------------------------------------------------------------------ */
.servico {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 36px;
  border-radius: var(--raio-40);
  background-color: var(--superficie-janela);
  box-shadow: inset 0 0 0 1.5px var(--destaque), 0 40px 80px rgb(0 0 0 / 0.55);
}

.servico:focus-visible {
  outline: 2px solid var(--destaque);
  outline-offset: 4px;
}

.servico-nome {
  color: var(--texto);
  font-size: var(--titulo-card-destaque);
  font-weight: var(--peso-medio);
  letter-spacing: var(--titulo-card-destaque-letra);
  line-height: normal;
}

.servico-preco {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.servico-preco-rotulo {
  color: var(--texto-apoio);
  font-size: var(--apoio-card);
  line-height: normal;
}

.servico-preco-valor {
  color: var(--texto);
  font-size: var(--titulo-secao);
  font-weight: var(--peso-medio);
  letter-spacing: -0.03em;
  line-height: normal;
}

.servico-descricao {
  color: var(--texto-apoio);
  font-size: var(--apoio-resposta);
  line-height: 1.5;
}

.servico-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 48px;
  margin-top: auto;
  padding-left: 22px;
  border-radius: var(--raio-999);
  background-color: var(--cta-fundo);
  color: var(--cta-texto);
  font-size: var(--navegacao);
  font-weight: var(--peso-medio);
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}

.servico-cta-seta {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}

/* ------------------------------------------------------------------
   Lista: sem JavaScript e no celular, rolagem horizontal com scroll-snap
   ------------------------------------------------------------------ */
.servicos-carrossel {
  margin-top: 121px;
}

.servicos-lista {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 16px 0 48px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 10%;
  scrollbar-width: thin;
}

.servicos-lista > .servico {
  flex: 0 0 min(440px, 80%);
  scroll-snap-align: center;
}

/* Fora do 3D a lista rola e recorta o que passa dela: a sombra do Figma
   (80px de desfoque) viraria uma faixa, então aqui ela é menor e cabe no
   respiro da lista */
.servicos-carrossel:not([data-modo="3d"]) .servico {
  box-shadow: inset 0 0 0 1.5px var(--destaque), 0 12px 24px rgb(0 0 0 / 0.3);
}

/* Com JavaScript a paginação mostra a posição: a barra de rolagem sai */
.servicos-carrossel[data-modo="rolagem"] .servicos-lista {
  scrollbar-width: none;
}

.servicos-carrossel[data-modo="rolagem"] .servicos-lista::-webkit-scrollbar {
  display: none;
}

/* ------------------------------------------------------------------
   Modo 3D (JavaScript, 1024px ou mais): palco com perspectiva
   ------------------------------------------------------------------ */
/* Os cinco cards na mesma célula da grade, centralizados na horizontal
   (Figma V3 › T3 166:50):
   - palco com 420px de altura mínima (a do V3) e todos os cards esticados
     na célula (stretch), com a mesma altura de layout. Hoje o maior
     conteúdo (Loja Virtual) tem 385px, então todos ficam com 420. Se um
     texto passar de 420, a célula cresce junto e nada corta;
   - o texto tem a mesma largura em qualquer posição (respiro dos laterais
     abaixo), então a altura não muda na troca de card;
   - centro e laterais só se diferem no transform: os laterais ficam sem
     escala (no Figma, 580 de altura a 80%; com a altura do centro, 80%
     deixava os laterais pequenos demais e 110% cobria o texto do ±2);
   - em todos os cards o botão fica no pé (margin-top: auto), também nos
     laterais (no Figma eles têm o conteúdo centrado na altura). */
.servicos-carrossel[data-modo="3d"] .servicos-lista {
  display: grid;
  align-items: stretch;
  justify-items: center;
  min-height: 420px;
  padding: 0;
  overflow: visible;
  perspective: 1400px;
}

.servicos-carrossel[data-modo="3d"] .servico {
  --x: 0px;
  --z: 0px;
  --giro: 0deg;
  grid-area: 1 / 1;
  width: 440px;
  transform: translate3d(var(--x), 0, var(--z)) rotateY(var(--giro));
}

@media (prefers-reduced-motion: no-preference) {
  .servicos-carrossel[data-modo="3d"] .servico {
    transition: transform 0.5s ease, opacity 0.5s ease;
  }
}

/* Sem transição na primeira montagem */
.servicos-carrossel[data-montando] .servico {
  transition: none;
}

.servicos-carrossel[data-modo="3d"] .servico[data-pos="0"] {
  z-index: 5;
  /* No Figma o card do centro desfoca o que está atrás; sem o desfoque
     (caro em 3D), a janela vai sobre o fundo sólido para os laterais não
     aparecerem através dele */
  background: linear-gradient(var(--superficie-janela), var(--superficie-janela)), var(--fundo);
}

/* Laterais: respiro maior do lado de dentro, que fica sob o card da frente.
   Dentro + fora somam 72, como os 36 + 36 do centro: o texto tem a mesma
   largura em qualquer posição, então a altura do card não muda na troca.
   Com 58 nenhum texto entra sob o card da frente (medido em 1024 e 1440) */
.servicos-carrossel[data-modo="3d"] .servico[data-pos="1"],
.servicos-carrossel[data-modo="3d"] .servico[data-pos="2"] {
  padding-left: 58px;
  padding-right: 14px;
}

.servicos-carrossel[data-modo="3d"] .servico[data-pos="-1"],
.servicos-carrossel[data-modo="3d"] .servico[data-pos="-2"] {
  padding-right: 58px;
  padding-left: 14px;
}

.servicos-carrossel[data-modo="3d"] .servico[data-pos="-1"] {
  --x: -397px; --z: -261px; --giro: -27deg;
  z-index: 4;
  opacity: 0.85;
}

.servicos-carrossel[data-modo="3d"] .servico[data-pos="1"] {
  --x: 397px; --z: -261px; --giro: 27deg;
  z-index: 4;
  opacity: 0.85;
}

.servicos-carrossel[data-modo="3d"] .servico[data-pos="-2"] {
  --x: -822px; --z: -674px; --giro: -25deg;
  z-index: 3;
  opacity: 0.45;
}

.servicos-carrossel[data-modo="3d"] .servico[data-pos="2"] {
  --x: 822px; --z: -674px; --giro: 25deg;
  z-index: 3;
  opacity: 0.45;
}

/* Mais longe que ±2: fora do palco, sem foco (as setas e as teclas chegam lá) */
.servicos-carrossel[data-modo="3d"] .servico[data-pos="-3"],
.servicos-carrossel[data-modo="3d"] .servico[data-pos="3"] {
  --z: -900px;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

.servicos-carrossel[data-modo="3d"] .servico[data-pos="-3"] { --x: -1100px; --giro: -25deg; }
.servicos-carrossel[data-modo="3d"] .servico[data-pos="3"] { --x: 1100px; --giro: 25deg; }

/* Laterais: borda linha, sem sombra; botão em superficie/sutil */
.servicos-carrossel[data-modo="3d"] .servico:not([data-pos="0"]) {
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--linha);
}

.servicos-carrossel[data-modo="3d"] .servico:not([data-pos="0"]) .servico-cta-seta {
  display: none;
}

.servicos-carrossel[data-modo="3d"] .servico:not([data-pos="0"]) .servico-cta {
  padding-inline: 22px;
  background-color: var(--superficie-sutil);
  color: var(--texto);
}

/* ------------------------------------------------------------------
   Controles (só com JavaScript)
   ------------------------------------------------------------------ */
.servicos-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 48px;
}

.servicos-controles[hidden] {
  display: none;
}

.servicos-seta {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--raio-999);
  background-color: var(--superficie-janela);
  box-shadow: inset 0 0 0 1px var(--linha);
  color: var(--texto);
}

.servicos-seta[aria-disabled="true"] {
  cursor: default;
  opacity: 0.4;
}

.servicos-paginacao {
  display: flex;
  align-items: center;
  gap: 8px;
}

.servicos-paginacao span {
  width: 8px;
  height: 8px;
  border-radius: var(--raio-999);
  background-color: var(--superficie-sutil);
}

.servicos-paginacao span.ativo {
  width: 28px;
  background-color: var(--destaque);
}

/* ------------------------------------------------------------------
   "Não sabe qual escolher? Entre em contato"
   ------------------------------------------------------------------ */
.servicos-ajuda {
  margin-top: 28px;
  color: var(--texto-apoio);
  font-size: var(--navegacao);
  line-height: normal;
  text-align: center;
}

/* Alvo de toque de 44px sem mudar a linha (padding e margem se anulam) */
.servicos-ajuda-link {
  display: inline-block;
  margin-block: -12px;
  padding-block: 12px;
  color: var(--texto);
  font-weight: var(--peso-medio);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ------------------------------------------------------------------
   Abaixo de 1024px: sem perspectiva (o JavaScript só liga o 3D a partir de
   1024px); rolagem com scroll-snap, os cards encostando na borda da tela e
   um pedaço dos vizinhos à mostra. No celular o card tem 80% da tela; em
   telas médias ele para em 440px e fica centrado.
   ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .servicos-lista {
    margin-inline: calc(var(--margem-lateral) * -1);
    gap: 12px;
    padding-inline: max(10%, calc(50% - 220px));
    padding-bottom: 40px;
  }

  .servicos-lista > .servico {
    flex-basis: min(440px, 100%);
  }
}

/* ------------------------------------------------------------------
   Abaixo de 768px: setas somem, paginação fica. Medidas provisórias até o
   mobile do Figma.
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .servicos-carrossel {
    margin-top: 40px;
  }

  .servico {
    padding: 28px;
  }

  .servico-preco-valor {
    font-size: 2.75rem;
  }

  .servicos-seta {
    display: none;
  }

  .servicos-controles {
    margin-top: 8px;
  }
}