/* =========================================================
   BASE CSS - SMAR
   Estilos globales del sitio
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* =========================================================
   HTML
   ========================================================= */

html{
    scroll-behavior:smooth;
}


/* =========================================================
   BODY
   ========================================================= */

body{
    font-family:'Montserrat',sans-serif;
    color:#2E2E2E;
    line-height:1.6;
    background:#FFFFFF;
    overflow-x:hidden;
}


/* =========================================================
   IMÁGENES
   ========================================================= */

img{
    max-width:100%;
    display:block;
}


/* =========================================================
   ENLACES
   ========================================================= */

a{
    text-decoration:none;
}


/* =========================================================
   CONTENEDOR GLOBAL
   ========================================================= */

.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding-left:20px;
    padding-right:20px;
    box-sizing:border-box;
}


/* =========================================================
   SECCIONES
   ========================================================= */

section{
    padding:80px 0;
    scroll-margin-top:120px;
}


/* =========================================================
   TÍTULOS GENERALES
   ========================================================= */

h2{
    font-size:32px;
    text-align:center;
    margin-bottom:30px;
}


/* =========================================================
   ANIMACIÓN REVEAL
   Utilizada por Nosotros, Servicios y Proyectos
   ========================================================= */

.reveal{
    opacity:0;
    transform:translateY(60px) scale(.98);

    transition:
        opacity 1s cubic-bezier(.16,1,.3,1),
        transform 1s cubic-bezier(.16,1,.3,1);

    will-change:opacity, transform;
}


.reveal.active{
    opacity:1;
    transform:translateY(0) scale(1);
}

/* =========================================================
   RESPONSIVE - HEADER Y MENÚ MÓVIL
   ========================================================= */

@media (max-width:900px){

    /* =========================
       HEADER
    ========================= */

    .header-container{
        height:75px;
    }

    .logo{
        height:55px;
    }


    /* =========================
       BOTÓN HAMBURGUESA
    ========================= */

    .hamburger{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center;
    align-items:center;
    gap:5px;

    width:42px;
    height:42px;

    cursor:pointer;

    position:relative;
    z-index:10001 !important;

    flex-shrink:0;
}

    .hamburger span{
    display:block !important;

    width:26px !important;
    height:3px !important;

    background:#FFFFFF !important;

    border-radius:3px;

    transition:all .3s ease;
}

.header-container .hamburger{
    visibility:visible !important;
    opacity:1 !important;
}


    /* =========================
       ANIMACIÓN HAMBURGUESA
    ========================= */

    .hamburger.is-active span:nth-child(1){
        transform:rotate(45deg) translate(5px,5px);
    }

    .hamburger.is-active span:nth-child(2){
        opacity:0;
    }

    .hamburger.is-active span:nth-child(3){
        transform:rotate(-45deg) translate(5px,-5px);
    }


    /* =========================
       MENÚ MÓVIL
    ========================= */

    .nav-modern{
        position:fixed;

        top:0;
        left:0;

        width:100%;
        height:100vh;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;

        padding-top:110px;

        background:linear-gradient(
            180deg,
            #0f2a44,
            #0a1e33
        );

        transform:translateX(100%);

        transition:transform .35s ease;

        z-index:1000;

        overflow-y:auto;
    }


    /* MENÚ ABIERTO */

    .nav-modern.nav-open{
        transform:translateX(0);
    }


    /* =========================
       ENLACES
    ========================= */

    .nav-modern a{
        display:block;

        width:80%;

        padding:14px 20px;

        text-align:center;

        color:#E6EEF6;

        font-size:16px;
        font-weight:600;

        letter-spacing:.5px;

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

        transition:
            color .3s ease,
            background .3s ease;
    }


    .nav-modern a:hover,
    .nav-modern a.active{
        color:#D96B3B;

        background:rgba(217,107,59,.08);
    }


    /* Eliminamos la línea inferior del menú desktop */

    .nav-modern a::after{
        display:none;
    }

}

/* =========================================================
   RESPONSIVE HERO - MOVILES
   ========================================================= */

@media (max-width: 900px){

    .hero-slider{
        min-height: auto !important;
        height: auto !important;
        padding: 90px 0 40px !important;
    }

    .hero-content{
        width:100% !important;
        max-width:100% !important;

        padding:20px 18px 40px !important;
        margin:0 !important;

        display:grid !important;
        grid-template-columns:1fr !important;

        gap:30px !important;

        box-sizing:border-box !important;
    }

    .hero-left{
        width:100% !important;
        min-width:0 !important;
    }

    .hero-right{
        width:100% !important;
        min-width:0 !important;

        justify-content:center !important;
    }

    .hero-badge{
        max-width:100% !important;
        width:auto !important;

        font-size:.82rem !important;

        white-space:normal !important;
        box-sizing:border-box !important;
    }

    .hero-title{
        font-size:2.35rem !important;
        line-height:1.12 !important;

        margin-bottom:16px !important;

        overflow-wrap:break-word !important;
    }

    .hero-subtitle{
        max-width:100% !important;

        font-size:.95rem !important;
        line-height:1.5 !important;

        margin-bottom:18px !important;
    }

    .hero-features{
        width:100% !important;

        margin:18px 0 !important;
        padding:0 !important;
    }

    .hero-features li{
        font-size:.95rem !important;
        line-height:1.4 !important;

        margin-bottom:12px !important;
    }

    .hero-buttons{
        width:100% !important;

        margin-top:18px !important;
    }

    .hero-cta{
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    .hero-card{
        width:100% !important;
        max-width:350px !important;

        box-sizing:border-box !important;

        margin:0 auto !important;
    }
}