/* ============================================================
   HOSPEDAJE JASSMIN — hoja de estilos
   Organización:
   1. Reset y variables
   2. Tipografía y utilidades
   3. Botones
   4. Header / navegación
   5. Hero
   6. Banner de descuento
   7. Beneficios
   8. Habitaciones
   9. Terraza
   10. Testimonios
   11. Galería
   12. Ubicación y contacto
   13. Footer
   14. Lightbox y modal de reserva
   15. Animaciones y accesibilidad
   ============================================================ */

/* ── 1. Reset y variables ─────────────────────────────────────── */
:root{
  --navy-900:#081b33;
  --navy-800:#0d2b4d;
  --navy-700:#163a5e;
  --blue-700:#12406f;
  --blue-600:#1c5687;
  --blue-500:#3c76a8;
  --beige-50:#faf7f1;
  --beige-100:#f3ecdf;
  --cream:#fffdf9;
  --gold:#c79a4b;
  --gold-light:#e7c684;
  --slate:#5c6b7d;
  --slate-light:#8996a6;
  --ink:#132436;
  --white:#ffffff;
  --whatsapp:#25d366;
  --whatsapp-dark:#1ea952;
  --border:#e7e2d6;
  --border-soft:#eef1f5;
  --surface:#ffffff;
  --heading:var(--navy-900);
  --header-scrolled-bg:rgba(255,253,249,.94);
  --shadow-sm:0 4px 16px rgba(8,27,51,.07);
  --shadow-md:0 16px 38px rgba(8,27,51,.12);
  --shadow-lg:0 28px 64px rgba(8,27,51,.20);
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;
  --font-head:"Georgia","Iowan Old Style",serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
video{max-width:100%}

/* ── 2. Tipografía y utilidades ───────────────────────────────── */
.container{width:min(1240px,calc(100% - 40px));margin:0 auto}
section{position:relative}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;letter-spacing:-.01em;color:var(--heading)}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;
}
.eyebrow::before{content:"";width:28px;height:1.5px;background:var(--gold);display:inline-block}
h2.section-title{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:16px;line-height:1.12}
p.section-lead{color:var(--slate);max-width:620px;font-size:1.05rem}
.section-head{margin-bottom:48px}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto}
.section-head.center::before{margin-left:auto;margin-right:auto}
.section-head.center p.section-lead{margin-left:auto;margin-right:auto}
.pad{padding:104px 0}
.pad-sm{padding:60px 0}
@media(max-width:760px){
  .pad{padding:68px 0}
  .pad-sm{padding:44px 0}
}
.text-center{text-align:center}
.mt-30{margin-top:30px}
.tint-beige{background:var(--beige-50)}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-delay-1.is-visible{transition-delay:.08s}
.reveal-delay-2.is-visible{transition-delay:.16s}
.reveal-delay-3.is-visible{transition-delay:.24s}
.reveal-delay-4.is-visible{transition-delay:.32s}
.reveal-delay-5.is-visible{transition-delay:.4s}

/* ── 3. Botones ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;font-weight:700;font-size:.95rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
  white-space:nowrap;
}
.btn svg{flex:none;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(2px)}
.btn-primary{
  background:linear-gradient(135deg,var(--whatsapp),var(--whatsapp-dark));
  color:#fff;box-shadow:0 14px 30px rgba(37,211,102,.30);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(37,211,102,.4);filter:brightness(1.08) saturate(1.1)}
.btn-primary:active{transform:translateY(-1px)}
.btn-outline{
  background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.55);
  backdrop-filter:blur(6px);
}
.btn-outline:hover{background:rgba(255,255,255,.16);transform:translateY(-3px)}
.btn-navy{background:var(--navy-800);color:#fff;box-shadow:var(--shadow-sm)}
.btn-navy:hover{background:var(--navy-900);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--navy-900);box-shadow:0 12px 26px rgba(199,154,75,.35)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(199,154,75,.45)}
.btn-sm{padding:11px 20px;font-size:.86rem}
.btn-block{width:100%}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ── 4. Header / navegación ───────────────────────────────────── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:20px 0;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
}
.site-header.scrolled{
  background:var(--header-scrolled-bg);backdrop-filter:blur(14px);
  box-shadow:0 6px 26px rgba(8,27,51,.08);padding:12px 0;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.16rem;color:#fff;transition:color .4s var(--ease)}
.site-header.scrolled .brand{color:var(--heading)}
.brand-mark{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue-600),var(--navy-800));
  color:#fff;font-weight:800;font-size:1.05rem;font-family:var(--font-head);
  box-shadow:0 10px 22px rgba(8,27,51,.35);flex:none;
}
.brand small{display:block;font-size:.65rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-light);font-family:var(--font-body)}
.site-header.scrolled .brand small{color:var(--gold)}
nav.main-nav{display:flex;align-items:center;gap:4px}
nav.main-nav a{
  padding:10px 16px;border-radius:999px;font-weight:600;font-size:.92rem;
  color:rgba(255,255,255,.92);transition:background .25s ease,color .25s ease;position:relative;
}
.site-header.scrolled nav.main-nav a{color:var(--heading)}
nav.main-nav a:hover{background:rgba(255,255,255,.16)}
.site-header.scrolled nav.main-nav a:hover{background:var(--beige-100)}
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-toggle{
  display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);color:#fff;flex:none;transition:background .25s ease,color .25s ease,transform .25s ease;
}
.site-header.scrolled .nav-toggle{background:var(--beige-100);color:var(--heading)}

@media(max-width:960px){
  nav.main-nav{
    position:fixed;top:0;right:0;height:100vh;width:min(320px,86vw);
    background:var(--cream);flex-direction:column;align-items:stretch;
    padding:104px 26px 30px;gap:4px;box-shadow:-18px 0 54px rgba(8,27,51,.25);
    transform:translateX(100%);transition:transform .45s var(--ease);z-index:99;
  }
  nav.main-nav.open{transform:translateX(0)}
  nav.main-nav a{color:var(--heading) !important;padding:15px 16px;font-size:1.06rem}
  nav.main-nav a:hover{background:var(--beige-100) !important}
  .nav-toggle{display:inline-flex}
}
.nav-scrim{
  position:fixed;inset:0;background:rgba(6,15,30,.5);opacity:0;pointer-events:none;
  transition:opacity .4s ease;z-index:98;
}
.nav-scrim.open{opacity:1;pointer-events:auto}

/* ── 5. Hero ───────────────────────────────────────────────────── */
.hero{
  min-height:100svh;display:flex;align-items:flex-end;color:#fff;position:relative;overflow:hidden;
  padding-bottom:96px;
}
.hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center 32%;
  animation:hero-zoom 22s ease-in-out infinite alternate;
}
.hero-video{
  /* object-fit:cover: llena toda la portada sin barras. Al ser un video
     vertical dentro de una portada horizontal, en escritorio se recorta
     bastante (matemáticamente inevitable sin usar barras laterales). */
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;
  background:var(--navy-900);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,20,40,.62) 0%,rgba(8,20,40,.32) 40%,rgba(8,20,40,.92) 100%);
}
.hero-inner{max-width:800px;margin-left:auto;margin-right:auto;text-align:center;position:relative;z-index:1}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;padding:9px 17px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(6px);
  font-size:.8rem;font-weight:700;letter-spacing:.08em;margin-bottom:24px;
  opacity:0;animation:hero-in .8s var(--ease) .15s forwards;
}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--gold-light);box-shadow:0 0 0 5px rgba(231,198,132,.25)}
.hero h1{
  font-size:clamp(2.4rem,6vw,4.1rem);line-height:1.04;letter-spacing:.015em;color:#fff;
  margin-bottom:18px;
  text-shadow:0 2px 6px rgba(0,0,0,.45),0 20px 46px rgba(0,0,0,.4),0 0 80px rgba(199,154,75,.25);
  opacity:0;animation:hero-in .9s var(--ease) .3s forwards;
}
.hero p.subtitle{
  margin-bottom:22px;
  opacity:0;animation:hero-in .9s var(--ease) .45s forwards;
}
.subtitle-pill{
  display:inline-flex;align-items:center;
  font-family:var(--font-body);font-size:clamp(1rem,1.6vw,1.18rem);font-weight:400;
  color:var(--gold-light);letter-spacing:.01em;
  padding:11px 24px;border-radius:999px;
  background:rgba(8,20,40,.32);border:1px solid rgba(231,198,132,.4);backdrop-filter:blur(6px);
}
.hero p.lead{
  font-family:var(--font-body);font-size:clamp(1rem,1.5vw,1.12rem);color:rgba(255,255,255,.88);
  max-width:560px;margin:0 auto 38px;
  opacity:0;animation:hero-in .9s var(--ease) .58s forwards;
}
.hero-actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:44px;
  opacity:0;animation:hero-in .9s var(--ease) .72s forwards;
}
.hero-indicator{
  display:inline-flex;align-items:center;gap:12px;padding-top:26px;border-top:1px solid rgba(255,255,255,.25);
  font-size:.86rem;color:rgba(255,255,255,.8);
  opacity:0;animation:hero-in .9s var(--ease) .86s forwards;
}
.hero-indicator b{color:#fff;font-family:var(--font-head);font-size:1.05rem}

/* En móvil se conserva el bloque alineado a la izquierda (más legible en
   pantallas angostas), con el título centrado como acento, y se compactan
   la pastilla del subtítulo y los botones. En pantallas grandes todo va
   centrado (ver reglas base de .hero-inner más arriba). */
@media(max-width:760px){
  .hero-inner{
    text-align:left;
    padding-left:14px;padding-right:14px;
  }
  .hero h1{text-align:center}
  .hero p.lead{margin:0 0 32px}
  .hero-actions{justify-content:flex-start}
  .hero-actions .btn{width:100%}
  .subtitle-pill{font-size:.78rem;padding:6px 13px;line-height:1.4}
}
@keyframes hero-in{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes hero-zoom{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}

/* ── Floating WhatsApp button ─────────────────────────────────── */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:120;
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--whatsapp),var(--whatsapp-dark));
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 14px 32px rgba(37,211,102,.45);
  animation:wa-pulse 2.6s ease-in-out infinite;
  transition:transform .3s var(--ease),filter .3s var(--ease);
}
.wa-float:hover{transform:scale(1.08);filter:brightness(1.1) saturate(1.15)}
.wa-float:active{transform:scale(1.02)}
.wa-float svg{width:32px;height:32px}
@keyframes wa-pulse{
  0%,100%{box-shadow:0 14px 32px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.5)}
  50%{box-shadow:0 14px 32px rgba(37,211,102,.45),0 0 0 14px rgba(37,211,102,0)}
}

/* ── 6. Banner de descuento ────────────────────────────────────── */
.discount-banner{
  background:linear-gradient(115deg,var(--navy-900),var(--blue-700) 60%,var(--navy-800));
  color:#fff;position:relative;overflow:hidden;
}
.discount-banner::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(circle at 15% 30%,rgba(231,198,132,.16),transparent 40%),
             radial-gradient(circle at 85% 70%,rgba(60,118,168,.3),transparent 45%);
}
.discount-inner{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:34px 0;flex-wrap:wrap;
}
.discount-copy{display:flex;align-items:center;gap:20px}
.discount-icon{
  width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:rgba(231,198,132,.16);color:var(--gold-light);border:1px solid rgba(231,198,132,.3);
}
.discount-copy h3{color:#fff;font-size:1.25rem;margin-bottom:4px}
.discount-copy p{color:rgba(255,255,255,.78);font-size:.92rem;font-family:var(--font-body)}
.discount-copy .cond{color:var(--gold-light);font-weight:700}
@media(max-width:760px){
  .discount-inner{flex-direction:column;align-items:flex-start;text-align:left}
}

/* ── 7. Beneficios ─────────────────────────────────────────────── */
.beneficios{background:var(--beige-50)}
.beneficios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.beneficios-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.beneficios-grid{grid-template-columns:1fr}}
.beneficio-card{
  background:var(--surface);border-radius:var(--radius-md);padding:32px 28px;
  box-shadow:var(--shadow-sm);border:1px solid var(--border-soft);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.beneficio-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.beneficio-icon{
  width:54px;height:54px;border-radius:14px;margin-bottom:18px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--beige-100),var(--beige-50));color:var(--blue-700);
  transition:transform .35s var(--ease);
}
.beneficio-card:hover .beneficio-icon{transform:rotate(-6deg) scale(1.06)}
.beneficio-card h3{font-size:1.08rem;margin-bottom:8px;color:var(--heading)}
.beneficio-card p{font-size:.9rem;color:var(--slate);font-family:var(--font-body)}

/* ── 8. Habitaciones ──────────────────────────────────────────── */
.rooms-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
@media(max-width:900px){.rooms-grid{grid-template-columns:1fr}}

.room-card{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .35s var(--ease),transform .35s var(--ease);
  display:flex;flex-direction:column;
}
.room-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.room-media{position:relative;aspect-ratio:4/3;background:var(--beige-100);overflow:hidden}
.room-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.room-card:hover .room-media img{transform:scale(1.05)}
.room-price-tag{
  position:absolute;top:18px;right:18px;background:rgba(8,27,51,.82);color:#fff;
  padding:10px 17px;border-radius:999px;font-weight:800;font-size:.98rem;backdrop-filter:blur(4px);
  font-family:var(--font-head);
}
.room-price-tag small{font-weight:600;font-size:.62rem;opacity:.8;font-family:var(--font-body);text-transform:uppercase;letter-spacing:.06em}
.room-media-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.88);color:var(--navy-800);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s ease,background .2s ease;
}
.room-card:hover .room-media-nav{opacity:1}
.room-media-nav:hover{background:#fff}
.room-media-nav.prev{left:16px}
.room-media-nav.next{right:16px}
.room-media-dots{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.room-media-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);transition:all .25s ease}
.room-media-dots span.active{background:#fff;width:18px;border-radius:4px}
.room-unit-pills{position:absolute;left:16px;bottom:16px;display:flex;gap:6px}
.room-unit-pill{
  padding:6px 13px;border-radius:999px;font-size:.72rem;font-weight:700;
  background:rgba(255,255,255,.88);color:var(--navy-800);transition:background .2s ease,color .2s ease;
}
.room-unit-pill.active{background:var(--navy-800);color:#fff}
.room-body{padding:28px 28px 30px;display:flex;flex-direction:column;gap:14px;flex:1}
.room-body h3{font-size:1.36rem;color:var(--heading)}
.room-body p.desc{color:var(--slate);font-size:.94rem;font-family:var(--font-body)}
.room-tags{display:flex;flex-wrap:wrap;gap:8px}
.room-tags span{
  padding:6px 13px;border-radius:999px;background:var(--beige-50);border:1px solid var(--border);
  font-size:.76rem;font-weight:600;color:var(--blue-700);
}
.room-caption{font-size:.78rem;color:var(--slate-light);font-weight:600;letter-spacing:.02em;font-family:var(--font-body)}
.room-actions{display:flex;gap:12px;margin-top:auto;padding-top:6px;flex-wrap:wrap}

/* ── 9. Terraza ───────────────────────────────────────────────── */
.terraza-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:54px;align-items:center}
@media(max-width:960px){.terraza-grid{grid-template-columns:1fr;gap:36px}}
.terraza-mosaic{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:480px}
.terraza-mosaic img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.terraza-mosaic .main-shot{grid-row:1/3;height:100%}
.terraza-mosaic .main-shot img{border-radius:var(--radius-lg)}
.terraza-mosaic > * {overflow:hidden;position:relative;transition:transform .5s var(--ease)}
.terraza-mosaic > *:hover{transform:translateY(-4px)}
@media(max-width:640px){
  .terraza-mosaic{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .terraza-mosaic .main-shot{grid-row:1/2;grid-column:1/3;aspect-ratio:16/10}
  .terraza-mosaic .main-shot img{aspect-ratio:16/10}
  .terraza-mosaic > *:not(.main-shot){aspect-ratio:1/1}
}
.terraza-feats{display:flex;flex-direction:column;gap:14px;margin:26px 0 30px}
.terraza-feats li{display:flex;align-items:center;gap:12px;font-size:.95rem;color:var(--ink);font-weight:500}
.terraza-feats li .ic{
  width:34px;height:34px;border-radius:10px;background:var(--beige-50);display:grid;place-items:center;
  color:var(--blue-700);flex:none;
}

/* ── Cochera ──────────────────────────────────────────────────────────── */
.cochera-grid{grid-template-columns:1fr 1.1fr}
.cochera-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-self:center}
.cochera-photos img{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);transition:transform .5s var(--ease);
}
.cochera-photos img:hover{transform:translateY(-4px)}
.cochera-photos div:nth-child(2){margin-top:28px}
@media(max-width:640px){
  .cochera-photos img{aspect-ratio:1/1}
  .cochera-photos div:nth-child(2){margin-top:0}
}

/* ── 10. Testimonios ───────────────────────────────────────────── */
.testimonios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.testimonios-grid{grid-template-columns:1fr}}
.testimonio-card{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);
  padding:28px 26px;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  display:flex;flex-direction:column;gap:16px;
}
.testimonio-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.testimonio-stars{display:flex;gap:3px;color:var(--gold)}
.testimonio-quote{font-size:.96rem;color:var(--text);line-height:1.65;flex:1}
.testimonio-author{display:flex;align-items:center;gap:12px}
.testimonio-avatar{
  width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue-600),var(--navy-800));color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:.92rem;
}
.testimonio-author-name{font-weight:700;font-size:.9rem;color:var(--heading)}
.testimonio-author-meta{font-size:.78rem;color:var(--text-muted)}

/* ── 11. Galería ──────────────────────────────────────────────── */
.gallery-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.gallery-filter{
  padding:11px 21px;border-radius:999px;font-weight:700;font-size:.88rem;
  background:var(--beige-50);color:var(--blue-700);border:1px solid var(--border);
  transition:all .25s var(--ease);
}
.gallery-filter:hover{background:var(--beige-100)}
.gallery-filter.active{background:var(--navy-800);color:#fff;box-shadow:var(--shadow-sm)}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;grid-auto-flow:dense}
@media(max-width:940px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
.gallery-item{
  position:relative;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;
  aspect-ratio:1/1;background:var(--beige-100);box-shadow:var(--shadow-sm);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.gallery-item.hidden-filter{display:none}
.gallery-item.tall{grid-row:span 2;aspect-ratio:1/2.15}
.gallery-item.wide{grid-column:span 2;aspect-ratio:2.15/1}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item .tag{
  position:absolute;left:11px;bottom:11px;padding:6px 13px;border-radius:999px;
  background:rgba(8,27,51,.75);color:#fff;font-size:.72rem;font-weight:700;backdrop-filter:blur(3px);
}
.gallery-item .zoom-hint{
  position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,40,0) 55%,rgba(8,20,40,.55) 100%);
  opacity:0;transition:opacity .25s ease;display:flex;align-items:flex-end;justify-content:flex-end;padding:12px;
}
.gallery-item:hover .zoom-hint{opacity:1}
.gallery-item.is-video::before{
  content:"";position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.92);z-index:2;
}
.gallery-item.is-video::after{
  content:"";position:absolute;top:50%;left:calc(50% + 3px);transform:translate(-50%,-50%);
  border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent var(--navy-800);
  z-index:3;
}

/* ── 12. Ubicación y contacto ─────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.info-card{
  display:flex;gap:16px;padding:22px;border-radius:var(--radius-md);background:var(--beige-50);
  border:1px solid var(--border);margin-bottom:16px;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.info-card:hover{transform:translateX(4px);box-shadow:var(--shadow-sm)}
.info-card .ic{
  width:48px;height:48px;border-radius:12px;background:var(--surface);display:grid;place-items:center;color:var(--blue-700);
  box-shadow:var(--shadow-sm);flex:none;
}
.info-card h4{font-size:1rem;margin-bottom:4px;color:var(--heading);font-family:var(--font-head)}
.info-card p, .info-card a{color:var(--slate);font-size:.93rem;font-family:var(--font-body)}
.info-card a:hover{color:var(--blue-700)}
.contact-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

.map-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:460px;
  box-shadow:var(--shadow-lg);display:block;background:var(--navy-800);
}
.map-card .map-visual{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .8s var(--ease);
}
.map-card:hover .map-visual{transform:scale(1.06)}
.map-card .map-visual.is-illustrated{
  background-image:
    linear-gradient(135deg,var(--navy-800),var(--blue-600) 55%,var(--navy-700)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 46px);
}
.map-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,20,40,.12) 0%,rgba(8,20,40,.7) 100%);
  z-index:1;
}
.map-pin{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);z-index:2;
  display:flex;flex-direction:column;align-items:center;animation:pin-bob 2.6s ease-in-out infinite;
}
.map-pin .pin-dot{
  width:52px;height:52px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  box-shadow:0 10px 24px rgba(0,0,0,.35);display:grid;place-items:center;
}
.map-pin .pin-dot svg{transform:rotate(45deg);color:var(--navy-900)}
.map-pin .pin-shadow{width:26px;height:8px;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(2px);margin-top:6px}
@keyframes pin-bob{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,-108%)}}
.map-card-info{
  position:absolute;left:24px;right:24px;bottom:24px;z-index:2;
  background:rgba(8,20,40,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-md);padding:22px;color:#fff;
}
.map-card-info .tag{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  background:rgba(231,198,132,.18);color:var(--gold-light);font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;
}
.map-card-info h4{color:#fff;font-size:1.15rem;margin-bottom:4px}
.map-card-info p{color:rgba(255,255,255,.78);font-size:.88rem;font-family:var(--font-body);margin-bottom:16px}

/* ── 13. Footer ───────────────────────────────────────────────── */
footer.site-footer{background:var(--navy-900);color:rgba(255,255,255,.82)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:52px;padding:76px 0 54px}
@media(max-width:860px){.footer-top{grid-template-columns:1fr;gap:38px;padding:58px 0 42px}}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px;color:#fff;font-weight:800;font-size:1.22rem;font-family:var(--font-head)}
.footer-top p{color:rgba(255,255,255,.6);font-size:.92rem;max-width:340px;font-family:var(--font-body)}
.footer-col h5{color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;font-family:var(--font-body)}
.footer-col ul li{margin-bottom:11px}
.footer-col ul a{color:rgba(255,255,255,.7);font-size:.93rem;transition:color .2s ease;font-family:var(--font-body)}
.footer-col ul a:hover{color:var(--gold-light)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding:24px 0;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem;color:rgba(255,255,255,.5);
  font-family:var(--font-body);
}

/* ── 14. Lightbox y modal de reserva ─────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(4,10,22,.6);z-index:210;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal-card{
  position:relative;background:var(--surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:36px;width:100%;max-width:460px;
  max-height:88vh;overflow-y:auto;
  transform:translateY(18px) scale(.98);opacity:0;transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.modal-overlay.open .modal-card{transform:translateY(0) scale(1);opacity:1}
.modal-close{
  position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;
  background:var(--beige-50);color:var(--slate);display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease;
}
.modal-close:hover{background:var(--beige-100);color:var(--heading)}
.modal-card h3{font-size:1.4rem;margin-bottom:10px;padding-right:30px}
.modal-lead{color:var(--slate);font-size:.92rem;font-family:var(--font-body);margin-bottom:26px}
.booking-form{display:flex;flex-direction:column;gap:16px}
.booking-field{display:flex;flex-direction:column;gap:7px}
.booking-field span{font-size:.8rem;font-weight:700;color:var(--heading);letter-spacing:.01em}
.booking-field select,.booking-field input{
  font-family:var(--font-body);font-size:.94rem;color:var(--ink);
  padding:12px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--border);
  background:var(--cream);transition:border-color .2s ease;width:100%;
}
.booking-field select:focus,.booking-field input:focus{outline:none;border-color:var(--blue-600)}
.booking-rooms{display:flex;flex-direction:column;gap:10px}
.booking-room-row{display:flex;align-items:center;gap:8px}
.booking-room-row select{flex:1;min-width:0}
.booking-remove-room{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--beige-50);color:var(--slate);display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease;
}
.booking-remove-room:hover{background:var(--beige-100);color:var(--heading)}
.booking-add-room{
  align-self:flex-start;margin-top:3px;display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;border:1.5px dashed var(--border);
  font-size:.85rem;font-weight:700;color:var(--blue-700);background:transparent;
  transition:background .2s ease,border-color .2s ease;
}
.booking-add-room:hover{background:var(--beige-50);border-color:var(--blue-600)}
.booking-dates{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.booking-nights{font-size:.85rem;color:var(--blue-700);font-weight:600;min-height:1.2em}
@media(max-width:480px){
  .modal-card{padding:28px 22px}
  .booking-dates{grid-template-columns:1fr}
}

.lightbox{
  position:fixed;inset:0;background:rgba(4,10,22,.95);z-index:200;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);padding:20px;
}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox-content{position:relative;max-width:min(1020px,92vw);max-height:88vh;width:100%}
.lightbox-content img,.lightbox-content video{
  max-width:100%;max-height:88vh;margin:0 auto;display:block;border-radius:10px;box-shadow:0 30px 84px rgba(0,0,0,.5);
}
.lightbox-caption{text-align:center;color:rgba(255,255,255,.8);margin-top:16px;font-size:.88rem;font-family:var(--font-body)}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:fixed;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);
  color:#fff;display:flex;align-items:center;justify-content:center;transition:background .2s ease;
}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.26)}
.lightbox-close{top:22px;right:22px}
.lightbox-prev{left:22px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:22px;top:50%;transform:translateY(-50%)}
@media(max-width:640px){
  .lightbox-prev,.lightbox-next{width:40px;height:40px}
  .lightbox-prev{left:8px}.lightbox-next{right:8px}
  .lightbox-close{top:12px;right:12px}
}

/* ── 15. Animaciones y accesibilidad ─────────────────────────── */
a:focus-visible, button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .hero-badge,.hero h1,.hero p.subtitle,.hero p.lead,.hero-actions,.hero-indicator{opacity:1;animation:none}
  .hero-bg{animation:none}
  .wa-float{animation:none}
  .map-pin{animation:none}
}