/* ============================================================
   SERVIÇOS — Stacking deck (cards empilhando no scroll)
   Figma node 1:2696 + referência cliente (cards se sobrepondo)
   ============================================================ */

/* ─── Seção ──────────────────────────────────────────────── */
/* Fundo sumi puro = mesma cor da base da Hero e do body → contínuo.
   A "luz" da transição vem do cursor glow GLOBAL (globals.css), que
   acende sobre esta seção como sobre qualquer outra. */
.servicos {
  background-color: var(--color-sumi);
  padding-top: 7.5rem;    /* 120px (respiro do header) */
  padding-bottom: 2rem;   /* curto: o "hold" do deck já dá o fôlego final */
}

.servicos__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-16); /* respiro header → deck */
}

/* ─── Header: label + título + subtítulo ─────────────────── */
.servicos__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8); /* 32px */
  max-width: 49.875rem; /* 798px Figma */
  text-align: center;
}

/* Pill "o que fazemos" — Figma: 173×34px, rounded-100px */
.servicos__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding-inline: 1.75rem;
  border-radius: var(--radius-pill);
  background-color: rgba(230, 101, 120, 0.20);
  color: var(--color-tsutsuji);
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

/* Título — Figma: 56px Medium, washi */
.servicos__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-washi);
  font-style: normal;
}

/* "No mesmo lugar." — Figma: sakura | nowrap impede "No" viúvo isolado */
.servicos__accent {
  color: var(--color-sakura);
  font-style: normal;
  white-space: nowrap;
}

/* Subtítulo — Figma: 16px Regular washi 60% */
.servicos__subtitle {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
  max-width: 39.9375rem; /* 639px Figma */
}

/* ─── Deck (track de scroll) + tuning ─────────────────────── */
.servicos__deck {
  --stack-top: clamp(5rem, 11vh, 7.5rem);  /* onde a pilha encosta (abaixo do nav) */
  --card-h: 30rem;                          /* altura de ancoragem dos cards (mídia 281px + texto) */
}

/* ─── Base (sem JS / mobile / reduced): lista vertical normal ── */
.servicos__stage { width: 100%; }
.servicos__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* ─── Card (washi) — visual idêntico em qualquer modo ─────── */
.servicos__item {
  width: 100%;
  min-height: var(--card-h);
  display: flex;
  flex-direction: column;
  background-color: var(--color-washi);
  border-radius: var(--radius-2xl);
  padding: 2.5rem 4.5rem 3rem;          /* 40px 72px 48px */
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.50);
  transform-origin: center bottom;       /* escala → peek p/ baixo */
}

/* ═══════════════════════════════════════════════════════════
   MODO DECK (scroll-driven) — JS adiciona .servicos__deck--on
   A altura (vh) do .servicos__deck é setada inline pelo JS = a pista.
   O stage prende (sticky) e o JS posiciona cada card por F (índice
   contínuo do scroll) → empilhamento DETERMINÍSTICO (sem o "desmonte"
   do sticky no fim). O último card sobe, vira frente e SEGURA.
   ═══════════════════════════════════════════════════════════ */
.servicos__deck--on .servicos__stage {
  position: sticky;
  top: 0;
  /* altura JUSTA p/ os cards (não 100vh) → menos vão vazio ao sair pro Portfolio */
  height: min(100vh, calc(var(--stack-top) + var(--card-h) + 4rem));
  padding-top: var(--stack-top);  /* abaixa a pilha p/ fora do nav (padding não colapsa) */
}
.servicos__deck--on .servicos__cards {
  display: block;
  position: relative;
  height: var(--card-h);
}
.servicos__deck--on .servicos__item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  margin: 0;
  /* transform / opacity / z-index vêm inline do JS; sem transition (scrub) */
  will-change: transform, opacity;
}

/* ─── Row: título + número (sempre sumi sobre washi) ─────── */
.servicos__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: var(--space-6); /* 24px */
  gap: var(--space-4);
}

/* Título — Figma: 48px Medium */
.servicos__row-title {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 3vw, 3rem);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-sumi);
}

/* Número — Figma: 32px Regular */
.servicos__row-num {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 2rem);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  color: var(--color-sumi);
  flex-shrink: 0;
}

/* ─── Separador ──────────────────────────────────────────── */
.servicos__divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-sumi);
  opacity: 0.12;
}

/* ─── Panel (sempre aberto — sem grid trick) ─────────────── */
.servicos__panel {
  display: block;
  flex: 1;
}

.servicos__panel-overflow {
  min-height: 0;
}

/* Layout: texto + imagem lado a lado — Figma: gap-120px */
.servicos__panel-inner {
  display: flex;
  align-items: flex-start;
  gap: 7.5rem;
  padding-top: 2.5rem; /* 40px acima do separador */
}

/* ─── Texto do panel ──────────────────────────────────────── */
.servicos__panel-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 24px */
}

/* Corpo — Figma: 32px Regular sumi 60% */
.servicos__panel-body {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.8vw, 2rem);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug);
  color: rgba(22, 17, 15, 0.60);
  max-width: 36.5625rem; /* 585px Figma */
}

/* Ênfase tsutsuji bold */
.servicos__panel-emphasis {
  color: var(--color-tsutsuji);
  font-weight: var(--font-weight-bold);
  font-style: normal;
}

/* ─── Tags ────────────────────────────────────────────────── */
.servicos__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2-5); /* 10px */
  list-style: none;
}

.servicos__tag {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding-inline: 1.125rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-tsutsuji);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: rgba(22, 17, 15, 0.65);
  white-space: nowrap;
  cursor: default;
  transition:
    background-color var(--transition-fast),
    color            var(--transition-fast);
}

.servicos__tag:hover {
  background-color: var(--color-tsutsuji);
  color: var(--color-washi);
}

/* ─── Imagem — Figma: 368×281px rounded-26 (foto real do projeto) ─ */
.servicos__panel-media {
  width: 23rem;              /* 368px */
  aspect-ratio: 368 / 281;  /* proporção da mídia no Figma */
  flex-shrink: 0;
  border-radius: 1.625rem;   /* ~26px Figma */
  overflow: hidden;
  background-color: var(--color-surface); /* fallback neutro atrás da imagem */
}

.servicos__panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Reduced-motion: o JS não ativa o deck → cards ficam na lista (base). */

/* ═══════════════════════════════════════════════════════════
   RESPONSIVO
   Deck scroll-driven só no desktop (≥1024px). Abaixo: lista normal.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .servicos__item {
    min-height: auto;
    padding: 1.75rem 2.5rem 2.5rem;
  }

  /* Achata os wrappers do panel → a imagem sobe pro TOPO do card, ANTES do
     título e da linha (igual à Equipe). .servicos__row e .servicos__divider
     já são filhos diretos do .servicos__item; com display:contents a
     .servicos__panel-text e a .servicos__panel-media também viram filhas
     diretas e podem ser reordenadas por `order`. */
  .servicos__panel,
  .servicos__panel-overflow,
  .servicos__panel-inner {
    display: contents;
  }

  .servicos__panel-media {
    width: 100%;
    height: auto;
    aspect-ratio: 368 / 281;   /* imagem COMPLETA, sem corte */
    order: -1;                 /* imagem no TOPO, antes do título/linha */
    margin-bottom: var(--space-6);
  }

  /* body + tags por último, com respiro abaixo da linha */
  .servicos__panel-text {
    margin-top: var(--space-2);
  }
}

@media (max-width: 767px) {
  .servicos {
    padding-block: 5rem;
  }

  .servicos__item {
    padding: 1.5rem 1.25rem 2rem;
    border-radius: 24px;
  }

  /* Títulos maiores no mobile */
  .servicos__title {
    font-size: 2.25rem;   /* 36px */
  }

  .servicos__row-title {
    font-size: clamp(1.5rem, 6.5vw, 1.875rem);   /* ~24–30px */
  }

  .servicos__row-num {
    font-size: var(--font-size-lg);
  }

  .servicos__panel-inner {
    gap: var(--space-6);
  }
}