/* ==========================================================================
   BLACK VERSIONS — pages/casos-de-exito.css
   Solo lo especifico de /casos-de-exito/. El hero centrado, las metric-cells,
   los process-step, el grafico de barras, la card de resultado y el CTA son
   componentes compartidos.

   La pagina esta pensada para crecer: cada caso es un bloque .case-block
   autocontenido ("Caso 01", "Caso 02"...), asi que anadir uno nuevo es
   duplicar la estructura sin tocar estos estilos.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */

.cases-hero .starburst {
  top: 14%;
  right: var(--burst-right);
}

/* ==========================================================================
   2. INTRO
   ========================================================================== */

.cases-intro {
  text-align: center;
}

.cases-intro p {
  max-width: 700px;
  margin-inline: auto;
  font-size: var(--fs-p-lg);
}

/* ==========================================================================
   3. CASO — cabecera y contexto dentro de una card
   ========================================================================== */

.case-card {
  padding: 40px 32px 44px;
  border: 1px solid var(--b-08);
  border-radius: var(--r-card);
  background-image: linear-gradient(180deg, var(--card-top), var(--card-bottom));
}

@media (min-width: 901px) {
  .case-card {
    padding: 56px 56px 60px;
  }
}

.case-card h2 {
  max-width: 22ch;
  margin-bottom: 0;
  line-height: 1.12;
}

.case-card .pill {
  margin-bottom: 22px;
}

.case-context {
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: 1fr;
  margin-top: var(--gap-md);
  align-items: start;
}

@media (min-width: 901px) {
  .case-context {
    grid-template-columns: 1.25fr 1fr;
    gap: var(--gap-lg);
  }
}

.case-context h3 {
  margin-bottom: 14px;
  font-size: 1rem;
  color: var(--text-hi);
}

.case-context p {
  max-width: 58ch;
  font-size: var(--fs-p-md);
}

/* Dentro de la card el fondo de las mini-celdas sube un punto para separarse */
.case-context .fact {
  background: var(--surface-alt-2);
}

/* ==========================================================================
   4. METRICAS
   ========================================================================== */

/* El titulo de esta seccion es solo para lectores de pantalla: el wireframe
   pide que las cifras hablen solas. */

/* ==========================================================================
   5. EL HALLAZGO
   ========================================================================== */

.finding .finding-content h2 {
  max-width: 20ch;
  margin-bottom: 26px;
  line-height: 1.12;
}

/* Los eyebrow tambien son <p>: se excluyen de las reglas de parrafo */
.finding .finding-content > p:not(.eyebrow) {
  max-width: 60ch;
  margin-bottom: 18px;
  font-size: var(--fs-p-md);
}

.finding .finding-content > p:not(.eyebrow):last-of-type {
  margin-bottom: 0;
}

/* ==========================================================================
   6. QUE HICIMOS
   ========================================================================== */

.actions h2 {
  max-width: 18ch;
  margin-bottom: var(--gap-md);
}

.actions .result-card {
  margin-top: var(--gap-md);
}

/* ==========================================================================
   7. CTA
   ========================================================================== */

.cases-cta {
  border-top: 1px solid var(--b-06);
}