/* =====================================
   LAPRiMA.LINK
   FINAL STYLE
===================================== */


/* RESET */

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



html{
    scroll-behavior:smooth;
}




/* BODY */

body{

    min-height:100vh;


    font-family:
    "Montserrat",
    sans-serif;


    color:#ffffff;


    background-image:


    linear-gradient(
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.65)
    ),


    url("images/background1.jpg");



    background-size:cover;


    background-position:center;


    background-repeat:no-repeat;


    background-attachment:fixed;



    transition:
    background-image 1s ease-in-out;


}







/* CONTAINER */


.container{


    width:100%;


    max-width:480px;


    min-height:100vh;


    margin:auto;



    padding:

    45px 20px 40px;



    text-align:center;



    animation:

    fadeIn .8s ease;


}





@keyframes fadeIn{


    from{

        opacity:0;

        transform:
        translateY(20px);

    }


    to{

        opacity:1;

        transform:
        translateY(0);

    }


}







/* PROFILE */


.profile{


    margin-bottom:35px;


}





.logo{


    width:130px;


    max-width:70%;


    height:auto;



    margin-bottom:22px;



    object-fit:contain;



    filter:

    drop-shadow(
        0 8px 20px rgba(0,0,0,.5)
    );


}





.profile h1{


    font-family:

    "Montserrat",
    sans-serif;



    font-size:30px;



    font-weight:700;



    letter-spacing:2px;



    margin-bottom:12px;


}






.profile p{


    font-size:14px;



    line-height:1.7;



    color:

    rgba(255,255,255,.9);



}








/* MENU BUTTON */


.links{


    display:flex;


    flex-direction:column;


    gap:14px;


}





.link-button{


    display:block;



    padding:

    16px 20px;



    border-radius:18px;



    text-decoration:none;



    color:#ffffff;



    font-size:15px;



    font-weight:600;



    background:

    rgba(255,255,255,.16);



    border:

    1px solid rgba(255,255,255,.28);



    backdrop-filter:

    blur(12px);



    box-shadow:

    0 8px 25px rgba(0,0,0,.25);



    transition:

    .3s ease;


}





.link-button:hover{


    transform:

    translateY(-3px);



    background:

    rgba(255,255,255,.28);


}





.link-button.primary{


    background:


    linear-gradient(

        135deg,

        #d8b56a,

        #a87932

    );



    border:none;


}







.link-button.clicked{


    transform:

    scale(.96);


}







/* PROMO */


.promo{


    margin-top:35px;


}




.promo img{


    width:100%;



    border-radius:22px;



    box-shadow:

    0 15px 40px rgba(0,0,0,.4);


}







/* SOCIAL */


.social{


    margin-top:30px;



    display:flex;



    justify-content:center;



    gap:12px;



    flex-wrap:wrap;


}





.social a{


    color:white;



    text-decoration:none;



    padding:

    10px 18px;



    border-radius:50px;



    background:

    rgba(255,255,255,.15);



    border:

    1px solid rgba(255,255,255,.2);


}







/* FOOTER */


footer{


    margin-top:35px;



    font-size:12px;



    line-height:1.7;



    opacity:.75;


}








/* WHATSAPP FLOAT */


.whatsapp{


    position:fixed;



    right:20px;



    bottom:20px;



    padding:

    14px 24px;



    border-radius:50px;



    background:#25D366;



    color:white;



    text-decoration:none;



    font-weight:600;



    box-shadow:

    0 10px 30px rgba(0,0,0,.35);



    z-index:20;


}








/* MOBILE */


@media(max-width:480px){


    .container{

        padding-top:35px;

    }



    .logo{

        width:110px;

    }



    .profile h1{

        font-size:24px;

        letter-spacing:1.5px;

    }



    .profile p{

        font-size:13px;

    }



    .link-button{

        padding:15px;

        font-size:14px;

    }


}