/* ================================================================
   Verifika — Typography Design System
   Fuente canónica de estilos de texto para todas las páginas app.
   ================================================================ */

/* ── Eyebrow / Breadcrumb ─────────────────────────────────────── */
.section-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  display: block;
  margin-bottom: 12px;
}

/* ── Page hero title (h1) ─────────────────────────────────────── */
.page-h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-align: left;
  color: #fff;
  margin: 0 0 16px;
}

/* Accent line (second line in green) */
.page-h1 .accent,
.accent { color: #BEF264; }

/* ── Page description / subtitle ─────────────────────────────── */
.page-desc {
  font-size: 14px;
  color: rgba(255,255,255,.45);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 0 24px;
  text-align: left;
}

/* ── Internal section heading (h2) ───────────────────────────── */
.section-h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-align: left;
  color: #fff;
  margin: 0 0 10px;
}

/* ── Tags / Pills ─────────────────────────────────────────────── */
/* Default: green (brand) */
.vfk-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(190,242,100,0.08);
  border: 1px solid rgba(190,242,100,0.22);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #BEF264;
  white-space: nowrap;
}

.vfk-tag.amber {
  background: rgba(251,191,36,0.08);
  border-color: rgba(251,191,36,0.22);
  color: #fbbf24;
}

.vfk-tag.indigo {
  background: rgba(129,140,248,0.08);
  border-color: rgba(129,140,248,0.22);
  color: #818cf8;
}

.vfk-tag.orange {
  background: rgba(251,146,60,0.08);
  border-color: rgba(251,146,60,0.22);
  color: #fb923c;
}

/* Tag row container */
.vfk-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

/* ── Page hero container ──────────────────────────────────────── */
.page-hero {
  max-width: 760px;
  padding: 48px 0 0;
}

/* ── Fix: centered heroes become left-aligned via class ───────── */
.hero-left {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-start !important;
}