/* ==========================================================
   ERP-UNIV ATLAS DESIGN SYSTEM
   Archivo: typography.css
   Versión: 1.1
   Descripción:
   Sistema tipográfico maestro para las páginas comerciales
   de ERP-UNIV Atlas.

   IMPORTANTE:
   - Este archivo controla jerarquías tipográficas reutilizables.
   - No controla layouts, grids, fondos, imágenes, cards o botones.
   - El módulo legal conserva su propio sistema en legal.css.
   - Debe cargarse después de site.css y antes de los CSS por página.
   ========================================================== */


/* ==========================================================
   1. TOKENS TIPOGRÁFICOS
   ========================================================== */

:root {
    /* Familia */
    --erp-font-display: var(--erp-font-main, "Segoe UI", Inter, Arial, sans-serif);
    --erp-font-body: var(--erp-font-main, "Segoe UI", Inter, Arial, sans-serif);
    /* Hero */
    --erp-type-hero-size: clamp(2.75rem, 5vw, 5rem);
    --erp-type-hero-weight: 900;
    --erp-type-hero-line-height: 1.03;
    --erp-type-hero-letter-spacing: -0.06em;
    --erp-type-hero-max-width: 920px;
    /* Hero centrado / portada amplia */
    --erp-type-hero-wide-size: clamp(2.75rem, 5.6vw, 5.25rem);
    --erp-type-hero-wide-max-width: 980px;
    /* Título de sección */
    --erp-type-section-size: clamp(2rem, 4vw, 3.4rem);
    --erp-type-section-weight: 900;
    --erp-type-section-line-height: 1.12;
    --erp-type-section-letter-spacing: -0.05em;
    --erp-type-section-max-width: 940px;
    /* Título de sección compacto */
    --erp-type-section-sm-size: clamp(1.75rem, 3vw, 2.65rem);
    --erp-type-section-sm-weight: 850;
    --erp-type-section-sm-line-height: 1.15;
    --erp-type-section-sm-letter-spacing: -0.035em;
    /* Títulos de cards */
    --erp-type-card-title-size: clamp(1.12rem, 1.7vw, 1.35rem);
    --erp-type-card-title-weight: 850;
    --erp-type-card-title-line-height: 1.3;
    /* Texto introductorio de Hero */
    --erp-type-hero-text-size: clamp(1.06rem, 1.7vw, 1.22rem);
    --erp-type-hero-text-line-height: 1.82;
    --erp-type-hero-text-max-width: 720px;
    /* Texto introductorio de sección */
    --erp-type-section-text-size: clamp(1.02rem, 1.5vw, 1.12rem);
    --erp-type-section-text-line-height: 1.8;
    --erp-type-section-text-max-width: 760px;
    /* Texto general */
    --erp-type-body-size: 1rem;
    --erp-type-body-line-height: 1.75;
    /* Texto pequeño */
    --erp-type-small-size: 0.9rem;
    --erp-type-small-line-height: 1.65;
    /* Eyebrow */
    --erp-type-eyebrow-size: 0.78rem;
    --erp-type-eyebrow-weight: 850;
    --erp-type-eyebrow-letter-spacing: 0.065em;
}


/* ==========================================================
   2. BASE TIPOGRÁFICA
   ========================================================== */

body {
    font-family: var(--erp-font-body);
    color: var(--erp-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--erp-font-display);
}


/* ==========================================================
   3. HERO
   ========================================================== */

.erp-hero-title {
    max-width: var(--erp-type-hero-max-width);
    margin: 20px 0 24px;
    color: var(--erp-text);
    font-family: var(--erp-font-display);
    font-size: var(--erp-type-hero-size);
    font-weight: var(--erp-type-hero-weight);
    line-height: var(--erp-type-hero-line-height);
    letter-spacing: var(--erp-type-hero-letter-spacing);
    text-wrap: balance;
}

.erp-hero-title--wide {
    max-width: var(--erp-type-hero-wide-max-width);
    font-size: var(--erp-type-hero-wide-size);
}

.erp-hero-title--center {
    margin-inline: auto;
    text-align: center;
}

.erp-hero-text {
    max-width: var(--erp-type-hero-text-max-width);
    margin: 0;
    color: var(--erp-text-secondary);
    font-size: var(--erp-type-hero-text-size);
    line-height: var(--erp-type-hero-text-line-height);
    text-wrap: pretty;
}

.erp-hero-text--center {
    margin-inline: auto;
    text-align: center;
}


/* ==========================================================
   4. TÍTULOS DE SECCIÓN
   ========================================================== */

.erp-section-title {
    max-width: var(--erp-type-section-max-width);
    margin: 18px 0 20px;
    color: var(--erp-text);
    font-family: var(--erp-font-display);
    font-size: var(--erp-type-section-size);
    font-weight: var(--erp-type-section-weight);
    line-height: var(--erp-type-section-line-height);
    letter-spacing: var(--erp-type-section-letter-spacing);
    text-wrap: balance;
}

.erp-section-title--sm {
    font-size: var(--erp-type-section-sm-size);
    font-weight: var(--erp-type-section-sm-weight);
    line-height: var(--erp-type-section-sm-line-height);
    letter-spacing: var(--erp-type-section-sm-letter-spacing);
}

.erp-section-title--center {
    margin-inline: auto;
    text-align: center;
}

.erp-section-text {
    max-width: var(--erp-type-section-text-max-width);
    margin: 0;
    color: var(--erp-text-secondary);
    font-size: var(--erp-type-section-text-size);
    line-height: var(--erp-type-section-text-line-height);
    text-wrap: pretty;
}

.erp-section-text--center {
    margin-inline: auto;
    text-align: center;
}


/* ==========================================================
   5. EYEBROW
   ========================================================== */

.erp-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: var(--erp-radius-pill);
    background: var(--erp-soft-blue-2);
    color: var(--erp-primary-dark);
    font-size: var(--erp-type-eyebrow-size);
    font-weight: var(--erp-type-eyebrow-weight);
    line-height: 1.2;
    letter-spacing: var(--erp-type-eyebrow-letter-spacing);
    text-transform: uppercase;
}

.erp-eyebrow--outline {
    border: 1px solid rgba(75, 116, 145, 0.16);
    background: rgba(255, 255, 255, 0.76);
    color: var(--erp-primary);
    box-shadow: var(--erp-shadow-sm);
}

.erp-eyebrow--plain {
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--erp-primary);
}


/* ==========================================================
   6. CARDS Y TEXTOS
   ========================================================== */

.erp-card-title {
    margin: 0 0 8px;
    color: var(--erp-text);
    font-size: var(--erp-type-card-title-size);
    font-weight: var(--erp-type-card-title-weight);
    line-height: var(--erp-type-card-title-line-height);
}

.erp-text {
    margin: 0;
    color: var(--erp-text-secondary);
    font-size: var(--erp-type-body-size);
    line-height: var(--erp-type-body-line-height);
}

.erp-text-sm {
    margin: 0;
    color: var(--erp-text-secondary);
    font-size: var(--erp-type-small-size);
    line-height: var(--erp-type-small-line-height);
}


/* ==========================================================
   7. UTILIDADES TIPOGRÁFICAS
   ========================================================== */

.erp-highlight {
    color: var(--erp-primary);
}

.erp-highlight--block {
    display: block;
    color: var(--erp-primary);
}

.erp-text-balance {
    text-wrap: balance;
}

.erp-text-pretty {
    text-wrap: pretty;
}

.erp-text-center {
    text-align: center;
}

.erp-text-left {
    text-align: left;
}


/* ==========================================================
   8. ALIASES DE COMPATIBILIDAD
   Mantienen operativas las clases globales existentes mientras
   migramos cada página al nuevo estándar.
   ========================================================== */

.erp-title,
.atlas-title {
    max-width: var(--erp-type-hero-max-width);
    margin: 20px 0 24px;
    color: var(--erp-text);
    font-family: var(--erp-font-display);
    font-size: var(--erp-type-hero-size);
    font-weight: var(--erp-type-hero-weight);
    line-height: var(--erp-type-hero-line-height);
    letter-spacing: var(--erp-type-hero-letter-spacing);
    text-wrap: balance;
}

.erp-title-md,
.atlas-title-md {
    max-width: var(--erp-type-section-max-width);
    margin: 18px 0 20px;
    color: var(--erp-text);
    font-family: var(--erp-font-display);
    font-size: var(--erp-type-section-size);
    font-weight: var(--erp-type-section-weight);
    line-height: var(--erp-type-section-line-height);
    letter-spacing: var(--erp-type-section-letter-spacing);
    text-wrap: balance;
}

.erp-subtitle,
.atlas-subtitle {
    max-width: var(--erp-type-hero-text-max-width);
    margin: 0;
    color: var(--erp-text-secondary);
    font-size: var(--erp-type-hero-text-size);
    line-height: var(--erp-type-hero-text-line-height);
    text-wrap: pretty;
}


/* ==========================================================
   9. RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {
    :root {
        --erp-type-hero-size: clamp(2.55rem, 8vw, 4.15rem);
        --erp-type-hero-wide-size: clamp(2.55rem, 8vw, 4.25rem);
        --erp-type-section-size: clamp(1.95rem, 5.8vw, 3rem);
    }
}

@media (max-width: 560px) {
    :root {
        --erp-type-hero-size: clamp(2.25rem, 11vw, 3.25rem);
        --erp-type-hero-wide-size: clamp(2.25rem, 11vw, 3.35rem);
        --erp-type-hero-line-height: 1.06;
        --erp-type-hero-letter-spacing: -0.05em;
        --erp-type-section-size: clamp(1.8rem, 8vw, 2.45rem);
        --erp-type-section-line-height: 1.14;
        --erp-type-section-letter-spacing: -0.04em;
        --erp-type-hero-text-size: 1rem;
        --erp-type-hero-text-line-height: 1.72;
        --erp-type-section-text-size: 1rem;
        --erp-type-section-text-line-height: 1.72;
        --erp-type-eyebrow-size: 0.72rem;
        --erp-type-eyebrow-letter-spacing: 0.055em;
    }

    .erp-hero-title,
    .erp-title,
    .atlas-title {
        margin-top: 18px;
        margin-bottom: 20px;
    }

    .erp-section-title,
    .erp-title-md,
    .atlas-title-md {
        margin-top: 14px;
        margin-bottom: 16px;
    }
}


/* ==========================================================
   10. ACCESIBILIDAD Y COMPATIBILIDAD
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

@supports not (text-wrap: balance) {
    .erp-hero-title,
    .erp-section-title,
    .erp-title,
    .atlas-title,
    .erp-title-md,
    .atlas-title-md {
        overflow-wrap: break-word;
    }
}