/* ============================================================
   Hotel Casa Valle — Hoja de estilos principal
   Paleta: verde bosque + terracota + crema cálida
   Tipografía: Playfair Display (display) + Raleway (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Raleway:wght@300;400;500;600&display=swap');

:root {
  --verde:       #2C5F2E;
  --verde-mid:   #3d7a40;
  --verde-light: #E8F5E9;
  --verde-pale:  #f0f7f0;
  --terra:       #C4622D;
  --terra-light: #FBF0EA;
  --crema:       #FAF7F2;
  --blanco:      #FFFFFF;
  --texto:       #2A1F1A;
  --texto-suave: #6B5E57;
  --borde:       #E0D8D0;
  --sombra:      rgba(42,31,26,.10);
  --radio:       6px;
  --trans:       .25s ease;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--texto);
  background: var(--crema);
}

/* ── Tipografía ─────────────────────────────────────────── */
h1,h2,h3,h4 { font-family: 'Playfair Display', serif; line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; }
p  { margin-bottom: 1rem; }
a  { color: var(--verde); text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--terra); }

/* ── Utilidades ─────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section    { padding: 80px 0; }
.section-sm { padding: 48px 0; }
.text-center { text-align: center; }
.text-verde  { color: var(--verde); }
.text-terra  { color: var(--terra); }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.hidden { display: none !important; }

/* ── Sección encabezado ──────────────────────────────────── */
.section-header { text-align: center; margin-bottom: 56px; }
.section-header .eyebrow {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 10px;
}
.section-header h2 { color: var(--verde); }
.section-header .lead { color: var(--texto-suave); max-width: 560px; margin: 12px auto 0; font-size: 1.05rem; }
.divider { width: 56px; height: 3px; background: var(--terra); margin: 16px auto; border-radius: 2px; }

/* ── Header compacto habitaciones ────────────────────────── */
.hab-header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.hab-header .eyebrow { margin-bottom: 0; }
.hab-header h2 { color: var(--verde); font-size: 1.5rem; margin: 0; }

/* ── Botones ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 30px;
  border-radius: var(--radio);
  font-family: 'Raleway', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .05em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--trans);
  text-decoration: none;
}
.btn-primary   { background: var(--verde);  color: #fff; border-color: var(--verde); }
.btn-primary:hover { background: var(--verde-mid); color:#fff; border-color:var(--verde-mid); transform:translateY(-2px); box-shadow:0 6px 20px rgba(44,95,46,.35); }
.btn-outline   { background: transparent; color: var(--verde); border-color: var(--verde); }
.btn-outline:hover { background: var(--verde); color: #fff; transform:translateY(-2px); }
.btn-terra     { background: var(--terra); color: #fff; border-color: var(--terra); }
.btn-terra:hover   { background: #a8521f; color:#fff; border-color:#a8521f; transform:translateY(-2px); }
.btn-white     { background: #fff; color: var(--verde); }
.btn-white:hover   { background: var(--verde-light); transform:translateY(-2px); }
.btn-sm { padding: 9px 20px; font-size: .82rem; }
.btn-lg { padding: 16px 40px; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }

/* ── Formularios ─────────────────────────────────────────── */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 6px; }
.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  font-family: 'Raleway', sans-serif;
  font-size: .95rem;
  color: var(--texto);
  background: #fff;
  transition: border-color var(--trans), box-shadow var(--trans);
  appearance: none;
}
.form-control:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(44,95,46,.12); }
.form-control::placeholder { color: #b0a8a3; }
select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236B5E57' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media(max-width:600px){ .form-row { grid-template-columns: 1fr; } }
.form-hint { font-size:.77rem; color:var(--texto-suave); margin-top:4px; }
.form-error { font-size:.8rem; color:#c62828; margin-top:4px; }

/* ── Alertas ─────────────────────────────────────────────── */
.alert { padding:14px 18px; border-radius:var(--radio); margin-bottom:16px; font-size:.9rem; border-left:4px solid; }
.alert-success { background:#E8F5E9; border-color:#2C5F2E; color:#1B5E20; }
.alert-error   { background:#FFEBEE; border-color:#c62828; color:#b71c1c; }
.alert-info    { background:#E3F2FD; border-color:#1565C0; color:#0D47A1; }
.alert-warning { background:#FFF8E1; border-color:#F57F17; color:#E65100; }

/* ── Navegación ──────────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0 24px;
  transition: background var(--trans), box-shadow var(--trans);
}
.navbar.scrolled {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px var(--sombra);
}
.home .navbar.scrolled { box-shadow: none; backdrop-filter: none; }
body.home { background: #0e1e0f; }
.navbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; max-width: 1200px; margin: 0 auto;
}
.navbar-logo img { height: 52px; width: auto; transition: filter var(--trans); }
.navbar:not(.scrolled) .navbar-logo img { filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)) drop-shadow(0 0 12px rgba(0,0,0,.6)); }
.navbar-logo span {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--verde);
  margin-left: 10px;
  vertical-align: middle;
}
.navbar-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.navbar-links a {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto);
  transition: color var(--trans);
}
.navbar.scrolled .navbar-links a { color: var(--texto); }
.navbar:not(.scrolled) .navbar-links a { color: #fff; }
.navbar-links a:hover { color: var(--terra) !important; }
.navbar-links .btn { text-transform: uppercase; font-size: .8rem; padding: 9px 22px; }
.navbar-brand-name { display: none; }
.navbar-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.navbar-toggle span { width: 24px; height: 2px; background: var(--verde); border-radius: 2px; transition: all var(--trans); }
.navbar.scrolled .navbar-toggle span { background: var(--verde); }
.navbar:not(.scrolled) .navbar-toggle span { background: #fff; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url('../images/hero-bg.jpg') center/cover no-repeat;
}
.hero-bg::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 30%);
}
.hero-content { position: relative; z-index: 1; text-align: center; color: #fff; padding: 120px 24px 60px; }

/* ── Banner: promoción + eGuide (debajo del Hero) ────────── */
.promo-banner { padding: 28px 0 8px; }
.promo-banner-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
.promo-banner-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; border-radius: 12px; text-decoration: none;
  box-shadow: 0 2px 14px var(--sombra); transition: transform var(--trans), box-shadow var(--trans);
}
.promo-banner-card:hover { transform: translateY(-3px); box-shadow: 0 8px 26px var(--sombra); text-decoration: none; }
.promo-banner-card.promo  { background: var(--terra); color: #fff; }
.promo-banner-card.eguide { background: #fff; border: 1.5px solid var(--borde); color: var(--texto); }
.promo-banner-icon { font-size: 1.9rem; flex-shrink: 0; line-height: 1; display: flex; }
.promo-banner-icon img { height: 42px; width: 42px; min-width: 42px; max-width: 42px; border-radius: 50%; object-fit: cover; display: block; }
.promo-banner-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.promo-banner-text strong { font-size: .95rem; line-height: 1.3; }
.promo-banner-card.promo .promo-banner-text strong { color: #fff; }
.promo-banner-text span { font-size: .8rem; opacity: .85; line-height: 1.5; }
.promo-banner-cta { margin-left: auto; font-size: .78rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; color: inherit; }
@media (max-width: 768px) {
  .promo-banner-grid { grid-template-columns: 1fr; }
  .promo-banner-card { flex-wrap: wrap; }
  .promo-banner-cta { margin-left: 58px; }
}

/* ── Sello central ────────────────────────────────────────── */
.hero-sello { margin-bottom: 40px; }
.hero-sello-logo {
  height: 72px; width: auto; margin-bottom: 20px;
  filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.5));
}
.hero-sello-line {
  width: 200px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.6), transparent);
  margin: 14px auto;
}
.hero-sello-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 4px #000, 0 0 40px rgba(0,0,0,.8);
  line-height: 1;
}
.hero-sello-sub {
  font-size: .72rem; letter-spacing: .28em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 4px;
  text-shadow: 0 2px 4px #000, 0 0 30px rgba(0,0,0,.8);
}

.hero-badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.hero-badge {
  background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22); border-radius: 40px;
  padding: 8px 20px; font-size: .8rem; color: #fff;
  display: flex; align-items: center; gap: 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
/* ── Buscador de fechas hero ──────────────────────────────── */
.hero-search {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  padding: 20px 24px;
  display: inline-flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  margin: 0 auto;
}
.hero-search .form-group { margin: 0; text-align: left; }
.hero-search .form-label { color: rgba(255,255,255,.8); }
.hero-search .form-control { background: rgba(255,255,255,.9); min-width: 140px; }

/* ── Cards de habitación ─────────────────────────────────── */
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 24px; }
.room-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px var(--sombra);
  transition: transform var(--trans), box-shadow var(--trans);
  display: flex; flex-direction: column;
}
.room-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(44,95,46,.18); }
.room-card-img { position: relative; height: 220px; overflow: hidden; }
.room-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.room-card:hover .room-card-img img { transform: scale(1.06); }
.room-badge { position: absolute; top: 14px; left: 14px; background: var(--terra); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; }
.room-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.room-card-body h3 { font-size: 1.05rem; margin-bottom: 6px; color: var(--verde); }
.room-card-body .meta { display: flex; gap: 12px; color: var(--texto-suave); font-size: .78rem; margin-bottom: 10px; flex-wrap: wrap; }
.room-card-body .meta span { display: flex; align-items: center; gap: 4px; }
.room-card-body p { font-size: .85rem; color: var(--texto-suave); flex: 1; }
.room-card-footer { padding: 0 20px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.room-price .from { font-size: .68rem; color: var(--texto-suave); display: block; text-transform: uppercase; letter-spacing: .07em; }
.room-price .amount { font-family: 'Playfair Display', serif; font-size: 1.35rem; color: var(--verde); font-weight: 700; }
.room-price .per { font-size: .7rem; color: var(--texto-suave); }

/* ── Servicios / amenidades ──────────────────────────────── */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 24px; }
.service-item {
  background: var(--verde-pale); border-radius: 10px; padding: 28px 20px; text-align: center;
  transition: transform var(--trans), background var(--trans);
}
.service-item:hover { background: var(--verde-light); transform: translateY(-4px); }
.service-icon { font-size: 2.2rem; margin-bottom: 12px; display: block; }
.service-item h4 { font-family: 'Raleway', sans-serif; font-size: .9rem; font-weight: 600; color: var(--verde); }

/* ── Galería ─────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 220px 220px;
  gap: 10px;
}
.gallery-grid .g-item { overflow: hidden; border-radius: 8px; }
.gallery-grid .g-item:first-child { grid-column: span 2; grid-row: span 2; }
.gallery-grid .g-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.gallery-grid .g-item:hover img { transform:scale(1.06); }

/* ── Sección CTA ─────────────────────────────────────────── */
.cta-section { background: var(--verde); color: #fff; text-align: center; }
.cta-section h2 { color: #fff; }
.cta-section p  { color: rgba(255,255,255,.8); max-width: 480px; margin: 12px auto 28px; }

/* ── Contacto ────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start; }
.contact-info h3 { color: var(--verde); margin-bottom: 20px; }
.contact-item { display: flex; gap: 14px; margin-bottom: 24px; }
.contact-item .ci-icon { width: 44px; height: 44px; background: var(--verde-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.contact-item .ci-body strong { display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--terra); margin-bottom: 2px; }
.contact-item .ci-body span  { color: var(--texto); font-size: .95rem; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.page-hero {
  background: var(--verde);
  color: #fff; padding: 120px 0 60px;
  text-align: center;
}
.page-hero h1 { color: #fff; margin-bottom: 12px; }
.page-hero p  { color: rgba(255,255,255,.8); font-size: 1.05rem; }

/* ── Cards habitaciones.php ──────────────────────────────── */
.hab-card { background:#fff; border-radius:14px; box-shadow:0 4px 24px var(--sombra); overflow:hidden; margin-bottom:28px; }
.hab-card-inner { display:grid; grid-template-columns:380px 1fr; min-height:280px; }
.hab-card-info { padding:28px 32px; display:flex; flex-direction:column; }
@media(max-width:820px) {
  .hab-card-inner { grid-template-columns:1fr; }
  .hab-card-inner > div:first-child { height:220px; }
  .hab-card-info { padding:20px; }
}
@media(max-width:640px) {
  .hab-card-inner > div:first-child { height:180px; }
  .hab-card-info { padding:16px; }
  .hab-card-info h2 { font-size:1.1rem !important; }
}

/* ── Resumen reserva ─────────────────────────────────────── */
.booking-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.booking-summary { background:#fff; border-radius:12px; box-shadow:0 4px 24px var(--sombra); overflow:hidden; position:sticky; top:90px; }
.booking-summary .bs-header { background: var(--verde); color:#fff; padding:20px 24px; }
.booking-summary .bs-header h3 { color:#fff; font-size:1.1rem; margin:0; }
.booking-summary .bs-body { padding:24px; }
.price-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:.9rem; }
.price-row.total { border-top:2px solid var(--borde); margin-top:8px; padding-top:16px; font-weight:700; font-size:1.05rem; color:var(--verde); }
.price-row .label { color:var(--texto-suave); }

/* ── Confirmación ────────────────────────────────────────── */
.confirm-card { background:#fff; border-radius:12px; box-shadow:0 4px 24px var(--sombra); padding:48px; max-width:700px; margin:0 auto; }
.confirm-icon { font-size:4rem; display:block; text-align:center; margin-bottom:20px; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { background: #1B2A1C; color: rgba(255,255,255,.7); padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand p { font-size: .88rem; margin-top: 14px; line-height: 1.7; }
.footer-col h4 { color: #fff; font-family: 'Raleway', sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a { color: rgba(255,255,255,.6); font-size: .88rem; transition: color var(--trans); }
.footer-col ul a:hover { color: var(--terra); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: .8rem; }
.footer-logo img { height: 46px; filter: brightness(0) invert(1); opacity: .7; }

/* ── Lightbox simple ─────────────────────────────────────── */
.lightbox { position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s; }
.lightbox.active { opacity:1;pointer-events:auto; }
.lightbox img { max-width:90vw;max-height:88vh;border-radius:4px;box-shadow:0 8px 60px rgba(0,0,0,.6); }
.lightbox-close { position:absolute;top:20px;right:24px;color:#fff;font-size:2rem;cursor:pointer;line-height:1; }
.lightbox-prev,.lightbox-next { position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:2.5rem;cursor:pointer;padding:8px 16px;user-select:none; }
.lightbox-prev { left:12px; }
.lightbox-next { right:12px; }

/* ── Amenidades tags ─────────────────────────────────────── */
.amenidades-list { display:flex;flex-wrap:wrap;gap:8px;margin:12px 0; }
.amenidad-tag { background:var(--verde-light);color:var(--verde);border-radius:20px;padding:4px 14px;font-size:.78rem;font-weight:600; }

/* ── Paso reserva ────────────────────────────────────────── */
.steps { display:flex;gap:0;margin-bottom:40px; }
.step { flex:1;text-align:center;position:relative; }
.step::after { content:'';position:absolute;top:16px;left:50%;width:100%;height:2px;background:var(--borde);z-index:0; }
.step:last-child::after { display:none; }
.step-num { width:32px;height:32px;border-radius:50%;border:2px solid var(--borde);background:#fff;color:var(--texto-suave);font-size:.82rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:all var(--trans); }
.step.active .step-num  { background:var(--verde);border-color:var(--verde);color:#fff; }
.step.done  .step-num   { background:var(--terra);border-color:var(--terra);color:#fff; }
.step-label { font-size:.72rem;font-weight:600;color:var(--texto-suave);margin-top:8px;display:block;text-transform:uppercase;letter-spacing:.07em; }
.step.active .step-label { color:var(--verde); }

/* ── Spinner ─────────────────────────────────────────────── */
.spinner { width:22px;height:22px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:900px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .booking-layout { grid-template-columns:1fr; }
  .booking-summary { position:static; }
  .gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .gallery-grid .g-item:first-child { grid-column:1; grid-row:1; }
  .rooms-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media(max-width:640px) {
  .navbar-links { display:none; position:fixed; top:72px; left:0; right:0; z-index:999; background:#1b321c; flex-direction:column; padding:6px 0 14px; gap:0; box-shadow:0 8px 30px rgba(0,0,0,.4); }
  .navbar-links.open { display:flex; }
  .navbar-links li { width:100%; }
  .navbar-links a { display:flex; justify-content:space-between; align-items:center; color:rgba(255,255,255,.85) !important; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:11px 20px; border-bottom:1px solid rgba(255,255,255,.08); }
  .navbar-links a:not(.btn)::after { content:'›'; font-size:1rem; opacity:.5; font-weight:300; }
  .navbar-links a:not(.btn):hover { background:rgba(255,255,255,.06); color:#fff !important; }
  .navbar-links li:last-child { padding:10px 16px 0; border-bottom:none; }
  .navbar-links .btn { display:block; text-align:center; width:100%; padding:10px 0; font-size:.72rem; letter-spacing:.1em; border-bottom:none !important; }
  .navbar-links .btn::after { display:none; }
  .navbar-toggle { display:flex; }
  .navbar-brand-name { display:block; flex:1; text-align:center; font-family:'Playfair Display',serif; font-size:.88rem; font-weight:700; letter-spacing:.06em; color:#fff; }
  .navbar.scrolled .navbar-brand-name { color: var(--verde); }
  .home .navbar-brand-name { display:none; }
  .home .navbar.scrolled .navbar-brand-name { display:block; color:var(--verde); }
  .rooms-grid { grid-template-columns: 1fr; gap: 12px; }
  .room-card { display: grid; grid-template-columns: 120px 1fr; grid-template-rows: auto auto; height: auto; border-radius: 10px; }
  .room-card-img { grid-column: 1; grid-row: 1 / 3; position: relative; min-height: 140px; height: 100%; }
  .room-card-body { grid-column: 2; grid-row: 1; padding: 12px 12px 4px; }
  .room-card-body h3 { font-size: .88rem; margin-bottom: 4px; }
  .room-card-body .meta { font-size: .7rem; gap: 6px; margin-bottom: 0; }
  .room-card-body p { display: none; }
  .room-card-footer { grid-column: 2; grid-row: 2; padding: 6px 12px 12px; align-self: end; flex-wrap: nowrap; }
  .room-price .from { display: none; }
  .room-price .amount { font-size: 1rem; }
  .room-price .per { display: none; }
  .hero-search { flex-direction:column; align-items:stretch; }
  .footer-grid { display:none; }
  .site-footer { padding: 24px 0; }
  .footer-bottom { border-top: none; padding-top: 0; flex-direction: column; gap: 8px; text-align: center; }
  .confirm-card { padding:28px 20px; }
  .gallery-grid { grid-template-columns:1fr; }
}

/* ── Animaciones de entrada ─────────────────────────────── */
.fade-in { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ── WhatsApp flotante ───────────────────────────────────── */
.wa-btn {
  position:fixed; bottom:24px; right:24px; z-index:999;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; font-size:1.6rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.4);
  transition:transform var(--trans), box-shadow var(--trans);
  text-decoration:none;
}
.wa-btn:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,.5); color:#fff; }

/* ── Reservar: barra compacta de pasos ──────────────────── */
.booking-top-bar { display:flex; align-items:center; gap:24px; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--borde); }
.booking-top-title { font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:700; color:var(--texto); white-space:nowrap; }
.booking-top-bar .steps { flex:1; margin-bottom:0; }
@media(max-width:640px) {
  .booking-top-bar { flex-direction:column; align-items:flex-start; gap:10px; }
  .booking-top-title { font-size:1.1rem; }
  .booking-top-bar .steps { width:100%; }
}

/* ── Selector de fechas (calendario) ────────────────────── */
.cal-picker-wrap { margin-bottom:20px; }

/* Barra chips check-in / check-out */
.cal-dates-bar { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.cal-date-chip { flex:1; padding:10px 14px; border:1.5px solid var(--borde); border-radius:8px; cursor:default; transition:border-color .15s,background .15s; }
.cal-date-chip.active { border-color:var(--verde); background:var(--verde-pale); }
.cal-date-chip.filled { border-color:var(--verde); }
.cal-date-chip-lbl { font-size:.68rem; font-weight:700; color:var(--texto-suave); text-transform:uppercase; letter-spacing:.07em; display:block; }
.cal-date-chip-val { font-size:.92rem; font-weight:600; color:var(--texto-suave); display:block; margin-top:2px; }
.cal-date-chip.filled .cal-date-chip-val,
.cal-date-chip.active .cal-date-chip-val { color:var(--verde); }

/* Widget calendario */
.cal-widget { border:1.5px solid var(--borde); border-radius:12px; padding:20px; background:#fff; }
.cal-nav-row { display:flex; align-items:flex-start; gap:8px; }
.cal-nav-btn { background:none; border:1.5px solid var(--borde); border-radius:50%; width:34px; height:34px; font-size:1rem; cursor:pointer; color:var(--verde); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .15s; margin-top:2px; }
.cal-nav-btn:hover:not([disabled]) { background:var(--verde); color:#fff; border-color:var(--verde); }
.cal-nav-btn[disabled] { opacity:.3; cursor:default; }
.cal-months-row { display:flex; gap:24px; flex:1; }
.cal-month { flex:1; min-width:0; }
.cal-month-name { text-align:center; font-weight:700; color:var(--verde); font-size:.88rem; margin-bottom:10px; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.cal-day-hdr { text-align:center; font-size:.65rem; font-weight:700; color:var(--texto-suave); padding:4px 0 6px; }
.cal-day { text-align:center; padding:6px 2px; font-size:.8rem; border-radius:4px; cursor:pointer; user-select:none; transition:background .1s; }
.cal-day.empty,.cal-day.past { color:#d1d5db; cursor:default; pointer-events:none; }
.cal-day.blocked { color:#d1d5db; cursor:not-allowed; text-decoration:line-through; background:#f5f5f5; }
.cal-day:not(.past):not(.blocked):not(.empty):hover { background:var(--verde-pale); color:var(--verde); }
.cal-day.sel-start { background:var(--verde); color:#fff !important; font-weight:700; border-radius:4px 0 0 4px; }
.cal-day.sel-end   { background:var(--verde); color:#fff !important; font-weight:700; border-radius:0 4px 4px 0; }
.cal-day.no-range  { border-radius:4px !important; }
.cal-day.in-range  { background:var(--verde-pale); color:var(--verde); border-radius:0; }
.cal-hint { font-size:.78rem; color:var(--texto-suave); margin-top:12px; padding:8px 14px; border-radius:6px; background:#f9f9f9; text-align:center; }
.cal-hint.selecting { background:#FFF8E1; color:#92400E; }
.cal-hint.ready { background:var(--verde-pale); color:var(--verde); }
.cal-loading { text-align:center; padding:24px; color:var(--texto-suave); font-size:.85rem; }

@media(max-width:700px) {
  .cal-months-row .cal-month:last-child { display:none; }
  .cal-widget { padding:14px 10px; }
  .cal-dates-bar { gap:6px; }
  .cal-date-chip { padding:8px 10px; }
}

/* ── Paso 3: Layout de pago ─────────────────────────────── */
.pay-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--borde); }
.pay-secure-badge { font-size:.82rem; font-weight:700; color:var(--verde); }
.pay-openpay-logo { height:26px; object-fit:contain; }
.pay-openpay-logo-sm { height:20px; object-fit:contain; opacity:.75; flex-shrink:0; }

.pay-layout { display:grid; grid-template-columns:1fr 260px; gap:16px; margin-bottom:16px; }

/* Panel tarjeta */
.pay-card-panel { background:#f8fafb; border:1.5px solid var(--borde); border-radius:10px; padding:20px; }
.pay-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.pay-card-title { font-size:.78rem; font-weight:700; color:var(--texto-suave); text-transform:uppercase; letter-spacing:.06em; }
.pay-brands { display:flex; gap:6px; align-items:center; }
.pay-brands img { height:20px; object-fit:contain; }

/* Panel otras opciones */
.pay-alt-panel { display:flex; flex-direction:column; gap:10px; }
.pay-alt-title { font-size:.68rem; font-weight:700; color:var(--texto-suave); text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px; }
.pay-alt-card { background:#fff; border:1.5px solid var(--borde); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:10px; }
.pay-alt-card-top { display:flex; gap:10px; align-items:flex-start; }
.pay-alt-icon { font-size:1.3rem; flex-shrink:0; margin-top:1px; }
.pay-alt-name { font-weight:700; font-size:.85rem; color:var(--texto); line-height:1.2; }
.pay-alt-desc { font-size:.72rem; color:var(--texto-suave); margin-top:2px; }
.pay-paynet-logo { height:14px; object-fit:contain; margin-top:4px; display:block; }
.pay-tienda-chains { font-size:.7rem; color:var(--texto-suave); }

/* Footer seguridad */
.pay-security-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--borde); }
.pay-security-footer span { font-size:.68rem; color:var(--texto-suave); }

/* Resultados SPEI / Tienda */
.pay-result-ok { background:var(--verde-pale); border:1px solid #a5d6a7; border-radius:8px; padding:14px; }
.pay-result-title { font-weight:700; color:var(--verde); font-size:.85rem; margin-bottom:10px; }
.pay-result-table { width:100%; font-size:.78rem; border-collapse:collapse; }
.pay-result-table td { padding:3px 0; vertical-align:top; }
.pay-result-table td:first-child { color:var(--texto-suave); width:42%; padding-right:6px; }
.pay-clabe { font-family:monospace; font-size:.88rem; letter-spacing:.04em; word-break:break-all; }
.pay-barcode { width:100%; max-width:220px; display:block; margin:8px auto; }
.pay-result-folio { font-size:.72rem; color:var(--verde); font-weight:700; margin-top:10px; padding-top:8px; border-top:1px solid #a5d6a7; }
.pay-result-note { font-size:.7rem; color:var(--texto-suave); margin-top:5px; line-height:1.4; }

@media(max-width:700px) {
  .pay-layout { grid-template-columns:1fr; }
  .pay-security-footer { flex-direction:column; gap:6px; text-align:center; }
}