:root{
  --bg:#ffffff; --paper:#fff; --text:#172027; --muted:#68737c; --line:#e9eef2;
  --brand:#e07a5f; --accent:#84a98c; --brand-2:#3d5a80;
  --radius:18px; --shadow:0 12px 28px rgba(25,28,31,.08); --shadow-soft:0 6px 16px rgba(25,28,31,.06);
  --maxw:1180px; --pad:clamp(12px,3.6vw,20px);
  --fs-body:clamp(15px,1.7vw,17px); --fs-h1:clamp(26px,4.5vw,40px); --fs-h2:clamp(20px,3.2vw,28px);
  --img-bg:#f4f6f8; --headerH:64px;
  --drawerOverlay: rgba(0,0,0,.5);
  --drawerPaper: #0f1115; --drawerText:#e9eef2; --drawerLine:#232b36; --drawerChip:#171b22;
}
@media (min-width:768px){ :root{ --headerH:72px; } }
[data-theme="dark"]{
  --bg:#0e1318; --paper:#121821; --text:#e9eef2; --muted:#a0acb5; --line:#233041;
  --shadow:0 12px 28px rgba(0,0,0,.55); --shadow-soft:0 6px 16px rgba(0,0,0,.38);
  --img-bg:#0f1520; --drawerPaper:#0b0f14; --drawerText:#dfe7ee; --drawerLine:#1f2833; --drawerChip:#141a22;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text); line-height:1.65;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  font-size:var(--fs-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; padding-top:var(--headerH);
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}
:focus-visible{outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 45%, transparent)}
iframe{max-width:100%; display:block; border:0}

/* Header fijo */
header{
  position:fixed; left:0; right:0; top:0; width:100%;
  z-index:10000; background:color-mix(in srgb,var(--paper) 94%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; min-height:var(--headerH); position:relative; z-index:100}
.brand{display:flex; align-items:center; gap:10px; font-family:"Fraunces",serif; font-weight:700; font-size:clamp(18px,2.8vw,20px); white-space:nowrap}
.logo{width:32px; height:32px; border-radius:8px}
.logo rect{fill:var(--brand)}
.logo .win{fill:#fff; opacity:.94}
.links{display:none; gap:16px; align-items:center}
.links a{padding:8px 10px; border-radius:10px}
.links a:hover{background:color-mix(in srgb,var(--paper) 90%, transparent)}
.tools{display:flex; align-items:center; gap:8px}

.btn, .icon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px;
  border-radius:12px; border:1px solid var(--line); background:var(--paper); font-weight:700
}
.btn.primary{background:var(--brand); color:#fff; border-color:transparent}
.icon-btn{width:40px; height:40px; padding:0; border-radius:10px}
.menu-btn{width:44px; height:44px; border-radius:12px}

/* Selector de idioma (bandera + texto) */
.langSel{
  padding:10px 36px 10px 44px;
  border-radius:10px; border:1px solid var(--line); background:var(--paper);
  background-repeat:no-repeat; background-size:22px 16px; background-position:12px 50%;
  font-weight:700; min-width:88px; color:var(--text);
  -webkit-appearance:none; appearance:none;
  position:relative; z-index:1000;
}
.langSel option{ color:#111; background:#fff }
[data-theme="dark"] .langSel option{ color:#e9eef2; background:var(--paper) }

@media (min-width:768px){ .links{display:flex} .menu-btn{display:none} }

/* Asegurar que el dropdown del selector de idioma se muestre correctamente en móvil */
@media (max-width:767px){
  .nav{
    padding:12px 16px;
  }
  .brand{
    font-size:clamp(16px,2.5vw,18px);
  }
  .logo{
    width:28px; height:28px; border-radius:6px;
  }
  .langSel{
    padding:8px 28px 8px 36px;
    border-radius:8px;
    background-size:18px 14px; background-position:10px 50%;
    font-weight:600; min-width:72px; font-size:14px;
    z-index:10001;
    position:relative;
  }
  .langSel:focus{
    z-index:10002;
  }
  /* Ocultar botón de modo noche en móvil */
  #theme{
    display:none;
  }
}

/* Drawer móvil */
.drawer{position:fixed; inset:0; z-index:9999; display:none; background:rgba(0,0,0,0.3)}
.drawer.open{display:block}
.panel{
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:var(--drawerPaper); color:var(--drawerText);
  display:flex; flex-direction:column; padding:20px; gap:20px; overflow:auto; -webkit-overflow-scrolling:touch;
}
.panel .row{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.m-list{display:flex; flex-direction:column; gap:12px; margin-top:20px}
.m-item{display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.1); text-decoration:none; color:inherit}
.m-item:last-child{border-bottom:none}
.m-item b{flex:1; font-weight:500; font-size:18px}
.m-item .k{opacity:.6; font-size:14px}
.panel .cta{margin-top:30px; background:var(--brand); color:#fff; border:none; border-radius:12px; padding:16px 20px; text-align:center; font-weight:600; font-size:16px; text-decoration:none; display:block; transition:all 0.2s ease}
.panel .cta:hover{background:color-mix(in srgb, var(--brand) 85%, black); transform:translateY(-1px)}

/* Hero (desktop: 3 fotos) */
.heroC{padding:18px 0 0}
.heroC .grid{display:grid; grid-template-columns:1.2fr .8fr; gap:10px}
.heroC .left,.heroC .right{display:grid; gap:10px}
.heroC .left img{width:100%; height:clamp(240px,36vw,420px); object-fit:cover; border-radius:14px; box-shadow:var(--shadow-soft); background:var(--img-bg)}
.heroC .right img{width:100%; height:clamp(160px,18vw,205px); object-fit:cover; border-radius:14px; box-shadow:var(--shadow-soft); background:var(--img-bg)}
.heroC .below{margin:10px 0 0}
.heroC .below h1{
  font-family: "Fraunces", serif;
  font-weight: 500;   /* antes era el 700 por defecto */
}

.subtitle{color:var(--muted); margin:8px 0 0}

/* Botones de contacto como 'Reservar' */
.hero-cta{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:12px}
.hero-cta .btn{width:100%}
.btn.call, .btn.email{ background:var(--brand); border-color:transparent; color:#fff }
.btn.call:hover, .btn.email:hover{ filter:brightness(.96) }

/* --- HERO SLIDER (solo móvil) --- */
.hero-slider{ display:none; position:relative; margin-top:10px }
.hero-slider .viewport{ overflow:hidden; border-radius:14px; box-shadow:var(--shadow-soft); background:var(--img-bg); touch-action:pan-y }
.hero-slider .track{ display:flex; transition:transform .3s ease }
.hero-slider img{ width:100%; height:clamp(220px,48vw,300px); object-fit:cover; user-select:none; pointer-events:none }
.hero-slider .ctrl{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.35); color:#fff; border:0; width:38px; height:38px;
  border-radius:50%; display:grid; place-items:center
}
.hero-slider .prev{ left:10px } .hero-slider .next{ right:10px }
.hero-slider .dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:6px }
.hero-slider .dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.6) }
.hero-slider .dot.active{ background:#fff }

/* Ribbon */
.ribbon{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0}
/* Alinear encabezados a la misma altura en todas las tarjetas */
.ribbon{ align-items:stretch; }              /* que todas llenen la fila */

.chip{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  display:grid;
  grid-template-columns:28px 1fr;            /* icono + contenido */
  column-gap:10px;
  align-items:start;                          /* alinear arriba */
  box-shadow:var(--shadow-soft);
  height:100%;                                /* mismas alturas visuales */
}

.chip .i{
  width:28px; height:28px;
  border-radius:8px;
  display:grid; place-items:center;
  background:color-mix(in srgb,var(--paper) 90%, transparent);
  margin-top:2px;                             /* compensa baseline de emoji */
}

.chip b{ display:block; margin:0; line-height:1.15; }
.chip .muted{ margin-top:4px; }

.chip .i{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:color-mix(in srgb,var(--paper) 90%, transparent)}

/* Secciones */
section{padding:clamp(32px,6.6vw,50px) 0}
section,[id]{scroll-margin-top:calc(var(--headerH) + 10px)}
h2{font-family:"Fraunces",serif; font-size:var(--fs-h2); margin:0 0 10px}
.muted{color:var(--muted)}

/* Split + widget */
.split{display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:start}
.card,.box{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow-soft)}
.widget{position:sticky; top:calc(var(--headerH) + 10px)}
.price{font-size:clamp(22px,3.2vw,30px); font-weight:800}
.fine{font-size:12px; color:var(--muted)}
.widget form{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0}
.widget input,.widget select{width:100%; padding:12px; border-radius:12px; border:1px solid var(--line); background:var(--paper); color:inherit}
.full{grid-column:1/-1}
.calc{display:flex; justify-content:space-between; font-weight:700}

/* Mini calendario */
.mini-cal{margin-top:10px}
.mini-cal .mc-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.mini-cal .mc-nav{display:flex; gap:6px}
.mini-cal .mc-btn{border:1px solid var(--line); background:var(--paper); padding:6px 8px; border-radius:8px; cursor:pointer}
.mini-cal .mc-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.mini-cal .mc-cell{height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; font-size:13px; background:var(--paper)}
.mini-cal .mc-cell.muted{opacity:.45}
.mini-cal .mc-cell.busy{background:color-mix(in srgb, var(--brand) 16%, transparent); border-color:color-mix(in srgb, var(--brand) 36%, transparent)}
.mini-cal .mc-cell.free{background:color-mix(in srgb, var(--accent) 12%, transparent); border-color:color-mix(in srgb, var(--accent) 32%, transparent)}
.mini-cal .mc-dow{font-weight:700; color:var(--muted); height:auto; border:none; background:transparent}

/* Galería */
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); grid-auto-rows:140px; gap:8px; grid-auto-flow:dense}
.gallery-grid img{width:100%; height:100%; object-fit:cover; border-radius:10px; cursor:pointer; transition:transform .2s, box-shadow .2s; box-shadow:var(--shadow-soft)}
.gallery-grid img:hover{ transform:translateY(-2px) }
.gallery-grid .big{ grid-row:span 2; grid-column:span 2 }
@media (min-width:900px){ .gallery-grid{ grid-auto-rows:160px } }
@media (max-width:520px){ .gallery-grid{ grid-template-columns:repeat(2,1fr) } }

.gallery-actions{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap}

/* Opiniones / Cerca */
.amenities{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.reviews{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px}
.review{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center}
.review img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.stars{letter-spacing:2px; color:#efaa57}

/* "Qué tienes alrededor" */
.nearby{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px}
.nearby .place{display:grid; grid-template-rows:160px 1fr; gap:10px}
.nearby img{width:100%; height:160px; object-fit:cover; border-radius:12px}
.nearby .place > div{display:grid; grid-template-rows:auto 1fr auto; align-content:start; gap:8px}
.nearby .place b{display:block; margin:0}
.nearby .place p{margin:0; text-align:justify}
.meta{display:flex; gap:10px; color:var(--muted); font-size:14px}
.nearby .place .meta{align-self:end}

/* Mapas y CTA móvil */
.map{border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-soft)}
.mobile-cta{position:fixed; left:0; right:0; bottom:0; z-index:8000; background:color-mix(in srgb,var(--paper) 96%, transparent); border-top:1px solid var(--line); padding:10px 14px; display:none}
.mobile-cta .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.mobile-cta .btn{flex:1}
footer{padding:26px 0; border-top:1px solid var(--line); color:var(--muted); background:color-mix(in srgb,var(--paper) 96%, transparent)}

/* Modal / Lightbox */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;z-index:11001}
.modal.open{display:flex}
.modal .content{position:relative;max-width:min(1200px,96vw);max-height:90vh;background:transparent;border:none;padding:0;box-shadow:none;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}
.lightbox-toolbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;color:#fff;gap:10px}
.lightbox-btn{background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:10px;padding:8px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.lightbox-toolbar .counter{font-weight:700}
.lightbox-canvas{display:grid;place-items:center;width:100%;height:calc(90vh - 96px);touch-action:none}
.lightbox-canvas img{max-width:96vw;max-height:calc(90vh - 96px);object-fit:contain;border-radius:0;transform-origin:center center;transition:transform .08s linear;cursor:zoom-in}
.zoomed{cursor:grab !important}
.nav-ctrl{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.18);color:#000;border:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.nav-prev{left:10px} .nav-next{right:10px}
.thumbs{display:none}
@media (min-width:760px){ .thumbs{display:flex;gap:6px;padding:10px;overflow:auto} }
.thumbs img{width:64px;height:48px;object-fit:cover;border-radius:8px;opacity:.75;border:2px solid transparent;cursor:pointer}
.thumbs img.active{opacity:1;border-color:var(--brand)}

/* Responsivo */
@media (max-width:900px){ .split{grid-template-columns:1fr; gap:14px} .widget{position:relative; top:auto} }
@media (max-width:760px){
  .heroC .grid{display:none}
  .hero-slider{display:block}
/* oculto grid desktop */
  .hero-slider{display:block}     /* muestro carrusel móvil */
  .ribbon{grid-template-columns:repeat(2,1fr)}
  .mobile-cta{display:block}
}
@media (max-width:480px){ .ribbon{grid-template-columns:1fr} body{padding-bottom:70px} }


/* Carrusel móvil: cada slide ocupa el 100% */
.hero-slider .track > img{flex:0 0 100%}


/* Centrar título y subtítulo solo en móvil */
@media (max-width:760px){
  .heroC .below{ text-align:center; }
  #heroTitle, #heroSubtitle{ text-align:center !important; }
}


/* Ocultar precio en CTA móvil (solo móvil) */
@media (max-width:760px){
  .mobile-cta .row > div:first-child{ display:none; }
}


/* Ocultar CTA inferior en móvil por completo */
@media (max-width:760px){
  .mobile-cta{ display:none !important; }
}


/* --- Override seguro: forzar modal por encima del header --- */
.modal{ z-index: 11001 !important; }
#lbClose{ position: sticky; top: 0; } /* si el contenedor desplazara, que se mantenga visible */