html,
body{
    overflow-x:hidden;
    width:100%;
    background:  #0f0f0f;
     color:#ffffff;
    font-family:'Inter', sans-serif;
}

img{
    max-width:100%;
    height:auto;
}

.logo{
    width: 125px;
}

.nav-link{
  font-size: 18px !important;
  font-weight: bold !important;
}
.navbar-toggler{
  border-color: #ffffff !important;
  color: #4d5d42 !important;  
  background-color: #9eaf93;
  padding: 0.25rem 0.75rem;
}
.navbar-toggler-icon{
  color: #4d5d42 !important;  
}

.navbar{
  transition:0.4s;
  background:transparent !important;  
  max-width:100%;
}
.navbar.scrolled{
   background: #4d5d42 !important;
     backdrop-filter: blur(12px);  
  
}

 .section-padding {
            padding: 100px 0;
        }

.navbar a{
  color: #e0e2de !important;
  letter-spacing:2px;
  font-size:13px;
}


.btn-reserva-main{
  background: #4d5d42;
  color: #F5EFE6;  
  font-size: 16px;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: 0.3s;
  font-weight: bold;  
  z-index: 2 !important;
   display:inline-block;
    padding:12px 30px;
}

.hero-ultra{
  
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100% !important;
    top: 0; 
}


.nav-link{
 letter-spacing: 5px !important;
 transition: 0.3s;
}

.nav-link:hover{
  color: #c7cac6!important;
  transform: translatey(1px);
  transition: 0.3s;
}

/* CAPAS */
.hero-layer{
  position:absolute;
  width:100%;
  height:120%;
  top:0;
  left:0;
  inset: 0;
}

/* fondo */
.hero-bg{
  background:url('/img-olivo/hero-olivo.webp') center/cover no-repeat;
  z-index:1;
}

/* overlay oscuro */
.hero-overlay{
  background:rgba(0, 0, 0, 0.726);
  z-index:2;
}

/* luz sutil (detalle pro) */
.hero-light{
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.123), transparent 60%);
  z-index:3;
  mix-blend-mode: overlay;
}

/* contenido */
.hero-content{
  position:relative;
  z-index:5;
  color:#fff;
}

.hero-title{
  font-family:'Playfair Display', serif;
  font-size: clamp(2.5rem,8vw,6rem);
    letter-spacing: 1.4rem !important;
}

.hero-sub{
  opacity:0.7;
  margin-top:10px;
  font-size: clamp(1rem,3vw,1.5rem);
}

.btn-reserva {
  background: #4d5d42;
  color: #F5EFE6 ;
  padding: 12px 28px;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: 0.3s;
  font-weight: bold;
  
}

 .card-dark {
            background-color: #121212;
            border: 1px solid #2a2a2a;
            border-radius: 0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card-dark:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(255, 255, 255, 0.05);
            border-color: #555;
        }

#imgsection{
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.btn-reserva:hover {
  background: #798b6d;
  color: #000000;
  transition: 0.3s;
}

/* botón */
.btn-line{
  border:1px solid #aaaaaa;
  padding:12px 35px;
  margin-top:20px;
  display:inline-block;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:2px;
  transition:0.3s;
  background: #4d5d42;
}
.btn-line:hover{
  background: #c0765e;;
  color:#f1f1f1;
}

 h1, h2, h3, .navbar-brand {
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 700;
            color: #ffffff;
        }

        /* Navbar oscura con borde inferior sutil */
        .navbar-custom {
            background-color: rgba(0, 0, 0, 0.9);
            border-bottom: 1px solid #222;
        }


/* SECTIONS */
.section h2{
  font-family:'Playfair Display', serif;
  font-size:2.5rem;
}

.section p{
  opacity:0.75;
  line-height:1.8;
}

/* IMAGE STYLE */
.img-box{
  overflow:hidden !important;
  border-radius:0px;
}
.img-box img{
  width:100%;
  transition:0.6s;
}
.img-box:hover img{
  transform:scale(1.08);
}

/* GALLERY */
.gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
}


.btn-reserva-main:hover{
  background: #93b17f;
  color: #000000;
  transition: 0.3s;
 
}

#background_experiencias{
   background: #4d5d42;
   color: #E7DDD4;
}

.button-cartas {
  font-size: 18px;
  color: #4d5d42;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  border: none;
  background: none;
  text-transform: uppercase;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: color;
}

.button-cartas:focus,
.button-cartas:hover {
  color: #4d5d42;
}

.button-cartas:focus:after,
.button-cartas:hover:after {
  width: 100%;
  left: 0%;
}

.button-cartas:after {
  content: "";
  pointer-events: none;
  bottom: -2px;
  left: 50%;
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: #4d5d42;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: width, left;
}

.menu-link {
  font-size: 18px;
  text-decoration: none;
  color: #4d5d42 !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  
}
.menu-link:hover {
  font-size: 18px;
  text-decoration: underline;
  color: #758869 !important;
  font-weight: 500;
  
  
}

#btn-mas{
  background-color: #d68410 !important;
  color: #ffffff;
  font-weight: bold;
}

#btn-mas:hover{
  background-color: #b36b07 !important;
  color: #ffffff;
  
}

.section{
    padding:0px 0;
}

.separate-1{
   margin-top: 3rem !important;
   margin-bottom: 3rem !important;
}

.separate-2{
   margin-top: 6rem !important;
    margin-bottom: 6rem !important;
}

.separate-3{
   margin-top: 9rem !important;
    margin-bottom: 9rem !important;
}

    .links {
    transition: all 0.3s ease;
    text-decoration: none;
     color: #070707;
     
    }

.links:hover {
  color: #414040; /* Instagram */
  transform: translateX(5px);
   
}



/* FOOTER */
.footer-catedral {
      margin-top: 6rem;
      background:    #F5EFE6;
      color:  #4d5d42;
    }

@media (max-width:992px){

.section{
    padding:40px 0;
}

.section h2{
    font-size:2rem;
}

.section p{
    font-size:.95rem;
}

.separate-2{
    margin-top:3rem !important;
    margin-bottom:3rem !important;
}

.separate-3{
    margin-top:4rem !important;
    margin-bottom:4rem !important;
}

.navbar{
    background-color: #4d5d42 !important;    
}

.navbar-collapse{
    padding:20px;
}

.navbar-nav{
    gap:10px;
}

.nav-link{
    letter-spacing:2px !important;
}

.logo{
    width:110px;
}

.navbar-collapse{
    padding:20px;
    background:#4d5d42;
}
.nav-link{
    letter-spacing:2px !important;
}

.logo{
    width:110px;
}
}

@media (max-width:576px){

.hero-title{
    font-size:1.8rem;
}

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

.section h2{
    font-size:1.7rem;
}
.hero-ultra{
    position:relative;
    min-height:100svh;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:90px;
    padding-bottom:40px;
}

.hero-content{
    position:relative;
    z-index:5;
    color:#fff;
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:1rem;
}

.hero-title{
    font-family:'Playfair Display', serif;
    font-weight:700;
    font-size:clamp(2rem,8vw,6rem) !important;
    letter-spacing:clamp(4px,1vw,18px);
    line-height:1.1;
    margin-bottom:1rem;
}

.hero-sub{
    font-size:clamp(1rem,2vw,1.5rem);
    margin-bottom:2rem;
}
}
@media (max-width:992px){

.section{
    padding:40px 0;
}

.section h2{
    font-size:2rem;
    text-align: center !important;
}

.section p{
    text-align: start !important;
    font-size:.95rem;
    margin-bottom: 4rem;
}

.separate-2{
    margin-top:3rem !important;
    margin-bottom:3rem !important;
}

.separate-3{
    margin-top:4rem !important;
    margin-bottom:4rem !important;
}

    .navbar{
    max-width: 100%;
    transition: 0.4s;
    background: #4d5d42 !important;    
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}


.navbar-collapse{
    padding:25px !important;
    margin-right: 28px !important;
}

.navbar-nav{
    gap:10px;
}

.nav-link{
    letter-spacing:2px !important;
}

.logo{
    width:150px;
    background: transparent !important
}
#imgsection{
  width: 100%;
}
#gastronomia-title{
  text-align: center !important;
}

#reserva{
  text-align: center !important;
  justify-content: center;
}
h2{
  text-align: center !important;
}
#propuesta div{
  width: 100%;
  text-align: center;
}
#text_propuesta{
  padding: 2rem !important;
  width: 100%;
  text-align: center;
}

}
  @media (max-width:576px){

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

.section h2{
    font-size:1.7rem;
}


.hero-ultra{
    position:relative;
    min-height:100svh;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:90px;
    padding-bottom:40px;
}

.hero-content{
    position:relative;
    z-index:5;
    color:#fff;
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:1rem;
}

.hero-title{
    font-family:'Playfair Display', serif;
    font-weight:800 !important;
    font-size:1.6rem !important;
    letter-spacing:1rem !important;
    line-height:1.1;
    margin-bottom:1rem;
}

.hero-sub{
    font-size:clamp(1rem,2vw,1.5rem);
    margin-bottom:2rem;
}

.navbar{
    max-width: 100%;
    transition: 0.4s;
    background: #4d5d42 !important;    
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}
.section p {
        text-align: center !important;
        font-size: .95rem;
        margin-bottom: 4rem;
      }

      #text_propuesta h2 {
        padding-right: 0rem !important;
        width: 100%;
        text-align: center;
      }

      .logo{
    width:90px;
    padding: 0px;
    background: transparent !important
}

#title-2{
  font-size: 1.4rem !important;
}

}