html {
    scroll-behavior: smooth;
}

:root {
    --shadow-soft: 0 14px 35px rgba(74, 43, 29, 0.08);
    --shadow-medium: 0 20px 45px rgba(74, 43, 29, 0.12);
    --border-soft: rgba(190, 166, 146, 0.22);
}

body {
    background: #fffffa;
}

#site-nav a,
button,
img,
article,
.track-whatsapp,
#contato .grid > div,
#servicos article,
#galeria .lightbox-trigger {
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        opacity .3s ease;
}

#site-nav #nav-shell {
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(234, 223, 213, 0.8);
    box-shadow: 0 12px 30px rgba(74, 43, 29, 0.08);
}

#mobile-menu {
    background: #ffffff;
}

#hero {
    overflow: hidden;
    isolation: isolate;
    background-position: center center;
    background-color: rgba(0, 0, 0, 0.70);
    background-blend-mode: multiply;
}

#hero .hero-title {
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
}

#hero .hero-text {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

#hero h1,
#sobre h2,
#servicos h2,
#galeria h2,
#contato h2 {
    text-wrap: balance;
    letter-spacing: -0.03em;
}

#hero p,
#sobre p,
#servicos p,
#galeria p,
#contato p {
    text-wrap: pretty;
}

#hero .relative.z-10 > div:last-child a {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

#hero .relative.z-10 > div:last-child a:hover {
    transform: translateY(-2px);
}

#sobre .container,
#servicos .container,
#galeria .container,
footer#contato .container {
    position: relative;
    z-index: 2;
}

#sobre img,
#galeria .lightbox-trigger img {
    transition: transform .5s ease, filter .5s ease, box-shadow .3s ease;
}

#sobre img:hover {
    transform: translateY(-3px) scale(1.01);
}

#sobre .max-w-\[780px\] > div,
#contato .grid > div,
#servicos article {
    overflow: hidden;
}

#servicos article {
    position: relative;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow-soft);
    backdrop-filter: none;
}

#servicos article:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-medium) !important;
}


#servicos .service-media {
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(190, 166, 146, 0.16);
}

#servicos .service-photo {
    display: block;
    width: 100%;
    object-fit: cover;
    transition: transform .6s ease, filter .4s ease;
    box-shadow: 0 10px 24px rgba(74, 43, 29, 0.08);
}

#servicos .service-icon {
    box-shadow: 0 10px 24px rgba(74, 43, 29, 0.16);
}

#servicos article:hover .service-photo {
    transform: scale(1.04);
    filter: saturate(1.03);
}


#galeria {
    box-shadow: none;
}

#galeria .lightbox-trigger {
    border: 1px solid rgba(255, 255, 255, 0.14);
}

#galeria .lightbox-trigger:hover img {
    transform: scale(1.05);
}

#contato .grid > div {
    background: #fffdfa;
    box-shadow: var(--shadow-soft);
    border-color: var(--border-soft);
}

#contato .grid > div:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-medium);
}

#lightbox {
    background: rgba(0, 0, 0, 0.9);
}

#mobile-menu-backdrop {
    background: rgba(0, 0, 0, 0.35);
}

/* =========================================
   Slider Antes & Depois (Custom Range)
========================================= */
.ba-slider::-webkit-slider-thumb {
    appearance: none;
    width: 50px;
    height: 100vh;
    cursor: ew-resize;
    background: transparent;
}
.ba-slider::-moz-range-thumb {
    width: 50px;
    height: 100vh;
    cursor: ew-resize;
    border: none;
    background: transparent;
}

/* Modo Tela Cheia (Imersão Total) */
#ba-carousel-container.is-fullscreen {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 99999;
    border-radius: 0;
    background: rgba(18, 13, 9, 0.98); /* Fundo muito escuro baseado no coffee */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

#ba-carousel-container.is-fullscreen #ba-carousel-viewport {
    border-radius: 0;
    width: 100%;
    height: auto;
    max-height: 100vh;
}

/* Ajusta as proporções para a imagem não cortar em tela cheia */
#ba-carousel-container.is-fullscreen .ba-slide {
    aspect-ratio: auto;
    height: 90vh; /* Deixa uma margem para respirar */
}
#ba-carousel-container.is-fullscreen .ba-slide img {
    object-fit: contain;
}

#ba-carousel-container.is-fullscreen #ba-prev { left: 15px; }
#ba-carousel-container.is-fullscreen #ba-next { right: 15px; }
#ba-carousel-container.is-fullscreen #ba-dots { bottom: 15px; }

/* =========================================
   Correção de Sobreposição na Tela Cheia
========================================= */
/* Esconde o menu e botões flutuantes quando a galeria estiver expandida */
body.ba-fullscreen-mode #site-nav,
body.ba-fullscreen-mode > div.fixed.z-50 {
    display: none !important;
}

/* Garante que a seção da galeria quebre qualquer bloqueio e vá para frente de tudo */
body.ba-fullscreen-mode section#galeria {
    z-index: 999999 !important;
}

@media (max-width: 768px) {
    #hero {
        min-height: 100svh;
    }
    #hero .relative.z-10 {
        padding-top: 2.4rem;
        padding-bottom: 2.4rem;
    }
}



#faq {
    background: #f8f2ec;
}

#faq h2 {
    text-wrap: balance;
}

#faq p {
    text-wrap: pretty;
}

#faq .faq-item {
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background-color .3s ease;
    box-shadow: 0 12px 30px rgba(74, 43, 29, 0.05);
}

#faq .faq-item:hover {
    box-shadow: 0 18px 42px rgba(74, 43, 29, 0.08);
}

#faq .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

#faq .faq-icon {
    transition: transform .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
}

#faq .faq-item.is-open {
    border-color: rgba(150, 112, 81, 0.28);
    background: #fffdf9;
}

#faq .faq-item.is-open .faq-icon {
    transform: rotate(45deg);
    background: rgba(190, 166, 146, 0.18);
    border-color: rgba(190, 166, 146, 0.32);
}


#depoimentos h2 {
    text-wrap: balance;
    letter-spacing: -0.03em;
}

#depoimentos p {
    text-wrap: pretty;
}

#depoimentos .depoimento-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(74, 43, 29, 0.12);
}