/* =====================================================
   EMPÓRIO EXPRESS
   MAIN STYLESHEET
===================================================== */



/* =====================================================
   ROOT
===================================================== */


:root{


    --primary:#111111;


    --secondary:#D4A574;


    --secondary-hover:#B88B54;


    --secondary-light:#E8C9A8;


    --white:#FFFFFF;


    --gray:#3D3D3D;


    --light:#F3F3F3;


    --dark:#111111;


    --text:#3D3D3D;


    --ifood-red:#E53935;


    --ifood-hover:#C62828;



    --font-title:
    "Playfair Display",
    serif;


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



    --transition:.3s ease;


}







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


*{


    margin:0;


    padding:0;


    box-sizing:border-box;


}





html{


    scroll-behavior:smooth;


}





body{


    font-family:var(--font-body);


    color:var(--text);


    overflow-x:hidden;


}





img{


    width:100%;


    display:block;


}





a{


    text-decoration:none;


    color:inherit;


}





ul{


    list-style:none;


}





button{


    border:none;


    background:none;


    cursor:pointer;


}







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


.container{


    width:90%;


    max-width:1200px;


    margin:auto;


}





section{


    padding:100px 0;


}







.section-title{


    text-align:center;


    margin-bottom:60px;


}




.section-title span,


.section-subtitle{


    display:block;


    color:var(--secondary);


    font-size:.8rem;


    text-transform:uppercase;


    letter-spacing:4px;


    margin-bottom:15px;


}





.section-title h2,


.about-content h2,


.stores-content h2{


    font-family:var(--font-title);


    font-size:3.5rem;


    line-height:1.2;


}





.section-title p{


    max-width:650px;


    margin:20px auto;


    color:var(--gray);


    line-height:1.8;


}









/* =====================================================
   BUTTONS
===================================================== */


.btn-primary{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    background:var(--secondary);


    color:white;


    padding:16px 35px;


    font-size:.9rem;


    letter-spacing:1px;


    transition:var(--transition);


}






.btn-primary:hover{


    background:var(--secondary-hover);


    transform:translateY(-3px);


}






.btn-outline{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    padding:15px 35px;


    border:1px solid white;


    color:white;


    transition:var(--transition);


}






.btn-outline:hover{


    background:white;


    color:var(--primary);


}




/* IFOOD BUTTONS */


.btn-primary.ifood-btn{


    background:var(--ifood-red);


    color:white;


}




.btn-primary.ifood-btn:hover{


    background:var(--ifood-hover);


    transform:translateY(-3px);


}




.btn-outline.ifood-btn{


    border:1px solid var(--ifood-red);


    color:var(--ifood-red);


}




.btn-outline.ifood-btn:hover{


    background:var(--ifood-red);


    color:white;


}









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


#header{


    position:fixed;


    width:100%;


    top:0;


    left:0;


    z-index:1000;


    background:var(--primary);


    transition:.3s;


}






#header .container{


    height:90px;


    display:flex;


    justify-content:space-between;


    align-items:center;


}







.logo img{


    width:auto;


    max-width:220px;


    max-height:65px;


    object-fit:contain;


}







nav ul{


    display:flex;


    gap:35px;


}






nav a{


    color:white;


    font-size:.9rem;


    font-weight:500;


    transition:var(--transition);


}






nav a:hover{


    color:var(--secondary);


}








.header-ifood{


    background:var(--ifood-red);


    color:white;


    padding:12px 25px;


    font-size:.85rem;


    font-weight:600;


    border-radius:4px;


    transition:var(--transition);


}





.header-ifood:hover{


    background:var(--ifood-hover);


    transform:translateY(-2px);


}





#menu-mobile{


    display:none;


    color:white;


    font-size:2rem;


}








/* HEADER SCROLL */


#header.scrolled{


    background:var(--primary);


    box-shadow:

    0 5px 20px rgba(0,0,0,.1);


}





#header.scrolled nav a{


    color:var(--light);


}



#header.scrolled #menu-mobile{


    color:var(--white);


}







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


.hero{


    height:100vh;


    min-height:700px;


    position:relative;


    overflow:hidden;


}





.slider,


.slide{


    position:absolute;


    inset:0;


}






.slide{


    opacity:0;


    transition:1.5s;


}





.slide.active{


    opacity:1;


}





.slide img{


    height:100%;


    width:100%;


    object-fit:cover;


    object-position:center;


}





.hero-overlay{


    position:absolute;


    inset:0;


    background:

    linear-gradient(

    rgba(0,0,0,.65),

    rgba(0,0,0,.55)

    );


    z-index:1;


}







.hero-content{


    position:relative;


    z-index:2;


    height:100%;


    display:flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;


    text-align:center;


    color:white;


    padding:20px;


    padding-top:120px;


}







.hero-content span{


    color:var(--secondary-light);


    letter-spacing:5px;


    font-size:.85rem;


}





.hero-content h1{


    font-family:var(--font-title);


    font-size:4.2rem;


    max-width:900px;


    margin:25px 0;


    line-height:1.1;


}







.hero-content p{


    max-width:650px;


    font-size:1.1rem;


    line-height:1.8;


}






.hero-actions{


    display:flex;


    gap:20px;


    margin-top:40px;


}



/* =====================================================
   SOBRE
===================================================== */


#sobre{


    background:white;


}





.grid-2{


    display:grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:80px;


    align-items:center;


}







.about-image{


    position:relative;


}







.about-image img{


    height:600px;


    object-fit:cover;


}







.about-image::after{


    content:"";


    position:absolute;


    width:120px;


    height:120px;


    border:2px solid var(--secondary);


    right:-25px;


    bottom:-25px;


    z-index:-1;


}








.about-content h2{


    margin-bottom:30px;


}





.about-content p,


.stores-content p{


    color:var(--gray);


    line-height:1.9;


    margin-bottom:20px;


}

























/* =====================================================
   CATEGORIAS
===================================================== */


#categorias{


    background:var(--light);


}







.categories-grid{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}








.category-card{


    background:white;


    overflow:hidden;


    transition:var(--transition);


}

.about-content .btn-primary{

    margin-top:25px;

}





.category-card:hover{


    transform:translateY(-10px);


    box-shadow:

    0 20px 40px rgba(0,0,0,.12);


}








.category-card img{


    height:280px;


    object-fit:cover;


    transition:.5s;


}







.category-card:hover img{


    transform:scale(1.08);


}







.category-content{


    padding:30px 25px;


}






.category-content h3{


    font-family:var(--font-title);


    font-size:2rem;


    margin-bottom:15px;


}







.category-content p{


    color:var(--gray);


    line-height:1.7;


    font-size:.9rem;


}








/* =====================================================
   DIFERENCIAIS
===================================================== */


#diferenciais{


    background:white;


}







.benefits-grid{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}







.benefit-card{


    text-align:center;


    padding:40px 25px;


    background:white;


    border:1px solid #EDEDED;


    transition:var(--transition);


}







.benefit-card:hover{


    border-color:var(--secondary);


    transform:translateY(-8px);


}







.benefit-icon{


    width:70px;


    height:70px;


    margin:0 auto 25px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:var(--light);


    border-radius:50%;


    font-size:2rem;


}







.benefit-card h3{


    font-family:var(--font-title);


    font-size:1.8rem;


    margin-bottom:15px;


}







.benefit-card p{


    color:var(--gray);


    line-height:1.7;


    font-size:.9rem;


}









/* =====================================================
   REVEAL ANIMATION
===================================================== */


.reveal{


    opacity:0;


    transform:translateY(40px);


    transition:.8s ease;


}





.reveal.active{


    opacity:1;


    transform:translateY(0);


}








/* =====================================================
   DECORATIVE DETAILS
===================================================== */


.category-card::before{


    content:"";


    display:block;


    height:3px;


    background:var(--secondary);


    transform:scaleX(0);


    transition:.3s;


}







.category-card:hover::before{


    transform:scaleX(1);


}



/* =====================================================
   GALERIA
===================================================== */


#galeria{


    background:var(--light);


}







.gallery{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;


}







.gallery figure{


    height:350px;


    overflow:hidden;


    position:relative;


}







.gallery figure::after{


    content:"";


    position:absolute;


    inset:0;


    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.45)

    );


    opacity:0;


    transition:var(--transition);


}







.gallery img{


    height:100%;


    object-fit:cover;


    transition:.6s;


}








.gallery figure:hover img{


    transform:scale(1.1);


}


.gallery figure.zoom-top img{


    object-position:top;


}


.gallery figure.zoom-top:hover img{


    transform-origin:top center;


}


.gallery figure.zoom-top img{


    object-position:top;


}


.gallery figure.zoom-top:hover img{


    transform-origin:top center;


}






.gallery figure:hover::after{


    opacity:1;


}









/* =====================================================
   LOJAS
===================================================== */


#lojas{


    background:white;


}







.stores-content h2{


    margin-bottom:30px;


}







.store-list{


    margin:35px 0;


}







.store-item{


    padding:25px 0;


    border-bottom:1px solid #EDEDED;


}







.store-item h3{


    font-family:var(--font-title);


    font-size:1.8rem;


    margin-bottom:10px;


}







.store-item p{


    margin:5px 0;


    color:var(--gray);


}







.stores-image img{


    height:550px;


    object-fit:cover;


}








/* =====================================================
   AVALIAÇÕES
===================================================== */


#avaliacoes{


    background:var(--light);


}







.testimonials{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}







.testimonial{


    background:white;


    padding:40px 30px;


    position:relative;


    transition:var(--transition);


    box-shadow:

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


}







.testimonial:hover{


    transform:translateY(-8px);


}







.testimonial::before{


    content:"“";


    position:absolute;


    top:10px;


    left:20px;


    font-family:var(--font-title);


    font-size:5rem;


    color:var(--secondary);


    opacity:.5;


}







.testimonial p{


    margin-top:35px;


    color:var(--gray);


    line-height:1.8;


    font-style:italic;


}







.testimonial strong{


    display:block;


    margin-top:25px;


    color:var(--primary);


}









/* =====================================================
   CTA FINAL
===================================================== */


.cta{


    position:relative;


    background:


    linear-gradient(

    rgba(0,0,0,.65),

    rgba(0,0,0,.65)

    ),

    url("./../img/lrv-shop-bottom.png")

    center/cover;


    color:white;


    text-align:center;


}







.cta .container{


    position:relative;


    z-index:2;


}







.cta h2{


    font-family:var(--font-title);


    font-size:4rem;


    max-width:900px;


    margin:20px auto;


    line-height:1.2;


}







.cta p{


    max-width:700px;


    margin:0 auto 35px;


    color:#F3F3F3;


    line-height:1.8;


}







.cta-buttons{


    display:flex;


    justify-content:center;


}







.cta .btn-primary{


    padding:18px 45px;


}








/* =====================================================
   BUTTON ANIMATION
===================================================== */


.btn-primary{


    position:relative;


    overflow:hidden;


}







.btn-primary::after{


    content:"";


    position:absolute;


    top:0;


    left:-100%;


    width:100%;


    height:100%;


    background:

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


    transition:.4s;


}







.btn-primary:hover::after{


    left:100%;


}



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


footer{


    background:var(--primary);


    color:white;


    padding:80px 0 30px;


}







footer .container{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:50px;


}







.footer-brand .logo img{


    max-width:220px;


    max-height:65px;


    object-fit:contain;


}







.footer-brand p{


    color:#CFCFCF;


    line-height:1.8;


    margin-top:25px;


    max-width:350px;


}







.footer-links,


.social-links{


    display:flex;


    flex-direction:column;


    gap:15px;


}







footer h4{


    color:var(--secondary);


    font-size:1rem;


    text-transform:uppercase;


    letter-spacing:2px;


    margin-bottom:15px;


}







.footer-links a,


.social-links a{


    color:#E7E7E7;


    transition:var(--transition);


}







.footer-links a:hover,


.social-links a:hover{


    color:white;


    transform:translateX(5px);


}







.footer-bottom{


    margin-top:50px;


    padding-top:25px;


    border-top:

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


    text-align:center;


    color:#CFCFCF;


    font-size:.85rem;


}









/* =====================================================
   WHATSAPP FLOAT
===================================================== */


.whatsapp{


    position:fixed;


    right:30px;


    bottom:30px;


    width:60px;


    height:60px;


    border-radius:50%;


    background:var(--secondary);


    color:white;


    display:flex;


    align-items:center;


    justify-content:center;


    z-index:900;


    box-shadow:

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


    transition:var(--transition);


}







.whatsapp:hover{


    transform:

    translateY(-5px)

    scale(1.05);


}







.whatsapp svg{


    width:28px;


    height:28px;


}









/* =====================================================
   BACK TO TOP
===================================================== */


#backTop{


    position:fixed;


    right:35px;


    bottom:35px;


    width:45px;


    height:45px;


    border-radius:50%;


    background:var(--secondary);


    color:white;


    font-size:1.3rem;


    display:flex;


    align-items:center;


    justify-content:center;


    opacity:0;


    visibility:hidden;


    transform:translateY(20px);


    transition:var(--transition);


    z-index:900;


}







#backTop.active{


    opacity:1;


    visibility:visible;


    transform:translateY(0);


}







#backTop:hover{


    background:var(--secondary-hover);


}









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


#header.scrolled .logo img{


    max-height:55px;


}









/* =====================================================
   ACCESSIBILITY
===================================================== */


a:focus-visible,

button:focus-visible{


    outline:

    2px solid var(--secondary);


    outline-offset:4px;


}









/* =====================================================
   LARGE SCREENS
===================================================== */


@media(min-width:1440px){



.container{


    max-width:1300px;


}





.hero-content h1{


    font-size:5.5rem;


}






.category-card img{


    height:320px;


}






.gallery figure{


    height:420px;


}



}









/* =====================================================
   REDUCE MOTION
===================================================== */


@media(prefers-reduced-motion:reduce){



*{


    animation-duration:

    .01ms!important;


    animation-iteration-count:

    1!important;


    transition-duration:

    .01ms!important;


    scroll-behavior:

    auto!important;


}


}