/* =========================================
   MOBILE FIRST FIX
========================================= */

@media(max-width: 768px){

    /* GLOBAL */

    body{
        overflow-x: hidden;
    }

    .container{
        width: 92%;
        
    }

    section{
        padding: 70px 0 !important;
    }

    /* TOPBAR */

    .topbar{
        display: none;
    }

    /* NAVBAR */

    .navbar-brand img{
        height: 60px;
    }

    /* HERO */

    .hero{
    height: auto;

    min-height: 85vh;

    padding: 120px 0 80px;

    /* IMAGEN */

    
        background-image:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.55) 0%,
            rgba(0,0,0,0.45) 45%,
            rgba(0,0,0,0.65) 100%
        ),
        url('../img/banners/bannermovil.jpg');
    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}

    .hero-content{
        max-width: 100%;
        
    }

    .hero-content h1{
        color:#fff;
        font-size: 2.2rem;

        line-height: 1.15;
    }

    .hero-content p{
    font-size: 1.5rem;

    margin-top: 20px;

    color: #fff;

    line-height: 1.7;

    }


    .hero-buttons{
        flex-direction: column;

        gap: 15px;
    }

    .btn-hero-primary,
    .btn-hero-outline{
        width: 100%;

        text-align: center;

        padding: 15px 20px;
    }

    /* BENEFITS TOP */

    .benefits{
        margin-top: 0;

        padding: 0 0 70px;
    }

    .benefits-wrapper{
        border-radius: 25px;

        padding: 30px 22px;

        gap: 25px;
    }

    .benefit-item{
        gap: 15px;

        padding-bottom: 22px;
    }

    .benefit-icon i{
        font-size: 1.8rem;
    }

    .benefit-text h4{
        font-size: 1rem;

        margin-bottom: 6px;
    }

    .benefit-text p{
        font-size: 0.92rem;

        line-height: 1.6;
    }



    /* TITLES */

    .section-title h2,
    .benefits-header h2,
    .faq-header h2,
    .psico-content h2,
    .elearning-header h2,
    .cta-content h2{
        font-size: 2.1rem;

        line-height: 1.15;
    }

    /* VALUES */

    .value-card{
        padding: 30px 25px;

        flex-direction: column;

        gap: 25px;
    }

    /* COURSES */

    .courses-grid{
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .course-image{
        height: 220px;
    }

    .course-content{
        padding: 25px;
    }

    .course-content h3{
        font-size: 1.3rem;
    }

    /* CAPACITACION */

    .capacitacion-card{
        width: 100%;

        flex-direction: column;
    }

    .capacitacion-card .course-image,
    .capacitacion-card .course-content{
        width: 100%;
    }

    /* MODALS */

    .course-modal-grid,
    .otec-modal-grid{
        grid-template-columns: 1fr;
    }

    .course-modal-image{
        height: 260px;
    }

    .course-modal-content,
    .otec-modal-content{
        padding: 30px 22px;
    }

    .course-modal-content h2,
    .otec-modal-content h3{
        font-size: 2rem;
    }

    .course-modal-info{
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .course-modal-btn,
    .otec-btn{
        width: 100%;
    }

    /* ELEARNING */

    .elearning-wrapper{
        flex-direction: column;

        gap: 40px;
    }

    .elearning-image,
    .elearning-content{
        width: 100%;
    }

    .elearning-header{
        margin-bottom: 40px;
    }

    .elearning-header h2{
        font-size: 2.1rem;
    }

    .elearning-header p{
        font-size: 1rem;
    }

    .elearning-features{
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .feature-item{
        padding: 20px;
    }

    .elearning-btn{
        width: 100%;
    }

    .elearning-image::before{
        display: none;
    }

    /* PSICO */

    .psico-wrapper{
        flex-direction: column;

        gap: 40px;
    }

    .psico-content,
    .psico-video{
        width: 100%;
    }

    .psico-content h2{
        font-size: 2.1rem;
    }

    .psico-video video{
        height: 320px;
    }

    .play-button{
        width: 70px;
        height: 70px;
    }

    .play-button i{
        font-size: 1.4rem;
    }

    .psico-btn{
        width: 100%;
    }

    /* INSTRUCTORS */

    .instructors-grid{
        grid-template-columns: 1fr;

        gap: 25px;
    }

    /* BENEFITS */

    .benefits-grid{
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .benefit-card{
        padding: 30px 25px;
    }

    /* CTA */

    .cta{
        padding: 90px 0;
    }

    .cta-content h2{
        font-size: 2.2rem;
    }

    .cta-content p{
        font-size: 1rem;
    }

    .cta-buttons{
        flex-direction: column;

        gap: 15px;
    }

    .cta-btn-primary,
    .cta-btn-outline{
        width: 100%;

        text-align: center;
    }

    /* FAQ */

    .faq{
        padding: 80px 0;
    }

    .faq-item .accordion-button{
        padding: 22px;

        font-size: 1rem;
    }

    .faq-item .accordion-body{
        padding: 22px;
    }

    .faq-btn{
        width: 100%;
    }

    /* FOOTER */

    .footer{
        padding-top: 70px;
    }

    .footer-wrapper{
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .benefits{
        margin-top: 0;

        padding: 30px 0 70px;
    }

    .benefits-wrapper{
        display: flex;

        flex-direction: column;

        gap: 25px;

        padding: 30px 22px;

        border-radius: 25px;
    }

    .benefit-item{
        width: 100%;

        display: flex;

        align-items: flex-start;

        gap: 18px;

        padding-right: 0;

        padding-bottom: 22px;

        border-right: none;

        border-bottom:
        1px solid rgba(255,255,255,0.12);
    }

    .benefit-item:last-child{
        border-bottom: none;

        padding-bottom: 0;
    }

    .benefit-icon{
        flex-shrink: 0;
    }

    .benefit-icon i{
        font-size: 1.8rem;
    }

    .benefit-text{
        flex: 1;
    }

    .benefit-text h4{
        font-size: 1rem;

        line-height: 1.3;

        margin-bottom: 8px;
    }

    .benefit-text p{
        font-size: 0.92rem;

        line-height: 1.6;
    }
 }