/* Roberti — capítulo 4, as 5 soluções.
   Decisão 5 do briefing: apresentar as CINCO soluções, não os 16 itens soltos. Motivo
   registrado: 16 cards enfileirados quebram o ritmo da página. Os 16 individuais vivem
   no capítulo 3 e em /produtos.

   A ordem é a mesma do capítulo 3 e do slogan -- a ordem em que a obra sobe, da
   fundação ao futuro. Por isso as linhas são numeradas 01 a 05 e alternam o lado: a
   página lê como sequência, não como catálogo.

   Capítulo CLARO, como manda a §9 do briefing. ⚠ Com ele, galpão, soluções, como
   construímos e área de atuação ficam quatro capítulos claros seguidos. O contraste
   aqui vem das FOTOS sangrando na linha, não da troca de fundo. */
@import url("marca.css");

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

.solucoes-topo {
  padding-bottom: clamp(18px, 2.4vw, 30px);
  margin-bottom: clamp(26px, 3.4vw, 54px);
  border-bottom: 1px solid var(--tinta-13);
}
.solucoes-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;
}
.solucoes-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: 26ch;
}
.solucoes-titulo b { font-weight: 400; }
.solucoes-linha {
  margin: 0;
  font-size: var(--t-corpo);
  color: var(--tinta-65);
  max-width: 64ch;
  line-height: 1.6;
}

/* ---------- a solução ---------- */
.solucoes-lista {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 104px);
}
.sol {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 56px);
  align-items: center;
}
/* Alterna o lado. Tem de ser order:1 e não -1: a foto já é o primeiro filho no DOM,
   então mandá-la para -1 não move nada -- ela precisa ir para DEPOIS do texto. */
.sol:nth-child(even) .sol-foto { order: 1; }

.sol-foto {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--tinta-fundo);
  border-radius: 2px;
}
.sol-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* o leve zoom de entrada dá vida sem custar layout: só transform e opacity */
  transform: scale(1.06);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), opacity .8s ease-out;
}
.sol[data-visivel] .sol-foto img { transform: scale(1); opacity: 1; }

/* numeral fantasma: dá escala à sequência sem pesar como texto */
.sol-num {
  position: absolute;
  left: 0; bottom: 0;
  margin: 0;
  padding: 0 clamp(10px, 1.4vw, 20px) clamp(2px, .5vw, 8px);
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(56px, 8vw, 120px);
  line-height: .82;
  color: var(--papel);
  width: 100%;
  /* O numeral senta sobre FOTO, que é fundo imprevisível. O degradê tem de cobrir o
     glifo INTEIRO: na primeira versão ele ia a zero no topo da própria caixa, então a
     parte de cima do número caía sobre céu e telhado branco e media 1,12:1 (alvo 3,0).
     O padding-top empurra o trecho transparente para ACIMA da letra, e os stops
     garantem alfa >= .70 em toda a altura do glifo. Medido sobre as cinco fotos. */
  padding-top: .55em;
  background: linear-gradient(0deg, #1b1b37e6 0%, #1b1b37b3 62%, #1b1b3700 100%);
}

.sol-texto { min-width: 0; }
.sol-rot {
  font-family: var(--fonte-titulo);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 10px;
}
.sol-rot b { color: var(--tinta-65); font-weight: 400; margin-left: 8px; }
.sol-tese {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: clamp(21px, 2.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 12px;
  max-width: 24ch;
}
.sol-corpo {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-size: var(--t-corpo);
  line-height: 1.62;
  color: var(--tinta-65);
  max-width: 46ch;
}

/* os elementos da solução, como fichas */
.sol-itens {
  display: flex; flex-wrap: wrap; gap: 7px;
  list-style: none; margin: 0; padding: 0;
}
.sol-itens li {
  font-family: var(--fonte-titulo);
  font-size: 12.5px;
  padding: 5px 11px 6px;
  border: 1px solid var(--tinta-13);
  border-radius: 999px;
  color: var(--tinta-65);
  background: #ffffff8c;
  /* entram em cascata, uma depois da outra; o atraso vem do JS */
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .4s ease-out, transform .4s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--atraso, 0s);
}
.sol[data-visivel] .sol-itens li { opacity: 1; transform: none; }

/* o texto sobe junto, um respiro depois da foto */
.sol-texto > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease-out, transform .6s cubic-bezier(.2,.7,.2,1);
}
.sol[data-visivel] .sol-texto > * { opacity: 1; transform: none; }
.sol[data-visivel] .sol-rot   { transition-delay: .06s; }
.sol[data-visivel] .sol-tese  { transition-delay: .12s; }
.sol[data-visivel] .sol-corpo { transition-delay: .18s; }

/* crédito da imagem: honesto sobre o que é foto de obra e o que é ilustração */
.sol-credito {
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  font-family: var(--fonte-titulo);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-65);
}

@media (max-width: 860px) {
  .sol { grid-template-columns: 1fr; gap: clamp(16px, 3vw, 24px); }
  /* no celular a foto vem sempre primeiro: alternar lado não significa nada numa coluna */
  .sol:nth-child(even) .sol-foto { order: 0; }
  .sol-tese { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* nada de deslocamento nem zoom: o conteúdo nasce no lugar */
  .sol-foto img, .sol-itens li, .sol-texto > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}