/* =========================================================
   Seção "Services" — abaixo de "Quem Somos"
   Layout trazido do site modelo (framer), com a identidade
   visual da IronFox (preto, vermelho, DM Sans):
     - esquerda (8%→36% do grid do site, 1fr): eyebrow + título
       + subtítulo no topo, selo "sem pacote padrão" + CTA no
       rodapé — sticky, ocupa a viewport enquanto a direita rola.
     - direita (36%→92%, 2fr): os 4 pilares em fluxo normal,
       cada um com número/kicker, título, par de fotos lado a
       lado (a linha central do grid do site passa entre elas),
       descrição e tags.
   Eyebrow reaproveita .ifx-orbit-eyebrow* (orbit-section.css).
   ========================================================= */

.ifx-services {
  position: relative;
  background: #000;
  padding: 140px 0 120px;
}

.ifx-services-columns {
  display: grid;
  grid-template-columns: 1fr 2fr;
  margin: 0 8%;
  align-items: start;
}

/* ---- coluna esquerda (sticky, conteúdo agrupado e centralizado) ----
   Um único bloco (eyebrow+título+subtítulo, depois selo+CTA), com um gap
   entre os dois grupos em vez de space-between — fica agrupado no meio da
   tela, não esticado do topo até o rodapé da viewport. */
.ifx-services-left {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 56px;
  padding-right: 32px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ifx-ease-spring), transform 1s var(--ifx-ease-spring);
}
.ifx-services.ifx-services-in .ifx-services-left { opacity: 1; transform: translateY(0); }

.ifx-services-left .ifx-orbit-eyebrow { justify-content: flex-start; margin-bottom: 22px; }

.ifx-services-title {
  margin: 0 0 18px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
}

.ifx-services-subtitle {
  margin: 0;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.55;
  color: rgba(255,255,255,.55);
}

.ifx-services-left-bottom { display: flex; flex-direction: column; align-items: flex-start; }

.ifx-services-footer-badge {
  display: inline-block;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #b41829;
}

.ifx-services-footer-text {
  margin: 0 0 24px;
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 500;
  color: #fff;
}

/* .ifx-hero-cta nasce com opacity:0 (só vira 1 dentro de .ifx-hero.ifx-hero-in,
   ver style.css) — fora do hero isso deixava o botão invisível pra sempre.
   Aqui o reveal já é feito pelo fade da própria .ifx-services-left, então o
   botão fica sempre visível em seu estado de repouso. */
.ifx-services-cta {
  width: auto;
  height: 56px;
  padding: 0 28px;
  gap: 10px;
  opacity: 1;
  transform: none;
}
.ifx-services-cta .plus { position: static; transform: none; }
.ifx-services-cta:hover .plus { transform: rotate(360deg); }

/* ---- coluna direita: os 4 pilares, em fluxo normal ----
   Sem padding-left aqui: o border-top/bottom precisa encostar exatamente na
   linha v1 do grid do site (36%), senão sobra um pedaço sem borda à esquerda. */
.ifx-services-right {
  min-width: 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.ifx-service-item {
  padding: 64px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .9s var(--ifx-ease-spring), transform .9s var(--ifx-ease-spring);
}
.ifx-service-item.ifx-service-in { opacity: 1; transform: translateY(0); }

/* respiro padrão pra texto/tags não encostarem nas linhas do grid do site —
   as imagens (.ifx-service-media), essas sim, ficam full-bleed até v1/v2/v3 */
.ifx-service-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0 32px;
}

.ifx-service-num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255,255,255,.35);
}

.ifx-service-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #b41829;
}

.ifx-service-title {
  margin: 0 0 32px;
  padding: 0 32px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
}

/* par de fotos lado a lado, sem espaço entre elas — a foto da esquerda cai na
   coluna do meio (v1→v2) e a da direita na coluna da direita (v2→v3) do grid
   do site, exatamente como as duas metades deste grid de 1fr 1fr */
.ifx-service-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 32px;
  background: #0b0b0c;
}
.ifx-service-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(.15) contrast(1.05);
}

/* descrição (coluna do meio) + tags (coluna da direita), lado a lado —
   mesmas duas colunas que as fotos acima, só com um respiro entre elas
   pra não colar o texto na linha central do grid */
.ifx-service-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  align-items: start;
  padding: 0 32px;
}

.ifx-service-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.65);
}

.ifx-service-tags {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ifx-service-tags li {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
}

@media (max-width: 900px) {
  .ifx-services-title { font-size: clamp(26px, 4.4vw, 36px); }
  .ifx-service-title { font-size: clamp(24px, 4.4vw, 34px); }
}

@media (max-width: 700px) {
  .ifx-services { padding: 96px 0 80px; }
  .ifx-services-columns { grid-template-columns: 1fr; margin: 0 6%; }
  .ifx-services-left {
    position: static;
    height: auto;
    min-height: 0;
    padding-right: 0;
    margin-bottom: 48px;
    gap: 40px;
  }
  .ifx-service-item { padding: 40px 0; }
  .ifx-service-meta,
  .ifx-service-title,
  .ifx-service-content { padding-left: 16px; padding-right: 16px; }
  .ifx-service-media { grid-template-columns: 1fr 1fr; margin-bottom: 24px; }
  .ifx-service-content { grid-template-columns: 1fr; gap: 16px 0; }
}