/*
 * H&C readable type scale.
 *
 * Visual reference: the legal/privacy pages after the contrast pass.
 * The goal is to keep small text elegant without making it faint or fragile.
 * Loaded after hc-contrast.css so this acts as the final typography contract.
 */

:root {
  --hc-type-body: 1rem;
  --hc-type-body-sm: 0.95rem;
  --hc-type-small: 0.88rem;
  --hc-type-micro: 0.78rem;
  --hc-type-label: 0.74rem;
  --hc-type-editorial-italic: 1.08rem;
}

/* ── Body and supporting copy ───────────────────── */
:where(
  .u-body,
  .instr-body,
  .escena-body,
  .momento-body,
  .momento-intro,
  .instr-intro,
  .c-card__body,
  .c-entrecard__body,
  .c-step__body,
  .c-cta-sub,
  .legal-page__content,
  .post-body__content,
  .page-body,
  .e3-module__body
) {
  font-weight: 400 !important;
}

:where(
  .instr-mechanism-list li,
  .momento-layers li,
  .momento-instr-list li a,
  .escena-loop li,
  .escena-risks li,
  .escena-layers li,
  .instr-related-list li a
) {
  font-size: var(--hc-type-body-sm) !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
}

:where(
  .momento-scene-card__desc,
  .escena-result-card p,
  .escena-layer-card p,
  .instr-card p,
  .recurso-item p,
  .e3-module__aside p,
  .aside-lista__titulo,
  .aside-editorial__cuerpo,
  .c-footer__tagline,
  .c-footer__newsletter-text,
  .c-footer__legal-list a,
  .c-footer__social-link
) {
  font-size: var(--hc-type-small) !important;
  font-weight: 400 !important;
  line-height: 1.68 !important;
}

/* ── Canonical editorial italics ────────────────── */
/*
 * These are not captions. They carry meaning, so they use the same serif
 * family as the legal-page hierarchy, at a readable size and regular weight.
 */
:where(
  .instr-highlight,
  .instr-closing,
  .escena-highlight,
  .escena-closing,
  .escena-blockquote,
  .escena-misreadings li,
  .escena-signals li,
  .c-step-note
) {
  font-family: var(--f-serif) !important;
  font-size: var(--hc-type-editorial-italic) !important;
  font-weight: 400 !important;
  font-style: italic;
  line-height: 1.68 !important;
}

.section--light :where(
  .instr-highlight,
  .instr-closing,
  .escena-highlight,
  .escena-closing,
  .escena-blockquote,
  .escena-misreadings li,
  .escena-signals li,
  .c-step-note
),
.section--light-2 :where(
  .instr-highlight,
  .instr-closing,
  .escena-highlight,
  .escena-closing,
  .escena-blockquote,
  .escena-misreadings li,
  .escena-signals li,
  .c-step-note
) {
  color: #303a46 !important;
}

/* Long italic signal lists need the same readability as body copy. */
.escena-signals {
  gap: 0.72rem !important;
}

.escena-signals li {
  letter-spacing: 0.002em !important;
}

.escena-signals li::before {
  color: #52606b !important;
}

/* Article lead already has enough scale; just avoid thin italic rendering. */
.post-body__lead,
.post-body__content blockquote {
  font-weight: 400 !important;
}

/* ── Functional small text ──────────────────────── */
:where(
  .form-ctx__legal,
  .aside-lista__fecha,
  .aside-editorial__stat,
  .aside-contacto__email,
  .post-body__content figcaption,
  .escena-disclaimer,
  .c-footer__copy,
  .c-footer__newsletter-legal,
  .c-footer__bottom-nav a
) {
  font-size: var(--hc-type-small) !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
}

/* Keep functional italics, but never as pale microcopy. */
:where(
  .aside-editorial__stat,
  .post-body__content figcaption,
  .escena-disclaimer
) {
  font-style: italic;
}

.section--light :where(
  .form-ctx__legal,
  .aside-lista__fecha,
  .post-body__content figcaption
),
.section--light-2 :where(
  .form-ctx__legal,
  .aside-lista__fecha,
  .post-body__content figcaption
) {
  color: var(--hc-text-small) !important;
}

/* ── Labels / eyebrows / actions ────────────────── */
:where(
  .u-eyebrow,
  .aside-label,
  .momento-instr-group__title,
  .instr-group__title,
  .escena-instr-group__title,
  .e3-module__aside-label,
  .e3-module-hero__eyebrow,
  .e3-module-cta p,
  .c-footer__col-title,
  .c-footer__e3-label,
  .form-ctx__field label
) {
  font-size: var(--hc-type-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.4 !important;
}

:where(
  .momento-scene-card__link,
  .instr-card__link,
  .momento-cta__link,
  .aside-ver-todos,
  .aside-editorial__cta,
  .e3-module-nav__link span,
  .post-hero__date
) {
  font-size: var(--hc-type-micro) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

/* Buttons are compact, but their labels must read instantly. */
.btn,
.c-nav__mobile-cta {
  font-size: var(--hc-type-label) !important;
  font-weight: 600 !important;
}

/* Desktop navigation can remain discreet without dropping into hairline type. */
.c-nav__links a,
.c-nav__toggle {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}

/* ── Forms ───────────────────────────────────────── */
.form-ctx__field input,
.form-ctx__field select,
.form-ctx__field textarea {
  font-size: var(--hc-type-body-sm) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.form-ctx__field input::placeholder,
.form-ctx__field textarea::placeholder,
.c-footer__newsletter-form input::placeholder {
  font-size: inherit !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* ── Article aside ──────────────────────────────── */
.aside-lista__num {
  font-size: var(--hc-type-micro) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

.aside-contacto__cargo {
  font-size: var(--hc-type-micro) !important;
  font-weight: 600 !important;
}

/* ── Footer ─────────────────────────────────────── */
.c-footer__contact-label,
.c-footer__taxo-link,
.c-footer__e3-link {
  font-size: var(--hc-type-small) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.c-footer__contact-value {
  font-size: 1rem !important;
}

/* ── Hero/supporting dark copy ──────────────────── */
:where(
  .c-hero__brief,
  .instr-hero__summary p,
  .escena-hero__summary p,
  .momento-hero__summary p,
  .page-hero p:last-child,
  .e3-module-hero__meta p
) {
  font-size: var(--hc-type-body) !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
}

:where(
  .instr-hero__sub,
  .escena-hero__sub,
  .momento-hero__sub
) {
  font-weight: 400 !important;
}

/* ── Mobile: use the legal-page screen as the floor ─ */
@media (max-width: 680px) {
  :root {
    --hc-type-body-sm: 0.98rem;
    --hc-type-small: 0.9rem;
    --hc-type-micro: 0.8rem;
    --hc-type-label: 0.76rem;
    --hc-type-editorial-italic: 1.14rem;
  }

  :where(
    .momento-scene-card__desc,
    .escena-result-card p,
    .escena-layer-card p,
    .instr-card p,
    .recurso-item p,
    .aside-lista__titulo,
    .aside-editorial__cuerpo,
    .form-ctx__legal,
    .post-body__content figcaption,
    .escena-disclaimer,
    .c-footer__tagline,
    .c-footer__newsletter-text,
    .c-footer__legal-list a,
    .c-footer__social-link
  ) {
    font-size: var(--hc-type-small) !important;
  }

  .escena-signals li,
  .escena-misreadings li,
  .instr-highlight,
  .instr-closing,
  .escena-highlight,
  .escena-closing,
  .escena-blockquote,
  .c-step-note {
    line-height: 1.72 !important;
  }
}