/* ==========================================================================
   ABITA - Layout Corporativo
   Regras e o porquê em specs/design.md. Números em tokens.css.

   Página de serviço: abertura fotográfica, sinais do problema, entrega,
   limites de escopo, CTA e FAQ. A página termina em FAQ, como pede o
   briefing §11.
   ========================================================================== */


/* --------------------------------------------------------------------------
   RITMO DA PÁGINA
   Os blocos são curtos e escaneáveis, como nas páginas internas já prontas.
   -------------------------------------------------------------------------- */

.sinais,
.entrega,
.limites,
.faq { padding-block: var(--secao-curta); }


/* ==========================================================================
   1 · ABERTURA
   Cena inteira ao fundo, texto no terço esquerdo. Layout Corporativo é
   arquitetura e especificação, então a abertura nomeia o limite: sem obra
   e sem mobiliário.
   ========================================================================== */









/* ==========================================================================
   2 · QUANDO SERVE
   Grade de sintomas. O fio dá cadência sem transformar a seção em cards.
   ========================================================================== */

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

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

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

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

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

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

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


/* ==========================================================================
   3 · O QUE ENTREGAMOS
   Lista de quatro entregas, com a planta ao lado. A imagem termina dentro
   da coluna de leitura, como definido para páginas internas.
   ========================================================================== */

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

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

.entrega__lista { list-style: none; }

/* Índice na lateral e ritmo curto, como na lista de Projeto Corporativo.
   Empilhado, o índice custava uma linha por item, quatro no total, sem
   dizer nada que a ordem da lista já não diga. */
.entrega__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));
}

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

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

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

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

/* Moldura, e não peça flutuante: a planta entra como ela é, com o fundo
   branco. A proporção é a do arquivo, então a cena aparece inteira e o
   recorte não corta nem a laje nem as salas da ponta. */
.entrega__fig {
  margin: 0;
  border-radius: var(--raio-card);
  aspect-ratio: 1536 / 1024;
}

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

  .entrega__cabeca { grid-row: 1; }
  .entrega__lista  { grid-row: 2; }

  /* Ao lado do texto e sem encostar nele: a largura é o que sobra da
     coluna depois da medida do texto e de um vão. Centrada na vertical,
     porque a proporção é fixa e a coluna de texto é mais alta. */
  .entrega__fig {
    grid-column: centro-start / centro-end;
    grid-row: 1 / span 2;
    width: calc(100% - 34rem - var(--e-6));
    justify-self: end;
    align-self: center;
  }
}


/* ==========================================================================
   4 · LIMITES DE ESCOPO
   O quadro vive em componentes.css, em "Limite em quadro": desde 15/09/2026
   é o mesmo bloco de Assinatura. Era texto corrido com "Se... Se..." seguido
   de duas caixas, e só a da direita tinha fio embaixo.
   ========================================================================== */


/* ==========================================================================
   5 · CTA
   Cena inteira ao fundo. O FAQ vem depois para fechar a página.
   ========================================================================== */






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

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

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


/* ==========================================================================
   6 · FAQ
   Última seção da página de serviço. Lista em dl para pergunta e resposta.
   ========================================================================== */