/* Blocos de aplicação: HTML estático, sem dependência de JavaScript. */
.problem-cluster { padding: 52px 32px; background: #0e1413; color: #f5f7f6; }
.problem-wrap { max-width: 1184px; margin: 0 auto; }
.problem-cluster, .problem-cluster [id] { scroll-margin-top: 110px; }
.problem-cluster h2, .problem-links h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.2; letter-spacing: -.035em; margin: 0 0 16px; }
.problem-intro { color: #c1ccc8; max-width: 76ch; line-height: 1.75; margin-bottom: 30px; }
.problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.problem-card { min-width: 0; padding: 24px 0 0; border-top: 2px solid #5bbfb5; }
.problem-card:nth-child(2) { border-color: #c8b991; }
.problem-card:nth-child(3) { border-color: #a9bce4; }
.problem-card:nth-child(4) { border-color: #a9c6ac; }
.problem-card h3 { color: #fff; font-size: 21px; line-height: 1.35; margin: 0 0 16px; }
.problem-card p, .problem-links p { color: #c1ccc8; font-size: 15px; line-height: 1.75; margin: 0 0 16px; }
.problem-card strong { color: #f5f7f6; }
.problem-cluster a, .problem-links a, .problem-answer a, .post-content .problem-section a { color: #8ce1d6; text-decoration: underline; text-underline-offset: .22em; overflow-wrap: anywhere; }
.problem-cluster a:focus-visible, .problem-links a:focus-visible, .problem-answer a:focus-visible, .problem-section a:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.problem-card .problem-case { padding-left: 16px; border-left: 2px solid #52635d; color: #d7dfdc; }
.problem-card-links { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.problem-card a, .problem-links a { display: inline-block; padding: 6px 0; line-height: 1.6; }
.problem-blog { background: #101412; }
.problem-blog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.problem-card ul, .problem-links ul { list-style: none; padding: 0; margin: 0; }
.problem-card li + li { margin-top: 5px; }
.problem-faq { background: #0a0a0a; }
.problem-faq-list { max-width: 880px; }
.problem-faq .case-faq-item { border: 0; border-bottom: 1px solid #3b4944; padding: 0; background: transparent; }
.problem-faq summary { padding: 20px 4px; cursor: pointer; color: #fff; font-weight: 600; font-size: 17px; line-height: 1.5; }
.problem-faq details p { padding: 0 4px 22px; margin: 0; color: #c1ccc8; line-height: 1.8; }
.problem-faq summary:focus-visible { outline: 2px solid #8ce1d6; outline-offset: 3px; }
.post-content .problem-answer { padding: 24px; margin-bottom: 30px; background: #101a17; border-left: 3px solid #5bbfb5; }
.post-content .problem-answer > p { color: #e0e8e4; }
.post-content .problem-answer .problem-revision, .commercial-material .problem-revision { color: #b7c7c0; font-size: 13px; line-height: 1.6; margin: 0 0 14px; }
.problem-answer nav ul { margin: 16px 0 0; padding-left: 20px; }
.problem-answer nav li { margin: 4px 0; }
.problem-section, .problem-card, .problem-faq, .problem-links { scroll-margin-top: 110px; }
.post-content .problem-section { padding-top: 12px; }
.problem-table { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 24px 0; }
.post-content .problem-table th, .post-content .problem-table td { border: 1px solid #3c4943; padding: 12px; text-align: left; vertical-align: top; overflow-wrap: anywhere; font-size: 15px; line-height: 1.65; }
.post-content .problem-table th { color: #fff; background: #16201c; }
.post-content .problem-table td { color: #d2ddd6; }
.problem-links { padding: 36px 0; margin: 24px 0; border-top: 1px solid #3b4944; }
.problem-links h2 { font-size: clamp(24px, 3vw, 32px); }
.problem-links ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.problem-links p { max-width: 78ch; }
@media(max-width:1000px) {
  .problem-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .problem-blog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media(max-width:640px) {
  .problem-cluster { padding: 36px 20px; }
  .problem-grid, .problem-blog-grid, .problem-links ul { grid-template-columns: minmax(0,1fr); }
  .problem-grid { gap: 24px; }
  .post-content .problem-answer { padding: 20px 16px; }
  .post-content .problem-table th, .post-content .problem-table td { padding: 8px; font-size: 13px; }
}

/* Contraste editorial: hierarquia clara, sem depender de cinza sobre preto. */
.problem-cluster, .problem-blog { background:#edf4f0; color:#172b23; }
.problem-cluster h2, .problem-card h3, .problem-card strong { color:#142b20; }
.problem-intro, .problem-card p, .problem-card .problem-case { color:#304c3e; }
.problem-card { background:#fff; border:1px solid #c7d9cf; border-top:3px solid #087463; border-radius:12px; padding:22px; }
.problem-card:nth-child(2) { border-top-color:#917528; }
.problem-card:nth-child(3) { border-top-color:#476e96; }
.problem-card:nth-child(4) { border-top-color:#587a4e; }
.problem-card .problem-case { border-left-color:#93b3a3; }
.problem-cluster a, .post-content .problem-section a { color:#075f51; }
.problem-cluster a:focus-visible, .problem-section a:focus-visible { outline-color:#075f51; }
.problem-faq { background:#fff; }
.problem-faq .case-faq-item { border-bottom-color:#b6cabe; }
.problem-faq summary { color:#142b20; }
.problem-faq details p { color:#304c3e; }
.post-content .problem-answer { background:#e1f0e7; border-color:#087463; }
.post-content .problem-answer > p, .post-content .problem-answer .problem-revision { color:#264638; }
.post-content .problem-answer a { color:#075f51; }
.post-content .problem-table th { background:#d7e9df; color:#142b20; }
.post-content .problem-table td { background:#fff; color:#293f34; }
.post-content .problem-table th, .post-content .problem-table td { border-color:#9bb9a8; }