/* Roberti — capítulo Como construímos.
   A mesma obra em quatro etapas, na ordem em que ela sobe: esqueleto, fechamento,
   volume fechado e a foto do galpão entregue. As três primeiras são o modelo Revit
   do mesmo ponto de vista, então trocam por dissolução; a quarta é fotografia de
   outro enquadramento e entra por corte -- a passagem de projeto para obra deve
   ser sentida, não suavizada.

   Capítulo claro, entre dois escuros: é aqui que a página respira.
   Cor e fonte vêm de marca.css. */
@import url("marca.css");

.construcao {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  padding: var(--gap-secao) clamp(16px, 4vw, 56px);
}
.construcao-interno {
  max-width: var(--largura-max); margin: 0 auto;
  position: relative;   /* o conteúdo fica acima do padrão de fundo */
}

.construcao-topo {
  padding-bottom: clamp(18px, 2.4vw, 30px);
  margin-bottom: clamp(24px, 3vw, 44px);
  border-bottom: 1px solid var(--tinta-13);
}
.construcao-etiqueta {
  font-family: var(--fonte-titulo);
  font-size: var(--t-etiqueta);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 14px;
}
.construcao-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(26px, 4.2vw, 54px);
  line-height: 1.04;
  letter-spacing: var(--tracking-titulo);
  margin: 0 0 12px;
  max-width: 22ch;
}
.construcao-titulo b { font-weight: 400; }
.construcao-linha {
  margin: 0;
  font-size: var(--t-corpo);
  color: var(--tinta-65);
  max-width: 62ch;
  line-height: 1.6;
}

/* etapas à esquerda, obra à direita e presa na tela */
.construcao-visor {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 68px);
  align-items: start;
}

.etapas { display: flex; flex-direction: column; }
.etapa {
  padding: clamp(20px, 3vw, 40px) 0 clamp(20px, 3vw, 40px) clamp(16px, 2vw, 26px);
  border-left: 3px solid var(--tinta-13);
  position: relative;
  transition: border-color .3s, opacity .3s;
  opacity: .42;
}
.etapa[data-ativa="true"] { opacity: 1; }
.etapa[data-ativa="true"]::before {
  content: "";
  position: absolute;
  left: -3px; top: 0; bottom: 0; width: 3px;
  background: var(--degrade);
}
.etapa-num {
  font-family: var(--fonte-titulo);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--indigo);
  display: block;
  margin-bottom: 9px;
}
.etapa-nome {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: clamp(19px, 2.2vw, 28px);
  letter-spacing: -.01em;
  margin: 0 0 9px;
}
.etapa-txt {
  margin: 0;
  font-size: var(--t-corpo);
  line-height: 1.6;
  color: var(--tinta-65);
  max-width: 46ch;
}

/* a obra, presa enquanto as etapas passam */
.obra {
  position: sticky;
  top: clamp(20px, 8vh, 90px);
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
  border-left: 3px solid var(--indigo);
}
.obra img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transition: opacity .55s ease;
}
/* A que ENTRA sobe e aparece; a que SAI fica opaca por baixo até a nova cobrir.
   Sem isso as duas cruzavam 50% ao mesmo tempo e o #fff do .obra aparecia no meio da
   troca -- medido: a soma das opacidades caía para 0,47, e era esse o flash. Agora a
   de baixo só some quando já está coberta, então o composto nunca fica translúcido. */
.obra img[data-ativa="true"] { opacity: 1; z-index: 2; }
.obra img[data-saindo="true"] { opacity: 1; z-index: 1; transition: none; }
/* a foto real entra por corte, não por dissolução */
.obra img.corte { transition: opacity .12s linear; }

.obra-legenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(14px, 2vw, 24px);
  background: linear-gradient(180deg, #eff0f200, #eff0f2f2 62%, var(--papel));
  font-family: var(--fonte-titulo);
  font-size: clamp(12px, 1.15vw, 14.5px);
  letter-spacing: .04em;
  color: var(--tinta-65);
}
.obra-legenda b { color: var(--tinta); font-weight: 400; }

@media (max-width: 900px) {
  .construcao-visor { grid-template-columns: 1fr; }
  .obra { position: relative; top: 0; margin-bottom: 22px; order: -1; }
  .etapa { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .obra img { transition: none; }
}