/* =========================
   RESET BÁSICO
   ========================= */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Montserrat',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:#201a18;
    background:#f6e9df;
    line-height:1.6;
}

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

h1,
h2,
h3,
h4{
    font-family:'Playfair Display','Times New Roman',serif;
    color:#1c1513;
}

h1{
    font-size:3rem;
    line-height:1.05;
    letter-spacing:.02em;
}

h2{
    font-size:2.7rem;
    line-height:1.1;
    margin-bottom:1rem;
}

h3{
    font-size:1.1rem;
}

/* =========================
   LAYOUT GERAL
   ========================= */

.section{
    padding:6rem 2rem;
}

.section-inner h1{
    text-align:center;
    margin-bottom:1.2rem;
}

.section-intro{
    text-align:center;
    max-width:820px;
    margin:0 auto 5rem;
}
/* =========================
   HEADER
   ========================= */

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    background:#0f0f0f;
    color:#f6e9df;
}

.top-bar{
    border-bottom:1px solid rgba(255,255,255,.08);
}

.top-bar-inner{

    max-width:1320px;

    margin:0 auto;

    padding:.65rem 2rem;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    text-transform:uppercase;

    letter-spacing:.14em;

    font-size:.72rem;
}

.main-nav{
    max-width:1320px;
    margin:0 auto;

    padding:0;

    display:flex;
    align-items:center;

    justify-content:flex-end;

    position:relative;

    gap:1rem;
}

.main-nav ul{
    list-style:none;
    display:flex;
    gap:1.4rem;
}

.main-nav a{
    text-decoration:none;
    color:#f6e9df;
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size:.82rem;
}

.main-nav a:hover{
    opacity:.75;
}

.main-nav .active{
    border-bottom:1px solid #f2b8b1;
    padding-bottom:2px;
}

.nav-left{
    margin-right:auto;
}

.nav-right{
    margin-left:auto;
}

.nav-cta{
    background:#f2b8b1;
    color:#111111;
    border-radius:999px;
    padding:.75rem 1.6rem;
    border:1px solid #f2b8b1;
    transition:.3s ease;
    white-space:nowrap;
    position:relative;
    top:-8px;
}

.nav-cta:hover{
    background:transparent;
    color:#f6e9df;
}

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

.hero{
    position:relative;

    min-height:110vh;

    display:flex;
    align-items:center;

    overflow:hidden;

    padding:140px 6vw 5rem;

    background:#000;
}

.hero-bg{
    position:absolute;
    inset:0;
}

.hero-bg img{

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    display:block;

    transform:scale(1.08);

    transition:transform .8s ease;

    animation:heroZoom 4s ease forwards;

    will-change:transform;
}

.hero-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to right,
        rgba(0,0,0,.62) 0%,
        rgba(0,0,0,.32) 40%,
        rgba(0,0,0,.12) 100%
    );

    opacity:1;

    animation:
    heroLight 1.8s ease forwards;
}

@keyframes heroLight{

    from{
        opacity:1;
    }

    to{
        opacity:.82;
    }

}

.hero-content{
    position:relative;
    z-index:5;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;

    text-align:left;

    max-width:700px;
}

.hero-content h1{

    color:#fff;

    opacity:0;

    transform:translateY(40px);

    animation:
    heroTitle 1.2s ease forwards;

    animation-delay:.8s;
}

.hero-tag{

    display:block;

    margin-bottom:1.2rem;

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

    text-transform:uppercase;

    letter-spacing:.28em;

    font-size:.72rem;

    font-weight:500;

    opacity:0;

    transform:translateY(20px);

    animation:
    heroTag 1s ease forwards;

    animation-delay:.3s;
}
@keyframes heroTag{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero-line{

    width:65px;

    height:1px;

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

    margin:1.8rem 0;

    opacity:0;

    transform:translateX(-30px);

    animation:
    heroLine .8s ease forwards;

    animation-delay:1.2s;
}

@keyframes heroLine{

    from{

        opacity:0;

        transform:translateX(-30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes heroTitle{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero-content p{

    margin-top:1.2rem;

    max-width:520px;

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

    font-size:1.05rem;

    opacity:0;

    transform:translateY(30px);

    animation:
    heroText 1s ease forwards;

    animation-delay:1.5s;
}

@keyframes heroText{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero-buttons{

    margin-top:2.2rem;

    display:flex;

    gap:1rem;

    opacity:0;

    transform:translateY(30px);

    animation:
    heroButton 1s ease forwards;

    animation-delay:2.2s;
}


@keyframes heroButton{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero .btn-outline{
    border:1px solid rgba(255,255,255,.22);
    color:#fff;

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

    backdrop-filter:blur(10px);

    text-decoration:none;

    padding:1rem 2.2rem;

    border-radius:999px;

    letter-spacing:.14em;

    text-transform:uppercase;

    font-size:.78rem;

    transition:.35s ease;

    position:relative;

    overflow:hidden;
}


.hero .btn-outline::before{

    content:'';

    position:absolute;

    top:-50%;
    left:-120%;

    width:40px;
    height:220%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.75),
        transparent
    );

    transform:rotate(25deg);

    animation:shine 11s infinite;
}


.hero .btn-outline:hover{
    background:#fff;
    color:#111;
    transform:translateY(-2px);
}

@keyframes shine{

    0%{
        left:-120%;
    }

    120%{
        left:130%;
    }

    100%{
        left:130%;
    }

}

@keyframes heroZoom{

    from{
        transform:scale(1.08);
    }

    to{
        transform:scale(1);
    }

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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.95rem 2.4rem;

    border-radius:999px;

    text-decoration:none;

    text-transform:uppercase;
    letter-spacing:.16em;

    font-size:.78rem;
    font-weight:500;

    transition:.35s ease;
}

.btn-outline,
.btn-secondary,
.btn-primary{
    background:#0f0f0f;
    color:#f6e9df;
    border:1px solid #0f0f0f;
}

.btn-outline:hover,
.btn-secondary:hover,
.btn-primary:hover{
    background:#1b1b1b;

    color:#f2b8b1;

    border-color:#f2b8b1;

    transform:translateY(-2px);

    box-shadow:
    0 14px 34px rgba(0,0,0,.16);
}

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

.two-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5rem;
    align-items:center;
}

.col-text p{
    color:#62524b;
    font-size:1.05rem;
    line-height:1.8;
}

.col-text strong{

    font-weight:600;

    color:#2d2320;

    letter-spacing:-0.01em;
}

.col-text p:last-of-type{

    position:relative;

    margin-top:2rem;

    padding-left:1.4rem;

    max-width:620px;

    color:#4f433e;

    font-size:1.08rem;

    line-height:1.95;
}

.col-text p:last-of-type::before{

    content:'';

    position:absolute;

    left:0;
    top:.4rem;

    width:2px;
    height:78%;

    background:
    linear-gradient(
    to bottom,
    #d8b2a2,
    rgba(216,178,162,.15)
    );
}

.col-image{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.col-image::before{

    content:'';

    position:absolute;

    width:70%;
    height:70%;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(242,184,177,.16),
        transparent 72%
    );

    filter:blur(45px);

    z-index:0;
}

.col-image img{
    position:relative;
    z-index:2;

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

    display:block;

    filter:drop-shadow(0 22px 40px rgba(0,0,0,.10));

    transform:none;

    image-rendering:auto;
}
/* =========================
   CTA BOOKING
   ========================= */

.section-cta-booking{
    background:#edd7ca;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.section-cta-booking::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,rgba(255,255,255,.12),transparent);
    pointer-events:none;
}

.section-cta-booking h2{
    max-width:860px;
    margin:0 auto;
}

.section-cta-booking p{
    max-width:620px;
    margin:1rem auto 2rem;
    color:#5d4e47;
    font-size:1.05rem;
}


/* =========================
   LOJA
   ========================= */

.stores{
    background:#f6e9df;
}

.stores-single{
    text-align:center;
}

.stores-label{
    display:inline-block;
    margin-bottom:1rem;

    text-transform:uppercase;
    letter-spacing:.30em;

    font-size:.72rem;

    color:#b08d80;
}

.single-store{
    margin-top:3rem;
}

.featured-store{
    width:100%;
    max-width:800px;

    margin:0 auto;

    background:
    linear-gradient(
    145deg,
    #edd7ca,
    #e6d0c3
    );

    border-radius:34px;
    border:1px solid rgba(0,0,0,.08);

    padding:3.5rem 4rem;

    position:relative;

    overflow:hidden;

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

    box-shadow:
0 30px 80px rgba(0,0,0,.05),
inset 0 1px 0 rgba(10, 0, 0, 0.885);
}

.featured-store::before{
    content:'';

    position:absolute;

    width:520px;
    height:520px;

    border-radius:50%;

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

    top:-220px;
    right:-160px;

    filter:blur(30px);
}

.featured-store::after{
    content:'';

    position:absolute;

    top:0;
    left:50%;

    transform:translateX(-50%);

    width:140px;
    height:1px;

    background:rgba(0,0,0,.12);
}

.store-content{
    position:relative;
    z-index:2;

    text-align:center;

    max-width:650px;
}

.store-content h3{
    font-size:2.5rem;

    margin-bottom:1.4rem;

    text-transform:uppercase;

    letter-spacing:.18em;
}

.store-address{
    margin-bottom:1rem;

    color:#4f433e;

    font-size:1.08rem;

    line-height:1.9;
}

.store-phone a{

    color:#4f433e;

    text-decoration:none;

    font-size:1.1rem;

    font-weight:500;

    letter-spacing:.04em;

    transition:.3s ease;
}

.store-phone a:hover{
    opacity:.7;
}

.store-hours{

    margin-top:1rem;
    
    margin-bottom:1.6rem;

    color:#7b675f;

    font-size:1rem;

    letter-spacing:.08em;
}
/* =========================
   SERVIÇOS / MENU FIXO
   ========================= */


.services-hero{

    padding:6rem 6vw 2.5rem;

    display:flex;
    justify-content:center;
}

.services-hero-inner{

    max-width:760px;

    text-align:center;
}

.services-mini-label{

    display:block;

    margin-bottom:1rem;

    font-size:.72rem;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#8b7468;

    white-space:nowrap;
}

.services-hero h1{

    font-family:'Playfair Display',serif;

    font-size:3.2rem;
    line-height:.9;

    margin-bottom:1.2rem;

    letter-spacing:-.04em;

    color:#171210;
}

.services-hero p{

    max-width:680px;

    margin:0 auto;

    font-size:1.06rem;
    line-height:1.8;

    color:#5f5049;
}

/* WRAPPER */

.services-wrapper{

    width:min(1040px,90%);

    margin:0 auto 5rem;

    display:flex;
    flex-direction:column;

    gap:1.2rem;
}

/* CARD */

.service-card{

    position:relative;

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

    border:1px solid rgba(70,50,40,.08);

    border-radius:2rem;

    overflow:hidden;

    transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease,
    background .4s ease;
}

.service-card:hover{

    transform:translateY(-3px);

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

    border-color:rgba(90,70,60,.14);

    box-shadow:
    0 18px 45px rgba(0,0,0,.05);
}

/* HEADER */

.service-trigger{

    width:100%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:2rem;

    padding:.9rem 1.2rem;

    background:none;
    border:none;

    cursor:pointer;

    text-align:left;
}

.service-category{

    display:block;

    margin-bottom:.7rem;

    font-size:.72rem;

    letter-spacing:.24em;

    text-transform:uppercase;

    color:#a08679;
}

.service-trigger h2{

    font-family:'Playfair Display',serif;

    font-size:1.9rem;

    line-height:.95;

    letter-spacing:-.045em;

    color:#171210;
}

/* ICON */

.service-icon{

    width:54px;
    height:54px;

    flex-shrink:0;

    border-radius:50%;

    background:#111;

    color:#fff;

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

    font-size:1.4rem;

    transition:
    transform .45s ease,
    background .35s ease;
}

.service-card.active .service-icon{

    transform:rotate(45deg);

    background:#c8ab97;
}

/* CONTENT */

.service-content{

    max-height:0;

    overflow:hidden;

    padding:0 2.2rem;

    transition:
    max-height .65s ease,
    padding .4s ease;
}

.service-card.active .service-content{

    max-height:1000px;

    padding:
    0 2.2rem 2rem;
}

/* LIST */

.service-clean-list{

    list-style:none;

    display:grid;

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

    gap:.8rem;

    margin-bottom:1.5rem;
}

.service-clean-list li{

    padding:.75rem .9rem;

    border-radius:1rem;

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

    border:1px solid rgba(80,60,50,.06);

    font-size:.85rem;

    font-weight:500;

    color:#302621;

    transition:
    transform .3s ease,
    background .3s ease;
}

.service-clean-list li:hover{

    transform:translateY(-2px);

    background:
    rgba(255,255,255,.78);
}

/* BUTTON */

.btn-primary{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.95rem 1.8rem;

    border-radius:999px;

    background:#0d0c0c;

    color:#fff;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.16em;

    font-size:.75rem;

    font-weight:600;

    transition:
    transform .35s ease,
    background .35s ease;
}

.btn-primary:hover{

    transform:translateY(-2px);

    background:#c6a893;
}



/* MOBILE */

@media(max-width:900px){

    .services-hero{
        padding:6rem 1.4rem 2rem;
    }

    .services-hero h1{
        font-size:2.4rem;
    }

    .services-hero p{
        font-size:1rem;
        line-height:1.7;
    }

    .services-wrapper{
        width:92%;
    }

    .service-trigger{
        padding:1.6rem;
        align-items:flex-start;
    }

    .service-trigger h2{

        font-size:1.6rem;
        line-height:.95;

    }

    .service-icon{

        width:46px;
        height:46px;

        font-size:1.2rem;
    }

    .service-card.active .service-content{

    max-height:1200px;

    padding:
    0 1.6rem 1.8rem;

}

    .service-clean-list{

        grid-template-columns:1fr;

    }

}


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

.site-footer{
    background:#0f0f0f;
    color:#f6e9df;
    padding:3rem 2rem;
    margin-top:0;
    border-top:1px solid rgba(255,255,255,.06);
}

.compact-footer{
    max-width:1320px;
    margin:0 auto;
}


.footer-logo{
    background:#f6e9df;

    display:flex;
    justify-content:center;
    align-items:center;
}

.footer-logo img{
    width:250px;
    height:auto;
}

.footer-bottom{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:.7rem;

    text-align:center;

    font-size:.88rem;
}

.footer-socials{
    display:flex;
    align-items:center;
    gap:1.6rem;
}

.footer-socials a{
    color:#f6e9df;
    text-decoration:none;
    transition:.3s ease;
}

.footer-socials a:hover{
    opacity:.65;
}

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

.logo{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    z-index:10;
}

.logo img{
    height:78px;
    width:auto;
    display:block;
    filter:brightness(1.2);
    box-shadow:0 12px 36px rgba(0,0,0,.4);
    transition:.3s ease;
}

.logo img:hover{
    transform:scale(1.04);
}

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

@media(max-width:980px){

    .hero{
        grid-template-columns:1fr;
        gap:3rem;
        text-align:left;
        padding:4rem 1.5rem;
    }

    .hero-content{
        align-items:flex-start;
        text-align:left;
    }

    .hero-content p{
        margin-left:0;
        margin-right:0;
    }

    .hero-buttons{
        justify-content:flex-start;
        flex-wrap:wrap;
    }

    .hero-media video{
        width:100%;
        max-width:430px;
        height:auto;
    }

    .two-columns{
        grid-template-columns:1fr;
        gap:3rem;
    }

    .featured-store{
        grid-template-columns:1fr;
    }

    .store-content{
        text-align:center;
    }

    .footer-bottom{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:.9rem;
    }

    .footer-socials{
        display:flex;
        gap:2rem;
        flex-wrap:wrap;
        justify-content:center;
    }
}

@media(max-width:640px){

    .section{
        padding:4rem 1.2rem;
    }

    h1{
        font-size:2.3rem;
    }

    h2{
        font-size:2.1rem;
    }

    .top-bar-inner{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }


    .hero-buttons{
    width:100%;
    justify-content:center;
    }

    .hero-buttons .btn{
    width:auto;
    }
    .featured-store{
        padding:1.6rem;
        border-radius:28px;
    }

    .store-content h3{
        font-size:1.4rem;
    }

    .atelier-reveal{

    font-size:2.9rem;

    line-height:.95;
    }

    .stores{
    overflow:hidden;
    }

    .featured-store{
    width:100%;
    }

    
}

.atelier-reveal{

    font-family:'Cormorant Garamond', serif;

    font-size:4.4rem;

    font-weight:500;

    letter-spacing:-.02em;

    line-height:1;

    color:rgba(159,147,142,.58);

    opacity:0;

    transform:translateY(60px);

    filter:blur(12px);

    animation:atelierFloat 4s ease-in-out infinite;

    transition:
opacity 2.6s cubic-bezier(.16,1,.3,1),
transform 2.6s cubic-bezier(.16,1,.3,1),
filter 2.6s cubic-bezier(.16,1,.3,1);

    will-change:transform,opacity,filter;
}

.atelier-reveal.visible{

    opacity:1;

    transform:translateY(0);

    filter:blur(0);
}

@keyframes atelierFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }

}

@media(max-width:640px){

    .atelier-reveal{
        font-size:2.6rem;
        line-height:.95;
    }

    body{
        overflow-x:hidden;
    }

    .featured-store{
        width:100%;
        max-width:100%;
    }

}

html,
body{
    overflow-x:hidden;
    width:100%;
}

.hero,
.section,
.section-inner,
.hero-content,
.hero-media{
    max-width:100%;
    overflow:hidden;
}

.privacy-hero{
    padding:5rem 2rem 3rem;
}

.privacy-content{
    padding:1rem 0 4rem;
}

.atelier-reveal{
    opacity:.30;
}

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

.mobile-toggle{
    display:none;
}

.mobile-menu{
    position:fixed;
    inset:0;

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

    backdrop-filter:blur(18px);

    z-index:9998;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:2rem;

    opacity:0;
    visibility:hidden;

    transition:
    opacity .45s ease,
    visibility .45s ease;
}

.mobile-menu.active{
    opacity:1;
    visibility:visible;
}

.mobile-menu a{
    color:#f6e9df;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:1rem;
}

.mobile-menu-btn{

    margin-top:1rem;

    padding:.25rem 0.5rem;

    border-radius:999px;

    background:#f2b8b1;

    color:#111;

    font-size:.8rem;
}

@media(max-width:640px){

    .main-nav{
        justify-content:flex-end;
    }

    .nav-left,
    .nav-right,
    .nav-cta{
        display:none;
    }

    .mobile-toggle{

    width:28px;
    height:20px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    cursor:pointer;

    position:relative;

    right:-21px;

    top:-20px;

    z-index:9999;
    }
    .mobile-toggle span{

        width:100%;
        height:2px;

        background:#fff;

        border-radius:999px;

        transition:.4s ease;
    }

    .mobile-toggle.active span:nth-child(1){

        transform:
        translateY(11px)
        rotate(45deg);
    }

    .mobile-toggle.active span:nth-child(2){
        opacity:0;
    }

    .mobile-toggle.active span:nth-child(3){

        transform:
        translateY(-11px)
        rotate(-45deg);
    }

}

@media(max-width:640px){

    .main-nav ul,
    .nav-cta{
        display:none;
    }

    .main-nav{
        justify-content:flex-end;
    }

}

@media(max-width:640px){

    .services-hero{
        padding-top:8rem;
    }

    .services-mini-label{

    display:block;

    opacity:1;

    visibility:visible;

    font-size:.58rem;

    letter-spacing:.10em;

    margin-bottom:1rem;

    color:#b28f82;

    margin-top:-50px;
}

}

@media(max-width:640px){

    .hero{

        height:100svh;

        min-height:100svh;

        padding:9rem 1.5rem 4rem;

        align-items:center;
    }

    .main-nav{
        max-width:1320px;
        margin:0 auto;

        padding:0 2rem;

        display:flex;
        align-items:center;
        justify-content:flex-end;

        position:relative;

        gap:1rem;
    }

    .hero-bg img{
        object-position:62% center;
    }

    .hero-overlay{
        background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.45),
            rgba(0,0,0,.35)
        );
    }

    .hero-content{
        max-width:100%;
    }

    .hero-content h1{
        font-size:2.0rem;
        line-height:.92;
    }

    .hero-content p{
        font-size:.95rem;
        line-height:1.6;
    }

    .hero-line{
        width:45px;
    }

    .hero .btn-outline{
        padding:.80rem 1.8rem;
        font-size:.70rem;
    }

}