/*==================================================
            TABLETS
==================================================*/

@media (max-width:1024px){

    .hero-grid{
        grid-template-columns:1fr;
        gap:50px;
        text-align:center;
    }

    .services-grid,
    .methodology-grid,
    .courses-grid,
    .technologies-grid,
    .youtube-grid,
    .contact-grid{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

}


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

@media (max-width:768px){

    /*--------------------------
        HEADER
---------------------------*/

header{

    padding:15px 0;

}

nav{

    position:relative;

    flex-direction:row;

    justify-content:space-between;

    align-items:center;

}

.logo img{

    width:170px;

}

/* Botón hamburguesa */

.menu-toggle{

    display:flex;

    justify-content:center;

    align-items:center;

}

/* Menú oculto */

.nav-menu{

    position:absolute;

    top:80px;

    left:0;

    width:100%;

    background:rgba(10,18,40,.97);

    backdrop-filter:blur(18px);

    border-radius:18px;

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

    padding:25px;

    display:none;

    flex-direction:column;

    gap:20px;

    text-align:center;

    box-shadow:0 20px 40px rgba(0,0,0,.35);

}

/* Menú visible */

.nav-menu.active{

    display:flex;

}

.nav-menu li{

    width:100%;

}

.nav-menu li a{

    display:block;

    padding:10px;

    font-size:1rem;

}
    /*---------------- HERO ----------------*/

    .hero{
        padding-top:120px;
    }

    .hero h1{
        font-size:2.8rem;
        line-height:1.1;
    }

    .hero p{
        font-size:1rem;
    }

    .hero-buttons{
        display:flex;
        flex-direction:column;
        gap:15px;
        width:100%;
    }

    .hero-buttons a{
        width:100%;
        justify-content:center;
    }

    /*---------------- GRID ----------------*/

    .services-grid,
    .methodology-grid,
    .courses-grid,
    .technologies-grid,
    .youtube-grid,
    .contact-grid,
    .footer-grid{

        grid-template-columns:1fr;
        gap:30px;

    }

    /*---------------- TARJETAS ----------------*/

    .service-card,
    .step-card,
    .course-card,
    .tech-card,
    .youtube-card{

        padding:30px 25px;

    }

    .course-card{

        max-width:420px;
        margin:auto;

    }

    .course-card img{

        height:220px;
        object-fit:cover;

    }

    /*---------------- CONTENEDOR ----------------*/

    .container{

        width:92%;

    }

}


/*==================================================
        MÓVILES PEQUEÑOS
==================================================*/

@media (max-width:480px){

    .hero h1{

        font-size:2.2rem;

    }

    .hero p{

        font-size:.95rem;

    }

    .section-title{

        font-size:2rem;

    }

}
/*=====================================
        SERVICIOS - MÓVIL
======================================*/

@media (max-width:768px){

    .services-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:25px;

    }

    .service-card{

        width:100%;

        padding:35px 30px;

    }

    .service-card h3{

        font-size:2rem;

    }

    .service-card p{

        font-size:1rem;

        line-height:1.8;

    }

}
/*=====================================
        APRENDE - MÓVIL
======================================*/

@media (max-width:768px){

    .learn-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:25px;

    }

    .learn-card{

        width:100%;

        padding:35px 30px;

    }

    .learn-card img{

        width:100%;

        border-radius:16px;

    }

    .learn-card h3{

        font-size:2rem;

    }

    .learn-card p{

        line-height:1.8;

    }

}
/*=====================================
        SERVICIOS - MÓVIL
======================================*/

@media (max-width:768px){

    .solutions-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:25px;

    }

    .solution-card{

        width:100%;

        padding:35px 30px;

    }

    .solution-card h3{

        font-size:2rem;

    }

    .solution-card p{

        font-size:1rem;

        line-height:1.8;

    }

}
/*=====================================
        YOUTUBE - MÓVIL
======================================*/

@media (max-width:768px){

    .youtube-box{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:35px;

    }

    .youtube-info{

        width:100%;

        text-align:center;

        order:1;

    }

    .youtube-preview{

        order:2;

        display:flex;

        justify-content:center;

        width:100%;

    }

    .youtube-preview img{

        width:220px;

        border-radius:20px;

    }

    .youtube-info ul{

        display:flex;

        flex-wrap:wrap;

        justify-content:center;

        gap:12px;

        padding:0;

        margin:30px 0;

    }

    .youtube-info ul li{

        list-style:none;

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

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

        padding:8px 14px;

        border-radius:30px;

        font-size:.95rem;

    }

    .youtube-info .btn-primary{

        display:inline-flex;

    }

}
/*=====================================
        RECURSOS - MÓVIL
======================================*/

@media (max-width:768px){

    .resources-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:25px;

    }

    .resource-card{

        width:100%;

        padding:35px 30px;

        text-align:center;

    }

    .resource-icon{

        margin:0 auto 20px;

    }

    .resource-card h3{

        font-size:2rem;

        margin-bottom:15px;

    }

    .resource-card p{

        font-size:1rem;

        line-height:1.8;

    }

}
/*=====================================
            FOOTER - MÓVIL
======================================*/

@media (max-width:768px){

    .footer-grid{

        display:grid;

        grid-template-columns:1fr;

        text-align:center;

        gap:45px;

    }

    .footer-logo{

        display:block;

        margin:0 auto 20px;

        width:180px;

    }

    .footer-grid h4{

        margin-bottom:18px;

    }

    .footer-grid a{

        display:block;

        margin:10px 0;

    }

    .footer-grid p{

        margin:8px 0;

        line-height:1.7;

    }

    .copyright{

        text-align:center;

        padding:35px 20px 15px;

        line-height:1.8;

    }

    .footer-links{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    width:100%;

    margin:20px auto 35px;

    text-align:center;

}

}