/* =============================================
       VARIABLES & RESET
    ============================================= */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:   #0a1628;
      --navy2:  #112240;
      --ivory:  #f9f6f0;
      --gold:   #c9a84c;
      --gold2:  #e8c96d;
      --taupe:  #9e9080;
      --dark:   #2d2d2d;
      --white:  #ffffff;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Jost', sans-serif;
      background: var(--ivory);
      color: var(--dark);
      overflow-x: hidden;
    }

    img { display: block; max-width: 100%; }
    a   { text-decoration: none; color: inherit; }
    ul  { list-style: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }

    /* Serif helper */
    .serif { font-family: 'Cormorant Garamond', serif; }

    /* Gold divider */
    .divider {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 5rem auto 0;
    }
    .divider::before,
    .divider::after {
      content: '';
      display: block;
      width: 6rem;
      height: 1px;
      background: var(--gold);
    }
    .divider span {
      color: var(--gold);
      font-size: .6rem;
      margin: 0 1rem;
    }
    .divider.dim::before,
    .divider.dim::after { background: rgba(201,168,76,.3); }
    .divider.dim span   { color: rgba(201,168,76,.5); }

    /* Eyebrow label */
    .eyebrow {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    .eyebrow span {
      font-family: 'Jost', sans-serif;
      font-size: .65rem;
      letter-spacing: .25rem;
      text-transform: uppercase;
      color: var(--gold);
      font-weight: 600;
    }
    .eyebrow-line {
      display: block;
      width: 3rem;
      height: 1px;
      background: var(--gold);
    }

    /* Scroll-reveal animation */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* =============================================
       NAVBAR
    ============================================= */
    #navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      transition: background .4s ease, box-shadow .4s ease;
      background: linear-gradient(to bottom, rgba(0,0,0,.4), transparent);
    }
    #navbar.scrolled {
      background: rgba(10,22,40,.97);
      box-shadow: 0 2px 30px rgba(0,0,0,.4);
      backdrop-filter: blur(4px);
    }
    .nav-inner {
      max-width: 1600px;
      margin: 0 auto;
      padding: 0 2.5rem;
      height: 5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-logo {
      font-family: 'Cormorant Garamond', serif;
      color: var(--gold);
      font-size: 1.2rem;
      letter-spacing: .4rem;
      transition: color .2s;
      flex-shrink: 0;
    }
    .nav-logo:hover { color: var(--gold2); }

    /* Desktop links */
    .nav-links {
      display: flex;
      align-items: center;
      gap: 0;
    }
    .nav-links li { display: flex; align-items: center; }
    .nav-links a {
      font-family: 'Jost', sans-serif;
      font-size: .6rem;
      letter-spacing: .13rem;
      text-transform: uppercase;
      color: rgba(255,255,255,.85);
      padding: .25rem .7rem;
      transition: color .2s;
    }
    .nav-links a:hover { color: var(--gold); }
    .nav-sep {
      color: rgba(201,168,76,.3);
      font-size: .5rem;
      user-select: none;
    }

    /* Hamburger */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      padding: 4px;
      background: none;
      border: none;
      cursor: pointer;
    }
    .nav-hamburger span {
      display: block;
      width: 24px;
      height: 1.5px;
      background: var(--gold);
      transition: all .3s;
    }

    /* Mobile overlay */
    .nav-mobile {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--navy);
      z-index: 999;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.6rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s;
    }
    .nav-mobile.open {
      display: flex;
      opacity: 1;
      pointer-events: all;
    }
    .nav-mobile-logo {
      font-family: 'Cormorant Garamond', serif;
      color: var(--gold);
      font-size: 1.2rem;
      letter-spacing: .4rem;
      margin-bottom: 1rem;
    }
    .nav-mobile a {
      font-family: 'Jost', sans-serif;
      font-size: .75rem;
      letter-spacing: .2rem;
      text-transform: uppercase;
      color: rgba(255,255,255,.9);
      transition: color .2s;
    }
    .nav-mobile a:hover { color: var(--gold); }
    .nav-close {
      position: absolute;
      top: 1.5rem; right: 1.5rem;
      font-size: 1.5rem;
      color: var(--gold);
      cursor: pointer;
      background: none; border: none;
      line-height: 1;
    }

    @media (max-width: 1100px) {
      .nav-links { display: none; }
      .nav-hamburger { display: flex; }
    }

    /* =============================================
       HERO
    ============================================= */
    #inicio {
      position: relative;
      height: 100dvh;
      min-height: 600px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      background: url('https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?w=1920&q=80') center/cover no-repeat;
      background-attachment: fixed;
      transform: translateZ(0);
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, var(--navy) 0%, rgba(10,22,40,.4) 50%, rgba(0,0,0,.3) 100%);
      opacity: .82;
    }
    .hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0 1.5rem;
      margin-top: 5rem;
    }
    .hero-line {
      width: 4rem;
      height: 1px;
      background: var(--gold);
      margin: 0 auto 1.5rem;
    }
    .hero-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(3rem, 8vw, 6rem);
      color: var(--white);
      letter-spacing: clamp(.3rem, 1.5vw, .75rem);
      line-height: 1.05;
      margin-bottom: 1rem;
    }
    .hero-sub {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(1.1rem, 2.5vw, 1.6rem);
      color: var(--ivory);
      margin-bottom: 1.2rem;
    }
    .hero-stars { color: var(--gold); font-size: 1.1rem; letter-spacing: .2rem; margin-bottom: 2.5rem; }
    .hero-btns {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 2rem;
      justify-content: center;
    }
    .btn-gold {
      background: var(--gold);
      color: var(--navy);
      font-family: 'Jost', sans-serif;
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .25rem;
      padding: 1rem 2.5rem;
      transition: background .3s;
      position: relative;
      overflow: hidden;
    }
    .btn-gold:hover { background: var(--gold2); }
    .btn-text {
      color: var(--white);
      font-family: 'Jost', sans-serif;
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .15rem;
      display: flex;
      align-items: center;
      gap: .5rem;
      transition: color .2s;
    }
    .btn-text:hover { color: var(--gold); }
    .hero-scroll {
      position: absolute;
      bottom: 2.5rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      color: var(--white);
      animation: bounce 2s infinite;
      font-size: 1.5rem;
      transition: color .2s;
    }
    .hero-scroll:hover { color: var(--gold); }
    @keyframes bounce {
      0%,100% { transform: translateX(-50%) translateY(0); }
      50%      { transform: translateX(-50%) translateY(8px); }
    }

    /* =============================================
       BUSCADOR DE RESERVAS
    ============================================= */
    #buscador {
      background: var(--navy);
      position: relative;
      z-index: 10;
    }
    .buscador-top-line {
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--gold), transparent);
    }
    .buscador-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 2.5rem 2.5rem 2rem;
    }
    .buscador-label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-bottom: 2rem;
    }
    .buscador-label-line {
  width: 80px;
  height: 1px;
  background: var(--gold);
}
    .buscador-label p {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  color: var(--gold);
  letter-spacing: 2px;
  text-transform: uppercase;
}
    .buscador-form {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
    }
    .buscador-field {
      flex: 1 1 160px;
      border-right: 1px solid rgba(255,255,255,.1);
      transition: border-color .2s;
    }
    .buscador-field:last-child { border-right: none; }
    .buscador-field:hover { border-color: rgba(201,168,76,.4); }
    .buscador-field label {
      display: flex;
      align-items: center;
      gap: .4rem;
      padding: 1rem 1.2rem .3rem;
      font-family: 'Jost', sans-serif;
      font-size: .55rem;
      letter-spacing: .2rem;
      text-transform: uppercase;
      color: rgba(201,168,76,.7);
    }
    .buscador-field label svg {
      width: 11px; height: 11px;
      stroke: var(--gold);
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .buscador-field input,
    .buscador-field select {
      width: 100%;
      background: transparent;
      border: none;
      outline: none;
      padding: .3rem 1.2rem 1rem;
      font-family: 'Jost', sans-serif;
      font-size: .8rem;
      color: var(--white);
      color-scheme: dark;
      appearance: none;
      cursor: pointer;
    }
    .buscador-field select option { background: var(--navy); color: var(--white); }
    .buscador-submit {
    flex: 0 0 auto;
    background: rgba(201, 168, 76, 0.18); /* Dorado transparente */
    color: var(--gold);

    border: 1px solid var(--gold);
    border-radius: 6px;

    font-family: 'Jost', sans-serif;
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .18rem;
    text-transform: uppercase;

    padding: 0 1.8rem;
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;

    cursor: pointer;
    transition: all .3s ease;
}

.buscador-submit:hover {
    background: var(--gold);
    color: var(--navy);
    transform: translateY(-2px);
}

.buscador-submit svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
    .buscador-note {
      margin-top: .8rem;
      font-family: 'Jost', sans-serif;
      font-size: .55rem;
      letter-spacing: .12rem;
      text-transform: uppercase;
      color: rgba(255,255,255,.25);
    }
    .buscador-bottom-line {
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(201,168,76,.4), transparent);
    }
    @media (max-width: 768px) {
      .buscador-form { flex-direction: column; }
      .buscador-field { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
      .buscador-submit { width: 100%; justify-content: center; min-height: 56px; }
    }

    

    /* =============================================
       SOBRE NOSOTROS
    ============================================= */
    #nosotros {
      padding: 6rem 2rem;
      background: var(--ivory);
      overflow: hidden;
    }
    .about-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  align-items: center;
}
    .about-img-wrap {
      flex: 1 1 380px;
      position: relative;
    }
    .about-img-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 1px solid var(--gold);
      transform: translate(12px, 12px);
      z-index: 0;
    }
    .about-img-wrap img {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 580px;
      object-fit: cover;
      box-shadow: 0 20px 60px rgba(0,0,0,.15);
    }
    .about-text {
  flex: 1 1 340px;
  order: 1;
}

.about-img-wrap {
  flex: 1 1 380px;
  position: relative;
  order: 2;
}
    .about-text h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 4vw, 3rem);
      color: var(--navy);
      line-height: 1.2;
      margin-bottom: 2rem;
    }

    /* Subtitulo SOBRE NOSOTROS */
.eyebrow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.eyebrow span:nth-child(2) {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
}

.eyebrow-line {
  width: 60px;
  height: 1px;
  background: var(--gold);
}

    .about-text p {
      font-family: 'Jost', sans-serif;
      font-size: .95rem;
      line-height: 1.9;
      color: var(--dark);
      margin-bottom: 2.5rem;
    }
    .about-pillars {
      display: flex;
      gap: 2rem;
      margin-bottom: 3rem;
      flex-wrap: wrap;
    }
    .about-pillar { display: flex; flex-direction: column; gap: .6rem; }
    .about-pillar svg { color: var(--gold); width: 28px; height: 28px; }
    .about-pillar span {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem;
      color: var(--navy);
    }
    .about-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      border-top: 1px solid rgba(201,168,76,.3);
      padding-top: 2rem;
    }
    .stat-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.5rem;
      color: var(--gold);
      margin-bottom: .25rem;
    }
    .stat-lbl {
      font-family: 'Jost', sans-serif;
      font-size: .6rem;
      letter-spacing: .15rem;
      text-transform: uppercase;
      color: var(--taupe);
    }

    .about-btn {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;

  margin-top: 2rem; /* separa el botón del texto */

  padding: 1rem 2.5rem;

  border: 1px solid var(--gold);
  background: transparent;

  font-family: 'Jost', sans-serif;
  font-size: .7rem;
  letter-spacing: .2rem;
  text-transform: uppercase;

  color: var(--navy);
  text-decoration: none;

  transition: all .3s ease;
}

.about-btn:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-3px);
}

#habitaciones{
padding:100px 8%;
background:var(--navy);
}

.rooms-head{
text-align:center;
max-width:850px;
margin:auto;
}

.eyebrow{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
color:#b89445;
letter-spacing:3px;
}

.eyebrow-line{
width:45px;
height:1px;
background:#b89445;
}


.rooms-head h2{
font-family:"Playfair Display",serif;
font-size:42px;
color:var(--white);
margin:25px 0;
}


.rooms-head p{
    color:#e5e5e5;
}



/* BOTONES */

.room-filters{

display:flex;
justify-content:center;
align-items:center;
gap:15px;
margin:45px 0;
flex-wrap:wrap;

}

.filter-btn {

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

    padding:1rem 2.5rem;

    border:1px solid var(--gold);

    background:transparent;

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

    font-size:.7rem;

    letter-spacing:.2rem;

    text-transform:uppercase;

    color:var(--white);

    cursor:pointer;

    transition:all .3s ease;

}


.filter-btn:hover,
.filter-btn.active {

    background:var(--gold);

    color:var(--navy);

    transform:translateY(-3px);

}





/* =====================================================
   HABITACIONES
===================================================== */

#habitaciones{
    padding:90px 6%;
    overflow:hidden;
}


/* CONTENEDOR DE TARJETAS */

.rooms-container{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}


/* TARJETA */

.room-card{

    background:white;
    border-radius:10px;
    overflow:hidden;
    border:2px solid transparent;
    transition:.3s;

    display:flex;
    flex-direction:column;

}


.room-card.selected{

    border:2px solid #b89445;
    box-shadow:0 10px 30px rgba(184,148,69,.25);

}



/* IMAGEN */

.room-img{

    width:100%;
    height:260px;
    overflow:hidden;

}


.room-img img{

    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;

}


.room-card:hover img{

    transform:scale(1.08);

}



/* INFORMACIÓN */

.room-info{

    padding:25px;

    display:flex;
    flex-direction:column;

    flex:1;

}


.room-info h3{

    color:#0d1b2a;
    font-size:22px;

    min-height:55px;

}


.room-info p{

    line-height:1.6;

    min-height:75px;

}



/* DETALLES */

.room-details{

    display:flex;
    justify-content:space-between;
    gap:10px;
    margin:15px 0;
    color:#777;
    font-size:14px;

}



/* BOTÓN */

.room-btn{

    display:block;

    width:max-content;

    margin:auto auto 0;

    padding:12px 30px;

    background:#0d1b2a;

    color:white;

    text-decoration:none;

    text-align:center;

    transition:.3s;

}


.room-btn:hover{

    background:#b89445;

}



/* =====================================================
   TABLET
===================================================== */

@media(max-width:1200px){

    .rooms-container{

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

    }

}



/* =====================================================
   TABLET PEQUEÑA
===================================================== */

@media(max-width:900px){

    #habitaciones{

        padding:70px 5%;

    }


    .rooms-head h2{

        font-size:32px;

    }


    .room-details{

        flex-direction:column;
        gap:8px;

    }

}



/* =====================================================
   CELULARES
===================================================== */

@media(max-width:600px){


    #habitaciones{

        padding:60px 20px;

    }


    .rooms-container{

        grid-template-columns:1fr;

    }


    .room-img{

        height:230px;

    }


    .room-info{

        padding:20px;

    }


    .room-info h3{

        font-size:20px;

    }


    .room-btn{

        width:100%;

    }


}
/* =============================================
   SERVICIOS
============================================= */

#servicios{

    padding:6rem 2rem;
    background:var(--ivory);
    overflow:hidden;

}



/* TITULO */

.services-head{

    text-align:center;
    margin-bottom:4rem;

}


.services-head h2{

    font-family:'Cormorant Garamond', serif;
    font-size:clamp(2rem,4vw,3rem);
    color:var(--navy);

}



/* CONTENEDOR */

.services-grid{

    max-width:1300px;
    margin:0 auto;

    display:grid;

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

    gap:3rem;

    align-items:start;

}



/* ITEM */

.service-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    max-width:220px;

    margin:auto;

}



/* ICONOS (por si agregas después) */

.service-item svg{

    color:var(--gold);

    width:48px;
    height:48px;

    margin-bottom:1.5rem;

}



/* TITULOS */

.service-item h3{

    font-family:'Cormorant Garamond',serif;

    font-size:1.8rem;

    color:var(--navy);

    margin-bottom:.7rem;

}



/* TEXTO */

.service-item p{

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

    font-size:.78rem;

    line-height:1.8;

    color:var(--taupe);

}



/* =============================================
   TABLET GRANDE
============================================= */

@media(max-width:1200px){


    .services-grid{

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

        gap:2.5rem;

    }


}



/* =============================================
   TABLET
============================================= */

@media(max-width:768px){


    #servicios{

        padding:5rem 5%;

    }


    .services-grid{

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

        gap:2rem;

    }


    .service-item h3{

        font-size:1.5rem;

    }


}



/* =============================================
   CELULAR
============================================= */

@media(max-width:480px){


    #servicios{

        padding:4rem 20px;

    }


    .services-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }


    .service-item{

        max-width:280px;

    }


    .service-item h3{

        font-size:1.7rem;

    }


    .service-item p{

        font-size:.85rem;

    }


}
/* =============================================
   RESTAURANTE
============================================= */

#restaurante{

    padding:6rem 0;

    background:var(--navy);

    overflow:hidden;

}



.restaurant-inner{

    max-width:1600px;

    margin:0 auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

}



/* =============================================
   IMAGEN
============================================= */


.restaurant-img{

    width:100%;

    height:100%;

    min-height:520px;

    padding:0 2rem;

    position:relative;

}



.restaurant-img img{

    width:100%;

    height:100%;

    min-height:520px;

    object-fit:cover;

    border:1px solid rgba(201,168,76,.2);

}



/* Línea separadora */

.restaurant-img::after{

    content:'';

    position:absolute;

    top:0;

    right:0;

    width:1px;

    height:100%;

    background:var(--gold);

}



/* =============================================
   TEXTO
============================================= */


.restaurant-text{

    padding:3rem 4rem;

    display:flex;

    flex-direction:column;

    justify-content:center;

}



.restaurant-text h2{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(1.8rem,3.5vw,2.8rem);

    color:var(--white);

    line-height:1.2;

    margin-bottom:2rem;

}



.restaurant-text p{

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

    font-size:.88rem;

    line-height:1.9;

    color:rgba(249,246,240,.8);

    margin-bottom:2.5rem;

}



/* =============================================
   ESPECIALIDADES
============================================= */


.restaurant-specialties{

    list-style:none;

    margin-bottom:2.5rem;

    padding:0;

}



.restaurant-specialties li{

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

    font-size:.85rem;

    color:var(--ivory);

    padding:.6rem 0;

    display:flex;

    align-items:center;

    gap:1rem;

}



.restaurant-specialties li::before{

    content:'◆';

    color:var(--gold);

    font-size:.5rem;

}



/* =============================================
   HORARIOS
============================================= */


.restaurant-hours{

    display:flex;

    flex-wrap:wrap;

    gap:2rem;

    padding-top:1.5rem;

    border-top:1px solid rgba(201,168,76,.2);

    margin-bottom:2.5rem;

}



.hour-block span{

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

    font-size:.55rem;

    letter-spacing:.2rem;

    text-transform:uppercase;

    color:var(--gold);

    display:block;

    margin-bottom:.25rem;

}



.hour-block p{

    font-family:'Cormorant Garamond',serif;

    font-size:1.1rem;

    color:var(--white);

    margin:0;

}



/* =============================================
   BOTÓN
============================================= */


.btn-outline-gold{

    display:inline-block;

    width:max-content;

    border:1px solid var(--gold);

    color:var(--gold);

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

    font-size:.65rem;

    letter-spacing:.2rem;

    text-transform:uppercase;

    padding:1rem 2.5rem;

    transition:.3s;

}



.btn-outline-gold:hover{

    background:var(--gold);

    color:var(--navy);

}



/* =============================================
   TABLET
============================================= */

@media(max-width:1000px){


    .restaurant-inner{

        grid-template-columns:1fr;

    }


    .restaurant-img{

        min-height:450px;

        padding:0 5%;

    }


    .restaurant-img img{

        min-height:450px;

    }


    .restaurant-img::after{

        display:none;

    }


    .restaurant-text{

        padding:3rem 5%;

    }


}



/* =============================================
   CELULAR
============================================= */


@media(max-width:600px){


    #restaurante{

        padding:4rem 0;

    }


    .restaurant-img{

        min-height:300px;

        padding:0 20px;

    }


    .restaurant-img img{

        min-height:300px;

    }


    .restaurant-text{

        padding:2.5rem 20px;

    }


    .restaurant-text h2{

        font-size:2rem;

    }


    .restaurant-text p{

        font-size:.85rem;

        line-height:1.7;

    }


    .restaurant-hours{

        flex-direction:column;

        gap:1.2rem;

    }


    .btn-outline-gold{

        width:100%;

        text-align:center;

    }


}
    /* =============================================
   GALERÍA
============================================= */

#galeria {
  padding: 6rem 2rem;
  background: var(--ivory);
}


.gallery-head {
  display:flex;
  justify-content:center;
  margin-bottom:4rem;
}


.gallery-carousel {
  max-width:1300px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:1.5rem;
}


.gallery-track {
  display:flex;
  gap:1.5rem;
  overflow:hidden;
  width:100%;
}


.gallery-card {

  min-width:calc(20% - 1.2rem);
  height:280px;
  position:relative;
  overflow:hidden;

}


.gallery-card img {

  width:100%;
  height:100%;
  object-fit:cover;
  transition:.6s;

}


.gallery-card:hover img {

  transform:scale(1.08);

}


.gallery-card span {

  position:absolute;
  bottom:20px;
  left:20px;

  font-family:'Cormorant Garamond', serif;
  font-size:1.4rem;
  color:white;

}



/* Botones */

.gallery-btn {

  width:45px;
  height:45px;

  border:1px solid var(--gold);
  background:transparent;

  color:var(--gold);
  cursor:pointer;

  font-size:1.3rem;

}


.gallery-btn:hover {

  background:var(--gold);
  color:var(--navy);

}



@media(max-width:900px){

.gallery-card{
  min-width:45%;
}

}


@media(max-width:600px){

.gallery-card{
  min-width:90%;
}

}

   /* =============================================
   PROMOCIONES
============================================= */

#promociones {
  padding:6rem 2rem;
  background:var(--navy);
}


.promos-head {
  display:flex;
  justify-content:center;
  margin-bottom:4rem;
}

.promos-head h2 {

  color: var(--gold);
  font-family:'Cormorant Garamond', serif;
  font-size:3rem;
letter-spacing:.1rem;
}

.promo-eyebrow span:not(.eyebrow-line){
  color:var(--gold);
}


.promo-carousel {

  max-width:1300px;
  margin:auto;

  display:flex;
  align-items:center;
  gap:1.rem;

}


.promo-track {

  display:flex;
  gap:2rem;

  overflow:hidden;
  width:100%;

}



.promo-card {

  min-width:calc(33.333% - 1.4rem);

  height:430px;

  position:relative;
  overflow:hidden;

}



.promo-card img {

  width:100%;
  height:100%;

  object-fit:cover;

}



.promo-content {

  position:absolute;

  bottom:20px;
  left:20px;
  right:20px;


  background:rgba(10,22,40,.75);

  padding:1.5rem;

}



.promo-content span {

  background:var(--gold);

  color:var(--navy);

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

  font-size:.55rem;

  padding:.4rem .7rem;

  letter-spacing:.15rem;

}



.promo-content h3 {

  font-family:'Cormorant Garamond',serif;

  color:white;

  font-size:1.5rem;

  margin:1rem 0 .6rem;

}



.promo-content p {

  color:rgba(249,246,240,.8);

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

  font-size:.8rem;

  line-height:1.7;

}



.promo-content button {

  margin-top:1rem;

  background:none;

  border:1px solid var(--gold);

  color:var(--gold);

  padding:.7rem 1.5rem;

  font-size:.6rem;

  letter-spacing:.15rem;

}

.promo-content button:hover {

  background:var(--gold);
  color:var(--navy);
  cursor:pointer;

}


.promo-btn {

  width:45px;
  height:45px;

  background:none;

  border:1px solid var(--gold);

  color:var(--gold);

  cursor:pointer;

}



.promo-btn:hover {

 background:var(--gold);
 color:var(--navy);

}



@media(max-width:900px){

.promo-card{
 min-width:50%;
}

}


@media(max-width:600px){

.promo-card{
 min-width:100%;
}

}
    

/* =============================================
      TESTIMONIOS
============================================= */


#testimonios{

padding:6rem 2rem;
background:var(--ivory);

}



.testi-head{

text-align:center;
margin-bottom:4rem;

}



.testi-eyebrow span:not(.eyebrow-line){

color:var(--gold);

font-size:1.8rem;

font-family:'Cormorant Garamond',serif;

}



.testi-carousel{

max-width:1200px;
margin:auto;

display:flex;
align-items:center;
gap:1.5rem;

}



.testi-track{

display:flex;

gap:2rem;

overflow:hidden;

width:100%;

}



.testi-item{

min-width:calc(33.333% - 1.4rem);

text-align:center;

padding:1rem;

}



.testi-avatar{

width:90px;
height:90px;

border-radius:50%;

border:2px solid var(--gold);

padding:4px;

margin:0 auto 1.5rem;

}



.testi-avatar img{

width:100%;
height:100%;

border-radius:50%;

}



.testi-name{

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

font-size:.8rem;

font-weight:bold;

color:var(--navy);

text-transform:uppercase;

margin-bottom:1rem;

}



.testi-stars{

color:var(--gold);

letter-spacing:.2rem;

}



.testi-item blockquote{

font-family:'Cormorant Garamond',serif;

font-style:italic;

font-size:1.1rem;

line-height:1.7;

color:var(--dark);

margin-top:1rem;

}



.testi-btn{

width:45px;
height:45px;

background:none;

border:1px solid var(--gold);

color:var(--gold);

cursor:pointer;

}



.testi-btn:hover{

background:var(--gold);

color:var(--navy);

}



@media(max-width:900px){

.testi-item{

min-width:50%;

}

}



@media(max-width:600px){

.testi-item{

min-width:100%;

}

}
    
/* =============================================
   FORMULARIO DE RESERVA Y MAPA
============================================= */

#reservar{
    padding:6rem 2rem;
    background:var(--navy);
}


/*=============================================
  TITULO
=============================================*/

.reservar-head{
    display:flex;
    justify-content:center;
    margin-bottom:4rem;
}

.reservar-eyebrow span:not(.eyebrow-line){

    color:var(--gold);
    font-family:'Cormorant Garamond',serif;
    font-size:1.8rem;

}


/*=============================================
  CONTENEDOR
=============================================*/

.reservar-wrapper{

    max-width:1300px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;

    align-items:stretch;

}


/*=============================================
  FORMULARIO Y MAPA
=============================================*/

.reservar-form,
.reservar-map{

    background:#fdfbf7;

    border:1px solid rgba(255,255,255,.08);

    padding:2rem;

    display:flex;
    flex-direction:column;

    height:100%;

    box-shadow:0 15px 40px rgba(0,0,0,.15);

}


/*=============================================
  SUBTITULOS
=============================================*/

.reservar-form h3,
.reservar-map h3{

    font-family:'Cormorant Garamond',serif;

    font-size:1.8rem;

    color:var(--gold);

    text-align:center;

    margin-bottom:2rem;

}

/*=============================================
  FORMULARIO
=============================================*/

.form-group{

    margin-bottom:1.3rem;

}

.form-group label{

    display:block;

    margin-bottom:.45rem;

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

    font-size:.72rem;

    color:var(--taupe);

    letter-spacing:.05rem;

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:1rem;

    border:1px solid rgba(0,0,0,.12);

    outline:none;

    background:white;

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

    font-size:.85rem;

    transition:.3s;

}

.form-group textarea{

    resize:none;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:var(--gold);

    box-shadow:0 0 0 3px rgba(201,168,76,.15);

}


.form-row{

    display:grid;
    gap:1rem;
    margin-bottom:1.3rem;

}

.form-row:first-of-type{

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

}

.form-row:last-of-type{

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

}


/*=============================================
  BOTON
=============================================*/

.btn-reserva{

    width:100%;

    margin-top:auto;

    background:var(--navy);

    color:white;

    border:none;

    padding:1rem;

    cursor:pointer;

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

    font-size:.75rem;

    letter-spacing:.15rem;

    transition:.3s;

}

.btn-reserva:hover{

    background:var(--gold);

    color:var(--navy);

}


/*=============================================
  MAPA
=============================================*/

.reservar-map iframe{

    width:100%;
    flex:1;
    border:none;
    border-radius:6px;

}

.reservar-map p{

    margin:1.5rem 0;

    text-align:center;

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

    color:var(--taupe);

    line-height:1.8;

}


.btn-mapa{

    display:block;

    width:100%;

    text-align:center;

    text-decoration:none;

    padding:1rem;

    background:var(--navy);

    color:white;

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

    font-size:.75rem;

    letter-spacing:.15rem;

    transition:.3s;

}

.btn-mapa:hover{

    background:var(--gold);

    color:var(--navy);

}


/*=============================================
  RESPONSIVE
=============================================*/

@media(max-width:992px){

    .reservar-wrapper{

        grid-template-columns:1fr;

    }

}


@media(max-width:768px){

    .form-row:first-of-type{

        grid-template-columns:1fr;

    }

    .form-row:last-of-type{

        grid-template-columns:1fr;

    }

    .reservar-form,
    .reservar-map{

        padding:1.5rem;

    }

    .reservar-map iframe{

        min-height:320px;

    }

}


@media(max-width:480px){

    #reservar{

        padding:5rem 1.5rem;

    }

    .reservar-eyebrow span:not(.eyebrow-line){

        font-size:1.5rem;

    }

    .reservar-form h3,
    .reservar-map h3{

        font-size:1.5rem;

    }

}

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


footer{

    background:var(--navy);

    border-top:1px solid rgba(201,168,76,.2);

    padding:5rem 2rem 2rem;

    overflow:hidden;

}



.footer-inner{

    max-width:1200px;

    margin:0 auto;

}



/* =============================================
   GRID PRINCIPAL
============================================= */


.footer-grid{

    display:grid;

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

    gap:3rem;

    margin-bottom:4rem;

}



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


.footer-brand-logo{

    font-family:'Cormorant Garamond',serif;

    color:var(--gold);

    font-size:1.3rem;

    letter-spacing:.4rem;

    display:block;

    margin-bottom:1.2rem;

}



.footer-brand-logo:hover{

    color:var(--gold2);

}



/* TEXTOS */


.footer-col p{

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

    font-size:.8rem;

    color:rgba(249,246,240,.7);

    line-height:1.9;

    margin-bottom:1.5rem;

}



/* =============================================
   REDES SOCIALES
============================================= */


.footer-social{

    display:flex;

    gap:1rem;

}



.footer-social a{

    color:var(--gold);

    transition:.2s;

}



.footer-social a:hover{

    color:var(--white);

}



.footer-social svg{

    width:18px;

    height:18px;

    stroke:currentColor;

    fill:none;

    stroke-width:1;

    stroke-linecap:round;

    stroke-linejoin:round;

}



/* =============================================
   TITULOS
============================================= */


.footer-col h4{

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

    font-size:.65rem;

    letter-spacing:.2rem;

    text-transform:uppercase;

    color:var(--white);

    margin-bottom:1.5rem;

}



/* LISTAS */


.footer-col ul{

    display:flex;

    flex-direction:column;

    gap:1rem;

    padding:0;

}



.footer-col ul li a{

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

    font-size:.78rem;

    color:rgba(249,246,240,.7);

    transition:.2s;

}



.footer-col ul li a:hover{

    color:var(--gold);

}



/* CONTACTO */


.footer-col .contact-line{

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

    font-size:.78rem;

    color:rgba(249,246,240,.7);

    line-height:1.8;

}



/* =============================================
   PARTE INFERIOR
============================================= */


.footer-bottom{

    border-top:1px solid rgba(201,168,76,.2);

    padding-top:2rem;

    display:flex;

    flex-wrap:wrap;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

}



.footer-bottom p,
.footer-bottom a{

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

    font-size:.65rem;

    color:rgba(249,246,240,.5);

}



.footer-bottom-links{

    display:flex;

    gap:1rem;

    align-items:center;

}



.footer-bottom-links span{

    color:rgba(249,246,240,.3);

}



/* =============================================
   TABLET
============================================= */


@media(max-width:1000px){


    footer{

        padding:4rem 5% 2rem;

    }


    .footer-grid{

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

        gap:3rem 2rem;

    }


}



/* =============================================
   CELULAR
============================================= */


@media(max-width:600px){


    footer{

        padding:4rem 20px 2rem;

    }


    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

        gap:2.5rem;

    }


    .footer-social{

        justify-content:center;

    }


    .footer-col ul{

        align-items:center;

    }


    .footer-col p{

        font-size:.85rem;

    }


    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }


    .footer-bottom-links{

        flex-direction:column;

        gap:.7rem;

    }


}



/* =============================================
   BOTÓN SUBIR
============================================= */


#scroll-top{

    position:fixed;

    bottom:2rem;

    right:2rem;

    width:48px;

    height:48px;

    background:var(--gold);

    color:var(--navy);

    border:none;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    pointer-events:none;

    transition:.3s;

    z-index:500;

}



#scroll-top.visible{

    opacity:1;

    pointer-events:all;

}



#scroll-top:hover{

    background:var(--gold2);

}



#scroll-top svg{

    width:20px;

    height:20px;

    stroke:currentColor;

    fill:none;

    stroke-width:2;

}



/* Botón móvil */

@media(max-width:600px){

    #scroll-top{

        width:42px;

        height:42px;

        right:1rem;

        bottom:1rem;

    }

}