/* ============================================================
   OPLENSBI — Casos de Éxito
   Hoja de estilos exclusiva de /casos-exito/. Reutiliza los tokens
   de style.css (colores, tipografía, espaciado) — no redefine
   valores del Design System 1.2.

   Misma excepción documentada que /diagnostico/, /dashboard/,
   /metodologia/ y /contacto/: esquina recta en botones y max-width de
   1360px del contenedor — página del rediseño de 6 páginas, ver
   docs/rediseno/decisiones-pendientes.md punto 1. Los nombres de clase
   usan prefijo cx- y no se comparten con diagnostico.css/dashboard.css/
   metodologia.css/contacto.css a propósito.
   ============================================================ */

.pg-casos {
  --cx-section-y: var(--section-y);
}

.pg-casos .container {
  max-width: 1360px;
}

@media (max-width: 900px) {
  .pg-casos {
    --cx-section-y: var(--section-y-mobile);
  }
}

/* ============================================================
   TITULARES Y COPY EDITORIAL — reutilizados entre secciones
   ============================================================ */
.cx-section-title {
  font-size: var(--section-title-size);
  line-height: 1.04;
  letter-spacing: -0.045em;
  margin: 0;
  max-width: 900px;
  font-weight: var(--weight-semibold);
  color: var(--color-grafito);
}

.cx-section-copy {
  font-size: var(--text-lg);
  color: var(--color-texto-sec);
  max-width: 650px;
  margin: 0;
}

.pg-casos .eyebrow {
  margin: 0 0 1rem;
}

.cx-tech-label {
  font: var(--weight-semibold) var(--text-xs) var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--color-texto-sec);
  margin: 0;
}

.cx-split-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.75fr);
  gap: 4.5rem; /* 72px */
  align-items: end;
}

@media (max-width: 900px) {
  .cx-split-head {
    grid-template-columns: 1fr;
    gap: 1.875rem;
  }
}

.cx-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-turquesa);
  border: 1px solid var(--color-turquesa);
  color: var(--color-blanco);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: 0.8125rem 1.125rem; /* 13px 18px */
}

.cx-btn-primary:hover,
.cx-btn-primary:focus-visible {
  background-color: var(--color-turquesa-hover);
  border-color: var(--color-turquesa-hover);
}

.cx-text-link {
  font-size: var(--text-sm);
  color: var(--color-grafito);
  text-decoration-line: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.cx-text-link:hover,
.cx-text-link:focus-visible {
  color: var(--color-turquesa);
}

/* ============================================================
   1. HERO
   ============================================================ */
.cx-hero {
  padding: var(--cx-section-y) 0 calc(var(--cx-section-y) * 0.85);
  border-bottom: 1px solid var(--color-borde);
}

.cx-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 5.625rem; /* 90px */
  align-items: end;
}

.cx-hero__title {
  margin: 0;
  font-size: var(--hero-title-size);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: var(--weight-semibold);
  color: var(--color-grafito);
}

.cx-hero__lead {
  margin: 1.875rem 0 0;
  max-width: 47.5rem;
  font-size: var(--text-lg);
  line-height: 1.42;
  color: var(--color-grafito);
}

/* Subtítulo editorial bajo el H1 — v1.2: el titular anterior de la
   página pasa a cumplir este rol. */
.cx-hero__subtitulo {
  margin: 0.875rem 0 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-texto-sec);
}

.cx-hero__nota {
  margin-top: 1.75rem;
  border-left: 2px solid var(--color-turquesa);
  padding: 0.8125rem 0 0.8125rem 1rem;
  font: var(--weight-medium) var(--text-xs) var(--font-mono);
  color: var(--color-texto-sec);
}

.cx-hero__aside {
  border-top: 1px solid var(--color-grafito);
  padding-top: 1.125rem;
}

.cx-hero__aside p:not(.cx-tech-label) {
  font-size: var(--text-sm);
  color: var(--color-texto-sec);
  margin: 1.125rem 0 0;
}

.cx-hero__aside strong {
  color: var(--color-grafito);
}

@media (max-width: 900px) {
  .cx-hero__grid {
    grid-template-columns: 1fr;
    gap: 1.875rem;
  }
}

/* ============================================================
   3. ANATOMÍA DE CADA CASO
   ============================================================ */
.cx-anatomia {
  padding: var(--cx-section-y) 0;
  background-color: var(--color-fondo-sutil);
}

.cx-anatomia__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 5.5rem; /* 88px */
}

.cx-anatomia__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-grafito);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cx-anatomia__list li {
  padding: 1.6875rem 1.5rem 1.6875rem 0;
  border-bottom: 1px solid var(--color-borde);
}

.cx-anatomia__list li:nth-child(even) {
  padding-left: 1.5rem;
  border-left: 1px solid var(--color-borde);
}

.cx-anatomia__list h3 {
  font-size: var(--text-lg);
  margin: 0.5625rem 0 0;
}

.cx-anatomia__list p {
  font-size: var(--text-sm);
  color: var(--color-texto-sec);
  margin: 0.625rem 0 0;
}

/* ============================================================
   2. ÍNDICE STICKY + BIBLIOTECA DE CASOS
   ============================================================ */
.cx-index {
  position: sticky;
  top: 0;
  z-index: 250;
  padding: 1.25rem 0;
  background-color: rgba(247, 249, 249, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-borde);
}

.cx-index__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.cx-index__meta {
  display: flex;
  align-items: center;
  gap: 1.125rem;
}

.cx-index__count {
  font: var(--weight-semibold) var(--text-xs) var(--font-mono);
  color: var(--color-turquesa);
}

.cx-index__filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cx-index__filters button {
  border: 1px solid var(--color-borde);
  background-color: var(--color-fondo);
  padding: 0.5625rem 0.8125rem;
  font: var(--weight-semibold) var(--text-xs) var(--font-mono);
  color: var(--color-texto-sec);
}

.cx-index__filters button[aria-pressed="true"] {
  border-color: var(--color-turquesa);
  color: var(--color-turquesa);
  box-shadow: inset 0 -2px var(--color-turquesa);
}

.cx-library {
  padding: var(--cx-section-y) 0;
}

.cx-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 3.625rem;
}

.cx-case-card {
  background-color: var(--color-fondo);
  border: 1px solid var(--color-borde);
  min-height: 26.875rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.cx-case-card[hidden] {
  display: none;
}

.cx-case-card:hover {
  transform: translateY(-3px);
  border-color: #bfcac8;
}

.cx-case-card.is-filtered-in {
  animation: cxCaseIn 0.28s ease both;
}

@keyframes cxCaseIn {
  from { opacity: 0.2; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.cx-case-card__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.375rem 1.625rem;
  border-bottom: 1px solid var(--color-borde);
}

.cx-case-card__phase {
  color: var(--color-turquesa);
}

.cx-case-card__sector {
  font: var(--weight-semibold) 0.5625rem var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--color-texto-ter);
}

.cx-case-card__body {
  padding: 1.875rem 1.625rem 1.625rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cx-case-card__body h3 {
  font-size: clamp(1.6875rem, 2.5vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin: 0;
}

.cx-case-card__summary {
  font-size: var(--text-sm);
  color: var(--color-texto-sec);
  line-height: 1.7;
  margin: 1.125rem 0 0;
}

.cx-case-path {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.875rem;
  border-top: 1px solid var(--color-borde);
}

.cx-case-path div {
  padding: 1rem 0.625rem 0 0;
}

.cx-case-path span {
  display: block;
  font: var(--weight-semibold) 0.5rem var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--color-texto-sec);
}

.cx-case-path strong {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
}

.cx-mini-metrics,
.cx-modal-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.75rem;
  border: 1px solid var(--color-borde);
}

.cx-mini-metrics div,
.cx-modal-metrics div {
  padding: 0.9375rem 0.75rem;
  border-right: 1px solid var(--color-borde);
}

.cx-mini-metrics div:last-child,
.cx-modal-metrics div:last-child {
  border-right: 0;
}

.cx-mini-metrics span,
.cx-modal-metrics span {
  display: block;
  font: var(--weight-semibold) 0.5rem var(--font-mono);
  letter-spacing: 0.07em;
  color: var(--color-texto-sec);
}

.cx-mini-metrics strong,
.cx-modal-metrics strong {
  display: block;
  margin-top: 0.4375rem;
  font: var(--weight-medium) 0.9375rem var(--font-mono);
}

.cx-modal-metrics strong {
  font-size: 1.25rem;
}

.cx-case-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  margin-top: auto;
  padding-top: 1.75rem;
}

.cx-view-case {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--color-grafito);
  text-decoration: underline;
  text-underline-offset: 5px;
  font-size: var(--text-sm);
}

.cx-view-case:hover,
.cx-view-case:focus-visible {
  color: var(--color-turquesa);
}

.cx-demo-chip {
  font: var(--weight-semibold) 0.5rem var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--color-texto-ter);
}

/* Caso real vs. ejemplo ilustrativo — estrategia-sitio-final-v1.2,
   Parte 11: nunca deben verse con el mismo peso. */
.cx-real-chip {
  font: var(--weight-semibold) 0.6875rem var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--color-turquesa);
  border: 1px solid var(--color-turquesa);
  padding: 0.1875rem 0.5rem;
}

.cx-case-card--real {
  border-color: var(--color-turquesa);
}

.cx-modal__topline .cx-real-chip,
.cx-modal__topline .cx-demo-chip {
  margin-left: auto;
}

@media (max-width: 1000px) {
  .cx-case-grid {
    grid-template-columns: 1fr;
  }

  .cx-index {
    top: 0;
  }
}

@media (max-width: 620px) {
  .cx-case-path,
  .cx-mini-metrics,
  .cx-modal-metrics {
    grid-template-columns: 1fr;
  }

  .cx-mini-metrics div,
  .cx-modal-metrics div {
    border-right: 0;
    border-bottom: 1px solid var(--color-borde);
  }

  .cx-mini-metrics div:last-child,
  .cx-modal-metrics div:last-child {
    border-bottom: 0;
  }
}

/* ============================================================
   MODAL DE DETALLE
   ============================================================ */
.cx-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background-color: rgba(18, 26, 26, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.875rem;
}

.cx-modal.is-open {
  display: flex;
}

.cx-modal__panel {
  width: min(73.75rem, 100%);
  max-height: 92vh;
  overflow: auto;
  background-color: var(--color-fondo);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
}

.cx-modal__close {
  position: sticky;
  top: 0.875rem;
  float: right;
  margin: 0.875rem 0.875rem -3.5rem 0;
  width: 2.625rem;
  height: 2.625rem;
  border: 0;
  background-color: var(--color-grafito);
  color: var(--color-blanco);
  font-size: 1.375rem;
  z-index: 10;
}

.cx-modal__hero {
  padding: 2.75rem 2.75rem 2.375rem;
  border-bottom: 1px solid var(--color-borde);
}

.cx-modal__topline {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  font: var(--weight-semibold) var(--text-xs) var(--font-mono);
  letter-spacing: 0.09em;
  color: var(--color-texto-sec);
}

.cx-modal__topline strong {
  color: var(--color-turquesa);
}

.cx-modal__title {
  font-size: clamp(2.375rem, 4vw, 3.875rem);
  line-height: 1.04;
  letter-spacing: -0.05em;
  margin: 1.625rem 0 0;
  max-width: 56.25rem;
}

.cx-modal__lead {
  font-size: var(--text-base);
  color: var(--color-texto-sec);
  line-height: 1.7;
  max-width: 48.75rem;
  margin: 1.25rem 0 0;
}

.cx-modal__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cx-modal__col {
  padding: 2.375rem 2.75rem;
}

.cx-modal__col + .cx-modal__col {
  border-left: 1px solid var(--color-borde);
}

.cx-detail-block {
  border-top: 1px solid var(--color-grafito);
  padding-top: 1rem;
}

.cx-detail-block + .cx-detail-block {
  margin-top: 2.125rem;
}

.cx-detail-label {
  font: var(--weight-semibold) 0.5625rem var(--font-mono);
  letter-spacing: 0.09em;
  color: var(--color-texto-sec);
}

.cx-detail-block h4 {
  font-size: var(--text-xl);
  margin: 0.625rem 0 0;
}

.cx-detail-block p {
  font-size: var(--text-sm);
  color: var(--color-texto-sec);
  line-height: 1.7;
  margin: 0.6875rem 0 0;
}

.cx-detail-block p strong {
  color: var(--color-grafito);
}

.cx-detail-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.cx-detail-list li {
  padding: 0.5625rem 0;
  border-top: 1px solid var(--color-borde);
  font-size: var(--text-sm);
}

.cx-modal__note {
  padding: 1.25rem 2.75rem;
  border-top: 1px solid var(--color-borde);
  background-color: var(--color-fondo-sutil);
  font: var(--weight-medium) var(--text-xs) var(--font-mono);
  color: var(--color-texto-sec);
}

@media (max-width: 1000px) {
  .cx-modal__body {
    grid-template-columns: 1fr;
  }

  .cx-modal__col + .cx-modal__col {
    border-left: 0;
    border-top: 1px solid var(--color-borde);
  }
}

@media (max-width: 620px) {
  .cx-modal {
    padding: 0;
  }

  .cx-modal__panel {
    max-height: 100vh;
    height: 100%;
  }

  .cx-modal__hero,
  .cx-modal__col,
  .cx-modal__note {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-case-card.is-filtered-in {
    animation: none;
  }
}

@media (max-width: 900px) {
  .cx-anatomia__grid {
    grid-template-columns: 1fr;
    gap: 1.875rem;
  }

  .cx-anatomia__list {
    grid-template-columns: 1fr;
  }

  .cx-anatomia__list li:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }
}

/* ============================================================
   4. CIERRE
   Fondo oscuro invertido — misma excepción documentada en
   /diagnostico/ (docs/rediseno/decisiones-pendientes.md punto 3):
   Grafito como fondo de sección completo, con los mismos grises
   "sobre oscuro" ya usados en diagnostico.css (no son tokens
   oficiales del Design System, ver esa nota para el detalle).
   ============================================================ */
.cx-cierre {
  background-color: var(--color-grafito);
  color: var(--color-blanco);
  padding: 6.375rem 0 3.625rem; /* 102px / 58px */
}

.cx-cierre__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 5rem; /* 80px */
  align-items: start;
}

.cx-cierre .cx-section-title {
  max-width: 47.5rem;
  color: var(--color-blanco);
}

.cx-cierre__copy {
  color: #b8c2c1;
  font-size: var(--text-base);
  line-height: 1.7;
  margin: 0;
  max-width: 33.75rem;
}

.cx-cierre__actions {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

.cx-cierre__actions .cx-text-link {
  color: #d9e0df;
}

.cx-cierre__actions .cx-text-link:hover,
.cx-cierre__actions .cx-text-link:focus-visible {
  color: var(--color-turquesa);
}

@media (max-width: 900px) {
  .cx-cierre__grid {
    grid-template-columns: 1fr;
    gap: 1.875rem;
  }
}

/* ============================================================
   5. FOOTER EXPLORADOR
   Reemplaza por completo al .site-footer global en esta plantilla
   (ver footer.php e is_page_template en la condición) — no se apila
   con él.
   ============================================================ */
.cx-footer {
  background-color: #101717;
  color: #c3cccb;
}

.cx-footer__explorer {
  padding: 3.875rem 0 3.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cx-footer__head {
  display: grid;
  grid-template-columns: 1.1fr 0.75fr;
  gap: 4.5rem;
  align-items: end;
}

.cx-footer__head h2 {
  margin: 0.75rem 0 0;
  color: var(--color-blanco);
  font-size: clamp(2rem, 3.6vw, 3.375rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.cx-footer__head p {
  margin: 0;
  color: #91a09f;
  font-size: var(--text-sm);
  line-height: 1.7;
}

.cx-footer__kicker {
  font: var(--weight-semibold) var(--text-xs) var(--font-mono);
  letter-spacing: 0.12em;
  color: #78aaa7;
}

.cx-footer__console {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 2.75rem;
  margin-top: 2.625rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cx-footer__filters {
  display: grid;
  align-content: start;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.cx-footer__filter {
  appearance: none;
  text-align: left;
  padding: 1.125rem 1.25rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: transparent;
  color: #91a09f;
  cursor: pointer;
  font: var(--weight-semibold) 0.6875rem var(--font-mono);
  letter-spacing: 0.06em;
}

.cx-footer__filter:last-child {
  border-bottom: 0;
}

.cx-footer__filter:hover,
.cx-footer__filter:focus-visible,
.cx-footer__filter[aria-pressed="true"] {
  background-color: #16201f;
  color: var(--color-blanco);
  box-shadow: inset 2px 0 var(--color-turquesa);
}

.cx-footer__preview {
  padding: 1.5625rem 0 1.5625rem 0.125rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.625rem;
  align-items: end;
}

.cx-footer__preview span {
  display: block;
  color: #78aaa7;
  font: var(--weight-semibold) var(--text-xs) var(--font-mono);
  letter-spacing: 0.1em;
}

.cx-footer__preview strong {
  display: block;
  max-width: 42.5rem;
  margin-top: 0.625rem;
  color: var(--color-blanco);
  font-size: var(--text-xl);
  line-height: 1.35;
}

.cx-footer__preview p {
  max-width: 42.5rem;
  margin: 0.625rem 0 0;
  color: #8fa09e;
  font-size: var(--text-sm);
  line-height: 1.65;
}

.cx-footer__explore {
  appearance: none;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: var(--color-blanco);
  cursor: pointer;
  white-space: nowrap;
  font-size: var(--text-xs);
}

.cx-footer__explore:hover,
.cx-footer__explore:focus-visible {
  border-color: #5c9995;
  background-color: #16201f;
}

.cx-footer__base {
  display: grid;
  grid-template-columns: 1.1fr 0.7fr 0.7fr 0.7fr;
  gap: 4rem;
  padding: 2.75rem 0 2rem;
}

.cx-footer__brand strong {
  display: block;
  color: var(--color-blanco);
  font-size: var(--text-xl);
}

.cx-footer__brand p {
  max-width: 22.5rem;
  color: #91a09f;
  font-size: var(--text-sm);
  line-height: 1.65;
}

.cx-footer__column {
  display: grid;
  align-content: start;
  gap: 0.6875rem;
}

.cx-footer__column span {
  margin-bottom: 0.25rem;
  color: #6f817f;
  font: var(--weight-semibold) var(--text-sm) var(--font-mono);
  letter-spacing: 0.11em;
}

.cx-footer__column a {
  width: max-content;
  color: #c3cccb;
  text-decoration: none;
  font-size: var(--text-sm);
}

.cx-footer__column a:hover {
  color: var(--color-blanco);
}

.cx-footer__column span[aria-disabled="true"] {
  width: max-content;
  color: #6f817f;
  font-size: var(--text-sm);
  cursor: not-allowed;
}

.cx-footer__bottom {
  padding: 1.3125rem 0 1.6875rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  color: #768785;
  font: var(--weight-medium) var(--text-xs) var(--font-mono);
}

.cx-footer__bottom a {
  color: #93a3a1;
  text-decoration: none;
}

.cx-footer__bottom a:hover {
  color: var(--color-blanco);
}

@media (max-width: 850px) {
  .cx-footer__head,
  .cx-footer__console {
    grid-template-columns: 1fr;
    gap: 1.875rem;
  }

  .cx-footer__filters {
    grid-template-columns: repeat(3, 1fr);
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .cx-footer__filter {
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.09);
  }

  .cx-footer__preview {
    padding-left: 0;
  }

  .cx-footer__base {
    grid-template-columns: 1fr 1fr;
  }

  .cx-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .cx-footer__filters {
    grid-template-columns: 1fr;
  }

  .cx-footer__filter {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  .cx-footer__preview {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .cx-footer__base {
    grid-template-columns: 1fr;
  }

  .cx-footer__brand {
    grid-column: auto;
  }

  .cx-footer__bottom {
    flex-direction: column;
  }
}