:root{
  --beige:#f6f1eb;
  --white:#ffffff;
  --brown:#3f3028;
  --gold:#caa46b;
  --text:#5c4d44;
  --soft:#efe7de;
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Montserrat', sans-serif;
  color:var(--text);
  background:var(--white);
  overflow-x:hidden;
}
a{
    text-decoration:none;
    color:inherit;
}
img{
  /*width:100%;*/
  display:block;
  max-width:100%;
}

/* HEADER */

.header{
  width:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:999;

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

  padding:22px 7%;
background:
rgba(255,255,255,.72);

backdrop-filter:blur(14px);

-webkit-backdrop-filter:blur(14px);

border-bottom:
1px solid rgba(255,255,255,.15);
border-bottom:none;
}

.logo h1{
  font-family:'Cormorant Garamond', serif;
  font-size:2rem;
  color:var(--brown);
  font-weight:400;
  letter-spacing:1px;
}

.logo span{
  font-family:'Parisienne', cursive;
  color:var(--gold);
  font-size:1.2rem;
}

nav{
  display:flex;
  align-items:center;
  gap:40px;
}

nav a{
	    color:#3f3028;
    font-weight:500;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:0.72rem;
  color:var(--brown);
  transition:0.3s ease;
}

nav a:hover{
  color:var(--gold);
}

.btn-nav{
  border:1px solid rgba(202,164,107,0.5);
  padding:14px 24px;
  border-radius:40px;
}

/* HERO */

.hero{
  min-height:100vh;

  background:
  linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.45)),
  url('img/hero.jpg') center center/cover no-repeat;

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

  padding:160px 7% 120px;

  text-align:center;
}

.hero-content{
  max-width:950px;
}

.hero-mini{
  text-transform:uppercase;
  letter-spacing:5px;
  font-size:0.72rem;
  color:var(--gold);
}

.hero h2{
  font-family:'Cormorant Garamond', serif;
  font-size:6.5rem;
  line-height:0.95;
  color:var(--brown);
  font-weight:400;
  margin:35px 0;
}

.hero p{
  max-width:700px;
  margin:auto;
  line-height:2;
  font-size:1.1rem;
}

.hero-buttons{
  margin-top:50px;

  display:flex;
  justify-content:center;
  gap:20px;
}

.btn-primary,
.btn-secondary{
  padding:18px 34px;

  border-radius:50px;

  text-decoration:none;

  text-transform:uppercase;

  letter-spacing:3px;

  font-size:0.72rem;

  transition:0.3s ease;
}

.btn-primary{
  background:var(--brown);
  color:white;
}

.btn-primary:hover{
  background:#2d211c;
}

.btn-secondary{
  border:1px solid var(--brown);
  color:var(--brown);
  background:white;
}

.btn-secondary:hover{
  background:var(--brown);
  color:white;
}

/* INTRO */

.intro-section{
  padding:130px 7%;
  background:var(--white);
}

.intro-content{
  max-width:900px;
  margin:auto;
  text-align:center;
}

.section-mini{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:5px;
  font-size:0.75rem;
}

.intro-content h2{
  font-family:'Cormorant Garamond', serif;
  font-size:4.5rem;
  color:var(--brown);
  font-weight:400;
  margin:30px 0;
}

.intro-content p{
  font-size:1.1rem;
  line-height:2;
}

/* PAGE HERO */

.page-hero{
  padding:190px 7% 90px;
  background:var(--beige);
  text-align:center;
}

.page-hero h1{
  font-family:'Cormorant Garamond', serif;
  font-size:5rem;
  color:var(--brown);
  font-weight:400;
}

.page-hero p{
  margin-top:18px;
  font-size:1.1rem;
}

/* SERVICES */

.services-wrapper{
  padding:100px 7%;
}

.service-luxury{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:70px;
  margin-bottom:120px;
}

.service-luxury.reverse{
  direction:rtl;
}

.service-luxury.reverse .service-text{
  direction:ltr;
}

.service-image img{
  border-radius:18px;
  height:650px;
  object-fit:cover;
}

.service-text span{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:0.72rem;
}

.service-text h2{
  font-family:'Cormorant Garamond', serif;
  font-size:4rem;
  font-weight:400;
  line-height:1;
  color:var(--brown);
  margin:25px 0;
}

.service-text p{
  line-height:2;
  font-size:1.05rem;
}

/* GALLERY */

.gallery-grid{
  columns:3 320px;
  column-gap:18px;
  padding:100px 7%;
}

.gallery-grid img{
  margin-bottom:18px;
  border-radius:18px;
  transition:0.4s ease;
}

.gallery-grid img:hover{
  transform:translateY(-5px);
}

.gallery-coming{
    min-height:55vh;
    display:flex;
    align-items:center;
    justify-content:center;
   padding:220px 20px 110px;
    background:#f8f5f1;
}

.gallery-coming-content{
    text-align:center;
    max-width:820px;
    margin:auto;
}

.gallery-coming-content img{
    width:180px;
    max-width:80%;
    margin:0 auto 40px;
    display:block;
    object-fit:contain;
}

.gallery-coming{
    border-bottom:1px solid rgba(202,164,107,0.12);
}
.gallery-coming-content span{
    display:block;
    font-family:'Montserrat', sans-serif;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:.75rem;
    color:#c7a46a;
    margin-bottom:40px;
    position:relative;
    top:10px;
}

.gallery-coming-content h2{
    font-family:'Cormorant Garamond', serif;
    font-size:3.5rem;
    font-weight:300;
    line-height:1.1;
    color:#2b1d18;
    margin-bottom:30px;
}

.gallery-coming-content p{
    font-family:'Montserrat', sans-serif;
    font-size:1rem;
    line-height:1.9;
    color:#6e625d;
}

@media(max-width:768px){

    .gallery-coming{
        min-height:60vh;
        padding:80px 25px;
    }

    .gallery-coming-content h2{
        font-size:2.5rem;
    }

}

/* CONTACT */

.contact-wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;

  padding:110px 7%;
}

.contact-info span{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:0.72rem;
}

.contact-info h2{
  font-family:'Cormorant Garamond', serif;
  font-size:4.5rem;
  line-height:1;
  font-weight:400;
  color:var(--brown);

  margin:30px 0;
}

.contact-info p{
  line-height:2;
  font-size:1.05rem;
}
.contact-small{
    margin-top:25px;
    font-size:.9rem;
    color:#9b8d85;
    line-height:1.8;
}

.whatsapp-direct{
    display:block;
    margin-top:35px;
    text-align:center;

    color:var(--brown);

    text-decoration:none;

    font-size:.92rem;

    transition:.3s ease;
}

.whatsapp-direct:hover{
    color:var(--gold);
}
.whatsapp-direct{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    text-decoration:none;
}

.whatsapp-direct img{
    width:38px;
    height:38px;
    display:block;
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.contact-form input,
.contact-form textarea{
  padding:26px 24px;
  border:1px solid rgba(0,0,0,0.08);
  background:#faf8f5;
  font-family:'Montserrat', sans-serif;
  font-size:1rem;
  border-radius:12px;
  transition:.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:rgba(202,164,107,0.5);
    background:white;
}

.contact-form textarea{
  height:220px;
  resize:none;
}

.contact-form button{
  padding:20px;
  border:none;
  background:var(--brown);
  color:white;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:0.72rem;
  cursor:pointer;
  transition:0.3s ease;
  margin-top:10px;
  border-radius:50px;
}

.contact-form button:hover{
  background:#2d211c;
  transform:translateY(-2px);
}

.form-note{
    margin-top:20px;
    text-align:center;
    font-size:.9rem;
    color:#9b8d85;
}
/*GRACIES*/
.thanks-section{
    min-height:100vh;

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

    background:#f7f4ef;

    padding:120px 20px;

    text-align:center;
}

.thanks-content{
    max-width:700px;
}

.thanks-content span{
    display:block;

    margin-bottom:25px;

    font-family:'Montserrat', sans-serif;
    font-size:.75rem;

    letter-spacing:4px;
    text-transform:uppercase;

    color:#c7a46a;
}

.thanks-content h1{
    font-family:'Cormorant Garamond', serif;

    font-size:5rem;
    line-height:1;

    color:#3d2b25;

    margin-bottom:35px;
}

.thanks-content p{
    font-size:1.1rem;
    line-height:2;

    color:#6d5d55;

    margin-bottom:20px;
}

.thanks-small{
    color:#9b8d85;
    font-size:.95rem;
}

.btn-return{
    display:inline-block;

    margin-top:35px;

    padding:18px 42px;

    border:1px solid rgba(202,164,107,.5);
    border-radius:50px;

    text-decoration:none;

    color:#3d2b25;

    font-size:.9rem;
    letter-spacing:2px;
    text-transform:uppercase;

    transition:.3s ease;
}

.btn-return:hover{
    background:#c7a46a;
    color:white;

    transform:translateY(-2px);
}

@media(max-width:768px){

    .thanks-content h1{
        font-size:3.2rem;
    }

    .thanks-content p{
        font-size:1rem;
        line-height:1.8;
    }

}

/* TESTIMONIAL */

.testimonial{
  padding:120px 7%;
  background:var(--beige);
  text-align:center;
}

.testimonial blockquote{
  font-family:'Cormorant Garamond', serif;
  font-size:3rem;
  color:var(--brown);
  max-width:900px;
  margin:auto;
  line-height:1.3;
}

.testimonial span{
  display:block;
  margin-top:35px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  font-size:0.72rem;
}/* =========================
   NOSALTRES
========================= */

.nosaltres-section{
    background:#f6f3ee;
    padding:120px 8%;
}

.nosaltres-container{
    max-width:1350px;
    margin:auto;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:80px;
    align-items:center;
}

/* IMATGE */

.nosaltres-image img{
    width:100%;
    height:760px;
    object-fit:cover;
    display:block;
    border-radius:2px;
}

/* TEXT */

.nosaltres-content{
    max-width:620px;
}

.nosaltres-content span{
    display:block;
    font-family:'Montserrat', sans-serif;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:.72rem;
    color:#c7a46a;
    margin-bottom:24px;
}

.nosaltres-content h2{
    font-family:'Cormorant Garamond', serif;
    font-size:4.8rem;
    line-height:0.95;
    font-weight:300;
    color:#3f2d26;
    margin-bottom:40px;
}

.nosaltres-content p{
    font-family:'Montserrat', sans-serif;
    font-size:1.02rem;
    line-height:1.95;
    color:#7d6b63;
    margin-bottom:24px;
    font-weight:300;
}

/* FRASE */

.nosaltres-quote{
    margin-top:45px;
    padding-left:22px;
    border-left:1px solid #d8c1a1;
}

.nosaltres-quote p{
    font-family:'Cormorant Garamond', serif;
    font-size:1.9rem;
    line-height:1.4;
    color:#3f2d26;
    font-style:italic;
    margin:0;
}

/* FOOTER */
.footer{
    padding:120px 8%;
    background:#f7f4ef;
    border-top:1px solid rgba(199,164,106,.15);
    text-align:center;
}

.footer-quote{
    font-family:'Cormorant Garamond', serif;
    font-size:2.4rem;
    line-height:1.3;
    color:#3f2d26;

    max-width:700px;
    margin:0 auto 70px;
}

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

    gap:18px;

    font-size:.82rem;
    letter-spacing:3px;
    text-transform:uppercase;

    color:#5b463b;
}

.footer-inline span{
    opacity:.9;
}

.separator{
    color:rgba(199,164,106,.5);
}

.footer-bottom{
    margin-top:60px;

    font-size:.75rem;
    letter-spacing:2px;

    color:rgba(91,70,59,.5);

}
/* RESPONSIVE */

@media(max-width:992px){

  .hero h2{
    font-size:5rem;
  }

  .service-luxury,
  .contact-wrapper{
    grid-template-columns:1fr;
  }

  .service-image img{
    height:500px;
  }
}

@media(max-width:768px){

  .header{
    flex-direction:column;
    gap:25px;
    padding:25px 20px;
  }

  nav{
    gap:18px;
    flex-wrap:wrap;
    justify-content:center;
  }

  .hero{
    padding:220px 20px 120px;
  }

  .hero h2{
    font-size:3.8rem;
  }

  .hero p{
    font-size:1rem;
  }

  .hero-buttons{
    flex-direction:column;
  }

  .btn-primary,
  .btn-secondary{
    width:100%;
    text-align:center;
  }

  .intro-content h2,
  .service-text h2,
  .contact-info h2,
  .page-hero h1{
    font-size:3rem;
  }

  .gallery-grid,
  .services-wrapper,
  .contact-wrapper,
  .intro-section,
  .testimonial{
    padding-left:20px;
    padding-right:20px;
  }

  .service-image img{
    height:420px;
  }

  .testimonial blockquote{
    font-size:2rem;
  }

  .footer{
    flex-direction:column;
    text-align:center;
  }
}


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

.menu-toggle{
    display:none;
    cursor:pointer;
    z-index:3001;
}

@media(max-width:768px){

    /* HEADER */

    .header{
        position:fixed;
        top:0;
        left:0;
        width:100%;

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

        padding:18px 20px;

        z-index:3000;
    }

    /* HAMBURGER */

    .menu-toggle{
        width:42px;
        height:42px;

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

        gap:7px;

        position:relative;

        z-index:3001;
    }

    .menu-toggle span{
        width:26px;
        height:2px;

        background:var(--brown);

        transition:.4s ease;

        border-radius:2px;
    }

    /* ACTIVE */

    .menu-toggle.active span:nth-child(1){
        transform:
        rotate(45deg)
        translate(5px,5px);
    }

    .menu-toggle.active span:nth-child(2){
        transform:
        rotate(-45deg)
        translate(1px,-1px);
    }

    /* HIDE NORMAL NAV */

    nav{
        display:none;
    }

    /* MOBILE MENU */

    .mobile-nav{
        position:fixed;
        display:flex !important;
        top:0;
        left:0;

        width:100%;
        height:100vh;

        background:rgba(246,241,235,.98);

        backdrop-filter:blur(14px);

        display:flex;
        flex-direction:column;

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

        gap:35px;

        transform:translateY(-100%);

        opacity:0;

        transition:.6s ease;

        z-index:2500;
    }

    .mobile-nav.active{
        transform:translateY(0);
        opacity:1;
    }

    .mobile-nav a{
        font-size:1rem;

		letter-spacing:3px;

		text-transform:uppercase;

		color:#3f3028;

		font-weight:500;
	
		transition:.3s ease;
    }

    .mobile-nav a:hover{
        color:var(--gold);
    }

    .mobile-nav .btn-nav{
        border:1px solid rgba(202,164,107,.4);

        padding:16px 28px;

        border-radius:50px;
    }

}

/* =========================================
   LUXURY SCROLL HEADER
========================================= */

.header{
    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:4000;

    transition:
    background .5s ease,
    padding .5s ease,
    backdrop-filter .5s ease,
    box-shadow .5s ease;

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

backdrop-filter:blur(14px);

-webkit-backdrop-filter:blur(14px);

border-bottom:
1px solid rgba(255,255,255,.15);}

.header.scrolled{

    background:
    rgba(246,241,235,.94);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:
    0 5px 30px rgba(0,0,0,.05);

    border-bottom:
    1px solid rgba(63,48,40,.06);

}

/* NAV MÁS LEGIBLE */
.header.scrolled nav a{

    color:#4a382f;

    font-weight:500;
}

/* BOTÓN ACTIVO */

.header.scrolled .btn-nav{

    border:
    1px solid rgba(74,56,47,.22);

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

    color:#4a382f;

    box-shadow:
    0 2px 10px rgba(0,0,0,.03);
}

/* HOVER */

.header.scrolled nav a:hover{
    color:#2f221c;
}
/* MOBILE */

@media(max-width:768px){

    .header.scrolled{

        padding:
        14px 20px;
    }

}

/* =========================================
   INNER PAGES HEADER
========================================= */

.inner-page .header{

   background:var(--beige);
   border-bottom:1px solid rgba(202,164,107,.12);

  
}

/* MENOS ALTURA */

.inner-page .hero-mini-section{

    padding-top:180px;
}