/* ═══════════════════════════════════════════════════════════════════════════
 * SISTEMA DE DISEÑO · CANON ÚNICO  (aprobado por Alex, 2026-07-21)
 * ───────────────────────────────────────────────────────────────────────────
 * Carga LA ÚLTIMA y manda sobre todas las páginas. Impone UNA escala de títulos
 * y UN juego de botones.
 *
 * ESPECIFICIDAD: casi cada página envuelve sus títulos en `.aiden-page-X .clase`
 * (0,2,0) y dos en 0,3,0 (books/taxes). Por eso el canon repite ESE MISMO
 * selector de cada página: al empatar especificidad y cargar el último, gana.
 * Las clases sin prefijo (aeq, vs, aiden-title…) van sueltas.
 *
 * SEGURIDAD: en títulos solo se toca tipografía (familia, tamaño, peso,
 * interlineado, tracking). Nunca color ni márgenes → degradados y espaciados
 * intactos. En botones se unifica la geometría; el color, solo primario/secundario.
 * Cambiar el primario a verde = 1 línea (--ds-primary).
 * ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --ds-display: clamp(2.6rem, 5.5vw, 4.4rem);
  --ds-h1:      clamp(2.1rem, 5vw, 3.4rem);
  --ds-h2:      clamp(1.75rem, 3.5vw, 2.6rem);
  --ds-h3:      1.375rem;
  --ds-lead:    1.125rem;
  --ds-body:    0.9375rem;
  --ds-small:   0.8125rem;
  --ds-eyebrow: 0.75rem;
  --ds-primary: var(--n900);   /* botón primario (negro). Verde = var(--t500) */
}

/* ═══════════════ TÍTULOS ═══════════════ */

/* DISPLAY · hero de la home (0,2,0). También alcanza a books/taxes, pero abajo
   se les baja a H1 con reglas posteriores de igual o más especificidad. */
.aiden-page-inicio .ash-hero-h{
  font-family:var(--fd); font-size:var(--ds-display);
  font-weight:800; line-height:1.02; letter-spacing:-.045em;
}

/* H1 · heroes de páginas interiores. Se repite el selector prefijado de cada
   página (0,2,0) + las clases sueltas + books/taxes (0,2,0 y 0,3,0). */
.aiden-page-astart-app .aap-hero-h,
.aiden-page-astart-blog .abl-hero-h,
.aiden-page-astart-comparador .asc-hero-h,
.aiden-page-astart-comparativa .acp-hero-h,
.aiden-page-astart-constitucion .ascr-hero-h,
.aiden-page-astart-direccion .asdf-hero-h,
.aiden-page-astart-lunnar .aln-hero-h,
.aiden-page-astart-precios .asp-hero-h,
.aiden-page-astart-presentacion .apr-hero-h,
.aiden-page-astart-tool .att-hero-h,
.aiden-page-astart-tools-hub .ath-hero-h,
.aiden-page-buzon .bz-hero-h,
.aiden-page-asesor .ap-hero-h,
.aiden-page-inicio .hero-h,
.aeq-hero-h, .vs-hero-h,
.aiden-page-astart-product .ash-hero-h,
.aiden-page-inicio .ash-hero--books .ash-hero-h,
.aiden-page-inicio .ash-hero--taxes .ash-hero-h{
  font-family:var(--fd); font-size:var(--ds-h1);
  font-weight:800; line-height:1.05; letter-spacing:-.04em;
}

/* H2 · títulos de sección */
.aiden-page-astart-app .aap-panel-h,
.aiden-page-astart-precios .asp-panel-h,
.aiden-page-asesor .ap-sec-h,
.aiden-page-astart-comparador .asc-msec-title,
.aiden-page-astart-comparativa .acp-msec-title,
.aiden-page-astart-presentacion .apr-sec-h,
.aiden-page-buzon .bz-sec-h,
.aiden-page-inicio .sec-h,
.aiden-title, .ap-dash-h, .lp-sec-h, .asc-vs-competition-h, .aap-panel-h, .asp-panel-h{
  font-family:var(--fd); font-size:var(--ds-h2);
  font-weight:700; line-height:1.1; letter-spacing:-.035em;
}

/* LEAD · subtítulos de hero (solo tamaño e interlineado; el color lo deja la página) */
.aiden-page-astart-app .aap-hero-sub,
.aiden-page-astart-blog .abl-hero-sub,
.aiden-page-astart-comparador .asc-hero-sub,
.aiden-page-astart-comparativa .acp-hero-sub,
.aiden-page-astart-constitucion .ascr-hero-sub,
.aiden-page-astart-direccion .asdf-hero-sub,
.aiden-page-astart-lunnar .aln-hero-sub,
.aiden-page-astart-precios .asp-hero-sub,
.aiden-page-astart-presentacion .apr-hero-sub,
.aiden-page-astart-tool .att-hero-sub,
.aiden-page-astart-tools-hub .ath-hero-sub,
.aiden-page-buzon .bz-hero-sub,
.aiden-page-asesor .ap-hero-sub,
.aiden-page-inicio .ash-hero-sub,
.aiden-page-inicio .hero-sub,
.aeq-hero-sub, .vs-hero-sub{
  font-family:var(--fb); font-size:var(--ds-lead); line-height:1.55;
}

/* ═══════════════ TEXTO DE CUERPO ═══════════════
 * Solo párrafos de TEXTO CORRIDO (13.5–17px) → Body 15px. Se excluye a propósito
 * el metadato pequeño ≤12.5px (descripciones de enlaces, chips, KPIs, badges) y
 * el cuerpo del blog (legibilidad). Solo font-size + interlineado. */
.aap-faq-body, .aeq-faq-body, .att-faq-body,
.afd-card-p, .afd-info-desc,
.acp-transp-lead, .acp-vs-desc, .asc-vs-competition-p,
.aiden-desc, .asms-desc, .ap-sec-p, .ap-msg-card-text,
.asp-bcf-p, .asp-plan-desc, .asp-compl-desc, .asp-cta-compact-desc,
.asp-author-bio-text, .asp-callout-text, .asp-test-text{
  font-size:var(--ds-body); line-height:1.6;
}

/* ═══════════════ BOTONES ═══════════════
 * Geometría única para todas las familias. El color se respeta salvo el primario
 * y el secundario, que van al canon (negro / borde). */
.b, .ap-btn, .ap-btn-primary, .ap-btn-dark, .ap-btn-ghost, .ap-btn-outline,
.ap-btn-white, .ap-btn-lg, .ap-btn-sm,
.aiden-btn, .aiden-btn--primary, .aiden-btn--dark, .aiden-btn--outline,
.aiden-btn--glass, .aiden-btn--lg{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:var(--r-pill);
  font-family:var(--fb); font-weight:600; font-size:14px;
  letter-spacing:-.005em; line-height:1.4; transition:all .25s var(--ease);
  white-space:nowrap; cursor:pointer; border:1.5px solid transparent; text-decoration:none;
}
.b svg, .ap-btn svg, .aiden-btn svg{width:16px;height:16px;flex:none}

.b-lg, .ap-btn-lg, .aiden-btn--lg{padding:15px 30px;font-size:15px}
.b-sm, .ap-btn-sm{padding:8px 16px;font-size:13px}

.b-p, .ap-btn-primary, .ap-btn-dark, .aiden-btn--primary, .aiden-btn--dark{
  background:var(--ds-primary); color:#fff; border-color:transparent;
}
.b-p:hover, .ap-btn-primary:hover, .ap-btn-dark:hover,
.aiden-btn--primary:hover, .aiden-btn--dark:hover{
  background:var(--n800); transform:translateY(-1px);
}
.b-s, .ap-btn-ghost, .ap-btn-outline, .aiden-btn--outline{
  background:var(--n0); color:var(--n900); border-color:var(--n150);
}
.b-s:hover, .ap-btn-ghost:hover, .ap-btn-outline:hover, .aiden-btn--outline:hover{
  border-color:var(--n300); background:var(--n25);
}