/* ============================================================
   page-casos.css — índice de casos de éxito, con el Intiza design system.
   Quinta pantalla migrada; quedan las 24 páginas de detalle.

   Mismas reglas del sistema que el resto:

   · Fondo por defecto blanco + superficies celeste; el azul oscuro
     queda para el encabezado, las franjas de acento y el footer.
   · Sombras siempre tintadas en azul rgba(5,38,208,…), nunca negras.
   · Tipografía Archivo, títulos en peso 500 (medium) y sentence case.
   · Contenedores 12–24px de radio, hairline var(--border-soft).

   Los dos acentos de producto conviven acá, igual que en la home: cada
   caso está etiquetado como Cobranzas (azul) o Proveedores (verde).

   Todo está scopeado en .ds-page; el footer se re-tematiza con :has().
   ============================================================ */

/* ---------- shell de página ---------- */
body:has(.ds-page) { background: var(--bg); color: var(--fg-1); }

.ds-page {
  --acc-cob: var(--intiza-azul-claro);
  --acc-prov: var(--intiza-verde);
}
.ds-page .wrap { max-width: 1240px; margin: 0 auto; padding: 0 36px; }
/* la barra del menú es fija y de ancho completo (site.css): acá hay que
   soltarla del ancho y del padding que .ds-page .wrap impone al resto */
.ds-page .wrap.topbar { max-width: none; padding: 0; }
@media (max-width: 760px) { .ds-page .wrap { padding: 0 24px; } }

/* ============================================================
   ENCABEZADO DE PÁGINA — mismo degradé que el resto del sistema.
   Los 148px de arriba despejan la barra fija de 76px.
   ============================================================ */
.dsx-head .section { position: relative; padding: 148px 0 72px;
  background: linear-gradient(135deg, #0526D0 0%, #1735C5 52%, #067AFB 100%); }
.dsx-head .eyebrow { display: inline-flex; align-items: center; font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  padding: 7px 14px; border-radius: var(--radius-pill); margin: 0 0 24px; }
.dsx-head h1 { font-size: clamp(28px, 3.4vw, 44px); font-weight: var(--fw-medium);
  line-height: var(--lh-tight); letter-spacing: -.03em; color: #fff; margin: 0; text-wrap: balance; }
/* mismo resaltado que el hero de las páginas de producto */
.dsx-head h1 em { font-style: normal;
  background-image: linear-gradient(90deg, var(--intiza-celeste) 0%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 760px) { .dsx-head .section { padding: 120px 0 48px; } .dsx-head h1 { font-size: 32px; } }

/* ============================================================
   BARRA DE FILTROS — sticky debajo del menú.
   Se pega a 64px, que es el alto del menú ya en su estado sólido.
   OJO: nada en la cadena de .dsx-casos puede llevar overflow:hidden,
   porque eso anula el sticky.
   ============================================================ */
.dsx-casos { position: relative; background: var(--bg-soft); }
.dsx-casos .barra { position: sticky; top: 64px; z-index: 30;
  background: var(--surface-card); border-bottom: 1px solid var(--border-soft);
  transition: box-shadow var(--dur-base) var(--ease-out); }
/* la sombra aparece recién cuando está pegada: antes no hay nada debajo */
.dsx-casos .barra.pegada { box-shadow: 0 10px 24px -12px rgba(5,38,208,.22); }

.dsx-casos .filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px; padding: 16px 0; }
.dsx-casos .fgroup { display: flex; flex-direction: column; gap: 8px; }
.dsx-casos .fglabel { font-size: 11px; font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--fg-3); }
.dsx-casos .chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dsx-casos .chip { font-family: inherit; font-size: 13.5px; font-weight: var(--fw-medium); cursor: pointer;
  color: var(--fg-2); padding: 9px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-card);
  transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base); }
.dsx-casos .chip:hover { background: var(--celeste-40); color: var(--intiza-azul-oscuro); }
.dsx-casos .chip[aria-pressed="true"] { background: var(--intiza-azul-oscuro); color: #fff; border-color: transparent; }
.dsx-casos .chip.prod-cob[aria-pressed="true"] { background: var(--acc-cob); color: #fff; }
.dsx-casos .chip.prod-prov[aria-pressed="true"] { background: var(--acc-prov); color: #fff; }

.dsx-casos .fsel { position: relative; }
.dsx-casos .fsel select { appearance: none; -webkit-appearance: none; font-family: inherit; font-size: 14px;
  font-weight: var(--fw-medium); color: var(--fg-1); background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 40px 10px 16px; min-width: 188px; cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base); }
.dsx-casos .fsel select:hover { background: var(--celeste-40); border-color: var(--border-strong); }
.dsx-casos .fsel select:focus { outline: none; border-color: var(--intiza-azul-oscuro);
  box-shadow: 0 0 0 4px rgba(5,38,208,.14); }
.dsx-casos .fsel .car { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--fg-3); }
.dsx-casos .fsel .car svg { width: 16px; height: 16px; display: block; }
.dsx-casos .fcount { margin-left: auto; align-self: center; font-size: 13px; color: var(--fg-3); }

/* En móvil el alto de la barra manda: con las etiquetas puestas y cada control
   en su propia fila ocupaba 273px, un tercio de la pantalla, y pegada arriba
   dejaba de tener sentido. Se van las etiquetas —los controles se explican
   solos— y queda en dos filas: chips + contador, y los dos desplegables. */
@media (max-width: 760px) {
  .dsx-casos .barra { top: 58px; }
  .dsx-casos .filters { gap: 10px; padding: 12px 0; align-items: center; }
  .dsx-casos .fglabel { display: none; }
  .dsx-casos .fgroup[data-filter="prod"] { flex: 1 1 auto; }
  .dsx-casos .fgroup:not([data-filter]) { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .dsx-casos .fsel, .dsx-casos .fsel select { width: 100%; min-width: 0; }
  .dsx-casos .fsel select { padding: 9px 34px 9px 12px; font-size: 13.5px; }
  .dsx-casos .chip { padding: 8px 13px; font-size: 13px; }
  .dsx-casos .fcount { flex: 0 0 auto; margin-left: auto; font-size: 12px; }
}

/* ============================================================
   GRILLA + TARJETAS
   ============================================================ */
.dsx-casos .section { position: relative; padding: 48px 0 96px; background: var(--bg-soft); }
.dsx-casos .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.dsx-casos .case { position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.dsx-casos .case:hover { transform: translateY(-4px); border-color: var(--border); box-shadow: var(--shadow-3); }
.dsx-casos .case.hide { display: none; }
.dsx-casos .case a.cardlink { position: absolute; inset: 0; z-index: 6; }

.dsx-casos .cover { position: relative; }
/* el velo de la portada se aclara: sobre tarjeta blanca el de antes pesaba demasiado */
.dsx-casos .cover::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,18,51,0) 55%, rgba(10,18,51,.28)); }
.dsx-casos .ptag { position: absolute; top: 14px; left: 14px; z-index: 3; font-size: 11px;
  font-weight: var(--fw-medium); padding: 5px 12px; border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dsx-casos .ptag.cobranzas { background: var(--acc-cob); color: #fff; }
.dsx-casos .ptag.proveedores { background: var(--acc-prov); color: #fff; }

/* covers que no traen el círculo con el logo incrustado (coverLogo en casos.json) */
.dsx-casos .coverlogo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  height: 68%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.dsx-casos .coverlogo img { width: 100%; height: 100%; display: block; object-fit: contain; }

.dsx-casos .cbody { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 22px 24px; }
.dsx-casos .cbody h3 { font-size: 20px; font-weight: var(--fw-medium); color: var(--fg-1); margin: 0; letter-spacing: -.01em; }
.dsx-casos .cbody p { font-size: 14px; line-height: var(--lh-snug); color: var(--fg-2); margin: 10px 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dsx-casos .more { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
  font-weight: var(--fw-medium); color: var(--intiza-azul-oscuro); }
.dsx-casos .more svg { width: 15px; height: 15px; transition: transform var(--dur-base) var(--ease-out); }
.dsx-casos .case:hover .more svg { transform: translateX(4px); }

/* el primero de la lista va a lo ancho: le da jerarquía a una grilla de 24 */
.dsx-casos .case.feat { grid-column: 1 / -1; flex-direction: row; }
.dsx-casos .case.feat .cover { flex: 1 1 54%; }
.dsx-casos .case.feat .cbody { flex: 1 1 46%; justify-content: center; padding: 38px; }
.dsx-casos .case.feat h3 { font-size: 27px; }
.dsx-casos .case.feat p { font-size: 15.5px; }

.dsx-casos .empty { display: none; padding: 60px 0; text-align: center; color: var(--fg-3); font-size: 15px; }
.dsx-casos .empty.show { display: block; }

@media (max-width: 980px) {
  .dsx-casos .grid { grid-template-columns: repeat(2, 1fr); }
  .dsx-casos .case.feat { grid-column: 1 / -1; flex-direction: column; }
}
@media (max-width: 760px) { .dsx-casos .section { padding: 32px 0 64px; } }
@media (max-width: 640px) {
  .dsx-casos .grid { grid-template-columns: 1fr; }
  .dsx-casos .case.feat { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) { .dsx-casos .case { transition: none !important; } }

/* ============================================================
   FOOTER — se mantiene oscuro (el sistema lo prevé así), pero
   en el azul de marca y sin los acentos teal que no son del kit.
   ============================================================ */
body:has(.ds-page) .sitefooter { background: var(--fg-1); border-top: 0; margin-top: 0; }
body:has(.ds-page) .sitefooter::before { background: linear-gradient(90deg, transparent, var(--acc-cob), transparent); opacity: .55; }
body:has(.ds-page) .ft-col h4 { color: var(--intiza-celeste); font-weight: var(--fw-medium); }
body:has(.ds-page) .ft-cta { background: #fff; color: var(--intiza-azul-oscuro); font-weight: var(--fw-medium);
  box-shadow: 0 10px 26px rgba(5,38,208,.28); }
body:has(.ds-page) .ft-cta:hover { background: var(--intiza-celeste); transform: none; box-shadow: 0 14px 32px rgba(5,38,208,.34); }
body:has(.ds-page) .ft-socials a:hover { background: rgba(6,122,251,.22); }