/* ─── CASOS ─── */
/* Hoja propia del bloque de casos. Pendiente de que Marcos la integre en el head
   via un mecanismo de hojas extra en el front matter. Mientras tanto, cada pagina
   de caso la enlaza al principio de su contenido. */

/* Chip de logo, mismo lenguaje que la home */
.caso-chip {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  padding: 14px 20px;
  margin-bottom: 28px;
}

.caso-chip img {
  height: 32px;
  width: auto;
  display: block;
}

/* Aviso de vinculo. Solo para el caso propio */
.caso-aviso {
  border: 1px solid var(--ink);
  border-left: 3px solid var(--red);
  background: var(--white);
  padding: 24px 28px;
  margin-bottom: 40px;
  max-width: 760px;
}

.caso-aviso-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 10px;
}

.caso-aviso p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
  max-width: none;
}

.caso-aviso p.caso-aviso-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}

/* Meta: sector y KPI */
.caso-meta {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  margin-bottom: 44px;
}

.caso-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.caso-meta-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #777;
}

.caso-meta-valor {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Tres bloques: partida, qué hicimos, qué pasó */
.caso-bloque {
  margin-bottom: 36px;
  max-width: 720px;
}

.caso-bloque-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 10px;
}

.caso-bloque h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
}

.caso-bloque p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-text);
  margin: 0;
}

/* Fila de cifras, formato de la home */
.caso-cifras {
  display: flex;
  border: 1px solid var(--border);
  background: var(--white);
  margin: 44px 0;
}

.caso-cifra {
  flex: 1;
  padding: 24px 26px;
  border-right: 1px solid var(--border);
}

.caso-cifra:last-child { border-right: none; }

.caso-cifra-val {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 6px;
}

.caso-cifra-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #777;
}

/* Leccion transferible */
.caso-leccion {
  background: var(--ink);
  color: var(--white);
  padding: 36px 40px;
  margin: 48px 0;
  max-width: 760px;
}

.caso-leccion-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 12px;
}

.caso-leccion p {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--white);
  margin: 0;
  max-width: none;
}

/* Enlaces de cierre */
.caso-enlaces {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 24px;
  margin-bottom: 44px;
}

.caso-enlaces a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s;
}

.caso-enlaces a:hover,
.caso-enlaces a:focus-visible { color: var(--red); }

/* Hub: tarjetas de caso */
.casos-lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}

.caso-tarjeta {
  border: 1px solid var(--border);
  background: var(--white);
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.caso-tarjeta .caso-chip { margin-bottom: 22px; }

.caso-tarjeta-sector {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #777;
  margin: 0 0 10px;
}

.caso-tarjeta h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
}

.caso-tarjeta p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-text);
  margin: 0 0 24px;
  flex-grow: 1;
  max-width: none;
}

.caso-tarjeta-cifras {
  display: flex;
  gap: 24px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-bottom: 20px;
}

.caso-tarjeta-cifra-val {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.caso-tarjeta-cifra-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #777;
  margin-top: 4px;
}

.caso-tarjeta-cta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  transition: color 0.2s;
}

.caso-tarjeta-cta:hover,
.caso-tarjeta-cta:focus-visible { color: var(--red); }

/* Nota honesta del hub */
.casos-nota {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  max-width: 720px;
}

.casos-nota p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-text);
  margin: 0;
}

@media (max-width: 900px) {
  .casos-lista { grid-template-columns: 1fr; }
  .caso-cifras { flex-direction: column; }
  .caso-cifra { border-right: none; border-bottom: 1px solid var(--border); }
  .caso-cifra:last-child { border-bottom: none; }
  .caso-meta { gap: 24px; }
}