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

/* ==========================================================================
   GENERICO
   ========================================================================== */

/* PALETA DE COLOR */
:root {
    /* PRIMARY TURQUOISE */
    --turquoise-100: #369ac0;
    --turquoise-90: #2f5c6d;
    --turquoise-80: #466e7d;
    --turquoise-70: #5d808e;
    --turquoise-60: #74929e;
    --turquoise-50: #8ca5ae;
    --turquoise-40: #a3b7be;
    --turquoise-30: #bac9ce;
    --turquoise-20: #d1dbdf;
    --turquoise-10: #e8edef;

    /* PRIMARY BLACK */
    --black-100: #000000;
    --black-90: #1a1a1a;
    --black-80: #333333;
    --black-70: #4d4d4d;
    --black-60: #666666;
    --black-50: #808080;
    --black-40: #999999;
    --black-30: #b3b3b3;
    --black-20: #cccccc;
    --black-10: #e6e6e6;

    /* SECONDARY BLUE */
    --blue-100: #17295c;
    --blue-90: #2e3e6c;
    --blue-80: #45547d;
    --blue-70: #5d698d;
    --blue-60: #747f9d;
    --blue-50: #8b94ae;
    --blue-40: #a2a9be;
    --blue-30: #b9bfce;
    --blue-20: #d1d4de;
    --blue-10: #e8eaef;
    --blue-0: white;

    /* SECONDARY BEIGE */
    --beige-100: #a58d66;
    --beige-90: #ae9875;
    --beige-80: #b7a485;
    --beige-70: #c0af94;
    --beige-60: #c9bba3;
    --beige-50: #d2c6b3;
    --beige-40: #dbd1c2;
    --beige-30: #e4ddd1;
    --beige-20: #ede8e0;
    --beige-10: #f6f4f0;
    --beige-0: white;
}

/* TIPOGRAFIA */
/* ORBITRON */
@font-face {
    font-family: "Orbitron-Regular";
    src: url("../fonts/orbitron/woff/Orbitron-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Orbitron-Bold";
    src: url("../fonts/orbitron/woff/Orbitron-Bold.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* DM SANS */
@font-face {
    font-family: "DMSans-Regular";
    src: url("../fonts/dm-sans/woff/DMSans-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DMSans-Light";
    src: url("../fonts/dm-sans/woff/DMSans-Light.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DMSans-Bold";
    src: url("../fonts/dm-sans/woff/DMSans-Bold.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DMSans-Italic";
    src: url("../fonts/dm-sans/woff/DMSans-Italic.woff2") format("woff2");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "DMSans-LightItalic";
    src: url("../fonts/dm-sans/woff/DMSans-LightItalic.woff2") format("woff2");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "DMSans-BoldItalic";
    src: url("../fonts/dm-sans/woff/DMSans-BoldItalic.woff2") format("woff2");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* TITULOS (siempre DM Sans Bold) */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "DMSans-Bold", sans-serif;
}

h2 {
    /*font-family: "Orbitron-Regular", sans-serif;*/
    color: var(--turquoise-100);
}

p,
a {
    font-family: "DMSans-Regular", sans-serif;
}

p.font-bold,
a.font-bold {
    font-family: "DMSans-Bold", sans-serif;
}

p {
    font-size: 1rem;
}

/* ICONOGRAFIA (Material Symbols) */
.material-symbols-outlined {
    font-variation-settings:
        "FILL" 0,
        "wght" 300,
        "GRAD" 0,
        "opsz" 24;
    font-size: 1.5rem;
    line-height: 1;
    vertical-align: middle;
}

/* CONTENEDOR (padding + max-width genérico reutilizable en cabeceras/secciones) */
/* Nota: se llama ".wrapper" (no ".container") para no chocar con la utilidad
   "container" que ya trae Tailwind por defecto y que pisaba este max-width. */
.wrapper {
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

#btnIebStar {
    background-color: var(--blue-100);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    border-radius: 0.5rem;
    font-family: "DMSans-Bold", sans-serif;
    font-size: 0.9rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
    cursor: pointer;
}

.btn p {
    font-family: inherit;
}

.btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* TAMAÑOS */
.btn--md {
    padding: 0.65rem 1.5rem;
}

.btn--lg {
    padding: 1rem 1.5rem;
}

/* SOLIDO: Ver programas, Conoce ENDOR */
.btn--primary {
    background-color: var(--blue-100);
    color: white;
    border: 1px solid var(--blue-100);
}

.btn--primary:hover {
    background-color: var(--turquoise-100);
    border-color: var(--turquoise-100);
}
.btn--secondary {
    background-color: var(--turquoise-100);
    color: white;
    border: 1px solid var(--blue-100);
}

.btn--secondary:hover {
    background-color: var(--turquoise-50);
    border-color: var(--turquoise-50);
}

/* OUTLINE: Conocer la universidad */
.btn--outline {
    background-color: transparent;
    color: var(--blue-100);
    border: 1px solid var(--blue-100);
}

.btn--outline:hover {
    background-color: var(--blue-100);
    color: white;
}

/* BLANCO: Conocer la universidad */
.btn--white {
    background-color: white;
    color: var(--blue-100);
    border: 1px solid white;
}

.btn--white:hover {
    background-color: var(--beige-10);
    border-color: var(--beige-10);
}

/* OUTLINE CLARO: sobre fondo oscuro (tarjeta Digitalent Group) */
.btn--outline-light {
    background-color: transparent;
    color: white;
    border: 1px solid white;
}

.btn--outline-light:hover {
    background-color: white;
    color: var(--blue-100);
}

/* LINK CON FLECHA: Ver todos los programas, Ver facultad */
.btn--link {
    padding: 0;
    border: none;
    background-color: transparent;
    color: var(--blue-100);
    gap: 0.35rem;
}

.btn--link:hover {
    color: var(--turquoise-100);
}

/* LINK CON FLECHA sobre fondo oscuro/foto */
.btn--link-light {
    color: white;
}

.btn--link-light:hover {
    color: var(--beige-10);
}

/* ==========================================================================
   TAGS
   ========================================================================== */
.tag {
    border-radius: 4px;
    font-family: "DMSans-Bold", sans-serif;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
}

/* SOLIDO: Evento presencial, Evento online */
.tag--primary {
    color: var(--turquoise-100);
    text-transform: uppercase;
}

/* OUTLINE */
.tag--outline {
    background-color: transparent;
    color: var(--blue-100);
    border: 1px solid var(--blue-100);
}

/* CLARO: para usar sobre fondos oscuros/foto */
.tag--light {
    background-color: var(--turquoise-10);
    color: var(--blue-100);
    padding: 2px 4px;
}

/* ==========================================================================
   BREADCRUMB (migas de pan, páginas estáticas)
   ========================================================================== */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--black-60);
}

.breadcrumb__link {
    color: var(--black-60);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb__link:hover {
    color: var(--turquoise-100);
}

.breadcrumb__separator {
    font-size: 1rem !important;
    color: var(--black-40);
}

.breadcrumb__current {
    color: var(--blue-100);
    font-family: "DMSans-Bold", sans-serif;
}

/* Variante clara: breadcrumb sobre foto/fondo oscuro (heros tipo hero-home) */
.hero-home .breadcrumb,
.hero-home .breadcrumb__link {
    color: rgba(255, 255, 255, 0.75);
}

.hero-home .breadcrumb__link:hover {
    color: white;
}

.hero-home .breadcrumb__separator {
    color: rgba(255, 255, 255, 0.5);
}

.hero-home .breadcrumb__current {
    color: white;
}

/* ==========================================================================
   CABECERA DE SECCIÓN (título centrado + enlace a la derecha)
   Componente reutilizable, no ligado a ninguna página en concreto.
   ========================================================================== */
.section-head {
    position: relative;
    text-align: center;
    margin-bottom: 2.5rem;
}

.section-head__rule {
    width: 3rem;
    height: 3px;
    border-radius: 2px;
    background-color: var(--turquoise-100);
    margin: 0.75rem auto 0;
}

.section-head__link {
    margin-top: 1rem;
}

/* ==========================================================================
   NEWSLETTER BAND
   Banda de suscripción/CTA reutilizable, no ligada a ninguna página en
   concreto (fondo azul con patrón de puntos + icono + texto + botón).
   ========================================================================== */
.newsletter-band {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 0.5rem;
    background-color: var(--blue-100);
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 18px 18px;
    color: white;
}

.newsletter-band__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.newsletter-band__icon .material-symbols-outlined {
    font-size: 1.75rem !important;
}

.newsletter-band__text {
    flex: 1;
}

/* El h2 global es turquesa; sobre fondo azul necesita ser blanco */
.newsletter-band__title {
    color: white;
    font-size: 1.15rem;
}

.newsletter-band__subtitle {
    margin-top: 0.5rem;
    max-width: 26rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-band__cta {
    width: 100%;
    justify-content: space-between;
    gap: 1.5rem;
}

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

/* HEADER */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    font-family: "DMSans-Regular", sans-serif;
    box-shadow: 20px 4px 40px 0 rgba(0, 0, 0, 0.1);
    background-color: var(--blue-100);
}

.header__lang {
    font-size: 14px;
}
.header__lang-chevron {
    font-size: 1rem;
}

.header__toggle:hover,
.header__search-toggle:hover,
.header__lang-toggle:hover {
    color: var(--beige-70);
}

.header__menu-link {
    position: relative;
    font-family: "DMSans-Bold", sans-serif;
    width: 100%;
    font-weight: bold;
    font-size: 14px;
    border-bottom: 4px solid transparent;
    transition:
        color 0.2s ease,
        border-color 0.2s ease;
    color: white;
}

.header__menu-link:hover,
.header__menu-link[aria-expanded="true"] {
    border-bottom-color: var(--turquoise-100);
}

.header__menu-link[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--turquoise-70);
}

.header__dropdown-group-title {
    font-family: "DMSans-Bold", sans-serif;
    color: var(--blue-100);
}

.header__dropdown-group:not(:last-child) {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--turquoise-10);
}

.header__dropdown-link {
    color: var(--blue-100);
}

.header__dropdown {
    scrollbar-width: thin;
    scrollbar-color: var(--turquoise-40) transparent;
}

.header__dropdown::-webkit-scrollbar {
    width: 6px;
}

.header__dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.header__dropdown::-webkit-scrollbar-thumb {
    background-color: var(--turquoise-40);
    border-radius: 999px;
}

.header__dropdown::-webkit-scrollbar-thumb:hover {
    background-color: var(--turquoise-60);
}

.header__dropdown-link-title {
    font-family: "DMSans-Bold", sans-serif;
}

.header__dropdown-group-title--label {
    color: var(--turquoise-100);
    letter-spacing: 0.05em;
    font-size: 1rem !important;
}

.header__dropdown-reasons,
.header__dropdown-promo-list li {
    color: var(--blue-100);
}

.header__dropdown-promo-title {
    font-family: "DMSans-Bold", sans-serif;
    color: var(--blue-100);
}

.header__dropdown-sublist li:not(:last-child) a {
    border-bottom: 1px solid var(--turquoise-10);
}

.header__dropdown-viewall {
    color: var(--blue-100);
    transition: color 0.2s ease;
}

.header__dropdown-viewall:hover {
    color: var(--turquoise-80);
}

.header__dropdown-viewall--box {
    transition: background-color 0.2s ease;
}

.header__dropdown-viewall--box:hover {
    background-color: var(--turquoise-20);
    color: var(--turquoise-100);
}

.header__dropdown-category {
    color: var(--blue-100);
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.header__dropdown-category:hover,
.header__dropdown-category.is-active {
    background-color: var(--turquoise-10);
    color: var(--turquoise-100);
}

.header__dropdown-feature {
    color: var(--blue-100);
}

/* TIPOGRAFÍA DE LOS MENÚS DESPLEGABLES (mega-menús del header) */
.header__dropdown-link,
.header__dropdown-viewall,
.header__dropdown-group-title:not(.header__dropdown-group-title--label),
.header__dropdown-promo-title,
.header__dropdown-promo-list li,
.header__dropdown-promo-cta {
    font-size: 1rem;
}

.header__dropdown-link-subtitle,
.header__dropdown-promo-text,
.header__dropdown-feature span:last-child {
    font-size: 0.9rem;
}

/* HERO HOME */
.hero-home {
    color: white;
    background-image: url("../images/home/bg-hero-andorra.webp");
}

.hero-home__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, var(--turquoise-100) 0%, transparent 40%),
        radial-gradient(circle at bottom left, var(--turquoise-10) 30%, transparent 70%);
    pointer-events: none;
}

.hero-home__title,
.hero-home__subtitle {
    color: var(--blue-100);
}

.hero-home__subtitle {
    font-size: 1.2rem;
}

.hero-home__feature-icon {
    font-size: 50px;
}

.hero-home__feature-text {
    font-family: "DMSans-Bold", sans-serif;
}

/* OFERTA ACADEMICA */
.oferta-academica__card {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.oferta-academica__card:hover {
    transform: translateY(-4px);
}

.oferta-academica__card--photo {
    background-position: right;
}

.oferta-academica__card--photo .oferta-academica__card-overlay {
    background: linear-gradient(to top, var(--turquoise-10) 30%, transparent 70%);
    pointer-events: none;
}

.oferta-academica__card--photo .oferta-academica__card-icon,
.oferta-academica__card--photo .oferta-academica__card-title,
.oferta-academica__card--photo .oferta-academica__card-text,
.oferta-academica__card--photo .oferta-academica__card-link {
    color: var(--blue-100);
}

.oferta-academica__card--photo .oferta-academica__card-icon {
    font-size: 2rem;
}

.oferta-academica__card--grados {
    background-image: url("../images/home/card-of-academica-01.webp");
}

.oferta-academica__card--posgrados {
    background-image: url("../images/home/card-of-academica-02.webp");
}

.oferta-academica__card--formacion-continua {
    background-image: url("../images/home/card-of-academica-03.webp");
}

.oferta-academica__card--solid {
    background-color: var(--blue-100);
    color: white;
}

.oferta-academica__card--solid .oferta-academica__card-icon {
    font-size: 1.75rem;
}

.oferta-academica__card--solid .oferta-academica__card-arrow {
    align-self: flex-end;
    margin-top: 0.5rem;
}

.oferta-academica__card-group {
    min-height: 300px;
}

/* EXPERIENCIA ENDOR — hub de subvistas (reutiliza el componente oferta-academica) */
.experiencia-endor-hero {
    background-image: url("../images/university/montain-img.webp");
}

.experiencia-endor-hero__overlay {
    background: linear-gradient(
        to right,
        rgba(8, 15, 38, 0.85) 0%,
        rgba(8, 15, 38, 0.55) 35%,
        rgba(8, 15, 38, 0.15) 70%,
        transparent 100%
    );
}

.oferta-academica__card--biblioteca-digital {
    background-image: url("../images/experiencia-endor/experiencia-endor_biblioteca-digital--hero.webp");
}

.oferta-academica__card--recursos-linguisticos {
    background-image: url("../images/experiencia-endor/experiencia-endor_recursos-linguistico--hero.webp");
}

.oferta-academica__card--empleo-desarrollo-profesional {
    background-image: url("../images/experiencia-endor/experiencia-endor_empleoydesarrollo--hero.webp");
}

.oferta-academica__card--acompanamiento-estudiante {
    background-image: url("../images/experiencia-endor/experiencia-endor_acompanamiento--hero.webp");
}

.oferta-academica__card--comunidad {
    background-image: url("../images/experiencia-endor/experiencia-endor_comunidad--hero.webp");
}

/* ============================================
   FEATURES ROW
   Base: icono arriba del título
   body.masters: icono a la izquierda
   ============================================ */

.features-row {
    display: flex;
    gap: 32px;
    margin-top: 32px;
}

.features-row .feature-item {
    flex: 1 1 0;
    min-width: 0;
}

.features-row .feature-item .feature-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
}

.features-row .feature-item .feature-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: var(--turquoise-100);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.features-row .feature-title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.features-row .feature-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #4a4a4a;
}

/* ---- Variante masters: icono a la izquierda ---- */

body.masters .features-row .feature-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: start;
}

body.masters .features-row .feature-item .feature-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
}

body.masters .features-row .feature-title {
    grid-column: 2;
    grid-row: 1;
}

body.masters .features-row .feature-text {
    grid-column: 2;
    grid-row: 2;
}

/* ---- Responsive ---- */

/* masters rompe antes: el icono al lado consume ancho */
/* ============================================
   RICH-LIST — lista dinámica del WYSIWYG
   con el mismo aspecto que la lista maquetada
   ============================================ */

.rich-list ul {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    color: var(--black-70);
}

.rich-list ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 1.25rem;
}

.rich-list ul > li:last-child {
    margin-bottom: 0;
}

.rich-list ul > li::before {
    content: "check_circle";
    flex: 0 0 auto;
    font-family: "Material Symbols Outlined";
    font-variation-settings:
        "FILL" 0,
        "wght" 300,
        "GRAD" 0,
        "opsz" 24;
    font-size: 1.25rem; /* era 1.2em */
    line-height: 1; /* era 1.5 */
    vertical-align: middle;
    font-weight: normal;
    font-style: normal;
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    direction: ltr;
    color: var(--turquoise-100);
    margin-top: 4px; /* con line-height:1, alinea con la 1ª línea del texto */
}

/* El WYSIWYG mete un <p> dentro de cada <li>: le quitamos los márgenes */
.rich-list ul > li > p {
    margin: 0;
    min-width: 0;
    line-height: 1.5;
}

/* Y los <p></p> vacíos que deja antes y después de la lista */
.rich-list > p:empty {
    display: none;
}

.rich-list b,
.rich-list strong {
    font-weight: 700;
    color: var(--black-100);
}

/* FACULTADES */
.facultad-card {
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--turquoise-10);
    transition: transform 0.2s ease;
}

.facultad-card:hover {
    transform: translateY(-4px);
}

.facultad-card__icon {
    position: absolute;
    left: 1.25rem;
    bottom: -1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background-color: var(--blue-100);
    color: white;
}

.facultad-card__content {
    padding-top: 2rem;
}

.facultad-card__title {
    color: var(--blue-100);
}

.facultad-card__list {
    color: var(--black-70);
    list-style: disc;
    padding-left: 1.1rem;
}

.facultad-card__image--economicas {
    background-image: url("../images/home/card-facultad-01.webp");
}

.facultad-card__image--ingenieria {
    background-image: url("../images/home/card-facultad-02.webp");
}

.facultad-card__image--salud {
    background-image: url("../images/home/card-facultad-03.webp");
}

/* EVENTOS HUB */
.event-card {
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--turquoise-10);
    transition: transform 0.2s ease;
}

.event-card:hover {
    transform: translateY(-4px);
}

.event-card__date {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    background-color: var(--blue-100);
    color: white;
    line-height: 1;
}

.event-card__date-day {
    font-family: "DMSans-Bold", sans-serif;
    font-size: 1.1rem;
}

.event-card__date-month {
    font-family: "DMSans-Regular", sans-serif;
    font-size: 0.65rem;
    text-transform: uppercase;
}

.event-card__title {
    color: var(--blue-100);
}

.event-card__subtitle {
    color: var(--black-70);
}

/* El botón de descarga va siempre al final de la tarjeta */
.event-card__download {
    margin-top: auto;
}

.event-card__download .material-symbols-outlined {
    font-size: 1rem;
}

/* Logo del evento abajo a la derecha, en línea con la fecha (abajo a la
   izquierda): no tapa a las personas de la foto */
.event-card__logo {
    right: 0.75rem;
    bottom: 1.5rem; /* centrado con la fecha: bottom 1rem + (3rem - 2rem) / 2 */
    height: 2rem;
    max-width: calc(100% - 5.5rem);
    object-fit: contain;
    padding: 0.2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Tarjeta horizontal: la fecha (3.25rem) va pegada a la esquina */
.event-card--row .event-card__logo {
    right: 0.5rem;
    bottom: 0.625rem;
    max-width: calc(100% - 4.25rem);
}

.event-card__image--01 {
    background-image: url("../images/home/event-01.webp?v=20260730");
}

.event-card__image--02 {
    background-image: url("../images/home/event-02.webp?v=20260730");
}

.event-card__image--03 {
    background-image: url("../images/home/event-03.webp?v=20260730");
}

.programa-card {
    border: 1px solid var(--turquoise-10);
    transition: transform 0.2s ease;
}

.programa-card:hover {
    transform: translateY(-4px);
}

/* FOOTER */
.footer__col-title {
    font-family: "Orbitron-Regular", sans-serif;
    color: var(--beige-10);
}

.footer__link {
    color: white;
    transition: color 0.2s ease;
    font-family: "DMSans-Regular", sans-serif;
    cursor: pointer;
}

.footer__link:hover {
    color: var(--turquoise-30);
}

.footer__logo {
    height: auto;
}

/* FORMS */
#modalBackdrop {
    background-color: rgb(112 109 116 / 70%);
}
#modalForm {
    background-color: #17295c;
}

/* Modal de confirmación (envío correcto del formulario) */
#modalSuccessBackdrop {
    background-color: rgb(112 109 116 / 70%);
}

#modalSuccess {
    background-color: #17295c;
}

.modal-success__icon {
    font-size: 3rem !important;
    color: var(--turquoise-100);
}

.modal-success__title {
    color: white;
    font-size: 1.5rem;
}

.modal-success__text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   PÁGINAS ESTÁTICAS — LA UNIVERSIDAD
   Añadir al final de /assets/css/style26.css

   Las 8 páginas comparten estructura; cada una usa su propio prefijo de clase
   para poder personalizarla después sin afectar a las demás.
   ========================================================================== */

/* --------------------------------------------------------------------------
   IMÁGENES
   Los archivos van en /assets/images/<pagina>/01.webp ... 06.webp
   -------------------------------------------------------------------------- */
[class*="-img--"] {
    background-color: var(--turquoise-10);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.conoce-endor-hero,
.calidad-hero,
.investigacion-innovacion-hero,
.nuestra-historia-hero,
.mision-vision-valores-hero,
.gobierno-universitario-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--beige-10);
    background-size: cover;
    background-position: center;
}

/* Foto de fondo a pantalla completa de cada página (una por página, cuando exista) */
.conoce-endor-hero {
    background-image: url("../images/university/hero_personas.png");
    background-position: right;
}

.nuestra-historia-hero {
    background-image: url("../images/university/university_nuestra-historia--hero.webp");
    background-position: right;
}

.mision-vision-valores-hero {
    background-image: url("../images/university/university_esencia-compromiso--hero.webp");
    background-position: center right;
}

.gobierno-universitario-hero {
    background-image: url("../images/university/university_gobierno--hero.webp");
    background-position: center right;
}

/* Degradado sobre toda la foto de fondo para que el texto de la izquierda sea legible */
.conoce-endor-hero__media,
.calidad-hero__media,
.investigacion-innovacion-hero__media,
.nuestra-historia-hero__media,
.mision-vision-valores-hero__media,
.gobierno-universitario-hero__media {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--beige-10) 0%,
        color-mix(in srgb, var(--beige-10) 90%, transparent) 25%,
        color-mix(in srgb, var(--beige-10) 55%, transparent) 50%,
        color-mix(in srgb, var(--beige-10) 15%, transparent) 75%,
        transparent 100%
    );
    pointer-events: none;
}

.conoce-endor-hero__content,
.modelo-educativo-hero__content,
.calidad-hero__content,
.investigacion-innovacion-hero__content,
.nuestra-historia-hero__content,
.mision-vision-valores-hero__content,
.gobierno-universitario-hero__content {
    max-width: 34rem;
    padding: 3rem 0 4rem;
}

.investigacion-innovacion-hero__eyebrow,
.gobierno-universitario-hero__eyebrow {
    font-family: "DMSans-Bold", sans-serif;
    font-size: 1rem;
    color: var(--turquoise-100);
    margin-bottom: 1rem;
}

.investigacion-innovacion-hero__rule {
    width: 3.5rem;
    height: 4px;
    border-radius: 2px;
    background-color: var(--turquoise-100);
    margin: 2rem 0 1.75rem;
}

.conoce-endor-hero__text,
.calidad-hero__text,
.investigacion-innovacion-hero__text,
.nuestra-historia-hero__text,
.mision-vision-valores-hero__text,
.gobierno-universitario-hero__text {
    max-width: 30rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--blue-100);
}

/* Subtítulo propio de "Nuestra historia": línea destacada entre el H1 y el párrafo */
.nuestra-historia-hero__subtitle {
    max-width: 28rem;
    font-family: "DMSans-Bold", sans-serif;
    margin: 1.25rem 0;
}

/* --------------------------------------------------------------------------
   CARRUSEL
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   TARJETA DE CARRUSEL
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   BLOQUE DESTACADO
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   NEWSLETTER
   -------------------------------------------------------------------------- */
.mision-vision-valores-newsletter {
    padding-bottom: 5rem;
}

/* ==========================================================================
   CONOCE ENDOR — SECCIONES ESPECÍFICAS
   ========================================================================== */

/* Secciones sin fondo propio de lado a lado: solo aportan espacio hacia abajo
   (nunca arriba), para no duplicar el espaciado con la sección anterior.
   Nota: lg:pt-0 / lg:pb-16 no existen en el bundle Tailwind purgado
   (appTailwind.css), por eso se declara aquí en vez de en el HTML. */
.conoce-endor-digitalent__container,
.conoce-endor-fuerza__container,
.conoce-endor-cta-final__container {
    padding-bottom: 3rem;
}

/* --------------------------------------------------------------------------
   PILARES ("Una universidad creada para el futuro")
   -------------------------------------------------------------------------- */

.conoce-endor-pilar__icon {
    font-size: 2rem;
}

/* --------------------------------------------------------------------------
   TARJETA "PARTE DE DIGITALENT GROUP"
   -------------------------------------------------------------------------- */
.conoce-endor-digitalent__card {
    grid-template-columns: 1fr;
    gap: 2rem;
    border-radius: 1rem;
}

.conoce-endor-digitalent__subtitle {
    color: var(--turquoise-30);
}

.conoce-endor-digitalent__text {
    color: var(--blue-20);
    margin-bottom: 1.75rem;
}

.conoce-endor-digitalent__logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem 1.5rem;
    background-image: radial-gradient(var(--blue-70) 1px, transparent 1px);
    background-size: 22px 22px;
    background-color: rgba(255, 255, 255, 0.02);
}

.conoce-endor-digitalent__logo {
    max-height: 40px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    justify-self: center;
    align-self: center;
}

/* --------------------------------------------------------------------------
   "LA FUERZA DE UN GRUPO, LA IDENTIDAD DE UNA UNIVERSIDAD"
   -------------------------------------------------------------------------- */

.conoce-endor-fuerza-item {
    border: 1px solid var(--turquoise-10);
    padding: 1.5rem 1.25rem;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.conoce-endor-fuerza-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.conoce-endor-fuerza-item__icon {
    font-size: 1.75rem;
}

.conoce-endor-fuerza-item__title {
    margin-bottom: 0.4rem;
}

/* --------------------------------------------------------------------------
   CTA FINAL ("Un futuro sin límites empieza aquí")
   -------------------------------------------------------------------------- */
.conoce-endor-cta-final__inner {
    z-index: 1;
    border-radius: 1rem;
    background-image: url("../images/university/montain-img.webp");
    background-position: right center;
    padding: 2rem 2.5rem;
}

.conoce-endor-cta-final__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--blue-100) 0%, color-mix(in srgb, var(--blue-100) 85%, transparent) 45%, color-mix(in srgb, var(--blue-100) 20%, transparent) 100%);
}

.conoce-endor-cta-final__content,
.conoce-endor-cta-final__cta {
    position: relative;
    z-index: 1;
}

.conoce-endor-cta-final__icon {
    background-color: rgba(255, 255, 255, 0.12);
    font-size: 2rem;
}

.conoce-endor-cta-final__subtitle {
    color: var(--blue-20);
}

/* ==========================================================================
   MODELO EDUCATIVO — SECCIONES ESPECÍFICAS
   ========================================================================== */

/* Secciones sin fondo propio de lado a lado: solo aportan espacio hacia abajo
   (nunca arriba), para no duplicar el espaciado con la sección anterior.
   Nota: lg:pt-0 / lg:pb-16 no existen en el bundle Tailwind purgado
   (appTailwind.css), por eso se declara aquí en vez de en el HTML. */
.modelo-educativo-metodologia__container,
.modelo-educativo-porque__container,
.modelo-educativo-cta-final__container {
    padding-bottom: 3rem;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.modelo-educativo-hero {
    background-color: var(--beige-10);
    background-image: url("../images/university/university_modelo-educativo--hero.webp");
}

/* Degradado sobre la foto de fondo para que el texto de la izquierda sea legible */
.modelo-educativo-hero__media {
    background: linear-gradient(
        to right,
        var(--beige-10) 0%,
        color-mix(in srgb, var(--beige-10) 90%, transparent) 25%,
        color-mix(in srgb, var(--beige-10) 55%, transparent) 50%,
        color-mix(in srgb, var(--beige-10) 15%, transparent) 75%,
        transparent 100%
    );
}

.modelo-educativo-hero__inner {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.modelo-educativo-hero__subtitle {
    font-family: "DMSans-Bold", sans-serif;
}

.modelo-educativo-hero__text {
    max-width: 30rem;
}

/* Card de features: fluye normal como parte del hero (position:relative solo
   para pintarse por encima del degradado, que es absolute) */

.modelo-educativo-hero__features-list {
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.modelo-educativo-feature__icon {
    font-size: 2rem;
}

.modelo-educativo-feature__text {
    color: var(--blue-20);
}

/* --------------------------------------------------------------------------
   PILARES ("Pilares de nuestro modelo educativo")
   -------------------------------------------------------------------------- */

.modelo-educativo-pilar {
    border: 1px solid var(--turquoise-10);
    padding: 1.75rem 1.5rem;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.modelo-educativo-pilar:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.modelo-educativo-pilar__icon {
    display: inline-flex;
    font-size: 1.75rem;
}

/* --------------------------------------------------------------------------
   "NUESTRA METODOLOGÍA"
   -------------------------------------------------------------------------- */
.modelo-educativo-metodologia__grid {
    flex-direction: column;
    gap: 2.5rem;
}

.modelo-educativo-metodologia__steps {
    flex-wrap: wrap;
}

.modelo-educativo-step {
    flex: 1 1 140px;
    min-width: 140px;
}

.modelo-educativo-step__icon {
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--blue-10);
    font-size: 1.5rem;
}

.modelo-educativo-step__title {
    margin-bottom: 0.4rem;
}

.modelo-educativo-metodologia__arrow {
    font-size: 1.5rem;
    margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   "¿POR QUÉ ELEGIR ENDOR UNIVERSITY?"
   -------------------------------------------------------------------------- */

.modelo-educativo-porque__title-highlight {
    border-bottom: 2px solid var(--turquoise-100);
}

.modelo-educativo-porque__card {
    border: 1px solid var(--turquoise-10);
    border-radius: 1rem;
}

.modelo-educativo-porque-item__icon {
    font-size: 1.75rem;
}

.modelo-educativo-porque-item__title {
    margin-bottom: 0.4rem;
}

/* --------------------------------------------------------------------------
   CTA FINAL ("Una educación sin límites, para un futuro sin fronteras")
   -------------------------------------------------------------------------- */
.modelo-educativo-cta-final__inner {
    z-index: 1;
    border-radius: 1rem;
    background-image: url("../images/university/montain-img.webp");
    background-position: right center;
    padding: 2rem 2.5rem;
}

.modelo-educativo-cta-final__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--blue-100) 0%, color-mix(in srgb, var(--blue-100) 85%, transparent) 45%, color-mix(in srgb, var(--blue-100) 20%, transparent) 100%);
}

.modelo-educativo-cta-final__content,
.modelo-educativo-cta-final__cta {
    position: relative;
    z-index: 1;
}

.modelo-educativo-cta-final__title {
    margin-bottom: 0.4rem;
}

.modelo-educativo-cta-final__subtitle {
    color: var(--blue-20);
}

/* ==========================================================================
   CALIDAD — SECCIONES ESPECÍFICAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   Fondo, media, inner, content, title y text ya vienen del bloque HERO
   compartido (PÁGINAS ESTÁTICAS). Aquí solo se añade lo propio de Calidad:
   el subtítulo destacado y la franja de features dentro del hero.
   -------------------------------------------------------------------------- */
.calidad-hero {
    background-image: url("../images/university/university_calidad--hero.webp");
}

.calidad-hero__subtitle {
    font-family: "DMSans-Bold", sans-serif;
}

.calidad-feature {
    border: 1px solid var(--turquoise-10);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.calidad-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.calidad-feature__header {
    align-items: center;
}

.calidad-feature__icon {
    font-size: 1.75rem;
}

/* --------------------------------------------------------------------------
   SGIC ("Nuestro Sistema de Garantía Interna de la Calidad")
   -------------------------------------------------------------------------- */

.calidad-sgic__card {
    border-radius: 1rem;
    padding: 2.5rem 2rem;
}

.calidad-sgic__grid {
    flex-direction: column;
    gap: 2.5rem;
}

.calidad-sgic__rule {
    width: 3.5rem;
    height: 4px;
    border-radius: 2px;
    background-color: var(--turquoise-100);
    margin: 1.25rem 0 1.5rem;
}

.calidad-sgic__steps {
    flex-wrap: wrap;
}

.calidad-sgic-step {
    flex: 1 1 140px;
    min-width: 140px;
}

.calidad-sgic-step__icon {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.75rem;
}

.calidad-sgic-step__number {
    font-family: "DMSans-Bold", sans-serif;
}

.calidad-sgic-step__title {
    margin-bottom: 0.4rem;
}

.calidad-sgic__arrow {
    font-size: 1.25rem;
    margin-top: 2.25rem;
}

/* --------------------------------------------------------------------------
   DOCUMENTOS DE CALIDAD
   -------------------------------------------------------------------------- */
.calidad-documentos {
    padding-bottom: 4rem;
}

.calidad-documentos__header {
    flex-direction: column;
    margin-bottom: 2rem;
}

.calidad-documentos__list {
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.calidad-documento-card {
    flex-direction: column;
    gap: 1.25rem;
    border: 1px solid var(--turquoise-10);
}

.calidad-documento-card__icon {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.75rem;
}

.calidad-documento-card__title {
    margin-bottom: 0.4rem;
}

.calidad-documento-card__meta {
    color: var(--black-50);
}

/* --------------------------------------------------------------------------
   CTA FINAL ("La calidad, nuestro compromiso diario")
   -------------------------------------------------------------------------- */
.calidad-cta-final__container {
    padding-bottom: 3rem;
}

.calidad-cta-final__inner {
    z-index: 1;
    border-radius: 1rem;
    background-image: url("../images/university/montain-img.webp");
    background-position: right center;
    padding: 2rem 2.5rem;
}

.calidad-cta-final__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--blue-100) 0%, color-mix(in srgb, var(--blue-100) 85%, transparent) 45%, color-mix(in srgb, var(--blue-100) 20%, transparent) 100%);
}

.calidad-cta-final__content,
.calidad-cta-final__cta {
    position: relative;
    z-index: 1;
}

.calidad-cta-final__icon {
    background-color: rgba(255, 255, 255, 0.12);
    font-size: 2rem;
}

.calidad-cta-final__subtitle {
    color: var(--blue-20);
}

/* ==========================================================================
   INVESTIGACIÓN E INNOVACIÓN — SECCIONES ESPECÍFICAS
   ========================================================================== */

/* Secciones sin fondo propio de lado a lado: solo aportan espacio hacia abajo
   (nunca arriba), para no duplicar el espaciado con la sección anterior.
   Nota: lg:pb-16 no existe en el bundle Tailwind purgado (appTailwind.css),
   por eso se declara aquí en vez de en el HTML. */
.investigacion-innovacion-objetivos__container {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.investigacion-innovacion-lineas__container,
.investigacion-innovacion-cta-final__container {
    padding-bottom: 3rem;
}

/* --------------------------------------------------------------------------
   HERO
   Fondo, media, inner, content, eyebrow, título, rule y text ya vienen del
   bloque HERO compartido (PÁGINAS ESTÁTICAS). Aquí solo se añade lo propio:
   el fondo de esta página y la tarjeta de aviso bajo el contenido del hero.
   -------------------------------------------------------------------------- */
.investigacion-innovacion-hero {
    background-image: url("../images/university/university_investigacion--hero.webp");
}

.investigacion-innovacion-hero__note {
    z-index: 1;
    align-items: center;
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 1.75rem 2rem;
    margin-bottom: 2rem;
}

.investigacion-innovacion-hero__note-icon {
    font-size: 1.75rem;
}

.investigacion-innovacion-hero__note-highlight {
    font-family: "DMSans-Bold", sans-serif;
}

/* --------------------------------------------------------------------------
   TÍTULOS DE SECCIÓN CENTRADOS ("Dos objetivos...", "Líneas de actuación")
   -------------------------------------------------------------------------- */

.investigacion-innovacion-heading__rule {
    width: 3.5rem;
    height: 4px;
    border-radius: 2px;
    background-color: var(--turquoise-100);
}

/* --------------------------------------------------------------------------
   DOS OBJETIVOS CLARAMENTE DEFINIDOS
   -------------------------------------------------------------------------- */
.investigacion-innovacion-objetivo {
    align-items: center;
    border: 1px solid var(--turquoise-10);
    padding: 1.75rem 1.5rem;
}

.investigacion-innovacion-objetivo__icon {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.75rem;
}

.investigacion-innovacion-objetivo__number {
    top: -4px;
    left: -4px;
    font-family: "DMSans-Bold", sans-serif;
}

/* --------------------------------------------------------------------------
   LÍNEAS DE ACTUACIÓN
   -------------------------------------------------------------------------- */

.investigacion-innovacion-linea__icon {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.75rem;
}

/* --------------------------------------------------------------------------
   CITA
   -------------------------------------------------------------------------- */

.investigacion-innovacion-quote__box {
    align-items: center;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--turquoise-10) 0%, var(--blue-10) 100%);
    padding: 2rem 2.5rem;
}

.investigacion-innovacion-quote__mark {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.5rem;
    line-height: 1;
}

.investigacion-innovacion-quote__icon {
    display: none;
    color: var(--blue-30);
    opacity: 0.6;
}

.investigacion-innovacion-quote__icon span {
    font-size: 3rem;
}

/* --------------------------------------------------------------------------
   CTA FINAL ("Conocimiento que genera impacto")
   -------------------------------------------------------------------------- */
.investigacion-innovacion-cta-final__inner {
    border-radius: 1rem;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 22px 22px;
    padding: 2rem 2.5rem;
}

.investigacion-innovacion-cta-final__icon {
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-size: 1.75rem;
}

.investigacion-innovacion-cta-final__subtitle {
    color: var(--blue-20);
}

/* ==========================================================================
   ACTUALIDAD — SECCIONES ESPECÍFICAS
   ========================================================================== */

/* Widget flotante oculto solo en esta página (no tiene clase de body propia
   que targetear, así que se usa :has() para detectar el hero de Actualidad). */
body:has(.actualidad-hero) #btnIebStar {
    display: none;
}

/* --------------------------------------------------------------------------
   IMÁGENES
   Mismo patrón que .event-card__image--01 del resto del sitio.
   Los archivos van en /assets/images/actualidad/
   -------------------------------------------------------------------------- */
[class*="actualidad-img--"] {
    background-color: var(--turquoise-10);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.actualidad-img--evento-01 {
    background-image: url("../images/home/event-01.webp?v=20260730");
}

.actualidad-img--evento-02 {
    background-image: url("../images/home/event-02.webp?v=20260730");
}

.actualidad-img--evento-03 {
    background-image: url("../images/home/event-03.webp?v=20260730");
}

.actualidad-img--otra-conferencia {
    background-image: url("../images/university/actualidad__ia.webp");
}

.actualidad-img--Papel-viatges {
    background-image: url("../images/university/actualidad__viajes.webp");
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.actualidad-hero {
    background-color: var(--beige-10);
}

.actualidad-hero__content {
    max-width: 34rem;
    padding-bottom: 4rem;
}

.actualidad-hero__eyebrow {
    font-family: "DMSans-Bold", sans-serif;
}

.actualidad-hero__rule {
    width: 3.5rem;
    height: 4px;
    border-radius: 2px;
    background-color: var(--turquoise-100);
    margin: 2rem 0 1.75rem;
}

.actualidad-hero__text {
    max-width: 30rem;
}

/* --------------------------------------------------------------------------
   HUB · CARRUSEL
   Reutiliza .event-card (borde + hover) y le añade el layout horizontal.
   -------------------------------------------------------------------------- */
.hub-carousel {
    position: relative;
}

.hub-carousel__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hub-carousel__track::-webkit-scrollbar {
    display: none;
}

.hub-carousel__next {
    position: absolute;
    right: -1rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 1px solid var(--turquoise-10);
    background-color: white;
    color: var(--blue-100);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: color 0.2s ease;
}

.hub-carousel__next:hover {
    color: var(--turquoise-100);
}

/* Variante horizontal de la tarjeta de evento */
.event-card--row {
    display: flex;
    flex: 1 0 320px;
    min-width: 320px;
    scroll-snap-align: start;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: white;
}

.event-card--row .event-card__media {
    position: relative;
    flex-shrink: 0;
    width: 38%;
    min-height: 170px;
}

.event-card--row .event-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
}

.event-card--row .event-card__date {
    left: 0;
    bottom: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.event-card--row .event-card__title {
    font-size: 0.95rem;
    line-height: 1.35;
}

.event-card--row .event-card__subtitle {
    font-size: 0.85rem;
}

.event-card--row .event-card__tag {
    align-self: flex-start;
    padding: 0.25rem 0.6rem;
}

/* --------------------------------------------------------------------------
   COL·LABORACIÓ · 2a SETMANA DE LA RECERCA
   Banda con logos + título + botón de descarga (mismo patrón que
   .newsletter-band, pero en claro).
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   EVENTOS DESTACADOS
   -------------------------------------------------------------------------- */
.actualidad-destacados {
    padding-bottom: 4rem;
}

.event-detail-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.event-detail {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border: 1px solid var(--turquoise-10);
    border-radius: 0.5rem;
    background-color: white;
}

.event-detail__media {
    position: relative;
    min-height: 240px;
}

.event-detail__date {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 0.375rem;
    background-color: var(--blue-100);
    color: white;
    line-height: 1;
}

.event-detail__date-day {
    font-family: "DMSans-Bold", sans-serif;
    font-size: 1.5rem;
}

.event-detail__date-month {
    font-size: 0.65rem;
    text-transform: uppercase;
    margin-top: 4px;
}

.event-detail__body {
    padding: 1.75rem;
}

.event-detail__kicker {
    font-family: "DMSans-Bold", sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--turquoise-100);
    margin-bottom: 0.75rem;
}

.event-detail__title {
    font-size: 1.15rem;
    line-height: 1.4;
    color: var(--blue-100);
}

.event-detail__speaker {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--black-70);
}

.event-detail__meta {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.event-detail__meta-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.event-detail__meta-icon {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 1.1rem !important;
    color: var(--turquoise-100);
}

.event-detail__meta dt {
    font-family: "DMSans-Bold", sans-serif;
    font-size: 0.8rem;
    color: var(--blue-100);
}

.event-detail__meta dd {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--black-70);
}

/* --- Columna de datos prácticos --- */
.event-detail__aside {
    padding: 1.75rem;
    border-top: 1px solid var(--turquoise-10);
}

.event-detail__facts {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    list-style: none;
}

.event-detail__facts li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.event-detail__fact-label {
    font-family: "DMSans-Bold", sans-serif;
    font-size: 0.8rem;
    color: var(--blue-100);
}

.event-detail__fact-value {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--black-70);
}

.event-detail__fact-hint {
    display: block;
    color: var(--black-50);
}

.event-detail__divider {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid var(--turquoise-10);
}

.event-detail__note {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--black-70);
}

.event-detail__cta {
    margin-top: 1rem;
}

.event-detail__contact {
    margin-top: 1.75rem;
}

.event-detail__contact p,
.event-detail__contact a {
    font-size: 0.8rem;
    line-height: 1.6;
}

.event-detail__contact p:not(.event-detail__fact-label) {
    color: var(--black-70);
}

.event-detail__contact a {
    color: var(--turquoise-100);
    text-decoration: none;
}

.event-detail__contact a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   NEWSLETTER (espaciado propio de esta página; el resto lo pone
   .newsletter-band, componente compartido)
   -------------------------------------------------------------------------- */
.actualidad-newsletter {
    padding-bottom: 5rem;
}

/* ==========================================================================
   MENSAJE DE LA RECTORA — SECCIONES ESPECÍFICAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   MENSAJE (texto + foto a dos columnas)
   -------------------------------------------------------------------------- */
.mensaje-rectora-mensaje {
    padding: 3rem 0 4rem;
}

.mensaje-rectora-mensaje__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.mensaje-rectora-mensaje__eyebrow {
    font-family: "DMSans-Bold", sans-serif;
    letter-spacing: 0.03em;
}

.mensaje-rectora-mensaje__rule {
    width: 3.5rem;
    height: 4px;
    border-radius: 2px;
    background-color: var(--turquoise-100);
    margin: 1.75rem 0;
}

.mensaje-rectora-mensaje__text {
    gap: 1.1rem;
}

.mensaje-rectora-mensaje__signature-mark {
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 2rem;
    line-height: 1;
}

.mensaje-rectora-mensaje__signature-name {
    font-family: "DMSans-Bold", sans-serif;
}

.mensaje-rectora-mensaje__media {
    aspect-ratio: 3 / 4;
    border-radius: 1rem;
    background-image: url("../images/university/rectora-endor.webp");
    background-position: center top;
}

/* --------------------------------------------------------------------------
   SOBRE LA RECTORA
   -------------------------------------------------------------------------- */
.mensaje-rectora-bio {
    padding-bottom: 4rem;
}

.mensaje-rectora-bio__card {
    flex-direction: column;
    gap: 1.5rem;
    border-radius: 1rem;
    padding: 1.75rem;
}

.mensaje-rectora-bio__photo {
    max-width: 12rem;
    aspect-ratio: 1;
    background-image: url("../images/university/rectora-endor.webp");
    background-position: center top;
}

/* --------------------------------------------------------------------------
   HIGHLIGHTS (franja de 4 puntos: online, europea, tecnológica, personas)
   -------------------------------------------------------------------------- */
.mensaje-rectora-highlights {
    padding-bottom: 4rem;
}

.mensaje-rectora-highlights__list {
    gap: 1.5rem;
    border-top: 1px solid var(--turquoise-10);
}

.mensaje-rectora-highlights__icon {
    font-size: 2rem !important;
}

.mensaje-rectora-highlights__text {
    font-family: "DMSans-Bold", sans-serif;
}

/* --------------------------------------------------------------------------
   CITA FINAL (sección a pantalla completa, fondo azul + foto de montaña)
   -------------------------------------------------------------------------- */
.mensaje-rectora-quote {
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    padding: 3.5rem 0;
}

.mensaje-rectora-quote__media {
    background-image: url("../images/university/montain-img.webp");
    opacity: 0.35;
}

.mensaje-rectora-quote__inner {
    gap: 2rem;
}

.mensaje-rectora-quote__content {
    max-width: 30rem;
}

.mensaje-rectora-quote__mark {
    font-family: Georgia, serif;
    font-size: 3rem;
    line-height: 1;
}

.mensaje-rectora-quote__text {
    font-family: "DMSans-Bold", sans-serif;
}

.mensaje-rectora-quote__logo {
    width: 8em;
    background-size: contain;
}

.mensaje-rectora-quote__logo--endor {
    background-image: url("../images/logo/logo-endor__blanco.webp");
}

.mensaje-rectora-quote__logo--digitalent {
    background-image: url("../images/logo/logo__digitalent--white.webp");
}

.mensaje-rectora-quote__logo-divider {
    width: 1px;
    height: 2.5rem;
    background-color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   NUESTRA HISTORIA — SECCIONES ESPECÍFICAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   TIMELINE (2010 / 2025): círculo del año + línea vertical + texto + media
   -------------------------------------------------------------------------- */

.nuestra-historia-timeline__list {
    gap: 3rem;
}

.nuestra-historia-timeline__item {
    grid-template-columns: 3rem minmax(0, 1fr);
    column-gap: 1.5rem;
}

/* Línea que conecta este círculo con el siguiente (se oculta en el último item) */
.nuestra-historia-timeline__marker::before {
    content: "";
    position: absolute;
    top: 3rem;
    bottom: -3rem;
    left: 50%;
    width: 2px;
    background-color: var(--turquoise-20);
    transform: translateX(-50%);
}

.nuestra-historia-timeline__item:last-child .nuestra-historia-timeline__marker::before {
    display: none;
}

.nuestra-historia-timeline__year {
    border: 2px solid var(--blue-100);
    font-family: "DMSans-Bold", sans-serif;
    z-index: 1;
}

.nuestra-historia-timeline__body {
    grid-column: 2;
}

.nuestra-historia-timeline__link:hover {
    color: var(--blue-100);
}

.nuestra-historia-timeline__media,
.nuestra-historia-timeline__cards {
    grid-column: 2;
    margin-top: 1.5rem;
}

/* Variante 2010: logo + foto a dos columnas */
.nuestra-historia-timeline__media--photo {
    min-height: 220px;
}

.nuestra-historia-timeline__logo {
    width: 7rem;
    height: 7rem;
    background-size: contain;
}

.nuestra-historia-timeline__logo--la-salle {
    background-image: url("../images/logo/logo__la-salle.webp");
}

.nuestra-historia-timeline__logo--digitalent {
    background-image: url("../images/logo/logo__digitalent.webp");
}

.nuestra-historia-timeline__logo--endor {
    background-image: url("../images/logo/Logo_Endor_Digitalent.webp");
}

.nuestra-historia-timeline__media-photo {
    background-image: url("../images/university/montain-img.webp");
}

/* Variante 2025: tarjetas apiladas (La Salle + Digitalent / ENDOR University) */

.nuestra-historia-timeline__card {
    gap: 1.25rem;
    justify-content: space-evenly;
}

.nuestra-historia-timeline__card-divider {
    width: 1px;
    align-self: stretch;
    background-color: var(--turquoise-30);
}

.nuestra-historia-timeline__card--dark .nuestra-historia-timeline__card-divider {
    background-color: rgba(255, 255, 255, 0.25);
}

/* --------------------------------------------------------------------------
   ESTRELLAS UE (badge circular reutilizado en ANDORRA y en la franja final)
   -------------------------------------------------------------------------- */
.nuestra-historia-stars {
    position: relative;
    width: 8rem;
    height: 8rem;
    list-style: none;
    flex-shrink: 0;
    --star-radius: 50px;
}

.nuestra-historia-stars li {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}

.nuestra-historia-stars li::before {
    content: "\2605";
    position: absolute;
    left: -8px;
    top: -8px;
    width: 16px;
    height: 16px;
    font-size: 15px;
    line-height: 1;
    color: var(--blue-100);
}

.nuestra-historia-stars--light li::before {
    color: white;
}

.nuestra-historia-stars li:nth-child(1) {
    transform: rotate(0deg) translateY(calc(var(--star-radius, 24px) * -1)) rotate(0deg);
}
.nuestra-historia-stars li:nth-child(2) {
    transform: rotate(30deg) translateY(calc(var(--star-radius, 24px) * -1)) rotate(-30deg);
}
.nuestra-historia-stars li:nth-child(3) {
    transform: rotate(60deg) translateY(calc(var(--star-radius, 24px) * -1)) rotate(-60deg);
}
.nuestra-historia-stars li:nth-child(4) {
    transform: rotate(90deg) translateY(calc(var(--star-radius, 24px) * -1)) rotate(-90deg);
}
.nuestra-historia-stars li:nth-child(5) {
    transform: rotate(120deg) translateY(calc(var(--star-radius, 24px) * -1)) rotate(-120deg);
}
.nuestra-historia-stars li:nth-child(6) {
    transform: rotate(150deg) translateY(calc(var(--star-radius, 24px) * -1)) rotate(-150deg);
}
.nuestra-historia-stars li:nth-child(7) {
    transform: rotate(180deg) translateY(calc(var(--star-radius, 24px) * -1)) rotate(-180deg);
}
.nuestra-historia-stars li:nth-child(8) {
    transform: rotate(210deg) translateY(calc(var(--star-radius, 24px) * -1)) rotate(-210deg);
}
.nuestra-historia-stars li:nth-child(9) {
    transform: rotate(240deg) translateY(calc(var(--star-radius, 24px) * -1)) rotate(-240deg);
}
.nuestra-historia-stars li:nth-child(10) {
    transform: rotate(270deg) translateY(calc(var(--star-radius, 24px) * -1)) rotate(-270deg);
}
.nuestra-historia-stars li:nth-child(11) {
    transform: rotate(300deg) translateY(calc(var(--star-radius, 24px) * -1)) rotate(-300deg);
}
.nuestra-historia-stars li:nth-child(12) {
    transform: rotate(330deg) translateY(calc(var(--star-radius, 24px) * -1)) rotate(-330deg);
}

/* Tamaño reducido cuando se usa como icono dentro de la franja final */
.nuestra-historia-quote__icon.nuestra-historia-stars {
    --star-radius: 13px;
    width: 32px;
    height: 32px;
}

.nuestra-historia-quote__icon.nuestra-historia-stars li::before {
    left: -5px;
    top: -5px;
    width: 10px;
    height: 10px;
    font-size: 9px;
}

/* --------------------------------------------------------------------------
   DE ANDORRA A EUROPA (sección a pantalla completa, fondo turquesa-10)
   -------------------------------------------------------------------------- */
.nuestra-historia-andorra {
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    padding: 3.5rem 0;
}

.nuestra-historia-andorra__inner {
    flex-direction: column;
    gap: 2.5rem;
}

.nuestra-historia-andorra__map {
    width: 8rem;
    height: 8rem;
    background-image: url("../images/university/mapa-andorra.webp");
    background-size: contain;
}

.nuestra-historia-andorra__divider {
    width: 1px;
    height: 70px;
    background-color: var(--turquoise-30);
}

.nuestra-historia-andorra__list {
    gap: 1.25rem;
}

.nuestra-historia-andorra__icon {
    font-size: 1.5rem !important;
}

.nuestra-historia-andorra__item-text {
    font-family: "DMSans-Bold", sans-serif;
}

/* --------------------------------------------------------------------------
   FRANJA FINAL (cita + 4 puntos): sección a pantalla completa, fondo azul
   -------------------------------------------------------------------------- */
.nuestra-historia-quote {
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    padding: 3.5rem 0;
}

.nuestra-historia-quote__media {
    background-image: url("../images/university/montain-img.webp");
    opacity: 0.2;
}

.nuestra-historia-quote__list {
    gap: 2rem;
}

.nuestra-historia-quote__mark {
    font-family: Georgia, serif;
    font-size: 3rem;
    line-height: 1;
}

.nuestra-historia-quote__text {
    font-family: "DMSans-Bold", sans-serif;
}

.nuestra-historia-quote__icon {
    font-size: 1.75rem !important;
}

/* ==========================================================================
   MISIÓN, VISIÓN Y VALORES — SECCIONES ESPECÍFICAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO: foto a pantalla completa con velo azul (no el patrón beige compartido)
   -------------------------------------------------------------------------- */
.mision-vision-valores-hero__media {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--blue-100) 85%, transparent) 0%,
        color-mix(in srgb, var(--blue-100) 60%, transparent) 45%,
        color-mix(in srgb, var(--blue-100) 25%, transparent) 100%
    );
}

.mision-vision-valores-hero__text {
    color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   MISIÓN / VISIÓN
   -------------------------------------------------------------------------- */

.mision-vision-valores-pilares__grid {
    gap: 2rem;
}

.mision-vision-valores-pilar {
    border-radius: 1rem;
    background-color: var(--blue-10);
}

.mision-vision-valores-pilar__icon {
    font-size: 2rem !important;
}

/* --------------------------------------------------------------------------
   NUESTROS VALORES
   -------------------------------------------------------------------------- */

.mision-vision-valores-valores__head {
    max-width: 40rem;
    margin: 0 auto 3rem;
}

.mision-vision-valores-valores__list {
    gap: 2.5rem;
}

.mision-vision-valores-valor {
    padding-top: 2rem;
    border-top: 1px solid var(--turquoise-10);
}

.mision-vision-valores-valor:first-child {
    padding-top: 0;
    border-top: 0;
}

.mision-vision-valores-valor__icon-wrap {
    width: 4.5rem;
    height: 4.5rem;
    background-color: var(--blue-10);
}

.mision-vision-valores-valor__icon {
    font-size: 1.75rem !important;
}

/* ==========================================================================
   ADMISIONES — SECCIONES ESPECÍFICAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   PROCESO DE ADMISIÓN: 6 pasos numerados
   -------------------------------------------------------------------------- */

.admisiones-proceso__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.admisiones-step__number {
    border: 2px solid var(--blue-100);
    font-family: "DMSans-Bold", sans-serif;
}

.admisiones-newsletter {
    padding-bottom: 5rem;
}

/* ==========================================================================
   GOBIERNO Y ORGANIZACIÓN ACADÉMICA — SECCIONES ESPECÍFICAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO: subtítulo propio + tagline sobre la foto
   -------------------------------------------------------------------------- */
.gobierno-universitario-hero__subtitle {
    max-width: 28rem;
    font-family: "DMSans-Bold", sans-serif;
    margin: 1.25rem 0;
}

/* --------------------------------------------------------------------------
   ESTRUCTURA DE GOBIERNO
   -------------------------------------------------------------------------- */

.gobierno-universitario-estructura__grid {
    flex-direction: column;
}

.gobierno-universitario-organo {
    padding: 1.75rem;
    border: 1px solid var(--turquoise-10);
    border-top: 4px solid var(--blue-100);
}

.gobierno-universitario-organo--02 {
    border-top-color: #2f7fd6;
}

.gobierno-universitario-organo--03 {
    border-top-color: #e08b3d;
}

.gobierno-universitario-organo--04 {
    border-top-color: #3fa66a;
}

.gobierno-universitario-organo__icon {
    font-size: 1.75rem !important;
}

.gobierno-universitario-estructura__arrow {
    font-size: 1.5rem !important;
}

/* --------------------------------------------------------------------------
   CENTROS E INSTITUTOS / DEPARTAMENTOS ACADÉMICOS
   -------------------------------------------------------------------------- */
.gobierno-universitario-organigrama {
    padding-bottom: 4rem;
}

.gobierno-universitario-organigrama__grid {
    gap: 2rem;
}

.gobierno-universitario-centros__list,
.gobierno-universitario-departamentos__list {
    border: 1px solid var(--turquoise-10);
}

.gobierno-universitario-departamentos {
    background-color: var(--blue-10);
    border-radius: 1rem;
}

.gobierno-universitario-departamentos__list {
    border-color: color-mix(in srgb, var(--blue-100) 8%, transparent);
}

.gobierno-universitario-centro:not(:last-child),
.gobierno-universitario-departamento:not(:last-child) {
    border-bottom: 1px solid var(--turquoise-10);
}

.gobierno-universitario-departamento:not(:last-child) {
    border-bottom-color: color-mix(in srgb, var(--blue-100) 8%, transparent);
}

.gobierno-universitario-centro__link,
.gobierno-universitario-departamento__link {
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.gobierno-universitario-centro__number {
    width: 2.25rem;
    height: 2.25rem;
    font-family: "DMSans-Bold", sans-serif;
    background-color: var(--blue-100);
}

.gobierno-universitario-centro__number--02 {
    background-color: var(--turquoise-100);
}

.gobierno-universitario-centro__number--03 {
    background-color: #e08b3d;
}

.gobierno-universitario-centro__number--04 {
    background-color: #7c5cb0;
}

.gobierno-universitario-centro__number--05 {
    background-color: #c2568f;
}

.gobierno-universitario-centro__body {
    min-width: 0;
}

.gobierno-universitario-centro__title {
    font-family: "DMSans-Bold", sans-serif;
}

.gobierno-universitario-centro__text {
    margin-top: 0.15rem;
}

.gobierno-universitario-centro__arrow,
.gobierno-universitario-departamento__arrow {
    font-size: 1.1rem !important;
}

.gobierno-universitario-departamento__number {
    font-family: "DMSans-Bold", sans-serif;
}

.gobierno-universitario-departamento__title {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   UN COMPROMISO CON LA EXCELENCIA
   -------------------------------------------------------------------------- */
.gobierno-universitario-compromiso {
    padding-bottom: 4rem;
}

.gobierno-universitario-compromiso__card {
    flex-direction: column;
    gap: 2rem;
    border-radius: 1rem;
    background-color: var(--blue-10);
}

.gobierno-universitario-compromiso__list {
    gap: 1.75rem 1rem;
}

.gobierno-universitario-compromiso__item {
    gap: 0.6rem;
}

.gobierno-universitario-compromiso__icon {
    font-size: 1.75rem !important;
}

.gobierno-universitario-compromiso__text {
    font-family: "DMSans-Bold", sans-serif;
}

/* --------------------------------------------------------------------------
   CIERRE (foto a pantalla completa con velo azul)
   -------------------------------------------------------------------------- */
.gobierno-universitario-cierre {
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
}

.gobierno-universitario-cierre__media {
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--blue-100) 75%, transparent) 0%, color-mix(in srgb, var(--blue-100) 55%, transparent) 100%),
        url("../images/university/montain-img.webp");
}

.gobierno-universitario-cierre__inner {
    flex-direction: column;
    gap: 1.5rem;
}

.gobierno-universitario-cierre__text {
    max-width: 26rem;
    font-family: "DMSans-Bold", sans-serif;
}

/* ==========================================================================
   MEDIA QUERIES (unificadas al final del archivo: una sola por breakpoint)
   ========================================================================== */

/* @media (max-width: 560px) {
    .features-row .feature-item,
    body.masters .features-row .feature-item {
        flex: 1 1 100%;
    }
} */

@media (max-width: 767px) {
    .conoce-endor-hero__media,
    .calidad-hero__media,
    .investigacion-innovacion-hero__media,
    .nuestra-historia-hero__media,
    .mision-vision-valores-hero__media,
    .gobierno-universitario-hero__media,
    .modelo-educativo-hero__media {
        background: linear-gradient(
            to BOTTOM,
            var(--beige-10) 0%,
            color-mix(in srgb, var(--beige-10) 90%, transparent) 25%,
            color-mix(in srgb, var(--beige-10) 55%, transparent) 71%,
            color-mix(in srgb, var(--beige-10) 15%, transparent) 101%,
            transparent 100%
        );
    }

    /* Esta página usa foto a pantalla completa con velo azul, no el degradado beige compartido */
    .mision-vision-valores-hero__media {
        background: linear-gradient(
            to bottom,
            color-mix(in srgb, var(--blue-100) 90%, transparent) 0%,
            color-mix(in srgb, var(--blue-100) 75%, transparent) 60%,
            color-mix(in srgb, var(--blue-100) 55%, transparent) 100%
        );
    }

    .hero-home__overlay {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(to top, var(--turquoise-100) 10%, transparent 60%),
            radial-gradient(circle at top, var(--turquoise-10) 30%, transparent 70%);
        pointer-events: none;
    }

    .modelo-educativo-feature {
        flex-direction: column;
    }

    .calidad-feature__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .investigacion-innovacion-hero__note,
    .investigacion-innovacion-objetivo,
    .investigacion-innovacion-quote__box {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Botones "de caja" a ancho completo en móvil (se excluyen los btn--link,
       que son enlaces con flecha sin caja, y el CTA del header). */
    .btn:not(.btn--link):not(.btn--link-light) {
        width: 100%;
    }

    .header .btn {
        width: auto;
    }
}

@media (max-width: 900px) {
    .features-row {
        flex-wrap: wrap;
        row-gap: 28px;
    }
    .features-row .feature-item {
        flex: 1 1 calc(50% - 16px);
    }
}

@media (max-width: 1100px) {
    body.masters .features-row {
        flex-wrap: wrap;
        row-gap: 28px;
    }
    body.masters .features-row .feature-item {
        flex: 1 1 calc(50% - 16px);
    }
}

@media (min-width: 768px) {
    .wrapper {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .calidad-documentos__header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .calidad-documento-card {
        flex-direction: row;
        align-items: center;
    }

    .investigacion-innovacion-quote__icon {
        display: flex;
    }

    .newsletter-band {
        flex-direction: row;
        align-items: center;
        gap: 2.5rem;
        padding: 2.5rem;
    }

    .newsletter-band__cta {
        width: auto;
    }

    .mision-vision-valores-valores__list {
        gap: 2.5rem 2rem;
    }

    .mision-vision-valores-valor {
        padding-top: 0;
        border-top: 0;
    }

    .admisiones-proceso__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gobierno-universitario-compromiso__card {
        flex-direction: row;
        align-items: center;
        gap: 3rem;
    }

    .gobierno-universitario-cierre__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }

    .gobierno-universitario-cierre__tagline {
        text-align: right;
    }
}

@media (min-width: 1024px) {
    .wrapper {
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .event-detail {
        grid-template-columns: 240px minmax(0, 1fr) 300px;
    }

    .event-detail__aside {
        border-top: 0;
        border-left: 1px solid var(--turquoise-10);
    }

    .conoce-endor-digitalent__container,
    .conoce-endor-fuerza__container,
    .conoce-endor-cta-final__container {
        padding-bottom: 4rem;
    }

    .conoce-endor-pilar:not(:first-child) {
        border-left: 1px solid var(--turquoise-20);
    }

    .conoce-endor-digitalent__card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        align-items: center;
        gap: 3rem;
    }

    .modelo-educativo-metodologia__container,
    .modelo-educativo-porque__container,
    .modelo-educativo-cta-final__container {
        padding-bottom: 4rem;
    }

    .modelo-educativo-hero__inner {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .modelo-educativo-feature:not(:first-child) {
        border-left: 1px solid rgba(255, 255, 255, 0.15);
        padding-left: 1.5rem;
    }

    .modelo-educativo-metodologia__grid {
        flex-direction: row;
        align-items: flex-start;
        gap: 3rem;
    }

    .modelo-educativo-metodologia__content {
        max-width: 18rem;
    }

    .modelo-educativo-metodologia__steps {
        flex-wrap: nowrap;
    }

    .modelo-educativo-porque-item:not(:first-child) {
        border-left: 1px solid var(--turquoise-20);
    }

    .calidad-cta-final__container {
        padding-bottom: 4rem;
    }

    .calidad-sgic__grid {
        flex-direction: row;
        align-items: center;
        gap: 3rem;
    }

    .calidad-sgic__content {
        max-width: 20rem;
    }

    .calidad-sgic__steps {
        flex-wrap: nowrap;
    }

    .investigacion-innovacion-objetivos__container,
    .investigacion-innovacion-lineas__container,
    .investigacion-innovacion-cta-final__container {
        padding-bottom: 4rem;
    }

    .investigacion-innovacion-linea:not(:first-child) {
        border-left: 1px solid var(--turquoise-20);
    }

    .section-head__link {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 0;
    }

    .actualidad-hero__media {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 50%;
        background-image: url("../images/university/university_actualidad--hero.webp");
        background-color: var(--turquoise-10);
        background-size: cover;
        background-position: center;
    }

    /* Degradado para que el texto respire sobre el borde de la foto */
    .actualidad-hero__media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to right,
            var(--beige-10) 0%,
            color-mix(in srgb, var(--beige-10) 55%, transparent) 40%,
            transparent 100%
        );
    }

    .actualidad-hero__content {
        padding-bottom: 6rem;
    }

    .mensaje-rectora-mensaje__grid {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 3rem;
        align-items: start;
    }

    .mensaje-rectora-bio__card {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
        padding: 2rem;
    }

    .mensaje-rectora-highlights__list {
        gap: 0;
    }

    .mensaje-rectora-highlights__item {
        flex: 1;
        padding: 0 1.5rem;
        border-left: 1px solid var(--turquoise-10);
    }

    .mensaje-rectora-highlights__item:first-child {
        border-left: 0;
        padding-left: 0;
    }

    .mensaje-rectora-highlights__item:last-child {
        padding-right: 0;
    }

    .nuestra-historia-timeline__item {
        grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 2.5rem;
    }

    .nuestra-historia-timeline__media,
    .nuestra-historia-timeline__cards {
        grid-column: 3;
        grid-row: 1;
        margin-top: 0;
    }

    .mensaje-rectora-quote__inner {
        gap: 3rem;
    }

    .nuestra-historia-andorra__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 3rem;
    }

    .nuestra-historia-andorra__text {
        flex: 1 1 40%;
    }

    .nuestra-historia-quote__item {
        flex: 1;
        padding-left: 1.5rem;
        border-left: 1px solid rgba(255, 255, 255, 0.25);
    }

    .nuestra-historia-quote__item--quote {
        flex: 1.4;
        padding-left: 0;
        padding-right: 1.5rem;
        border-left: 0;
    }

    .mision-vision-valores-pilares__grid {
        gap: 2.5rem;
    }

    .mision-vision-valores-valores__list {
        row-gap: 3rem;
        column-gap: 0;
    }

    .mision-vision-valores-valor {
        padding: 0 1.5rem;
    }

    .mision-vision-valores-valor:not(:nth-child(5n + 1)) {
        border-left: 1px solid var(--turquoise-10);
    }

    .mision-vision-valores-valor:nth-child(n + 6) {
        padding-top: 2.5rem;
        border-top: 1px solid var(--turquoise-10);
    }

    .admisiones-proceso__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem 2.5rem;
    }

    .gobierno-universitario-estructura__grid {
        flex-direction: row;
    }

    .gobierno-universitario-organigrama__grid {
        gap: 3rem;
    }

    .gobierno-universitario-compromiso__item {
        flex: 1;
        padding: 0 1.25rem;
        border-left: 1px solid color-mix(in srgb, var(--blue-100) 12%, transparent);
    }

    .gobierno-universitario-compromiso__item:first-child {
        padding-left: 0;
        border-left: 0;
    }
}

/* ==========================================================================
   PÁGINAS LEGALES
   Aviso legal · Política de privacidad · Política de cookies
   Añadir al final de /assets/css/style26.css

   Las tres comparten el mismo prefijo porque son el mismo tipo de documento:
   una sola definición en lugar de tres copias.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO (sin imagen: son páginas de texto)
   -------------------------------------------------------------------------- */
.legal-hero {
    position: relative;
    background-color: var(--beige-10);
}

.legal-hero__content {
    max-width: 40rem;
    padding: 3rem 0;
}

@media (min-width: 1024px) {
    .legal-hero__content { padding: 4rem 0; }
}

.legal-hero__eyebrow {
    font-family: "DMSans-Bold", sans-serif;
    font-size: 0.875rem;
    color: var(--turquoise-100);
    margin-bottom: 1rem;
}

.legal-hero__title {
    color: var(--blue-100);
    font-size: 2.25rem;
    line-height: 1.15;
}

@media (min-width: 768px) {
    .legal-hero__title { font-size: 3rem; }
}

.legal-hero__rule {
    width: 3.5rem;
    height: 4px;
    border-radius: 2px;
    background-color: var(--turquoise-100);
    margin: 2rem 0 1.75rem;
}

.legal-hero__text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--black-70);
}

/* --------------------------------------------------------------------------
   CUERPO DEL DOCUMENTO
   Medida de línea limitada: un texto legal a 1600px de ancho no se lee.
   -------------------------------------------------------------------------- */
.legal-contenido {
    padding: 3.5rem 0 5rem;
}

.legal-doc {
    max-width: 48rem;
}

.legal-doc__section-title {
    color: var(--blue-100);
    font-size: 1.35rem;
    line-height: 1.3;
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.legal-doc > *:first-child {
    margin-top: 0;
}

.legal-doc__subtitle {
    color: var(--blue-100);
    font-size: 1.05rem;
    line-height: 1.4;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.legal-doc p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--black-70);
    margin-bottom: 1rem;
}

.legal-doc a {
    color: var(--turquoise-100);
    font-size: inherit;
    text-decoration: underline;
}

.legal-doc a:hover {
    color: var(--blue-100);
}

.legal-doc strong {
    color: var(--black-90);
}

/* --- Listas con viñeta --- */
.legal-doc__list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0 0 1.5rem;
}

.legal-doc__list li {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--black-70);
    margin-bottom: 0.5rem;
}

/* --- Listas de datos identificativos (sin viñeta) --- */
.legal-doc__data-list {
    list-style: none;
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.5rem;
    border-radius: 0.5rem;
    background-color: var(--beige-10);
}

.legal-doc__data-list li {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--black-70);
}

.legal-doc__data-list li:not(:last-child) {
    margin-bottom: 0.35rem;
}

/* --- Glosario de tipos de cookie --- */
.legal-doc__deflist {
    margin-bottom: 1.5rem;
}

.legal-doc__deflist dt {
    font-family: "DMSans-Bold", sans-serif;
    font-size: 1rem;
    color: var(--blue-100);
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.legal-doc__deflist dd {
    margin: 0;
    padding-left: 1rem;
    border-left: 2px solid var(--turquoise-10);
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--black-70);
}

/* Los <dd> con varios párrafos: el último no arrastra margen */
.legal-doc__deflist dd p:last-child {
    margin-bottom: 0;
}

/* --- Botón de configuración de cookies --- */
.legal-doc__cta {
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.legal-doc__cta:hover {
    text-decoration: none;
    color: white;
}

/* --- Fecha de actualización --- */
.legal-doc__updated {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--turquoise-10);
    font-family: "DMSans-Bold", sans-serif;
    font-size: 0.85rem !important;
    color: var(--blue-100) !important;
}

/* ==========================================================================
   PÁGINAS DE CONTENIDO — prefijo .pagina-*
   Añadir al final de /assets/css/style26.css

   Una sola definición para todas las páginas de contenido (Experiencia Endor
   y las que vengan después). Si alguna necesita variar, se le añade un
   modificador en su plantilla en lugar de duplicar el bloque.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.pagina-hero {
    position: relative;
    background-color: var(--beige-10);
}

.pagina-hero__content {
    max-width: 40rem;
    padding: 3rem 0;
}

@media (min-width: 1024px) {
    .pagina-hero__content { padding: 4.5rem 0; }
}

.pagina-hero__eyebrow {
    font-family: "DMSans-Bold", sans-serif;
    font-size: 0.875rem;
    color: var(--turquoise-100);
    margin-bottom: 1rem;
}

.pagina-hero__title {
    color: var(--blue-100);
    font-size: 2.25rem;
    line-height: 1.15;
}

@media (min-width: 768px) {
    .pagina-hero__title { font-size: 3rem; }
}

.pagina-hero__rule {
    width: 3.5rem;
    height: 4px;
    border-radius: 2px;
    background-color: var(--turquoise-100);
    margin: 2rem 0 1.75rem;
}

.pagina-hero__text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--black-70);
}

/* --------------------------------------------------------------------------
   INTRODUCCIÓN
   -------------------------------------------------------------------------- */
.pagina-intro {
    padding: 4rem 0 0;
}

.pagina-intro__body {
    max-width: 48rem;
}

.pagina-intro__title {
    color: var(--blue-100);
    font-size: 1.6rem;
    line-height: 1.3;
    margin-bottom: 1.25rem;
}

.pagina-intro__body p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--black-70);
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   TARJETAS
   -------------------------------------------------------------------------- */
.pagina-destacados {
    padding: 4rem 0;
}

.pagina-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .pagina-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pagina-card {
    padding: 1.75rem;
    border: 1px solid var(--turquoise-10);
    border-radius: 0.5rem;
    background-color: white;
    transition: transform 0.2s ease;
}

.pagina-card:hover {
    transform: translateY(-4px);
}

.pagina-card__icon {
    font-size: 2rem !important;
    color: var(--turquoise-100);
}

.pagina-card__title {
    margin: 1rem 0 0.5rem;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--blue-100);
}

.pagina-card__text {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--black-70);
}

/* --------------------------------------------------------------------------
   LISTADO CON IMAGEN
   -------------------------------------------------------------------------- */
.pagina-listado {
    padding-bottom: 4rem;
}

.pagina-listado__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .pagina-listado__grid { grid-template-columns: 1fr 1fr; }
}

/* La imagen se define por página con un modificador; este es el aspecto por
   defecto mientras no exista el archivo. */
.pagina-listado__media {
    min-height: 320px;
    border-radius: 0.5rem;
    background-color: var(--turquoise-10);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pagina-listado__title {
    color: var(--blue-100);
    font-size: 1.6rem;
    line-height: 1.3;
    margin-bottom: 1.25rem;
}

.pagina-listado__body p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--black-70);
    margin-bottom: 1.5rem;
}

.pagina-list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

.pagina-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--black-70);
}

.pagina-list__icon {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 1.15rem !important;
    color: var(--turquoise-100);
}

/* --------------------------------------------------------------------------
   CTA FINAL
   -------------------------------------------------------------------------- */
.pagina-cta {
    padding-bottom: 5rem;
}

/* ==========================================================================
   BIBLIOTECA DIGITAL — SECCIONES ESPECÍFICAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.biblioteca-digital-hero {
    background-color: var(--beige-10);
    background-image: url("../images/experiencia-endor/experiencia-endor_biblioteca-digital--hero.webp");
    background-position: center right;
}

.biblioteca-digital-hero__media {
    background: linear-gradient(
        to right,
        var(--beige-10) 0%,
        color-mix(in srgb, var(--beige-10) 92%, transparent) 30%,
        color-mix(in srgb, var(--beige-10) 60%, transparent) 55%,
        color-mix(in srgb, var(--beige-10) 15%, transparent) 75%,
        transparent 100%
    );
}

@media (max-width: 767px) {
    .biblioteca-digital-hero__media {
        background: linear-gradient(
            to bottom,
            var(--beige-10) 0%,
            color-mix(in srgb, var(--beige-10) 90%, transparent) 25%,
            color-mix(in srgb, var(--beige-10) 55%, transparent) 100%,
            color-mix(in srgb, var(--beige-10) 15%, transparent) 101%,
            transparent 100%
        );
    }
}

.biblioteca-digital-hero__content {
    max-width: 34rem;
    padding: 3rem 0 4rem;
}

.biblioteca-digital-hero__eyebrow {
    font-family: "DMSans-Bold", sans-serif;
    letter-spacing: 0.03em;
}

.biblioteca-digital-hero__text {
    max-width: 30rem;
}

/* --------------------------------------------------------------------------
   CABECERA DE SECCIÓN (icono + título + texto)
   -------------------------------------------------------------------------- */

.biblioteca-digital-section-head__icon {
    font-size: 2rem !important;
}

.biblioteca-digital-section-head__text {
    margin-top: 0.35rem;
}

/* --------------------------------------------------------------------------
   RECURSOS PÚBLICOS — grid de enlaces
   -------------------------------------------------------------------------- */
.biblioteca-digital-publicos {
    padding: 3rem 0 1rem;
}

.biblioteca-digital-links-grid {
    border: 1px solid var(--turquoise-10);
}

.biblioteca-digital-link-item {
    text-decoration: none;
    border-bottom: 1px solid var(--turquoise-10);
    border-right: 1px solid var(--turquoise-10);
    transition: background-color 0.2s ease;
}

.biblioteca-digital-link-item:last-child {
    border-bottom: none;
}

@media (max-width: 639px) {
    .biblioteca-digital-link-item {
        border-right: none;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .biblioteca-digital-link-item:nth-child(2n) {
        border-right: none;
    }
}

@media (min-width: 1024px) {
    .biblioteca-digital-link-item:nth-child(4n) {
        border-right: none;
    }
    .biblioteca-digital-link-item:nth-last-child(-n+4) {
        border-bottom: none;
    }
}

.biblioteca-digital-link-item__title {
    gap: 0.35rem;
    font-family: "DMSans-Bold", sans-serif;
}

.biblioteca-digital-link-item__title .material-symbols-outlined {
    font-size: 1rem !important;
    color: var(--turquoise-100);
}

.biblioteca-digital-link-item__text {
    margin-top: 0.35rem;
}

/* --------------------------------------------------------------------------
   BASES DE DATOS Y RECURSOS SUSCRITOS
   -------------------------------------------------------------------------- */

/* Ayuda */
.biblioteca-digital-ayuda {
    padding: 1.75rem;
}

.biblioteca-digital-ayuda__icon {
    font-size: 1.75rem !important;
}

.biblioteca-digital-ayuda__text {
    max-width: 34rem;
}

.biblioteca-digital-ayuda__email {
    margin-top: 0.35rem;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   CTA FINAL — banda oscura con puntos + iconos + logos
   -------------------------------------------------------------------------- */

.biblioteca-digital-cta-final {
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 18px 18px;
    padding: 2.5rem 0;
}

.biblioteca-digital-cta-final__title {
    max-width: 14rem;
}

.biblioteca-digital-cta-final__rule {
    width: 2.5rem;
    height: 3px;
    border-radius: 2px;
    background-color: var(--turquoise-100);
}

.biblioteca-digital-cta-final__items {
    gap: 1.5rem 2rem;
}

.biblioteca-digital-cta-final__item {
    gap: 0.6rem;
    padding-right: 1.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.biblioteca-digital-cta-final__item:last-child {
    border-right: none;
    padding-right: 0;
}

.biblioteca-digital-cta-final__item .material-symbols-outlined {
    font-size: 1.5rem !important;
    color: var(--turquoise-100);
}

.biblioteca-digital-cta-final__logo {
    width: 8rem;
    height: 5rem;
    background-image: url("../images/logo/Logo_Endor_Digitalent.webp");
    background-size: contain;
}

/* ==========================================================================
   RECURSOS LINGÜÍSTICOS — SECCIONES ESPECÍFICAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.recursos-linguisticos-hero {
    background-color: var(--beige-10);
    background-image: url("../images/experiencia-endor/experiencia-endor_recursos-linguistico--hero.webp");
    background-position: center right;
}

.recursos-linguisticos-hero__media {
    background: linear-gradient(
        to right,
        var(--beige-10) 0%,
        color-mix(in srgb, var(--beige-10) 92%, transparent) 30%,
        color-mix(in srgb, var(--beige-10) 60%, transparent) 55%,
        color-mix(in srgb, var(--beige-10) 15%, transparent) 75%,
        transparent 100%
    );
}

@media (max-width: 767px) {
    .recursos-linguisticos-hero__media {
        background: linear-gradient(
            to bottom,
            var(--beige-10) 0%,
            color-mix(in srgb, var(--beige-10) 90%, transparent) 25%,
            color-mix(in srgb, var(--beige-10) 55%, transparent) 71%,
            color-mix(in srgb, var(--beige-10) 15%, transparent) 101%,
            transparent 100%
        );
    }
}

.recursos-linguisticos-hero__content {
    max-width: 34rem;
    padding: 3rem 0 4rem;
}

.recursos-linguisticos-hero__eyebrow {
    font-family: "DMSans-Bold", sans-serif;
    letter-spacing: 0.03em;
}

.recursos-linguisticos-hero__text {
    max-width: 30rem;
}

/* --------------------------------------------------------------------------
   NUESTROS RECURSOS Y SERVICIOS
   -------------------------------------------------------------------------- */

.recursos-linguisticos-section-head {
    max-width: 40rem;
    margin-bottom: 2rem;
}

.recursos-linguisticos-card {
    padding: 1.75rem;
    border: 1px solid var(--turquoise-10);
    transition: transform 0.2s ease;
    justify-content: space-around;
}

.recursos-linguisticos-card:hover {
    transform: translateY(-4px);
}

.recursos-linguisticos-card__icon {
    font-size: 2rem !important;
}

.recursos-linguisticos-card__note {
    font-family: "DMSans-Bold", sans-serif;
}

.recursos-linguisticos-card__links {
    margin: 1.25rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--turquoise-10);
    gap: 0.6rem;
}

.recursos-linguisticos-card__links a {
    gap: 0.35rem;
    font-family: "DMSans-Bold", sans-serif;
    text-decoration: none;
    transition: color 0.2s ease;
}

.recursos-linguisticos-card__links a .material-symbols-outlined {
    font-size: 1rem !important;
}

.recursos-linguisticos-card__soon {
    margin-top: 1.25rem;
    padding: 0.4rem 0.85rem;
    font-family: "DMSans-Bold", sans-serif;
    letter-spacing: 0.03em;
    color: var(--turquoise-90);
    width: fit-content;
}

.recursos-linguisticos-card__media {
    margin-top: 1.5rem;
    min-height: 140px;
    border-radius: 0.4rem;
}

.recursos-linguisticos-card-img--recursos {
    background-image: url("../images/experiencia-endor/recurso-linguitico.webp");
}
.recursos-linguisticos-card-img--cursos {
    background-image: url("../images/experiencia-endor/curso-idiomas.webp");
}
.recursos-linguisticos-card-img--conversacion {
    background-image: url("../images/experiencia-endor/grupo-conversacion.webp");
}

/* --------------------------------------------------------------------------
   BENEFICIOS
   -------------------------------------------------------------------------- */
.recursos-linguisticos-beneficios-wrap {
    padding-bottom: 3rem;
}

.recursos-linguisticos-beneficios {
    padding: 1.75rem;
}

.recursos-linguisticos-beneficio {
    padding-right: 1.5rem;
}

@media (min-width: 640px) {
    .recursos-linguisticos-beneficio:nth-child(2n) { border-right: none; }
}

@media (min-width: 1024px) {
    .recursos-linguisticos-beneficio { border-right: 1px solid var(--turquoise-30); }
    .recursos-linguisticos-beneficio:last-child { border-right: none; padding-right: 0; }
}

.recursos-linguisticos-beneficio__icon {
    font-size: 1.75rem !important;
}

.recursos-linguisticos-beneficio__text {
    color: var(--blue-90);
}

/* --------------------------------------------------------------------------
   BANNER — "Los idiomas te acercan..." (foto montaña + velo azul)
   -------------------------------------------------------------------------- */
.recursos-linguisticos-banner {
    padding-bottom: 4rem;
}

.recursos-linguisticos-banner__inner {
    min-height: 180px;
    padding: 2rem 2.5rem;
    background-image: url("../images/university/montain-img.webp");
}

.recursos-linguisticos-banner__text {
    max-width: 22rem;
    font-family: "DMSans-Bold", sans-serif;
}

.recursos-linguisticos-banner__rule {
    width: 2.5rem;
    height: 3px;
    border-radius: 2px;
    background-color: white;
}

/* --------------------------------------------------------------------------
   VISTA PROVISIONAL — Recursos lingüísticos: Catalán / Inglés
   Temporal: maquetado aquí hasta que exista su propia plantilla.
   -------------------------------------------------------------------------- */
.recursos-linguisticos-subvista {
    padding: 3rem 0 4rem;
    border-top: 1px dashed var(--turquoise-30);
}

.recursos-linguisticos-subvista__tab {
    font-family: "DMSans-Bold", sans-serif;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.recursos-linguisticos-subvista__grid {
    gap: 1.25rem;
}

.recursos-linguisticos-subvista__group {
    border: 1px solid var(--turquoise-10);
}

.recursos-linguisticos-subvista__group-head {
    gap: 0.6rem;
}

.recursos-linguisticos-subvista__group-icon {
    font-size: 1.4rem !important;
}

.recursos-linguisticos-subvista__links {
    gap: 0.6rem;
}

.recursos-linguisticos-subvista__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--turquoise-100);
    text-decoration: none;
}

.recursos-linguisticos-subvista__links a:hover {
    text-decoration: underline;
}

.recursos-linguisticos-subvista__tab .material-symbols-outlined,
.recursos-linguisticos-subvista__links a .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 1rem !important;
}

/* ==========================================================================
   EMPLEO Y DESARROLLO PROFESIONAL — SECCIONES ESPECÍFICAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.empleo-desarrollo-profesional-hero {
    background-color: var(--beige-10);
    background-image: url("../images/experiencia-endor/experiencia-endor_empleoydesarrollo--hero.webp");
    background-position: center right;
}

.empleo-desarrollo-profesional-hero__media {
    background: linear-gradient(
        to right,
        var(--beige-10) 0%,
        color-mix(in srgb, var(--beige-10) 92%, transparent) 30%,
        color-mix(in srgb, var(--beige-10) 60%, transparent) 55%,
        color-mix(in srgb, var(--beige-10) 15%, transparent) 75%,
        transparent 100%
    );
}

@media (max-width: 767px) {
    .empleo-desarrollo-profesional-hero__media {
        background: linear-gradient(
            to bottom,
            var(--beige-10) 0%,
            color-mix(in srgb, var(--beige-10) 90%, transparent) 25%,
            color-mix(in srgb, var(--beige-10) 55%, transparent) 71%,
            color-mix(in srgb, var(--beige-10) 15%, transparent) 101%,
            transparent 100%
        );
    }
}

.empleo-desarrollo-profesional-hero__content {
    max-width: 34rem;
    padding: 3rem 0 4rem;
}

.empleo-desarrollo-profesional-hero__eyebrow {
    font-family: "DMSans-Bold", sans-serif;
    letter-spacing: 0.03em;
}

.empleo-desarrollo-profesional-hero__text {
    max-width: 30rem;
}

/* --------------------------------------------------------------------------
   TARJETAS
   -------------------------------------------------------------------------- */
.empleo-desarrollo-profesional-servicios {
    padding: 3rem 0 4rem;
}

.empleo-desarrollo-profesional-card {
    border: 1px solid var(--turquoise-10);
    transition: transform 0.2s ease;
}

.empleo-desarrollo-profesional-card:hover {
    transform: translateY(-4px);
}

.empleo-desarrollo-profesional-card__media {
    min-height: 180px;
}

.empleo-desarrollo-profesional-card__icon {
    font-size: 1.75rem !important;
}

.empleo-desarrollo-profesional-card-img--orientacion {
    background-image: url("../images/experiencia-endor/1-tu-futuro-empieza-aqui.webp");
}
.empleo-desarrollo-profesional-card-img--bolsa {
    background-image: url("../images/experiencia-endor/2-oportunidades.webp");
}
.empleo-desarrollo-profesional-card-img--emprendimiento {
    background-image: url("../images/experiencia-endor/3-ideas-proyectos-personas-impacto.webp");
}

/* ==========================================================================
   ACOMPAÑAMIENTO AL ESTUDIANTE — SECCIONES ESPECÍFICAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.acompanamiento-estudiante-hero {
    background-color: var(--beige-10);
    background-image: url("../images/experiencia-endor/experiencia-endor_acompanamiento--hero.webp");
    background-position: center right;
}

.acompanamiento-estudiante-hero__media {
    background: linear-gradient(
        to right,
        var(--beige-10) 0%,
        color-mix(in srgb, var(--beige-10) 92%, transparent) 30%,
        color-mix(in srgb, var(--beige-10) 60%, transparent) 55%,
        color-mix(in srgb, var(--beige-10) 15%, transparent) 75%,
        transparent 100%
    );
}

@media (max-width: 767px) {
    .acompanamiento-estudiante-hero__media {
        background: linear-gradient(
            to bottom,
            var(--beige-10) 0%,
            color-mix(in srgb, var(--beige-10) 90%, transparent) 25%,
            color-mix(in srgb, var(--beige-10) 55%, transparent) 71%,
            color-mix(in srgb, var(--beige-10) 15%, transparent) 101%,
            transparent 100%
        );
    }
}

.acompanamiento-estudiante-hero__content {
    max-width: 34rem;
    padding: 3rem 0 4rem;
}

.acompanamiento-estudiante-hero__eyebrow {
    font-family: "DMSans-Bold", sans-serif;
    letter-spacing: 0.03em;
}

.acompanamiento-estudiante-hero__text {
    max-width: 30rem;
}

/* --------------------------------------------------------------------------
   INTRODUCCIÓN
   -------------------------------------------------------------------------- */

.acompanamiento-estudiante-intro__body {
  gap: 10px;
}

/* --------------------------------------------------------------------------
   BANNER — "Personas que llegan lejos" (foto montaña)
   -------------------------------------------------------------------------- */
.acompanamiento-estudiante-banner {
    padding-bottom: 4rem;
}

.acompanamiento-estudiante-banner__inner {
    min-height: 220px;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    background-image: url("../images/university/montain-img.webp");
}

.acompanamiento-estudiante-banner__rule {
    width: 2.5rem;
    height: 3px;
    border-radius: 2px;
    background-color: var(--turquoise-100);
}

.acompanamiento-estudiante-banner__title {
    font-family: "DMSans-Bold", sans-serif;
}

/* ==========================================================================
   COMUNIDAD ENDOR UNIVERSITY — SECCIONES ESPECÍFICAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.comunidad-hero {
    background-color: var(--beige-10);
    background-image: url("../images/experiencia-endor/experiencia-endor_comunidad--hero.webp");
    background-position: center right;
}

.comunidad-hero__media {
    background: linear-gradient(
        to right,
        var(--beige-10) 0%,
        color-mix(in srgb, var(--beige-10) 92%, transparent) 30%,
        color-mix(in srgb, var(--beige-10) 60%, transparent) 55%,
        color-mix(in srgb, var(--beige-10) 15%, transparent) 75%,
        transparent 100%
    );
}

@media (max-width: 767px) {
    .comunidad-hero__media {
        background: linear-gradient(
            to bottom,
            var(--beige-10) 0%,
            color-mix(in srgb, var(--beige-10) 90%, transparent) 25%,
            color-mix(in srgb, var(--beige-10) 55%, transparent) 71%,
            color-mix(in srgb, var(--beige-10) 15%, transparent) 101%,
            transparent 100%
        );
    }
}

.comunidad-hero__content {
    max-width: 34rem;
    padding: 3rem 0 4rem;
}

.comunidad-hero__eyebrow {
    font-family: "DMSans-Bold", sans-serif;
    letter-spacing: 0.03em;
}

.comunidad-hero__text {
    max-width: 30rem;
}

/* --------------------------------------------------------------------------
   TARJETAS
   -------------------------------------------------------------------------- */
.comunidad-servicios {
    padding: 3rem 0 4rem;
}

.comunidad-card {
    border: 1px solid var(--turquoise-10);
    transition: transform 0.2s ease;
}

.comunidad-card:hover {
    transform: translateY(-4px);
}

.comunidad-card__media {
    min-height: 180px;
}

.comunidad-card__head {
    gap: 0.6rem;
}

.comunidad-card__icon {
    font-size: 1.5rem !important;
}

.comunidad-card__link {
    gap: 0.35rem;
    font-family: "DMSans-Bold", sans-serif;
    text-decoration: none;
    transition: color 0.2s ease;
}

.comunidad-card-img--alumni {
    background-image: url("../images/experiencia-endor/alumni.webp");
}
.comunidad-card-img--eventos {
    background-image: url("../images/experiencia-endor/actualidad-eventos.webp");
}
.comunidad-card-img--participacion {
    background-image: url("../images/experiencia-endor/participacion-universitaria.webp");
}

/* --------------------------------------------------------------------------
   BANNER — "Más que una universidad, una comunidad."
   -------------------------------------------------------------------------- */
.comunidad-banner {
    padding-bottom: 4rem;
}

.comunidad-banner__inner {
    padding: 1.75rem 2rem;
    background-image:
        linear-gradient(to right, var(--turquoise-10) 0%, color-mix(in srgb, var(--turquoise-10) 85%, transparent) 35%, color-mix(in srgb, var(--turquoise-10) 30%, transparent) 65%, transparent 100%),
        url("../images/university/montain-img.webp");
}

.comunidad-banner__intro {
    padding-left: 1.25rem;
    border-left: 3px solid var(--turquoise-100);
}

.comunidad-banner__title {
    font-family: "DMSans-Bold", sans-serif;
    max-width: 16rem;
}

.comunidad-banner__tagline {
    min-width: 0;
}

.comunidad-banner__rule {
    width: 2rem;
    height: 2px;
    border-radius: 2px;
    background-color: var(--blue-100);
    margin-bottom: 0.6rem;
}