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

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

html,
body{

    width:100%;
    min-height:100dvh;

}

body{

    background-image:url("img/imagem1.jpg");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    font-family:"Cormorant Garamond", serif;

    color:#F5E8D3;

    overflow:hidden;

    position:relative;

}

/* =========================================
   LINKS
========================================= */

a{

    color:inherit;
    text-decoration:none;

}

/* =========================================
   OVERLAY
========================================= */

.overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.35),
        rgba(0,0,0,.40)

    );

    z-index:1;

}

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

.hero{

    position:relative;

    z-index:5;

    min-height:100dvh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    transform:translateY(-35px);

    padding:40px;

}

/* =========================================
   LOGO
========================================= */

.logo{

    width:360px;

    max-width:75vw;

    margin-bottom:55px;

    filter:

        drop-shadow(0 3px 10px rgba(0,0,0,.45))
        drop-shadow(0 0 18px rgba(0,0,0,.25));

}

/* =========================================
   COMING SOON
========================================= */

.coming-soon{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.coming-soon h2{

    font-family:"Cinzel", serif;

    font-size:4rem;

    font-weight:400;

    letter-spacing:12px;

    margin-bottom:10px;

}

.coming-soon h1{

    font-family:"Cinzel", serif;

    font-size:5.6rem;

    font-weight:400;

    letter-spacing:10px;

    line-height:1.05;

}

.coming-soon::before,
.coming-soon::after{

    content:"";

    width:170px;

    height:1px;

    margin:30px auto;

    background:rgba(245,232,211,.45);

}

/* =====================================================
   FOOTER
===================================================== */

footer{

    position:absolute;

    left:50%;
    bottom:55px;

    transform:translateX(-50%);

    width:100%;
    max-width:950px;

    padding:0 40px;

    z-index:20;

}

.footer-content{

    display:flex;

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

    gap:40px;

    font-size:1.1rem;

}

.phones,
.location{

    display:flex;

    align-items:center;

    gap:15px;

}

.phones{

    text-align:left;

    line-height:1.6;

}

.separator{

    width:1px;

    height:55px;

    background:rgba(245,232,211,.35);

}

.icon{

    font-size:20px;

    opacity:.85;

}

/* =====================================================
   WAVE
===================================================== 

.wave{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    height:120px;

    background:linear-gradient(
        to top,
        rgba(181,147,91,.95),
        rgba(181,147,91,.70),
        transparent
    );

    clip-path:ellipse(85% 100% at 50% 100%);

    z-index:1;

}

/* =====================================================
   TABLET
===================================================== */

@media (max-width:992px){

    .logo{

        width:290px;

    }

    .coming-soon h2{

        font-size:3rem;

        letter-spacing:8px;

    }

    .coming-soon h1{

        font-size:4rem;

        letter-spacing:6px;

    }

}

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

@media (max-width:768px){

    body{

        overflow:hidden;

    }

    .hero{

        min-height:100dvh;

        justify-content:flex-start;

        padding:
            calc(env(safe-area-inset-top) + 55px)
            20px
            160px;

        transform:none;

    }

    .logo{

        width:230px;

        margin-bottom:40px;

    }

    .coming-soon::before,
    .coming-soon::after{

        display:none;

    }

    .coming-soon h2{

        font-size:1.9rem;

        letter-spacing:6px;

        margin-bottom:12px;

    }

    .coming-soon h1{

        font-size:3rem;

        letter-spacing:4px;

        line-height:1.15;

    }

    footer{

        bottom:calc(env(safe-area-inset-bottom) + 35px);

        padding:0 20px;

    }

    .footer-content{

        flex-direction:column;

        gap:15px;

        font-size:.95rem;

    }

    .separator{

        display:none;

    }

    .phones,
    .location{

        justify-content:center;

    }

    .wave{

        height:90px;

    }

}