/* ===== seção "projetos" (escura) — três casos: ilustração, número, história ===== */
.proj {
  background: #0A1224;
  color: var(--white);
  padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 9vw, 120px);
  --p-text-2: #9DB0CC;
}
.proj__head { margin-bottom: clamp(48px, 6vw, 88px); }
.proj__eyebrow {
  color: var(--cyan);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.proj__title {
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 14px;
  max-width: 22ch;
  text-wrap: balance;
}
.proj__lead { margin: 0; color: var(--p-text-2); font-size: 17px; max-width: 54ch; }

.proj__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.proj__card { display: grid; align-content: start; }
/* os três cards entram em sequência (reveal-io vem do main.js) */
.proj__card:nth-child(2) { transition-delay: .12s; }
.proj__card:nth-child(3) { transition-delay: .24s; }

.proj__art {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #0F3A7A 0%, #0B2A5C 55%, #001A40 100%);
}
.proj__art--2 { background: linear-gradient(180deg, #123E86, #0B2A5C 55%, #001A40); }
.proj__art--3 { background: linear-gradient(180deg, #0C3270, #082552 55%, #00122C); }
.proj__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.proj__dt { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 18, 44, .88) 100%); }
.proj__num {
  position: absolute;
  left: 20px; right: 20px; bottom: 18px;
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 13.5px;
}
.proj__num b {
  display: block;
  color: var(--white);
  font-size: clamp(30px, 2.6vw, 36px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.proj__name { margin: 20px 0 8px; font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; letter-spacing: -0.015em; }
.proj__desc { margin: 0; color: var(--p-text-2); font-size: 15px; }

/* ilustração: chapada, paleta da marca, pessoas em silhueta azul */
.proj__art .t1 { fill: #1F4C93; }
.proj__art .t2 { fill: #7FB3FA; }
.proj__art .t3 { fill: #E1E7F1; }
.proj__art .acc { fill: var(--cyan); }
.proj__art .bg { fill: rgba(255, 255, 255, .05); }
.proj__art .skin { fill: #7FB3FA; }
.proj__art .ground { fill: rgba(0, 0, 0, .25); }
.proj__art .dash { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.4; stroke-dasharray: 3 4; }
.proj__art .wave { fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linecap: round; }
.proj__art .line { fill: none; stroke: #E1E7F1; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) {
  .proj__cards { grid-template-columns: 1fr; gap: 32px; }
  .proj__card:nth-child(n) { transition-delay: 0s; }
  .proj__art { aspect-ratio: 4 / 4; }
}