/*=========================================
        AURÉLIE FRAGRANCES
=========================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#000;
    overflow:hidden;

}

/*=========================================
            ENCABEZADO
=========================================*/

header{

    position:absolute;

    top:0;
    left:0;

    width:100%;

    padding:30px 60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:1000;

}

.logo{

    font-family:'Cormorant Garamond',serif;

    font-size:52px;

    color:#FFF;

    letter-spacing:3px;

    user-select:none;

    text-shadow:0 2px 10px rgba(0,0,0,.35);

}

/*=========================================
        BOTÓN ESCRITORIO
=========================================*/

.btn-desktop{

    text-decoration:none;

    background:#1D4E89;

    color:#FFF;

    padding:16px 34px;

    border-radius:50px;

    font-size:17px;

    font-weight:500;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.35);

}

.btn-desktop:hover{

    background:#102A43;

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(255,255,255,.20);

}

/*=========================================
        BOTÓN CELULAR
=========================================*/

.btn-mobile{

    display:none;

}

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

.hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}

.hero picture{

    width:100%;

    height:100%;

    display:block;

}

.hero img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    animation:zoom 18s linear infinite;

}

/*=========================================
        CAPA OSCURA
=========================================*/

.overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:linear-gradient(

        rgba(0,0,0,.18),

        rgba(0,0,0,.38)

    );

}

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

@keyframes zoom{

0%{

transform:scale(1);

}

100%{

transform:scale(1.08);

}

}

/*=========================================
            CELULARES
=========================================*/

@media(max-width:768px){

header{

    justify-content:center;

    padding:25px 20px;

}

.logo{

    font-size:42px;

}

.btn-desktop{

    display:none;

}

.btn-mobile{

    display:block;

    position:fixed;

    left:20px;

    right:20px;

    bottom:25px;

    text-align:center;

    text-decoration:none;

    background:#1D4E89;

    color:white;

    padding:18px;

    border-radius:50px;

    font-size:18px;

    font-weight:500;

    z-index:9999;

    box-shadow:0 12px 25px rgba(0,0,0,.45);

}

.btn-mobile:hover{

    background:#102A43;

}

.hero img{

    object-position:center;

}

}