/* El Aprendiz — sistema tipográfico (hero + resto del sitio) */
:root{
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Archivo Black", Inter, system-ui, sans-serif;
  --type-cream: #f7f1e8;
  --type-muted: rgba(226, 214, 198, .72);
  --type-dek: rgba(167, 243, 252, .82);
  --type-kicker: rgba(103, 232, 249, .92);
}

html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body{
  font-family: var(--font-body);
  line-height: 1.58;
}

h1, h2, h3, h4,
.section-title,
.hero-overlay-title{
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -.038em !important;
  line-height: 1.08;
  text-wrap: balance;
  font-synthesis: none;
}
h1, h2, .section-title, .hero-overlay-title{ color: var(--type-cream); }
h1.leading-none{ line-height: .98; }

/* Dek bajo un titular: Inter, no display */
.hero-copy h2,
h2.text-cyan-300,
.type-dek{
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  line-height: 1.35 !important;
  color: var(--type-dek);
}

/* Chrome de interfaz: no usar Archivo Black */
nav h2,
nav.idx h2,
aside h3, aside h4,
.toolbar h3,
#cart h3,
h3.text-xl, h3.text-lg,
h4.text-lg, h4.text-sm,
.catalog-panel-title,
h2.catalog-panel-title,
.catalog-section-title,
.info-box-title,
.vib-title,
.modal-surface-main h4,
#dimsPanel h4{
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
  line-height: 1.25 !important;
  text-wrap: pretty;
}

.eyebrow,
.hero-kicker{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--type-kicker);
}
.eyebrow::before,
.hero-kicker::before{
  content: "";
  width: 1.15rem;
  height: 1px;
  background: #22d3ee;
  box-shadow: 0 0 8px rgba(34,211,238,.7);
  flex-shrink: 0;
}

p{ line-height: 1.62; text-wrap: pretty; }
.lead{ font-size: 1rem; line-height: 1.65; color: #cbd5e1; }

.text-gradient,
#resultTotal{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.03em;
}

.step-badge,
.era-card strong,
.hero-kpi b{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.03em;
}

html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3, html[lang="zh"] h4,
html[lang="zh"] .section-title, html[lang="zh"] .hero-overlay-title,
html[lang="zh"] .text-gradient, html[lang="zh"] .step-badge, html[lang="zh"] .era-card strong,
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] h4,
html[lang="hi"] .section-title, html[lang="hi"] .hero-overlay-title,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] .section-title, html[lang="ar"] .hero-overlay-title,
html[lang="ru"] h1, html[lang="ru"] h2, html[lang="ru"] h3, html[lang="ru"] h4,
html[lang="ru"] .section-title, html[lang="ru"] .hero-overlay-title,
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] h4,
html[lang="ja"] .section-title, html[lang="ja"] .hero-overlay-title{
  font-family: inherit !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.2;
}