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

.hero h1 { max-width: 980px; font-size: clamp(58px, 7.2vw, 104px); }
.hero::before {
  background: linear-gradient(90deg, rgba(4,8,13,.99) 0%, rgba(4,8,13,.9) 40%, rgba(4,8,13,.22) 72%, rgba(4,8,13,.1) 100%), linear-gradient(0deg, rgba(4,8,13,.99) 0%, rgba(4,8,13,.36) 48%, transparent 78%);
}
.hero-media { object-position: center; }
.visual-panel { display: block; padding: 9px; }
.visual-panel img { width: 100%; height: auto; }
.adaptation-steps {
  counter-reset: adaptation;
  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);
}
.adaptation-steps li {
  counter-increment: adaptation;
  position: relative;
  min-height: 168px;
  margin: 0;
  padding: 27px 25px 24px 68px;
  background: #fbf2e4;
}
.adaptation-steps li::before {
  content: counter(adaptation, decimal-leading-zero);
  position: absolute;
  left: 23px;
  top: 27px;
  color: #916a2f;
  font: 500 10px "JetBrains Mono", monospace;
  letter-spacing: .08em;
}
.adaptation-steps strong {
  display: block;
  margin-bottom: 9px;
  color: #292229;
  font: 600 25px/1.12 "Cormorant Garamond", serif;
}
.adaptation-steps 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(48px, 12vw, 72px); }
  .hero-media { object-position: 55% center; }
  .adaptation-steps { grid-template-columns: 1fr; }
  .adaptation-steps li { min-height: 0; }
}

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