/* ==========================================================================
   ABITA - Projeto Corporativo
   Página de venda do serviço 02: projeto, obra, instalações e mobiliário.
   ========================================================================== */

.momentos,
.escopo,
.controle,
.limites,
.faq { padding-block: var(--secao-curta); }


/* 1 · Abertura */

/* "Turnkey" aparece aqui como palavra explicativa, nunca como rótulo de
   serviço: é o que o `briefing-site.md` §5 permite. Corpo pequeno e cinza
   de meta, entre o título e o subtítulo, para explicar sem competir. */
.abertura__nota {
  margin-top: var(--e-2);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--meta-sobre-foto);
}










/* 2 · Quando contratar */

.momentos__cabeca h2 {
  margin-top: var(--e-3);
  max-width: 25ch;
}

.momentos__grade {
  display: grid;
  gap: var(--e-4);
  margin-top: clamp(var(--e-4), 2.5vw, var(--e-5));
  list-style: none;
}

.momento {
  padding-top: var(--e-4);
  border-top: var(--fio) solid var(--linha-cor, var(--linha));
}

.momento h3 {
  margin-top: var(--e-2);
  color: var(--texto-cor, var(--texto));
}

.momento p {
  margin-top: var(--e-2);
  max-width: 42ch;
}

@media (min-width: 760px) {
  .momentos__grade {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e-5) var(--e-6);
  }
}

@media (min-width: 1180px) {
  .momentos__grade { grid-template-columns: repeat(4, 1fr); }
}


/* 3 · Escopo */

.escopo { row-gap: clamp(var(--e-4), 2.5vw, var(--e-5)); }

.escopo__cabeca h2 {
  margin-top: var(--e-3);
  max-width: 24ch;
}

.escopo__lista { list-style: none; }

/* Ritmo apertado: são quatro linhas curtas, e o respiro de `--e-4`
   transformava a lista numa seção de rolagem própria.

   O índice sai de cima do nome e vai para a lateral. Empilhado, ele
   custava uma linha inteira por item, quatro no total, sem dizer nada que
   a ordem da lista já não diga. */
.escopo__item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--e-3);
  padding-block: var(--e-3);
  border-top: var(--fio) solid var(--linha-cor, var(--linha));
}

.escopo__item .indice { grid-row: 1; }
.escopo__item h3 { grid-column: 2; }
.escopo__item p  { grid-column: 2; }

.escopo__item:last-child { border-bottom: var(--fio) solid var(--linha-cor, var(--linha)); }

.escopo__item h3 {
  margin-top: 0;
  color: var(--texto-cor, var(--texto));
}

.escopo__item p {
  margin-top: var(--e-1);
  max-width: 52ch;
}

.escopo__fig {
  border-radius: var(--raio-card);
  aspect-ratio: 3 / 2;
}

@media (min-width: 1280px) {
  .escopo__cabeca,
  .escopo__lista {
    grid-column: centro-start / centro-end;
    width: min(100%, 35rem);
  }

  .escopo__cabeca { grid-row: 1; }
  .escopo__lista  { grid-row: 2; }

  .escopo__fig {
    grid-column: centro-start / centro-end;
    grid-row: 1 / span 2;
    width: calc(100% - 35rem - var(--e-6));
    justify-self: end;
    align-self: stretch;
    aspect-ratio: auto;
  }

  .escopo__fig picture { position: absolute; inset: 0; }
}


/* 4 · Controle */

.controle {
  row-gap: clamp(var(--e-5), 4vw, var(--e-7));
  background: var(--tinta);
  color: var(--texto-corpo-inv);
  --linha-cor: var(--linha-inv);
  --texto-cor: var(--papel);
  --meta-cor: var(--texto-meta-inv);
}

.controle__texto h2 {
  margin-top: var(--e-3);
  max-width: 21ch;
  color: var(--papel);
}

.controle__texto .lead {
  margin-top: var(--e-4);
  max-width: 50ch;
}

/* Três linhas, e não três cards. São três frases curtas de uma linha:
   dentro de card, cada uma virava um objeto com moldura, fundo e 15rem de
   altura mínima, e a leitura, que é de cima para baixo, virava varredura
   lateral. Em linha o olho corre uma vez só. */
.controle__lista { list-style: none; }

.controle__item {
  display: grid;
  /* A coluna do índice é a mesma das outras listas numeradas, 2,5rem mais
     o vão: com 3rem o texto começava 8px mais para dentro que o de
     "O que entra", logo acima dele. */
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--e-3);
  padding-block: var(--e-4);
  border-top: var(--fio) solid var(--linha-inv);
}

.controle__item:last-child { border-bottom: var(--fio) solid var(--linha-inv); }

.controle__item p {
  max-width: 42ch;
  color: var(--papel);
  font-size: var(--fs-d3);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
}

@media (min-width: 900px) {
  .controle__texto {
    grid-column: centro-start / centro-end;
    grid-row: 1;
    width: min(100%, 36rem);
  }

  .controle__lista {
    grid-column: centro-start / centro-end;
    grid-row: 1;
    margin-left: auto;
    width: min(100%, 34rem);
    align-self: end;
  }
}


/* 5 · Limite certo */

.limites { row-gap: clamp(var(--e-4), 2.5vw, var(--e-6)); }

.limites__cabeca h2 {
  margin-top: var(--e-3);
  max-width: 18ch;
}

.limites__texto > * + * { margin-top: var(--e-3); }
.limites__texto p { max-width: 58ch; }

@media (min-width: 900px) {
  .limites__cabeca {
    grid-column: centro-start / centro-end;
    grid-row: 1;
    width: min(100%, 27rem);
  }

  .limites__texto {
    grid-column: centro-start / centro-end;
    grid-row: 1;
    margin-left: auto;
    width: min(100%, 36rem);
  }
}


/* 6 · CTA */






.proximo h2 {
  margin-top: var(--e-4);
  max-width: 17ch;
  color: var(--texto-sobre-foto);
}

.proximo .lead {
  margin-top: var(--e-4);
  max-width: 48ch;
  color: var(--texto-sobre-foto);
}

.proximo .cta { margin-top: clamp(var(--e-5), 3vw, var(--e-6)); }





/* O componente vive em componentes.css: era o mesmo bloco em três
   folhas. Aqui fica só o ritmo da seção, no topo do arquivo. */