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


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: "Segoe UI", Arial, sans-serif;

    background: #FAFAF8;

    color: #555;

    line-height: 1.6;

}



img {

    max-width: 100%;

    display: block;

}



a {

    text-decoration: none;

}



.container {

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;

}





/* =====================================================
   VARIÁVEIS
===================================================== */


:root {


    --primary: #C59D5F;

    --primary-dark: #A67C3C;


    --dark: #111111;

    --dark-soft: #1F1F1F;


    --background: #FAFAF8;

    --white: #FFFFFF;


    --title: #1C1C1C;

    --text: #555555;


    --border: #E8E2D8;


    --shadow: 0 15px 40px rgba(0,0,0,.10);


}







/* =====================================================
   TIPOGRAFIA
===================================================== */


h1,
h2,
h3,
h4 {


    color: var(--title);

    font-family: Georgia, "Times New Roman", serif;

    line-height: 1.2;


}



h2 {

    font-size: 2.4rem;

    margin-bottom: 25px;


}



p {

    font-size: 1rem;

}







/* =====================================================
   BOTÃO PRINCIPAL
===================================================== */


.btn-primary {


    display: inline-flex;


    align-items: center;


    gap: 10px;


    padding: 14px 34px;


    background: var(--primary);


    color: var(--white);


    border-radius: 40px;


    font-weight: 600;


    transition: .3s ease;


}



.btn-primary:hover {


    background: var(--primary-dark);


    transform: translateY(-3px);


}







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


.hero {


    position: relative;


    height: 680px;


    display: flex;


    align-items: center;


    overflow: hidden;


}



.hero img {


    position: absolute;


    inset: 0;


    width: 100%;


    height: 100%;


    object-fit: cover;


}





.hero-overlay {


    position: absolute;


    inset: 0;


    background:


    linear-gradient(

        90deg,

        rgba(0,0,0,.80),

        rgba(0,0,0,.35)

    );


}





.hero-content {


    position: relative;


    z-index: 2;


    max-width: 650px;


}





.hero h1 {


    color: var(--white);


    font-size: 3.5rem;


    margin-bottom: 25px;


}





.hero p {


    color: #E5E5E5;


    font-size: 1.25rem;


    margin-bottom: 35px;


}







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


.sobre {


    padding: 100px 0;


    background: var(--white);


}



.grid-2 {


    display: grid;


    grid-template-columns: repeat(2,1fr);


    gap: 70px;


    align-items: center;


}





.sobre-imagem img {


    width: 100%;


    height: 450px;


    object-fit: cover;


    border-radius: 25px;


    box-shadow: var(--shadow);


}





.sobre-texto h2 {


    font-size: 2.3rem;


}





.sobre-texto p {


    margin-bottom: 18px;


    text-align: justify;


    color: var(--text);


}

/* =====================================================
   COLEÇÃO
===================================================== */


.colecao {


    padding: 100px 0;


    background: var(--background);


}



.section-header {


    text-align: center;


    max-width: 700px;


    margin: 0 auto 60px;


}



.section-header h2 {


    font-size: 2.5rem;


}



.section-header p {


    color: var(--text);


    font-size: 1.1rem;


}







/* =====================================================
   GRID DE PRODUTOS
===================================================== */


.grid-3 {


    display: grid;


    grid-template-columns: repeat(3, 1fr);


    gap: 35px;


}






.produto-card {


    background: var(--white);


    border-radius: 25px;


    overflow: hidden;


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


    transition: .4s ease;


}





.produto-card:hover {


    transform: translateY(-10px);


    box-shadow: var(--shadow);


}





.produto-card img {


    width: 100%;


    height: 320px;


    object-fit: cover;


}







.produto-info {


    padding: 30px;


}





.produto-info h3 {


    font-size: 1.4rem;


    margin-bottom: 15px;


}





.produto-info p {


    color: var(--text);


    margin-bottom: 25px;


}







.link-card {


    display: inline-flex;


    align-items: center;


    gap: 10px;


    color: var(--primary-dark);


    font-weight: 600;


}



.link-card:hover {


    color: var(--primary);


}








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


.diferenciais {


    padding: 90px 0;


    background: var(--dark);


}






.diferenciais .grid-3 {


    gap: 30px;


}





.diferencial {


    text-align: center;


    padding: 40px 30px;


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


    border-radius: 20px;


    background: var(--dark-soft);


}





.diferencial h3 {


    color: var(--white);


    margin: 20px 0 15px;


    font-size: 1.3rem;


}





.diferencial p {


    color: #CCCCCC;


}







.icon-circle {


    width: 75px;


    height: 75px;


    margin: 0 auto;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background: rgba(197,157,95,.15);


    color: var(--primary);


    font-size: 30px;


}

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


.cta {


    padding: 90px 0;


    background: linear-gradient(

        135deg,

        #C59D5F,

        #A67C3C

    );


    text-align: center;


    color: var(--white);


}





.cta h2 {


    color: var(--white);


    font-size: 2.5rem;


    margin-bottom: 20px;


}





.cta p {


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


    max-width: 700px;


    margin: 0 auto 35px;


    font-size: 1.15rem;


}





.cta .btn-primary {


    background: var(--white);


    color: var(--primary-dark);


}





.cta .btn-primary:hover {


    background: #F5F5F5;


}







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


.footer {


    background: var(--dark);


    color: #CCCCCC;


    padding: 70px 0 25px;


}





.footer-container {


    display:grid;


    grid-template-columns: repeat(3,1fr);


    gap:50px;


}





.footer-column h3,
.footer-column h4 {


    color: var(--white);


    margin-bottom:20px;


}





.footer-column p {


    color:#BDBDBD;


}





.footer-column ul {


    list-style:none;


}





.footer-column li {


    margin-bottom:12px;


}





.footer-column a {


    color:#BDBDBD;


    transition:.3s;


}





.footer-column a:hover {


    color:var(--primary);


}





.social-links {


    display:flex;


    gap:15px;


    margin-top:20px;


}





.social-links a {


    width:42px;


    height:42px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:rgba(255,255,255,.08);


    color:white;


}





.social-links a:hover {


    background:var(--primary);


}






.footer-bottom {


    margin-top:50px;


    padding-top:25px;


    border-top:1px solid rgba(255,255,255,.1);


    text-align:center;


}





.footer-bottom p {


    font-size:.9rem;


}







/* =====================================================
   WHATSAPP FLUTUANTE
===================================================== */


.whatsapp-float {


    position:fixed;


    right:25px;


    bottom:25px;


    width:60px;


    height:60px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:#25D366;


    color:white;


    font-size:30px;


    z-index:100;


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


    transition:.3s;


}





.whatsapp-float:hover {


    transform:scale(1.1);


}







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


@media(max-width:900px){



    .grid-2 {


        grid-template-columns:1fr;


    }





    .grid-3 {


        grid-template-columns:repeat(2,1fr);


    }





    .hero {


        height:560px;


    }





    .hero h1 {


        font-size:2.8rem;


    }





    .footer-container {


        grid-template-columns:1fr 1fr;


    }



}







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


@media(max-width:600px){



    .container {


        width:92%;


    }





    h2 {


        font-size:2rem;


    }





    .hero {


        height:520px;


        text-align:center;


    }





    .hero-content {


        margin:auto;


    }





    .hero h1 {


        font-size:2.2rem;


    }





    .hero p {


        font-size:1rem;


    }





    .grid-3 {


        grid-template-columns:1fr;


    }





    .sobre,
    .colecao,
    .diferenciais,
    .cta {


        padding:60px 0;


    }





    .sobre-imagem img {


        height:300px;


    }





    .produto-card img {


        height:260px;


    }





    .footer-container {


        grid-template-columns:1fr;


        text-align:center;


    }





    .social-links {


        justify-content:center;


    }





    .whatsapp-float {


        width:55px;


        height:55px;


        right:18px;


        bottom:18px;


    }



}