/*
=========================================================
O FINO DA ROÇA
STYLE.CSS
Versão final da estrutura visual pública
=========================================================
*/

:root {

    --verde-escuro: #173826;
    --verde: #24513a;
    --verde-claro: #3f7053;

    --creme: #f6f0e6;
    --creme-claro: #fbf8f2;

    --dourado: #c9a66b;
    --marrom: #7b5a3a;

    --texto: #2e2e2e;
    --texto-claro: #6e6e6e;

    --branco: #ffffff;

    --sombra:
        0 12px 30px
        rgba(0,0,0,.08);
}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        'Poppins',
        sans-serif;

    background:
        var(--creme-claro);

    color:
        var(--texto);

    line-height: 1.7;

}


img {

    display: block;

    max-width: 100%;

}


a {

    text-decoration: none;

}


h1,
h2,
h3,
h4,
h5 {

    font-family:
        'Cormorant Garamond',
        serif;

}


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

.header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

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

    backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid
        rgba(0,0,0,.04);

    transition:
        .3s ease;

}


.header-scroll {

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

}


.navbar {

    min-height: 96px;

}


.navbar-brand {

    display: flex;

    align-items: center;

}


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

.logo {

    width: auto;

    max-width: 195px;

    height: 74px;

    object-fit: contain;

}


.logo-texto {

    display: flex;

    flex-direction: column;

    line-height: .95;

}


.logo-texto span {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size: 31px;

    font-weight: 700;

    color:
        var(--verde-escuro);

}


.logo-texto small {

    margin-top: 7px;

    color:
        var(--dourado);

    font-size: 9px;

    letter-spacing: 4px;

    text-transform: uppercase;

}


/* =====================================================
MENU
===================================================== */

.nav-link {

    position: relative;

    margin-left: 15px;

    padding:
        11px 7px !important;

    color:
        var(--verde-escuro);

    font-size: 14px;

    font-weight: 500;

}


.nav-link::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 4px;

    width: 0;

    height: 2px;

    background:
        var(--dourado);

    transform:
        translateX(-50%);

    transition:
        width .25s ease;

}


.nav-link:hover,
.nav-link.ativo {

    color:
        var(--verde);

}


.nav-link:hover::after,
.nav-link.ativo::after {

    width: 75%;

}


.header-instagram {

    width: 42px;

    height: 42px;

    margin-left: 20px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    color:
        var(--verde);

    background:
        var(--creme);

    font-size: 18px;

    transition:
        .25s ease;

}


.header-instagram:hover {

    color: white;

    background:
        var(--verde);

}


.header-whatsapp {

    margin-left: 12px;

}


/* =====================================================
BOTÕES
===================================================== */

.btn-success {

    background:
        var(--verde);

    border-color:
        var(--verde);

    border-radius:
        999px;

    padding:
        12px 26px;

    font-weight: 500;

}


.btn-success:hover {

    background:
        var(--verde-escuro);

    border-color:
        var(--verde-escuro);

}


.btn-outline-success {

    color:
        var(--verde);

    border-color:
        var(--verde);

    border-radius:
        999px;

}


.btn-outline-success:hover {

    color: white;

    background:
        var(--verde);

    border-color:
        var(--verde);

}


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

.hero {

    min-height: 100vh;

    padding-top: 96px;

    position: relative;

    display: flex;

    align-items: center;

    background-size: cover;

    background-position: center;

}


.hero-content {

    max-width: 720px;

    padding:
        50px 0;

    color: white;

}


.hero-subtitle {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        #f1d19c;

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        3px;

}


.hero h1 {

    max-width:
        720px;

    margin-bottom:
        22px;

    color: white;

    font-size:
        clamp(
            48px,
            6vw,
            78px
        );

    font-weight:
        700;

    line-height:
        .98;

}


.hero p {

    max-width:
        620px;

    margin-bottom:
        32px;

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

    font-size:
        19px;

}


.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 13px;

}


/* =====================================================
LABEL
===================================================== */

.section-label {

    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        var(--dourado);

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        3px;

}


/* =====================================================
INTRODUÇÃO
===================================================== */

.introducao {

    padding:
        95px 0;

    background:
        var(--creme);

}


.introducao .container {

    max-width:
        930px;

}


.introducao h2,
.titulo h2,
.historia h2,
.contato-home h2 {

    margin-bottom:
        18px;

    color:
        var(--verde-escuro);

    font-size:
        50px;

    line-height:
        1.08;

}


.introducao p {

    color:
        var(--texto-claro);

    font-size:
        17px;

}


/* =====================================================
TÍTULOS
===================================================== */

.titulo {

    margin-bottom:
        55px;

    text-align: center;

}


.titulo p {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        var(--texto-claro);

}


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

.categorias {

    padding:
        105px 0;

}


.categoria-link {

    display: block;

    height: 100%;

}


.categoria-card {

    height: 100%;

}


.categoria-imagem {

    height:
        310px;

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        22px;

    background:
        #e8e3d9;

    box-shadow:
        var(--sombra);

}


.categoria-imagem img {

    width: 100%;

    height: 100%;

    object-fit:
        cover;

    transition:
        transform .45s ease;

}


.categoria-card:hover
.categoria-imagem img {

    transform:
        scale(1.06);

}


.categoria-overlay {

    position: absolute;

    inset:
        auto 0 0 0;

    min-height:
        145px;

    padding:
        55px 24px 22px;

    display:
        flex;

    align-items:
        flex-end;

    background:
        linear-gradient(
            transparent,
            rgba(10,28,18,.88)
        );

}


.categoria-overlay h3 {

    margin: 0;

    color: white;

    font-size:
        30px;

}


.categoria-overlay span {

    display:
        inline-flex;

    gap: 7px;

    align-items:
        center;

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

    font-size:
        12px;

}


.categoria-sem-foto {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: #888;

}


.categoria-sem-foto i {

    margin-bottom:
        8px;

    font-size:
        40px;

}


/* =====================================================
PRODUTOS DESTAQUE
===================================================== */

.destaques {

    padding:
        105px 0;

    background: white;

}


.produto-card {

    height: 100%;

    overflow: hidden;

    border-radius:
        22px;

    background:
        var(--creme-claro);

    box-shadow:
        var(--sombra);

    transition:
        .3s ease;

}


.produto-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 18px 42px
        rgba(0,0,0,.13);

}


.produto-imagem {

    height:
        260px;

    position:
        relative;

    overflow:
        hidden;

    background:
        #ebe6de;

}


.produto-imagem img {

    width: 100%;

    height: 100%;

    object-fit:
        cover;

}


.produto-sem-foto {

    height: 100%;

    min-height:
        240px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #999;

    font-size:
        40px;

}


.produto-categoria {

    position:
        absolute;

    top: 15px;

    left: 15px;

    padding:
        7px 13px;

    border-radius:
        999px;

    background:
        rgba(23,56,38,.92);

    color: white;

    font-size:
        10px;

    letter-spacing:
        .7px;

}


.produto-conteudo {

    padding:
        25px;

}


.produto-conteudo h3 {

    margin-bottom:
        10px;

    color:
        var(--verde-escuro);

    font-size:
        28px;

}


.produto-conteudo p {

    min-height:
        48px;

    color:
        var(--texto-claro);

    font-size:
        14px;

}


.produto-link {

    color:
        var(--verde);

    font-size:
        14px;

    font-weight:
        600;

}


/* =====================================================
HISTÓRIA
===================================================== */

.historia {

    padding:
        115px 0;

    background:
        var(--creme);

}


.historia-imagem {

    overflow: hidden;

    min-height:
        510px;

    border-radius:
        28px;

    background:
        #ddd;

    box-shadow:
        var(--sombra);

}


.historia-imagem img {

    width: 100%;

    height: 510px;

    object-fit:
        cover;

}


.historia p {

    margin-bottom:
        18px;

    color:
        var(--texto-claro);

}


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

.galeria-home {

    padding:
        105px 0;

}


.galeria-grid {

    display: grid;

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

    gap: 17px;

}


.galeria-item {

    height:
        280px;

    position:
        relative;

    overflow: hidden;

    border-radius:
        20px;

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

}


.galeria-item img {

    width: 100%;

    height: 100%;

    object-fit:
        cover;

    transition:
        transform .4s ease;

}


.galeria-item:hover img {

    transform:
        scale(1.05);

}


.galeria-hover {

    position: absolute;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background:
        rgba(15,40,26,.45);

    opacity: 0;

    transition:
        opacity .3s;

}


.galeria-hover i {

    color: white;

    font-size:
        35px;

}


.galeria-item:hover
.galeria-hover {

    opacity: 1;

}


/* =====================================================
CONTATO
===================================================== */

.contato-home {

    padding:
        115px 0;

    background:
        white;

}


.contato-item {

    display: flex;

    gap: 17px;

    margin-bottom:
        24px;

}


.contato-item > i {

    width: 48px;

    height: 48px;

    flex:
        0 0 48px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius:
        50%;

    background:
        var(--verde);

    color: white;

    font-size:
        20px;

}


.contato-item strong {

    color:
        var(--verde-escuro);

}


.contato-item p {

    margin:
        3px 0 0;

    color:
        var(--texto-claro);

}


.mapa-placeholder {

    min-height:
        440px;

    padding:
        50px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    border-radius:
        28px;

    background:
        linear-gradient(
            135deg,
            #173826,
            #28563d
        );

    color: white;

    box-shadow:
        var(--sombra);

}


.mapa-placeholder > i {

    color:
        var(--dourado);

    font-size:
        55px;

}


.mapa-placeholder h3 {

    margin-top:
        13px;

    color: white;

    font-size:
        39px;

}


/* =====================================================
PÁGINA TOPO
===================================================== */

.pagina-topo {

    padding:
        175px 0 85px;

    background:
        linear-gradient(
            135deg,
            #173826,
            #28563d
        );

    color: white;

}


.pagina-topo h1 {

    color: white;

    font-size:
        58px;

}


.pagina-topo p {

    max-width:
        720px;

    margin:
        0 auto;

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

}


/* =====================================================
CATÁLOGO
===================================================== */

.catalogo {

    padding:
        80px 0 110px;

}


.filtros-produtos {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;

    margin-bottom:
        55px;

}


.filtro-btn {

    padding:
        10px 19px;

    border:
        1px solid #ddd4c8;

    border-radius:
        999px;

    background: white;

    color:
        var(--verde-escuro);

}


.filtro-btn:hover,
.filtro-btn.ativo {

    border-color:
        var(--verde);

    background:
        var(--verde);

    color: white;

}


.catalogo-card {

    height: 100%;

    overflow: hidden;

    border-radius:
        20px;

    background: white;

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

    transition:
        .3s;

}


.catalogo-card:hover {

    transform:
        translateY(-7px);

}


.catalogo-imagem {

    height:
        260px;

    position:
        relative;

    overflow:
        hidden;

    background:
        #eee9e1;

}


.catalogo-imagem img {

    width: 100%;

    height: 100%;

    object-fit:
        cover;

}


.catalogo-conteudo {

    padding:
        24px;

}


.catalogo-conteudo h3 {

    color:
        var(--verde-escuro);

    font-size:
        28px;

}


.catalogo-conteudo p {

    min-height:
        70px;

    color:
        var(--texto-claro);

    font-size:
        14px;

}


.sem-produtos {

    max-width:
        600px;

    margin:
        25px auto;

    padding:
        65px 30px;

    border-radius:
        22px;

    background: white;

    text-align: center;

    box-shadow:
        var(--sombra);

}


/* =====================================================
PRODUTO DETALHE
===================================================== */

.pagina-produto-topo {

    padding-bottom:
        35px;

}


.produto-breadcrumb {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

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

    font-size:
        13px;

}


.produto-breadcrumb a {

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

}


.produto-detalhe {

    padding:
        90px 0 105px;

}


.produto-detalhe-imagem {

    min-height:
        520px;

    overflow:
        hidden;

    border-radius:
        26px;

    background:
        #eee7de;

    box-shadow:
        var(--sombra);

}


.produto-detalhe-imagem img {

    width: 100%;

    height:
        520px;

    object-fit:
        cover;

}


.produto-detalhe-sem-foto {

    min-height:
        520px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: #999;

}


.produto-detalhe-categoria {

    display:
        inline-block;

    margin-bottom:
        16px;

    padding:
        8px 14px;

    border-radius:
        999px;

    background:
        #edf3ef;

    color:
        var(--verde);

    font-size:
        12px;

    font-weight:
        600;

}


.produto-detalhe-conteudo h1 {

    margin-bottom:
        22px;

    color:
        var(--verde-escuro);

    font-size:
        58px;

    line-height:
        1.05;

}


.produto-descricao {

    margin-bottom:
        28px;

    color:
        var(--texto-claro);

    font-size:
        17px;

}


.produto-aviso {

    display: flex;

    gap: 17px;

    margin-bottom:
        28px;

    padding:
        20px;

    border:
        1px solid #eadfce;

    border-radius:
        18px;

    background:
        var(--creme);

}


.produto-aviso > i {

    width: 46px;

    height: 46px;

    flex:
        0 0 46px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius:
        50%;

    background:
        var(--verde);

    color: white;

}


.produto-acoes {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}


.produto-voltar {

    display:
        inline-block;

    margin-top:
        28px;

    color:
        var(--verde);

}


.produtos-relacionados {

    padding:
        95px 0 110px;

    background: white;

}


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

.footer {

    padding:
        78px 0 28px;

    background:
        #10271b;

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

}


.footer h3,
.footer h4 {

    color: white;

}


.footer h4 {

    margin-bottom:
        20px;

    font-size:
        22px;

}


.footer-logo {

    max-width:
        180px;

    max-height:
        100px;

    margin-bottom:
        20px;

    object-fit:
        contain;

    filter:
        brightness(0)
        invert(1);

}


.footer-marca {

    font-size:
        35px;

}


.footer-descricao {

    max-width:
        330px;

}


.footer-social {

    display: flex;

    gap: 10px;

    margin-top:
        22px;

}


.footer-social a {

    width: 44px;

    height: 44px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius:
        50%;

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

    color: white;

    transition:
        .25s;

}


.footer-social a:hover {

    background:
        var(--dourado);

}


.footer-links {

    list-style:
        none;

    padding: 0;

}


.footer-links li {

    margin-bottom:
        10px;

}


.footer-links a {

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

}


.footer-links a:hover {

    color:
        var(--dourado);

}


.footer-info {

    display: flex;

    gap: 12px;

    margin-bottom:
        15px;

}


.footer-info i {

    color:
        var(--dourado);

}


.footer-info p {

    margin: 0;

}


.footer-info a {

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

}


.footer hr {

    margin:
        50px 0 25px;

    border-color:
        rgba(255,255,255,.13);

}


.footer-bottom {

    display: flex;

    justify-content:
        space-between;

    gap: 20px;

    font-size:
        12px;

}


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

.whatsapp-flutuante {

    position: fixed;

    right: 24px;

    bottom: 24px;

    width: 59px;

    height: 59px;

    z-index: 998;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius:
        50%;

    background:
        #25d366;

    color: white;

    font-size:
        28px;

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

    transition:
        .25s;

}


.whatsapp-flutuante:hover {

    color: white;

    transform:
        translateY(-3px)
        scale(1.04);

}


/* =====================================================
BOTÃO TOPO
===================================================== */

.btn-topo {

    position: fixed;

    right: 31px;

    bottom: 96px;

    width: 45px;

    height: 45px;

    z-index: 997;

    border: 0;

    border-radius:
        50%;

    background:
        var(--verde-escuro);

    color: white;

    opacity: 0;

    visibility:
        hidden;

    transform:
        translateY(10px);

    transition:
        .25s;

}


.btn-topo.visivel {

    opacity: 1;

    visibility:
        visible;

    transform:
        translateY(0);

}


/* =====================================================
RESPONSIVO
===================================================== */

@media (
    max-width: 991px
) {

    .navbar {

        min-height:
            82px;

    }


    .logo {

        height:
            60px;

        max-width:
            165px;

    }


    .navbar-collapse {

        margin-top:
            10px;

        padding:
            20px;

        border-radius:
            17px;

        background: white;

        box-shadow:
            var(--sombra);

    }


    .nav-link {

        margin-left: 0;

        padding:
            11px 4px !important;

    }


    .nav-link::after {

        display: none;

    }


    .header-instagram {

        margin:
            10px 0;

    }


    .header-whatsapp {

        margin:
            5px 0 0;

    }


    .galeria-grid {

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

    }


    .produto-detalhe-conteudo h1 {

        font-size:
            48px;

    }

}


@media (
    max-width: 767px
) {

    .hero {

        min-height:
            700px;

        text-align: center;

    }


    .hero-content {

        margin:
            0 auto;

    }


    .hero p {

        font-size:
            16px;

    }


    .hero-buttons {

        justify-content:
            center;

    }


    .introducao,
    .categorias,
    .destaques,
    .historia,
    .galeria-home,
    .contato-home {

        padding:
            75px 0;

    }


    .introducao h2,
    .titulo h2,
    .historia h2,
    .contato-home h2 {

        font-size:
            38px;

    }


    .categoria-imagem {

        height:
            300px;

    }


    .historia-imagem,
    .historia-imagem img {

        min-height:
            370px;

        height:
            370px;

    }


    .galeria-grid {

        grid-template-columns:
            1fr;

    }


    .galeria-item {

        height:
            300px;

    }


    .pagina-topo {

        padding:
            140px 0 65px;

    }


    .pagina-topo h1 {

        font-size:
            43px;

    }


    .produto-detalhe {

        padding:
            65px 0;

    }


    .produto-detalhe-imagem,
    .produto-detalhe-imagem img,
    .produto-detalhe-sem-foto {

        min-height:
            380px;

        height:
            380px;

    }


    .produto-detalhe-conteudo h1 {

        font-size:
            40px;

    }


    .produto-acoes .btn {

        width: 100%;

    }


    .footer-bottom {

        flex-direction:
            column;

    }

}


@media (
    max-width: 480px
) {

    .logo {

        height:
            54px;

        max-width:
            145px;

    }


    .hero-buttons .btn {

        width: 100%;

    }


    .whatsapp-flutuante {

        right: 17px;

        bottom: 17px;

    }


    .btn-topo {

        right: 24px;

        bottom: 88px;

    }

}