/*
 * Sistema tipografico compartido de la web publica institucional.
 *
 * Dharma Gothic E y Museo Slab son las fuentes preferentes de la marca, pero
 * no se distribuyen desde este proyecto mientras no se valide su licencia web.
 * Oswald y Zilla Slab se mantienen como sustitutos temporales, junto con
 * Raleway para titulos secundarios, interfaz y acciones.
 */

/*
 * Los identificadores se repiten deliberadamente para superar reglas locales
 * heredadas que usan !important. Asi este archivo sigue siendo la autoridad
 * tipografica sin tener que reescribir las seis paginas completas.
 */
:is(
    #afa-inicio-wrapper#afa-inicio-wrapper,
    #afa-nosotros#afa-nosotros,
    #afa-donar#afa-donar,
    #afa-conexion#afa-conexion,
    #afa-transparencia#afa-transparencia,
    #afa-campana#afa-campana
) {
    --afa-font-display: "Oswald", "Arial Narrow", sans-serif;
    --afa-font-heading: "Raleway", "Segoe UI", Arial, sans-serif;
    --afa-font-reading: "Zilla Slab", Georgia, serif;
    --afa-title-gradient: linear-gradient(105deg, #013A63 0%, #075B8E 48%, #0B8AD8 76%, #159EAA 100%);
    --afa-title-gradient-dark: linear-gradient(105deg, #FAFCFC 0%, #AEE0FF 42%, #73E5E2 72%, #FFA466 100%);
    font-family: var(--afa-font-reading) !important;
    font-size: 1rem;
    line-height: 1.7;
    text-rendering: optimizeLegibility;
    /*
     * La geometria del titulo es compartida. Cada pagina o seccion puede
     * reemplazar solamente estas variables de color, sin crear otra escala
     * tipografica ni otro componente.
     */
    --afa-section-title-gradient: var(--afa-title-gradient);
    --afa-kicker-color: #013A63;
    --afa-kicker-accent: linear-gradient(90deg, #73E5E2 0%, #FFA466 100%);
}

/*
 * Titulos por funcion visual.
 *
 * Estas clases no sustituyen la jerarquia HTML: un titulo puede seguir siendo
 * h2 o h3 segun su lugar en el documento. La clase iguala su presentacion
 * cuando cumple la misma funcion dentro de la interfaz.
 */
:is(
    #afa-inicio-wrapper#afa-inicio-wrapper,
    #afa-nosotros#afa-nosotros,
    #afa-donar#afa-donar,
    #afa-conexion#afa-conexion,
    #afa-transparencia#afa-transparencia,
    #afa-campana#afa-campana
) :where(.afa-title) {
    max-width: 100% !important;
    margin: 0 0 0.875rem !important;
    font-family: var(--afa-font-heading) !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.04 !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

:is(
    #afa-inicio-wrapper#afa-inicio-wrapper,
    #afa-nosotros#afa-nosotros,
    #afa-donar#afa-donar,
    #afa-conexion#afa-conexion,
    #afa-transparencia#afa-transparencia,
    #afa-campana#afa-campana
) :where(.afa-title--major) {
    display: block !important;
    width: fit-content !important;
    font-size: clamp(2.65rem, 4.2vw, 4.75rem) !important;
    color: transparent !important;
    background-color: #013A63;
    background-image: var(--afa-section-title-gradient) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/*
 * Un span puede existir por traduccion o enfasis, pero no debe reiniciar el
 * degradado ni crear un segundo estilo dentro del mismo titulo.
 */
:is(
    #afa-inicio-wrapper#afa-inicio-wrapper,
    #afa-nosotros#afa-nosotros,
    #afa-donar#afa-donar,
    #afa-conexion#afa-conexion,
    #afa-transparencia#afa-transparencia,
    #afa-campana#afa-campana
) :where(.afa-title--major span, .afa-title--major strong) {
    color: transparent !important;
    background: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* Rotulo contextual compartido; el acento cromatico sigue siendo variable. */
:is(
    #afa-inicio-wrapper#afa-inicio-wrapper,
    #afa-nosotros#afa-nosotros,
    #afa-donar#afa-donar,
    #afa-conexion#afa-conexion,
    #afa-transparencia#afa-transparencia,
    #afa-campana#afa-campana
) :where(.afa-kicker) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 1.25rem !important;
    margin: 0 0 0.75rem !important;
    padding: 0 !important;
    color: var(--afa-kicker-color) !important;
    background: transparent !important;
    font-family: var(--afa-font-heading) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.13em !important;
    line-height: 1.35 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    white-space: normal !important;
}

:is(
    #afa-inicio-wrapper#afa-inicio-wrapper,
    #afa-nosotros#afa-nosotros,
    #afa-donar#afa-donar,
    #afa-conexion#afa-conexion,
    #afa-transparencia#afa-transparencia,
    #afa-campana#afa-campana
) :where(.afa-kicker)::before {
    content: "" !important;
    display: block !important;
    flex: 0 0 2.375rem !important;
    width: 2.375rem !important;
    min-width: 2.375rem !important;
    height: 0.125rem !important;
    min-height: 0.125rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--afa-kicker-accent) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Titulos principales: misma fuente, escala, peso, espaciado y degradado. */
:is(
    #afa-inicio-wrapper#afa-inicio-wrapper,
    #afa-nosotros#afa-nosotros,
    #afa-donar#afa-donar,
    #afa-conexion#afa-conexion,
    #afa-transparencia#afa-transparencia,
    #afa-campana#afa-campana
) :where(h1) {
    max-width: 16ch;
    font-family: var(--afa-font-display) !important;
    font-size: clamp(3rem, 8vw, 6.2rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
    line-height: 0.98 !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

:is(
    #afa-inicio-wrapper#afa-inicio-wrapper,
    #afa-nosotros#afa-nosotros,
    #afa-donar#afa-donar,
    #afa-conexion#afa-conexion,
    #afa-transparencia#afa-transparencia,
    #afa-campana#afa-campana
) :where(h1, h1 span, h1 strong) {
    color: transparent !important;
    background-image: var(--afa-title-gradient) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* La tecnica es la misma sobre fondos oscuros; cambia solo el contraste. */
#afa-transparencia#afa-transparencia .afa-tp-hero :where(h1, h1 span, h1 strong),
#afa-campana#afa-campana .hero :where(h1, h1 span, h1 strong) {
    background-image: var(--afa-title-gradient-dark) !important;
}

/* Titulos de seccion. El color existente se conserva segun el fondo. */
:is(
    #afa-inicio-wrapper#afa-inicio-wrapper,
    #afa-nosotros#afa-nosotros,
    #afa-donar#afa-donar,
    #afa-conexion#afa-conexion,
    #afa-transparencia#afa-transparencia,
    #afa-campana#afa-campana
) :where(h2) {
    font-family: var(--afa-font-heading) !important;
    font-size: clamp(2rem, 4.8vw, 4rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.08 !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

/* Titulos de tarjetas y subsecciones. */
:is(
    #afa-inicio-wrapper#afa-inicio-wrapper,
    #afa-nosotros#afa-nosotros,
    #afa-donar#afa-donar,
    #afa-conexion#afa-conexion,
    #afa-transparencia#afa-transparencia,
    #afa-campana#afa-campana
) :where(h3) {
    font-family: var(--afa-font-heading) !important;
    font-size: clamp(1.2rem, 2.4vw, 1.6rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
}

/* Lectura institucional consistente. */
:is(
    #afa-inicio-wrapper#afa-inicio-wrapper,
    #afa-nosotros#afa-nosotros,
    #afa-donar#afa-donar,
    #afa-conexion#afa-conexion,
    #afa-transparencia#afa-transparencia,
    #afa-campana#afa-campana
) :where(p, blockquote, dd) {
    font-family: var(--afa-font-reading) !important;
    line-height: 1.7 !important;
}

:is(
    #afa-inicio-wrapper#afa-inicio-wrapper,
    #afa-nosotros#afa-nosotros,
    #afa-donar#afa-donar,
    #afa-conexion#afa-conexion,
    #afa-transparencia#afa-transparencia,
    #afa-campana#afa-campana
) :where(p) {
    font-size: 1rem !important;
}

/* Entradillas y descripciones principales. */
#afa-nosotros#afa-nosotros :where(.nos-hero-lead, .nos-section-lead),
#afa-donar#afa-donar :where(.donar-hero-lead, .donar-section-lead),
#afa-conexion#afa-conexion :where(.cx-lead, .cx-section-lead),
#afa-transparencia#afa-transparencia .afa-tp-hero__lead,
#afa-campana#afa-campana :where(.hero__lead, .chapter__lead) {
    font-family: var(--afa-font-reading) !important;
    font-size: clamp(1.05rem, 2vw, 1.2rem) !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}

/* Kicker, eyebrow y rotulos de contexto. */
#afa-inicio-wrapper#afa-inicio-wrapper .afa-inicio-preview-kicker,
#afa-nosotros#afa-nosotros .nos-kicker,
#afa-donar#afa-donar :where(.donar-kicker, .donar-campaign-label),
#afa-conexion#afa-conexion .cx-kicker,
#afa-transparencia#afa-transparencia :where(.afa-tp-eyebrow, .afa-tp-index__title, .afa-tp-section__number),
#afa-campana#afa-campana :where(.eyebrow, .media-card__type) {
    font-family: var(--afa-font-heading) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.13em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
}

/* Botones y enlaces de accion. */
#afa-inicio-wrapper#afa-inicio-wrapper :where(.afa-inicio-btn-primary, .afa-inicio-preview-link),
#afa-nosotros#afa-nosotros .nos-button,
#afa-donar#afa-donar :where(.donar-button, .donar-copy),
#afa-conexion#afa-conexion :where(.cx-button, .cx-icon-button),
#afa-transparencia#afa-transparencia :where(.afa-tp-contact a, .afa-tp-modal__controls a, .afa-tp-modal__controls button),
#afa-campana#afa-campana .button {
    font-family: var(--afa-font-heading) !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
}

/* Etiquetas, datos cortos y controles operativos. */
:is(
    #afa-inicio-wrapper#afa-inicio-wrapper,
    #afa-nosotros#afa-nosotros,
    #afa-donar#afa-donar,
    #afa-conexion#afa-conexion,
    #afa-transparencia#afa-transparencia,
    #afa-campana#afa-campana
) :where(label, button, input, select, textarea, dt, small) {
    font-family: var(--afa-font-heading) !important;
}

/* El titulo del visor PDF es un control operativo, no un titulo de seccion. */
#afa-transparencia#afa-transparencia .afa-tp-modal__heading h2 {
    font-family: var(--afa-font-heading) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
    text-wrap: initial;
}

#afa-transparencia#afa-transparencia .afa-tp-modal__heading p {
    font-family: var(--afa-font-heading) !important;
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
}

@media (max-width: 420px) {
    :is(
        #afa-inicio-wrapper#afa-inicio-wrapper,
        #afa-nosotros#afa-nosotros,
        #afa-donar#afa-donar,
        #afa-conexion#afa-conexion,
        #afa-transparencia#afa-transparencia,
        #afa-campana#afa-campana
    ) :where(h1) {
        font-size: clamp(2.7rem, 14vw, 4rem) !important;
    }

    :is(
        #afa-inicio-wrapper#afa-inicio-wrapper,
        #afa-nosotros#afa-nosotros,
        #afa-donar#afa-donar,
        #afa-conexion#afa-conexion,
        #afa-transparencia#afa-transparencia,
        #afa-campana#afa-campana
    ) :where(h2) {
        font-size: clamp(1.8rem, 9vw, 2.7rem) !important;
    }

    :is(
        #afa-inicio-wrapper#afa-inicio-wrapper,
        #afa-nosotros#afa-nosotros,
        #afa-donar#afa-donar,
        #afa-conexion#afa-conexion,
        #afa-transparencia#afa-transparencia,
        #afa-campana#afa-campana
    ) :where(.afa-title--major) {
        font-size: clamp(2.2rem, 10.5vw, 3.35rem) !important;
    }
}

/* Alto contraste del sistema operativo: nunca depender del degradado. */
@media (forced-colors: active) {
    :is(
        #afa-inicio-wrapper#afa-inicio-wrapper,
        #afa-nosotros#afa-nosotros,
        #afa-donar#afa-donar,
        #afa-conexion#afa-conexion,
        #afa-transparencia#afa-transparencia,
        #afa-campana#afa-campana
    ) :where(h1, h1 span, h1 strong) {
        color: CanvasText !important;
        background: none !important;
        -webkit-text-fill-color: CanvasText !important;
    }

    :is(
        #afa-inicio-wrapper#afa-inicio-wrapper,
        #afa-nosotros#afa-nosotros,
        #afa-donar#afa-donar,
        #afa-conexion#afa-conexion,
        #afa-transparencia#afa-transparencia,
        #afa-campana#afa-campana
    ) :where(.afa-title--major, .afa-title--major span, .afa-title--major strong) {
        color: CanvasText !important;
        background: none !important;
        -webkit-text-fill-color: CanvasText !important;
    }
}

@media print {
    :is(
        #afa-inicio-wrapper#afa-inicio-wrapper,
        #afa-nosotros#afa-nosotros,
        #afa-donar#afa-donar,
        #afa-conexion#afa-conexion,
        #afa-transparencia#afa-transparencia,
        #afa-campana#afa-campana
    ) :where(h1, h1 span, h1 strong) {
        color: #001C2B !important;
        background: none !important;
        -webkit-text-fill-color: #001C2B !important;
    }

    :is(
        #afa-inicio-wrapper#afa-inicio-wrapper,
        #afa-nosotros#afa-nosotros,
        #afa-donar#afa-donar,
        #afa-conexion#afa-conexion,
        #afa-transparencia#afa-transparencia,
        #afa-campana#afa-campana
    ) :where(.afa-title--major, .afa-title--major span, .afa-title--major strong) {
        color: #001C2B !important;
        background: none !important;
        -webkit-text-fill-color: #001C2B !important;
    }
}