/* ==========================================================================
   Casos de éxito — estilos propios de página (.cases-)  ·  CONTRACT-V2 §6.5
   Grid filtrable (data-casos-filter) + banda CTA a mitad + cierre precios.
   ========================================================================== */

/* ---- Hero --------------------------------------------------------------- */
.cases-hero {
  position: relative;
  padding-top: clamp(48px, 7vw, 96px);
  overflow-x: clip;
}
.cases-hero__aura {
  position: absolute;
  inset: -22% -12% auto -12%;
  height: 75%;
  background: radial-gradient(52% 62% at 50% 22%, rgba(46, 232, 105, .14), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}
.cases-hero__inner { position: relative; z-index: 1; }
.cases-hero__title { max-width: 22ch; }
.cases-hero .lead { max-width: 62ch; }
.cases-hero__pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cases-hero__pills .pill .dts-ico { color: var(--brand); }

/* ---- Barra de filtros ------------------------------------------------------ */
.cases-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: clamp(26px, 4vw, 44px);
}
.cases-filter__btn {
  padding: .55em 1.2em;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: color var(--t) var(--ease), background var(--t) var(--ease),
              border-color var(--t) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t) var(--ease);
}
.cases-filter__btn:hover { border-color: var(--line-brand); color: var(--ink); transform: translateY(-1px); }
.cases-filter__btn.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
  box-shadow: var(--glow-sm);
}

/* ---- Grid de casos ----------------------------------------------------------- */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cases-card__head { display: grid; gap: 3px; min-width: 0; }

/* ---- Banda CTA a mitad --------------------------------------------------------- */
.cases-band {
  margin-block: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.35fr auto;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
.cases-band__copy { display: grid; gap: 12px; justify-items: start; }
.cases-band__copy h2 { max-width: 22ch; }
.cases-band__copy p { font-size: var(--fs-sm); max-width: 52ch; }

/* ---- Nota de confidencialidad ---------------------------------------------------- */
.cases-note {
  margin-top: clamp(20px, 3vw, 32px);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-mute);
}

/* ---- Cierre → precios --------------------------------------------------------------- */
.cases-close .lead { max-width: 58ch; }
.cases-close__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .cases-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .cases-band { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cases-grid { grid-template-columns: 1fr; }
  .cases-filter { justify-content: flex-start; }
  .cases-hero__pills .pill { font-size: .72rem; }
}