/* ==========================================================
   VERTEX WEBSITE
   Archivo: responsive.css

   Adaptaciones responsive:
   Desktop
   Tablet
   Mobile

========================================================== */


/* ==========================================================
   TABLET
   1024px o menor
========================================================== */


@media (max-width: 1024px) {


    /* Contenedor */

    .container {

        padding-left:
            1.5rem;

        padding-right:
            1.5rem;

    }



    /* Header */

    .header__container {

        height:
            86px;

    }


    .header__menu {

        gap:
            1.5rem;

    }



    /* Hero */

    .hero {

        min-height:
            650px;

    }


    .hero__title {

        font-size:
            clamp(2.2rem,5vw,3.5rem);

    }



    /* Servicios */


    .services__grid {

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

    }



    /* Sectores */


    .sectors__grid {

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

    }



    /* Proyecto */


    .project {

        grid-template-columns:
            1fr;

        gap:
            2.5rem;

    }


    .project__image {

        height:
            400px;

    }



    /* Contacto */


    .contact__container {

        gap:
            2rem;

    }



    .cta__container {

        gap:
            2rem;

    }


}



/* ==========================================================
   TABLET PEQUEÑA
   768px o menor
========================================================== */


@media (max-width: 768px) {



    /* Header móvil */


    .header__nav {

        display:
            none;

    }



    .menu-toggle {

        display:
            block;

    }



    /* Topbar */


    .topbar__container {

        justify-content:
            center;

        flex-direction:
            column;

        gap:
            0.5rem;

        padding-top:
            0.75rem;

        padding-bottom:
            0.75rem;

    }


    .topbar {

        display:
            none;

    }



    .header {

        top:
            0;

    }



    /* Hero */


    .hero {

        height:
            90vh;

        min-height:
            620px;

    }


    .hero__content {

        text-align:
            center;

        margin:
            0 auto;

    }



    .hero__description {

        margin-left:
            auto;

        margin-right:
            auto;

    }



    .hero__actions {

        justify-content:
            center;

        flex-wrap:
            wrap;

    }



    /* Secciones */


    .section {

        padding-top:
            4rem;

        padding-bottom:
            4rem;

    }



    .section-header {

        margin-bottom:
            3rem;

    }



    /* Servicios */


    .services__grid {

        grid-template-columns:
            1fr;

    }



    /* Sectores */


    .sectors__grid {

        grid-template-columns:
            1fr;

    }



    .sector-card {

        height:
            280px;

    }



    /* CTA */


    .cta__container {

        flex-direction:
            column;

        text-align:
            center;

    }



    /* Contacto */


    .contact__container {

        grid-template-columns:
            1fr;

    }



    .contact-form {

        grid-template-columns:
            1fr;

        padding:
            1.5rem;

    }



    /* Footer */


    .footer__container {

        grid-template-columns:
            1fr;

        gap:
            1.5rem;

        text-align:
            center;

    }


    .footer__column--left,
    .footer__column--center,
    .footer__column--right {

        justify-content:
            center;

    }


}



/* ==========================================================
   MOBILE
   480px o menor
========================================================== */


@media (max-width: 480px) {



    .container {

        padding-left:
            1rem;

        padding-right:
            1rem;

    }



    .header__logo img {

        width:
            140px;

    }



    .hero {

        min-height:
            600px;

    }



    .hero__title {

        font-size:
            2rem;

    }



    .hero__description {

        font-size:
            1rem;

    }



    .hero__actions {

        flex-direction:
            column;

        width:
            100%;

    }



    .hero__actions .btn {

        width:
            100%;

    }



    .service-card__image {

        height:
            220px;

    }



    .project {

        padding:
            1.5rem;

    }



    .project__image {

        height:
            280px;

    }



    .cta__title {

        font-size:
            1.8rem;

    }



    .contact-map {

        height:
            280px;

    }



}