/* ---------- página de serviço ----------
   Referência: página de serviço do template Vanguard (Framer). De lá vieram a abertura só com o
   nome, o bloco em duas colunas com o texto à direita e a faixa com os outros serviços.
   Aqui o título fica à esquerda, o botão é a pílula do site e os outros serviços usam a mesma
   lista numerada da home (services.css), sem ícones.
   Os trabalhos da frente, que a referência não tem, entram no mesmo formato de lista.
   A página reaproveita as peças da página de case (case.css): abertura, frase grande, cartões. */
.service-page__body {
  display: grid;
  grid-template-columns: var(--servico-pagina-colunas);
  align-items: start;
  gap: var(--space-6);
}
/* o número fica na altura da primeira linha da frase grande */
.service-page__num { padding-top: 0.75em; }

.service-page__main {
  display: grid;
  justify-items: start;
  gap: var(--space-8);
}

.service-page__text {
  display: grid;
  gap: var(--space-5);
  max-width: var(--servico-pagina-texto);
}
.service-page__text p {
  font-size: var(--fs-case-texto);
  line-height: 1.45;
  text-wrap: pretty;
}

/* o que você recebe e onde se encaixa, lado a lado */
.service-page__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  width: 100%;
}
.service-page__pair section {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--cena-borda);
}
.service-page__pair p {
  font-size: var(--fs-corpo-g);
  line-height: 1.45;
  text-wrap: pretty;
}

/* grupo com rótulo em cima e itens em duas colunas (página Squad Sites) */
.service-page__group {
  display: grid;
  gap: var(--space-5);
  width: 100%;
}
.service-page__item {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-case-texto);
  font-weight: var(--peso-titulo);
  line-height: 1.1;
  letter-spacing: var(--tracking-titulo);
}

/* link de volta para a frente, no lugar do número (página Squad Sites) */
.service-page__back {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-2);
  min-height: 44px;
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-corpo-medio);
}
.service-page__back .link-arrow { transition: transform var(--dur-med) var(--ease-out); }
.service-page__back:hover .link-arrow { transform: translateX(-4px); }

/* ---------- página de texto corrido (privacidade) ----------
   Mesmas duas colunas das páginas de serviço; cada seção é um título pequeno e seus parágrafos. */
.legal {
  display: grid;
  gap: var(--space-7);
  max-width: var(--servico-pagina-texto);
}
.legal section {
  display: grid;
  gap: var(--space-4);
}
.legal p {
  font-size: var(--fs-corpo-g);
  line-height: 1.5;
  text-wrap: pretty;
}
/* registro e código postal ficam inteiros na mesma linha */
.legal__inteiro { white-space: nowrap; }

/* ---------- chamada para os planos, dentro da página Sites ----------
   Caixa na cor de destaque com os quatro planos em resumo e o link para a página Squad Sites.
   A caixa redefine as cores da cena, para a pílula e o foco usarem a cor certa sobre o destaque. */
.teaser {
  --cena-fundo: var(--tema-destaque);
  --cena-texto: var(--texto-sobre-destaque);
  --cena-borda: var(--texto-sobre-destaque);
  --focus-ring: var(--texto-sobre-destaque);
  display: grid;
  justify-items: start;
  gap: var(--space-5);
  width: 100%;
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  border-radius: var(--radius-card);
  background: var(--cena-fundo);
  color: var(--cena-texto);
  transition: background-color var(--dur-med) var(--ease-out);
}
.teaser__title {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-frase);
  font-weight: var(--peso-titulo);
  line-height: var(--lh-frase);
  letter-spacing: var(--tracking-titulo);
  text-wrap: balance;
}
.teaser__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  width: 100%;
}
.teaser__list li {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--cena-borda);
}
.teaser__plan {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-case-texto);
  font-weight: var(--peso-titulo);
  line-height: 1.1;
  letter-spacing: var(--tracking-titulo);
}
.teaser__text {
  font-size: var(--fs-corpo-p);
  line-height: 1.35;
}

/* ---------- cartões de lista: trabalhos da frente e outras frentes ----------
   Os dois usam a lista de linhas da home (services.css), sem a moldura que segue o cursor. */
.scene.list-card { min-height: var(--lista-altura); }
.list-card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-height: var(--lista-altura);
  padding: calc(var(--header-altura) + var(--space-5)) calc(var(--margem-conteudo) - var(--card-inset)) var(--space-8);
}

/* ---------- tablet e celular: uma coluna só ---------- */
@media (max-width: 960px) {
  .service-page__body { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .service-page__num { padding-top: 0; }
  .service-page__pair { grid-template-columns: minmax(0, 1fr); }
  .teaser__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .service-page__back .link-arrow { transition: none; }
}