.portfolio-intro {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: white;
  padding-block: clamp(36px, 4.6vw, 66px);
  text-align: center;
}
.portfolio-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/gutam-projetos-fundo.jpg") center / cover no-repeat;
  opacity: .19;
}
.portfolio-intro h1 { max-width: none; margin-bottom: 14px; }
.portfolio-intro p {
  max-width: 50ch;
  margin: 0 auto;
  color: #d7e3f3;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.6;
}
.portfolio-project {
  padding-block: clamp(32px, 4vw, 56px) clamp(42px, 6vw, 78px);
  border-bottom: 1px solid var(--line);
}
.portfolio-project-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .75fr);
  align-items: end;
  gap: 14px clamp(22px, 5vw, 72px);
  margin-bottom: clamp(22px, 3vw, 34px);
}
.portfolio-category { margin-bottom: 8px; color: #176044; font-size: .9rem; font-weight: 650; }
.portfolio-project-heading h2 { margin: 0; font-size: clamp(2.65rem, 6.2vw, 5.65rem); }
.portfolio-project-summary .section-lead { max-width: 47ch; margin-bottom: 14px; }
.portfolio-actions .primary { min-height: 46px; gap: 20px; border-radius: 7px; }
.portfolio-stage {
  position: relative;
  isolation: isolate;
  padding: clamp(14px, 3.8vw, 48px);
  border: 1px solid #c4d8cd;
  border-radius: 13px;
  background: #e1ede6;
}
.portfolio-stage::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(#17604416 1px, transparent 1px), linear-gradient(90deg, #17604416 1px, transparent 1px);
  background-position: center;
  background-size: 32px 32px;
  mask-image: linear-gradient(#000 30%, transparent);
  content: "";
}
.portfolio-devices {
  --device-frame: #10251f;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .235fr);
  gap: clamp(8px, 2.7vw, 35px);
  align-items: end;
  max-width: 950px;
  margin-inline: auto;
}
.portfolio-monitor {
  --stand: clamp(15px, 3.25vw, 35px);
  --foot: clamp(4px, .65vw, 8px);
  position: relative;
  margin-bottom: calc(var(--stand) + var(--foot));
  border: clamp(4px, .65vw, 9px) solid var(--device-frame);
  border-radius: 8px;
  background: var(--device-frame);
  box-shadow: 0 10px 24px #173e2d30;
}
.portfolio-monitor::before,
.portfolio-monitor::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--device-frame);
}
.portfolio-monitor::before {
  width: 11%;
  height: calc(var(--stand) + 1px);
}
.portfolio-monitor::after {
  top: calc(100% + var(--stand));
  width: 26%;
  height: var(--foot);
  border-radius: 4px 4px 2px 2px;
}
.portfolio-phone {
  overflow: hidden;
  border: clamp(4px, .65vw, 8px) solid var(--device-frame);
  border-radius: clamp(11px, 1.7vw, 22px);
  background: var(--device-frame);
  box-shadow: 0 10px 24px #173e2d30;
}
.portfolio-devices img { display: block; width: 100%; height: auto; }
.portfolio-monitor img { border-radius: 2px; }
.portfolio-phone img { border-radius: clamp(6px, 1vw, 14px); }
.portfolio-visual figcaption { margin-top: 10px; color: var(--muted); }
.portfolio-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px clamp(22px, 5vw, 72px);
  margin: clamp(26px, 4vw, 46px) 0 0;
}
.portfolio-scope div { border-top: 1px solid #a7bbb0; padding-top: 15px; }
.portfolio-scope dt { margin-bottom: 6px; color: #176044; font-size: 1.16rem; font-weight: 700; }
.portfolio-scope dd { max-width: 52ch; margin: 0; color: var(--muted); line-height: 1.6; }
@media (max-width: 760px) {
  .portfolio-intro::before { background-position: left center; }
  .portfolio-project-heading, .portfolio-scope { grid-template-columns: 1fr; }
  .portfolio-devices { grid-template-columns: minmax(0, 1fr) minmax(0, .26fr); }
}