/* CHAPA 011 — case técnico/comercial sem prints ruins */
.case-study {
  position: relative;
  padding-top: clamp(88px, 10vw, 142px);
  padding-bottom: clamp(88px, 10vw, 142px);
  isolation: isolate;
}

.case-study::before {
  content: "";
  position: absolute;
  inset: 5% max(-6vw, -72px) auto;
  height: 78%;
  z-index: -1;
  border-radius: 48px;
  background:
    radial-gradient(circle at 86% 9%, rgba(185, 129, 199, .18), transparent 23rem),
    radial-gradient(circle at 12% 54%, rgba(167, 189, 59, .11), transparent 20rem),
    linear-gradient(180deg, rgba(255,253,247,.36), rgba(255,253,247,0));
  pointer-events: none;
}

.case-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 58px);
  align-items: stretch;
  margin-bottom: clamp(42px, 7vw, 86px);
}

.case-copy h2 {
  max-width: 980px;
  margin: 0 0 18px;
  color: var(--premium-ink, #16071e);
  font-family: var(--font-display, "Barlow Condensed", sans-serif);
  font-size: clamp(3rem, 5.35vw, 5.7rem);
  line-height: .88;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.case-copy h2 span { color: var(--premium-plum, #48205a); }

.case-copy p:not(.section-kicker) {
  max-width: 820px;
  color: rgba(22, 7, 30, .70);
  font-size: clamp(1rem, 1.13vw, 1.18rem);
  line-height: 1.75;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.case-tags span,
.case-quality-list span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(22, 7, 30, .12);
  border-radius: 999px;
  background: rgba(255, 253, 247, .64);
  color: rgba(22, 7, 30, .74);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.case-visual-system {
  position: relative;
  display: grid;
  gap: 16px;
}

.case-blueprint {
  position: relative;
  overflow: hidden;
  min-height: 454px;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(22, 7, 30, .12);
  border-radius: 28px;
  background:
    linear-gradient(rgba(22, 7, 30, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 7, 30, .045) 1px, transparent 1px),
    radial-gradient(circle at 78% 18%, rgba(185, 129, 199, .20), transparent 14rem),
    linear-gradient(180deg, rgba(255, 253, 247, .96), rgba(247, 231, 207, .86));
  background-size: 26px 26px, 26px 26px, auto, auto;
  box-shadow: 0 28px 68px rgba(22, 7, 30, .14);
}

.case-blueprint::after {
  content: "layout validado";
  position: absolute;
  right: 22px;
  top: 20px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #16071e;
  color: #fff4e4;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.case-wireframe {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 18px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255, 253, 247, .82);
  box-shadow: inset 0 0 0 1px rgba(22, 7, 30, .08), 0 18px 42px rgba(22, 7, 30, .09);
}

.case-wireframe-main {
  min-height: 190px;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(145deg, #24102f, #14071b);
  color: #fff4e4;
}

.case-wireframe-main small,
.case-wireframe-panel small,
.case-quality-card small {
  display: block;
  margin-bottom: 10px;
  color: #b981c7;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.case-wireframe-main strong {
  display: block;
  max-width: 360px;
  font-family: var(--font-display, "Barlow Condensed", sans-serif);
  font-size: clamp(2.4rem, 3.8vw, 4.2rem);
  line-height: .85;
  text-transform: uppercase;
}

.case-wireframe-main p {
  max-width: 410px;
  color: rgba(255, 244, 228, .72);
  line-height: 1.6;
}

.case-wireframe-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 244, 228, .90);
}

.case-wireframe-panel span {
  height: 14px;
  border-radius: 999px;
  background: rgba(22, 7, 30, .14);
}

.case-flow-map {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.case-flow-map span {
  min-height: 82px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 253, 247, .72);
  color: rgba(22, 7, 30, .72);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(22, 7, 30, .08);
}

.case-quality-card {
  padding: 20px;
  border: 1px solid rgba(22, 7, 30, .10);
  border-radius: 20px;
  background: rgba(255, 253, 247, .82);
  box-shadow: 0 16px 36px rgba(22, 7, 30, .08);
}

.case-quality-card strong {
  display: block;
  color: #16071e;
  font-family: var(--font-display, "Barlow Condensed", sans-serif);
  font-size: 2rem;
  line-height: .95;
  text-transform: uppercase;
}

.case-quality-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.case-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: clamp(34px, 5vw, 62px);
}

.case-step {
  position: relative;
  min-height: 236px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(22, 7, 30, .12);
  border-radius: 20px;
  background: rgba(255, 253, 247, .70);
  box-shadow: 0 14px 32px rgba(22, 7, 30, .055);
}

.case-step::after {
  content: "";
  position: absolute;
  right: -32px;
  bottom: -38px;
  width: 120px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(185, 129, 199, .14);
}

.case-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 34px;
  border-radius: 999px;
  background: #16071e;
  color: #fff4e4;
  font-family: var(--font-display, "Barlow Condensed", sans-serif);
  font-weight: 800;
}

.case-step h3 {
  margin: 0 0 12px;
  color: #16071e;
  font-family: var(--font-display, "Barlow Condensed", sans-serif);
  font-size: 1.72rem;
  line-height: .95;
  text-transform: uppercase;
}

.case-step p {
  margin: 0;
  color: rgba(22, 7, 30, .64);
  font-size: .96rem;
  line-height: 1.6;
}

.case-breakdown {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 18px;
  align-items: stretch;
}

.case-panel {
  padding: clamp(26px, 4vw, 46px);
  border-radius: 22px;
  background: linear-gradient(145deg, #24102f, #14071b);
  color: #fff4e4;
  box-shadow: 0 28px 70px rgba(22, 7, 30, .18);
}

.case-panel h3 {
  margin: 0 0 16px;
  font-family: var(--font-display, "Barlow Condensed", sans-serif);
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  line-height: .9;
  text-transform: uppercase;
}

.case-panel p {
  max-width: 520px;
  color: rgba(255, 244, 228, .74);
  line-height: 1.7;
}

.case-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.case-metric {
  padding: 22px;
  border: 1px solid rgba(22, 7, 30, .11);
  border-radius: 18px;
  background: rgba(255, 253, 247, .72);
}

.case-metric strong {
  display: block;
  margin-bottom: 8px;
  color: #16071e;
  font-family: var(--font-display, "Barlow Condensed", sans-serif);
  font-size: 2.05rem;
  line-height: .9;
  text-transform: uppercase;
}

.case-metric p {
  margin: 0;
  color: rgba(22, 7, 30, .64);
  line-height: 1.55;
}

@media (max-width: 1040px) {
  .case-hero,
  .case-breakdown { grid-template-columns: 1fr; }
  .case-process { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .case-study { padding-top: 78px; }
  .case-copy h2 { font-size: clamp(2.72rem, 14vw, 4.1rem); }
  .case-blueprint { min-height: auto; padding: 14px; }
  .case-wireframe { grid-template-columns: 1fr; padding: 14px; }
  .case-wireframe-main { min-height: 168px; padding: 18px; }
  .case-wireframe-panel { min-height: 150px; }
  .case-flow-map { grid-template-columns: repeat(2, 1fr); }
  .case-flow-map span { min-height: 60px; }
  .case-process,
  .case-metrics { grid-template-columns: 1fr; }
  .case-step { min-height: auto; }
  .case-quality-list span,
  .case-tags span { flex: 1 1 100%; justify-content: center; }
}