/* ===== Hidden Gems Puerto Escondido — estilos compartidos ===== */

:root{
  --musgo:#2d4a35;
  --musgo-suave:#3d6249;
  --vino:#9e4a3a;
  --ocre:#c4b878;
  --ocre-suave:#d4c898;
  --lino:#faf8f4;
  --ink:#1e1a14;
  --linea:rgba(45,74,53,0.18);
  --gris:#6b6354;
  --gris-suave:#9a9080;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight:300;
  background:var(--lino);
  color:var(--ink);
  line-height:1.6;
}
h1,h2,h3,.display{
  font-family:'Fraunces', Georgia, serif;
  font-weight:200;
  font-style:normal;
  letter-spacing:-0.01em;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}

/* ===== Header ===== */
header{
  position:sticky; top:0; z-index:50;
  background:var(--lino);
  border-bottom:0.5px solid #e8e4dc;
}
.header-inner{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  gap:12px; flex-wrap:wrap;
}
.brand{
  color:var(--ink);
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:0.01em;
  flex:1 1 auto; min-width:0;
}
@media(max-width:480px){
  .brand{font-size:0.88rem; flex-basis:100%;}
}
.brand em{color:var(--vino); font-style:italic;}
nav.site-nav{display:none; gap:26px; align-items:center;}
nav.site-nav a{
  color:var(--gris-suave); font-size:0.92rem;
  transition:color .2s;
}
nav.site-nav a:hover, nav.site-nav a.active{color:var(--ink);}
@media(min-width:860px){ nav.site-nav{display:flex;} }

.hamburger-menu{
  display:none; background:none; border:none; font-size:1.8rem;
  cursor:pointer; padding:12px 16px; color:var(--ink);
  position:fixed; top:14px; right:16px; z-index:999;
  line-height:1;
  transition: opacity 0.2s;
}
.hamburger-menu:active{
  opacity:0.6;
}
@media(max-width:1000px){
  .hamburger-menu{display:block;}
  nav.site-nav{
    position:fixed; top:0; right:0; left:0; bottom:0;
    display:none; flex-direction:column; gap:0;
    background:white; padding:60px 24px 24px 24px;
    border-top:none;
    overflow-y:auto;
    z-index:900;
  }
  nav.site-nav a{
    padding:14px 0;
    font-size:1.05rem;
    border-bottom:1px solid #f5f1ed;
    display:block;
    color:var(--ink);
  }
  nav.site-nav a:last-child{
    border-bottom:none;
  }
  nav.site-nav a:hover{
    color:var(--musgo);
    font-weight:500;
  }
  body.nav-open nav.site-nav{display:flex;}
}

.header-actions{display:flex; align-items:center; gap:12px;}
.lang-toggle{
  display:flex; border:0.5px solid #e8e4dc; border-radius:999px;
  overflow:hidden; font-size:0.78rem; font-weight:600;
}
.lang-toggle button{
  background:none; border:none; color:#b0a898;
  padding:6px 12px; cursor:pointer; opacity:0.55;
  font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.lang-toggle button.active{opacity:1; background:var(--ink); color:var(--lino);}
.wa-pill{
  background:transparent; border:0.5px solid var(--musgo); color:var(--musgo);
  border-radius:999px; padding:8px 14px;
  font-size:0.82rem; font-weight:600;
  display:flex; align-items:center; gap:6px;
  white-space:nowrap;
}

/* ===== Botón flotante WhatsApp ===== */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:80;
  background:var(--musgo); color:#fff;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow:0 8px 24px rgba(30,26,20,0.28);
  transition:transform .15s;
}
.wa-float:hover{transform:translateY(-2px) scale(1.04);}

/* ===== Botones ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:999px;
  font-weight:600; font-size:0.95rem;
  cursor:pointer; border:none; transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--musgo); color:var(--lino);}
.btn-primary:hover{box-shadow:0 8px 24px rgba(196,184,120,0.35);}
.btn-ghost{background:transparent; color:var(--gris-suave); border:0.5px solid #e8e4dc;}
.btn-vino{background:transparent; border:0.5px solid var(--vino); color:var(--vino);}
.btn-vino:hover{background:var(--vino); color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:9px 14px; font-size:0.85rem;}

/* ===== Hero Home (carrusel de fondo) ===== */
.hero-home{
  position:relative;
  color:#fff;
  text-align:center;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  overflow:hidden;
}
@media(max-width:768px){
  .hero-home{
    min-height:75vh;
  }
}
@media(max-width:480px){
  .hero-home{
    min-height:70vh;
  }
}
.hero-home-bg{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  z-index:0;
}
@media(max-width:768px){
  .hero-home-bg{
    background-attachment:scroll;
  }
}
.hero-home-overlay{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:linear-gradient(135deg, rgba(30,26,20,0.52) 0%, rgba(30,26,20,0.48) 100%);
  z-index:1;
}
.hero-home-content{
  max-width:720px;
  z-index:2;
  position:relative;
}
.hero-home-headline{
  font-size:clamp(2.2rem, 7vw, 4rem);
  font-weight:200;
  line-height:1.15;
  margin-bottom:24px;
  letter-spacing:-0.015em;
}
@media(max-width:768px){
  .hero-home-headline{
    font-size:clamp(1.8rem, 6vw, 2.8rem);
  }
}
.hero-home-subheadline{
  font-size:clamp(1rem, 2.5vw, 1.25rem);
  font-weight:300;
  line-height:1.6;
  margin-bottom:40px;
  opacity:0.95;
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}
@media(max-width:768px){
  .hero-home-subheadline{
    font-size:clamp(0.95rem, 2.2vw, 1.1rem);
    margin-bottom:32px;
  }
}
.hero-home-cta{
  display:inline-block;
  background:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.3);
  color:#fff;
  padding:12px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:0.95rem;
  transition:all 0.3s ease;
  backdrop-filter:blur(8px);
}
.hero-home-cta:hover{
  background:rgba(255,255,255,0.28);
  border-color:rgba(255,255,255,0.5);
  transform:translateY(-2px);
}

/* ===== Hero ===== */
.hero{
  background:var(--lino); color:var(--ink);
  padding:56px 24px 40px; text-align:center; position:relative; overflow:hidden;
}
.eyebrow{
  color:var(--gris-suave); letter-spacing:0.18em; text-transform:uppercase;
  font-size:0.72rem; font-weight:300; margin-bottom:18px;
}
.hero h1{
  font-size:clamp(2rem, 5vw, 3.1rem); font-weight:200;
  max-width:760px; margin:0 auto 18px; line-height:1.12;
}
.hero h1 em{color:var(--musgo); font-style:italic;}
.hero p.lede{
  max-width:580px; margin:0 auto 32px; color:var(--gris-suave); font-size:1.05rem;
}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ===== Buscador de fechas ===== */
.buscador{
  background:#fff; border:1px solid rgba(45,74,53,0.12); border-radius:16px;
  max-width:640px; margin:0 auto 8px; padding:18px;
  display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;
  box-shadow:0 10px 30px rgba(30,26,20,0.06);
}
.buscador .campo{display:flex; flex-direction:column; gap:6px; flex:1; min-width:130px; text-align:left;}
.buscador label{font-size:0.72rem; color:var(--gris); text-transform:uppercase; letter-spacing:0.06em;}
.buscador input[type="date"]{
  border:0.5px solid #e0dcd2; border-radius:8px; padding:9px 10px;
  font-family:inherit; font-size:0.9rem; color:var(--ink); background:var(--lino);
}
.buscador .btn{white-space:nowrap;}
.buscador-msg{
  max-width:640px; margin:14px auto 0; font-size:0.88rem; color:var(--musgo);
  text-align:center;
}
.buscador-msg.escasez{color:var(--vino); font-weight:600;}
.buscador-msg.error{color:var(--gris);}

/* ===== Value strip ===== */
.value-strip{background:var(--ink); color:rgba(250,248,244,0.75); padding:20px 24px;}
.value-inner{
  max-width:900px; margin:0 auto; display:flex; gap:16px; align-items:flex-start; font-size:0.94rem;
}
.value-inner .icon{font-size:1.3rem; line-height:1;}
.value-inner strong{font-weight:700; color:var(--ocre-suave);}

/* ===== Section shell ===== */
section{padding:56px 24px;}
.section-inner{max-width:1100px; margin:0 auto;}
.section-head{text-align:center; margin-bottom:36px;}
.section-eyebrow{
  color:var(--musgo); letter-spacing:0.14em; text-transform:uppercase;
  font-size:0.72rem; font-weight:300; margin-bottom:10px;
}
.section-head h2{font-size:clamp(1.6rem,3.4vw,2.2rem); color:var(--ink); margin-bottom:10px;}
.section-head p{color:var(--gris); max-width:480px; margin:0 auto;}

/* ===== Catálogo por sección (parejas / grupos / lujo) ===== */
.catalogo-seccion{margin-bottom:48px;}
.catalogo-seccion:last-child{margin-bottom:0;}
.catalogo-seccion-head{margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid rgba(45,74,53,0.12);}
.catalogo-seccion-head h2{font-size:clamp(1.3rem,2.6vw,1.7rem); color:var(--ink); font-weight:300;}

/* ===== Casas grid ===== */
.casas-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px;
}

/* CTA debajo de "Casas destacadas" en el home, cierre de la sección */
.casas-destacadas-cta{text-align:center; margin:44px 0 16px;}

/* En móvil, las cards destacadas del home se vuelven un carrusel horizontal
   deslizable: cada card ocupa ~85% del ancho, dejando ~15% de la siguiente
   card asomándose para que se note que hay más para deslizar. Solo aplica
   a la sección de destacadas del home (#casas-grid-home) -- el catálogo
   completo en /casas conserva su grid normal. */
@media(max-width:700px){
  #casas-grid-home .casas-grid{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:14px;
    margin:0 -24px; padding:0 24px 6px;
  }
  #casas-grid-home .casas-grid::-webkit-scrollbar{display:none;}
  #casas-grid-home .casas-grid .casa-card{flex:0 0 85%; scroll-snap-align:start;}
}
.casa-card{
  background:#fff; border:1px solid rgba(45,74,53,0.1); border-radius:14px;
  padding:0 0 18px; display:flex; flex-direction:column; gap:10px;
  transition:transform .18s, box-shadow .18s; overflow:hidden; cursor:pointer;
}
.casa-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(30,26,20,0.1);}
.casa-card-body{padding:14px 18px 0; display:flex; flex-direction:column; gap:8px; flex:1;}

/* Carrusel de fotos deslizante automático */
.casas-photo-grid{
  display:flex;
  overflow-x:auto;
  gap:16px;
  padding:0;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin:0 -24px;
  padding:0 24px 6px;
}
.casas-photo-grid::-webkit-scrollbar{display:none;}

.casa-photo-card{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:3/4;
  background:#f0f0f0;
  box-shadow:0 4px 12px rgba(30,26,20,0.1);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  flex:0 0 calc(50% - 8px);
  min-width:0;
}
@media(min-width:768px){
  .casa-photo-card{
    flex:0 0 calc(33.333% - 11px);
  }
}
@media(max-width:480px){
  .casa-photo-card{
    flex:0 0 calc(85% - 2px);
  }
}
.casa-photo-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(30,26,20,0.15);
}

/* Mini-carrusel deslizable (scroll-snap nativo, sin JS) */
.casa-card-carrusel{position:relative;}
.carrusel-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.carrusel-track::-webkit-scrollbar{display:none;}
.carrusel-track img{
  flex:0 0 100%; width:100%; height:200px; object-fit:cover; background:var(--lino);
  scroll-snap-align:start;
}
.carrusel-dots{
  position:absolute; bottom:8px; left:0; right:0; display:flex; gap:5px; justify-content:center;
  pointer-events:none;
}
.carrusel-dots span{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.7); box-shadow:0 0 3px rgba(0,0,0,0.3);}
.tag-zona{
  position:absolute; top:10px; left:10px; z-index:2;
  background:rgba(30,26,20,0.55); color:#fff; backdrop-filter:blur(2px);
  font-size:0.68rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; pointer-events:none;
}
.casa-card .tag{
  align-self:flex-start; background:var(--lino); color:var(--musgo);
  font-size:0.7rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
}
.casa-card-stats{display:flex; gap:14px; flex-wrap:wrap;}
.casa-card-stats .stat{font-size:0.82rem; color:var(--musgo); font-weight:600;}
.casa-card-stats .stat [aria-hidden]{margin-right:4px;}
.casa-card h3{font-size:1.15rem; color:var(--ink); font-weight:200; margin-top:2px;}
.casa-card .meta{font-size:0.86rem; color:var(--gris);}
.casa-card .ahorro{font-size:0.78rem; color:var(--vino); font-weight:600;}
.casa-card .row-actions{margin-top:auto; display:flex; flex-direction:column; gap:8px; padding-top:8px;}
.link-wa{
  flex:1; text-align:center; background:var(--musgo); color:#fff;
  border-radius:999px; padding:9px 12px; font-size:0.82rem; font-weight:600;
}
.link-vermas{
  flex:1; text-align:center; border:0.5px solid var(--musgo); color:var(--musgo);
  border-radius:999px; padding:9px 12px; font-size:0.82rem; font-weight:600;
  transition:background .15s, color .15s;
}
.link-vermas:hover{background:var(--musgo); color:#fff;}
.badge-ahorro{
  display:inline-block; background:rgba(158,74,58,0.08); color:var(--vino);
  font-size:0.76rem; font-weight:600; padding:5px 12px; border-radius:999px;
  margin-bottom:6px;
}

/* ===== Modal casa ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(30,26,20,0.65); z-index:100;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.abierto{display:flex;}
.modal-box{
  background:#fff; border-radius:16px; max-width:720px; width:100%;
  max-height:90vh; overflow-y:auto; position:relative;
}
.modal-cerrar{
  position:absolute; top:12px; right:12px; z-index:5;
  background:rgba(30,26,20,0.6); color:#fff; border:none; border-radius:50%;
  width:34px; height:34px; font-size:1.1rem; cursor:pointer;
}
.modal-slideshow{position:relative; width:100%; height:280px; background:var(--lino); overflow:hidden;}
.modal-slideshow img{
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .3s;
}
.modal-slideshow img.active{opacity:1;}
.modal-slideshow .slideshow-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(30,26,20,0.55); color:#fff; border:none;
  width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.modal-slideshow .slideshow-arrow.prev{left:10px;}
.modal-slideshow .slideshow-arrow.next{right:10px;}
.modal-body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:12px;}
.modal-body h3{font-size:1.5rem; color:var(--ink);}
.modal-body .meta{color:var(--gris);}
.modal-body .capacidad{font-size:0.9rem; color:var(--musgo); font-weight:600;}
.modal-body .descripcion{color:var(--gris); font-size:0.95rem;}
.modal-unidades{display:flex; flex-direction:column; gap:10px; margin-top:4px;}
.modal-unidades-label{font-size:0.85rem; color:var(--musgo); font-weight:600;}
.modal-unidad{background:var(--lino); border-radius:10px; padding:12px 14px;}
.modal-unidad h4{font-size:0.95rem; color:var(--musgo); font-weight:700; margin-bottom:4px;}
.modal-unidad p{font-size:0.85rem; color:var(--gris);}
.modal-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}
.modal-actions .link-wa{flex:1; min-width:160px; padding:12px 16px; font-size:0.9rem;}
.modal-disponibilidad{margin:8px 0; padding:12px 14px; background:rgba(26,127,76,0.05); border-radius:8px; border-left:3px solid var(--musgo);}
.ventanas-list{font-size:0.9rem; color:var(--ink);}
.ventanas-list strong{color:var(--musgo); display:block; margin-bottom:6px;}
.ventana-badge{display:inline-block; background:var(--musgo); color:white; padding:4px 8px; border-radius:4px; font-size:0.8rem; margin-right:6px; margin-bottom:4px; white-space:nowrap;}
.ventana-mas{display:inline-block; color:var(--musgo); font-size:0.8rem; font-weight:600;}

/* ===== Como funciona ===== */
.pasos{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:28px;}
.paso{text-align:center;}
.paso .num{
  width:46px; height:46px; border-radius:50%; background:var(--musgo); color:var(--lino);
  display:flex; align-items:center; justify-content:center;
  font-family:Georgia,'Times New Roman',serif; font-size:1.1rem; margin:0 auto 14px;
}
.paso h3{font-size:1.05rem; color:var(--ink); margin-bottom:6px;}
.paso p{font-size:0.92rem; color:var(--gris);}
.proceso-enfasis{text-align:center; margin-top:26px; font-weight:700; color:var(--vino); font-size:1rem;}

/* ===== Testimonios ===== */
.testimonios-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:18px;}
.testimonio-card{
  background:#fff; border:1px solid rgba(45,74,53,0.1); border-radius:14px;
  padding:20px; display:flex; flex-direction:column; gap:10px;
}

.testimonio-foto {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 20px auto;
  display: block;
}
.testimonio-card .texto{font-size:0.94rem; color:var(--ink); font-style:italic;}
.testimonio-card .autor{font-size:0.84rem; color:var(--gris); font-weight:600;}
.testimonio-card .placeholder-flag{
  font-size:0.68rem; color:var(--vino); text-transform:uppercase;
  letter-spacing:0.05em; font-weight:700;
}

/* ===== Sobre mi ===== */
.sobre-mi-inner{display:flex; gap:40px; align-items:flex-start;}
.sobre-mi-foto{flex:0 0 220px; max-width:220px;}
.sobre-mi-foto img{
  width:100%; height:300px; border-radius:12px; object-fit:cover;
  object-position:center 15%; box-shadow:0 6px 24px rgba(0,0,0,0.15);
}
.sobre-mi-texto{flex:1;}
@media(max-width:700px){
  .sobre-mi-inner{flex-direction:column; align-items:center;}
  .sobre-mi-foto{flex:none; width:100%; max-width:320px;}
  .sobre-mi-foto img{height:auto; object-position:center center;}
}
.sobre-mi{background:var(--musgo); color:var(--lino);}
.sobre-mi .section-inner{
  display:grid; grid-template-columns:1fr; gap:30px; align-items:center; max-width:780px;
}
.sobre-mi h2{color:var(--lino);}
.sobre-mi p{color:rgba(250,248,244,0.72); margin-bottom:14px;}
.sobre-mi .firma{
  font-family:'Fraunces',Georgia,serif; font-style:italic; color:var(--ocre-suave);
  font-size:1.15rem; margin-top:10px;
}

/* ===== Paquetes ===== */
.paquetes-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:22px;}
.paquete-card{
  background:#fff; border:1px solid rgba(45,74,53,0.1); border-radius:16px;
  padding:26px; display:flex; flex-direction:column; gap:14px;
}
.paquete-card h3{font-size:1.35rem; color:var(--ink);}
.paquete-card .paquete-desc{color:var(--gris); font-size:0.93rem;}
.paquete-card .incluye{font-size:0.88rem; color:var(--ink); padding-left:18px;}
.paquete-card .incluye li{margin-bottom:4px;}
.paquete-card .precio{
  font-family:'Fraunces',Georgia,serif; font-size:1.6rem; color:var(--musgo); font-weight:400;
}
.paquete-card .precio .moneda{font-size:0.85rem; color:var(--gris); font-weight:400; font-family:'DM Sans',sans-serif;}
.pendiente-flag{
  display:inline-block; background:rgba(158,74,58,0.1); color:var(--vino);
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  padding:4px 10px; border-radius:999px; margin-bottom:6px;
}
.paquete-pagos{display:flex; flex-direction:column; gap:8px; margin-top:6px;}
.paquete-nota{font-size:0.78rem; color:var(--gris); line-height:1.5;}
.paquete-dudas{margin-top:4px;}

/* ===== Contacto / footer CTA ===== */
.contacto{background:var(--lino); text-align:center;}
.contacto .btn-primary{font-size:1.05rem; padding:16px 34px;}

footer{
  background:var(--ink); color:rgba(243,236,221,0.6);
  text-align:center; padding:28px 24px; font-size:0.82rem;
}
footer .brand-foot{
  color:var(--ocre-suave); font-family:Georgia,'Times New Roman',serif;
  font-style:italic; margin-bottom:6px; font-size:1rem;
}
footer nav{display:flex; gap:16px; justify-content:center; margin-top:10px; flex-wrap:wrap;}
footer nav a{color:rgba(243,236,221,0.6);}
footer nav a:hover{color:var(--ocre-suave);}

/* ===== Página de detalle de casa ===== */
.btn-volver{
  display:inline-block; margin:16px 24px 0; font-size:0.85rem; color:var(--gris);
  transition:color .15s;
}
.btn-volver:hover{color:var(--musgo);}
#detalle-main{max-width:760px; margin:0 auto; padding:24px 24px 80px;}
.detalle-cargando{text-align:center; padding:80px 24px; color:var(--gris);}
.detalle-zona{
  color:var(--musgo); letter-spacing:0.1em; text-transform:uppercase;
  font-size:0.75rem; font-weight:700; margin-bottom:6px;
}
.detalle-header h1{font-size:clamp(1.8rem,4.5vw,2.4rem); color:var(--ink); margin-bottom:14px;}
.detalle-specs{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:18px;}
.detalle-nota-capacidad{font-size:0.82rem; color:var(--gris); margin:-8px 0 18px; font-style:italic;}
.detalle-specs .stat{font-size:0.92rem; color:var(--musgo); font-weight:600;}
.detalle-specs .stat [aria-hidden]{margin-right:5px;}
.detalle-wa{margin-bottom:8px;}
.detalle-descripcion{margin:28px 0; font-size:1rem; color:var(--gris); line-height:1.7;}
.detalle-amenidades{margin-bottom:32px;}
.detalle-amenidades h2{font-size:1.15rem; color:var(--ink); margin-bottom:12px; font-weight:300;}
.detalle-amenidades ul{list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px;}
.detalle-amenidades li{
  font-size:0.9rem; color:var(--ink); padding-left:22px; position:relative;
}
.detalle-amenidades li::before{
  content:"✓"; position:absolute; left:0; color:var(--musgo); font-weight:700;
}
.detalle-bueno-saber{
  margin-bottom:32px; background:var(--lino); border-radius:12px; padding:18px 20px;
}
.detalle-bueno-saber h2{font-size:0.95rem; color:var(--musgo); margin-bottom:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;}
.detalle-bueno-saber ul{list-style:none; display:flex; flex-direction:column; gap:8px;}
.detalle-bueno-saber li{font-size:0.85rem; color:var(--gris); padding-left:16px; position:relative; line-height:1.5;}
.detalle-bueno-saber li::before{content:"—"; position:absolute; left:0; color:var(--gris-suave);}
.detalle-galeria-titulo{font-size:1.15rem; color:var(--ink); margin-bottom:14px; font-weight:300;}
.detalle-galeria{display:flex; flex-direction:column; gap:14px;}
.detalle-galeria img{
  width:100%; height:auto; display:block; border-radius:12px; background:var(--lino);
}

/* Botón fijo de WhatsApp: siempre visible al hacer scroll en móvil */
.wa-sticky{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--musgo); color:#fff; text-align:center;
  padding:14px 24px; font-weight:600; font-size:0.95rem;
  box-shadow:0 -6px 20px rgba(30,26,20,0.18);
}
@media(max-width:860px){
  .wa-sticky:not(.oculto){display:block;}
  #detalle-main{padding-bottom:96px;}
}

/* ===== Gracias ===== */
.gracias{text-align:center; padding:90px 24px;}
.gracias .icono{font-size:3rem; margin-bottom:18px;}
.gracias h1{font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:14px;}
.gracias p{max-width:520px; margin:0 auto 26px; color:var(--gris);}

/* ===== Utilidades ===== */
.oculto{display:none !important;}
.text-center{text-align:center;}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}

/* Banner de confianza */
.banner-confianza {
  background: linear-gradient(135deg, var(--musgo-suave) 0%, var(--musgo) 100%);
  padding: 48px 32px;
  margin: 64px 0;
  border-left: 4px solid var(--ocre);
  text-align: center;
  color: var(--lino);
}

.banner-confianza-titulo {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.3;
}

.banner-confianza-subtitulo {
  font-size: 0.95rem;
  color: rgba(250, 248, 244, 0.85);
  line-height: 1.5;
  font-weight: 400;
}

@media (max-width: 768px) {
  .banner-confianza {
    padding: 40px 24px;
    margin: 48px 0;
  }
  
  .banner-confianza-titulo {
    font-size: 1.15rem;
  }
  
  .banner-confianza-subtitulo {
    font-size: 0.9rem;
  }
}

/* Sección de Perks */
.perks-seccion {
  background: var(--lino);
  padding: 80px 32px;
}

.perks-seccion h2 {
  font-size: 2rem;
  margin-bottom: 48px;
  text-align: center;
  color: var(--ink);
}

.perks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.perk-card {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.perk-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(45, 74, 53, 0.1);
}

.perk-card.draft::before {
  content: "EJEMPLO";
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--ocre);
  color: var(--ink);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

.perk-emoji {
  font-size: 2.5rem;
  margin-bottom: 12px;
  display: block;
}

.perk-categoria {
  font-size: 0.75rem;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.perk-nombre {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 16px;
}

.perk-beneficio {
  font-size: 1rem;
  color: var(--vino);
  font-weight: 500;
  margin-bottom: 16px;
  line-height: 1.4;
}

.perk-canjear {
  font-size: 0.85rem;
  color: var(--gris-suave);
  line-height: 1.5;
  border-top: 1px solid var(--linea);
  padding-top: 16px;
}

@media (max-width: 768px) {
  .perks-seccion {
    padding: 60px 24px;
  }
  
  .perks-seccion h2 {
    font-size: 1.6rem;
    margin-bottom: 36px;
  }
  
  .perks-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }
  
  .perk-emoji {
    font-size: 2rem;
  }
}

/* Carrusel Rotativo */
#casas-grid-home {
  transition: opacity 0.6s ease;
  opacity: 1;
}

#casas-grid-home.carousel-fade-out {
  opacity: 0;
}

#casas-grid-home.carousel-paused .casa-card {
  border-color: var(--musgo);
  box-shadow: 0 2px 8px rgba(45, 74, 53, 0.15);
}

/* Sección de Rutas y Mercados */
#rutas {
  --rutas-primario: #2d4a35;
  --rutas-acento: #9e4a3a;
  --rutas-fondo: #faf8f4;
  --rutas-texto: #1e1a14;
  --rutas-texto-suave: #9a9080;
  --rutas-radio: 8px;
  padding: 64px 20px;
  background: var(--rutas-fondo);
  color: var(--rutas-texto);
}

.rutas-container {
  max-width: 1100px;
  margin: 0 auto;
}

.rutas-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.rutas-header h2 {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--rutas-primario);
}

.rutas-header p {
  color: var(--rutas-texto-suave);
  font-size: 1.05rem;
  line-height: 1.5;
}

.rutas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.ruta-card {
  background: #fff;
  border-radius: var(--rutas-radio);
  padding: 24px;
  box-shadow: 0 2px 8px rgba(45, 74, 53, 0.08);
  border: 0.5px solid rgba(45, 74, 53, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ruta-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(45, 74, 53, 0.12);
}

.ruta-card.ruta-directa {
  border-top: 3px solid var(--rutas-primario);
}

.ruta-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
}

.ruta-codigo {
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  color: var(--rutas-texto-suave);
  margin: 0;
}

.badge {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
}

.badge-directo {
  background: rgba(45, 74, 53, 0.12);
  color: var(--rutas-primario);
}

.badge-conexion {
  background: rgba(158, 74, 58, 0.12);
  color: var(--rutas-acento);
}

.ruta-datos {
  list-style: none;
  padding: 0;
  margin: 4px 0;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--rutas-texto);
}

.ruta-nota {
  font-size: 0.88rem;
  color: var(--rutas-texto-suave);
  line-height: 1.45;
  margin: 0;
}

.rutas-cta {
  text-align: center;
  margin-top: 48px;
}

.rutas-cta p {
  font-size: 1.05rem;
  margin-bottom: 16px;
  color: var(--rutas-texto);
}

.rutas-boton {
  display: inline-block;
  background: var(--rutas-primario);
  color: #fff;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 600;
  transition: opacity 0.2s ease;
  font-family: 'DM Sans', sans-serif;
}

.rutas-boton:hover {
  opacity: 0.88;
}

@media (max-width: 768px) {
  #rutas {
    padding: 48px 20px;
  }

  .rutas-header h2 {
    font-size: 1.5rem;
  }

  .rutas-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }

  .ruta-card {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .rutas-grid {
    grid-template-columns: 1fr;
  }

  .rutas-header h2 {
    font-size: 1.3rem;
  }
}

/* ===== SECCIÓN EXTRAS ===== */
.extras {
  padding: 80px 0;
  background: linear-gradient(135deg, rgba(255, 248, 240, 0.5) 0%, rgba(245, 235, 220, 0.3) 100%);
}

.extras .section-head {
  text-align: center;
  margin-bottom: 60px;
}

.extras h2 {
  font-size: 2.2rem;
  font-weight: 400;
  margin-bottom: 16px;
  color: #2c1810;
}

.extras .section-head p {
  font-size: 1.1rem;
  color: #6b6354;
  max-width: 700px;
  margin: 0 auto 20px;
  line-height: 1.6;
  font-weight: 400;
}

.extras-nota {
  font-size: 0.95rem !important;
  color: #8b7d71 !important;
  font-style: italic;
  font-weight: 400;

.seasonal {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: #9a8b7e;
  margin-top: 4px;
  font-style: italic;
}
}

.extras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.extra-card {
  background: white;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.extra-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.extra-icon {
  font-size: 3rem;
  line-height: 1;
}

.extra-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #2c1810;
  margin: 0;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-cotiza {
  background: #d4a574;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "DM Sans", sans-serif;
  margin-top: auto;
}

.btn-cotiza:hover {
  background: #c4955f;
  transform: scale(1.02);
}

.btn-cotiza:active {
  transform: scale(0.98);
}

/* Responsive */
@media (max-width: 768px) {
  .extras {
    padding: 60px 0;
  }
  
  .extras h2 {
    font-size: 1.8rem;
  }

  .extras .section-head p {
    font-size: 0.95rem;
  }

  .extras-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }
  
  .extra-card {
    padding: 24px 16px;
  }
}

@media (max-width: 480px) {
  .extras {
    padding: 40px 0;
  }
  
  .extras h2 {
    font-size: 1.5rem;
  }
  
  .extras-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== ACTUALIZACIÓN SECCIÓN EXTRAS v2 ===== */
.extras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto 40px;
}

.extra-card {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.3s ease;
}

.extra-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.extra-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: #d4a574;
  z-index: 1;
}

.extra-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
}

.extra-card h3 {
  position: relative;
  z-index: 2;
  color: white;
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0;
  padding: 20px;
  line-height: 1.4;
  mix-blend-mode: normal;
}

.extra-checkbox {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #d4a574;
}

.extra-card input[type="checkbox"]:checked {
  accent-color: #a8b050;
}

.extras-cta {
  text-align: center;
  margin-top: 30px;
}

#extras-btn {
  min-width: 200px;
  font-size: 1rem;
}

#extras-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#extras-btn:not(:disabled) {
  cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
  .extras-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
  }
  
  .extra-card {
    min-height: 220px;
  }
  
  .extra-card h3 {
    font-size: 0.95rem;
    padding: 16px;
  }
  
  .extra-checkbox {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .extras-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .extra-card {
    min-height: 180px;
  }
  
  .extra-card h3 {
    font-size: 0.9rem;
    padding: 14px;
  }
}

/* ===== DATE RANGE PICKER AIRBNB-STYLE ===== */
.date-range-picker-container {
  position: relative;
}

.date-range-input {
  padding: 12px 16px;
  border: 1px solid #d4ccc4;
  border-radius: 8px;
  cursor: pointer;
  background: white;
  color: var(--gris-suave);
  font-size: 0.95rem;
  transition: all 0.2s;
  text-align: center;
}

.date-range-input:hover {
  border-color: var(--ocre-suave);
  color: var(--ink);
}

.date-range-input.active {
  border-color: var(--ocre-suave);
  background: var(--ocre-suave);
  color: white;
}

.date-range-calendar-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.calendar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.calendar-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
  z-index: 1001;
  max-height: 90vh;
  overflow-y: auto;
}

.calendar-months-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 24px;
}

.calendar-month {
  padding: 0 16px;
}

.calendar-month:not(:last-child) {
  border-right: 1px solid #e8e4dc;
}

.calendar-month-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
}

.calendar-nav {
  cursor: pointer;
  padding: 4px 8px;
  color: var(--ocre-suave);
  font-size: 1.3rem;
  transition: color 0.2s;
}

.calendar-nav:hover:not(:disabled) {
  color: var(--ink);
}

.calendar-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-bottom: 12px;
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--gris-suave);
  text-transform: uppercase;
}

.calendar-weekday {
  padding: 8px 0;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink);
  transition: all 0.2s;
  position: relative;
  border: none;
}

.calendar-day.other-month {
  color: #ccc;
  cursor: default;
}

.calendar-day:not(.other-month):not(.disabled):hover {
  background: #f5f1ed;
  font-weight: 600;
}

.calendar-day.selected {
  background: var(--ocre-suave);
  color: white;
  font-weight: 600;
  border-radius: 50%;
}

.calendar-day.in-range {
  background: #fbe5d3;
  border-radius: 0;
}

.calendar-day.in-range.start {
  border-radius: 50% 0 0 50%;
}

.calendar-day.in-range.end {
  border-radius: 0 50% 50% 0;
}

.calendar-day.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.calendar-actions {
  display: flex;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid #e8e4dc;
  justify-content: flex-end;
}

.btn-secondary {
  padding: 10px 20px;
  border: 1px solid #d4ccc4;
  background: white;
  color: var(--ink);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.btn-secondary:hover {
  border-color: var(--ink);
  background: #f5f1ed;
}

@media (max-width: 768px) {
  .calendar-months-container {
    grid-template-columns: 1fr;
  }

  .calendar-month:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #e8e4dc;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .calendar-popup {
    width: 90%;
    max-width: 500px;
  }
}