/* ========================================= */
/* INDEX RESPONSIVE MONARKA */
/* ========================================= */


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

@media screen and (max-width:1200px){

    header{

        padding:0 40px !important;

    }

    nav{

        gap:20px !important;

    }

}


@media screen and (max-width:992px){

    header{

        padding:20px 30px !important;

        height:auto !important;

        flex-direction:column;

        gap:20px;

    }

    nav{

        position:relative !important;

        left:auto !important;

        transform:none !important;

        flex-wrap:wrap;

        justify-content:center;

    }

}


/* ========================================= */
/* MOBILE */
/* ========================================= */

@media screen and (max-width:768px){

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

header{

    position:relative !important;

    width:100%;

    padding:25px 20px !important;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:30px;

    transition:0.3s ease;

}

    .logo{

        width:100%;

        display:flex;

        justify-content:center;

    }

    .logo img{

        width:120px !important;
        height:auto !important;

    }


    /* ===== MENU HAMBURGUESA ===== */
.top-header{

    width:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    gap:20px;

}
    /* ===== MENU MOBILE ===== */

.menu-toggle{

    display:flex !important;

    justify-content:center;
    align-items:center;

    font-size:38px;

    color:white;

    cursor:pointer;

}

nav{

    display:none;

    width:100%;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    gap:18px !important;

    margin-top:20px;

    padding:25px;

    border-radius:25px;

    background:rgba(255,255,255,0.08);

    backdrop-filter:blur(15px);

}

nav.show{

    display:flex !important;

}


    nav a{

        font-size:18px !important;

    }


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

    .hero{

        padding:40px 20px 80px !important;

        min-height:auto;

    }

    .hero-content{

        width:100%;

        max-width:100% !important;

        text-align:center;

        margin-top:20px;

    }

    .hero-content h2{

        font-size:52px !important;

        line-height:1.1;

    }

    .hero-content p{

        margin-top:25px;

        font-size:20px;

        line-height:1.7;

    }

    .btn-outline{

        margin-top:30px;

        font-size:18px;

        padding:15px 35px;

    }


    /* ===== KPIS ===== */

    .kpis{

        display:flex;

        flex-direction:column;

        gap:25px;

        margin-top:70px !important;

    }

    .kpis div{

        background:rgba(255,255,255,0.08);

        backdrop-filter:blur(10px);

        padding:20px;

        border-radius:25px;

    }

    .kpis h3{

        font-size:42px !important;

    }

    .kpis p{

        font-size:18px;

    }


    /* ===== GLASS ===== */

    .glass-section{

        width:92% !important;

        margin:25px auto !important;

        padding:35px 25px !important;

        border-radius:35px;

    }

    .glass-section h2{

        font-size:40px;

        margin-bottom:25px;

    }

    .texto{

        font-size:20px;

        line-height:1.8;

    }


    /* ===== CARDS ===== */

    .grid{

        display:flex !important;

        flex-direction:column;

        gap:20px;

        margin-top:30px;

    }

    .card{

        width:100% !important;

        padding:30px 20px;

        border-radius:25px;

    }

    .card h3{

        font-size:30px;

        margin-bottom:15px;

    }

    .card p{

        font-size:20px;

        line-height:1.7;

    }

    .card.full{

        width:100% !important;

        margin-top:20px !important;

    }


    /* ===== CONTACTO ===== */

    .grid-3{

        display:flex !important;

        flex-direction:column;

        gap:35px;

    }

    .grid-3 h3{

        font-size:30px;

        margin-bottom:15px;

    }

    .grid-3 p{

        font-size:20px;

        line-height:1.7;

    }

    .copy{

        margin-top:40px;

        font-size:18px;

        line-height:1.6;

    }

}


/* ========================================= */
/* SMALL PHONES */
/* ========================================= */

@media screen and (max-width:480px){

    .hero-content h2{

        font-size:42px !important;

    }

    .hero-content p{

        font-size:18px;

    }

    .glass-section h2{

        font-size:34px;

    }

    .card h3{

        font-size:26px;

    }

    .grid-3 h3{

        font-size:26px;

    }

}

/* ========================= */
/* HEADER FIXED MOBILE */
/* ========================= */

header.scrolled{

    position:fixed !important;

    top:0;
    left:0;

    width:100%;

    padding:15px 20px !important;

    background:rgba(0,0,0,0.35);

    backdrop-filter:blur(15px);

    box-shadow:0 5px 20px rgba(0,0,0,0.25);

}

/* SCROLL LAYOUT */

header.scrolled .top-header{

    flex-direction:row;

    justify-content:space-between;
    align-items:center;

}

/* LOGO PEQUEÑO */

header.scrolled .logo img{

    width:75px !important;

}

/* HAMBURGUESA DERECHA */

header.scrolled .menu-toggle{

    position:relative;

    right:auto;

}