/* =========================================================
   Posada del Sol — estilos base
   Paleta sacada del cartel real: terracota, madera, crema
   ========================================================= */

:root{
  --terracota:      #C2472A;
  --terracota-dark:  #9C3620;
  --madera:          #D9A24B;
  --madera-claro:    #F1DFB8;
  --crema:           #FBF6ED;
  --texto:           #33261E;
  --texto-suave:     #6B5A4E;
  --blanco:          #FFFFFF;
  --whatsapp:        #25D366;

  --font-display: 'Fraunces', serif;
  --font-body: 'Nunito Sans', sans-serif;

  --radius: 14px;
  --shadow: 0 8px 24px rgba(51,38,30,.12);
  --header-h: 76px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--texto);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family: var(--font-display); margin:0; }
ul{ list-style:none; margin:0; padding:0; }
section{ scroll-margin-top: var(--header-h); }

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 100;
  height: var(--header-h);
  background: var(--madera-claro);
  border-bottom: 1px solid rgba(51,38,30,.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.site-header.hide{ transform: translateY(-100%); }
.site-header.scrolled{ box-shadow: 0 4px 16px rgba(51,38,30,.08); }

.header-inner{
  max-width: 1180px;
  height:100%;
  margin:0 auto;
  padding: 0 24px;
  display:flex;
  align-items:center;
  gap: 28px;
}
.logo{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.logo-img{ height:40px; width:auto; border-radius:6px; }
.logo-text{
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.25rem;
  color: var(--terracota-dark);
}

.main-nav{ display:flex; gap:26px; }
.main-nav a{
  font-size:.92rem;
  font-weight:600;
  color: var(--terracota-dark);
  letter-spacing:.02em;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.main-nav a:hover,
.main-nav a.active{
  color: var(--terracota-dark);
  border-color: var(--terracota);
}
.main-nav a.nav-whatsapp,
.main-nav a.nav-whatsapp:hover{
  border-color: transparent;
  padding: 0;
}

.nav-whatsapp{
  display:flex; align-items:center; justify-content:center;
  color: var(--texto-suave);
  transition: color .2s ease, transform .2s ease;
}
.nav-whatsapp:hover{ color: var(--terracota-dark); transform: scale(1.08); }
.nav-whatsapp svg{ display:block; }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:0;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{
  width:24px; height:2px; background: var(--texto); border-radius:2px;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height: 650px;
}
.hero-slide{
  height:100%;
  background-size: cover;
  background-position: center 80%;
  background-color: var(--madera-claro);
  position:relative;
}
.hero-slide::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(20,12,8,.55) 0%, rgba(20,12,8,0) 45%);
}
.hero-caption{
  display:none;
}
.hero-whatsapp{ display:none; }

/* ---------- Intro card ---------- */
.intro-card-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  transform: translateY(-25px);
}
.intro-card{
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 36px;
  max-width: 760px;
  margin: 0 auto;
}
.intro-card-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  margin-bottom:14px;
}
.intro-card-head h1{ font-size:1.7rem; color: var(--terracota-dark); }
.intro-badge{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color: var(--madera);
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-align:center;
  min-width:70px;
}
.intro-card p{ color: var(--texto-suave); line-height:1.65; margin:0 0 18px; }
.leer-mas{
  color: var(--terracota);
  font-weight:400;
  white-space:nowrap;
  background:none;
  border:0;
  padding:0;
  font-family: inherit;
  font-size: inherit;
  cursor:pointer;
  font-style: italic;
}
.intro-extra{ display:inline; }
.intro-extra[hidden]{ display:none; }
.intro-features{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 24px;
}
.intro-features li{
  display:flex; align-items:center; gap:8px;
  font-size:.9rem; font-weight:600; color: var(--texto);
}
.intro-features svg{ color: var(--terracota); flex-shrink:0; }

/* ---------- Habitaciones ---------- */
.habitaciones{ max-width:1180px; margin:20px auto 0; padding: 0 24px 60px; }
.habitaciones h2, .servicios h2, .ubicacion h2, .alrededores h2, .proveeduria h2, .contacto h2{
  font-size:1.7rem; color: var(--terracota-dark); margin-bottom:26px;
}

.habitaciones-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  gap:22px;
  justify-content: center;
}

.hab-card{
  background: var(--blanco);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column;
}
.hab-img{
  height:150px;
  background-size:cover;
  background-position:center;
  background-color: var(--madera-claro);
}
.hab-body{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.hab-body h3{ font-size:1.05rem; color: var(--texto); }
.hab-meta{ display:flex; gap:14px; font-size:.78rem; color: var(--texto-suave); font-weight:700; }
.hab-body p{ font-size:.85rem; color: var(--texto-suave); line-height:1.5; margin:0; flex:1; }
.btn-ver-mas{
  align-self:flex-start;
  margin-top:6px;
  font-size:.8rem; font-weight:700;
  color:#fff; background: var(--terracota);
  padding:9px 16px; border-radius:999px;
  transition: background .2s ease;
}
.btn-ver-mas:hover{ background: var(--terracota-dark); }

/* ---------- Galería ---------- */
.galeria{ background: var(--madera-claro); padding: 50px 24px 60px; }
.galeria-tabs{
  max-width:1180px; margin:0 auto 22px;
  display:flex; justify-content:center; gap:10px;
}
.tab-btn{
  border:1px solid var(--terracota);
  background:transparent;
  color: var(--terracota-dark);
  font-weight:700; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:9px 20px; border-radius:999px;
  cursor:pointer;
  transition: background .2s ease, color .2s ease;
}
.tab-btn.active, .tab-btn:hover{ background: var(--terracota); color:#fff; }
.galeria-grid{
  max-width:1180px; margin:0 auto;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:8px;
}
.g-item{ aspect-ratio: 1 / 1; overflow:hidden; border-radius:8px; }
.g-item img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.g-item:hover img{ transform: scale(1.06); }
.g-item.is-hidden{ display:none; }

/* ---------- Recorrido en video ---------- */
.recorrido{ max-width:1180px; margin:0 auto; padding:0 24px 60px; }
.recorrido-wrap{ display:flex; justify-content:center; }
.recorrido-video-frame{
  position:relative;
  width:100%;
  max-width:280px;
  aspect-ratio: 478 / 850;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  background-size:cover;
  background-position:center;
  background-color: var(--texto);
  background-repeat:no-repeat;
  border:0;
  padding:0;
  cursor:pointer;
  display:block;
}
.recorrido-video-frame::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(20,12,8,.4) 0%, rgba(20,12,8,0) 55%);
}
.recorrido-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%;
  background: rgba(255,255,255,.92);
  color: var(--terracota);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  transition: transform .2s ease, background .2s ease;
  z-index:1;
}
.recorrido-video-frame:hover .recorrido-play{ transform:translate(-50%,-50%) scale(1.08); background:#fff; }
.recorrido-play svg{ margin-left:3px; }

.lightbox-video video{
  max-width:90vw; max-height:85vh;
  border-radius:8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  background:#000;
}

/* ---------- Servicios ---------- */
.servicios{ max-width:1180px; margin:0 auto; padding:60px 24px; }
.servicios h3{ font-size:1rem; color: var(--texto-suave); font-weight:700; margin-bottom:18px; }
.servicios-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px 24px;
}
.servicios-grid li{
  display:flex; align-items:center; gap:10px;
  font-size:.9rem; font-weight:600;
}
.servicios-grid svg{ color: var(--terracota); flex-shrink:0; }

/* ---------- Ubicación ---------- */
.ubicacion{ max-width:1180px; margin:0 auto; padding:0 24px 60px; }
.ubicacion-card{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  overflow:hidden;
}
.ubicacion-mapa{ height:340px; }
.ubicacion-info{
  padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap;
}
.ubicacion-info p{ margin:0; color: var(--texto-suave); font-weight:600; }
.btn-como-llegar{
  background: var(--texto); color:#fff; font-weight:700; font-size:.85rem;
  padding:11px 22px; border-radius:8px;
  transition: background .2s ease;
}
.btn-como-llegar:hover{ background: var(--terracota-dark); }

/* ---------- Alrededores ---------- */
.alrededores{ max-width:1180px; margin:0 auto; padding:0 24px 60px; }

.alrededores-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:22px;
}
.alrededor-card{
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  padding:16px;
  display:flex; flex-direction:column; gap:14px;
  min-height:220px;
}
.alrededor-img{
  flex:0 0 190px;
  border-radius:10px;
  background-size:cover; background-position:center;
  background-color: var(--madera-claro);
}

.alrededor-body h3{ font-size:1.05rem; color: var(--texto-suave); margin-bottom:6px; }

.alrededor-body p{ font-size:.85rem; color: var(--texto-suave); line-height:1.5; margin:0; }
.btn-como-llegar-outline{
  align-self:flex-start;
  border:1px solid var(--texto-suave);
  font-weight:700; font-size:.8rem;
  padding:9px 18px; border-radius:8px;
  transition: background .2s ease, color .2s ease;
  color: var(--texto-suave);
}
.btn-como-llegar-outline:hover{ background: var(--texto-suave); color:#fff; }

/* ---------- Proveeduría ---------- */
.proveeduria{ max-width:1180px; margin:0 auto; padding:0 24px 70px; }
.proveeduria-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
}
.prov-card{
  border:1px dashed rgba(51,38,30,.25);
  border-radius: var(--radius);
  min-height:150px;
}

.section-intro{
  max-width: 640px;
  color: var(--texto-suave);
  line-height: 1.65;
  margin: -10px 0 30px;
}
.prov-card-full{
  border: none;
  background: var(--blanco);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.prov-img{
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--madera-claro);
}
.prov-body{ padding: 16px; }
.prov-body h3{ font-size: 1.05rem; color: var(--terracota-dark); margin-bottom: 6px; }
.prov-body p{ font-size: .85rem; color: var(--texto-suave); line-height: 1.5; margin: 0; }

/* ---------- Reseñas (activar cuando haya contenido real) ---------- */
.resenas{ background: var(--madera-claro); padding:60px 24px; }
.resenas h2{ max-width:1180px; margin:0 auto 26px; font-size:1.7rem; color: var(--terracota-dark); }
.resenas-grid{
  max-width:1180px; margin:0 auto 24px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;
}
.resena-card{ background:#fff; border-radius: var(--radius); padding:20px; box-shadow: var(--shadow); }
.resena-stars{ color: var(--madera); letter-spacing:2px; margin-bottom:8px; }
.resena-texto{ font-size:.9rem; color: var(--texto-suave); line-height:1.5; }
.resena-autor{ display:block; margin-top:10px; font-weight:700; font-size:.82rem; }

/* ---------- Contacto ---------- */
.contacto{ max-width:1180px; margin:0 auto; padding:0 24px 70px; }
.contacto-sub{ color: var(--texto-suave); max-width:560px; margin:0 0 28px; line-height:1.6; }
.contacto-wrap{
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  gap:24px;
  align-items:start;
}
.contacto-wa-card{
  display:flex; align-items:center; gap:16px;
  background: var(--whatsapp);
  color:#fff;
  border-radius: var(--radius);
  padding:24px;
  box-shadow: var(--shadow);
  transition: filter .2s ease;
}
.contacto-wa-card:hover{ filter: brightness(1.06); }
.contacto-wa-card strong{ display:block; font-size:1.05rem; margin-bottom:4px; }
.contacto-wa-card span{ font-size:.82rem; opacity:.9; }

.contacto-form{
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:24px;
  display:flex; flex-direction:column; gap:16px;
}
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row label{ font-size:.82rem; font-weight:700; color: var(--texto-suave); }
.form-row input, .form-row textarea{
  border:1px solid rgba(51,38,30,.18);
  border-radius:8px;
  padding:11px 12px;
  font-family: var(--font-body);
  font-size:.9rem;
  color: var(--texto);
  resize: vertical;
}
.form-row input:focus, .form-row textarea:focus{
  outline: 2px solid var(--terracota);
  outline-offset: 1px;
}
.btn-ver-mas{
  align-self:flex-start;
  margin-top:6px;
  font-size:.8rem; font-weight:700;
  color:#fff; background: var(--terracota);
  padding:9px 16px; border-radius:999px;
  border:0; cursor:pointer; font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  transition: background .2s ease;
}

.form-msg{ margin:0; padding:10px 14px; border-radius:8px; font-size:.85rem; font-weight:600; }
.form-msg-ok{ background:#E4F5E9; color:#1F6B3A; }
.form-msg-error{ background:#FBE6E1; color:var(--terracota-dark); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--texto); color: #EFE6DC; }
.footer-inner{
  max-width:1180px; margin:0 auto;
  padding:46px 24px 30px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:30px;
}

.footer-col h4{ font-family: var(--font-body); font-size:.95rem; margin-bottom:14px; color:#fff; }
.footer-col p{ margin:0 0 6px; font-size:.85rem; color:#C9BCAF; }
.footer-col a{ display:block; font-size:.85rem; color:#C9BCAF; margin-bottom:8px; }
.footer-col a:hover{ color:#fff; }
.footer-col-brand{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.footer-logo{ height: 30px; width: auto; margin-bottom:14px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:34px; height:34px; border-radius:50%;
  border:1px solid #C9BCAF;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:16px 24px;
  max-width:1180px; margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:.78rem; color:#A8998B;
}
.footer-credito{ display:flex; align-items:center; gap:6px; }
.sae400-logo{ height:12px; width:auto; display:inline-block; vertical-align:middle; }

/* ---------- FAB WhatsApp (mobile) ---------- */
.fab-whatsapp{
  display:none;
  position:fixed; right:18px; bottom:18px; z-index:200;
  width:56px; height:56px; border-radius:50%;
  background: var(--whatsapp); color:#fff;
  align-items:center; justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .habitaciones-grid{ grid-template-columns: repeat(2, 1fr); }
  .servicios-grid{ grid-template-columns: repeat(2, 1fr); }
  .galeria-grid{ grid-template-columns: repeat(3, 1fr); }
  .footer-inner{ grid-template-columns: 1fr 1fr; }

}

@media (max-width: 720px){
  .hero{ height: 240px; }

  .main-nav{
    position:fixed;
    top: var(--header-h);
    left:0; right:0;
    background: var(--crema);
    flex-direction:column;
    padding: 18px 24px;
    gap:16px;
    box-shadow: var(--shadow);
    transform: translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .main-nav.open{
    transform: translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .nav-toggle{ display:flex; }

  .intro-card-wrap{ transform: translateY(-10px); }
  .intro-card{ padding:22px; }
  .intro-card-head{ flex-direction:column; gap:10px; }
  .intro-features{ grid-template-columns: 1fr; }

  .habitaciones-grid{ grid-template-columns: 1fr; }
  .servicios-grid{ grid-template-columns: 1fr; }
  .galeria-grid{ grid-template-columns: repeat(2, 1fr); }
  .alrededores-grid{ grid-template-columns: 1fr; }
  .proveeduria-grid{ grid-template-columns: 1fr; }
  .ubicacion-info{ flex-direction:column; align-items:flex-start; }

  .footer-inner{ grid-template-columns: 1fr; }
  .footer-col-brand{ align-items:flex-start; text-align:left; }

  .contacto-wrap{ grid-template-columns: 1fr; }
  .resenas-grid{ grid-template-columns: 1fr; }

  .hero-whatsapp{ display:none; }
  .hero-caption{ display:none; }
  .fab-whatsapp{ display:flex; }
}
/* ---------- Lightbox (ver foto más grande) ---------- */
.lightbox{
  position: fixed; inset: 0;
  background: rgba(20,12,8,.88);
  display:flex; align-items:center; justify-content:center;
  z-index: 300;
  padding: 24px;
}
.lightbox[hidden]{ display:none; }

.lightbox img{
  max-width: 90vw; max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}

.lightbox-close{
  position: absolute; top: 20px; right: 24px;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.lightbox-close:hover{ background: rgba(255,255,255,.25); }
.lightbox-trigger{ cursor: pointer; }

.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(255,255,255,.12); color:#fff; border:0;
  width:48px; height:48px; border-radius:50%;
  font-size:1.4rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease;
  appearance: none; -webkit-appearance: none;
}
.lightbox-nav:hover{ background: rgba(255,255,255,.25); }
.lightbox-prev{ left:20px; }
.lightbox-next{ right:20px; }
.lightbox-nav[hidden]{ display:none; }

/* ---------- Fade-in suave de cards al hacer scroll ---------- */
.fade-in-init{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-in-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Contador de fotos en el lightbox ---------- */
.lightbox-contador{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
}
.lightbox-contador[hidden]{ display:none; }

/* ---------- Paleta de colores (debug — sacar antes de publicar) ---------- */
.paleta-debug{
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 24px 60px;
}
.paleta-debug h4{
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--texto-suave);
  margin-bottom: 16px;
}
.paleta-swatches{
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
}
.paleta-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:.72rem;
  font-family: monospace;
  color: var(--texto-suave);
}
.paleta-item span{
  width:70px; height:70px;
  border-radius:8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}