@import url("/artigos/performance-e-um-sistema/article.css");

.hero h1 { max-width: 1080px; font-size: clamp(54px, 6.7vw, 96px); }
.hero::before {
  background: linear-gradient(90deg, rgba(4,8,13,.99) 0%, rgba(4,8,13,.92) 38%, rgba(4,8,13,.3) 69%, rgba(4,8,13,.08) 100%), linear-gradient(0deg, rgba(4,8,13,.99) 0%, rgba(4,8,13,.34) 48%, transparent 78%);
}
.hero-media { object-position: center; }
.visual-panel { display: block; padding: 9px; }
.visual-panel img { width: 100%; height: auto; }
.performance-questions {
  counter-reset: question;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 36px 0 52px !important;
  padding: 1px !important;
  list-style: none;
  background: rgba(27,32,39,.16);
}
.performance-questions li {
  counter-increment: question;
  position: relative;
  min-height: 168px;
  margin: 0;
  padding: 27px 25px 24px 68px;
  background: #fbf2e4;
}
.performance-questions li::before {
  content: counter(question, decimal-leading-zero);
  position: absolute;
  left: 23px;
  top: 27px;
  color: #916a2f;
  font: 500 10px "JetBrains Mono", monospace;
  letter-spacing: .08em;
}
.performance-questions strong {
  display: block;
  margin-bottom: 9px;
  color: #292229;
  font: 600 25px/1.12 "Cormorant Garamond", serif;
}
.performance-questions span { display: block; color: #564e46; font-size: 13px; line-height: 1.68; }
.critical-note {
  margin: 36px 0 28px;
  padding: 28px 30px;
  background: linear-gradient(140deg, rgba(255,255,255,.44), transparent), #eee2cf;
  border-left: 3px solid #aa813e;
}
.critical-note .mono { display: block; margin-bottom: 11px; color: #846633; font-size: 8px; }
.critical-note p { margin: 0; color: #4d443a; font-size: 15px; line-height: 1.72; }

@media (max-width: 820px) {
  .hero h1 { font-size: clamp(46px, 11vw, 68px); }
  .hero-media { object-position: center; }
  .performance-questions { grid-template-columns: 1fr; }
  .performance-questions li { min-height: 0; }
}

@media (max-width: 520px) {
  .hero h1 { font-size: 45px; }
  .visual-panel { width: calc(100% + 16px); margin-left: -8px; padding: 6px; }
  .performance-questions li { padding: 23px 19px 22px 57px; }
  .performance-questions li::before { left: 19px; top: 24px; }
  .critical-note { padding: 24px 22px; }
}