/*======================================
LAPTOPS
======================================*/

@media (max-width:1200px){

    /*======================================
    HERO
    ======================================*/

    .hero-grid{

        grid-template-columns:460px 1fr;

        gap:40px;

    }

    .hero-main-card{

        width:100%;

        max-width:560px;

    }

}

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

@media (max-width:992px){

    /*======================================
    PRODUCTS
    ======================================*/

    .products-grid{

        grid-template-columns:1fr;

    }

    /*======================================
    SERVICES
    ======================================*/

    .services-grid{

        grid-template-columns:repeat(2,1fr);

    }

    /*======================================
    ABOUT
    ======================================*/

    .about-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    /*======================================
    CONTACT
    ======================================*/

    .contact-grid{

        grid-template-columns:1fr;

    }

    /*======================================
    FOOTER
    ======================================*/

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

        gap:40px;

    }

}

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

@media (max-width:768px){

    /*======================================
    NAVBAR
    ======================================*/

    .navbar{

        top:10px;

    }

    .navbar-box{

        display:grid;

        grid-template-columns:1fr auto;

        align-items:center;

        position:relative;

        height:68px;

        padding:0 18px;

    }

    .logo{

        justify-self:start;

    }

    .logo p{

        display:none;

    }

    .logo img{

        width:46px;

        height:46px;

    }

    .logo h2{

        font-size:20px;

    }

    .actions{

        display:none;

    }

    .menu-toggle{

        display:flex;

        justify-content:center;

        align-items:center;

        justify-self:end;

        width:46px;

        height:46px;

        background:none;

        color:#fff;

        font-size:32px;

        border:none;

        cursor:pointer;

        z-index:1002;

    }

    .menu-toggle i{

        font-size:32px;

        line-height:1;

    }

    .nav-menu{

        position:absolute;

        top:82px;

        left:0;

        display:none;

        width:100%;

        z-index:1001;

        max-height:calc(100vh - 100px);

        overflow-y:auto;

    }

    .nav-menu.active{

        display:block;

    }

    .menu{

        display:flex;

        flex-direction:column;

        width:100%;

        background:#07101f;

        border-radius:20px;

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

        overflow:hidden;

    }

    .menu li{

        width:100%;

    }

    .menu a{

        display:flex;

        align-items:center;

        padding:14px 24px;

        min-height:60px;

        font-size:18px;

        font-weight:600;

        color:#fff;

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

    }

    .menu li:last-child a{

        border-bottom:none;

    }

    /*======================================
    BOTÓN DEMO
    ======================================*/

    .menu-demo{

        padding:20px;

    }

    .menu-demo a{

        display:flex;

        justify-content:center;

        align-items:center;

        width:100%;

    }

    .mobile-only{

    display:block;

    padding:16px;

    }

    .mobile-only a{

        display:flex;

        justify-content:center;

        align-items:center;

        width:100%;

        border-bottom:none !important;

        min-height:56px;

        font-size:18px;

    }

    /*======================================
    HERO
    ======================================*/

    .hero{

        padding-top:120px;

        padding-bottom:60px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .hero-content{

        order:1;

    }

    .hero-images{

        order:2;

        height:auto;

    }

    .hero-main-card{

        position:relative;

        top:0;

        right:0;

        width:100%;

        max-width:none;

    }

    .hero h1{

        font-size:48px;

        line-height:1.1;

    }

    .hero p{

        max-width:100%;

        font-size:17px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

        justify-content:center;

    }

    .hero-stats{

        flex-direction:column;

    }

    .hero-stats div{

        border-right:none !important;

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

    }

    .hero-stats div:last-child{

        border-bottom:none;

    }

}

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

@media (max-width:576px){

    /*======================================
    GENERAL
    ======================================*/

    section{

        padding:80px 0;

    }

    /*======================================
    HERO
    ======================================*/

    .hero h1{

        font-size:38px;

    }

    .hero-badge{

        font-size:14px;

    }

    /*======================================
    PRODUCTS
    ======================================*/

    .section-title{

        margin-bottom:40px;

    }

    .section-title h2{

        font-size:34px;

    }

    .section-title p{

        font-size:16px;

    }

    .product-card img{

        height:200px;

        object-fit:cover;

    }

    .product-card-content{

        padding:22px;

    }

    .product-card-content h3{

        font-size:26px;

    }

    /*======================================
    SERVICES
    ======================================*/

    .services-grid{

        grid-template-columns:1fr;

    }

    /*======================================
    CONTACT
    ======================================*/

    .contact-info h3{

        font-size:30px;

    }

    .contact-form button{

        width:100%;

    }

    /*======================================
    FOOTER
    ======================================*/

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-brand p{

        max-width:100%;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}

/*==================================================
1200px
==================================================*/

@media (max-width:1200px){

    .hero-space h1{

        font-size:54px;

    }

    .platform-grid{

        grid-template-columns:1fr 1fr;

    }

}

/*==================================================
992px
==================================================*/

@media (max-width:992px){

    .hero-space{

        padding:140px 0 80px;

    }

    .hero-space h1{

        font-size:48px;

    }

    .hero-space p{

        font-size:20px;

    }

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .platform-grid{

        grid-template-columns:1fr;

    }

    .download-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .resource-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .support-grid{

        grid-template-columns:1fr;

    }

    .coming-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .platform-card,
    .download-card,
    .resource-card,
    .support-card,
    .coming-card{

        padding:32px;

    }

}

/*==================================================
768px
==================================================*/

@media (max-width:768px){

    .hero-space{

        padding:120px 0 70px;

    }

    .hero-space h1{

        font-size:40px;

    }

    .hero-space p{

        font-size:17px;

    }

    .hero-actions{

        flex-direction:column;

        align-items:center;

    }

    .hero-actions .btn{

        width:100%;

        max-width:340px;

        justify-content:center;

    }

    .section-title{

        margin-bottom:45px;

    }

    .section-title h2{

        font-size:32px;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .download-grid,
    .resource-grid,
    .coming-grid{

        grid-template-columns:1fr;

    }

    .platform-card,
    .download-card,
    .resource-card,
    .support-card,
    .coming-card{

        padding:28px;

    }

    .platform-buttons{

        flex-direction:column;

    }

    .platform-buttons .btn{

        width:100%;

    }

    .platform-preview img{

        height:200px;

    }

}

/*==================================================
576px
==================================================*/

@media (max-width:576px){

    .hero-space{

        padding:100px 0 50px;

    }

    .hero-badge{

        font-size:14px;

        padding:10px 18px;

    }

    .hero-space h1{

        font-size:34px;

    }

    .hero-space p{

        font-size:16px;

        line-height:1.7;

    }

    .section-title{

        margin-bottom:35px;

    }

    .section-title h2{

        font-size:28px;

    }

    .platform-card h3{

        font-size:28px;

    }

    .download-card h3,
    .resource-card h3,
    .support-card h3{

        font-size:24px;

    }

    .platform-card,
    .download-card,
    .resource-card,
    .support-card,
    .coming-card{

        padding:24px;

        border-radius:18px;

    }

    .platform-top{

        flex-direction:column;

        gap:20px;

        align-items:flex-start;

    }

    .platform-logo{

        width:120px;

        height:auto;

    }

    .platform-chips{

        gap:8px;

    }

    .platform-chips span{

        font-size:13px;

    }

    .platform-info{

        gap:12px;

    }

    .platform-preview img{

        height:170px;

    }

}

@media(max-width:768px){

    .back-btn{

        width:50px;

        height:50px;

        font-size:20px;

    }

}