/* Responsive de la página principal */

@media (max-width: 1860px) {
    .rate-serlinklabs__rate-right {
        width: 35%;
    }
}

@media (max-width: 1800px) {
    .main-labs__ola {
        right: -12rem;
    }

    .features__python {
        width: 25rem;
    }
}

@media (max-width: 1660px) {
    .main-labs__ola {
        right: -19rem;
    }

    .container-labs__title {
        text-align: center;
        margin: 0 auto;
    }

    .container-labs__content {
        margin: 0 auto;
        text-align: center;
    }

    .main-labs__button-info {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .labs-tarifas__pregunta {
        font-size: 1.3rem;
    }

    .labs-tarifas__feature {
        font-size: 1.5rem;
    }

    .labs-tarifas__tarifa {
        height: 60rem;
    }

    .labs-tarifas__name {
        font-size: 1.7rem;
    }

    .labs-tarifas__precio {
        font-size: 5rem;
    }

    .labs-tarifas__resumen {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .labs-tarifas__price {
        align-items: flex-end;
    }
}

@media (max-width: 1580px) {
    .no-perms {
        right: 2rem;
    }

    .feature {
        font-size: 0.9rem;
    }

    .rate-serlinklabs__rate-right {
        width: 50%;
    }

    .campus-container__left-campus {
        flex-basis: 43%;
    }

    .right-campus__python,
    .right-campus__griefing,
    .right-campus__front-end {
        height: 28rem;
        width: 20rem;
    }

    /* Videos de los cursos */

    .lab {
        flex-direction: column;
    }

    .lab__right {
        flex-basis: 39rem;
        border-radius: 0;
    }

    .lab__right {
        width: 49rem;
    }

    .lab__video {
        width: 92%;
    }
}

@media (max-width: 1480px) {
    .labs-tarifas__precio {
        font-size: 4rem;
    }
}

@media (max-width: 1470px) {
    .main-labs__ola {
        right: -29rem;
    }

    .header-info__eslogan {
        font-size: 2.5rem;
    }
}

@media (max-width: 1430px) {
    .campus-container {
        flex-direction: column;
        padding-top: 11rem;
    }

    .imagen-circulo {
        display: none;
    }
}

@media (max-width: 1320px) {
    .main-labs__ola {
        right: -37rem;
    }

    .labs-tarifas__feature {
        font-size: 1.5rem;
    }

    .labs-tarifas__features {
        height: 45%;
    }

    .labs-tarifas__name {
        font-size: 1.4rem;
    }

    .labs-tarifas__pregunta {
        font-size: 1.2rem;
    }

    .labs-tarifas__tarifa {
        height: 56rem;
    }

    .labs-information__icon {
        width: 34rem;
    }

    .block-lab__lab-left {
        font-size: 3rem;
    }

    .lab-right__title {
        font-size: 1.7rem;
    }

    .lab-right__content {
        font-size: 1.5rem;
    }

    .labs-more-info__title {
        font-size: 2.4rem;
    }

    .left-info__header,
    .left-info__content {
        font-size: 1.7rem;
    }

    .header-labs__icon {
        margin-left: 5rem;
    }
}

@media (max-width: 1180px) {
    .main-labs__ola {
        right: -45rem;
    }

    .labs-tarifas__pregunta {
        font-size: 1.1rem;
    }

    .labs-tarifas__feature {
        font-size: 1.3rem;
    }

    .left-links__pocion {
        width: 24rem;
        margin-bottom: 4.5rem;
    }

    .rate-serlinklabs {
        flex-direction: column;
    }

    .rate-serlinklabs__rate-right {
        width: 61rem;
    }

    .features__python {
        width: 18rem;
        height: 18rem;
    }

    .features__content {
        font-size: 1.2rem;
    }

    .features__title {
        font-size: 1rem;
    }

    .features__content {
        font-size: 1rem !important;
    }

    .curso-image {
        font-size: 3rem;
    }

    .python__top,
    .python__bottom {
        height: auto;
    }

    .content-python__header {
        font-size: 2rem;
    }
}

@media (max-width: 1100px) {
    .labs-tarifas__content {
        flex-direction: column;
    }

    .labs-tarifas__tarifa {
        width: 43rem;
    }

    .header-info__top-info {
        display: none;
    }

    .header-info__eslogan {
        display: none;
    }
}

@media (max-width: 1010px) {
    .left-links__pocion {
        width: 17rem;
    }

    .company__item-title {
        font-size: 1.5rem;
    }

    .company__item {
        font-size: 1.3rem;
    }

    .footer-top__right-links-footer {
        padding-top: 9rem;
    }

    .footer-bottom__left,
    .footer-bottom-right {
        font-size: 1.3rem;
    }

    .right-link-footer__company {
        margin-left: -2rem;
    }
}

@media (max-width: 985px) {
    .block-info__left-info {
        order: 2;
        margin-top: 5rem;
    }

    .block-info__contact-labs {
        order: 1;
        justify-content: center;
        align-items: center;
    }

    .labs-more-info__block-info {
        flex-direction: column;
    }

    .labs-more-info__title {
        font-size: 2rem;
    }

    .labs-more-info__content {
        font-size: 1.6rem;
    }

    .header-labs__right {
        display: none;
    }

    .header-labs__left {
        margin: 0 auto;
    }

    .header-labs__icon {
        margin-left: 0;
    }

    .menu-responsive__icon {
        font-size: 3.5rem;
        color: var(--color-white);
    }

    .header-labs {
        position: relative;
    }

    .menu-responsive {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 8rem;
        height: 100%;
        margin-top: 1.4rem;
    }

    .menu-responsive__icon {
        cursor: pointer;
    }

    .menu-responsive__icon:hover {
        filter: saturate(2);
    }

    /* Estilos del login */
    .layout__login {
        flex-direction: column;
    }

    .login-right__login-block {
        padding: 15rem;
    }

    .login__login-left {
        display: none;
        order: 2;
    }

    .login__login-right {
        order: 1;
    }

    /* curso entregado */
    .checkout__title {
        font-size: 1.5rem;
    }

    .checkout__image {
        width: 25rem;
    }

    .checkout__curso {
        font-size: 2rem;
    }

    .checkout__aviso {
        font-size: 1.3rem;
    }
}

@media (max-width: 1060px) {

    .labs-footer__footer-top,
    .labs-footer__footer-bottom {
        flex-direction: column;
    }

    .footer-top__left-links-footer {
        justify-content: center;
    }

    .left-links__pocion {
        width: 22rem;
        margin-top: 4rem;
    }

    .footer-top__right-links-footer {
        flex-direction: column;
    }

    .footer-top__right-links-footer {
        align-items: center;
    }

    .company__item-title {
        text-align: center;
        font-size: 2.8rem;
    }

    .company__item {
        font-size: 1.6rem;
        width: 30rem;
    }

    .labs-footer__footer-bottom {
        margin-top: 4rem;
    }

    .company__url {
        text-align: center;
    }

    .content-item__contenido {
        font-size: 1.5rem;
    }

    .content-item__title {
        font-size: 1.7rem;
    }

    .bottom-info__icon {
        width: 6rem;
    }

    .labs-info__content-info {
        gap: 6rem;
    }

    .header-labs__left {
        flex-basis: 26rem;
    }

    .container-labs__title {
        font-size: 2.5rem;
    }

    .main-labs__right-movil,
    .main-labs__movil {
        height: 35rem;
        width: 21rem;
        z-index: 2;
    }

    .main-labs__video {
        z-index: -1;
    }

    .main-labs__ola {
        right: -69rem;
    }

    .labs-information {
        flex-direction: column;
    }

    .labs-information__icon {
        margin-top: 4rem;
        width: 23rem;
    }

    .right-lab__block-lab {
        justify-content: center;
    }

    .labs-information__right-lab {
        margin-top: 4rem;
    }

    .footer-top__right-links-footer,
    .footer-top__right-links-footer {
        padding-top: 0;
    }

    .python-serlinklabs__features {
        flex-wrap: wrap;
    }

    .features__python {
        flex-basis: 50%;
    }

    .features__title,
    .features__content {
        text-align: center;
    }

    .labs-formaciones__header {
        text-align: center;
    }
}

@media (max-width: 815px) {
    .left-campus__header {
        font-size: 7rem;
    }

    .right-campus__python,
    .right-campus__griefing,
    .right-campus__front-end {
        height: 25rem;
        width: 17rem;
    }

    .no-perms {
        right: 1.5rem;
        font-size: 2rem;
    }
}

@media (max-width: 755px) {
    .bottom-info__container-icon:nth-child(3) {
        display: none;
    }

    .content-info__content-item:nth-child(3) {
        display: none;
    }

    .content-info__content-item {
        margin-top: 4rem;
        flex-basis: 24%;
    }
}

@media (max-width: 700px) {
    .rate-right__title {
        font-size: 2.3rem;
    }

    .rate-right__subtitle {
        font-size: 1.3rem;
    }

    .rate-right__content {
        font-size: 1.2rem;
    }

    .rate-serlinklabs__rate-right {
        width: 54rem;
        margin-top: -5rem;
    }

    .content-python__header {
        text-align: center;
        font-size: 1.7rem;
    }

    .content-python__header {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .content-python__p {
        font-size: 1.5rem;
    }

    .content-python__features {
        font-size: 1.4rem;
    }

    .content-python__p {
        font-size: 1.4rem;
    }

    .campus-container__right-campus {
        flex-direction: column;
    }

    .left-campus__button {
        margin-bottom: 7rem;
    }

    .right-campus__python,
    .right-campus__griefing,
    .right-campus__front-end {
        height: 29rem;
        width: 21rem;
    }

    .campus-container {
        height: auto;
    }

    .no-perms {
        right: 3.78rem;
    }
}

@media (max-width: 600px) {
    .labs-tarifas__tarifa {
        width: 34rem;
    }

    .left-info__header,
    .left-info__content {
        font-size: 1.5rem;
    }

    .left-info__header {
        width: 80%;
        text-align: center;
    }

    .labs-more-info__content {
        width: 80%;
        margin: 0 auto;
    }

    .labs-tarifas {
        padding: 0;
    }

    .rate-serlinklabs__rate-right {
        width: 43rem;
    }

    .features-rates__features {
        gap: 0.6rem;
    }

    .features__python {
        flex-basis: 62%;
    }

    /* Estilos de la página de videos */

    .lab__right {
        width: 35rem;
    }

    /* Estilos para pago realizado */

    .checkout__title {
        font-size: 1.2rem;
        width: 80%;
        margin: 0 auto;
        text-align: center;
    }

    .checkout__aviso {
        width: 80%;
        text-align: center;
    }
}

@media (max-width: 650px) {
    .main-labs {
        flex-direction: column;
    }

    .main-labs__left {
        padding: 5rem 0;
    }

    .main-labs__right {
        padding: 5rem 0;
    }

    .bottom-info__container-icon:nth-child(2) {
        display: none;
    }

    .content-info__content-item:nth-child(2) {
        display: none;
    }

    .content-info__content-item {
        margin-top: 4rem;
        flex-basis: 39%;
    }

    .header-info__bottom-info {
        gap: 19rem;
    }

    .left-campus__header {
        font-size: 6rem;
    }
}

@media (max-width: 470px) {
    .rate-serlinklabs__rate-right {
        width: 37rem;
    }

    .container-login__user {
        width: 33rem;
    }

    .content-python__header-container {
        margin-top: 9rem !important;
    }

    .login-block__container-login {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .container-login__submit {
        cursor: pointer;
        margin-top: 2rem;
        width: 33rem;
    }

    /* Video de los cursos */
    .lab__right {
        width: 31rem;
    }
}

@media (max-width: 420px) {
    .labs-info__content-info {
        gap: 3rem !important;
    }

    .feature {
        font-size: 0.8rem;
    }
}

/* ====== FIX HEADER EN MÓVIL (sin tocar styles.css) ====== */
@media (max-width: 985px) {

    /* El header mantiene su alto (10rem de tu styles.css) y se queda arriba */
    .header-labs {
        position: sticky;
        top: 0;
        z-index: 9999;
        /* por encima del contenido */
    }

    /* El botón hamburguesa usa el alto del header y no empuja nada */
    .menu-responsive {
        position: absolute;
        inset: 0 auto 0 0;
        /* pegado a la izquierda dentro del header */
        width: 10rem;
        /* caja del botón acorde a tu header de 10rem alto */
        height: 100%;
        /* ocupa la altura del header */
        margin: 0 !important;
        /* elimina márgenes que estiran el header */
        display: flex;
        /* ya lo activabas en responsive; lo reforzamos aquí */
        align-items: center;
        justify-content: center;
        z-index: 2;
        /* por encima del logo, por debajo del overlay */
    }

    /* El icono deja de ser absolute (evita forzar el alto del header) */
    .menu-responsive__icon {
        position: static !important;
        font-size: 3.2rem;
        line-height: 1;
        cursor: pointer;
    }

    /* Menú lateral como overlay OFF-CANVAS:
     No cambia tus colores/anchos, solo lo saca del flujo y lo anima */
    .menu-slider {
        display: block !important;
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100dvh;
        /* panel ocupa solo su ancho, no toda la pantalla */
        width: 40rem;
        /* tu ancho original */
        transform: translateX(-100%);
        transition: transform .3s ease;
        z-index: 10000;
        /* sin background, sin pointer-events especiales */
    }

    /* Tu contenedor interior mantiene tu anchura original (40rem) */
    .menu-slider__container {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #fafafa;
        /* mantiene tu estilo */
        border-right: 1px solid #d4d4d4;
    }

    /* Estado abierto (se añade con JS) */
    .menu-slider.is-open {
        transform: translateX(0);
        pointer-events: auto;
    }

    /* Por si alguna caja intenta forzar altura del header */
    .header-labs>* {
        max-height: 10rem;
    }
}