/* ============================================================
   USAM
   CARRERAS.CSS

   Estilos compartidos para las páginas de carreras.
============================================================ */


/* ============================================================
   1. HERO
============================================================ */

.hero-carreras {

    position: relative;

    width: 100%;
    height: 520px;

    top: -53px;

    overflow: hidden;

    background: var(--navy);

}


.hero-carreras .hero-bg {

    position: absolute;

    inset: 0;

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

    /*transform: scale(1.025);*/

}


.hero-carreras .hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8, 26, 64, .86) 0%,
            rgba(8, 26, 64, .65) 42%,
            rgba(8, 26, 64, .24) 72%,
            rgba(8, 26, 64, .05) 100%
        );

}


.hero-carreras .hero-content {

    position: relative;

    z-index: 2;

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

    height: 100%;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding-bottom: 105px;

    color: var(--white);

}


.hero-title {

    margin: 0 0 6px;

    color: var(--white);

    font-size:
        clamp(
            38px,
            4vw,
            56px
        );

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -.5px;
    width: 63%;

}


.hero-subtitle {

    max-width: 720px;

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            17px,
            1.6vw,
            22px
        );

    font-weight: 400;

    line-height: 1.45;

}


/* ============================================================
   2. ACCESOS PRINCIPALES
============================================================ */

.usam-tabs-section {

    position: relative;

    background: var(--white);

}


.usam-tabs-container {

    width: 90%;
    max-width: 1300px;

    margin:
        -45px
        auto
        0;

    display: grid;

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

    padding-bottom: 10px;

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

}


/* ============================================================
   2.1 ITEM
============================================================ */

.usam-tab {

    position: relative;

    min-width: 0;
    min-height: 150px;

    display: block;

    padding:
        28px
        28px
        26px;

    color: var(--navy);

    background: var(--white);

    border: 0;
    border-radius: 0;

    font-family: inherit;

    text-align: left;
    text-decoration: none;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition:
        background-color
        var(--motion-base)
        var(--ease-soft);

}


.usam-tab::before {

    content: "";

    position: absolute;

    top: 12px;
    left: 28px;

    width:
        min(
            123px,
            calc(100% - 56px)
        );

    height: 6px;

    background: var(--navy);

    opacity: 0;

    transition:
        opacity
        var(--motion-base)
        var(--ease-soft);

}


.usam-tab.active {

    background: var(--aqua);

}


.usam-tab.active::before {

    opacity: 1;

}


.usam-tab-title {

    display: block;

    margin-bottom: 8px;

    color: var(--navy);

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

    line-height: 1.3;

}


.usam-tab-description {

    display: block;

    color: var(--navy);

    font-size: 13px;

    line-height: 1.55;

}


/* ============================================================
   2.2 HOVER
============================================================ */

@media
(hover: hover)
and
(pointer: fine) {

    .usam-tab:hover {

        background: #d4eff0;

    }


    .usam-tab:hover::before {

        opacity: 1;

    }

}


/* ============================================================
   3. CONTENIDO PRINCIPAL
============================================================ */

.doctorado-section {

    padding:
        45px
        0
        70px;

    background: var(--white);

}


.doctorado-container {

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

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.95fr)
        minmax(300px, 1fr);

    gap:
        clamp(
            32px,
            5vw,
            60px
        );

    align-items: start;

}


.doctorado-main {

    min-width: 0;

    color: var(--navy);

}


/* ============================================================
   4. TÍTULOS
============================================================ */

.doctorado-main .dm-title {

    margin:
        0
        0
        8px;

    color: var(--navy);

    font-size:
        clamp(
            22px,
            2vw,
            26px
        );

    font-weight: 700;

    line-height: 1.3;

}


.doctorado-main .dm-h4 {

    margin:
        14px
        0
        7px;

    color: var(--navy);

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

    line-height: 1.4;

}


.doctorado-main .dm-mt-lg {

    margin-top: 28px;

    font-size:
        clamp(
            21px,
            2vw,
            26px
        );

}


/* ============================================================
   5. TEXTO
============================================================ */

.doctorado-main .dm-p {

    margin:
        0
        0
        12px;

    color: #284b78;

    font-size: 14px;

    line-height: 1.65;

    text-align: justify;

}


/* ============================================================
   6. LEER MÁS
============================================================ */

.leer-mas-box {

    position: relative;

}


.leer-mas-extra {

    display: none;

}


.leer-mas-box.open
.leer-mas-extra {

    display: block;

}


.leer-mas-footer {

    display: flex;

    justify-content: flex-end;

    margin:
        10px
        0
        20px;

}


.leer-mas-footer-decana {

    display: flex;

    justify-content: flex-end;

    padding:
        0
        14px
        12px;

    background: #0b3f7f;

}


.btn-leer-mas,
.btn-leer-mas-decana {

    min-height: 44px;

    display: inline-flex;

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

    padding:
        8px
        14px;

    border: 0;

    border-radius: 22px;

    font-family: inherit;

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

    line-height: 1.2;

    cursor: pointer;

    text-transform: uppercase;

    transition:
        color
        var(--motion-base)
        var(--ease-soft),
        background-color
        var(--motion-base)
        var(--ease-soft),
        transform
        var(--motion-base)
        var(--ease-soft);

}


.btn-leer-mas {

    color: var(--indigo);

    background: #e9f5f6;

}


.btn-leer-mas-decana {

    color: var(--white);

    background: #082f62;

}


@media
(hover: hover)
and
(pointer: fine) {

    .btn-leer-mas:hover {

        color: var(--white);

        background: var(--indigo);

        transform:
            translateY(-1px);

    }


    .btn-leer-mas-decana:hover {

        background: var(--navy);

        transform:
            translateY(-1px);

    }

}


/* ============================================================
   7. PERFIL PROFESIONAL
============================================================ */

.perfil-lista {

    display: grid;

    grid-template-columns:
        minmax(150px, .30fr)
        minmax(0, 1fr);

    gap: 24px;

    margin-top: 20px;

}


.tags.vertical {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.tags.vertical .tag {

    width: 100%;
    min-height: 44px;

    display: flex;

    align-items: center;

    padding:
        8px
        14px;

    color: #336f75;

    background: transparent;

    border: 0;

    border-radius:
        0
        18px
        18px
        0;

    font-family: inherit;

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

    line-height: 1.3;

    text-align: left;

    cursor: pointer;

    transition:
        color
        var(--motion-base)
        var(--ease-soft),
        background-color
        var(--motion-base)
        var(--ease-soft),
        transform
        var(--motion-base)
        var(--ease-soft);

}


.tags.vertical .tag.active {

    color: var(--navy);

    background: var(--aqua);

}


@media
(hover: hover)
and
(pointer: fine) {

    .tags.vertical .tag:hover {

        color: var(--navy);

        background: #ccebed;

        transform:
            translateX(2px);

    }

}


/* ============================================================
   7.1 CONTENIDO DEL PERFIL
============================================================ */

.lista-cols {

    position: relative;

    min-width: 0;

}


.lista {

    display: none;

    color: #284b78;

    font-size: 14px;

    line-height: 1.65;

    text-align: justify;

}


.lista.active {

    display: block;

    animation:
        careerTabIn
        380ms
        var(--ease-soft);

}


@keyframes careerTabIn {

    from {

        opacity: 0;

        transform:
            translateY(4px);

    }


    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* ============================================================
   8. VIDEO
============================================================ */

.video-card {

    position: relative;

    width: 100%;

    display: block;

    margin-top: 15px;

    padding: 0;

    overflow: hidden;

    background: var(--navy);

    border: 0;

    cursor: pointer;

}


.video-card > img {

    width: 100%;

    aspect-ratio:
        16 / 9;

    display: block;

    object-fit: cover;

}


.video-overlay {

    position: absolute;

    inset: 0;

    display: flex;

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

    padding:
        0
        20px
        26px;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .03),
            rgba(0, 0, 0, .68)
        );

}


.video-btn {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--white);

    font-size:
        clamp(
            18px,
            2vw,
            26px
        );

    font-weight: 700;

}


.video-icon {

    width: 42px;
    height: 42px;

    display: flex;

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

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

    border-radius: 50%;

    font-size: 15px;

}


/* ============================================================
   9. SIDEBAR
============================================================ */

.doctorado-sidebar {

    min-width: 0;

    padding: 24px;

    background: #f1f3f5;

    border-radius:
        48px
        0
        0
        0;

}


.doctorado-sidebar > div {

    margin-bottom: 24px;

}


.doctorado-sidebar > div:last-child {

    margin-bottom: 0;

}


/* ============================================================
   10. LOGO FACULTAD
============================================================ */

.card-logo {

    text-align: center;

}


.card-logo img {

    width: auto;

    max-width: 250px;

    height: auto;

}

/* ============================================================
   11. DOCENTE
============================================================ */

.card-docente {

    position: relative;

    display: grid;

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

    gap: 12px;

    align-items: flex-start;

}


.card-docente > img {

    width: 94px;
    height: 94px;

    margin-top: 16px;

    justify-self: center;
    align-self: start;

    object-fit: cover;
    object-position: center;

    background: var(--white);

    border:
        4px solid
        var(--white);

    border-radius: 50%;

    box-sizing: border-box;

    z-index: 2;

}


.docente-content {

    min-width: 0;

    overflow: hidden;

    background: #0b3f7f;

    border-radius:
        0
        20px
        20px
        0;

}


.card-docente h2 {

    margin: 0;

    padding:
        16px
        18px
        8px;

    color: var(--white);

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

    line-height: 1.3;

}


.card-docente p {

    margin: 0;

    padding:
        0
        18px
        12px;

    color: #c8f1f2;

    font-size: 13px;

    line-height: 1.55;

}


.docente-nombre {

    display: block;

    padding:
        4px
        18px
        18px;

    color: var(--white);

    text-transform: uppercase;

}


.card-titulo {

    font-size: 12px;

}


.card-name {

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

    line-height: 1.3;

}


.card-cargo {

    color: #bdebed;

    font-size: 12px;

}

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

    .card-docente {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .card-docente > img {

        position: relative;

        width: 86px;
        height: 86px;

        margin:
            0
            auto
            -20px;

        z-index: 3;

    }


    .docente-content {

        width: 100%;

        padding-top: 22px;

        border-radius: 20px;

    }


    .card-docente h2 {

        padding:
            18px
            18px
            8px;

        text-align: center;

    }


    .card-docente p {

        padding:
            0
            18px
            12px;

        text-align: left !important;

    }


    .leer-mas-footer-decana {

        justify-content: center;

        padding:
            0
            18px
            14px;

    }


    .docente-nombre {

        padding:
            6px
            18px
            18px;

        text-align: center;

    }

}


/* ============================================================
   12. CARDS DE INFORMACIÓN
============================================================ */

.card-info h2,
.card-becas h2,
.card-docs h2 {

    margin:
        0
        0
        8px;

    color: var(--navy);

    font-weight: 700;

    line-height: 1.3;

}


.card-info h2 {

    font-size: 22px;

}


.card-info p {

    margin:
        0
        0
        12px;

    color: #284b78;

    font-size: 13px;

    line-height: 1.6;

    text-align: justify;

}


/* ============================================================
   13. BECAS
============================================================ */

.card-becas {

    position: relative;

    padding: 18px;

    background: var(--aqua);

}


.card-becas h2 {

    font-size: 18px;

}


.card-becas p {

    margin:
        0
        0
        16px;

    color: var(--navy);

    font-size: 13px;

    line-height: 1.5;

}


.card-becas .btn-ver-mas {

    min-height: 44px;

    display: inline-flex;

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

    padding:
        8px
        15px;

    color: var(--white);

    background: var(--red);

    border-radius: 22px;

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

    line-height: 1;

    text-decoration: none;

    transition:
        background-color
        var(--motion-base)
        var(--ease-soft),
        transform
        var(--motion-base)
        var(--ease-soft);

}


@media
(hover: hover)
and
(pointer: fine) {

    .card-becas
    .btn-ver-mas:hover {

        background: var(--indigo);

        transform:
            translateY(-1px);

    }

}


/* ============================================================
   14. ACREDITACIONES
============================================================ */

.card-info .logos {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 12px;

    margin-top: 12px;

}


.card-info .logos img {

    width: auto;

    max-width: 75px;

    height: 48px;

    object-fit: contain;

    filter: grayscale(100%);

    transition:
        filter
        var(--motion-base)
        var(--ease-soft),
        transform
        var(--motion-base)
        var(--ease-soft);

}


@media
(hover: hover)
and
(pointer: fine) {

    .card-info
    .logos img:hover {

        filter: grayscale(0);

        transform:
            translateY(-2px);

    }

}


/* ============================================================
   15. DOCUMENTOS Y TRÁMITES
============================================================ */

.card-docs h2 {

    font-size: 16px;

}


.card-docs ul {

    margin: 0;

    padding: 0;

    list-style: none;

}


.card-docs li {

    position: relative;

    margin: 0;

    border-bottom:
        1px solid
        #bcd9f2;

}


.card-docs li::before {

    content: "›";

    position: absolute;

    top: 50%;
    left: 0;

    color: var(--navy);

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

    transform:
        translateY(-50%);

    pointer-events: none;

}


.card-docs li::after {

    content: "›";

    position: absolute;

    top: 50%;
    right: 3px;

    color: var(--navy);

    font-size: 18px;

    transform:
        translateY(-50%);

    pointer-events: none;

}


.doc-link {

    width: 100%;
    min-height: 48px;

    display: flex;

    align-items: center;

    padding:
        9px
        30px
        9px
        17px;

    color: var(--navy);

    background: transparent;

    border: 0;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.35;

    text-align: left;
    text-decoration: none;

    cursor: pointer;

}


.card-docs li.active
.doc-link {

    color: var(--red);

    font-weight: 700;

}


/* ============================================================
   16. MODAL UNIVERSAL
============================================================ */

.career-modal {

    position: fixed;

    inset: 0;

    z-index: 100000;

    display: none;

}


.career-modal.is-open {

    display: block;

}


.career-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(
            4,
            15,
            36,
            .82
        );

}


/* ============================================================
   16.1 CONTENEDOR
============================================================ */

.career-modal-dialog {

    position: absolute;

    top: 50%;
    left: 50%;

    width:
        min(
            1180px,
            94vw
        );

    height:
        min(
            880px,
            92vh
        );

    display: grid;

    grid-template-rows:
        auto
        auto
        minmax(0, 1fr);

    overflow: hidden;

    background: var(--white);

    border-radius: 14px;

    box-shadow:
        0
        22px
        70px
        rgba(
            0,
            0,
            0,
            .35
        );

    transform:
        translate(
            -50%,
            -50%
        );

}


/* ============================================================
   16.2 CABECERA
============================================================ */

.career-modal-header {

    min-height: 66px;

    display: flex;

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

    gap: 20px;

    padding:
        12px
        18px
        12px
        24px;

    background: var(--navy);

}


.career-modal-title {

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            16px,
            2vw,
            21px
        );

    font-weight: 700;

    line-height: 1.3;

}


.career-modal-close {

    flex:
        0
        0
        44px;

    width: 44px;
    height: 44px;

    display: flex;

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

    padding: 0;

    color: var(--white);

    background: transparent;

    border: 0;
    border-radius: 50%;

    cursor: pointer;

}


.career-modal-close i {

    font-size: 28px;

}


/* ============================================================
   16.3 TOOLBAR
============================================================ */

.career-modal-toolbar {

    min-height: 58px;

    display: flex;

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

    gap: 10px;

    padding:
        8px
        18px;

    background: #f2f5f8;

    border-bottom:
        1px solid
        #dce3eb;

}


.career-modal-toolbar[hidden],
.career-modal-zoom-controls[hidden],
.career-modal-download[hidden],
.career-modal-open-document[hidden] {

    display: none !important;

}


.career-modal-zoom-controls {

    margin-right: auto;

    display: flex;

    align-items: center;

    gap: 5px;

}


.career-modal-tool {

    width: 44px;
    height: 44px;

    display: flex;

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

    padding: 0;

    color: var(--navy);

    background: var(--white);

    border:
        1px solid
        #ccd7e4;

    border-radius: 6px;

    cursor: pointer;

}


.career-modal-tool i {

    font-size: 21px;

}


.career-modal-zoom-value {

    min-width: 58px;

    color: var(--navy);

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

    text-align: center;

}


.career-modal-download,
.career-modal-open-document {

    min-height: 44px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        8px
        15px;

    border-radius: 22px;

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

    line-height: 1;

    text-decoration: none;

}


.career-modal-download {

    color: var(--white);

    background: var(--red);

}


.career-modal-open-document {

    color: var(--navy);

    background: var(--white);

    border:
        1px solid
        #bfcbd8;

}


/* ============================================================
   16.4 CUERPO
============================================================ */

.career-modal-body {

    position: relative;

    min-width: 0;
    min-height: 0;

    overflow: auto;

    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;

    background: #e7ebef;

}


.career-modal-content {

    width: 100%;
    min-width: 100%;
    min-height: 100%;

    display: flex;

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

    padding: 24px;

}


/* ============================================================
   17. PENSUM / IMAGEN
============================================================ */

.career-modal-content.is-image {

    min-height: 100%;

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

    background: #e7ebef;

}


.career-modal-content.is-image.is-zoomed {

    align-items: flex-start;
    justify-content: flex-start;

}


.career-modal-image {

    display: block;

    width: 75%;

    max-width: none;

    height: auto;

    margin: auto;

    flex:
        0
        0
        auto;

    pointer-events: none;

    user-select: none;

    -webkit-user-select: none;
    -webkit-user-drag: none;

}


.career-modal-content.is-image.is-zoomed
.career-modal-image {

    margin:
        0
        auto;

}


/* ============================================================
   17.1 ARRASTRE DEL PENSUM
============================================================ */

.career-modal.modal-type-image
.career-modal-body {

    user-select: none;

    -webkit-user-select: none;

    touch-action:
        pan-x
        pan-y;

}


.career-modal.modal-type-image
.career-modal-body.can-drag {

    cursor: grab;

}


.career-modal.modal-type-image
.career-modal-body.is-dragging {

    cursor: grabbing;

}


/* ============================================================
   18. PDF
============================================================ */

.career-modal-content.is-pdf {

    width: 100%;
    height: 100%;
    min-height: 100%;

    padding: 0;

    background: var(--white);

}


.career-modal-pdf {

    width: 100%;
    height: 100%;

    min-height: 650px;

    display: block;

    background: var(--white);

    border: 0;

}


/* ============================================================
   19. VIDEO
============================================================ */

.career-modal-content.is-video {

    width: 100%;
    height: 100%;
    min-height: 100%;

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

    padding: 0;

    background: #000000;

}


.career-modal-video {

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

    aspect-ratio:
        16 / 9;

    display: block;

    margin: auto;

    background: #000000;

    border: 0;

}


/* ============================================================
   20. TIPOS DE MODAL
============================================================ */

.career-modal.modal-type-pdf
.career-modal-dialog {

    grid-template-rows:
        auto
        auto
        minmax(0, 1fr);

}


.career-modal.modal-type-image
.career-modal-dialog {

    grid-template-rows:
        auto
        auto
        minmax(0, 1fr);

}


.career-modal.modal-type-video
.career-modal-dialog {

    height: auto;

    max-height: 92vh;

    grid-template-rows:
        auto
        minmax(0, auto);

    background: #000000;

}


.career-modal.modal-type-video
.career-modal-body {

    overflow: hidden;

    background: #000000;

}


/* ============================================================
   21. FOCO VISIBLE
============================================================ */

.usam-tab:focus-visible,
.tag:focus-visible,
.video-card:focus-visible,
.doc-link:focus-visible,
.btn-leer-mas:focus-visible,
.btn-leer-mas-decana:focus-visible,
.btn-ver-mas:focus-visible,
.career-modal-close:focus-visible,
.career-modal-tool:focus-visible,
.career-modal-download:focus-visible,
.career-modal-open-document:focus-visible {

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

    outline-offset: 2px;

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

}


/* ============================================================
   22. REVEAL
============================================================ */

.career-reveal {

    opacity: 0;

    transform:
        translateY(28px);

    transition:
        opacity
        700ms
        var(--ease-smooth),
        transform
        700ms
        var(--ease-smooth);

    transition-delay:
        var(
            --career-reveal-delay,
            0ms
        );

}


.career-reveal.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* ============================================================
   23. TABLET
============================================================ */

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

    .hero-carreras {

        height: 440px;

    }


    .hero-carreras
    .hero-content {

        width: 88%;

        padding-bottom: 80px;

    }


    .usam-tabs-container {

        width: 88%;

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

    }


    .doctorado-container {

        width: 88%;

        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(280px, .85fr);

        gap: 35px;

    }


    .perfil-lista {

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

    }

}


/* ============================================================
   24. MÓVIL
============================================================ */

@media
(max-width: 767px) {

    .hero-carreras {

        height: 350px;

        top: -40px;

    }


    .hero-carreras
    .hero-content {

        width: 88%;

        padding-bottom: 55px;

    }


    .hero-title {

        font-size: 34px;

    }


    .hero-subtitle {

        font-size: 16px;

    }


    .usam-tabs-container {

        width: 90%;

        margin-top: -30px;

        grid-template-columns:
            1fr;

        padding-bottom: 0;

        border-bottom: 0;

    }


    .usam-tab {

        min-height: 0;

        padding:
            22px
            20px;

        border-bottom:
            1px solid
            #d5e1ed;

    }


    .usam-tab::before {

        top: 0;
        left: 20px;

        width: 80px;
        height: 4px;

    }


    .usam-tab-title {

        font-size: 16px;

    }


    .usam-tab-description {

        font-size: 13px;

    }


    .doctorado-section {

        padding:
            35px
            0
            50px;

    }


    .doctorado-container {

        width: 90%;

        grid-template-columns:
            1fr;

        gap: 40px;

    }


    .doctorado-main .dm-p,
    .lista {

        text-align: left;

    }


    .perfil-lista {

        grid-template-columns:
            1fr;

        gap: 16px;

    }


    .tags.vertical {

        display: grid;

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

        gap: 5px;

    }


    .tags.vertical .tag {

        justify-content: center;

        padding: 8px;

        border-radius: 16px;

        font-size: 12px;

        text-align: center;

    }


    /* MODAL */

    .career-modal-header {

        min-height: 58px;

        padding:
            8px
            12px
            8px
            16px;

    }


    .career-modal-toolbar {

        min-height: 56px;

        flex-wrap: wrap;

        gap: 7px;

        padding:
            6px
            10px;

    }


    .career-modal-tool {

        width: 42px;
        height: 42px;

    }


    .career-modal-content {

        padding: 12px;

    }


    /* PDF */

    .career-modal.modal-type-pdf
    .career-modal-dialog {

        width: 100vw;
        height: 100dvh;

        max-width: none;
        max-height: none;

        border-radius: 0;

    }


    .career-modal.modal-type-pdf
    .career-modal-content {

        padding: 0;

    }


    .career-modal.modal-type-pdf
    .career-modal-pdf {

        width: 100%;
        height: 100%;

        min-height:
            calc(
                100dvh -
                124px
            );

    }


    /* PENSUM */

    .career-modal.modal-type-image
    .career-modal-dialog {

        width: 100vw;
        height: 100dvh;

        max-width: none;
        max-height: none;

        border-radius: 0;

    }


    .career-modal.modal-type-image
    .career-modal-body {

        min-height: 0;

        background: #e7ebef;

    }


    .career-modal.modal-type-image
    .career-modal-content {

        min-width: 100%;
        min-height: 100%;

        padding: 12px;

    }


    .career-modal.modal-type-image
    .career-modal-image {

        width: 75%;

    }


    /* VIDEO */

    .career-modal.modal-type-video
    .career-modal-dialog {

        width:
            min(
                100vw,
                760px
            );

        height: auto;

        max-height: 100dvh;

        border-radius: 0;

        background: #000000;

    }


    .career-modal.modal-type-video
    .career-modal-body {

        overflow: hidden;

        background: #000000;

    }


    .career-modal.modal-type-video
    .career-modal-content {

        width: 100%;
        min-height: 0;

        padding: 0;

        background: #000000;

    }


    .career-modal.modal-type-video
    .career-modal-video {

        width: 100%;
        height: auto;

        aspect-ratio:
            16 / 9;

    }

}


/* ============================================================
   25. MÓVIL PEQUEÑO
============================================================ */

@media
(max-width: 420px) {

    .hero-carreras {

        height: 320px;

    }


    .hero-title {

        font-size: 26px;

    }


    .doctorado-container {

        width: 88%;

    }


    .tags.vertical {

        grid-template-columns:
            1fr;

    }


    .tags.vertical .tag {

        justify-content: flex-start;

        text-align: left;

    }


    .card-docente {

        grid-template-columns:
            1fr;

    }


    .card-docente > img {

        margin:
            0
            auto
            -18px;

    }


    .docente-content {

        padding-top: 18px;

        border-radius: 20px;

    }


    .career-modal-download span,
    .career-modal-open-document span {

        display: none;

    }


    .career-modal-zoom-value {

        min-width: 48px;

    }

}


/* ============================================================
   26. FULL
============================================================ */

@media
(min-width: 1921px) {

    .hero-carreras {

        height: 570px;

    }


    .hero-carreras
    .hero-content,
    .doctorado-container {

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

    }

}


/* ============================================================
   27. REDUCCIÓN DE MOVIMIENTO
============================================================ */

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

    .career-reveal {

        opacity: 1;

        transform: none;

        transition: none !important;

    }


    .lista.active {

        animation: none;

    }


    .usam-tab,
    .tags.vertical .tag,
    .btn-leer-mas,
    .btn-leer-mas-decana,
    .card-becas .btn-ver-mas,
    .card-info .logos img {

        transition: none !important;

    }

}

/* ============================================================
   PENSUMS CON MODALIDADES
============================================================ */

.career-pensum-tabs {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;

    width: 100%;

    padding: 18px 20px 10px;

    box-sizing: border-box;

}


.career-pensum-tab {

    appearance: none;

    border: 1px solid #cbd5e1;

    background: #ffffff;

    color: #0b2454;

    min-height: 42px;

    padding: 10px 18px;

    border-radius: 8px;

    font-family: inherit;

    font-size: 0.95rem;

    font-weight: 700;

    line-height: 1.2;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.career-pensum-tab:hover {

    border-color: #0b2454;

    background: #f3f7fb;

}


.career-pensum-tab.active,
.career-pensum-tab[aria-selected="true"] {

    background: #0b2454;

    border-color: #0b2454;

    color: #ffffff;

}


.career-pensum-tab:focus-visible {

    outline: 3px solid rgba(11, 36, 84, 0.28);

    outline-offset: 3px;

}


/* ============================================================
   CONTENEDOR DEL VISOR
============================================================ */

.career-pensum-viewer {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    width: 100%;

    min-width: 100%;

    min-height: 0;

    padding: 10px 20px 30px;

    box-sizing: border-box;

}


/* ============================================================
   AJUSTES DEL CONTENIDO CUANDO HAY TABS
============================================================ */

.career-modal-content.is-image-tabs {

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 100%;

    min-width: 100%;

}


/*
 * Al hacer zoom por encima del 100%, el contenido debe permitir
 * desplazamiento horizontal sin cortar la imagen.
 */

.career-modal-content.is-image-tabs.is-zoomed
.career-pensum-viewer {

    justify-content: flex-start;

}


/* ============================================================
   IMAGEN DENTRO DEL VISOR DE MODALIDAD
============================================================ */

.career-pensum-viewer
.career-modal-image {

    display: block;

    max-width: none;

    height: auto;

    margin: 0 auto;

    object-fit: contain;

    user-select: none;

    -webkit-user-drag: none;

}


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

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

    .career-pensum-tabs {

        padding:
            16px
            16px
            8px;

    }


    .career-pensum-tab {

        min-height: 40px;

        padding:
            9px
            16px;

        font-size:
            0.9rem;

    }


    .career-pensum-viewer {

        padding:
            8px
            16px
            24px;

    }

}


/* ============================================================
   MOVIL
============================================================ */

@media
(max-width: 767px) {

    .career-pensum-tabs {

        display: grid;

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

        gap: 8px;

        position: sticky;

        top: 0;

        z-index: 3;

        padding:
            12px
            12px
            8px;

        background:
            #eef2f6;

    }


    .career-pensum-tab {

        width: 100%;

        min-height: 42px;

        padding:
            9px
            10px;

        font-size:
            0.86rem;

        text-align: center;

    }


    .career-pensum-viewer {

        padding:
            8px
            10px
            20px;

    }

}


/* ============================================================
   MOVILES PEQUEÑOS
============================================================ */

@media
(max-width: 420px) {

    .career-pensum-tabs {

        grid-template-columns:
            1fr;

    }

}


/* ============================================================
   MOVIMIENTO REDUCIDO
============================================================ */

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

    .career-pensum-tab {

        transition: none;

    }

}