/* ==================================================================
   CASO DE ESTUDIO — Equinacentro
   Página de evidencia: los datos mandan. Cifras grandes, termografías
   originales sin recodificar y el vídeo de la sesión. Sin fondos a
   sangre: el ruido visual le quitaría seriedad a la medición.
   ================================================================== */

.case-hero { padding-block: clamp(8rem, 18vw, 12rem) clamp(3rem, 7vw, 5rem); }

.case-hero__title { font-size: var(--s-3); margin-top: 1.25rem; }
.case-hero__title .hl,
.sec__title .hl { color: var(--ice); }

.case-hero .body-lg { margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; max-width: 46ch; }

.case-facts {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1.25rem 2rem;
}

.case-facts b {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--s--1);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dimmer);
  margin-bottom: 0.35rem;
}

.case-facts span { color: var(--paper); }

/* ---------- cifras ---------- */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  border-top: 1px solid var(--hair);
}

.kpi { padding: clamp(1.5rem, 4vw, 2.5rem) clamp(0rem, 2vw, 2rem) clamp(1.5rem, 4vw, 2.5rem) 0; border-bottom: 1px solid var(--hair); }

.kpi__v {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: var(--s-2);
  line-height: 1;
  color: var(--paper);
}

.kpi__v small { font-size: 0.5em; font-weight: 600; color: var(--dim); margin-left: 0.15em; }
.kpi--hot .kpi__v { color: var(--ember); }
.kpi--cold .kpi__v { color: var(--ice); }
.kpi p { margin: 0.75rem 0 0; color: var(--dim); max-width: 30ch; }

.kpis + .body { margin-top: clamp(2rem, 5vw, 3rem); }

/* ---------- termografías ---------- */

.thermos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.thermo-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--hair);
  background: var(--ink-2);
}

.thermo-card figcaption { padding-top: 1rem; display: grid; gap: 0.3rem; }

.thermo-card__k {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--s--1);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.thermo-card__k.is-after { color: var(--ice); }
.thermo-card__t { color: var(--paper); }
.thermo-card__d { color: var(--dim); font-size: var(--s--1); }

.thermos-note { margin-top: clamp(1.5rem, 4vw, 2.5rem); color: var(--dimmer); font-size: var(--s--1); max-width: 70ch; }

/* ---------- vídeo ---------- */

.clip {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.clip video {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background: var(--ink-2);
  border: 1px solid var(--hair);
}

.clip .body + .body { margin-top: 1rem; }

@media (max-width: 720px) {
  .clip { grid-template-columns: minmax(0, 1fr); }
  .clip video { max-width: 22rem; }
}

/* ---------- método ---------- */

.method {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 0 clamp(2rem, 4vw, 3rem);
}

.method li { padding: 1.25rem 0; border-top: 1px solid var(--hair); color: var(--dim); }
.method b { display: block; color: var(--paper); font-weight: 500; margin-bottom: 0.35rem; }