/* ============================================================
   USAM
   BASE.CSS
============================================================ */


/* ============================================================
   1. VARIABLES
============================================================ */

:root {

    /* Colores institucionales */
    --navy: #081a40;
    --indigo: #134582;
    --aqua: #6fc8cc;
    --red: #9b242d;

    --soft-gray: #efefef;
    --white: #ffffff;
    --black: #000000;


    /* Header */
    --header-height: 80px;


    /* Contenedores */
    --container-desktop: 1200px;
    --container-full: 1280px;


    /* Movimiento global */
    --motion-fast: 250ms;
    --motion-base: 450ms;
    --motion-slow: 700ms;

    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --ease-smooth: cubic-bezier(.22, .61, .36, 1);
    --ease-soft: cubic-bezier(.16, 1, .3, 1);

}


/* ============================================================
   2. RESET / BASE
============================================================ */

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}


*,
*::before,
*::after {
    box-sizing: inherit;
}


html,
body {
    margin: 0;
    padding: 0;
}


body {
    font-family: 'Montserrat', sans-serif;

    color: #111;
    background: var(--white);
}


body,
nav,
ul,
li,
a,
button,
input,
textarea,
select {
    font-family: 'Montserrat', sans-serif;
}


img {
    max-width: 100%;
    height: auto;
}


a {
    text-decoration: none;
}


button {
    font-family: inherit;
}


/* ============================================================
   3. ACCESSIBILITY / SEO
============================================================ */

.seo-h1,
.visually-hidden,
.sr-only {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;

}


/* ============================================================
   4. SPLASH INTELIGENTE
============================================================ */

.site-splash {

    position: fixed;
    inset: 0;

    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--navy);

    opacity: 1;
    visibility: visible;

    transition:
        opacity .55s ease,
        visibility .55s ease;

}


.site-splash.is-hidden {

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

}


.site-splash-content {

    width: min(260px, 60vw);

    display: flex;
    flex-direction: column;
    align-items: center;

}


.site-splash-logo {

    display: block;

    width: 190px;
    max-width: 100%;

    opacity: 0;

    transform:
        translateY(12px)
        scale(.97);

    animation:
        splashLogoIn
        .7s
        ease
        forwards;

}


.site-splash-progress {

    width: 120px;
    height: 3px;

    margin-top: 26px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, .18);

    border-radius: 20px;

}


.site-splash-progress span {

    display: block;

    width: 45%;
    height: 100%;

    background: var(--aqua);

    border-radius: inherit;

    animation:
        splashProgress
        1.15s
        ease-in-out
        infinite;

}


@keyframes splashLogoIn {

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes splashProgress {

    0% {
        transform: translateX(-110%);
    }

    50% {
        transform: translateX(90%);
    }

    100% {
        transform: translateX(250%);
    }

}


html.is-loading,
html.is-loading body {
    overflow: hidden;
}


/* ============================================================
   5. HEADER GENERAL
============================================================ */

.usam-header {

    position: relative;

    z-index: 1000;

    overflow: visible;

}


.usam-header nav {

    height: var(--header-height);
    line-height: var(--header-height);

    background: var(--navy);

    border-radius:
        0
        0
        55px
        55px;

    box-shadow: none;

}


.usam-header .container {

    width: 90%;
    max-width: var(--container-desktop);

}


.header-desktop {
    display: block;
}


.header-mobile {
    display: none;
}


/* ============================================================
   6. LOGO DESKTOP
============================================================ */

.usam-nav .brand-logo {

    position: absolute;

    top: 0;
    left: 0;

    height: var(--header-height);

    display: flex;
    align-items: center;

}


.usam-nav .brand-logo img {

    display: block;

    width: auto;
    height: 58px;

}


/* ============================================================
   7. MENÚ DESKTOP
============================================================ */

.usam-menu {

    display: flex;
    align-items: center;

    height: var(--header-height);

    margin: 0;
    padding: 0;

    list-style: none;

}


.usam-menu > li {

    position: relative;

    height: var(--header-height);

    margin: 0;
    padding: 0;

}


.usam-menu > li > a {

    position: relative;

    height: var(--header-height);

    display: flex;
    align-items: center;

    padding: 0 10px;

    color: var(--white);

    font-size: 14px;
    font-weight: 400;

    line-height: normal;

    white-space: nowrap;

    transition:
        color .2s ease,
        opacity .2s ease;

}


.usam-menu > li > a:hover {

    background: transparent;

    opacity: .82;

}


/* ============================================================
   8. INDICADOR ACTIVO
============================================================ */

.usam-menu > li.active > a::after {

    content: "";

    position: absolute;

    left: 10px;
    right: 10px;

    bottom: 18px;

    height: 3px;

    background: var(--red);

    border-radius: 5px;

}


/* ============================================================
   9. SUBMENÚ DESKTOP
============================================================ */

.submenu-container {
    position: relative;
}


.submenu {

    position: absolute;

    top: 67px;
    left: 10px;

    width: 275px;

    display: none;

    margin: 0;
    padding: 10px 0;

    list-style: none;

    background: var(--aqua);

    border-radius: 4px;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, .12);

    z-index: 9999;

}


.submenu-right {

    left: auto;
    right: 0;

}


.submenu-container:hover > .submenu,
.submenu-container:focus-within > .submenu {
    display: block;
}


.submenu li {

    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

}


.submenu li a {

    width: 100%;

    display: flex;
    align-items: flex-start;

    padding: 8px 18px;

    color: #07101d;

    font-size: 13.5px;
    font-weight: 400;

    line-height: 1.35;

    white-space: normal;

    transition:
        background .2s ease;

}


.submenu li a::before {

    content: "chevron_right";

    flex: 0 0 auto;

    margin-top: 1px;
    margin-right: 7px;

    font-family: "Material Icons";
    font-size: 17px;
    line-height: 1;

}


.submenu li:hover,
.submenu li:focus-within {
    background:
        rgba(0, 0, 0, .08);
}


/* ============================================================
   10. IDIOMA / BUSCADOR DESKTOP
============================================================ */

.lang-item a {

    padding-left: 4px !important;
    padding-right: 4px !important;

}


.lang-separator {

    height: var(--header-height);

    display: flex;
    align-items: center;

    padding: 0 1px;

    color: var(--white);

    opacity: .65;

}


.search-icon {
    font-size: 22px;
}


.search-item > a {

    padding-left: 8px !important;
    padding-right: 8px !important;

}


/* ============================================================
   11. HEADER MÓVIL / TABLET
============================================================ */

.mobile-nav-wrapper {

    width: 100%;
    height: var(--header-height);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 24px;

}


.mobile-logo {

    height: var(--header-height);

    display: flex !important;
    align-items: center;

}


.mobile-logo img {

    display: block;

    width: auto;
    height: 52px;

}


.mobile-menu-btn {

    position: static !important;

    float: none !important;

    height: var(--header-height) !important;

    margin: 0 !important;

    line-height: var(--header-height) !important;

}


.mobile-menu-btn i {

    height: var(--header-height) !important;

    color: var(--white);

    font-size: 31px;

    line-height: var(--header-height) !important;

}


/* ============================================================
   12. SIDENAV
============================================================ */

.usam-sidenav {

    width: min(365px, 88vw) !important;

    padding: 0 !important;

    background: var(--navy) !important;

    z-index: 10000 !important;

}


/* Iconos blancos Materialize */

.sidenav li > a > i,
.sidenav li > a > [class^="mdi-"],
.sidenav li > a > [class*="mdi-"],
.sidenav li > a > i.material-icons {

    color: var(--white) !important;

}


.sidenav-top {
    min-height: 100px !important;
}


.mobile-header-inner {

    min-height: 100px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 20px;

}


.sidenav-header {

    height: auto !important;

    display: flex !important;
    align-items: center;

    padding: 0 !important;

}


.sidenav-header img {

    display: block;

    width: auto;
    height: 52px;

}


.mobile-close-btn {

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--white);

    background: transparent;

    border: 0;

    cursor: pointer;

}


.mobile-close-btn i {
    font-size: 30px;
}


/* ============================================================
   13. SIDENAV COLLAPSIBLE
============================================================ */

.usam-sidenav .collapsible {

    margin: 0;

    border: 0;

    box-shadow: none;

}


/* ============================================================
   13.1 SIDENAV - ENCABEZADO INTERACTIVO
============================================================ */

.usam-sidenav .collapsible-header {

    width: 100% !important;
    min-height: 55px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 0;

    padding:
        0
        22px !important;

    color: var(--white) !important;

    background:
        transparent !important;

    border: 0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius: 0;

    box-shadow: none !important;

    font-family: inherit;

    font-size: 15px;
    font-weight: 500;

    line-height: normal;

    text-align: left;

    text-transform: none;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}


/* Texto del botón */

.usam-sidenav
.collapsible-header
span {

    min-width: 0;

    flex:
        1
        1
        auto;

    color:
        var(--white) !important;

}


/* Icono */

.usam-sidenav
.collapsible-header
.mobile-dropdown-icon {

    flex:
        0
        0
        auto;

    margin:
        0
        0
        0
        10px !important;

    color:
        var(--white) !important;

    pointer-events: none;

}


/* Flecha */

.usam-sidenav .mobile-dropdown-icon {

    font-size: 21px;

    transition:
        transform .25s ease;

}


.usam-sidenav
.active
>
.collapsible-header
.mobile-dropdown-icon {

    transform:
        rotate(180deg);

}


/* ============================================================
   13.2 CUERPO DEL SUBMENÚ
============================================================ */

.usam-sidenav .collapsible-body {

    padding: 5px 0;

    background:
        #0d2b5a !important;

    border: 0;

}


.usam-sidenav
.collapsible-body
ul,
.usam-sidenav
.collapsible-body
li {

    background:
        transparent !important;

}


.usam-sidenav
.collapsible-body
li {

    min-height: auto;

}


.usam-sidenav
.collapsible-body
li
a {

    height: auto !important;
    min-height: 42px !important;

    display: flex;
    align-items: center;

    padding:
        9px
        28px
        9px
        38px !important;

    color:
        var(--white) !important;

    background:
        transparent !important;

    font-size: 13px !important;
    font-weight: 400;

    line-height: 1.4 !important;

    white-space: normal !important;

}


/* ============================================================
   13.3 ANCHO COMPLETO
============================================================ */

.usam-sidenav > li,
.usam-sidenav .mobile-dropdown,
.usam-sidenav .mobile-dropdown > li {

    width: 100%;

}


/* Evita comportamiento visual propio del icono */

.usam-sidenav
.collapsible-header
.mobile-dropdown-icon {

    flex:
        0
        0
        auto;

    margin:
        0
        0
        0
        10px !important;

    pointer-events: none;

}


/* El texto puede ocupar todo el espacio restante */

.usam-sidenav
.collapsible-header
span {

    min-width: 0;

    flex:
        1
        1
        auto;

}


/* ============================================================
   14. SIDENAV LINKS DIRECTOS
============================================================ */

.mobile-direct-link > a {

    min-height: 55px !important;

    display: flex !important;
    align-items: center;

    padding: 0 22px !important;

    color: var(--white) !important;

    font-size: 15px !important;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .10);

}


.mobile-search {
    gap: 10px;
}


.mobile-search i {
    margin: 0 !important;
}


/* ============================================================
   15. IDIOMAS MÓVIL
============================================================ */

.mobile-lang {

    min-height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    color: var(--white);

}


.mobile-lang a {

    height: auto !important;

    padding: 8px !important;

    color: var(--white) !important;

    line-height: normal !important;

}


.lang-divider {
    opacity: .6;
}


/* ============================================================
   16. MATERIALIZE OVERLAY
============================================================ */

.sidenav-overlay {

    z-index: 9999 !important;

}


/* ============================================================
   17. RESPONSIVE HEADER
============================================================ */


/* ============================================================
   MÓVIL
   0 - 767px
============================================================ */

@media (max-width: 767px) {

    :root {
        --header-height: 70px;
    }


    .header-desktop {
        display: none !important;
    }


    .header-mobile {
        display: block !important;
    }


    .header-mobile .sidenav-trigger,
    .header-mobile .mobile-menu-btn {

        display: flex !important;

        align-items: center;
        justify-content: center;

    }


    .usam-header nav {

        border-radius:
            0
            0
            28px
            28px;

    }


    .mobile-nav-wrapper {
        padding: 0 18px;
    }


    .mobile-logo img {
        height: 43px;
    }


    .mobile-menu-btn i {
        font-size: 29px;
    }


    .site-splash-content {
        width: min(230px, 65vw);
    }


    .site-splash-logo {
        width: 155px;
    }


    .site-splash-progress {

        width: 95px;

        margin-top: 22px;

    }

}


/* ============================================================
   TABLET
   768 - 1279px
============================================================ */

@media (min-width: 768px) and (max-width: 1279px) {

    :root {
        --header-height: 80px;
    }


    .header-desktop {
        display: none !important;
    }


    .header-mobile {
        display: block !important;
    }


    .header-mobile .sidenav-trigger,
    .header-mobile .mobile-menu-btn {

        display: flex !important;

        align-items: center;
        justify-content: center;

    }


    .mobile-nav-wrapper {

        padding-left: 5%;
        padding-right: 5%;

    }


    .mobile-logo img {
        height: 54px;
    }

}


/* ============================================================
   ESCRITORIO PEQUEÑO
   1280 - 1499px
============================================================ */

@media (min-width: 1280px) and (max-width: 1499px) {

    .header-desktop {
        display: block !important;
    }


    .header-mobile {
        display: none !important;
    }


    .usam-header .container {
        width: 97%;
    }


    .usam-nav .brand-logo img {
        height: 48px;
    }


    .usam-menu > li > a {

        padding:
            0
            5px;

        font-size: 11px;

    }


    .usam-menu > li.active > a::after {

        left: 5px;
        right: 5px;

    }


    .lang-item a {

        padding-left: 2px !important;
        padding-right: 2px !important;

    }


    .search-item > a {

        padding-left: 4px !important;
        padding-right: 4px !important;

    }

}


/* ============================================================
   ESCRITORIO MEDIO
   1500 - 1699px
============================================================ */

@media (min-width: 1500px) and (max-width: 1699px) {

    .header-desktop {
        display: block !important;
    }


    .header-mobile {
        display: none !important;
    }


    .usam-menu > li > a {

        padding:
            0
            7px;

        font-size: 12.5px;

    }

}


/* ============================================================
   ESCRITORIO GRANDE
   1700 - 1920px
============================================================ */

@media (min-width: 1700px) and (max-width: 1920px) {

    .header-desktop {
        display: block !important;
    }


    .header-mobile {
        display: none !important;
    }


    .usam-menu > li > a {

        padding:
            0
            10px;

        font-size: 14px;

    }

}


/* ============================================================
   FULL
   1921px+
============================================================ */

@media (min-width: 1921px) {

    .header-desktop {
        display: block !important;
    }


    .header-mobile {
        display: none !important;
    }


    .usam-header .container {

        max-width:
            var(--container-full);

    }


    .usam-nav .brand-logo img {
        height: 60px;
    }


    .usam-menu > li > a {

        padding:
            0
            13px;

        font-size: 15px;

    }

}


/* ============================================================
   18. FOOTER
============================================================ */

.footer {
    margin-top: 25px;

    color: var(--white);
    background: var(--navy);
}


/* ============================================================
   19. FOOTER MAIN
   ESCRITORIO 1280+
============================================================ */

.footer-main {
    width: 90%;
    max-width: var(--container-desktop);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        130px
        minmax(0, 1fr)
        235px;

    gap: 38px;

    padding: 26px 0 28px;
}


/* ============================================================
   20. FOOTER LOGO
============================================================ */

.footer-logo {
    display: flex;
    align-items: flex-start;
}


.footer-logo a {
    display: block;
}


.footer-logo img {
    display: block;

    width: 115px;
    height: auto;
}


/* ============================================================
   21. FOOTER NAVEGACIÓN
============================================================ */

.footer-navigation {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px 30px;

    height: auto !important;
    line-height: normal !important;

    padding-right: 32px;

    background: transparent !important;

    border-right:
        1px solid
        var(--aqua);

    box-shadow: none !important;
}


.footer-group {
    min-width: 0;
}


/* ============================================================
   22. FOOTER TÍTULOS
============================================================ */

.footer-title {
    min-height: 24px;

    display: flex;
    align-items: center;

    margin: 0 0 3px;

    color: var(--aqua) !important;

    font-size: 16px;
    font-weight: 500;

    line-height: 1.25;
}


/* ============================================================
   23. FOOTER SUBMENÚ
============================================================ */

.footer-submenu {
    display: grid;

    grid-template-columns:
        repeat(3, max-content);

    gap: 1px 9px;
}


.footer-submenu a {
    min-height: 24px;

    display: flex;
    align-items: center;

    color: var(--white) !important;

    font-size: 11px;
    font-weight: 400;

    line-height: 1.4;

    white-space: nowrap;
}


.footer-title:hover,
.footer-submenu a:hover {
    opacity: .75;
}


/* ============================================================
   24. FOOTER IDIOMAS
============================================================ */

.footer-language {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 2px;
}


.footer-language a {
    min-width: 24px;
    min-height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 2px 4px;

    color: var(--white);

    font-size: 11px;

    line-height: 1;
}


.footer-language a.active {
    font-weight: 700;
}


.footer-language span {
    display: block;

    width: 1px;
    height: 18px;

    background:
        rgba(255, 255, 255, .60);
}


/* ============================================================
   25. FOOTER INFORMACIÓN
============================================================ */

.footer-info {
    min-width: 0;
}


.footer-info h5 {
    margin: 0 0 6px;

    color: var(--aqua);

    font-size: 14px;
    font-weight: 700;

    line-height: 1.2;
}


/* ============================================================
   26. FOOTER REDES
============================================================ */

.footer-social {
    margin-bottom: 13px;
}


.footer-social-icons {
    display: grid;

    grid-template-columns:
        repeat(4, 32px);

    gap: 4px;
}


.footer-social-icons a {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    line-height: 0;
}


.footer-social-icons img {
    display: block;

    width: 22px;
    height: 22px;

    object-fit: contain;
}


/* ============================================================
   27. FOOTER CONTACTO
============================================================ */

.footer-contact p {
    margin: 0 0 7px;

    color: var(--white);

    font-size: 11px;

    line-height: 1.5;
}


/* ============================================================
   28. FOOTER BOTTOM
============================================================ */

.footer-bottom {
    padding: 10px 15px;

    background: var(--white);
    color: var(--navy);

    text-align: center;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.35;
}


/* ============================================================
   29. RESPONSIVE FOOTER
============================================================ */


/* ============================================================
   TABLET + MÓVIL
   0 - 1279px
============================================================ */

@media (max-width: 1279px) {

    .footer-main {
        width: min(680px, 90%);

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0;

        padding: 28px 0 24px;
    }


    .footer-logo {
        grid-column: 1 / -1;

        justify-content: center;

        margin-bottom: 20px;
    }


    .footer-logo img {
        width: 145px;
    }


    .footer-navigation {
        display: flex;
        flex-direction: column;

        gap: 8px;

        padding:
            0
            32px
            0
            0;

        border-right:
            1px solid
            var(--aqua);
    }


    .footer-submenu {
        display: none;
    }


    .footer-title {
        min-height: 30px;

        margin: 0;

        font-size: 16px;
        font-weight: 400;

        line-height: 1.2;
    }


    .footer-language {
        margin-top: 4px;

        gap: 7px;
    }


    .footer-language a {
        font-size: 11px;
    }


    .footer-language span {
        height: 20px;
    }


    .footer-info {
        padding-left: 40px;
    }


    .footer-info h5 {
        font-size: 16px;
    }


    .footer-social {
        margin-bottom: 20px;
    }


    .footer-contact p {
        font-size: 11px;

        line-height: 1.4;
    }

}


/* ============================================================
   MÓVIL
   0 - 600px
============================================================ */

@media (max-width: 600px) {

    .footer {
        margin-top: 20px;
    }


    .footer-main {
        width: 90%;

        grid-template-columns:
            minmax(125px, .85fr)
            minmax(150px, 1.15fr);

        padding: 24px 0 20px;
    }


    .footer-logo {
        margin-bottom: 18px;
    }


    .footer-logo img {
        width: 125px;
    }


    .footer-navigation {
        gap: 6px;

        padding-right: 18px;
    }


    .footer-title {
        min-height: 28px;

        font-size: 14px;
    }


    .footer-language {
        gap: 5px;
    }


    .footer-language a {
        font-size: 11px;
    }


    .footer-language span {
        height: 18px;
    }


    .footer-info {
        padding-left: 22px;
    }


    .footer-info h5 {
        margin-bottom: 6px;

        font-size: 14px;
    }


    .footer-social {
        margin-bottom: 17px;
    }


    .footer-contact p {
        margin-bottom: 7px;

        font-size: 11px;

        line-height: 1.4;
    }


    .footer-bottom {
        padding: 9px 12px;

        font-size: 10px;

        line-height: 1.35;
    }

}


/* ============================================================
   MÓVIL MUY PEQUEÑO
   0 - 380px
============================================================ */

@media (max-width: 380px) {

    .footer-main {
        width: 92%;

        grid-template-columns:
            minmax(110px, .8fr)
            minmax(140px, 1.2fr);
    }


    .footer-navigation {
        padding-right: 14px;
    }


    .footer-info {
        padding-left: 17px;
    }


    .footer-title {
        font-size: 13px;
    }


    .footer-contact p {
        font-size: 10.5px;
    }


    .footer-bottom {
        font-size: 9.5px;
    }

}


/* ============================================================
   FULL
   1921px+
============================================================ */

@media (min-width: 1921px) {

    .footer-main {
        max-width: var(--container-full);
    }

}


/* ============================================================
   30. BOTÓN FLOTANTE - VOLVER ARRIBA
============================================================ */

#scrollTopBtn {

    position: fixed;

    right: 30px;
    bottom: 30px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--white);
    background: var(--red);

    border: 0;
    border-radius: 7px;

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, .22);

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .2s ease;

    z-index: 9000;
}


#scrollTopBtn.show {

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

}


#scrollTopBtn:hover {
    background: var(--indigo);
}


#scrollTopBtn i {
    font-size: 26px;
}


@media (max-width: 767px) {

    #scrollTopBtn {

        right: 18px;
        bottom: 18px;

        width: 43px;
        height: 43px;

    }


    #scrollTopBtn i {
        font-size: 24px;
    }

}


/* ============================================================
   31. REVEAL GLOBAL
============================================================ */

.reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}


.reveal.show {

    opacity: 1;

    transform:
        translateY(0);

}


/* ============================================================
   32. HERO / SLIDER GLOBAL
============================================================ */

.usam-slider {

    position: relative;

    width: 100%;
    height: 750px;

    overflow: hidden;

    top: -50px;

    background: #000;

}


/* ============================================================
   32.1 CONTENEDOR
============================================================ */

.slider-wrapper {

    position: relative;

    width: 100%;
    height: 100%;

}


/* ============================================================
   32.2 SLIDES
============================================================ */

.usam-slider .slide {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    opacity: 0;

    z-index: 1;

    transition:
        opacity 1100ms var(--ease-smooth);

    will-change: opacity;

    pointer-events: none;

}


.usam-slider .slide.active {

    opacity: 1;

    z-index: 2;

    pointer-events: auto;

}


/* ============================================================
   32.3 HERO ESTÁTICO
============================================================ */

.usam-slider.is-static .slide {
    opacity: 1;
}


/* ============================================================
   32.4 FLECHAS
============================================================ */

.slider-arrow {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    cursor: pointer;

    z-index: 10;

}


.slider-arrow i {

    color: var(--white);

    font-size: 46px;

    transition:
        opacity .25s ease;

}


.slider-arrow:hover i {
    opacity: .7;
}


.slider-arrow.left {

    left:
        max(
            20px,
            calc(
                (
                    100vw -
                    var(--container-desktop)
                ) /
                2
            )
        );

}


.slider-arrow.right {

    right:
        max(
            20px,
            calc(
                (
                    100vw -
                    var(--container-desktop)
                ) /
                2
            )
        );

}


/* ============================================================
   32.5 HERO ESTÁTICO SIN CONTROLES
============================================================ */

.usam-slider.is-static
.slider-arrow {

    display:
        none !important;

}


/* ============================================================
   32.6 TABLET
============================================================ */

@media (min-width: 768px) and (max-width: 1279px) {

    .usam-slider {
        height: 430px;
    }


    .slider-arrow.left {
        left: 24px;
    }


    .slider-arrow.right {
        right: 24px;
    }


    .slider-arrow i {
        font-size: 40px;
    }

}


/* ============================================================
   32.7 MÓVIL
============================================================ */

@media (max-width: 767px) {

    .usam-slider {
        height: 280px;
    }


    .slider-arrow.left {
        left: 14px;
    }


    .slider-arrow.right {
        right: 14px;
    }


    .slider-arrow i {
        font-size: 34px;
    }

}


/* ============================================================
   32.8 FULL
============================================================ */

@media (min-width: 1921px) {

    .usam-slider {
        height: 800px;
    }

}


/* ============================================================
   33. ACCESIBILIDAD GLOBAL
   WCAG 2.2 AA
============================================================ */


/* ============================================================
   33.1 SKIP LINK
============================================================ */

.skip-link {

    position: fixed;

    top: 0;
    left: 16px;

    display: block;

    padding:
        10px
        16px;

    background:
        var(--white);

    color:
        var(--navy);

    border:
        2px solid
        var(--navy);

    border-radius:
        0
        0
        5px
        5px;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.3;

    text-decoration: none;

    transform:
        translateY(-120%);

    opacity: 0;

    pointer-events: none;

    transition:
        transform var(--motion-fast) var(--ease-soft),
        opacity var(--motion-fast) var(--ease-soft);

    z-index: 1000000;

}


.skip-link:focus,
.skip-link:focus-visible {

    transform:
        translateY(0);

    opacity: 1;

    pointer-events: auto;

    outline:
        3px solid
        var(--white);

    outline-offset:
        2px;

    box-shadow:
        0 0 0 5px
        var(--navy);

}


/* ============================================================
   33.2 FOCO VISIBLE GLOBAL
============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {

    outline:
        3px solid
        var(--white);

    outline-offset:
        2px;

    box-shadow:
        0 0 0 5px
        var(--navy);

}


/* ============================================================
   33.3 INTERACCIÓN TÁCTIL
============================================================ */

a,
button {

    -webkit-tap-highlight-color:
        rgba(8, 26, 64, .10);

}


/* ============================================================
   33.4 REDUCCIÓN DE MOVIMIENTO
============================================================ */

@media (prefers-reduced-motion: reduce) {


    html {
        scroll-behavior: auto;
    }


    /* Splash */

    .site-splash,
    .site-splash-logo,
    .site-splash-progress span {

        animation:
            none !important;

        transition:
            none !important;

    }


    .site-splash-logo {

        opacity: 1;

        transform:
            none;

    }


    /* Hero */

    .usam-slider .slide {

        transition:
            none !important;

    }


    /* Reveal */

    .reveal {

        opacity: 1;

        transform:
            none;

        transition:
            none !important;

    }


    /* Menú móvil */

    .usam-sidenav
    .mobile-dropdown-icon {

        transition:
            none !important;

    }


    /* Scroll Top */

    #scrollTopBtn {

        transition:
            opacity var(--motion-fast) ease,
            visibility var(--motion-fast) ease,
            background-color var(--motion-fast) ease;

        transform:
            none;

    }


    #scrollTopBtn.show {
        transform: none;
    }


    /* Skip link */

    .skip-link {
        transition: none;
    }


    /* Orgullo */

    .orgullo-carousel {

        transition:
            none !important;

    }


    .orgullo-card,
    .orgullo-card h3,
    .orgullo-user img,
    .orgullo-arrow {

        transition:
            none !important;

    }


    /* Comunidad */

    .comunidad-feature > img,
    .comunidad-feature-content,
    .comunidad-item,
    .comunidad-item img,
    .comunidad-arrow i {

        transition:
            none !important;

    }


    .comunidad-feature.is-changing > img {

        opacity: 1;

        transform:
            none;

    }


    .comunidad-feature.is-changing
    .comunidad-feature-content {

        opacity: 1;

        transform:
            none;

    }


    /* Investigación / Vinculación */

    .iv-group-track {

        transition:
            none !important;

    }


    .iv-card img,
    .iv-card h3,
    .iv-btn,
    .iv-group-arrow i {

        transition:
            none !important;

    }

}