@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

:root {
    --upaep-ff-josefin-sans: "Josefin Sans", sans-serif;
    --upaep-ff-fjalla-onr: "Fjalla One", sans-serif;
}

* {
    font-family: var(--upaep-ff-fira-sans-extracondensed);
}

header {
    --header-float: auto;
}

.upaep__title {
    text-transform: uppercase;
    font-family: var(--upaep-ff-josefin-sans);
    font-style: normal;
    line-height: normal;
    --upaep-title-color: #4D4D4D;
    --upaep-title-fw: var(--upaep-fw-bold);

    span {
        color: var(--upaep-color-red);
        font-family: var(--upaep-ff-josefin-sans);
    }
}

.upaep__navbar {
    --upaep-navbar-item-color: var(--upaep-color-dark-grey);
    --upaep-navbar-item-hover-color: var(--upaep-color-red);
    --upaep-navbar-item-fw: var(--upaep-fw-bold);
    --upaep-navbar-item-hover-fw: var(--upaep-fw-bold);

    .upaep__dropdown-item,
    .upaep__dropdown-item a {
        color: var(--upaep-color-dark-grey);

        &:hover {
            color: var(--upaep-color-dark-grey);
        }
    }

    .upaep__dropdown-item a {
        padding: .35rem .5rem;
    }

    .upaep__img {
        --upaep-img-width: 150px;
        --upaep-img-height: 45px;
    }

    .upaep__dropdown {
        --upaep-dropdown-item-padding: 0;
        --upaep-dropdown-btn-mark-color: var(--upaep-color-red);
        --upaep-dropdown-btn-mark-size: .4em;
        --upaep-dropdown-item-color: var(--upaep-color-dark-grey);
        --upaep-dropdown-item-fw: var(--upaep-fw-bold);
        --upaep-dropdown-item-hover-color: var(--upaep-color-dark-grey);
        --upaep-dropdown-item-hover-fw: var(--upaep-fw-bold);
        --upaep-dropdown-item-active-color: var(--upaep-color-dark-grey);
        --upaep-dropdown-item-active-fw: var(--upaep-fw-bold);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Menú principal — tamaños por ancho

   El uikit fija los enlaces en 20px bold y pone el padding DOS veces (en el
   `<li>` y en el `<a>`). Sin `nowrap`, cuando falta espacio el flex encoge
   los items hasta su palabra más larga y «TRANSFERENCIA DEL CONOCIMIENTO»
   se parte en tres renglones. Aquí el texto escala con el ancho y el padding
   queda solo en el enlace.
   ═══════════════════════════════════════════════════════════════════════════ */
.upaep__navbar.__menu.__submarca {
    /* 20px en ≥1500px, ~18px en 1440px, ~15px en 1024px. */
    --menu-fz: clamp(.9375rem, .35rem + .95vw, 1.25rem);
    --upaep-navbar-item-fz: var(--menu-fz);
    --upaep-navbar-item-hover-fz: var(--menu-fz);
    --upaep-navbar-item-active-fz: var(--menu-fz);
    --upaep-navbar-item-padding: .5rem clamp(.35rem, .8vw, .75rem);
    /* El `<img>` mide 150px; la caja del uikit, 120px. */
    --upaep-navbar-logo-width: 150px;

    .upaep__navbar-primary {
        gap: clamp(1rem, 2vw, 2rem);
    }

    .upaep__navbar-items {
        gap: 0;

        .upaep__navbar-item {
            padding: 0;
        }

        .upaep__navbar-link {
            white-space: nowrap;
        }
    }
}

/* Entre 981 y 1200px no caben los cinco en una línea ni con el texto chico:
   se deja que «TRANSFERENCIA DEL CONOCIMIENTO» baje a dos renglones parejos. */
@media (981px <= width <= 1200px) {
    .upaep__navbar.__menu.__submarca {
        .upaep__navbar-link {
            white-space: normal;
            text-wrap: balance;
            line-height: 1.1;
            text-align: center;
        }

        .upaep__navbar-menu .upaep__btn {
            --upaep-btn-width: 105px;
        }
    }
}

/* El uikit colapsa `__menu` en ≤980px (panel absoluto, barra negra) pero el
   hamburguesa y la columna llegan hasta ≤924px. En medio el panel flotaba sin
   botón que lo abriera y salían dos «UPAEP». Se mantiene el escritorio. */
@media (925px <= width <= 980px) {
    .upaep__navbar.__menu.__submarca {
        .upaep__navbar-principal {
            display: none;
        }

        &:not(.__offcanvas) .upaep__navbar-primary .upaep__navbar-collapse {
            position: static;
            width: auto;
            translate: none;
        }

        .upaep__navbar-link {
            white-space: normal;
            text-wrap: balance;
            line-height: 1.1;
            text-align: center;
        }
    }
}

/* ── Móvil / tableta (≤924px) ── */
@media (width <= 924px) {
    .upaep__navbar.__menu.__submarca {
        --menu-fz: var(--upaep-fz18);
        --upaep-navbar-logo-width: 120px;
        --upaep-navbar-item-padding: .75rem 1.25rem;

        .upaep__img {
            --upaep-img-width: 120px;
            --upaep-img-height: 36px;
        }

        .upaep__navbar-primary {
            justify-content: space-between;
            padding: .5rem 0 .5rem 1rem;
        }

        /* El uikit lo cuelga a `top: 80px` fijo; con `100%` queda justo debajo
           del encabezado mida lo que mida. */
        &:not(.__offcanvas) .upaep__navbar-primary .upaep__navbar-collapse {
            inset: 100% auto auto 50%;
        }

        .upaep__navbar-collapse > .upaep__navbar-toggle {
            padding: 0 .75rem;
        }

        .upaep__navbar-items {
            padding: 0;

            .upaep__navbar-item {
                width: 100%;
                border-block-end: 1px solid #E6E6E6;

                &:last-child {
                    border-block-end: 0;
                }
            }

            .upaep__navbar-link {
                display: block;
                white-space: normal;
            }
        }

        .upaep__dropdown-item a {
            display: block;
            padding: .5rem 1.25rem .5rem 2rem;
            font-size: var(--upaep-fz16);
        }

        /* Submenús como acordeón dentro del panel: el uikit los calcula con
           `position:absolute` + `translate()` respecto al <body>, y dentro del
           panel móvil (que ya está posicionado) quedaban corridos o encimados
           sobre los siguientes elementos. En flujo normal empujan el contenido
           y respetan el ancho del panel. */
        .upaep__dropdown-menu {
            position: static !important;
            transform: none !important;
            inset: auto !important;
            width: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 0 0 .5rem !important;
            border: 0 !important;
            box-shadow: none !important;
            background: transparent !important;
        }

        /* Zona táctil cómoda (≈44px) y sin que el texto largo se corte. */
        .upaep__navbar-link,
        .upaep__dropdown-item a {
            min-height: 44px;
            display: flex;
            align-items: center;
        }
    }
}

.upaep__menuFlotante {
    .upaep__menu-bar {
        --upaep-menubar-position: fixed;
        --upaep-menubar-content-width: auto;
        --upaep-menubar-content-icon-width: 35px;
        --upaep-menubar-content-icon-height: 35px;

        &:not(.__horizontal) {
            --upaep-menubar-inset: 70px 10px auto auto;
            --upaep-menubar-maxwidth: 100px;
        }

        &.is-scrolling {
            animation: fadeOut .5s forwards;
        }
    }
}

.upaep__modal.__talleres {
    --upaep-modal-dialog-maxwidth: 90%;
    --upaep-modal-content-bg: #4D4D4D;
    --upaep-modal-close-color: var(--upaep-color-white);
    --upaep-modal-close-hover-color: var(--upaep-color-background);
    --upaep-modal-body-bg: transparent;
    --upaep-modal-body-color: var(--upaep-color-white);
    --upaep-modal-title-color: var(--upaep-color-white);

    .upaep__text {
        --upaep-text-fz: var(--upaep-fz18);

        &.__title {
            --upaep-text-fz: var(--upaep-fz18);
        }

        &.__taller {
            --upaep-text-fz: var(--upaep-fz34);
        }

        &.__subtitle {
            --upaep-text-fz: var(--upaep-fz24);
        }

        &.__horario {
            --upaep-text-fz: var(--upaep-fz16);
        }
    }

    .upaep__modal-content {
        border-left: 15px solid var(--upaep-color-red);
    }

    .upaep__accordion {
        .upaep__list {
            --upaep-list-padding: none;
            --upaep-list-item-color: var(--upaep-color-black);
            --upaep-list-item-padding: .25rem .5rem;
            color: var(--upaep-color-black);
            list-style-type: decimal;
        }

    }

    .upaep__card.__mayoresInformes {
        --upaep-card-maxwidth: 400px;
        --upaep-card-width: 100%;
        --upaep-card-height: 400px;
        --upaep-card-margin: 1rem auto;
        --upaep-card-padding: 0;
        --upaep-card-border-radius: 10px;
        --upaep-card-content-border-radius: 0 0 10px 10px;
        --upaep-card-content-width: 100%;
        --upaep-card-content-height: 40%;
        --upaep-card-content-padding: 1rem;
        --upaep-card-content-bg: #E0BA7A;
        --upaep-card-img-content-width: 100%;
        --upaep-card-img-content-height: 100%;
        --upaep-card-img-content-border-radius: 10px;
        --upaep-card-img-border-radius: 10px 10px 0 0;
        --upaep-card-img-objectfit: cover;
        --upaep-card-title-color: var(--upaep-color-black);
        --upaep-card-title-fz: var(--upaep-fz28);
        --upaep-card-title-align: start;
        --upaep-card-text-fz: var(--upaep-fz18);
        --upaep-card-text-color: var(--upaep-color-black);
        --upaep-card-text-align: start;
        --upaep-card-bg: var(--upaep-color-white);
        --upaep-card-boxshadow: 0px 0px 8px #0000007D;

        .upaep__card-content {
            flex-direction: column;
        }

    }
}


.upaep__marcadores {
    --upaep-section-minheight: 100px;

    .upaep__dropdown {
        --upaep-dropdown-btn-mark-color: var(--upaep-color-red);
        --upaep-dropdown-btn-mark-size: .4em;
        --upaep-dropdown-item-color: var(--upaep-color-dark-grey);
        --upaep-dropdown-item-fw: var(--upaep-fw-bold);
        --upaep-dropdown-item-hover-color: var(--upaep-color-dark-grey);
        --upaep-dropdown-item-hover-fw: var(--upaep-fw-bold);
        --upaep-dropdown-item-active-color: var(--upaep-color-dark-grey);
        --upaep-dropdown-item-active-fw: var(--upaep-fw-bold);
    }

    .upaep__content {
        --upaep-content-padding: 0rem;
    }

    .swiperMarcadores {
        padding: 0 .5rem;
    }

    .upaep__card.__marcadores {
        --upaep-card-width: 100%;
        --upaep-card-height: auto;
        --upaep-card-margin: .5rem 0;
        --upaep-card-bg: var(--upaep-color-white);
        --upaep-card-border-size: 1px;
        --upaep-card-border-color: #D6D6D6;
        --upaep-card-border-radius: 8px;
        --upaep-card-content-width: 100%;
        --upaep-card-content-height: auto;
        --upaep-card-content-padding: .5rem;
        --upaep-card-footer-height: 30%;
        --upaep-card-title-fz: var(--upaep-fz12);
        --upaep-card-title-align: start;
        --upaep-card-title-margin: 0 0 1rem 0;
        --upaep-card-text-fz: var(--upaep-fz14);
        --upaep-card-text-fw: var(--upaep-fw-bold);
        --upaep-card-footer-bg: var(--upaep-color-background);
        --upaep-card-footer-padding: .25rem .5rem;

        &.__momento {
            cursor: pointer;
        }

        .upaep__card-content {
            flex-direction: column;
        }

        .upaep__card-footer {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 5px;
            border-radius: 0 0 8px 8px;
        }

        .upaep__card-text {
            &.__marcador {
                --upaep-card-text-fw: var(--upaep-fw-bold);
                --upaep-card-text-fz: var(--upaep-fz18);
            }

            &.__description {
                --upaep-card-text-fw: var(--upaep-fw-bold);
                --upaep-card-text-fz: var(--upaep-fz15);
            }

            &.__deporte {
                --upaep-card-text-fw: var(--upaep-fw-normal);
                --upaep-card-text-fz: var(--upaep-fz12);
            }

            &.__fecha {
                --upaep-card-text-fw: var(--upaep-fw-bold);
                --upaep-card-text-fz: var(--upaep-fz12);
            }
        }

        .__vs {
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            gap: 10px;
            font-family: "Fjalla One";
            font-size: var(--upaep-fz16);
            font-weight: var(--upaep-fw-bold);
            color: var(--upaep-color-dark-grey);

            >span {
                text-align: center;
            }

            .__equipo {
                width: 45%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                gap: 5px;

                span {
                    color: #7C7C7C;
                    font-family: var(--upaep-ff-roboto-condensed);
                    font-size: var(--upaep-fz12);
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    text-transform: uppercase;

                    &.__score {
                        font-size: var(--upaep-fz18);
                        font-weight: var(--upaep-fw-bold);
                    }
                }

                img {
                    width: 20px;
                    height: 20px;
                }
            }

        }

        .upaep__card-overlay {
            background: hsla(0, 100%, 50%, 0.8);
            animation: a_fadeIn .5s;

            .upaep__card-text {
                --upaep-card-text-color: var(--upaep-color-white);
            }

            .__live {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        &:not(:hover) {
            .upaep__card-overlay {
                display: none;
            }

            animation: a_fadeIn .5s;
        }

        &.in-live {
            --upaep-card-footer-bg: var(--upaep-color-red);

            .upaep__card-text {

                &.__marcador,
                &.__description,
                &.__deporte,
                &.__fecha,
                &.__hour {
                    --upaep-card-text-color: var(--upaep-color-white);
                }
            }
        }

        &.is-skeleton {
            .upaep__skeleton {
                --upaep-skeleton-margin: 0;

                &.__icon {
                    --upaep-skeleton-width: 20px;
                    --upaep-skeleton-height: 20px;
                }
            }
        }
    }

    .swiper-button-next.__marcadores,
    .swiper-button-prev.__marcadores {
        --swiper-navigation-size: 30px;
        --swiper-navigation-color: var(--upaep-color-red);
        --swiper-navigation-sides-offset: 50%;
        background: var(--upaep-color-white);
        border-radius: 50%;

        &::after {
            font-family: var(--upaep-ff-fontawesome);
        }
    }

    .swiper-button-next.__marcadores {
        &::after {
            content: '\f138';
        }
    }

    .swiper-button-prev.__marcadores {
        &::after {
            content: '\f137';
        }
    }

    .infinite {
        --timing: 10s;
        width: 100%;
        max-width: 800px;
        gap: 5px;
        overflow: hidden;
        /* mask: linear-gradient(90deg, transparent, var(--upaep-color-black) 20%, var(--upaep-color-black) 80%, transparent); */

        &:has(.infinite-item.ultimo-momento) {
            --timing: 15s;
        }

        .infinite-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: nowrap;
            flex-direction: row;
            animation: scroller-infinite var(--timing) linear infinite;

            &:hover {
                animation-play-state: paused;
            }
        }

        .infinite-item {
            width: 100%;
            min-width: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;

            &.ultimo-momento {
                min-width: 300px;
            }
        }
    }
}

@keyframes scroller-infinite {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translate(calc(-100% - 10px));
    }
}

.swiper {

    --swiper-navigation-size: 50px;
    --swiper-navigation-top-offset: 50%;
    --swiper-navigation-sides-offset: 10px;
    --swiper-navigation-color: var(--upaep-color-red);

    .swiper-button-next,
    .swiper-button-prev {
        background: var(--upaep-color-white);
        border-radius: 50%;

        &::after {
            font-family: var(--upaep-ff-fontawesome);
        }
    }


    .swiper-button-next {
        &::after {
            content: '\f138';
        }
    }

    .swiper-button-prev {
        &::after {
            content: '\f137';
        }
    }
}


.upaep__selectpicker {
    &:has(.upaep__select.__red) {
        --upaep-selectpicker-width: 300px;
        --upaep-selectpicker-margin: 0;
        --upaep-selectpicker-content-border-color: var(--upaep-color-border-grey);
        --upaep-selectpicker-content-bg: var(--upaep-color-white);
        --upaep-selectpicker-list-item-color: var(--upaep-color-black);
        --upaep-selectpicker-header-fz: var(--upaep-fz14);
        --upaep-selectpicker-header-fw: var(--upaep-fw-bold);
        --upaep-selectpicker-header-color: var(--upaep-color-black);

        .upaep__selectpicker-btn .upaep__btn {
            --upaep-btn-border-color: var(--upaep-color-border-grey);
            --upaep-btn-bg: var(--upaep-color-primary);
            --upaep-btn-color: var(--upaep-color-white);
            --upaep-btn-cont-color: var(--upaep-color-white);
            --upaep-btn-hover-bg: var(--upaep-color-primary-hover);
            --upaep-btn-hover-border-color: var(--upaep-color-dark-grey);
            --upaep-btn-hover-color: var(--upaep-color-white);
        }
    }
}

.upaep__enterate {
    --upaep-section-margin: 6rem 0 0 0;

    .upaep__content {
        --upaep-content-height: 500px;
        --upaep-content-padding: 0 2rem 2rem 2rem;

        .swiperEnterate {
            --swiper-pagination-color: var(--upaep-color-red);
            --swiper-pagination-bullet-size: 8px;
            --swiper-pagination-bullet-width: 15px;
            --swiper-pagination-bullet-height: 15px;
            --swiper-pagination-bullet-inactive-color: var(--upaep-color-light-grey);
            --swiper-pagination-bullet-inactive-opacity: 1;
            --swiper-pagination-bullet-opacity: 1;
            --swiper-pagination-bullet-horizontal-gap: 4px;
            --swiper-pagination-bullet-vertical-gap: 6px;
        }

        .swiperEnterate .swiper-slide {
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: start;
        }

        .swiperEnterate .upaep__card.__news {
            --upaep-card-height: auto;
            --upaep-card-boxshadow: none;
        }
    }

    &:has(.upaep__content.__d-none) {
        display: none;
    }
}

.upaep__vuela {
    --upaep-section-margin: 6rem 0 0 0;
    --upaep-section-bg: var(--upaep-color-black);

    .upaep__content {
        --upaep-content-padding: 0 3rem;
        display: flex;

        .upaep__left {
            --upaep-left-width: 48%;
            --upaep-left-padding: 0 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .upaep__right {
            --upaep-right-width: 48%;
            --upaep-right-padding: 0 2rem;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .upaep__title {
        --upaep-title-color: var(--upaep-color-white);
        --upaep-title-align: start;
    }

    .upaep__subtitle {
        --upaep-subtitle-color: var(--upaep-color-white);
        --upaep-subtitle-fz: var(--upaep-fz18);
        --upaep-subtitle-align: start;
        font-family: var(--upaep-ff-fira-sans);
    }

    .upaep__text {
        --upaep-text-color: var(--upaep-color-white);
        --upaep-text-fz: var(--upaep-fz20);
        font-family: var(--upaep-ff-fira-sans);

        span {
            font-size: var(--upaep-fz28);
            color: var(--upaep-color-red);
        }
    }

    .upaep__list {
        --upaep-list-item-color: var(--upaep-color-white);
        --upaep-list-item-padding: 0 .5rem;
    }
}

.video-live {
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    position: fixed;
    inset: auto 10px 10px auto;
    z-index: 1100;

    iframe {
        border-radius: 10px;
    }

    .upaep__btn {
        --upaep-btn-margin: 0;
        --upaep-btn-padding: .25rem;
        --upaep-btn-width: 30px;
        --upaep-btn-height: 30px;
        position: absolute;
        inset: -20px 0px auto auto;
        z-index: 1;
    }
}

.infinite-scrolling {
    --infinite-scrolling-direction: infinite-scroll-left;
    --infinite-scrolling-speed: 20s;
    overflow: hidden;

    &.__pause-hover:hover .infinite-scrolling-inner>div {
        animation-play-state: paused;
    }

    .infinite-scrolling-inner {
        display: flex;
        white-space: nowrap;

        >div {
            animation: var(--infinite-scrolling-direction) var(--infinite-scrolling-speed) linear infinite;
        }
    }

    .infinite-scrolling-wrapper {
        display: flex;
        gap: 2rem;
    }
}

@keyframes infinite-scroll-left {
    0% {
        transform: translateX(0%);
    }

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

@keyframes infinite-scroll-right {
    0% {
        transform: translateX(-100%);
    }

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

@media(width <=1400px) {
    .upaep__vuela {
        .upaep__content {
            --upaep-content-padding: 0;

            .upaep__left {
                --upaep-left-padding: 2rem;
            }

            .upaep__right {
                img {
                    object-fit: contain;
                }
            }
        }

        .upaep__title {
            --upaep-title-fz: var(--upaep-fz30);
        }
    }
}

@media(width <=980px) {
    .upaep__modal.__talleres {
        --upaep-modal-body-padding: 0;
    }

    .upaep__navbar {

        .upaep__dropdown {
            --upaep-dropdown-border-size: 0;
            --upaep-dropdown-item-padding: .25rem 0;
            --upaep-dropdown-margin: .5rem 0;
        }
    }
}


@media(width <=924px) {
    .upaep__enterate {
        --upaep-section-margin: 3rem 0;
    }

    .upaep__vuela {
        --upaep-section-margin: 3rem 0;

        .upaep__content {
            flex-direction: column;

            .upaep__title {
                --upaep-title-align: center;
            }

            .upaep__left {
                --upaep-left-width: 100%;
                --upaep-left-padding: 0;
            }

            .upaep__right {
                --upaep-right-width: 100%;
                --upaep-right-padding: 0;

                .upaep__btn {
                    --upaep-btn-margin: 1rem auto;
                }
            }
        }
    }

    .upaep__menuFlotante {
        .upaep__menu-bar {
            --upaep-menubar-content-padding: .5rem 1rem;

            .upaep__menu-bar-item {
                flex-direction: row;
            }
        }
    }
}

@media(width <=480px) {
    .upaep__enterate {
        .upaep__titles {
            padding: 0 1rem;
        }

        .upaep__content {
            --upaep-content-height: 450px;
            --upaep-content-padding: 0 1rem;
        }
    }

    .upaep__marcadores {
        .upaep__card.__marcadores {

            .__vs {

                .__equipo {
                    align-items: center;
                }

            }
        }
    }

    .upaep__vuela {
        .upaep__content {
            --upaep-content-padding: 2rem 1rem;
        }
    }

    .upaep__menu-bar.__horizontal {
        --upaep-menubar-content-item-scale: 1;
    }

    .video-live {
        inset: auto 50% 10px auto;
        translate: 50%;
    }
}