[data-animate] {
    opacity: 1;
    transform: none;
}

html.js [data-animate] {
    opacity: 0;
    transform: translateY(1.5rem);
}

html.js [data-animate].is-visible {
    opacity: 1;
    transform: none;
}

/* #region GLOBAL */
:root {
    /* Brand */
    --color-primary: #172752;
    --color-secondary: #7FA3D6;
    --color-accent: #FDC100;
    --color-ink: #172752;
    --color-tab: #E9E9E9;
    --color-surface: #fff;
    --color-surface-soft: #f6f8fc;

    /* Backward-compatible aliases */
    --school-primary: var(--color-primary);
    --school-secondary: var(--color-accent);
    --school-dark: var(--color-ink);
    --school-light: var(--color-surface-soft);
    --humanitree-navy: var(--color-primary);
    --humanitree-light-blue: var(--color-secondary);
    --humanitree-yellow: var(--color-accent);

    /* Typography: only Futura Book and Bold */
    --font-primary: "Futura Std", Arial, Helvetica, sans-serif;
    --font-weight-book: 400;
    --font-weight-bold: 700;

    --type-h1: 2.5rem;   /* 40px */
    --type-h1-ltp: 2rem;   /* 32px */
    --type-h2: 1.875rem; /* 30px */
    --type-h3: 1.25rem;  /* 20px */
    --type-h4: 1.125rem; /* 18px */
    --type-h5: 1rem;     /* 16px */
    --type-h6: .875rem;  /* 14px */
    --type-h7: .75rem;
    --type-metric: 3.75rem;

    --leading-heading: 1.1;
    --leading-body: 1.5;

    /* Spacing */
    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4rem;
    --section-space-compact: 2rem;
    --section-space-default: 4rem;
    --section-space-spacious: 6rem;

    /* Global layout */
    --site-header-height: 5rem;

    /* Reusable button defaults */
    --button-radius: 3.125rem;
    --button-border-width: 1px;
    --button-padding-block: .5rem;
    --button-padding-inline: 3rem;
    --button-content-gap: 0.75rem; /*1.3125*/

    /* Bootstrap alignment */
    --bs-font-sans-serif: var(--font-primary);
    --bs-body-font-family: var(--font-primary);
    --bs-body-font-size: var(--type-h5);
    --bs-body-font-weight: var(--font-weight-book);
    --bs-body-line-height: var(--leading-body);
    --bs-body-color: var(--color-ink);
    --bs-heading-color: inherit;

    /* Responsive layout density */
    --layout-gutter-x: 3.75rem;
    --layout-section-y: 3.75rem;
    --layout-component-gap: 3.75rem;
    --layout-radius: 2rem;
}

/* Desktop compacto*/ 
@media (min-width: 1200px) and (max-width: 1879.98px) { 
    :root { 
        --layout-gutter-x: clamp(2.25rem, 3vw, 3rem); 
        --layout-section-y: clamp(2.25rem, 3vw, 2.75rem); 
        --layout-component-gap: clamp(1.5rem, 2vw, 2rem); 
        --layout-radius: 1.5rem; 
    }
}

/* Desktop reducido*/ 
@media (min-width: 992px) and (max-width: 1199.98px) { 
    :root { 
        --layout-gutter-x: 2rem; 
        --layout-section-y: 2.25rem; 
        --layout-component-gap: 1.5rem; 
        --layout-radius: 1.5rem; 
    } 
}

/* Mobile */
@media (max-width: 767.98px) {
    :root {
        --type-h1: 1.5rem;   /* 24px */
        --type-h2: 1.25rem;  /* 20px */
        --type-h3: 1.125rem; /* 18px */
        --type-h4: 1rem;     /* 16px */
        --type-h5: .875rem;  /* 14px */
        --type-h6: .75rem;   /* 12px */

        --bs-body-font-size: var(--type-h5);
    }
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    color: var(--color-ink);
    background-color: var(--color-surface);
    font-family: var(--font-primary);
    font-size: var(--type-h5);
    font-weight: var(--font-weight-book);
    line-height: var(--leading-body);
}

button,
input,
select,
textarea {
    font: inherit;
}

/* Global keyboard focus */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

p {
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: inherit;
    font-family: var(--font-primary);
    font-style: normal;
    /* font-weight: var(--font-weight-bold); */
    line-height: var(--leading-heading);
}

h1,
.h1 {
    font-size: var(--type-h1);
}

h2,
.h2 {
    font-size: var(--type-h2);
}

h3,
.h3 {
    font-size: var(--type-h3);
}

h4,
.h4 {
    font-size: var(--type-h4);
}

h5,
.h5 {
    font-size: var(--type-h5);
}

h6,
.h6 {
    font-size: var(--type-h6);
}

strong,
b {
    font-weight: var(--font-weight-bold);
}

/* Normalize Bootstrap weights to the two approved Futura files. */
.fw-light,
.fw-normal {
    font-weight: var(--font-weight-book) !important;
}

.fw-medium,
.fw-semibold,
.fw-bold,
.fw-bolder {
    font-weight: var(--font-weight-bold) !important;
}

/* Typography utilities for non-heading semantic elements. */
.type-h1 { font-size: var(--type-h1); }
.type-h2 { font-size: var(--type-h2); }
.type-h3 { font-size: var(--type-h3); }
.type-h4 { font-size: var(--type-h4); }
.type-h5 { font-size: var(--type-h5); }
.type-h6 { font-size: var(--type-h6); }
.type-metric { font-size: var(--type-metric); }

.type-book {
    font-weight: var(--font-weight-book);
}

.type-bold {
    font-weight: var(--font-weight-bold);
}

/* Spacing helpers */
.section-compact {
    padding-block: var(--section-space-compact);
}

.section-normal {
    padding-block: var(--section-space-default);
}

.section-spacious {
    padding-block: var(--section-space-spacious);
}

.content-richtext > :last-child {
    margin-bottom: 0;
}

.content-richtext img {
    max-width: 100%;
    height: auto;
}
/* #endregion */

/* #region Reusable button */
.ht-button {
    --ht-btn-bg: var(--color-accent);
    --ht-btn-border: var(--ht-btn-bg);
    --ht-btn-text: var(--color-ink);
    --ht-btn-icon: currentColor;
    --ht-btn-hover: var(--ht-btn-bg);

    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-height: 2.625rem;
    align-items: center;
    justify-content: center;
    gap: var(--button-content-gap);
    padding:
        var(--button-padding-block)
        var(--button-padding-inline);
    color: var(--ht-btn-text);
    background-color: var(--ht-btn-bg);
    border:
        var(--button-border-width)
        solid
        var(--ht-btn-border);
    border-radius: var(--button-radius);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-book);
    font-size: var(--type-h4);
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color 200ms ease,
        background-color 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease,
        transform 200ms ease;
}

.ht-button:hover,
.ht-button:focus-visible {
    color: var(--ht-btn-text);
    background-color: var(--ht-btn-hover);
    border-color: var(--ht-btn-hover);
    /* box-shadow: 0 .65rem 1.5rem rgb(21 47 91 / 14%); */
    transform: translateY(-2px);
}

.ht-button:focus-visible {
    outline: 2px solid var(--ht-btn-border);
    outline-offset: 3px;
}

.ht-button[aria-disabled="true"],
.ht-button:disabled {
    opacity: .55;
    pointer-events: none;
}

.ht-button__icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    color: var(--ht-btn-icon);
    line-height: 1;
    font-weight: var(--font-weight-bold);
}

.bi.bold-icon::before {
    font-weight: var(--font-weight-bold) !important;
}

.ht-button__icon svg {
    display: block;
    width: 1em;
    height: 1em;
}

.ht-button__icon svg [fill]:not([fill="none"]) {
    fill: currentColor;
}

.ht-button__icon svg [stroke]:not([stroke="none"]) {
    stroke: currentColor;
}

.ht-button__label {
    min-width: 0;
}

.ht-button--selector {
    min-height: 2.375rem;
    gap: 0;
    padding: 0.5rem 2rem;
    border-radius: 3.125rem;
}

@media (max-width: 575.98px) {
    .ht-button{
        font-size: var(--type-h5);
    }
}
/* #endregion */

/* #region Header */
.site-header {
    position: sticky;
    z-index: 1035;
    top: 0;
    width: 100%;
    color: #fff;
    background-color: var(--color-primary);
    box-shadow: 0 .5rem 1.5rem rgb(4 27 61 / 16%);
    transition:
        background-color 300ms ease,
        box-shadow 300ms ease;
}

.site-header--home {
    position: fixed;
    right: 0;
    left: 0;
    background-color: transparent;
    box-shadow: none;
}

.site-header__main {
    min-height: 5rem;
    padding-block: 0;
    background-color: var(--color-primary);
    transition: background-color 300ms ease;
}

.site-header--home .site-header__main {
    background-color: transparent;
}

.site-header--solid,
.site-header--home.site-header--solid {
    background-color: var(--color-primary);
    box-shadow: 0 .5rem 1.5rem rgb(4 27 61 / 16%);
}

.site-header--solid .site-header__main,
.site-header--home.site-header--solid .site-header__main {
    background-color: var(--color-primary);
}

.site-header__brand {
    flex: 0 0 auto;
    color: #fff;
    line-height: 1;
    text-decoration: none;
}

.site-header__brand:hover,
.site-header__brand:focus-visible {
    color: #fff;
}

.site-header__brand-name {
    color: inherit;
    font-size: clamp(1rem, 1.5vw, 1.65rem);
    /* font-weight: var(--font-weight-bold); */
    letter-spacing: .22em;
    line-height: .95;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-header__tagline {
    margin-top: .375rem;
    color: inherit;
    font-size: clamp(.45rem, .55vw, .8rem);
    /* font-weight: var(--font-weight-bold); */
    letter-spacing: .2em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-header__actions {
    gap: clamp(.75rem, 1.8vw, 2.25rem);
    min-width: 0;
}

.site-header__desktop-links {
    gap: clamp(1.25rem, 2.8vw, 3.75rem);
}

.site-header__link {
    position: relative;
    padding-block: .625rem;
    color: #fff;
    font-weight: var(--font-weight-book);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.site-header__link::after {
    position: absolute;
    right: 0;
    bottom: .2rem;
    left: 0;
    height: 1px;
    background-color: currentColor;
    content: "";
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 180ms ease;
}

.site-header__link:hover,
.site-header__link:focus-visible {
    color: #fff;
}

.site-header__link:hover::after,
.site-header__link:focus-visible::after,
.site-header__link.is-active::after {
    transform: scaleX(1);
}

.site-header__language {
    gap: .35rem;
    color: rgb(255 255 255 / 70%);
    white-space: nowrap;
}

.site-header__language a {
    color: inherit;
    font-weight: var(--font-weight-book);
    text-decoration: none;
}

.site-header__language a:hover,
.site-header__language a:focus-visible,
.site-header__language a.is-active {
    color: #fff;
}

.site-header__language .bi {
    margin-left: .4rem;
    color: #fff;
    font-size: var(--type-h4);
}

.site-header__menu-button {
    display: inline-flex;
    flex: 0 0 auto;
    width: 2.875rem;
    height: 2.875rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    background-color: transparent;
    border: 0;
    border-radius: .25rem;
    font-size: 2rem;
    line-height: 1;
    transition: background-color 180ms ease;
}

.nav__divider {
    width: 100%;
    height: 1px;
    background-color: #d9d9d9;
    margin: 1rem 0;
}

.site-header__menu-button:hover,
.site-header__menu-button:focus-visible {
    color: #fff;
    background-color: rgb(255 255 255 / 10%);
}

.site-mobile-menu {
    --bs-offcanvas-width: 17.18rem; /*clamp(19rem, 24vw, 25rem)*/

    color: var(--color-primary);
    background-color: #fff;
    border: 0;
    box-shadow: -1.25rem 0 3rem rgb(4 27 61 / 16%);
}

.site-mobile-menu__header {
    min-height: 5rem;
    border-bottom: 0;
}

.site-mobile-menu__close {
    gap: .65rem;
    padding: .5rem 0;
    color: var(--color-primary);
    background-color: transparent;
    border: 0;
    font-weight: var(--font-weight-book);
    line-height: 1;
}

.site-mobile-menu__close-icon {
    font-size: var(--type-h4);
    transition: transform 200ms ease;
}

.site-mobile-menu__close:hover .site-mobile-menu__close-icon,
.site-mobile-menu__close:focus-visible .site-mobile-menu__close-icon {
    transform: translateX(.25rem);
}

.site-mobile-menu__utility {
    gap: 0;
}

.site-mobile-menu__primary {
    gap: 0;
    /* margin-top: var(--space-2);
    padding-top: var(--space-2); */
    /* border-top: 1px solid rgb(18 50 101 / 10%); */
}

.site-mobile-menu__primary a,
.site-mobile-menu__utility a {
    position: relative;
    width: fit-content;
    padding-block: .75rem;
    color: var(--color-primary);
    font-weight: var(--font-weight-book);
    line-height: 1.25;
    text-decoration: none;
}

.site-mobile-menu__primary a::after,
.site-mobile-menu__utility a::after {
    position: absolute;
    right: 0;
    bottom: .5rem;
    left: 0;
    height: 1px;
    background-color: #a6a8ad;
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 200ms ease;
}

.site-mobile-menu__primary a:hover,
.site-mobile-menu__primary a:focus-visible,
.site-mobile-menu__utility a:hover,
.site-mobile-menu__utility a:focus-visible {
    color: var(--color-primary);
}

.site-mobile-menu__primary a:hover::after,
.site-mobile-menu__primary a:focus-visible::after,
.site-mobile-menu__utility a:hover::after,
.site-mobile-menu__utility a:focus-visible::after {
    transform: scaleX(1);
}

.site-mobile-menu__cta {
    margin-top: var(--space-3);
}

.site-mobile-menu__language {
    gap: .5rem;
    padding-top: var(--space-4);
    color: rgb(18 50 101 / 55%);
}

.site-mobile-menu__language a {
    color: inherit;
    font-weight: var(--font-weight-book);
    text-decoration: none;
}

.site-mobile-menu__language a:hover,
.site-mobile-menu__language a:focus-visible,
.site-mobile-menu__language a.is-active,
.site-mobile-menu__language .bi {
    color: var(--color-primary);
}

@media (min-width: 1200px) {
    .px-xl-60 {
        padding-inline: 3.75rem !important;
    }
}

@media (max-width: 1199.98px) {
    .site-header__desktop-links {
        gap: 1.5rem;
    }
}

@media (max-width: 767.98px) {
    :root {
        --site-header-height: 4.25rem;
    }

    .site-mobile-menu {
        width: min(88vw, 23rem) !important;
    }

    .site-header__main {
        min-height: var(--site-header-height);
    }

    .site-header__brand-name {
        font-size: 1.05rem;
    }

    .site-header__tagline {
        margin-top: .3rem;
        font-size: .4rem;
        letter-spacing: .17em;
    }

    .site-header__menu-button {
        width: 2.625rem;
        height: 2.625rem;
    }
}

@media (max-width: 420px) {
    .site-header__brand-name {
        font-size: .94rem;
    }

    .site-header__tagline {
        max-width: 10.75rem;
        overflow: hidden;
        font-size: .36rem;
        letter-spacing: .13em;
        text-overflow: ellipsis;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .site-header,
    .site-header *,
    .site-mobile-menu * {
        transition: none !important;
    }

    .site-header {
        transform: none !important;
    }
}
/* #endregion */

/* #region Footer */
.site-footer {
    --footer-bg: #1b2f5a;
    --footer-text: #ffffff;
    --footer-hover: var(--color-accent);
    --footer-divider: rgb(255 255 255 / 24%);
    --footer-legal-bg: #050505;

    position: relative;
    z-index: 2;
    color: var(--footer-text);
    background-color: var(--footer-bg);
}

.site-footer__main {
    padding-block: 2.8rem;
}

.site-footer__container {
    padding-inline: 3.70rem;
}

.site-footer__brand {
    width: fit-content;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
}

.site-footer__brand:hover,
.site-footer__brand:focus-visible {
    color: inherit;
}

.site-footer__logo {
    display: block;
    width: min(100%, 19rem);
    max-height: 4.5rem;
    object-fit: contain;
    object-position: left center;
}

.site-footer__brand-name {
    color: inherit;
    font-size: clamp(1.75rem, 2.1vw, 2.5rem);
    /* font-weight: var(--font-weight-bold); */
    letter-spacing: .18em;
    line-height: .95;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-footer__tagline {
    margin-top: .5rem;
    color: inherit;
    font-size: clamp(.65rem, .7vw, .875rem);
    /* font-weight: var(--font-weight-bold); */
    letter-spacing: .22em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-footer__campus {
    min-width: 0;
}

.site-footer__campus-name {
    margin: 0 0 var(--space-3);
    color: inherit;
    /* font-weight: var(--font-weight-bold); */
    line-height: 1.15;
}

.site-footer__address {
    margin: 0;
    color: var(--footer-text);
    font-style: normal;
    /* font-weight: var(--font-weight-book); */
    line-height: 150%;
    /* white-space: pre-line; */
}

.site-footer__address a,
.site-footer__contact {
    color: inherit;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    /* text-underline-offset: .14em; */
    transition: color 180ms ease;
}

/* .site-footer__address a:hover,
.site-footer__address a:focus-visible,
.site-footer__contact:hover,
.site-footer__contact:focus-visible {
    color: var(--footer-hover);
} */

.site-footer__contact {
    display: block;
    width: fit-content;
    margin-top: .4rem;
    color: var(--footer-text);
}

.site-footer__aside {
    min-width: 0;
}

.site-footer__navigation-list {
    align-content: center;
    height: 100%;
}

.site-footer__link {
    position: relative;
    display: inline-block;
    width: fit-content;
    color: var(--footer-text);
    font-weight: var(--font-weight-book);
    line-height: 1.35;
    text-decoration: none;
    transition: color 180ms ease;
}

.site-footer__link::after {
    position: absolute;
    right: 0;
    bottom: -.12rem;
    left: 0;
    height: 1px;
    background-color: currentColor;
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 200ms ease;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
    color: var(--footer-hover);
}

.site-footer__link:hover::after,
.site-footer__link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

.site-footer__social-heading {
    margin: 0 0 var(--space-2);
    color: var(--footer-text);
    font-weight: var(--font-weight-book);
    line-height: 1.3;
}

.site-footer__social {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: var(--footer-text);
    text-decoration: none;
    opacity: .92;
    transition:
        color 180ms ease,
        opacity 180ms ease,
        transform 180ms ease;
}

.site-footer__social:hover,
.site-footer__social:focus-visible {
    color: var(--footer-hover);
    opacity: 1;
    transform: translateY(-2px);
}

.site-footer__social img {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
}

.site-footer__accreditation {
    display: inline-flex;
    max-width: 9rem;
    height: 3.75rem;
    align-items: center;
    justify-content: center;
}

.site-footer__accreditation img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.site-footer__legal-bar {
    padding-block: .5rem;
    color: rgb(255 255 255 / 72%);
    background-color: var(--footer-legal-bg);
}

.site-footer__copyright {
    color: inherit;
    font-weight: var(--font-weight-book);
    line-height: 1.4;
}

.site-footer__legal-links a {
    color: inherit;
    font-weight: var(--font-weight-book);
    text-decoration: none;
    transition: color 180ms ease;
}

.site-footer__legal-links a:hover,
.site-footer__legal-links a:focus-visible {
    color: var(--footer-hover);
}

@media (min-width: 1200px) {
    .site-footer__aside {
        border-left: 1px solid var(--footer-divider);
    }
}

@media (max-width: 1199.98px) {
    .site-footer__aside {
        padding-top: var(--space-5);
        border-top: 1px solid var(--footer-divider);
    }
}

@media (max-width: 767.98px) {
    .site-footer__main {
        padding-block: var(--space-5);
    }

    .site-footer__brand-name {
        font-size: 1.75rem;
    }

    .site-footer__tagline {
        font-size: .625rem;
        white-space: normal;
    }

    .site-footer__campus-name {
        margin-bottom: var(--space-2);
    }

    .site-footer__accreditation {
        max-width: 8rem;
        height: 3.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer *,
    .site-footer *::before,
    .site-footer *::after {
        transition: none !important;
    }
}
/* #endregion */

/* #region Bootstrap layer fixes */
.modal-backdrop {
    z-index: 1050 !important;
}

.modal {
    z-index: 1055 !important;
}

.modal-dialog {
    position: relative;
    z-index: 1056;
}
/* #endregion */

/* #region Reveal Animations */
.animations-enabled [data-animate] {
    --animation-delay: 0ms;

    opacity: 0;
    filter: blur(6px);
    transition:
        opacity 850ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 950ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 850ms ease;

    transition-delay: var(--animation-delay);
    will-change: opacity, transform, filter;
}

.animations-enabled [data-animate="fade-up"] {
    transform: translate3d(0, 70px, 0);
}

.animations-enabled [data-animate="slide-left"] {
    transform: translate3d(-130px, 0, 0) rotateY(5deg);
}

.animations-enabled [data-animate="slide-right"] {
    transform: translate3d(130px, 0, 0) rotateY(-5deg);
}

.animations-enabled [data-animate="zoom-in"] {
    transform: translate3d(0, 25px, 0) scale(0.82);
}

.animations-enabled [data-animate="none"],
.animations-enabled [data-animate].is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }
}

/* <--- ONE PAGE SECTIONS ---> */
.onepage-section {
    position: relative;
    margin: 0;
    padding-block: clamp(1.5rem, 6vw, 3.5rem);
    scroll-margin-top: calc(var(--site-header-height, 76px) + 0.75rem);
}

.onepage-section + .onepage-section {
    margin-top: 0;
}

@media (max-width: 767.98px) {
    .onepage-section {
        padding-block: 1.25rem;
    }
}

/* #endregion */

/* #region Visual sections */ 
.visual-section-transition { 
    --visual-current-bg: var(--color-surface, #fff); 
    --visual-before-bg: var(--visual-current-bg); 
    --visual-after-bg: var(--visual-current-bg);
    
    /* --visual-space-x: 3.75rem;
    --visual-space-y: 3.75rem; 
    --visual-radius: 2rem; */
    --visual-space-x: var(--layout-gutter-x);
    --visual-space-y: var(--layout-section-y);
    --visual-radius: var(--layout-radius);
    --visual-space-x-tablet: 2rem;
    --visual-space-y-tablet: 3rem;
    --visual-space-x-mobile: 1.5rem;
    --visual-space-y-mobile: 2.5rem;
    --visual-layer: 1;

    position: relative;
    z-index: var(--visual-layer);
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;

    /*
    * El color superior pertenece a la sección anterior.
    * El inferior pertenece a la siguiente sección.
    * Así se rellenan correctamente los espacios que dejan
    * los bordes redondeados.
    */
    background:
        linear-gradient(
            to bottom,
            var(--visual-before-bg) 0%,
            var(--visual-before-bg) 50%,
            var(--visual-after-bg) 50%,
            var(--visual-after-bg) 100%
        );
}

.visual-section-surface { 
    position: relative; 
    width: 100%; 
    min-width: 0; 
    overflow: clip; 
    color: inherit; 
    background-color: var(--visual-current-bg); 
    border-radius: var(--visual-radius); 
}

.visual-section-inner { 
    width: 100%; 
    max-width: none; 
    margin: 0; 
    padding-block: var(--visual-space-y); 
    padding-inline: var(--visual-space-x); 
}

.visual-section-transition--first { 
    --visual-before-bg: transparent;
    margin-top: 0 !important; 
    transform: none !important; 
}

.visual-section-transition--overlap, 
.visual-section-transition--underlap { 
    margin-top: 0; 
    transform: none; 
}

/* Sección visual que se superpone sobre la sección anterior */
.visual-section-transition--overlap-previous { 
    --visual-overlap: var(--visual-radius, 1.75rem);
    position: relative;
    z-index: var(--visual-layer, 20);

    margin-top: calc(var(--visual-overlap) * -1);
    overflow: visible;

    background:
        linear-gradient(
            to bottom,
            var(--visual-before-bg) 0 50%,
            var(--visual-after-bg) 50% 100%
        );
}

.visual-section-transition--overlap-previous::before, 
.visual-section-transition--overlap-previous::after { 
    content: none; 
}

.visual-section-transition--overlap-previous .visual-section-surface { 
    position: relative; 
    overflow: hidden;
    background-color: var(--visual-current-bg);
    border-radius: var(--visual-radius);
}

@media (max-width: 991.98px) { 
    .visual-section-inner { 
        padding-block: var(--visual-space-y-tablet); 
        padding-inline: var(--visual-space-x-tablet); 
    } 
}

@media (max-width: 575.98px) { 
    .visual-section-transition { 
        --visual-radius: 1.5rem; 
    }
    .visual-section-inner {
        padding-block: var(--visual-space-y-mobile);
        padding-inline: var(--visual-space-x-mobile);
    }
} 
/* #endregion */

/* #region Generic tags */ 
.ht-tag { 
    --ht-tag-width: auto; 
    --ht-tag-height: 2.375rem; 
    --ht-tag-radius: .5rem;
    --ht-tag-bg: transparent;
    --ht-tag-border: transparent;
    --ht-tag-text: currentColor;

    --ht-tag-hover-bg: var(--ht-tag-bg);
    --ht-tag-hover-border: var(--ht-tag-border);
    --ht-tag-hover-text: var(--ht-tag-text);

    display: inline-flex;
    width: var(--ht-tag-width);
    max-width: 100%;
    min-height: var(--ht-tag-height);
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem 1rem;
    overflow: hidden;

    color: var(--ht-tag-text);
    font-family: var(--font-primary);
    font-size: var(--type-h4);
    font-weight: var(--font-weight-book);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;

    background-color: var(--ht-tag-bg);
    border: 1px solid var(--ht-tag-border);
    border-radius: var(--ht-tag-radius);

    transition:
        color 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease;
}

.ht-tag:is(a, button):hover { 
    color: var(--ht-tag-hover-text); 
    background-color: var(--ht-tag-hover-bg); 
    border-color: var(--ht-tag-hover-border); 
}

.ht-tag:is(a, button):focus-visible { 
    outline: 3px solid var(--color-accent, #ffc400); 
    outline-offset: 3px; 
} 
/* #endregion */

/* #region Generic statistic card */ 
.ht-stat-card { 
    --stat-card-bg: transparent; 
    --stat-card-color: currentColor; 
    --stat-card-radius: 1rem; 
    --stat-card-gap: .75rem;
    --stat-image-overlay: #00000066;

    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;

    color: var(--stat-card-color);
    background-color: transparent;
}

.ht-stat-card__copy, 
.ht-stat-card__media { 
    min-width: 0; 
    min-height: 0; 
    overflow: hidden;
    border-radius: var(--stat-card-radius); 
}

.ht-stat-card__copy { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 100%; 
    padding: 1.5rem; 
    color: var(--stat-card-color); 
    text-align: center; 
    background-color: var(--stat-card-bg); 
}

.ht-stat-card__value { 
    display: block; 
    color: inherit; 
    line-height: 1; 
    font-variant-numeric: tabular-nums; 
    font-size: var(--type-metric);
}

.ht-stat-card__description { 
    width: 100%; 
    margin-top: 1rem; 
    color: inherit; 
}

.ht-stat-card__description > :first-child { 
    margin-top: 0; 
}

.ht-stat-card__description > :last-child { 
    margin-bottom: 0; 
}

.ht-stat-card__media { 
    position: relative; 
    height: 100%; 
    margin: 0; 
    background-color: #d9d9d5; 
    isolation: isolate; 
}

.ht-stat-card__media::after { 
    position: absolute;
    z-index: 1;
    inset: 0; 
    content: "";
    background-color: var(--stat-image-overlay);
    pointer-events: none;
}

.ht-stat-card__media img { 
    position: relative;
    z-index: 0;
    display: block;
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center;
    transition:
        filter 600ms ease,
        transform 900ms cubic-bezier(.22, 1, .36, 1);
}

.ht-stat-card--overlay { 
    overflow: hidden; 
    background-color: var(--stat-card-bg); 
    border-radius: var(--stat-card-radius); 
    isolation: isolate; 
}

.ht-stat-card--overlay .ht-stat-card__media { 
    position: absolute; 
    z-index: 0; 
    inset: 0; 
    border-radius: inherit; 
}

.ht-stat-card--overlay .ht-stat-card__copy { 
    position: absolute; 
    z-index: 2; 
    inset: 0; 
    align-items: center; 
    justify-content: flex-end; 
    color: var(--stat-card-color); 
    background: 
        linear-gradient( 
            180deg, 
            transparent 30%, 
            rgb(7 25 48 / 25%) 58%,
            rgb(7 25 48 / 88%) 100% 
        ); 
    border-radius: inherit; 
}

.ht-stat-card--split { 
    display: grid; 
    gap: var(--stat-card-gap); 
}

.ht-stat-card--text { 
    overflow: hidden; 
    background-color: var(--stat-card-bg); 
    border-radius: var(--stat-card-radius); 
}

.ht-stat-card--text .ht-stat-card__copy {
    border-radius: inherit; 
}

.ht-stat-card--split.has-no-image { 
    grid-template-rows: minmax(0, 1fr) !important; 
}

@media (hover: hover) and (pointer: fine) { 
    .ht-stat-card { 
        transition: 
            filter 350ms ease, 
            transform 350ms cubic-bezier(.22, 1, .36, 1); 
    }
    .ht-stat-card:hover {
        z-index: 3;
        filter:
            drop-shadow(
                0 1.25rem 1.5rem
                rgb(21 47 91 / 13%)
            );
        transform: translateY(-.4rem);
    }

    .ht-stat-card:hover .ht-stat-card__media img {
        filter:
            saturate(1.05)
            contrast(1.025);
        transform: scale(1.045);
    }
}

@media (prefers-reduced-motion: reduce) { 
    .ht-stat-card, 
    .ht-stat-card__media img { 
        transition: none; 
    }
    
    .ht-stat-card:hover,
    .ht-stat-card:hover .ht-stat-card__media img {
        transform: none;
    }
} 
/* #endregion */

/* #region Reusable tabs */
.ht-tabs { --ht-tab-radius: 50px; --ht-tab-padding-y: 0.5rem; --ht-tab-padding-x: 3rem; --ht-tab-gap: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: var(--ht-tab-gap);

/* Anula valores visuales predeterminados de Bootstrap */
--bs-nav-pills-border-radius: var(--ht-tab-radius);
}
/*
Los colores se leen desde cada .ht-tab.
El contenedor no define colores. */ .nav-pills.ht-tabs .nav-link.ht-tab { display: inline-flex; flex: 0 0 auto; width: auto; min-height: 2.75rem; align-items: center; justify-content: center; padding: var(--ht-tab-padding-y) var(--ht-tab-padding-x);
color: var(--ht-tab-color, #aaa); background-color: var(--ht-tab-bg, #fff); border: 1px solid var(--ht-tab-border, #aaa); border-radius: var(--ht-tab-radius);
font-family: var(--font-primary); font-size: var(--font-size-h4, 1.125rem); font-weight: var(--font-weight-book); line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap;
box-shadow: none; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.nav-pills.ht-tabs .nav-link.ht-tab:hover { color: var( --ht-tab-hover-color, var(--ht-tab-active-color, #fff) );
background-color: var(
    --ht-tab-hover-bg,
    var(--ht-tab-accent)
);

border-color: var(
    --ht-tab-hover-border,
    var(--ht-tab-accent)
);

transform: translateY(-2px);
}
.nav-pills.ht-tabs .nav-link.ht-tab.active, .nav-pills.ht-tabs .nav-link.ht-tab[aria-selected="true"], .nav-pills.ht-tabs .show > .nav-link.ht-tab { color: var(--ht-tab-active-color, #fff); background-color: var(--ht-tab-active-bg, var(--ht-tab-accent)); border-color: var(--ht-tab-active-border, var(--ht-tab-accent)); border-radius: var(--ht-tab-radius);
box-shadow:
    0 0.5rem 1.25rem
    color-mix(
        in srgb,
        var(--ht-tab-accent) 25%,
        transparent
    );

transform: translateY(-2px);
}
.nav-pills.ht-tabs .nav-link.ht-tab:focus-visible { outline: 3px solid color-mix( in srgb, var(--ht-tab-accent) 35%, transparent ); outline-offset: 3px; }
.nav-pills.ht-tabs .nav-link.ht-tab > *, .nav-pills.ht-tabs .nav-link.ht-tab p { margin: 0; color: inherit; font: inherit; }

@media (max-width: 991.98px) { 
    .ht-tabs { 
        flex-wrap: nowrap; 
        justify-content: flex-start; 
        max-width: 100%; 
        overflow-x: auto; 
        padding-bottom: 0.5rem; 
        scrollbar-width: none; 
    }
    
    .ht-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-pills.ht-tabs .nav-link.ht-tab {
        --ht-tab-padding-x: 1.5rem;
    }
}
/* #endregion */

/* #region Generic page hero (After Aprendizaje) */
.page-hero {
    position: sticky;
    z-index: 0;
    top: 0;
    isolation: isolate;
    width: 100%;
    height: 100svh;
    min-height: 36rem;
    overflow: hidden;
    background-color: var(--color-primary);
}

.page-hero__picture {
    position: absolute;
    inset: 0;
}

.page-hero__picture,
.page-hero__media {
    display: block;
    width: 100%;
    height: 100%;
}

.page-hero__media {
    object-fit: cover;
    object-position: center;

    animation:
        page-hero-media-enter
        1200ms
        cubic-bezier(.22, 1, .36, 1)
        both;
}

.page-hero__overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgb(12 29 62 / 92%) 0%,
            rgb(12 29 62 / 47%) 16%,
            rgb(12 29 62 / 8%) 38%,
            transparent 50%
        ),
        linear-gradient(
            0deg,
            rgb(12 38 76 / 94%) 0%,
            rgb(12 38 76 / 52%) 17%,
            rgb(12 38 76 / 8%) 39%,
            transparent 51%
        ),
        linear-gradient(
            rgb(6 18 42 / 12%),
            rgb(6 18 42 / 12%)
        );
    pointer-events: none;
}

.page-hero__action {
    position: absolute;
    z-index: 2;
    right: 1.5rem;
    bottom: clamp(2rem, 5vw, 4rem);
    left: 1.5rem;

    display: flex;
    justify-content: center;
}

.learning-page__content {
    position: relative;
    z-index: 2;
    width: 100%;
    isolation: isolate;
}

.page-first-section {
    position: relative;
    z-index: 2;
    margin-top: 0;
}

.page-first-section .visual-section-surface {
    overflow: hidden;
    border-radius:
        var(--visual-radius, 2rem)
        var(--visual-radius, 2rem)
        var(--visual-radius, 2rem)
        var(--visual-radius, 2rem);
}

@keyframes page-hero-media-enter {
    from {
        opacity: 0;
        transform: scale(1.035);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 767.98px) {
    .page-hero {
        --page-hero-height: clamp(
            30rem,
            100svh,
            48rem
        );
    }

    .page-hero__action {
        right: 1rem;
        bottom: 2rem;
        left: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-hero__media {
        animation: none;
    }
}
/* #endregion */