/* -------------------------------------------------------------------------- */
/* Serviços progressivos: adaptação da cb-feature-main para o sistema Zenitify */
/* -------------------------------------------------------------------------- */

/* A seção respira como um capítulo próprio logo após a apresentação da marca. */
.services-feature {
  padding: 14rem 0;
  color: var(--color-ink);
  background: var(--color-paper);
}

/* O cabeçalho segue a mesma divisão editorial usada em Quem somos. */
.services-feature__intro {
  margin-bottom: 10rem;
}

/* O texto de apoio limita o comprimento para leitura confortável. */
.services-feature__intro .lead-copy {
  max-width: 40ch;
  margin-top: 3rem;
  color: var(--color-muted);
}

/* O main ocupa 100% no mobile e 70% no desktop, como na referência. */
.services-feature__main {
  position: relative;
}

/* Os trilhos ficam ocultos no mobile, onde o componente funciona por clique. */
.services-feature__fakes {
  display: none;
}

/* A lista preserva o intervalo de 1rem medido entre os cartões. */
.services-feature__items {
  display: grid;
  gap: 1rem;
}

/* Cada item contém fill, arte e conteúdo sem criar um novo contexto de página. */
.services-feature__item {
  position: relative;
  padding: 3rem;
  overflow-y: clip;
  color: var(--color-ink);
}

/* A superfície ocupa todo o card e recebe a interpolação por scroll. */
.services-feature__fill {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-media);
  background: var(--color-soft);
}

/* O cabeçalho continua clicável no mobile e transparente no desktop. */
.services-feature__head {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  padding: 0;
  gap: 1.6rem;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

/* O nome usa a mesma escala intermediária da seção original. */
.services-feature__head h3 {
  max-width: 18ch;
  margin: 0;
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

/* A numeração perde contraste quando fechada e ganha presença ao expandir. */
.services-feature__num {
  opacity: 0.2;
  font-size: 2rem;
  line-height: 1.1;
}

/* O acordeão usa frações para reproduzir a expansão contínua da referência. */
.services-feature__accordion {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 0fr;
  align-items: start;
  transition: grid-template-rows 1.2s var(--ease-expo);
}

/* O conteúdo permanece recortado até receber espaço no grid. */
.services-feature__content {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s;
}

/* O texto explica o resultado de cada disciplina. */
.services-feature__content p {
  max-width: 42ch;
  margin: 2.4rem 0 0;
  font-size: 1.8rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* O metadado fecha o card com vocabulário técnico curto. */
.services-feature__content small {
  display: block;
  margin-top: 2.4rem;
  opacity: 0.62;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* A arte aparece no lado direito conforme a superfície escurece. */
.services-feature__art {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: min(46%, 36rem);
  height: 100%;
  overflow: hidden;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Todas as variações usam três elementos para manter o DOM mínimo. */
.services-feature__art i {
  position: absolute;
  display: block;
  border: 1px solid rgb(247 245 235 / 42%);
}

/* Landing Pages: círculos concêntricos comunicam foco. */
.services-feature__art--conversion i {
  top: 50%;
  left: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
}

.services-feature__art--conversion i:first-child {
  width: 30rem;
}

.services-feature__art--conversion i:nth-child(2) {
  width: 19rem;
  border-color: rgb(230 235 245 / 72%);
}

.services-feature__art--conversion i:last-child {
  width: 7rem;
  background: var(--color-paper);
}

/* Websites: frames deslocados sugerem páginas e responsividade. */
.services-feature__art--web i {
  width: 22rem;
  height: 14rem;
  border-radius: 1.4rem;
  transform: rotate(-12deg);
}

.services-feature__art--web i:first-child {
  top: 14%;
  right: -3rem;
}

.services-feature__art--web i:nth-child(2) {
  top: 37%;
  right: 5rem;
  border-color: rgb(230 235 245 / 75%);
}

.services-feature__art--web i:last-child {
  top: 60%;
  right: -1rem;
  background: rgb(31 47 90 / 62%);
}

/* Identidade: três eixos formam um símbolo abstrato e reconhecível. */
.services-feature__art--brand i {
  top: 50%;
  left: 55%;
  width: 25rem;
  height: 5rem;
  background: rgb(230 235 245 / 18%);
  transform-origin: center;
}

.services-feature__art--brand i:first-child {
  transform: translate(-50%, -50%) rotate(0deg);
}

.services-feature__art--brand i:nth-child(2) {
  transform: translate(-50%, -50%) rotate(60deg);
}

.services-feature__art--brand i:last-child {
  transform: translate(-50%, -50%) rotate(-60deg);
}

/* Copywriting: linhas editoriais convergem para um ponto de decisão. */
.services-feature__art--copy i {
  right: 2rem;
  width: 29rem;
  height: 1px;
  background: rgb(247 245 235 / 52%);
  transform-origin: right;
}

.services-feature__art--copy i:first-child {
  top: 32%;
  transform: rotate(-10deg);
}

.services-feature__art--copy i:nth-child(2) {
  top: 50%;
  width: 23rem;
}

.services-feature__art--copy i:last-child {
  top: 68%;
  transform: rotate(10deg);
}

/* No mobile, o clique abre o item com a mesma curva e duração da referência. */
.services-feature__item.is-active {
  color: var(--color-paper);
}

/* A superfície ativa usa o Azul Zênite em vez do preto da referência. */
.services-feature__item.is-active .services-feature__fill {
  background: var(--color-ink);
}

/* A arte acompanha a abertura do conteúdo. */
.services-feature__item.is-active .services-feature__art {
  opacity: 1;
  transition: opacity 0.6s 0.35s;
}

/* O acordeão aberto recebe uma fração completa. */
.services-feature__item.is-active .services-feature__accordion {
  grid-template-rows: 1fr;
}

/* O conteúdo entra depois da expansão inicial. */
.services-feature__item.is-active .services-feature__content {
  opacity: 1;
  transition-duration: 0.6s;
}

/* A numeração ativa mantém contraste secundário. */
.services-feature__item.is-active .services-feature__num {
  opacity: 0.5;
}

/* Em desktop, os trilhos comandam uma lista absoluta vinculada ao scroll. */
@media (min-width: 768px) {
  .services-feature__main {
    width: 70%;
    margin-left: auto;
  }

  /* Cada trilho usa a altura medida na seção de referência. */
  .services-feature__fakes {
    display: grid;
    gap: 1rem;
  }

  .services-feature__fake {
    height: 37.42rem;
  }

  /* A lista visual ocupa o mesmo plano e cresce à medida que os itens abrem. */
  .services-feature__items {
    position: absolute;
    inset: 0 0 auto;
  }

  /* O padding desktop replica a proporção da referência. */
  .services-feature__item {
    padding: 6rem;
  }

  /* A cabeça inverte título e número nas extremidades do card. */
  .services-feature__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    cursor: default;
  }

  /* O título amplia sem alterar o peso regular do design system. */
  .services-feature__head h3 {
    font-size: 4.2rem;
  }

  /* A numeração se alinha à direita como marcador técnico. */
  .services-feature__num {
    font-size: 2.6rem;
    text-align: right;
  }

  /* O texto desktop preserva a largura medida de 56rem. */
  .services-feature__content p {
    max-width: 56rem;
    margin-top: 3.2rem;
    font-size: 2rem;
  }
}

/* Movimento reduzido transforma a seção em uma lista estática completa. */
@media (prefers-reduced-motion: reduce) {
  .services-feature__main {
    width: 100%;
    margin-left: 0;
  }

  /* Os trilhos não são necessários quando não há progresso animado. */
  .services-feature__fakes {
    display: none;
  }

  /* A lista retorna ao fluxo normal. */
  .services-feature__items {
    position: static;
  }

  /* Todo conteúdo permanece disponível sem interação. */
  .services-feature__accordion {
    grid-template-rows: 1fr !important;
    transition: none;
  }

  .services-feature__content {
    opacity: 1 !important;
    transition: none;
  }

  /* A arte fica sutil para preservar contraste na superfície clara. */
  .services-feature__art {
    opacity: 0.12 !important;
  }
}