/* ================================================================
   UASLP MULTIMODAL — HOJA DE ESTILOS UNIFICADA
   Generado a partir de: style.css (base), entidades.css, estudiantes.css,
   gestion.css y profesores.css.
   index.css.css y plataforma2021.css se excluyeron por no estar
   enlazados en ningun HTML del sitio (codigo sin uso).
   ================================================================ */

/* ================================================================
   1. VARIABLES DE MARCA (canonicas, tomadas de style.css)
   Todas las paginas del sitio heredan estos mismos tonos de azul
   marino y dorado, en vez de definir los suyos por separado.
   ================================================================ */

:root {
    --navy: #1e3a5f;
    --navy-dark: #10253f;
    --gold: #d9b56c;
    --gold-light: #e8cd94;
}


/* ================================================================
   2. BASE DEL SITIO (contenido original de style.css)
   Aplica a TODAS las paginas: reset, tipografia, topbar, navbar,
   hero, botones, secciones y footer del home / Plataforma Veinte21.
   ================================================================ */

/* =========================================================
   UASLP MULTIMODAL
   index.css
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
    background: #f5f7fa;
    color: #1f2937;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {
    background: #111827;
    color: #d1d5db;
    font-size: 13px;
}

.topbar-content {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-right a {
    transition: .25s ease;
}

.topbar-right a:hover {
    color: #ffffff;
}

.separator {
    opacity: .4;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e5e7eb;
}

.navbar-content {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background: #1e3a5f;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-text strong {
    color: #172033;
    font-size: 18px;
}

.brand-text span {
    color: #64748b;
    font-size: 13px;
}

.main-menu {
    display: flex;
    align-items: center;
    gap: 26px;
}

.nav-link {
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    transition: .25s ease;
}

.nav-link:hover,
.nav-link.active {
    color: #1e3a5f;
}

.nav-button {
    padding: 11px 18px;
    background: #1e3a5f;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: .25s ease;
}

.nav-button:hover {
    background: #162c48;
    transform: translateY(-1px);
}

.menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    margin: 5px;
    background: #1f2937;
}


/*
<!-- =========================================================
     SUBMENU PLATAFORMA VEINTE21
========================================================= -->
*/

/* =========================================================
   CONTENEDOR DEL SUBMENU
========================================================= */

.nav-dropdown {

    position: relative;

    display: flex;

    align-items: center;

}


/* =========================================================
   BOTÓN PLATAFORMA VEINTE21
========================================================= */

.nav-dropdown-toggle {

    display: flex;

    align-items: center;

    gap: 7px;

}


.submenu-arrow {

    font-size: 11px;

    transition:
        transform 0.25s ease;

}


/* =========================================================
   SUBMENU HACIA ABAJO
========================================================= */

.submenu {

    position: absolute;

    top: 100%;
    left: 0;

    min-width: 270px;

    background: #ffffff;

    border: 1px solid rgba(0, 0, 0, 0.10);

    border-radius: 0 0 10px 10px;

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

    padding: 8px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(8px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;

    z-index: 99999;

}


/* =========================================================
   MOSTRAR SUBMENU
========================================================= */

.nav-dropdown:hover .submenu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);

}


/* =========================================================
   FLECHA
========================================================= */

.nav-dropdown:hover .submenu-arrow {

    transform: rotate(180deg);

}


/* =========================================================
   ENLACES DEL SUBMENU
========================================================= */

.submenu a {

    display: block;

    width: 100%;

    box-sizing: border-box;

    padding: 12px 16px;

    color: #263238;

    background: transparent;

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

    border-radius: 7px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        padding-left 0.2s ease;

}


.submenu a:hover {

    background: #f1f5f9;

    color: #1d4ed8;

    padding-left: 21px;

}


.submenu a.active {

    background: #f1f5f9;

    color: #1d4ed8;

    font-weight: 600;

}


/* =========================================================
   MÓVILES
========================================================= */

@media (max-width: 900px) {

    .nav-dropdown {

        display: block;

        width: 100%;

    }


    .nav-dropdown-toggle {

        width: 100%;

        justify-content: space-between;

    }


    .submenu {

        position: static;

        width: 100%;

        min-width: 0;

        margin-top: 5px;

        padding: 0 0 0 15px;

        background: transparent;

        border: none;

        border-radius: 0;

        box-shadow: none;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: none;

    }


    .submenu a {

        padding: 10px 15px;

    }


    .nav-dropdown:hover .submenu {

        transform: none;

    }

}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;
    overflow: hidden;
    min-height: 720px;
    background:
        linear-gradient(
            120deg,
            #10253f 0%,
            #1e3a5f 52%,
            #315a7d 100%
        );
    color: #fff;
}

.hero-background {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255,255,255,.10),
            transparent 32%
        );
}

.heroplataforma2021 {
    position: relative;
    overflow: hidden;
    min-height: 720px;
    background:
        linear-gradient(
            120deg,
            #3e3900 0%,
            #82680d 52%,
            #877b30 100%
        );
    color: #fff;
}

.hero-background-plataforma2021{
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255,255,255,.10),
            transparent 32%
        );
}

.hero-decoration {
    position: absolute;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
}

.hero-decoration-one {
    width: 430px;
    height: 430px;
    right: -170px;
    top: 100px;
}

.hero-decoration-two {
    width: 260px;
    height: 260px;
    left: -130px;
    bottom: 80px;
}

.hero-content {
    position: relative;
    z-index: 2;
    min-height: 650px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 70px;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #d8e6f2;
}

.hero h1 {
    font-size: clamp(50px, 6vw, 82px);
    line-height: .95;
    letter-spacing: -3px;
    margin-bottom: 28px;
}

.hero h1 span {
    display: block;
    color: #d9b56c;
}

.hero-description {
    max-width: 650px;
    color: #dce7f0;
    font-size: 18px;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    gap: 14px;
    margin-top: 34px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 21px;
    font-weight: 700;
    font-size: 14px;
    transition: .25s ease;
}

.btn-primary {
    background: #d9b56c;
    color: #182638;
}

.btn-primary:hover {
    transform: translateY(-2px);
}

.btn-outline {
    border: 1px solid rgba(255,255,255,.45);
    color: #fff;
}

.btn-outline:hover {
    background: rgba(255,255,255,.10);
}

.hero-info {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 48px;
}

.hero-info-item {
    display: flex;
    flex-direction: column;
}

.hero-info-item strong {
    font-size: 18px;
}

.hero-info-item span {
    font-size: 11px;
    color: #b9cad9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,.2);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-main-card {
    width: min(440px, 90%);
    padding: 30px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.20);
    backdrop-filter: blur(12px);
    box-shadow: 0 25px 70px rgba(0,0,0,.22);
}

.visual-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.visual-card-header small {
    font-size: 10px;
    letter-spacing: 2px;
    color: #b8ccdc;
}

.visual-card-header h3 {
    margin-top: 5px;
    font-size: 30px;
}

.visual-badge {
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.25);
    font-size: 11px;
    font-weight: 700;
}

.visual-line {
    height: 1px;
    background: rgba(255,255,255,.16);
    margin: 25px 0;
}

.visual-message {
    display: flex;
    gap: 15px;
}

.message-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #d9b56c;
    color: #182638;
    font-size: 24px;
    font-weight: 700;
}

.visual-message strong {
    display: block;
    margin-bottom: 5px;
}

.visual-message p {
    color: #bfd0df;
    font-size: 13px;
    line-height: 1.6;
}

.visual-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
    margin-top: 28px;
}

.visual-grid div {
    padding: 16px;
    background: rgba(255,255,255,.06);
}

.visual-grid strong {
    display: block;
    color: #d9b56c;
    font-size: 20px;
}

.visual-grid span {
    font-size: 12px;
    color: #c3d0db;
}

.floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 10px;
    padding: 13px 16px;
    background: #fff;
    color: #1f2937;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(0,0,0,.20);
    animation:
    floatCard 4s ease-in-out infinite; 
}

@keyframes floatCard {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


.floating-one {
    left: -5px;
    top: -50px;
}

.floating-two {
    right: -10px;
    bottom: -50px;
}

.floating-icon {
    font-size: 16px;
    color: #1e3a5f;
}

.floating-card strong,
.floating-card small {
    display: block;
}

.floating-card strong {
    font-size: 12px;
}

.floating-card small {
    color: #64748b;
    font-size: 10px;
}

.hero-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 17px 0;
    background: rgba(0,0,0,.12);
}

.hero-bottom .container {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #c6d3df;
}

.scroll-arrow {
    font-size: 18px;
}


/* =========================================================
   SECCIONES
========================================================= */

.section {
    padding: 100px 0;
}

.section-light {
    background: #f7f8fa;
    /*background: #ffffff;*/
}

.section-dark {
    background: #172638;
    color: #fff;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 55px;
}

.section-heading h2 {
    margin-top: 9px;
    max-width: 650px;
    color: #172033;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.section-heading p {
    max-width: 390px;
    color: #64748b;
}

.section-label {
    color: #9b7630;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.dark-heading h2 {
    color: #fff;
}

.dark-heading p {
    color: #b9c6d3;
}


/* =========================================================
   MULTIMODAL
========================================================= */

.multimodal-layout {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 18px;
}

.multimodal-intro {
    grid-row: span 2;
    display: flex;
    gap: 25px;
    padding: 35px;
    background: #fff;
    border: 1px solid #e5e7eb;
}

.number-box {
    width: 75px;
    height: 75px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: #1e3a5f;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
}

.multimodal-intro h3 {
    margin-bottom: 15px;
    color: #1f2937;
    font-size: 25px;
}

.multimodal-intro p {
    margin-bottom: 15px;
    color: #64748b;
    font-size: 14px;
}

.principle-card {
    padding: 30px;
    background: #fff;
    border: 1px solid #e5e7eb;
    transition: .25s ease;
}

.principle-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(15,23,42,.08);
}

.principle-number {
    color: #9b7630;
    font-size: 12px;
    font-weight: 800;
}

.principle-card h3 {
    margin: 12px 0 8px;
    font-size: 21px;
}

.principle-card p {
    color: #64748b;
    font-size: 13px;
}


/* =========================================================
   DOCUMENTO
========================================================= */

.document-section {
    padding: 85px 0;
    background: #e9eef3;
}

.document-layout {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 70px;
    align-items: center;
}

.document-copy h2 {
    max-width: 600px;
    margin: 12px 0 20px;
    color: #172033;
    font-size: clamp(35px,4vw,50px);
    line-height: 1.1;
}

.document-copy p {
    max-width: 570px;
    color: #64748b;
    margin-bottom: 28px;
}

.document-button {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 14px 22px;
    background: #1e3a5f;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: .25s ease;
}

.document-button:hover {
    background: #162c48;
    transform: translateY(-2px);
}

.document-card {
    background: #fff;
    box-shadow: 0 20px 45px rgba(15,23,42,.10);
}

.document-card-top,
.document-card-footer {
    display: flex;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #e5e7eb;
}

.document-card-top span {
    padding: 5px 8px;
    background: #1e3a5f;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.document-card-top strong {
    color: #64748b;
    font-size: 12px;
}

.document-card-body {
    padding: 45px 30px;
}

.document-card-body small {
    color: #9b7630;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.document-card-body h3 {
    margin: 12px 0;
    font-size: 27px;
    color: #172033;
}

.document-card-body p {
    color: #64748b;
    font-size: 13px;
}

.document-card-footer {
    border-top: 1px solid #e5e7eb;
    border-bottom: 0;
    color: #64748b;
    font-size: 11px;
}


/* =========================================================
   VEINTE21
========================================================= */

.veinte-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 25px;
}

.veinte-card {
    padding: 40px;
    background: #1e3a5f;
    color: #fff;
}

.veinte-number {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    color: #d9b56c;
}

.veinte-number span {
    color: #fff;
}

.veinte-card h3 {
    margin: 28px 0 15px;
    font-size: 27px;
}

.veinte-card p {
    color: #d0dce7;
    font-size: 14px;
}

.veinte-button {
    display: inline-flex;
    gap: 15px;
    margin-top: 28px;
    padding: 13px 18px;
    background: #d9b56c;
    color: #182638;
    font-size: 13px;
    font-weight: 800;
}

.veinte-content {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
}

.veinte-item {
    padding: 28px;
    background: #fff;
    border: 1px solid #e5e7eb;
}

.veinte-item > span {
    color: #9b7630;
    font-size: 12px;
    font-weight: 800;
}

.veinte-item h3 {
    margin: 12px 0 7px;
    font-size: 20px;
}

.veinte-item p {
    color: #64748b;
    font-size: 13px;
}


/* =========================================================
   VIDEOS
========================================================= */

.video-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 25px;
}

.video-card {
    background: #203246;
    border: 1px solid rgba(255,255,255,.08);
}

.video-container {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0f172a;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.video-info {
    padding: 25px;
}

.video-info > span {
    color: #d9b56c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.video-info h3 {
    margin: 8px 0;
    font-size: 21px;
}

.video-info p {
    color: #b7c5d1;
    font-size: 13px;
}


/* =========================================================
   RECURSOS
========================================================= */

.resources-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
}

.resource-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 25px;
    background: #fff;
    border: 1px solid #e5e7eb;
    transition: .25s ease;
}

.resource-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(15,23,42,.08);
}

.resource-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: #1e3a5f;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.resource-card span:not(.resource-arrow) {
    color: #9b7630;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.resource-card h3 {
    margin: 4px 0;
    color: #1f2937;
    font-size: 17px;
}

.resource-card p {
    color: #64748b;
    font-size: 12px;
}

.resource-arrow {
    color: #1e3a5f;
    font-size: 20px;
}


/* =========================================================
   CONTACTO
========================================================= */

.contact-section {
    padding: 100px 0;
    background: #e9eef3;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: center;
}

.contact-info h2 {
    max-width: 600px;
    margin: 12px 0 15px;
    color: #172033;
    font-size: clamp(35px,4vw,50px);
    line-height: 1.1;
}

.contact-info > p {
    max-width: 570px;
    color: #64748b;
    margin-bottom: 30px;
}

.contact-item {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.contact-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #1e3a5f;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.contact-item strong,
.contact-item span {
    display: block;
}

.contact-item strong {
    color: #273449;
    font-size: 14px;
}

.contact-item span {
    color: #64748b;
    font-size: 12px;
}

.contact-card {
    padding: 40px;
    background: #1e3a5f;
    color: #fff;
    box-shadow: 0 20px 45px rgba(15,23,42,.15);
}

.contact-card-header-multimodal {
    display: flex;
    justify-content: space-between;
    color: #d6bb7e;
    font-size: 10px;
    letter-spacing: 1.5px;
}

.contact-card-header {
    display: flex;
    justify-content: space-between;
    color: #bfcddb;
    font-size: 10px;
    letter-spacing: 1.5px;
}

.contact-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d9b56c;
}

.contact-dot-multimodal {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d9b56c;
    box-shadow: 0 0 0 5px rgba(209, 201, 94, 0.12);
}



.contact-card h3 {
    margin: 45px 0 10px;
    font-size: 30px;
}

.contact-card p {
    color: #c6d4df;
    font-size: 14px;
}

.contact-button {
    display: inline-block;
    margin-top: 25px;
    padding: 13px 18px;
    background: #d9b56c;
    color: #182638;
    font-size: 13px;
    font-weight: 800;
}

.contact-button-multimodal {
    display: inline-block;
    margin-top: 25px;
    padding: 13px 18px;
    background: white;
    color: #182638;
    font-size: 13px;
    font-weight: 800;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    background: #111827;
    color: #fff;
}

.footer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 42px 0;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.footer-logo {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    background: #1e3a5f;
    font-size: 11px;
    font-weight: 800;
}

.footer-brand strong,
.footer-brand span {
    display: block;
}

.footer-brand strong {
    font-size: 13px;
}

.footer-brand span {
    margin-top: 3px;
    color: #94a3b8;
    font-size: 11px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 20px;
}

.footer-links a {
    color: #aeb8c5;
    font-size: 12px;
    transition: .25s ease;
}

.footer-links a:hover {
    color: #fff;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #7f8b9a;
    font-size: 10px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .main-menu {
        gap: 15px;
    }

    .hero-content {
        gap: 35px;
    }

    .multimodal-layout {
        grid-template-columns: 1fr 1fr;
    }

    .multimodal-intro {
        grid-column: span 2;
        grid-row: auto;
    }

    .resources-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 820px) {

    .topbar-right {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .main-menu {
        position: absolute;
        left: 4%;
        right: 4%;
        top: 76px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px;
        background: #fff;
        box-shadow: 0 15px 35px rgba(15,23,42,.12);
    }

    .main-menu.open {
        display: flex;
    }

    .nav-link,
    .nav-button {
        display: block;
        padding: 13px 15px;
    }

    .hero {
        min-height: auto;
    }

    .hero-content {
        min-height: auto;
        grid-template-columns: 1fr;
        padding-top: 90px;
        padding-bottom: 100px;
    }

    .hero-visual {
        min-height: 430px;
    }

    .section-heading {
        display: block;
    }

    .section-heading p {
        margin-top: 20px;
    }

    .document-layout,
    .veinte-layout,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .footer-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-links {
        justify-content: flex-start;
    }

    .footer-bottom {
        flex-direction: column;
    }

}


@media (max-width: 600px) {

    .topbar-left {
        font-size: 11px;
    }

    .navbar-content {
        min-height: 68px;
    }

    .hero h1 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-info {
        flex-wrap: wrap;
        gap: 15px;
    }

    .hero-divider {
        display: none;
    }

    .floating-one {
        left: 0;
        top: -35px;
    }

    .floating-two {
        right: 0;
        bottom: -45px;
    }

    .visual-main-card {
        padding: 22px;
    }

    .multimodal-layout,
    .veinte-content {
        grid-template-columns: 1fr;
    }

    .multimodal-intro {
        grid-column: auto;
        flex-direction: column;
    }

    .section {
        padding: 70px 0;
    }

    .document-section,
    .contact-section {
        padding: 70px 0;
    }

    .document-card-body {
        padding: 30px 22px;
    }

    .contact-card {
        padding: 30px;
    }

    .resource-card {
        grid-template-columns: auto 1fr;
    }

    .resource-arrow {
        display: none;
    }

}


/* ================================================================
   3.1 PAGINA: ENTIDADES ACADEMICAS
   Aislado bajo body.page-entidades para no chocar con el resto del sitio.
   Variables propias alineadas a la paleta global (navy/gold).
   ================================================================ */

/* -- Variables de la seccion (heredan navy/gold globales) -- */

:root {
    --entity-navy: var(--navy);
    --entity-navy-dark: var(--navy-dark);

    --entity-blue: #1261a0;
    --entity-blue-light: #2784c7;

    --entity-gold: var(--gold);
    --entity-gold-light: var(--gold-light);

    --entity-green: #287a69;
    --entity-purple: #6654a3;

    --entity-white: #ffffff;

    --entity-light: #f5f7fa;
    --entity-light-blue: #eef5fa;

    --entity-text: #182536;
    --entity-text-light: #64748b;

    --entity-border: #e2e8f0;

    --entity-shadow:
        0 20px 50px rgba(9, 44, 76, .10);

    --entity-shadow-hover:
        0 25px 60px rgba(9, 44, 76, .18);

    --entity-radius: 18px;

    --entity-transition:
        all .30s ease;
}

/* -- Estilos propios de la seccion -- */

/* ============================================================
   ENTIDADES ACADÉMICAS
   UASLP MULTIMODAL
============================================================ */

/* ============================================================
   FUENTE GENERAL
   MISMA TIPOGRAFÍA DE index.css
============================================================ */

/* ============================================================
   VARIABLES
============================================================ */

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

body.page-entidades .entity-hero .container,
body.page-entidades .entity-intro .container,
body.page-entidades .entity-principles .container,
body.page-entidades .entity-video-section .container,
body.page-entidades .axes-navigation .container,
body.page-entidades .axis-detail .container,
body.page-entidades .entity-closing .container {

    width: min(1180px, calc(100% - 60px));

    margin-left: auto;
    margin-right: auto;

}

/* ============================================================
   TOPBAR
============================================================ */

/* ============================================================
   NAVBAR
============================================================ */

/* ============================================================
   HERO
============================================================ */

body.page-entidades .entity-hero {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            var(--entity-navy-dark),
            var(--entity-navy)
        );

    color: #ffffff;

    padding: 75px 0 85px;

}

body.page-entidades .entity-hero::before {

    content: "";

    position: absolute;

    width: 550px;

    height: 550px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.08);

    right: -180px;

    top: -180px;

}

body.page-entidades .entity-hero::after {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    border: 1px solid rgba(214,187,126,.12);

    left: -140px;

    bottom: -160px;

}

body.page-entidades .entity-hero-container {

    position: relative;

    z-index: 2;

}

body.page-entidades .entity-breadcrumb {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 13px;

    margin-bottom: 48px;

    color: rgba(255,255,255,.65);

}

body.page-entidades .entity-breadcrumb a {

    color: #ffffff;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: var(--entity-transition);

}

body.page-entidades .entity-breadcrumb a:hover {

    color: var(--entity-gold-light);

}

body.page-entidades .entity-hero-grid {

    display: grid;

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

    gap: 80px;

    align-items: center;

}

body.page-entidades .entity-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    color: var(--entity-gold-light);

    margin-bottom: 20px;

}

body.page-entidades .entity-label-icon {

    width: 34px;

    height: 34px;

    border: 1px solid rgba(214,187,126,.45);

    border-radius: 9px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}

body.page-entidades .entity-hero h1 {

    margin: 0;

    font-size: clamp(48px, 6vw, 86px);

    line-height: .95;

    letter-spacing: -3px;

    font-weight: bold;

}

body.page-entidades .entity-hero h1 span {

    display: block;

    color: var(--entity-gold-light);

}

body.page-entidades .entity-hero-description {

    max-width: 780px;

    margin: 30px 0 20px;

    font-size: 18px;

    line-height: 1.8;

    color: rgba(255,255,255,.78);

}

body.page-entidades .entity-history-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 14px;

    border: 1px solid rgba(255,255,255,.14);

    border-radius: 8px;

    color: rgba(255,255,255,.65);

    font-size: 12px;

}

body.page-entidades .entity-hero-card {

    padding: 35px 30px;

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 20px;

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

    backdrop-filter: blur(10px);

    text-align: center;

}

body.page-entidades .hero-card-number {

    font-size: 72px;

    line-height: 1;

    font-weight: 800;

    color: var(--entity-gold-light);

}

body.page-entidades .hero-card-number.small {

    font-size: 55px;

}

body.page-entidades .hero-card-title {

    margin-top: 8px;

    font-size: 12px;

    letter-spacing: 2px;

    font-weight: 800;

    color: rgba(255,255,255,.75);

}

body.page-entidades .hero-card-divider {

    height: 1px;

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

    margin: 27px 0;

}

/* ============================================================
   INTRO
============================================================ */

body.page-entidades .entity-intro {

    padding: 100px 0;

    background: #ffffff;

}

body.page-entidades .section-kicker {

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.3px;

    color: var(--entity-blue);

    margin-bottom: 14px;

}

body.page-entidades .entity-intro-grid {

    display: grid;

    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);

    gap: 70px;

    align-items: start;

}

body.page-entidades .entity-intro-title {

    font-size: clamp(30px, 4vw, 52px);

    line-height: 1.05;

    font-weight: 300;

    color: var(--entity-navy);

}

body.page-entidades .entity-intro-title span {

    display: block;

}

body.page-entidades .entity-intro-title strong {

    display: block;

    font-weight: 800;

    color: var(--entity-blue);

}

body.page-entidades .entity-intro-text {

    max-width: 900px;

}

body.page-entidades .entity-intro-text p {

    margin: 0 0 22px;

    font-size: 17px;

    line-height: 1.85;

    color: var(--entity-text-light);

}

body.page-entidades .entity-intro-text p:last-child {

    margin-bottom: 0;

}

body.page-entidades .entity-intro-text strong {

    color: var(--entity-navy);

}

/* ============================================================
   PRINCIPIOS
============================================================ */

body.page-entidades .entity-principles {

    padding: 0 0 100px;

    background: #ffffff;

}

body.page-entidades .principles-grid {

    display: grid;

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

    gap: 20px;

}

body.page-entidades .principle-card {

    position: relative;

    min-height: 260px;

    padding: 30px;

    border: 1px solid var(--entity-border);

    border-radius: var(--entity-radius);

    background: #ffffff;

    box-shadow: var(--entity-shadow);

    overflow: hidden;

    transition: var(--entity-transition);

}

body.page-entidades .principle-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--entity-shadow-hover);

}

body.page-entidades .principle-number {

    position: absolute;

    top: 18px;

    right: 20px;

    font-size: 12px;

    font-weight: 800;

    color: #cbd5e1;

}

body.page-entidades .principle-icon {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: var(--entity-light-blue);

    color: var(--entity-blue);

    font-size: 23px;

    margin-bottom: 24px;

}

body.page-entidades .principle-card:nth-child(2) .principle-icon {

    background: #f6f2e9;

    color: var(--entity-gold);

}

body.page-entidades .principle-card:nth-child(3) .principle-icon {

    background: #edf7f4;

    color: var(--entity-green);

}

body.page-entidades .principle-card:nth-child(4) .principle-icon {

    background: #f2f0fa;

    color: var(--entity-purple);

}

body.page-entidades .principle-card h3 {

    font-size: 18px;

    line-height: 1.35;

    color: var(--entity-navy);

    margin: 0 0 14px;

}

body.page-entidades .principle-card h3 strong {

    color: var(--entity-blue);

}

body.page-entidades .principle-card p {

    color: var(--entity-text-light);

    line-height: 1.7;

    margin: 0;

}

/* ============================================================
   VIDEO
============================================================ */

body.page-entidades .entity-video-section {

    padding: 100px 0;

    background: var(--entity-light);

}

body.page-entidades .section-heading {

    margin-bottom: 50px;

}

body.page-entidades .section-heading.centered {

    text-align: center;

}

body.page-entidades .section-heading h2 {

    margin: 0;

    color: var(--entity-navy);

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.1;

    letter-spacing: -1px;

}

body.page-entidades .section-heading h2 span {

    color: var(--entity-blue);

}

body.page-entidades .section-heading p {

    max-width: 700px;

    margin: 20px auto 0;

    color: var(--entity-text-light);

    line-height: 1.8;

    font-size: 17px;

}

body.page-entidades .entity-video-wrapper {

    width: min(1050px, 100%);

    margin: auto;

    position: relative;

    padding-bottom: 56.25%;

    height: 0;

    overflow: hidden;

    border-radius: 20px;

    background: #000;

    box-shadow: var(--entity-shadow-hover);

}

body.page-entidades .entity-video-wrapper iframe {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    border: 0;

}

/* ============================================================
   NAVEGACIÓN DE LOS 5 EJES
============================================================ */

body.page-entidades .axes-navigation {

    padding: 110px 0;

    background: #ffffff;

}

body.page-entidades .axes-navigation .section-heading {

    max-width: 850px;

}

body.page-entidades .axes-navigation .section-heading p {

    margin-left: 0;

    margin-right: 0;

}

body.page-entidades .axes-menu {

    display: grid;

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

    gap: 14px;

}

body.page-entidades .axis-menu-item {

    min-height: 190px;

    padding: 25px;

    border: 1px solid var(--entity-border);

    border-radius: 16px;

    text-decoration: none;

    color: var(--entity-text);

    background: #ffffff;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: var(--entity-transition);

}

body.page-entidades .axis-menu-item:hover {

    transform: translateY(-7px);

    border-color: var(--entity-blue);

    box-shadow: var(--entity-shadow);

}

body.page-entidades .axis-menu-item > span {

    font-size: 13px;

    font-weight: 800;

    color: var(--entity-gold);

}

body.page-entidades .axis-menu-item strong {

    font-size: 17px;

    line-height: 1.4;

    color: var(--entity-navy);

}

body.page-entidades .axis-menu-item i {

    align-self: flex-end;

    width: 38px;

    height: 38px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--entity-light-blue);

    color: var(--entity-blue);

    font-size: 18px;

}

/* ============================================================
   DETALLE DE LOS EJES
============================================================ */

body.page-entidades .axis-detail {

    padding: 100px 0;

    scroll-margin-top: 100px;

}

body.page-entidades .axis-detail:nth-of-type(even) {

    background: var(--entity-light);

}

body.page-entidades .axis-detail:nth-of-type(odd) {

    background: #ffffff;

}

/* ============================================================
   BOTÓN REGRESAR
============================================================ */

body.page-entidades .axis-back-top {

    width: 100%;

    margin-bottom: 32px;

}

body.page-entidades .axis-back-button {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    min-height: 48px;

    padding: 11px 18px;

    border-radius: 10px;

    border: 1px solid var(--entity-border);

    background: #ffffff;

    color: var(--entity-navy);

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    box-shadow: 0 5px 18px rgba(9,44,76,.07);

    transition: var(--entity-transition);

}

body.page-entidades .axis-back-button i {

    font-size: 21px;

    line-height: 1;

    color: var(--entity-blue);

}

body.page-entidades .axis-back-button:hover {

    background: var(--entity-navy);

    border-color: var(--entity-navy);

    color: #ffffff;

    transform: translateX(-3px);

}

body.page-entidades .axis-back-button:hover i {

    color: var(--entity-gold-light);

}

/* ============================================================
   ENCABEZADO DEL EJE
============================================================ */

body.page-entidades .axis-detail-header {

    width: 100%;

    display: grid;

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

    gap: 25px;

    align-items: start;

    margin-bottom: 55px;

}

body.page-entidades .axis-number {

    width: 76px;

    height: 76px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--entity-navy);

    color: var(--entity-gold-light);

    font-size: 25px;

    font-weight: 800;

}

body.page-entidades .axis-small-title {

    display: block;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    color: var(--entity-blue);

    margin-bottom: 13px;

}

body.page-entidades .axis-detail-header h2 {

    width: 100%;

    margin: 0;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--entity-border);

    color: var(--entity-navy);

    font-size: clamp(35px, 4vw, 58px);

    line-height: 1.08;

    letter-spacing: -1.4px;

    font-weight: 300;

}

body.page-entidades .axis-detail-header h2 strong {

    font-weight: 800;

    color: var(--entity-blue);

}

/* ============================================================
   CONTENIDO DEL EJE
============================================================ */

body.page-entidades .axis-content {

    display: grid;

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

    gap: 65px;

    align-items: start;

}

body.page-entidades .axis-image {

    width: 100%;

    min-height: 280px;

    border-radius: 18px;

    border: 1px solid var(--entity-border);

    background: #ffffff;

    box-shadow: var(--entity-shadow);

    padding: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}

body.page-entidades .axis-original-image {

    display: block;

    width: 100%;

    max-width: 100%;

    max-height: 370px;

    height: auto;

    object-fit: contain;

}

body.page-entidades .axis-image-fallback {

    display: none;

    width: 100%;

    min-height: 250px;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            var(--entity-navy),
            var(--entity-blue)
        );

    color: #ffffff;

}

body.page-entidades .axis-image-fallback span {

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    color: var(--entity-gold-light);

}

body.page-entidades .axis-image-fallback strong {

    margin-top: 5px;

    font-size: 75px;

    line-height: 1;

}

/* ============================================================
   TEXTO DE LOS EJES
============================================================ */

body.page-entidades .axis-text {

    min-width: 0;

    max-width: 100%;

}

body.page-entidades .axis-text h3 {

    margin: 0 0 28px;

    color: var(--entity-navy);

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

    line-height: 1.45;

    font-weight: 700;

}

body.page-entidades .axis-text ul {

    margin: 0;

    padding: 0;

    list-style: none;

}

body.page-entidades .axis-text li {

    position: relative;

    padding-left: 30px;

    margin-bottom: 17px;

    color: var(--entity-text-light);

    font-size: 16.5px;

    line-height: 1.85;

}

body.page-entidades .axis-text li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 12px;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: var(--entity-gold);

}

body.page-entidades .axis-text li:last-child {

    margin-bottom: 0;

}

/* ============================================================
   COLORES INDIVIDUALES DE LOS EJES
============================================================ */

body.page-entidades .axis-evaluacion .axis-number {

    background: var(--entity-navy);

}

body.page-entidades .axis-curricular .axis-number {

    background: var(--entity-blue);

}

body.page-entidades .axis-docente .axis-number {

    background: var(--entity-green);

}

body.page-entidades .axis-estudiantil .axis-number {

    background: var(--entity-purple);

}

body.page-entidades .axis-hctc .axis-number {

    background: var(--entity-gold);

    color: var(--entity-navy);

}

/* ============================================================
   CIERRE
============================================================ */

body.page-entidades .entity-closing {

    padding: 110px 0;

    background:
        linear-gradient(
            135deg,
            var(--entity-navy-dark),
            var(--entity-navy)
        );

    color: #ffffff;

}

body.page-entidades .entity-closing-content {

    width: min(850px, 100%);

}

body.page-entidades .entity-closing .section-kicker {

    color: var(--entity-gold-light);

}

body.page-entidades .entity-closing h2 {

    margin: 0;

    font-size: clamp(35px, 5vw, 65px);

    line-height: 1.05;

    letter-spacing: -2px;

}

body.page-entidades .entity-closing h2 span {

    display: block;

    color: var(--entity-gold-light);

}

body.page-entidades .entity-closing p {

    max-width: 760px;

    margin: 25px 0 35px;

    color: rgba(255,255,255,.72);

    font-size: 17px;

    line-height: 1.8;

}

body.page-entidades .entity-closing-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 13px 20px;

    border: 1px solid rgba(255,255,255,.2);

    border-radius: 10px;

    color: #ffffff;

    text-decoration: none;

    font-weight: 700;

    transition: var(--entity-transition);

}

body.page-entidades .entity-closing-button:hover {

    background: #ffffff;

    color: var(--entity-navy);

}

/* ============================================================
   FOOTER
============================================================ */

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1100px) {
body.page-entidades .axes-menu {

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

    }
body.page-entidades .principles-grid {

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

    }
body.page-entidades .entity-hero-grid {

        gap: 45px;

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

    }
body.page-entidades .axis-content {

        gap: 40px;

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

    }
}

@media (max-width: 850px) {
body.page-entidades .entity-hero {

        padding: 55px 0 65px;

    }
body.page-entidades .entity-hero-grid {

        grid-template-columns: 1fr;

    }
body.page-entidades .entity-hero-card {

        width: 280px;

    }
body.page-entidades .entity-intro-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }
body.page-entidades .axes-menu {

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

    }
body.page-entidades .axis-content {

        grid-template-columns: 1fr;

    }
body.page-entidades .axis-image {

        max-width: 500px;

    }
}

@media (max-width: 600px) {
body.page-entidades .entity-hero .container,
body.page-entidades .entity-intro .container,
body.page-entidades .entity-principles .container,
body.page-entidades .entity-video-section .container,
body.page-entidades .axes-navigation .container,
body.page-entidades .axis-detail .container,
body.page-entidades .entity-closing .container {

        width: min(100% - 32px, 1180px);

    }
body.page-entidades .entity-hero h1 {

        font-size: 48px;

        letter-spacing: -2px;

    }
body.page-entidades .entity-hero-description {

        font-size: 16px;

    }
body.page-entidades .entity-history-label {

        font-size: 11px;

    }
body.page-entidades .entity-intro,
body.page-entidades .entity-video-section,
body.page-entidades .axes-navigation,
body.page-entidades .axis-detail,
body.page-entidades .entity-closing {

        padding: 70px 0;

    }
body.page-entidades .principles-grid {

        grid-template-columns: 1fr;

    }
body.page-entidades .axes-menu {

        grid-template-columns: 1fr;

    }
body.page-entidades .axis-menu-item {

        min-height: 150px;

    }
body.page-entidades .axis-detail-header {

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

        gap: 15px;

        margin-bottom: 40px;

    }
body.page-entidades .axis-number {

        width: 55px;

        height: 55px;

        font-size: 19px;

        border-radius: 12px;

    }
body.page-entidades .axis-small-title {

        font-size: 10px;

        letter-spacing: 1.4px;

    }
body.page-entidades .axis-detail-header h2 {

        font-size: 32px;

        letter-spacing: -.7px;

    }
body.page-entidades .axis-back-button {

        min-height: 45px;

        padding: 10px 14px;

        font-size: 13px;

    }
body.page-entidades .axis-back-button i {

        font-size: 19px;

    }
body.page-entidades .axis-image {

        min-height: 220px;

        padding: 14px;

    }
body.page-entidades .axis-original-image {

        max-height: 300px;

    }
body.page-entidades .axis-text h3 {

        font-size: 20px;

        line-height: 1.45;

    }
body.page-entidades .axis-text li {

        font-size: 15.5px;

        line-height: 1.75;

        padding-left: 25px;

    }
}

/* ================================================================
   3.2 PAGINA: ESTUDIANTES
   Aislado bajo body.page-estudiantes para no chocar con el resto del sitio.
   Variables propias alineadas a la paleta global (navy/gold).
   ================================================================ */

/* -- Variables de la seccion (heredan navy/gold globales) -- */

:root {
    --student-navy: var(--navy);
    --student-navy-dark: var(--navy-dark);

    --student-blue: #1261a0;
    --student-blue-light: #2784c7;

    --student-gold: var(--gold);
    --student-gold-light: var(--gold-light);

    --student-white: #ffffff;

    --student-light: #f5f7fa;
    --student-light-blue: #eef5fa;

    --student-text: #182536;
    --student-text-light: #64748b;

    --student-border: #e2e8f0;

    --student-shadow:
        0 20px 50px rgba(9, 44, 76, .10);

    --student-shadow-hover:
        0 25px 60px rgba(9, 44, 76, .18);

    --student-radius: 18px;
}

/* -- Estilos propios de la seccion -- */

/* ==========================================================
   ESTUDIANTES
   UASLP MULTIMODAL
========================================================== */

/* ==========================================================
   FUENTE GENERAL
========================================================== */

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

body.page-estudiantes .estudiantes-container {

    width: min(
        1180px,
        calc(100% - 40px)
    );

    margin: 0 auto;

}

/* ==========================================================
   TOPBAR
========================================================== */

/* ==========================================================
   NAVBAR
========================================================== */

/* ==========================================================
   HERO
========================================================== */

body.page-estudiantes .estudiantes-hero {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            125deg,
            var(--student-navy-dark),
            var(--student-navy) 60%,
            #123f62
        );

    color:
        var(--student-white);

    padding:
        75px 0 90px;

}

body.page-estudiantes .estudiantes-hero::before {

    content: "";

    position: absolute;

    width: 550px;

    height: 550px;

    border-radius: 50%;

    background:
        rgba(39,132,199,.13);

    right: -180px;

    top: -230px;

}

body.page-estudiantes .estudiantes-hero::after {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    border:
        1px solid rgba(214,187,126,.20);

    right: 15%;

    bottom: -210px;

}

body.page-estudiantes .estudiantes-hero-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.3fr .7fr;

    gap: 70px;

    align-items: center;

}

body.page-estudiantes .historical-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        8px 14px;

    margin-bottom: 17px;

    border:
        1px solid rgba(255,255,255,.16);

    border-radius: 30px;

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

    color:
        rgba(255,255,255,.76);

    font-size: 12px;

}

body.page-estudiantes .actor-label {

    display: flex;

    align-items: center;

    gap: 8px;

    color:
        var(--student-gold-light);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 15px;

}

body.page-estudiantes .estudiantes-hero h1 {

    margin: 0;

    font-size:
        clamp(46px, 7vw, 82px);

    line-height: .95;

    letter-spacing: -3px;

    font-weight: bold;

}

body.page-estudiantes .estudiantes-hero h1 span {

    display: block;

    color:
        var(--student-gold-light);

}

body.page-estudiantes .hero-description {

    max-width: 650px;

    margin:
        28px 0 30px;

    color:
        rgba(255,255,255,.78);

    font-size: 18px;

    line-height: 1.75;

}

body.page-estudiantes .hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}

body.page-estudiantes .btn-estudiantes-primary,
body.page-estudiantes .btn-estudiantes-secondary {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    text-decoration: none;

    border-radius: 10px;

    padding:
        13px 18px;

    font-weight: 700;

    font-size: 14px;

    transition:
        .25s ease;

}

body.page-estudiantes .btn-estudiantes-primary {

    background:
        var(--student-gold);

    color:
        var(--student-white);

}

body.page-estudiantes .btn-estudiantes-primary:hover {

    background:
        var(--student-gold-light);

    color:
        var(--student-navy-dark);

    transform:
        translateY(-2px);

}

body.page-estudiantes .btn-estudiantes-secondary {

    border:
        1px solid rgba(255,255,255,.20);

    color:
        rgba(255,255,255,.90);

}

body.page-estudiantes .btn-estudiantes-secondary:hover {

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

    color:
        var(--student-white);

}

/* ==========================================================
   HERO CARD
========================================================== */

body.page-estudiantes .estudiantes-hero-card {

    position: relative;

    overflow: hidden;

    min-height: 350px;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius:
        25px;

    padding:
        35px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.11),
            rgba(255,255,255,.035)
        );

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 25px 70px rgba(0,0,0,.20);

}

body.page-estudiantes .hero-card-decoration {

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    right: -70px;

    top: -70px;

    border:
        1px solid rgba(214,187,126,.28);

}

body.page-estudiantes .hero-card-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background:
        rgba(214,187,126,.14);

    color:
        var(--student-gold-light);

    font-size: 27px;

}

body.page-estudiantes .hero-card-small {

    display: block;

    margin-top: 35px;

    font-size: 11px;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,.62);

}

body.page-estudiantes .estudiantes-hero-card > strong {

    display: block;

    margin-top: 8px;

    font-size: 72px;

    line-height: 1;

}

body.page-estudiantes .hero-card-title {

    display: block;

    margin-top: 5px;

    font-size: 13px;

    letter-spacing: 2px;

    font-weight: 700;

    color:
        var(--student-gold-light);

}

body.page-estudiantes .hero-card-line {

    width: 70px;

    height: 2px;

    margin:
        25px 0;

    background:
        var(--student-gold);

}

body.page-estudiantes .hero-card-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

body.page-estudiantes .hero-card-bottom div {

    display: flex;

    align-items: baseline;

    gap: 7px;

}

body.page-estudiantes .hero-card-bottom strong {

    font-size: 25px;

}

body.page-estudiantes .hero-card-bottom span {

    font-size: 12px;

    color:
        rgba(255,255,255,.60);

}

body.page-estudiantes .hero-card-bottom > i {

    color:
        var(--student-gold-light);

    font-size: 22px;

}

/* ==========================================================
   INTRO
========================================================== */

body.page-estudiantes .estudiantes-intro {

    padding:
        90px 0 60px;

    background:
        var(--student-white);

}

body.page-estudiantes .section-kicker {

    display: inline-block;

    color:
        var(--student-gold);

    font-size: 12px;

    letter-spacing: 2.3px;

    font-weight: 800;

}

body.page-estudiantes .intro-grid {

    display: grid;

    grid-template-columns:
        .7fr 1.3fr;

    gap: 80px;

    margin-top: 25px;

}

body.page-estudiantes .intro-title span {

    font-size: 13px;

    color:
        var(--student-text-light);

    letter-spacing: 2px;

}

body.page-estudiantes .intro-title h2 {

    margin:
        8px 0 15px;

    font-size:
        clamp(40px, 5vw, 64px);

    color:
        var(--student-navy);

    line-height: .95;

    letter-spacing: -2px;

}

body.page-estudiantes .title-line {

    width: 65px;

    height: 3px;

    background:
        var(--student-gold);

}

body.page-estudiantes .intro-text {

    font-size: 17px;

    line-height: 1.8;

    color:
        var(--student-text-light);

}

body.page-estudiantes .intro-text p {

    margin:
        0 0 18px;

}

/* ==========================================================
   HIGHLIGHTS
========================================================== */

body.page-estudiantes .estudiantes-highlights {

    padding:
        35px 0 90px;

}

body.page-estudiantes .highlights-grid {

    display: grid;

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

    gap: 16px;

}

body.page-estudiantes .highlight-card {

    padding:
        28px 24px;

    min-height: 190px;

    border-radius:
        var(--student-radius);

    background:
        var(--student-light-blue);

    border:
        1px solid var(--student-border);

    transition:
        .3s ease;

}

body.page-estudiantes .highlight-card:nth-child(2) {

    background:
        #f7f4eb;

}

body.page-estudiantes .highlight-card:nth-child(3) {

    background:
        #edf6f3;

}

body.page-estudiantes .highlight-card:nth-child(4) {

    background:
        #f1eef8;

}

body.page-estudiantes .highlight-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--student-shadow);

}

body.page-estudiantes .highlight-card span {

    display: block;

    color:
        var(--student-blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}

body.page-estudiantes .highlight-card h3 {

    margin:
        8px 0;

    color:
        var(--student-navy);

    font-size: 25px;

}

body.page-estudiantes .highlight-card strong {

    font-size: 13px;

    color:
        var(--student-text-light);

    font-weight: 500;

    line-height: 1.5;

}

/* ==========================================================
   VIDEO
========================================================== */

body.page-estudiantes .estudiantes-video-section {

    padding:
        90px 0;

    background:
        var(--student-light);

}

body.page-estudiantes .section-heading-center {

    max-width: 750px;

    margin:
        0 auto 35px;

    text-align: center;

}

body.page-estudiantes .section-heading-center > span {

    color:
        var(--student-gold);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}

body.page-estudiantes .section-heading-center h2 {

    margin:
        9px 0 12px;

    color:
        var(--student-navy);

    font-size:
        clamp(30px, 4vw, 46px);

}

body.page-estudiantes .section-heading-center p {

    margin: 0;

    color:
        var(--student-text-light);

}

body.page-estudiantes .estudiantes-video-wrapper {

    max-width: 900px;

    margin: 0 auto;

    aspect-ratio: 16 / 9;

    border-radius:
        20px;

    overflow: hidden;

    background:
        #000;

    box-shadow:
        var(--student-shadow);

}

body.page-estudiantes .estudiantes-video-wrapper iframe {

    width: 100%;

    height: 100%;

    display: block;

}

/* ==========================================================
   ETAPAS
========================================================== */

body.page-estudiantes .student-stages {

    padding:
        90px 0;

    background:
        var(--student-white);

}

body.page-estudiantes .section-heading > span {

    color:
        var(--student-gold);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}

body.page-estudiantes .section-heading h2 {

    margin:
        8px 0;

    color:
        var(--student-navy);

    font-size:
        clamp(32px, 4vw, 48px);

}

body.page-estudiantes .section-heading p {

    margin: 0;

    color:
        var(--student-text-light);

}

body.page-estudiantes .stages-grid {

    display: grid;

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

    gap: 15px;

    margin-top: 35px;

}

body.page-estudiantes .stage-card {

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    gap: 17px;

    align-items: center;

    padding:
        23px;

    border:
        1px solid var(--student-border);

    border-radius:
        var(--student-radius);

    text-decoration: none;

    color:
        var(--student-text);

    background:
        var(--student-white);

    transition:
        .3s ease;

}

body.page-estudiantes .stage-card:hover,
body.page-estudiantes .stage-card.stage-active {

    border-color:
        rgba(18,97,160,.30);

    box-shadow:
        var(--student-shadow);

    transform:
        translateY(-4px);

}

body.page-estudiantes .stage-number {

    font-size: 25px;

    font-weight: 800;

    color:
        var(--student-gold);

}

body.page-estudiantes .stage-card span {

    display: block;

    color:
        var(--student-text-light);

    font-size: 9px;

    letter-spacing: 1.5px;

    font-weight: 800;

}

body.page-estudiantes .stage-card h3 {

    margin:
        5px 0 0;

    color:
        var(--student-navy);

    font-size: 17px;

}

body.page-estudiantes .stage-card > i {

    color:
        var(--student-blue);

}

/* ==========================================================
   SECCIONES
========================================================== */

body.page-estudiantes .student-section {

    padding:
        90px 0;

}

body.page-estudiantes .student-section-first {

    background:
        var(--student-light-blue);

}

body.page-estudiantes .student-section-during {

    background:
        var(--student-white);

}

body.page-estudiantes .student-section-final {

    background:
        var(--student-light);

}

body.page-estudiantes .student-section-heading {

    display: grid;

    grid-template-columns:
        90px 1fr;

    gap: 25px;

    align-items: start;

    margin-bottom: 35px;

}

body.page-estudiantes .section-number {

    font-size: 58px;

    font-weight: 800;

    color:
        var(--student-gold);

    line-height: 1;

}

body.page-estudiantes .student-section-heading span {

    color:
        var(--student-blue);

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 800;

}

body.page-estudiantes .student-section-heading h2 {

    margin:
        8px 0;

    color:
        var(--student-navy);

    font-size:
        clamp(32px, 4vw, 50px);

    line-height: 1.05;

}

body.page-estudiantes .student-section-heading p {

    max-width: 700px;

    margin: 0;

    color:
        var(--student-text-light);

    line-height: 1.7;

}

/* ==========================================================
   ACORDEÓN
========================================================== */

body.page-estudiantes .student-accordion {

    max-width: 1180px;

}

body.page-estudiantes .accordion-item {

    margin-bottom: 12px;

    overflow: hidden;

    background:
        var(--student-white);

    border:
        1px solid var(--student-border);

    border-radius:
        16px;

    box-shadow:
        0 5px 20px rgba(9,44,76,.04);

}

body.page-estudiantes .accordion-header {

    width: 100%;

    border: none;

    background:
        var(--student-white);

    padding:
        18px 22px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    text-align: left;

    cursor: pointer;

    color:
        var(--student-navy);

}

body.page-estudiantes .accordion-left {

    display: flex;

    align-items: center;

    gap: 15px;

}

body.page-estudiantes .accordion-icon {

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background:
        var(--student-light-blue);

    color:
        var(--student-blue);

    font-size: 20px;

}

body.page-estudiantes .accordion-left span {

    display: block;

    color:
        var(--student-gold);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}

body.page-estudiantes .accordion-left strong {

    display: block;

    margin-top: 3px;

    font-size: 17px;

}

body.page-estudiantes .accordion-plus {

    font-size: 20px;

    color:
        var(--student-blue);

    transition:
        .3s ease;

}

body.page-estudiantes .accordion-content {

    display: grid;

    grid-template-rows: 0fr;

    transition:
        .35s ease;

}

body.page-estudiantes .accordion-content-inner {

    overflow: hidden;

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 25px;

    align-items: center;

    padding:
        0 25px;

}

body.page-estudiantes .accordion-content-inner img {

    width: 100%;

    border-radius:
        12px;

    border:
        1px solid var(--student-border);

}

body.page-estudiantes .accordion-content-inner p {

    margin:
        0;

    padding:
        25px 0;

    color:
        var(--student-text-light);

    line-height: 1.75;

    font-size: 15px;

}

body.page-estudiantes .accordion-item.open
.accordion-content {

    grid-template-rows: 1fr;

}

body.page-estudiantes .accordion-item.open
.accordion-plus {

    transform:
        rotate(45deg);

}

body.page-estudiantes .accordion-item.open
.accordion-header {

    background:
        #fafcfe;

}

/* ==========================================================
   DURANTE TUS CURSOS
========================================================== */

body.page-estudiantes .student-action-grid {

    display: grid;

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

    gap: 22px;

}

body.page-estudiantes .student-action-card {

    overflow: hidden;

    border:
        1px solid var(--student-border);

    border-radius:
        18px;

    background:
        var(--student-white);

    box-shadow:
        0 10px 30px rgba(9,44,76,.05);

    transition:
        .3s ease;

}

body.page-estudiantes .student-action-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--student-shadow-hover);

}

body.page-estudiantes .action-image {

    position: relative;

    height: 220px;

    background:
        var(--student-light-blue);

    overflow: hidden;

}

body.page-estudiantes .action-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        .4s ease;

}

body.page-estudiantes .student-action-card:hover
.action-image img {

    transform:
        scale(1.04);

}

body.page-estudiantes .action-image > span {

    position: absolute;

    top: 14px;

    left: 14px;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--student-navy);

    color:
        var(--student-white);

    font-size: 12px;

    font-weight: 800;

}

body.page-estudiantes .action-content {

    padding:
        25px;

}

body.page-estudiantes .action-content h3 {

    margin:
        0 0 12px;

    color:
        var(--student-navy);

    font-size: 22px;

}

body.page-estudiantes .action-content p {

    margin: 0;

    color:
        var(--student-text-light);

    font-size: 14px;

    line-height: 1.75;

}

/* ==========================================================
   FINAL
========================================================== */

body.page-estudiantes .final-actions {

    display: grid;

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

    gap: 25px;

}

body.page-estudiantes .final-action-card {

    display: grid;

    grid-template-columns:
        190px 1fr;

    overflow: hidden;

    border:
        1px solid var(--student-border);

    border-radius:
        18px;

    background:
        var(--student-white);

    box-shadow:
        0 10px 30px rgba(9,44,76,.05);

}

body.page-estudiantes .final-image {

    position: relative;

    min-height: 270px;

    background:
        var(--student-light-blue);

}

body.page-estudiantes .final-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

body.page-estudiantes .final-image > span {

    position: absolute;

    top: 13px;

    left: 13px;

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--student-gold);

    color:
        var(--student-white);

    font-size: 11px;

    font-weight: 800;

}

body.page-estudiantes .final-content {

    padding:
        30px;

}

body.page-estudiantes .final-content > span {

    color:
        var(--student-gold);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}

body.page-estudiantes .final-content h3 {

    margin:
        8px 0 12px;

    color:
        var(--student-navy);

    font-size: 27px;

}

body.page-estudiantes .final-content p {

    margin: 0;

    color:
        var(--student-text-light);

    line-height: 1.75;

    font-size: 14px;

}

body.page-estudiantes .final-content em {

    display: block;

    margin-top: 6px;

    color:
        var(--student-blue);

}

/* ==========================================================
   YO ENSEÑO - YO APRENDO
========================================================== */

body.page-estudiantes .yoea-section {

    padding:
        90px 0;

    background:
        var(--student-navy);

}

body.page-estudiantes .yoea-card {

    display: grid;

    grid-template-columns:
        1fr 420px;

    overflow: hidden;

    border-radius:
        24px;

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

    border:
        1px solid rgba(255,255,255,.13);

}

body.page-estudiantes .yoea-content {

    padding:
        55px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

body.page-estudiantes .yoea-content .section-kicker {

    color:
        var(--student-gold-light);

}

body.page-estudiantes .yoea-content h2 {

    margin:
        12px 0 17px;

    color:
        var(--student-white);

    font-size:
        clamp(36px, 5vw, 60px);

    line-height: 1;

}

body.page-estudiantes .yoea-content h2 span {

    display: block;

    color:
        var(--student-gold-light);

}

body.page-estudiantes .yoea-content p {

    max-width: 570px;

    margin:
        0 0 25px;

    color:
        rgba(255,255,255,.72);

    line-height: 1.75;

}

body.page-estudiantes .yoea-button {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        13px 19px;

    border-radius:
        10px;

    background:
        var(--student-gold);

    color:
        var(--student-white);

    text-decoration: none;

    font-weight: 700;

    font-size: 14px;

    transition:
        .25s ease;

}

body.page-estudiantes .yoea-button:hover {

    background:
        var(--student-gold-light);

    color:
        var(--student-navy);

    transform:
        translateY(-2px);

}

body.page-estudiantes .yoea-image-link {

    position: relative;

    display: block;

    min-height: 360px;

    overflow: hidden;

    background:
        #fff;

}

body.page-estudiantes .yoea-image-link img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        .4s ease;

}

body.page-estudiantes .yoea-image-link-2 img {

    width: 450px;

    height: 450px;

    object-fit: fill;

    display: block;

    transition:
        .4s ease;

}

body.page-estudiantes .yoea-image-link:hover img {

    transform:
        scale(1.05);

}

body.page-estudiantes .pdf-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    background:
        rgba(6,29,51,.68);

    color:
        var(--student-white);

    opacity: 0;

    transition:
        .3s ease;

}

body.page-estudiantes .yoea-image-link:hover
.pdf-overlay {

    opacity: 1;

}

body.page-estudiantes .pdf-overlay i {

    font-size: 45px;

    color:
        var(--student-gold-light);

}

body.page-estudiantes .pdf-overlay span {

    font-weight: 800;

    letter-spacing: .5px;

}

/* ==========================================================
   AVISO HISTÓRICO
========================================================== */

body.page-estudiantes .historical-note {

    padding:
        30px 0;

    background:
        #f7f8fa;

    border-top:
        1px solid var(--student-border);

}

body.page-estudiantes .historical-note-inner {

    display: flex;

    gap: 15px;

    align-items: flex-start;

    padding:
        20px 22px;

    border:
        1px solid var(--student-border);

    border-radius:
        14px;

    background:
        var(--student-white);

}

body.page-estudiantes .historical-note-inner > i {

    color:
        var(--student-gold);

    font-size: 22px;

}

body.page-estudiantes .historical-note-inner strong {

    color:
        var(--student-navy);

}

body.page-estudiantes .historical-note-inner p {

    margin:
        5px 0 0;

    color:
        var(--student-text-light);

    font-size: 13px;

    line-height: 1.6;

}

/* ==========================================================
   REGRESAR
========================================================== */

body.page-estudiantes .return-stage {

    margin-top:
        35px;

}

body.page-estudiantes .return-stage a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        var(--student-blue);

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

}

body.page-estudiantes .return-stage a:hover {

    color:
        var(--student-navy);

}

/* ==========================================================
   FOOTER
========================================================== */

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1000px) {
body.page-estudiantes .estudiantes-hero-grid {

        grid-template-columns:
            1fr;

        gap: 45px;

    }
body.page-estudiantes .estudiantes-hero-card {

        max-width: 500px;

    }
body.page-estudiantes .highlights-grid {

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

    }
body.page-estudiantes .intro-grid {

        grid-template-columns:
            1fr;

        gap: 30px;

    }
body.page-estudiantes .stages-grid {

        grid-template-columns:
            1fr;

    }
body.page-estudiantes .yoea-card {

        grid-template-columns:
            1fr 330px;

    }
}

@media (max-width: 800px) {
body.page-estudiantes .student-action-grid,
body.page-estudiantes .final-actions {

        grid-template-columns:
            1fr;

    }
body.page-estudiantes .yoea-card {

        grid-template-columns:
            1fr;

    }
body.page-estudiantes .yoea-image-link {

        min-height:
            300px;

    }
}

@media (max-width: 600px) {
body.page-estudiantes .estudiantes-container {

        width:
            min(
                100% - 28px,
                1180px
            );

    }
body.page-estudiantes .estudiantes-hero {

        padding:
            55px 0 65px;

    }
body.page-estudiantes .estudiantes-hero h1 {

        font-size:
            52px;

        letter-spacing:
            -2px;

    }
body.page-estudiantes .hero-description {

        font-size:
            16px;

    }
body.page-estudiantes .hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;

    }
body.page-estudiantes .btn-estudiantes-primary,
body.page-estudiantes .btn-estudiantes-secondary {

        justify-content:
            center;

    }
body.page-estudiantes .estudiantes-hero-card {

        min-height:
            300px;

    }
body.page-estudiantes .highlights-grid {

        grid-template-columns:
            1fr;

    }
body.page-estudiantes .student-section-heading {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }
body.page-estudiantes .section-number {

        font-size:
            42px;

    }
body.page-estudiantes .accordion-content-inner {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }
body.page-estudiantes .accordion-content-inner img {

        max-width:
            170px;

    }
body.page-estudiantes .final-action-card {

        grid-template-columns:
            1fr;

    }
body.page-estudiantes .final-image {

        min-height:
            220px;

    }
body.page-estudiantes .yoea-content {

        padding:
            35px 25px;

    }
body.page-estudiantes .yoea-image-link {

        min-height:
            260px;

    }
}

/* -- Navbar y acordeones propios (antes en <style> inline) -- */

/* ==================================================
           NAVBAR
        ================================================== */

/* ==================================================
           MENÚ PRINCIPAL
        ================================================== */

/* ==================================================
           SUBMENÚ
        ================================================== */

/* ==================================================
           BOTÓN MENÚ MÓVIL
        ================================================== */

/* ==================================================
           PRIMERA ETAPA
           MISMO FORMATO QUE SEGUNDA ETAPA
        ================================================== */

body.page-estudiantes .student-section-first .student-accordion {

            display: grid;

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

            gap: 24px;

        }

body.page-estudiantes .student-section-first .accordion-item {

            overflow: hidden;

            border-radius: 14px;

            background: #ffffff;

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

            border: 1px solid rgba(0,0,0,.08);

            transition:
                transform .25s ease,
                box-shadow .25s ease;

        }

body.page-estudiantes .student-section-first .accordion-item:hover {

            transform: translateY(-4px);

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

        }

/* ==================================================
           IMAGEN PRIMERA ETAPA
           MISMO FORMATO DE SEGUNDA ETAPA
        ================================================== */

body.page-estudiantes .student-section-first .accordion-header {

            position: relative;

            display: block;

            width: 100%;

            padding: 0;

            border: 0;

            background: transparent;

            text-align: left;

        }

body.page-estudiantes .student-section-first .accordion-header::before {

            content: "";

            display: block;

            width: 100%;

            aspect-ratio: 16 / 10;

            background:
                linear-gradient(
                    to top,
                    rgba(0,0,0,.72),
                    rgba(0,0,0,.05) 65%
                );

            position: absolute;

            left: 0;
            top: 0;

            z-index: 1;

            pointer-events: none;

        }

body.page-estudiantes .student-section-first .accordion-header img {

            display: block;

            width: 100%;

            aspect-ratio: 16 / 10;

            object-fit: cover;

        }

/* ==================================================
           ENCABEZADO SOBRE IMAGEN
        ================================================== */

body.page-estudiantes .student-section-first .accordion-left {

            position: absolute;

            left: 15px;

            right: 15px;

            bottom: 15px;

            z-index: 3;

            display: flex;

            align-items: center;

            gap: 12px;

            color: #ffffff;

            text-shadow:
                0 2px 5px rgba(0,0,0,.55);

        }

body.page-estudiantes .student-section-first .accordion-icon {

            display: flex;

            align-items: center;

            justify-content: center;

            width: 42px;

            height: 42px;

            flex: 0 0 42px;

            border-radius: 10px;

            background:
                rgba(9,44,76,.88);

            color: #ffffff;

        }

body.page-estudiantes .student-section-first .accordion-left > div:last-child {

            min-width: 0;

        }

body.page-estudiantes .student-section-first .accordion-left span {

            display: block;

            font-size: 12px;

            font-weight: 700;

            letter-spacing: 1px;

            margin-bottom: 2px;

        }

body.page-estudiantes .student-section-first .accordion-left strong {

            display: block;

            font-size: 17px;

            line-height: 1.2;

            color: #ffffff;

        }

/* ==================================================
           CONTENIDO PRIMERA ETAPA
           AHORA SIEMPRE VISIBLE
        ================================================== */

body.page-estudiantes .student-section-first .accordion-content {

            display: block;

        }

body.page-estudiantes .student-section-first .accordion-content-inner {

            overflow: visible;

            padding: 22px;

        }

body.page-estudiantes .student-section-first .accordion-content-inner p {

            margin: 0;

            color: #4b5563;

            line-height: 1.75;

            font-size: 15px;

        }

body.page-estudiantes .student-section-first .accordion-content-inner p strong {

            color: #092c4c;

        }

/* ==================================================
           OCULTAR PLUS
           YA NO SE UTILIZA ACORDEÓN
        ================================================== */

body.page-estudiantes .student-section-first .accordion-plus {

            display: none;

        }

/* ==================================================
           PUNTO 2
        ================================================== */

body.page-estudiantes .student-section-during .student-action-grid {

            display: grid;

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

            gap: 24px;

        }

/* ==================================================
           RESPONSIVE
        ================================================== */

@media (max-width: 1100px) {
body.page-estudiantes .student-section-first .student-accordion {

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

            }
}

@media (max-width: 900px) {
/* PRIMERA ETAPA */
body.page-estudiantes .student-section-first .student-accordion {

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

            }
/* SEGUNDA ETAPA */
body.page-estudiantes .student-section-during .student-action-grid {

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

            }
}

@media (max-width: 650px) {
body.page-estudiantes .student-section-first .student-accordion {

                grid-template-columns:
                    1fr;

            }
body.page-estudiantes .student-section-during .student-action-grid {

                grid-template-columns:
                    1fr;

            }
}

/* ================================================================
   3.3 PAGINA: GESTION
   Aislado bajo body.page-gestion para no chocar con el resto del sitio.
   Variables propias alineadas a la paleta global (navy/gold).
   ================================================================ */

/* -- Variables de la seccion (heredan navy/gold globales) -- */

:root {
    --gestion-navy: var(--navy);
    --gestion-navy-dark: var(--navy-dark);

    --gestion-blue: #1261a0;
    --gestion-blue-light: #2784c7;

    --gestion-gold: var(--gold);
    --gestion-gold-light: var(--gold-light);

    --gestion-green: #287a69;
    --gestion-green-light: #eaf6f2;

    --gestion-white: #ffffff;

    --gestion-light: #f5f7fa;
    --gestion-light-blue: #eef5fa;

    --gestion-text: #182536;
    --gestion-text-light: #64748b;

    --gestion-border: #e2e8f0;

    --gestion-shadow:
        0 20px 50px rgba(9, 44, 76, .10);

    --gestion-shadow-hover:
        0 25px 60px rgba(9, 44, 76, .18);

    --gestion-radius: 18px;

    --gestion-transition:
        all .30s ease;
}

/* -- Estilos propios de la seccion -- */

/* ============================================================
   GESTIÓN
   Plataforma Multimodal
   ============================================================ */

/* ============================================================
   GENERAL
   ============================================================ */

body.page-gestion .gestion-container {

    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;

}

body.page-gestion .gestion-eyebrow {

    display: inline-block;

    margin-bottom: 12px;

    font-size: .76rem;

    font-weight: 800;

    letter-spacing: .16em;

    color: var(--gestion-gold);

}

body.page-gestion .gestion-section-heading {

    margin-bottom: 45px;

}

body.page-gestion .gestion-section-heading.centered {

    text-align: center;

}

body.page-gestion .gestion-section-heading h2 {

    margin: 0;

    color: var(--gestion-navy);

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.15;

    font-weight: 800;

}

body.page-gestion .gestion-section-heading p {

    max-width: 750px;

    margin: 16px auto 0;

    color: var(--gestion-text-light);

    font-size: 1.05rem;

    line-height: 1.8;

}

/* ============================================================
   TOPBAR
   ============================================================ */

/* ============================================================
   NAVBAR
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */

body.page-gestion .gestion-hero {

    position: relative;

    overflow: hidden;

    min-height: 490px;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            120deg,
            var(--gestion-navy-dark),
            var(--gestion-navy) 58%,
            #114e7b
        );

    color: white;

}

body.page-gestion .gestion-hero-decoration {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}

body.page-gestion .gestion-decoration-one {

    width: 420px;

    height: 420px;

    right: -160px;

    top: -160px;

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

}

body.page-gestion .gestion-decoration-two {

    width: 280px;

    height: 280px;

    left: -140px;

    bottom: -150px;

    border: 1px solid rgba(214,187,126,.16);

}

body.page-gestion .gestion-hero .gestion-container {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 330px;

    align-items: center;

    gap: 70px;

    padding: 70px 0;

}

body.page-gestion .gestion-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 24px;

    color: rgba(255,255,255,.60);

    font-size: .80rem;

}

body.page-gestion .gestion-breadcrumb a {

    color: rgba(255,255,255,.70);

    text-decoration: none;

}

body.page-gestion .gestion-breadcrumb a:hover {

    color: white;

}

body.page-gestion .gestion-hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    padding: 8px 13px;

    border: 1px solid rgba(214,187,126,.35);

    border-radius: 30px;

    background: rgba(185,148,78,.10);

    color: var(--gestion-gold-light);

    font-size: .72rem;

    font-weight: 800;

    letter-spacing: .10em;

}

body.page-gestion .gestion-hero h1 {

    margin: 0;

    max-width: 850px;

    font-size: clamp(2.7rem, 6vw, 4.8rem);

    line-height: 1.03;

    letter-spacing: -.04em;

}

body.page-gestion .gestion-hero h1 span {

    color: var(--gestion-gold-light);

}

body.page-gestion .gestion-hero-description {

    max-width: 720px;

    margin: 25px 0 0;

    color: rgba(255,255,255,.78);

    font-size: 1.08rem;

    line-height: 1.8;

}

body.page-gestion .gestion-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;

}

body.page-gestion .gestion-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 13px 19px;

    border-radius: 12px;

    text-decoration: none;

    font-size: .88rem;

    font-weight: 700;

    transition: var(--gestion-transition);

}

body.page-gestion .gestion-btn-light {

    border: 1px solid rgba(255,255,255,.22);

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

    color: white;

}

body.page-gestion .gestion-btn-light:hover {

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

    color: white;

    transform: translateY(-2px);

}

body.page-gestion .gestion-btn-gold {

    background: var(--gestion-gold);

    color: white;

}

body.page-gestion .gestion-btn-gold:hover {

    background: #a88442;

    color: white;

    transform: translateY(-2px);

}

body.page-gestion .gestion-hero-card {

    padding: 32px;

    border: 1px solid rgba(255,255,255,.14);

    border-radius: 24px;

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

    backdrop-filter: blur(10px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.15);

}

body.page-gestion .gestion-hero-card-icon {

    width: 65px;

    height: 65px;

    display: grid;

    place-items: center;

    margin-bottom: 22px;

    border-radius: 18px;

    background: rgba(214,187,126,.15);

    color: var(--gestion-gold-light);

    font-size: 1.7rem;

}

body.page-gestion .gestion-hero-card strong {

    display: block;

    font-size: 1.25rem;

    line-height: 1.4;

}

body.page-gestion .gestion-hero-card span {

    display: block;

    margin-top: 10px;

    color: rgba(255,255,255,.62);

    font-size: .84rem;

    line-height: 1.6;

}

/* ============================================================
   HISTORICAL
   ============================================================ */

body.page-gestion .gestion-history {

    padding: 35px 0 0;

    background: var(--gestion-light);

}

body.page-gestion .gestion-history-box {

    display: flex;

    align-items: flex-start;

    gap: 17px;

    padding: 20px 23px;

    border: 1px solid #dce6ef;

    border-radius: 15px;

    background: white;

}

body.page-gestion .gestion-history-icon {

    width: 43px;

    height: 43px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background: var(--gestion-light-blue);

    color: var(--gestion-blue);

}

body.page-gestion .gestion-history-box strong {

    color: var(--gestion-navy);

}

body.page-gestion .gestion-history-box p {

    margin: 4px 0 0;

    color: var(--gestion-text-light);

    font-size: .88rem;

}

/* ============================================================
   INTRO
   ============================================================ */

body.page-gestion .gestion-intro {

    padding: 85px 0;

    background: var(--gestion-light);

}

body.page-gestion .gestion-intro-grid {

    display: grid;

    grid-template-columns: 1.35fr .65fr;

    gap: 60px;

    align-items: start;

}

body.page-gestion .gestion-intro-text p {

    color: var(--gestion-text-light);

    font-size: 1rem;

    line-height: 1.85;

}

body.page-gestion .gestion-intro-text .gestion-lead {

    margin-top: 0;

    color: var(--gestion-text);

    font-size: 1.18rem;

    line-height: 1.8;

}

body.page-gestion .gestion-check-list {

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin: 27px 0 0;

    padding: 0;

    list-style: none;

}

body.page-gestion .gestion-check-list li {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    color: var(--gestion-text);

    line-height: 1.65;

}

body.page-gestion .gestion-check-list i {

    margin-top: 4px;

    color: var(--gestion-green);

}

body.page-gestion .gestion-intro-card {

    position: relative;

    overflow: hidden;

    padding: 38px;

    border-radius: 24px;

    background: white;

    box-shadow: var(--gestion-shadow);

}

body.page-gestion .gestion-card-number {

    position: absolute;

    right: 22px;

    top: 15px;

    color: #edf2f6;

    font-size: 4rem;

    font-weight: 900;

}

body.page-gestion .gestion-card-icon {

    width: 62px;

    height: 62px;

    display: grid;

    place-items: center;

    border-radius: 17px;

    background: var(--gestion-light-blue);

    color: var(--gestion-blue);

    font-size: 1.5rem;

}

body.page-gestion .gestion-intro-card h3 {

    position: relative;

    margin: 25px 0 10px;

    color: var(--gestion-navy);

    font-size: 1.35rem;

}

body.page-gestion .gestion-intro-card p {

    position: relative;

    margin: 0;

    color: var(--gestion-text-light);

    line-height: 1.75;

}

/* ============================================================
   VIDEO
   ============================================================ */

body.page-gestion .gestion-video-section {

    padding: 90px 0;

    background: white;

}

body.page-gestion .gestion-video-header {

    max-width: 760px;

    margin: 0 auto 35px;

    text-align: center;

}

body.page-gestion .gestion-video-header h2 {

    margin: 0;

    color: var(--gestion-navy);

    font-size: clamp(2rem, 4vw, 2.8rem);

}

body.page-gestion .gestion-video-header p {

    margin: 15px 0 0;

    color: var(--gestion-text-light);

    line-height: 1.7;

}

body.page-gestion .gestion-video-wrapper {

    width: min(900px, 100%);

    margin: 0 auto;

    overflow: hidden;

    border-radius: 22px;

    background: #0b1e2e;

    box-shadow: var(--gestion-shadow-hover);

}

body.page-gestion .gestion-video-wrapper iframe {

    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    border: 0;

}

/* ============================================================
   PILLARS
   ============================================================ */

body.page-gestion .gestion-pillars {

    padding: 90px 0;

    background: var(--gestion-light-blue);

}

body.page-gestion .gestion-pillars-grid {

    display: grid;

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

    gap: 22px;

}

body.page-gestion .gestion-pillar {

    padding: 35px;

    border-radius: 22px;

    background: white;

    box-shadow: 0 12px 35px rgba(9,44,76,.07);

    transition: var(--gestion-transition);

}

body.page-gestion .gestion-pillar:hover {

    transform: translateY(-7px);

    box-shadow: var(--gestion-shadow-hover);

}

body.page-gestion .gestion-pillar-icon {

    width: 58px;

    height: 58px;

    display: grid;

    place-items: center;

    margin-bottom: 22px;

    border-radius: 16px;

    font-size: 1.4rem;

}

body.page-gestion .pillar-blue .gestion-pillar-icon {

    background: var(--gestion-light-blue);

    color: var(--gestion-blue);

}

body.page-gestion .pillar-gold .gestion-pillar-icon {

    background: #faf5e9;

    color: var(--gestion-gold);

}

body.page-gestion .pillar-green .gestion-pillar-icon {

    background: var(--gestion-green-light);

    color: var(--gestion-green);

}

body.page-gestion .gestion-pillar h3 {

    margin: 0 0 12px;

    color: var(--gestion-navy);

    font-size: 1.25rem;

}

body.page-gestion .gestion-pillar p {

    margin: 0;

    color: var(--gestion-text-light);

    line-height: 1.75;

}

/* ============================================================
   ENTIDADES
   ============================================================ */

body.page-gestion .gestion-entities {

    padding: 90px 0;

    background: white;

}

body.page-gestion .gestion-entities-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 16px;

}

body.page-gestion .gestion-entity {

    min-height: 170px;

    padding: 25px 17px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border: 1px solid var(--gestion-border);

    border-radius: 18px;

    background: white;

    transition: var(--gestion-transition);

}

body.page-gestion .gestion-entity:hover {

    transform: translateY(-5px);

    border-color: #cbdbe8;

    box-shadow: var(--gestion-shadow);

}

body.page-gestion .gestion-entity-icon {

    width: 55px;

    height: 55px;

    display: grid;

    place-items: center;

    margin-bottom: 18px;

    border-radius: 15px;

    background: var(--gestion-light-blue);

    color: var(--gestion-blue);

    font-size: 1.3rem;

}

body.page-gestion .gestion-entity span {

    color: var(--gestion-text);

    font-size: .90rem;

    font-weight: 700;

    line-height: 1.45;

}

/* ============================================================
   SECRETARÍA ACADÉMICA
   ============================================================ */

body.page-gestion .gestion-academica {

    padding: 95px 0;

    background: var(--gestion-light);

}

body.page-gestion .gestion-academica-header {

    display: flex;

    align-items: center;

    gap: 22px;

    margin-bottom: 30px;

}

body.page-gestion .gestion-academica-icon {

    width: 70px;

    height: 70px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 19px;

    background: var(--gestion-navy);

    color: white;

    font-size: 1.7rem;

}

body.page-gestion .gestion-academica-header h2 {

    margin: 0;

    color: var(--gestion-navy);

    font-size: clamp(2rem, 4vw, 3rem);

}

body.page-gestion .gestion-academica-intro {

    max-width: 900px;

    margin-bottom: 35px;

}

body.page-gestion .gestion-academica-intro p {

    margin: 0;

    color: var(--gestion-text-light);

    font-size: 1.05rem;

    line-height: 1.85;

}

/* ============================================================
   STRATEGIES
   ============================================================ */

body.page-gestion .gestion-strategy {

    display: grid;

    grid-template-columns: 80px 1fr;

    gap: 25px;

    padding: 35px;

    margin-bottom: 20px;

    border-radius: 20px;

    background: white;

    box-shadow: 0 10px 35px rgba(9,44,76,.06);

}

body.page-gestion .gestion-strategy-number {

    width: 62px;

    height: 62px;

    display: grid;

    place-items: center;

    border-radius: 16px;

    background: var(--gestion-light-blue);

    color: var(--gestion-blue);

    font-weight: 900;

    font-size: .85rem;

}

body.page-gestion .gestion-strategy-content h3 {

    margin: 2px 0 10px;

    color: var(--gestion-navy);

    font-size: 1.35rem;

}

body.page-gestion .gestion-strategy-content p {

    margin: 0;

    color: var(--gestion-text-light);

    line-height: 1.8;

}

/* ============================================================
   REÚNIR
   ============================================================ */

body.page-gestion .gestion-resource-card {

    display: grid;

    grid-template-columns: 80px 1fr;

    gap: 25px;

    padding: 38px;

    margin-top: 20px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            var(--gestion-navy),
            var(--gestion-blue)
        );

    color: white;

}

body.page-gestion .gestion-resource-icon {

    width: 62px;

    height: 62px;

    display: grid;

    place-items: center;

    border-radius: 16px;

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

    color: var(--gestion-gold-light);

    font-size: 1.4rem;

}

body.page-gestion .gestion-resource-content h3 {

    margin: 0 0 5px;

    font-size: 1.5rem;

}

body.page-gestion .gestion-resource-content p {

    margin: 0 0 10px;

    color: rgba(255,255,255,.72);

}

body.page-gestion .gestion-resource-content ol {

    margin: 0;

    padding-left: 20px;

    color: rgba(255,255,255,.82);

    line-height: 1.9;

}

/* ============================================================
   ASESORÍA
   ============================================================ */

body.page-gestion .gestion-advice {

    margin-top: 20px;

    padding: 38px;

    border: 1px solid var(--gestion-border);

    border-radius: 22px;

    background: white;

}

body.page-gestion .gestion-advice-header {

    display: flex;

    align-items: center;

    gap: 17px;

    margin-bottom: 20px;

}

body.page-gestion .gestion-advice-icon {

    width: 58px;

    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    background: var(--gestion-green-light);

    color: var(--gestion-green);

    font-size: 1.3rem;

}

body.page-gestion .gestion-advice-header span {

    display: block;

    margin-bottom: 4px;

    color: var(--gestion-gold);

    font-size: .72rem;

    font-weight: 800;

    letter-spacing: .13em;

}

body.page-gestion .gestion-advice-header h3 {

    margin: 0;

    color: var(--gestion-navy);

    font-size: 1.45rem;

}

body.page-gestion .gestion-advice > p {

    color: var(--gestion-text-light);

    line-height: 1.8;

}

body.page-gestion .gestion-tools-grid {

    display: grid;

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

    gap: 13px;

    margin-top: 23px;

}

body.page-gestion .gestion-tool {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 15px;

    border-radius: 13px;

    background: var(--gestion-light);

    color: var(--gestion-text);

    font-size: .88rem;

    font-weight: 700;

}

body.page-gestion .gestion-tool i {

    color: var(--gestion-blue);

    font-size: 1.1rem;

}

/* ============================================================
   CONTACTOS
   ============================================================ */

body.page-gestion .gestion-contactos {

    padding: 95px 0;

    background: white;

}

body.page-gestion .gestion-contact-grid {

    display: grid;

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

    gap: 25px;

}

body.page-gestion .gestion-contact-card {

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 30px;

    border: 1px solid var(--gestion-border);

    border-radius: 22px;

    background: white;

    box-shadow: 0 10px 35px rgba(9,44,76,.06);

    transition: var(--gestion-transition);

}

body.page-gestion .gestion-contact-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--gestion-shadow);

}

body.page-gestion .gestion-contact-logo {

    width: 125px;

    min-width: 125px;

    height: 100px;

    display: grid;

    place-items: center;

    padding: 10px;

    border-radius: 15px;

    background: var(--gestion-light);

}

body.page-gestion .gestion-contact-logo img {

    max-width: 100%;

    max-height: 80px;

    object-fit: contain;

}

body.page-gestion .gestion-contact-info h3 {

    margin: 0 0 12px;

    color: var(--gestion-navy);

    font-size: 1.12rem;

}

body.page-gestion .gestion-contact-info p {

    margin: 0;

    color: var(--gestion-text-light);

    font-size: .90rem;

    line-height: 1.7;

}

/* ============================================================
   TRÁMITES
   ============================================================ */

body.page-gestion .gestion-tramites {

    margin-top: 45px;

    padding: 45px;

    border-radius: 25px;

    background: var(--gestion-light-blue);

    text-align: center;

}

body.page-gestion .gestion-tramites-header {

    margin-bottom: 30px;

}

body.page-gestion .gestion-tramites-header h3 {

    margin: 0;

    color: var(--gestion-navy);

    font-size: 1.8rem;

}

body.page-gestion .gestion-tramites-header p {

    margin: 10px auto 0;

    max-width: 600px;

    color: var(--gestion-text-light);

    line-height: 1.7;

}

body.page-gestion .gestion-tramites-link {

    display: block;

    width: min(500px, 100%);

    margin: 0 auto;

    overflow: hidden;

    border-radius: 20px;

    text-decoration: none;

    background: white;

    box-shadow: var(--gestion-shadow);

}

body.page-gestion .gestion-tramites-image {

    position: relative;

    overflow: hidden;

}

body.page-gestion .gestion-tramites-image img {

    display: block;

    width: 100%;

    height: auto;

    transition: transform .45s ease;

}

body.page-gestion .gestion-tramites-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(9,44,76,.68);

    opacity: 0;

    transition: var(--gestion-transition);

}

body.page-gestion .gestion-tramites-overlay span {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 13px 19px;

    border-radius: 12px;

    background: white;

    color: var(--gestion-navy);

    font-weight: 800;

}

body.page-gestion .gestion-tramites-link:hover
.gestion-tramites-overlay {

    opacity: 1;

}

body.page-gestion .gestion-tramites-link:hover
.gestion-tramites-image img {

    transform: scale(1.035);

}

/* ============================================================
   BACK
   ============================================================ */

body.page-gestion .gestion-back {

    padding: 0 0 70px;

    background: white;

    text-align: center;

}

body.page-gestion .gestion-back-button {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 13px 20px;

    border-radius: 12px;

    background: var(--gestion-navy);

    color: white;

    text-decoration: none;

    font-weight: 700;

    transition: var(--gestion-transition);

}

body.page-gestion .gestion-back-button:hover {

    background: var(--gestion-blue);

    color: white;

    transform: translateY(-2px);

}

/* ============================================================
   FOOTER
   ============================================================ */

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {
body.page-gestion .gestion-entities-grid {

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

    }
}

@media (max-width: 900px) {
body.page-gestion .gestion-hero .gestion-container {

        grid-template-columns: 1fr;

        gap: 35px;

    }
body.page-gestion .gestion-hero-card {

        max-width: 430px;

    }
body.page-gestion .gestion-intro-grid {

        grid-template-columns: 1fr;

    }
body.page-gestion .gestion-pillars-grid {

        grid-template-columns: 1fr;

    }
body.page-gestion .gestion-tools-grid {

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

    }
body.page-gestion .gestion-contact-grid {

        grid-template-columns: 1fr;

    }
}

@media (max-width: 760px) {
body.page-gestion .gestion-hero {

        min-height: auto;

    }
body.page-gestion .gestion-hero .gestion-container {

        padding: 60px 0;

    }
body.page-gestion .gestion-hero h1 {

        font-size: 2.65rem;

    }
body.page-gestion .gestion-section-heading h2 {

        font-size: 2rem;

    }
body.page-gestion .gestion-entities-grid {

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

    }
body.page-gestion .gestion-strategy {

        grid-template-columns: 1fr;

        gap: 18px;

        padding: 27px;

    }
body.page-gestion .gestion-resource-card {

        grid-template-columns: 1fr;

        padding: 28px;

    }
body.page-gestion .gestion-contact-card {

        flex-direction: column;

        align-items: flex-start;

    }
body.page-gestion .gestion-contact-logo {

        width: 100%;

        height: 120px;

    }
body.page-gestion .gestion-tramites {

        padding: 30px 20px;

    }
}

@media (max-width: 520px) {
body.page-gestion .gestion-container {

        width: min(100% - 28px, 1180px);

    }
body.page-gestion .gestion-hero-actions {

        flex-direction: column;

        align-items: stretch;

    }
body.page-gestion .gestion-btn {

        width: 100%;

    }
body.page-gestion .gestion-entities-grid {

        grid-template-columns: 1fr;

    }
body.page-gestion .gestion-tools-grid {

        grid-template-columns: 1fr;

    }
body.page-gestion .gestion-academica-header {

        align-items: flex-start;

    }
body.page-gestion .gestion-academica-icon {

        width: 55px;

        height: 55px;

    }
body.page-gestion .gestion-history-box {

        flex-direction: column;

    }
}

/* ================================================================
   3.4 PAGINA: PROFESORES
   Aislado bajo body.page-profesores para no chocar con el resto del sitio.
   Variables propias alineadas a la paleta global (navy/gold).
   ================================================================ */

/* -- Variables de la seccion (heredan navy/gold globales) -- */

:root {
    --prof-navy: var(--navy);
    --prof-navy-dark: var(--navy-dark);

    --prof-blue: #1261a0;
    --prof-blue-light: #2784c7;

    --prof-gold: var(--gold);
    --prof-gold-light: var(--gold-light);

    --prof-green: #287a69;
    --prof-purple: #6654a3;

    --prof-white: #ffffff;

    --prof-light: #f5f7fa;
    --prof-light-blue: #eef5fa;

    --prof-text: #182536;
    --prof-text-light: #64748b;

    --prof-border: #e2e8f0;

    --prof-shadow:
        0 20px 50px rgba(9,44,76,.10);

    --prof-shadow-hover:
        0 25px 60px rgba(9,44,76,.18);

    --prof-radius: 18px;

    --prof-transition:
        all .30s ease;
}

/* -- Estilos propios de la seccion -- */

/* ============================================================
   PROFESORES
   UASLP MULTIMODAL
============================================================ */

/* ============================================================
   CONTENEDORES
============================================================ */

body.page-profesores .profesores-hero .container,
body.page-profesores .profesores-frases .container,
body.page-profesores .profesores-intro .container,
body.page-profesores .profesores-video .container,
body.page-profesores .profesores-ambientes .container,
body.page-profesores .ruta-estrategias .container,
body.page-profesores .experiencias .container,
body.page-profesores .infografias .container,
body.page-profesores .yo-ensenyo .container,
body.page-profesores .profesores-closing .container {

    width: min(1180px, calc(100% - 60px));

    margin-left: auto;
    margin-right: auto;

}

/* ============================================================
   TOPBAR
============================================================ */

/* ============================================================
   NAVBAR
============================================================ */

/* ============================================================
   HERO
============================================================ */

body.page-profesores .profesores-hero {

    position: relative;

    overflow: hidden;

    padding: 75px 0 90px;

    color: #ffffff;

    background:
        linear-gradient(
            125deg,
            var(--prof-navy-dark),
            var(--prof-navy)
        );

}

body.page-profesores .profesores-hero::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    right: -200px;

    top: -260px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.08);

}

body.page-profesores .profesores-hero::after {

    content: "";

    position: absolute;

    width: 330px;

    height: 330px;

    left: -160px;

    bottom: -180px;

    border-radius: 50%;

    border: 1px solid rgba(214,187,126,.12);

}

body.page-profesores .profesores-hero-container {

    position: relative;

    z-index: 2;

}

body.page-profesores .profesores-breadcrumb {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 48px;

    font-size: 13px;

    color: rgba(255,255,255,.6);

}

body.page-profesores .profesores-breadcrumb a {

    color: #ffffff;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 8px;

}

body.page-profesores .profesores-breadcrumb a:hover {

    color: var(--prof-gold-light);

}

body.page-profesores .profesores-hero-grid {

    display: grid;

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

    gap: 80px;

    align-items: center;

}

body.page-profesores .profesores-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: var(--prof-gold-light);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

}

body.page-profesores .profesores-label span {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(214,187,126,.45);

    border-radius: 9px;

}

body.page-profesores .profesores-hero h1 {

    margin: 0;

    font-size: clamp(50px,6vw,86px);

    line-height: .95;

    letter-spacing: -3px;

}

body.page-profesores .profesores-hero h1 span {

    display: block;

    color: var(--prof-gold-light);

}

body.page-profesores .profesores-hero-content > p {

    max-width: 760px;

    margin: 30px 0 20px;

    font-size: 19px;

    line-height: 1.75;

    color: rgba(255,255,255,.76);

}

body.page-profesores .profesores-history {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 14px;

    border: 1px solid rgba(255,255,255,.14);

    border-radius: 8px;

    color: rgba(255,255,255,.62);

    font-size: 12px;

}

body.page-profesores .profesores-hero-card {

    padding: 35px;

    border-radius: 20px;

    border: 1px solid rgba(255,255,255,.15);

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

    backdrop-filter: blur(10px);

    text-align: center;

}

body.page-profesores .profesores-card-icon {

    width: 70px;

    height: 70px;

    margin: 0 auto 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background: rgba(214,187,126,.13);

    color: var(--prof-gold-light);

    font-size: 31px;

}

body.page-profesores .profesores-hero-card > span {

    display: block;

    color: rgba(255,255,255,.55);

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 800;

}

body.page-profesores .profesores-hero-card > strong {

    display: block;

    margin-top: 5px;

    color: #ffffff;

    font-size: 30px;

}

body.page-profesores .profesores-card-line {

    width: 55px;

    height: 1px;

    margin: 25px auto;

    background: var(--prof-gold);

}

body.page-profesores .profesores-hero-card small {

    color: rgba(255,255,255,.6);

    line-height: 1.6;

}

/* ============================================================
   FRASES
============================================================ */

body.page-profesores .profesores-frases {

    padding: 70px 0;

    background: #ffffff;

}

body.page-profesores .profesores-frases-grid {

    display: grid;

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

    gap: 18px;

}

body.page-profesores .frase-card {

    min-height: 210px;

    padding: 28px;

    border-radius: 16px;

    border: 1px solid var(--prof-border);

    background: #ffffff;

    box-shadow: var(--prof-shadow);

    transition: var(--prof-transition);

}

body.page-profesores .frase-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--prof-shadow-hover);

}

body.page-profesores .frase-card:nth-child(1) {

    border-top: 4px solid var(--prof-blue);

}

body.page-profesores .frase-card:nth-child(2) {

    border-top: 4px solid var(--prof-gold);

}

body.page-profesores .frase-card:nth-child(3) {

    border-top: 4px solid var(--prof-green);

}

body.page-profesores .frase-card:nth-child(4) {

    border-top: 4px solid var(--prof-purple);

}

body.page-profesores .frase-card span {

    display: block;

    color: var(--prof-text-light);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

    line-height: 1.5;

}

body.page-profesores .frase-card h2 {

    margin: 25px 0 0;

    color: var(--prof-navy);

    font-size: 25px;

    line-height: 1.3;

    font-weight: 300;

}

body.page-profesores .frase-card h2 strong {

    font-weight: 800;

    color: var(--prof-blue);

}

/* ============================================================
   INTRO
============================================================ */

body.page-profesores .profesores-intro {

    padding: 100px 0;

    background: var(--prof-light);

}

body.page-profesores .profesores-intro-grid {

    display: grid;

    grid-template-columns:
        34%
        minmax(0,1fr);

    gap: 80px;

}

body.page-profesores .profesores-intro-title h2 {

    margin: 0;

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

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 300;

    color: var(--prof-navy);

}

body.page-profesores .profesores-intro-title h2 span {

    display: block;

    font-weight: 800;

    color: var(--prof-blue);

}

body.page-profesores .profesores-intro-text p {

    margin: 0 0 23px;

    color: var(--prof-text-light);

    font-size: 17px;

    line-height: 1.85;

}

body.page-profesores .profesores-intro-text p:last-child {

    margin-bottom: 0;

}

/* ============================================================
   VIDEO
============================================================ */

body.page-profesores .profesores-video {

    padding: 100px 0;

    background: #ffffff;

}

body.page-profesores .section-heading {

    margin-bottom: 50px;

}

body.page-profesores .section-heading.centered {

    text-align: center;

}

body.page-profesores .section-kicker {

    margin-bottom: 14px;

    color: var(--prof-blue);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.2px;

}

body.page-profesores .section-heading h2 {

    margin: 0;

    color: var(--prof-navy);

    font-size: clamp(35px,4vw,55px);

    line-height: 1.1;

}

body.page-profesores .section-heading h2 span {

    color: var(--prof-blue);

}

body.page-profesores .section-heading p {

    max-width: 720px;

    margin: 20px auto 0;

    color: var(--prof-text-light);

    line-height: 1.8;

    font-size: 17px;

}

body.page-profesores .profesores-video-wrapper {

    width: min(1050px,100%);

    margin: auto;

    height: 0;

    padding-bottom: 56.25%;

    position: relative;

    overflow: hidden;

    border-radius: 20px;

    background: #000;

    box-shadow: var(--prof-shadow-hover);

}

body.page-profesores .profesores-video-wrapper iframe {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    border: 0;

}

body.page-profesores .profesores-video-caption {

    width: min(950px,100%);

    margin: 25px auto 0;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: var(--prof-text-light);

    font-size: 15px;

    line-height: 1.7;

}

body.page-profesores .profesores-video-caption i {

    color: var(--prof-blue);

    font-size: 18px;

}

/* ============================================================
   AMBIENTES
============================================================ */

body.page-profesores .profesores-ambientes {

    padding: 100px 0;

    background: var(--prof-light-blue);

}

body.page-profesores .ambientes-grid {

    display: grid;

    grid-template-columns:
        38%
        minmax(0,1fr);

    gap: 80px;

}

body.page-profesores .ambientes-heading h2 {

    margin: 0;

    color: var(--prof-navy);

    font-size: clamp(35px,4vw,55px);

    line-height: 1.08;

    font-weight: 300;

}

body.page-profesores .ambientes-heading h2 span {

    display: block;

    color: var(--prof-blue);

    font-weight: 800;

}

body.page-profesores .ambientes-text p {

    margin: 0 0 22px;

    color: var(--prof-text-light);

    font-size: 17px;

    line-height: 1.85;

}

body.page-profesores .ambientes-text p:last-child {

    margin-bottom: 0;

}

/* ============================================================
   RUTA
============================================================ */

body.page-profesores .ruta-estrategias {

    padding: 110px 0;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--prof-navy-dark),
            var(--prof-navy)
        );

}

body.page-profesores .ruta-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 55px;

}

body.page-profesores .ruta-header .section-kicker {

    color: var(--prof-gold-light);

}

body.page-profesores .ruta-header h2 {

    margin: 0;

    font-size: clamp(42px,5vw,68px);

    line-height: 1;

    font-weight: 300;

}

body.page-profesores .ruta-header h2 span {

    color: var(--prof-gold-light);

    font-weight: 800;

}

body.page-profesores .ruta-number {

    font-size: 100px;

    line-height: .8;

    font-weight: 800;

    color: rgba(255,255,255,.08);

}

body.page-profesores .ruta-content {

    display: grid;

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

    gap: 90px;

    align-items: center;

}

body.page-profesores .ruta-description p {

    margin: 0 0 22px;

    color: rgba(255,255,255,.7);

    font-size: 17px;

    line-height: 1.85;

}

body.page-profesores .estrategias-button {

    margin-top: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    min-width: 320px;

    padding: 15px 18px;

    border: 1px solid rgba(214,187,126,.45);

    border-radius: 11px;

    color: #ffffff;

    text-decoration: none;

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

    transition: var(--prof-transition);

}

body.page-profesores .estrategias-button span {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .7px;

}

body.page-profesores .estrategias-button span i {

    color: var(--prof-gold-light);

    font-size: 20px;

}

body.page-profesores .estrategias-button > i {

    color: var(--prof-gold-light);

    font-size: 18px;

}

body.page-profesores .estrategias-button:hover {

    background: #ffffff;

    color: var(--prof-navy);

    transform: translateY(-3px);

}

body.page-profesores .ruta-steps {

    display: flex;

    flex-direction: column;

}

body.page-profesores .ruta-step {

    display: grid;

    grid-template-columns: 55px 1fr;

    align-items: center;

    min-height: 75px;

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

}

body.page-profesores .ruta-step span {

    color: var(--prof-gold-light);

    font-size: 12px;

    font-weight: 800;

}

body.page-profesores .ruta-step strong {

    font-size: 19px;

    font-weight: 600;

}

/* ============================================================
   EXPERIENCIAS
============================================================ */

body.page-profesores .experiencias {

    padding: 110px 0;

    background: #ffffff;

}

body.page-profesores .experiencias .section-heading {

    max-width: 800px;

}

body.page-profesores .experiencias .section-heading p {

    margin-left: 0;

    margin-right: 0;

}

body.page-profesores .experiencias-grid {

    display: grid;

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

    gap: 25px;

}

body.page-profesores .experiencia-card {

    position: relative;

    overflow: hidden;

    border: 1px solid var(--prof-border);

    border-radius: 18px;

    background: #ffffff;

    box-shadow: var(--prof-shadow);

    transition: var(--prof-transition);

}

body.page-profesores .experiencia-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--prof-shadow-hover);

}

body.page-profesores .experiencia-image {

   
    display: flex;
    justify-content: center;
    align-items: center;
     padding: 20px;

}

body.page-profesores .experiencia-image img {

    width: 130px;
    height: 130px;

    object-fit: cover;

    border-radius: 50%;

    display: block;

}

body.page-profesores .experiencia-number {

    position: absolute;

    left: 18px;

    top: 18px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: rgba(9,44,76,.9);

    color: var(--prof-gold-light);

    font-size: 12px;

    font-weight: 800;

}

body.page-profesores .experiencia-content {

    padding: 25px;

}

body.page-profesores .experiencia-content > a {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;

    color: var(--prof-navy);

    text-decoration: none;

    font-size: 18px;

    line-height: 1.35;

    font-weight: 800;

}

body.page-profesores .experiencia-content > a:hover {

    color: var(--prof-blue);

}

body.page-profesores .experiencia-content > a i {

    flex-shrink: 0;

    color: var(--prof-blue);

}

body.page-profesores .experiencia-facultad {

    display: block;

    margin-top: 9px;

    color: var(--prof-text-light);

    font-size: 12px;

    line-height: 1.5;

}

body.page-profesores .experiencia-content h3 {

    margin: 20px 0;

    color: var(--prof-text);

    font-size: 19px;

    line-height: 1.4;

}

body.page-profesores .experiencia-aportacion {

    padding-top: 17px;

    border-top: 1px solid var(--prof-border);

}

body.page-profesores .experiencia-aportacion > span {

    display: block;

    margin-bottom: 10px;

    color: var(--prof-blue);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}

body.page-profesores .experiencia-aportacion div {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}

body.page-profesores .experiencia-aportacion small {

    padding: 6px 9px;

    border-radius: 6px;

    background: var(--prof-light);

    color: var(--prof-text-light);

}

/* ============================================================
   INFOGRAFÍAS
============================================================ */

body.page-profesores .infografias {

    padding: 110px 0;

    background: var(--prof-light);

}

body.page-profesores .infografias-grid {

    display: grid;

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

    gap: 22px;

}

body.page-profesores .infografia-card {

    overflow: hidden;

    display: block;

    border-radius: 16px;

    background: #ffffff;

    border: 1px solid var(--prof-border);

    color: var(--prof-text);

    text-decoration: none;

    box-shadow: var(--prof-shadow);

    transition: var(--prof-transition);

}

body.page-profesores .infografia-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--prof-shadow-hover);

}

body.page-profesores .infografia-image {

    position: relative;

    height: 200px;
    width: 200px;

    overflow: hidden;

    background: #ffffff;

}

body.page-profesores .infografia-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: var(--prof-transition);

}

body.page-profesores .infografia-card:hover img {

    transform: scale(1.04);

}

body.page-profesores .infografia-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(9,44,76,.65);

    opacity: 0;

    transition: var(--prof-transition);

}

body.page-profesores .infografia-overlay i {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: var(--prof-blue);

    font-size: 20px;

}

body.page-profesores .infografia-card:hover .infografia-overlay {

    opacity: 1;

}

body.page-profesores .infografia-content {

    min-height: 115px;

    padding: 22px;

}

body.page-profesores .infografia-content span {

    display: block;

    color: var(--prof-blue);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;

}

body.page-profesores .infografia-content strong {

    display: block;

    margin-top: 7px;

    color: var(--prof-navy);

    font-size: 17px;

    line-height: 1.45;

}

/* ============================================================
   YO ENSEÑO YO APRENDO
============================================================ */

body.page-profesores .yo-ensenyo {

    padding: 100px 0;

    background: #ffffff;

}

body.page-profesores .yo-ensenyo-card {

    display: grid;

    grid-template-columns:
        43%
        minmax(0,1fr);

    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            var(--prof-navy-dark),
            var(--prof-navy)
        );

    box-shadow: var(--prof-shadow-hover);

}

body.page-profesores .yo-ensenyo-image {

    min-height: 450px;

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

}

body.page-profesores .yo-ensenyo-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: fill;

}

body.page-profesores .yo-ensenyo-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 65px;

}

body.page-profesores .yo-ensenyo-content .section-kicker {

    color: var(--prof-gold-light);

}

body.page-profesores .yo-ensenyo-content h2 {

    margin: 0;

    color: #ffffff;

    font-size: clamp(40px,4vw,60px);

    line-height: 1.05;

    font-weight: 300;

}

body.page-profesores .yo-ensenyo-content h2 span {

    display: block;

    color: var(--prof-gold-light);

    font-weight: 800;

}

body.page-profesores .yo-ensenyo-content p {

    max-width: 600px;

    margin: 25px 0 30px;

    color: rgba(255,255,255,.7);

    font-size: 17px;

    line-height: 1.8;

}

body.page-profesores .yo-ensenyo-content p strong {

    color: #ffffff;

}

body.page-profesores .pdf-button {

    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    gap: 12px;

    padding: 14px 19px;

    border-radius: 10px;

    background: #ffffff;

    color: var(--prof-navy);

    text-decoration: none;

    font-weight: 800;

    transition: var(--prof-transition);

}

body.page-profesores .pdf-button i:first-child {

    color: #b42318;

    font-size: 22px;

}

body.page-profesores .pdf-button i:last-child {

    color: var(--prof-blue);

}

body.page-profesores .pdf-button:hover {

    transform: translateY(-3px);

    background: var(--prof-gold-light);

}

/* ============================================================
   CIERRE
============================================================ */

body.page-profesores .profesores-closing {

    padding: 110px 0;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--prof-navy),
            var(--prof-navy-dark)
        );

}

body.page-profesores .profesores-closing-content {

    width: min(850px,100%);

}

body.page-profesores .profesores-closing .section-kicker {

    color: var(--prof-gold-light);

}

body.page-profesores .profesores-closing h2 {

    margin: 0;

    font-size: clamp(38px,5vw,65px);

    line-height: 1.05;

    font-weight: 300;

    letter-spacing: -2px;

}

body.page-profesores .profesores-closing h2 span {

    display: block;

    color: var(--prof-gold-light);

    font-weight: 800;

}

body.page-profesores .profesores-closing p {

    max-width: 750px;

    margin: 25px 0 35px;

    color: rgba(255,255,255,.7);

    font-size: 17px;

    line-height: 1.8;

}

body.page-profesores .closing-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 13px 20px;

    border: 1px solid rgba(255,255,255,.2);

    border-radius: 10px;

    color: #ffffff;

    text-decoration: none;

    font-weight: 700;

    transition: var(--prof-transition);

}

body.page-profesores .closing-button:hover {

    background: #ffffff;

    color: var(--prof-navy);

}

/* =========================================================
   PLATFORM
========================================================= */

.platform-layout {

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap: 18px;

    align-items: stretch;
}

@media (max-width: 600px) {
    .platform-layout {
        grid-template-columns: repeat(1, 1fr);
    }
}

.platform-intro {

    grid-row: span 1;

    padding: 35px;
    background: #eaecef;
    /*background: var(--light);*/
    border-radius: 18px;
    /*border-radius: var(--radius);*/

    display: flex;

    gap: 25px;
}

.number-box {

    flex-shrink: 0;

    width: 72px;
    height: 72px;

    border-radius: 15px;

    background: var(--navy);

    color: var(--gold-light);

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    font-weight: 800;

    font-size: 14px;

    line-height: 1.1;
}

.platform-intro h3 {

    font-size: 22px;

    margin-bottom: 15px;
}

.platform-intro p {

    color: var(--text-light);

    font-size: 13px;

    line-height: 1.75;

    margin-bottom: 10px;
}

.platform-highlight {

    padding: 28px;
    /*
    border:
        1px solid var(--border);*/
    border:
        1px solid #e2e8f0;
    border-radius: 18px;
    /*border-radius: var(--radius);*/

    transition: var(--transition);
}

.platform-highlight:hover {

    transform: translateY(-6px);
    box-shadow:
        0 20px 50px rgba(9,44,76,.10);  

    /*box-shadow: var(--shadow);*/
}

.highlight-number {

    color: var(--gold);

    font-size: 11px;

    font-weight: 800;
}

.platform-highlight h3 {

    font-size: 22px;

    margin: 35px 0 10px;
}

.platform-highlight p {

    color: var(--text-light);

    font-size: 12px;

    line-height: 1.7;
}

/************/
/* DOWNLOAD */

.download-banner {

    margin-top: 22px;

    padding: 25px 30px;

    border-radius: 18px;
    /*border-radius: var(--radius);*/

    background:
        linear-gradient(
            100deg,
            /*
            var(--navy),
            var(--blue)
            */
            #092c4c, #1261a0

        );

    color: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}

.download-banner span {

    font-size: 9px;

    letter-spacing: 2px;

    color: var(--gold-light);
}

.download-banner h3 {

    font-size: 18px;

    margin-top: 4px;
}

.download-button {

    background: white;

    color: var(--navy);

    padding: 13px 20px;

    border-radius: 9px;

    font-size: 11px;

    font-weight: 800;

    display: flex;

    gap: 15px;

    align-items: center;

    white-space: nowrap;

    transition: var(--transition);
}

.download-button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.15);
}

/* =========================================================
   ACTORS
========================================================= */

.actors-section {

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f8fb 100%
        );
}

.actors-grid {

    display: grid;

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

    gap: 18px;
}

@media (max-width: 600px) {
    .actors-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}


.actor-card {

    position: relative;

    min-height: 365px;

    padding: 28px;

    border-radius: 20px;

    overflow: hidden;

    color: white;

    display: flex;

    flex-direction: column;

    transition: var(--transition);

    box-shadow:
        0 15px 40px rgba(9,44,76,.08);
}

.actor-card::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    right: -70px;
    top: -70px;

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

.actor-card:hover {

    transform: translateY(-10px);

    box-shadow:
        var(--shadow-hover);
}

.actor-blue {
    background:
        linear-gradient(145deg, #0c4f80, #1979b6);
}

.actor-gold {
    background:
        linear-gradient(145deg, #8e6a2e, #b9944e);
}

.actor-green {
    background:
        linear-gradient(145deg, #236556, #358e79);
}

.actor-purple {
    background:
        linear-gradient(145deg, #504182, #7160ad);
}

.actor-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: relative;

    z-index: 2;
}

.actor-number {

    font-size: 10px;

    letter-spacing: 2px;

    opacity: .65;
}

.actor-arrow {

    width: 38px;
    height: 38px;

    border-radius: 50%;

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

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    transition: var(--transition);
}

.actor-card:hover .actor-arrow {

    background: white;

    color: var(--navy);

    transform: rotate(45deg);
}

.actor-icon {

    position: relative;

    z-index: 2;

    font-size: 40px;

    margin-top: 15px;

    margin-bottom: 20px;
}

.actor-card h3 {

    position: relative;

    z-index: 2;

    font-size: 22px;

    line-height: 1.15;

    margin-bottom: 12px;
}

.actor-card p {

    position: relative;

    z-index: 2;

    font-size: 12px;

    line-height: 1.7;

    color: rgba(255,255,255,.75);
}

.actor-link {

    position: relative;

    z-index: 2;

    margin-top: auto;

    padding-top: 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.actor-link span {
    font-size: 20px;
}

/* =========================================================
   STATS
========================================================= */

.stats-section {

    background:#b9944e;
        /*var(--gold);*/

    color: white;

    padding: 50px 0;
}

@media (max-width: 600px) {
    .stats-section {
        display: none;
    }
}

.stats-grid {

    display: grid;

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

    gap: 20px;
}

.stat-item {

    text-align: center;

    padding: 10px;

    border-right:
        1px solid rgba(255,255,255,.25);
}

.stat-item:last-child {
    border-right: 0;
}

.stat-item strong {

    display: block;

    font-size: 30px;

    line-height: 1;

    margin-bottom: 8px;
}

.stat-item span {

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: rgba(255,255,255,.72);
}

.profesores-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--prof-gold-light);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.profesores-label span {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(214, 187, 126, .45);
    border-radius: 9px;
}

.gestion-history {
    padding: 35px 0 0;
    background: var(--gestion-light);
}

.gestion-history-box {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    padding: 20px 23px;
    border: 1px solid #dce6ef;
    border-radius: 15px;
    background: white;
}

.gestion-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.gestion-history-icon {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--gestion-light-blue);
    color: var(--gestion-blue);
}
/* ============================================================
   FOOTER
============================================================ */

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1100px) {
body.page-profesores .profesores-hero-grid {

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

        gap: 45px;

    }
body.page-profesores .profesores-frases-grid {

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

    }
body.page-profesores .experiencias-grid {

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

    }
body.page-profesores .infografias-grid {

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

    }
body.page-profesores .ruta-content {

        gap: 50px;

    }
}

@media (max-width: 850px) {
body.page-profesores .profesores-hero-grid {

        grid-template-columns: 1fr;

    }
body.page-profesores .profesores-hero-card {

        width: 300px;

    }
body.page-profesores .profesores-intro-grid,
body.page-profesores .ambientes-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }
body.page-profesores .ruta-content {

        grid-template-columns: 1fr;

    }
body.page-profesores .yo-ensenyo-card {

        grid-template-columns: 1fr;

    }
body.page-profesores .yo-ensenyo-image {

        min-height: 350px;

    }
}

@media (max-width: 600px) {
body.page-profesores .profesores-hero .container,
body.page-profesores .profesores-frases .container,
body.page-profesores .profesores-intro .container,
body.page-profesores .profesores-video .container,
body.page-profesores .profesores-ambientes .container,
body.page-profesores .ruta-estrategias .container,
body.page-profesores .experiencias .container,
body.page-profesores .infografias .container,
body.page-profesores .yo-ensenyo .container,
body.page-profesores .profesores-closing .container {

        width: min(100% - 32px,1180px);

    }
body.page-profesores .profesores-hero {

        padding: 55px 0 65px;

    }
body.page-profesores .profesores-hero h1 {

        font-size: 48px;

        letter-spacing: -2px;

    }
body.page-profesores .profesores-hero-content > p {

        font-size: 16px;

    }
body.page-profesores .profesores-frases,
body.page-profesores .profesores-intro,
body.page-profesores .profesores-video,
body.page-profesores .profesores-ambientes,
body.page-profesores .ruta-estrategias,
body.page-profesores .experiencias,
body.page-profesores .infografias,
body.page-profesores .yo-ensenyo,
body.page-profesores .profesores-closing {

        padding: 70px 0;

    }
body.page-profesores .profesores-frases-grid {

        grid-template-columns: 1fr;

    }
body.page-profesores .experiencias-grid {

        grid-template-columns: 1fr;

    }
body.page-profesores .infografias-grid {

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

    }
body.page-profesores .ruta-header {

        align-items: flex-start;

    }
body.page-profesores .ruta-number {

        font-size: 65px;

    }
body.page-profesores .estrategias-button {

        width: 100%;

        min-width: 0;

    }
body.page-profesores .infografia-image {

        height: 125px;
        width: 125px;

    }
body.page-profesores .infografia-content {

        padding: 17px;

    }
body.page-profesores .infografia-content span {

        font-size: 11px;

    }
body.page-profesores .infografia-content strong {

        font-size: 14px;

    }
body.page-profesores .yo-ensenyo-image {

        min-height: 280px;

    }
body.page-profesores .yo-ensenyo-content {

        padding: 38px 28px;

    }
body.page-profesores .yo-ensenyo-content h2 {

        font-size: 40px;

    }
}