/* home.css — styles specific to a single section of this page and reusable nowhere
   else. If this file grows large, something in it belongs in components.css. */

/* El test es la única sección con fondo propio, así que sus tarjetas necesitan
   un poco más de aire que una tarjeta suelta. */

.test__progreso {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.test__enunciado {
  font-family: var(--ff-body);
  font-size: var(--fs-subtitle);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-body);
}

.test__diagrama { margin-block: var(--sp-4); }

.test__mejor {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.test__marcador {
  font-family: var(--ff-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
}

.test__marcador strong { font-weight: 400; color: var(--c-accent); }

.test__desglose {
  font-size: var(--fs-small);
  padding: var(--sp-4);
  background: var(--c-surface);
  border-radius: var(--r-md);
}

.test__desglose ul {
  margin-block-start: var(--sp-2);
  padding-inline-start: var(--sp-5);
}

.test__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.test__avanzar { margin-block-start: var(--sp-4); }