:root{
  --pine-950:#0a1f16;
  --pine-900:#122619;
  --pine-800:#1a3624;
  --pine-700:#264b32;
  --pine-600:#33623f;
  --cream:#f6f1e7;
  --cream-dim:#d9d2c1;
  --gold:#c9a15a;
  --gold-light:#e6cd94;
  --green:#5aa878;
  --gray:#8c8f8c;
  --st-green:#3ecf7a;   /* DISPONIBLE */
  --st-yellow:#f5b52e;  /* SEPARADO  */
  --st-red:#e05252;     /* VENDIDO   */
  --ink:#0b1710;
  --radius:22px;
  --maxw:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
section, #separar, #leadForm{scroll-margin-top:92px;}
body{
  font-family:'Manrope',sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Fraunces',serif;}
em{font-style:italic; color:var(--gold);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:600;
  color:var(--gold); margin-bottom:14px;
}
section{padding:96px 0;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:999px; font-weight:600; font-size:14.5px;
  cursor:pointer; border:1px solid transparent; transition:transform .15s ease, opacity .15s ease;
  letter-spacing:.01em;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold); color:var(--pine-950);}
/* background:transparent es necesario: en <button> el navegador pone un
   fondo gris claro por defecto y estos botones se veían blancos. */
.btn-outline{background:transparent; border-color:rgba(255,255,255,.35); color:var(--cream);}
.btn-outline-dark{background:transparent; border-color:rgba(11,23,16,.3); color:var(--ink);}
.btn-block{width:100%;}

/* ---------- HEADER ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(11,23,16,.55); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
header .wrap{display:flex; align-items:center; justify-content:space-between; height:78px;}
.logo{display:flex; align-items:center; gap:14px; color:var(--cream);}
.logo .name{font-family:'Fraunces',serif; font-size:17px; line-height:1.1;}
.logo .name small{display:block; font-family:'Manrope',sans-serif; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-dim); font-weight:500;}
.logo-img{height:34px; width:auto; display:block;}
@media(max-width:860px){ .logo-img{height:27px;} }
@media(max-width:420px){ .logo-img{height:22px;} }
nav{display:flex; gap:34px;}
nav a{color:var(--cream-dim); font-size:14.5px; font-weight:500; transition:color .15s;}
nav a:hover{color:var(--gold-light);}
.nav-links{display:flex; align-items:center; gap:34px;}
.navToggle{display:none; background:none; border:0; color:var(--cream); font-size:26px; cursor:pointer;}
@media(max-width:860px){
  .nav-links{position:fixed; top:78px; left:0; right:0; background:var(--pine-950); flex-direction:column; padding:20px 24px 30px; gap:18px; display:none;}
  .nav-links.open{display:flex;}
  .navToggle{display:block;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  overflow:hidden; color:var(--cream); padding-top:78px;
  /* fondo propio: si una imagen del recorrido falla, el hero sigue oscuro
     y legible en vez de mostrar el crema del cuerpo de la página */
  background:
    radial-gradient(900px 460px at 80% 0%, rgba(90,168,120,.10), transparent 62%),
    var(--pine-950);
}
.hero-logo{
  width:120px; height:auto; margin-bottom:22px; display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
@media(max-width:600px){ .hero-logo{width:90px;} }
.pano-stage{position:absolute; inset:0;}
.pano-layer{position:absolute; inset:0; overflow:hidden; cursor:grab; user-select:none;}
.pano-layer.dragging{cursor:grabbing;}
/* La cinta del recorrido: una imagen por ambiente, en fila.
   Con una sola imagen gigante los celulares la mostraban borrosa. */
.pano-img{
  position:absolute; top:0; left:0; height:100%; max-width:none;
  display:flex; align-items:stretch; will-change:transform;
  filter:saturate(1.04) brightness(.86);
}
.pano-panel{
  height:100%; width:auto; max-width:none; flex:0 0 auto;
  display:block; object-fit:cover; user-select:none; -webkit-user-drag:none;
}
/* suaviza la unión entre una imagen y la siguiente */
.pano-panel + .pano-panel{
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 34px);
  mask-image:linear-gradient(90deg, transparent 0, #000 34px);
  margin-left:-34px;
}
/* El degradado va DENTRO de la capa del panorama para que los puntos de
   interés queden por encima y no se apaguen. */
.pano-layer::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,23,16,.35) 0%, rgba(11,23,16,.15) 30%, rgba(11,23,16,.85) 100%);
}
.hero-inner{position:relative; z-index:2; width:100%; padding-bottom:70px;}
.compass{
  position:absolute; top:110px; right:28px; z-index:3; text-align:center;
  background:rgba(11,23,16,.45); border:1px solid rgba(255,255,255,.25);
  border-radius:14px; padding:12px 16px; font-size:12px; letter-spacing:.05em;
}
.compass .n{font-family:'Fraunces',serif; font-size:18px; color:var(--gold-light); display:block;}
.drag-hint{
  position:absolute; bottom:150px; left:50%; transform:translateX(-50%); z-index:3;
  font-size:12.5px; color:var(--cream-dim); letter-spacing:.05em; display:flex; align-items:center; gap:8px;
  background:rgba(11,23,16,.4); padding:8px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
}
/* ---------- RECORRIDO 360°: puntos, ambientes y barra ---------- */
.pano-spots{
  position:absolute; top:0; left:0; height:100%; pointer-events:none;
  will-change:transform; z-index:2;
}
.pano-spot{
  position:absolute; transform:translate(-50%,-50%); pointer-events:auto;
  background:none; border:0; padding:0; cursor:pointer; z-index:4;
}
.pano-spot-dot{
  display:block; width:15px; height:15px; border-radius:50%;
  background:var(--gold-light); border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 0 rgba(230,205,148,.55), 0 2px 10px rgba(0,0,0,.5);
  animation:spotPulse 2.6s ease-out infinite;
}
@keyframes spotPulse{
  0%{box-shadow:0 0 0 0 rgba(230,205,148,.5), 0 2px 10px rgba(0,0,0,.5);}
  70%{box-shadow:0 0 0 16px rgba(230,205,148,0), 0 2px 10px rgba(0,0,0,.5);}
  100%{box-shadow:0 0 0 0 rgba(230,205,148,0), 0 2px 10px rgba(0,0,0,.5);}
}
.pano-spot-tip{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%) translateY(6px) scale(.96);
  width:212px; padding:11px 13px; border-radius:14px; text-align:left;
  background:rgba(10,31,22,.92); border:1px solid rgba(230,205,148,.35);
  backdrop-filter:blur(8px); box-shadow:0 14px 34px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:opacity .18s, transform .18s;
}
.pano-spot.open .pano-spot-dot{animation:none; background:var(--cream); transform:scale(1.15);}
.pano-spot.open .pano-spot-tip{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1);}
.pano-spot-tip b{display:block; font-family:'Fraunces',serif; font-size:14.5px; color:var(--gold-light); margin-bottom:3px;}
.pano-spot-tip i{display:block; font-style:normal; font-size:12px; line-height:1.45; color:var(--cream-dim);}

/* etiqueta "ambiente en vivo": en escritorio el chip activo ya lo indica,
   así que solo se muestra en celular, encima de la franja */
.pano-now{
  display:none; position:absolute; bottom:52px; left:28px; z-index:3; align-items:center; gap:8px;
  background:rgba(11,23,16,.5); border:1px solid rgba(255,255,255,.2);
  border-radius:999px; padding:7px 14px 7px 11px; backdrop-filter:blur(8px);
}
.pano-now b{font-size:12.5px; font-weight:600; letter-spacing:.03em; color:var(--cream);}
.pano-now .live{
  width:7px; height:7px; border-radius:50%; background:var(--st-green);
  box-shadow:0 0 0 0 rgba(62,207,122,.6); animation:livePulse 2s infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(62,207,122,.6);}
  70%{box-shadow:0 0 0 8px rgba(62,207,122,0);}
  100%{box-shadow:0 0 0 0 rgba(62,207,122,0);}
}

.pano-scrub{
  position:absolute; left:28px; right:28px; bottom:22px; z-index:3;
  height:22px; display:flex; align-items:center; cursor:pointer;
}
.pano-scrub::before{
  content:""; position:absolute; left:0; right:0; height:3px; border-radius:2px;
  background:rgba(255,255,255,.22);
}
.pano-scrub i{
  position:relative; display:block; height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--gold), var(--gold-light)); width:0;
}
.pano-scrub i::after{
  content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
  width:12px; height:12px; border-radius:50%; background:var(--gold-light);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}

/* Barra de ambientes: en escritorio va abajo, junto a los controles del 360°.
   En celular pasa a ser una tira debajo de la franja (ver bloque móvil). */
.pano-dock{
  position:absolute; left:0; right:0; bottom:74px; z-index:3;
  padding:0 28px; pointer-events:none;
}
.pano-dock > *{pointer-events:auto;}
.pano-facts{display:none;}          /* en escritorio manda la mini-card */
.pano-rooms{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding:0; -webkit-overflow-scrolling:touch;
}
.pano-rooms::-webkit-scrollbar{display:none;}
.pano-chip{
  flex:0 0 auto; cursor:pointer; font-family:inherit;
  padding:9px 15px; border-radius:999px; font-size:13px; font-weight:600; letter-spacing:.01em;
  background:rgba(11,23,16,.5); border:1px solid rgba(255,255,255,.18); color:var(--cream-dim);
  backdrop-filter:blur(8px);
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.pano-chip:hover{color:var(--cream);}
.pano-chip.on{
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  border-color:transparent; color:#2a1d05; transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(201,161,90,.28);
}
.pano-facts{
  margin:12px 20px 0; padding:13px 15px 14px; border-radius:18px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(6px);
}
.pf-top{display:flex; align-items:center; gap:9px; min-width:0;}
.pf-dot{
  width:8px; height:8px; border-radius:50%; background:var(--st-green); flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(62,207,122,.16);
}
.pf-top b{
  font-family:'Fraunces',serif; font-size:16px; color:var(--cream); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pf-top small{
  margin-left:auto; flex:0 0 auto; font-size:10.5px; color:var(--gold-light);
  border:1px solid rgba(230,205,148,.32); border-radius:999px; padding:3px 9px;
}
.pf-bottom{
  display:flex; align-items:center; gap:12px; margin-top:11px;
  padding-top:11px; border-top:1px solid rgba(255,255,255,.1);
}
.pf-nums{display:flex; gap:18px;}
.pf-nums div{text-align:left;}
.pf-nums b{display:block; font-family:'Fraunces',serif; font-size:15px; color:var(--gold-light); line-height:1.15;}
.pf-nums span{display:block; font-size:10px; color:var(--cream-dim); margin-top:1px;}
.pf-cta{
  flex:0 0 auto; margin-left:auto; padding:10px 18px; border-radius:999px;
  font-size:13px; font-weight:700; white-space:nowrap;
  background:linear-gradient(135deg, var(--gold), var(--gold-light)); color:#2a1d05;
  box-shadow:0 6px 16px rgba(201,161,90,.25);
}

.badge{
  display:inline-block; padding:8px 16px; border:1px solid rgba(230,205,148,.4);
  border-radius:999px; font-size:12.5px; letter-spacing:.04em; color:var(--gold-light);
  margin-bottom:22px; background:rgba(11,23,16,.35);
}
.hero h1{font-size:clamp(34px,5.4vw,64px); font-weight:600; line-height:1.08; max-width:820px; margin-bottom:20px;}
.hero p.lead{max-width:560px; color:var(--cream-dim); font-size:17px; margin-bottom:30px;}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px;}

.mini-card{
  position:absolute; top:196px; right:28px; z-index:3; width:230px;
  background:rgba(11,23,16,.55); border:1px solid rgba(255,255,255,.2);
  border-radius:16px; padding:16px; backdrop-filter:blur(6px);
}
.mini-card .tag{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-light); margin-bottom:6px;}
.mini-card h4{font-family:'Fraunces',serif; font-size:19px; margin-bottom:10px;}
.mini-card .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; font-size:12px;}
.mini-card .grid3 b{display:block; font-family:'Fraunces',serif; font-size:15px; color:var(--gold-light);}
.mini-card .grid3 span{color:var(--cream-dim); font-size:10.5px;}
.mini-card .mini-price{margin-top:10px; font-family:'Fraunces',serif; font-size:19px; color:var(--gold-light);}
.mini-card .mini-price small{font-family:'Manrope',sans-serif; font-size:11px; color:var(--cream-dim);}

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14);
  border-radius:16px; overflow:hidden; max-width:820px;
}
.stat{background:rgba(11,23,16,.55); padding:22px 18px; text-align:left;}
.stat b{font-family:'Fraunces',serif; font-size:clamp(22px,3vw,32px); display:block; color:var(--gold-light);}
.stat span{font-size:12px; color:var(--cream-dim); letter-spacing:.02em;}
@media(max-width:700px){ .stats{grid-template-columns:repeat(2,1fr);} .mini-card{display:none;} }

/* ---------- HERO EN MÓVIL: franja panorámica + texto debajo ----------
   El panorama es 8.5:1. Si ocupa toda la altura de la pantalla del celular
   solo se ve ~5% de la escena (parece un zoom enorme). Aquí lo pasamos a una
   franja de altura acotada: se ve el mismo campo de visión que en escritorio
   y se entiende el recorrido por la casa. */
@media (max-width:760px), (max-width:1024px) and (orientation:portrait){
  .hero{
    min-height:0; display:block; padding-top:78px; padding-bottom:0;
    background:
      radial-gradient(900px 420px at 80% 0%, rgba(90,168,120,.10), transparent 62%),
      var(--pine-950);
  }
  .hero::after{display:none;}

  .pano-stage{
    position:relative; inset:auto;
    /* altura calculada para que CADA ambiente entre completo en pantalla:
       la cinta es 13,2:1, así que a ~255px de alto un render ocupa el ancho
       del celular. Si la subes, los ambientes se recortan. */
    width:100%; height:clamp(215px, 30vh, 285px);
  }
  .pano-layer{touch-action:pan-y;}
  .pano-layer::after{
    background:linear-gradient(180deg, rgba(11,23,16,.5) 0%, rgba(11,23,16,.03) 42%, rgba(11,23,16,.72) 100%);
  }
  .pano-img{filter:saturate(1.04) brightness(.95);}

  .compass{
    top:14px; right:14px; padding:7px 11px; font-size:10.5px; border-radius:12px;
  }
  .compass .n{font-size:14px;}
  .pano-now{display:flex; top:14px; bottom:auto; left:14px; padding:6px 12px 6px 9px;}
  .pano-now b{font-size:12px;}
  .pano-scrub{left:16px; right:16px; bottom:14px;}
  .pano-spot-tip{width:190px;}

  /* en celular el dock sale del hero y se vuelve tira + tarjeta de datos */
  .pano-dock{position:relative; left:auto; right:auto; bottom:auto; padding:0; margin-top:-2px;}
  .pano-rooms{padding:14px 20px 4px;}
  .pano-chip{background:rgba(255,255,255,.07);}
  .pano-facts{display:block;}

  .hero-inner{padding-top:26px; padding-bottom:48px;}
  .hero h1{font-size:clamp(30px,8vw,40px);}
  .hero p.lead{font-size:16px; color:var(--cream-dim);}
  .hero-cta{margin-bottom:36px;}
  .hero-cta .btn{width:100%; text-align:center; justify-content:center;}
}

/* ---------- SECTION HEADERS ---------- */
.sec-head{max-width:640px; margin-bottom:50px;}
.sec-head h2{font-size:clamp(28px,4vw,42px); font-weight:600; line-height:1.15;}
.sec-head p{color:#4b564d; margin-top:14px; font-size:16px;}
.dark{
  background:
    radial-gradient(1100px 520px at 85% -8%, rgba(90,168,120,.10), transparent 60%),
    radial-gradient(900px 480px at -10% 105%, rgba(201,161,90,.06), transparent 55%),
    var(--pine-950);
  color:var(--cream);
}
.dark:nth-of-type(even){
  background:
    radial-gradient(1100px 520px at -10% -8%, rgba(90,168,120,.09), transparent 60%),
    radial-gradient(900px 480px at 110% 105%, rgba(201,161,90,.05), transparent 55%),
    #0d2419;
}
.dark .sec-head p{color:var(--cream-dim);}
/* Tarjetas blancas dentro de secciones oscuras conservan su tinta */
.detail-card{color:var(--ink);}
.floor-card{color:var(--ink);}
form#leadForm{color:var(--ink);}

/* ---------- MASTERPLAN ---------- */
.plan-wrap{display:grid; grid-template-columns:1.3fr .9fr; gap:36px; align-items:start;}
@media(max-width:900px){.plan-wrap{grid-template-columns:1fr;}}

.plan-board{
  position:relative; border-radius:var(--radius); padding:26px;
  border:1px solid rgba(255,255,255,.08); overflow:hidden;
  background-color:#0f1f16;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.05), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(255,255,255,.04), transparent 45%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 26px);
}

.plan-compass{position:absolute; top:22px; left:26px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px;}
.plan-compass .compass-rose{width:16px; height:16px; border:1px solid rgba(255,255,255,.35); transform:rotate(45deg);
  background:linear-gradient(180deg, var(--gold-light) 50%, rgba(255,255,255,.12) 50%);}
.plan-compass .compass-label{font-family:'Fraunces',serif; font-size:12px; color:var(--cream-dim); letter-spacing:.04em;}

.plan-rows{position:relative; padding-top:64px;}
.plan-row{display:grid; grid-template-columns:repeat(var(--cols, 7), 1fr); gap:12px;}

.plot{
  aspect-ratio:1/0.92; width:100%; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; letter-spacing:.02em; color:var(--cream); cursor:pointer;
  border:1.5px solid; transition:all .15s ease;
}
/* Estados: DISPONIBLE = verde · SEPARADO = amarillo · VENDIDO = rojo */
.plot.disponible{background:rgba(62,207,122,.14); border-color:var(--st-green); color:#8fe7b4; animation:plotPulse 2.6s ease-in-out infinite;}
.plot.separado{background:rgba(245,181,46,.14); border-color:var(--st-yellow); color:#ffd98a; animation:none;}
.plot.vendido{background:rgba(224,82,82,.12); border-color:var(--st-red); color:#f0a0a0; animation:none;}
.plot.club{background:var(--gold); color:var(--pine-950); border-color:var(--gold);}
.plot:hover{transform:translateY(-3px) scale(1.03); animation-play-state:paused; z-index:6;}
.plot.active{box-shadow:0 0 0 3px rgba(230,205,148,.35); transform:translateY(-2px);}
@keyframes plotPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(62,207,122,.28);}
  50%{box-shadow:0 0 0 6px rgba(62,207,122,0);}
}
.plot.active.disponible{box-shadow:0 0 0 3px rgba(62,207,122,.45);}

/* Tooltip del plano */
.plot{position:relative;}
.plot::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(4px); white-space:nowrap;
  background:rgba(7,15,10,.95); border:1px solid rgba(255,255,255,.18); color:var(--cream);
  font-size:11px; font-weight:600; padding:6px 11px; border-radius:8px;
  opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:7;
}
.plot:hover::after{opacity:1; transform:translateX(-50%) translateY(0);}

.plan-street{position:relative; height:52px; margin:16px -26px; display:flex; align-items:center; justify-content:center;}
.plan-street svg{position:absolute; inset:0; width:100%; height:100%; display:block;}
.street-label{
  position:relative; z-index:1; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-dim); background:var(--pine-950); padding:3px 12px; border-radius:999px;
}
@media(max-width:560px){ .street-label{font-size:8px; letter-spacing:.1em; padding:3px 9px;} }

.plan-legend{display:flex; gap:18px; margin-top:20px; flex-wrap:wrap; font-size:12px; color:var(--cream-dim);}
.plan-legend span{display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.04em;}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block;}
.dot.d{background:var(--st-green);} .dot.s{background:var(--st-yellow);} .dot.v{background:var(--st-red);}
.plan-scale{position:absolute; bottom:14px; right:26px; font-size:11px; color:var(--cream-dim); display:flex; align-items:center; gap:6px;}
.plan-scale i{width:34px; height:1px; background:var(--cream-dim); display:inline-block;}

/* En celular las 15 casas no caben en filas de 7: se salían del plano.
   Aquí el plano reacomoda las manzanas en filas de 4 (y de 3 en pantallas
   muy angostas) para que se vean TODAS. */
@media(max-width:700px){
  .plan-row{grid-template-columns:repeat(4,1fr) !important; gap:8px;}
  .plot{font-size:13px; padding:12px 4px; letter-spacing:0;}
  .plan-rows{padding-top:56px;}
  .plan-street{height:44px; margin:14px -20px;}
  .plan-legend{gap:12px; font-size:11px; margin-top:16px;}
  .plan-scale{display:none;}
}
@media(max-width:380px){
  .plan-row{grid-template-columns:repeat(3,1fr) !important;}
}

.detail-card{
  background:#fff; border-radius:var(--radius); padding:28px; border:1px solid #e7e1d2;
  box-shadow:0 20px 50px -25px rgba(0,0,0,.25); position:sticky; top:100px;
}
.detail-card .sector{font-size:12px; color:#8a7c5f; letter-spacing:.04em; margin-bottom:4px;}
.detail-card h3{font-family:'Fraunces',serif; font-size:26px; margin-bottom:6px;}
.status-pill{display:inline-block; font-size:11.5px; padding:4px 12px; border-radius:999px; font-weight:700; margin-bottom:18px; letter-spacing:.03em;}
.status-pill.disponible{background:#e3f7ec; color:#177a45;}
.status-pill.separado{background:#fdf3dc; color:#9a6c0c;}
.status-pill.vendido{background:#fde7e7; color:#b03434;}
.price-row{display:flex; align-items:baseline; gap:10px; margin-bottom:20px;}
.price-row b{font-family:'Fraunces',serif; font-size:30px;}
.price-row span{font-size:12.5px; color:#8a7c5f;}
.spec-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;}
.spec-grid div{text-align:center; background:#f7f4ec; border-radius:10px; padding:12px 6px;}
.spec-grid b{display:block; font-family:'Fraunces',serif; font-size:18px;}
.spec-grid span{font-size:10.5px; color:#8a7c5f;}
.spec-list{display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:13.5px; margin-bottom:20px;}
.spec-list div span{display:block; color:#8a7c5f; font-size:11px;}

/* Destacados de la tarjeta de casa: precio en verde, ubicación en rojo */
.price-row .tag-green{
  font-weight:700; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--st-green); background:rgba(62,207,122,.14);
  border:1px solid rgba(62,207,122,.45); border-radius:999px; padding:4px 11px;
  align-self:center; white-space:nowrap;
}
.spec-list .tag-red{color:var(--st-red); font-weight:700;}
.spec-list .tag-red span{color:#8a7c5f; font-weight:400;}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px;}
.chip{background:#f7f4ec; border:1px solid #e7e1d2; padding:5px 12px; border-radius:999px; font-size:12px;}
.finance-box{background:var(--pine-950); color:var(--cream); border-radius:14px; padding:18px; margin-bottom:20px;}
.finance-box .eyebrow{margin-bottom:10px;}
.finance-row{display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px dashed rgba(255,255,255,.15);}
.finance-row:last-child{border-bottom:0;}
.finance-row b{color:var(--gold-light); font-family:'Fraunces',serif; font-size:15px;}
.detail-actions{display:flex; gap:10px;}
.detail-actions .btn{flex:1;}

/* ---------- GALERÍA "RECORRE EL PROYECTO" ---------- */
.g-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px;}
.g-tab{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:var(--cream-dim);
  font-family:'Manrope',sans-serif; font-size:13px; font-weight:600; padding:10px 20px;
  border-radius:999px; cursor:pointer; transition:all .18s; letter-spacing:.02em;
}
.g-tab:hover{border-color:var(--gold); color:var(--gold-light); transform:translateY(-1px);}
.g-tab.active{background:var(--gold); border-color:var(--gold); color:var(--pine-950);}

.g-stage{
  position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/8.4;
  background:#0f1f16; border:1px solid rgba(255,255,255,.1); cursor:zoom-in;
}
#gImg{width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.02); transition:opacity .45s ease, transform .8s ease;}
#gImg.in{opacity:1; transform:scale(1);}
.g-stage:hover #gImg.in{transform:scale(1.035);}
.g-caption{
  position:absolute; left:0; right:0; bottom:0; padding:70px 28px 22px; pointer-events:none;
  background:linear-gradient(0deg, rgba(0,0,0,.72), transparent); color:#fff;
}
.g-counter{font-size:12px; color:var(--gold-light); letter-spacing:.08em; margin-bottom:5px; font-weight:700;}
.g-caption h4{font-family:'Fraunces',serif; font-size:clamp(18px,2.4vw,26px);}
.g-caption p{font-size:13px; color:#e6e1d4; margin-top:3px; max-width:520px;}
.g-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(11,23,16,.55); color:var(--cream); backdrop-filter:blur(6px);
  cursor:pointer; font-size:22px; display:flex; align-items:center; justify-content:center;
  transition:all .18s;
}
.g-arrow:hover{background:var(--gold); color:var(--pine-950); border-color:var(--gold);}
.g-prev{left:16px;} .g-next{right:16px;}
.g-full{
  position:absolute; top:16px; right:16px; z-index:3;
  background:rgba(11,23,16,.55); border:1px solid rgba(255,255,255,.3); color:var(--cream);
  font-size:12px; font-weight:600; padding:8px 14px; border-radius:999px; cursor:pointer;
  backdrop-filter:blur(6px); transition:all .18s;
}
.g-full:hover{background:var(--gold); color:var(--pine-950); border-color:var(--gold);}

.g-thumbs{display:flex; gap:10px; margin-top:14px; overflow-x:auto; padding-bottom:6px;}
.g-thumb{
  flex:0 0 108px; height:68px; border-radius:10px; overflow:hidden; padding:0;
  border:2px solid transparent; cursor:pointer; opacity:.55; transition:all .18s; background:none;
}
.g-thumb img{width:100%; height:100%; object-fit:cover;}
.g-thumb:hover{opacity:.9;}
.g-thumb.active{border-color:var(--gold); opacity:1;}


/* Lightbox pantalla completa */
.g-lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(5,10,7,.96);
  display:none; align-items:center; justify-content:center; padding:56px 74px;
}
.g-lightbox.open{display:flex;}
.g-lightbox img{max-width:100%; max-height:100%; object-fit:contain; border-radius:8px;}
.g-lb-close{
  position:absolute; top:20px; right:22px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#fff;
  font-size:17px; cursor:pointer; transition:all .18s;
}
.g-lb-close:hover{background:var(--gold); color:var(--pine-950);}
.g-lb-cap{position:absolute; bottom:20px; left:0; right:0; text-align:center; color:var(--cream-dim); font-size:13.5px; padding:0 24px;}
@media(max-width:640px){.g-lightbox{padding:56px 12px;}}

/* ---------- AMENIDADES ---------- */
.amen-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); overflow:hidden;}
@media(max-width:760px){.amen-grid{grid-template-columns:repeat(2,1fr);}}
.amen-item{background:var(--pine-950); padding:26px 22px; display:flex; gap:16px; align-items:flex-start;}
.amen-item .num{font-family:'Fraunces',serif; color:var(--gold); font-size:15px; opacity:.85;}
.amen-item p{font-size:14.5px; color:var(--cream-dim); line-height:1.4;}

/* ---------- FINANCIACION / FORM ---------- */
.fin-wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
@media(max-width:900px){.fin-wrap{grid-template-columns:1fr;}}
.fin-points{display:flex; flex-direction:column; gap:16px; margin-top:26px;}
.fin-point{display:flex; gap:12px; align-items:flex-start; font-size:15px;}
.fin-point .ico{width:22px; height:22px; border-radius:50%; background:var(--gold); color:var(--pine-950); flex:none; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;}
form{background:#fff; border-radius:var(--radius); padding:32px; border:1px solid #e7e1d2;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:7px; color:#4b564d;}
.field input, .field select{
  width:100%; padding:13px 14px; border-radius:10px; border:1px solid #ddd5c2; font-size:14.5px;
  font-family:'Manrope',sans-serif; background:#faf8f2;
}
.field input:focus, .field select:focus{outline:2px solid var(--gold); border-color:var(--gold);}
.form-note{font-size:12px; color:#8a7c5f; margin-top:14px; text-align:center;}
.form-success{display:none; background:#eaf3ea; color:#2a6b3c; padding:14px 16px; border-radius:10px; font-size:13.5px; margin-bottom:18px;}
.form-success.show{display:block;}

/* ---------- FOOTER ---------- */
footer{background:var(--pine-950); color:var(--cream-dim); padding:50px 0 30px; text-align:center;}
footer .footer-mark{width:92px; height:auto; margin:0 auto 16px; display:block;}
footer h5{font-family:'Fraunces',serif; color:var(--cream); font-size:18px; margin-bottom:4px;}
footer .addr{font-size:13px; margin-bottom:20px;}
footer .copy{font-size:12px; opacity:.6; border-top:1px solid rgba(255,255,255,.1); padding-top:20px;}

.section-num{color:var(--gold); font-family:'Fraunces',serif;}

/* ---------- PRICE "DESDE" ---------- */
.price-row small{font-size:12px; color:#8a7c5f; text-transform:uppercase; letter-spacing:.05em; align-self:center;}
.mini-card .mini-price small{margin-right:2px;}

/* ---------- LA CASA / DISTRIBUCIÓN ---------- */
.casa-layout{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:70px;}
@media(max-width:820px){.casa-layout{grid-template-columns:1fr;}}
.floor-card{background:#fff; border:1px solid #e7e1d2; border-radius:var(--radius); padding:0; overflow:hidden; box-shadow:0 20px 50px -30px rgba(0,0,0,.2);}
.floor-photo{height:170px; overflow:hidden;}
.floor-photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.floor-card:hover .floor-photo img{transform:scale(1.06);}
.floor-body{padding:24px;}
.floor-tag{font-family:'Fraunces',serif; font-size:13px; letter-spacing:.05em; color:var(--gold); text-transform:uppercase; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid #eee7d8;}
.floor-card ul{list-style:none; display:flex; flex-direction:column; gap:11px;}
.floor-card li{position:relative; padding-left:22px; font-size:14.5px; color:#3a4038;}
.floor-card li::before{content:"›"; position:absolute; left:5px; color:var(--gold); font-weight:700;}
.floor-highlights{background:var(--pine-950); border-color:var(--pine-800); color:var(--cream);}
.floor-highlights .floor-tag{color:var(--gold-light); border-color:rgba(255,255,255,.12);}
.hl-list{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px;}
.hl{background:rgba(201,161,90,.18); border:1px solid var(--gold); color:var(--gold-light); padding:7px 14px; border-radius:999px; font-size:13px; font-weight:500;}
.hl-note{color:var(--cream-dim); font-size:13px; line-height:1.55;}

/* ---------- DIFERENCIADORES ---------- */
.dif-head{max-width:640px; margin-bottom:36px;}
.dif-head h2{font-size:clamp(24px,3.4vw,36px); font-weight:600; line-height:1.15;}
.dif-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); overflow:hidden;}
@media(max-width:760px){.dif-grid{grid-template-columns:1fr;}}
.dif-item{background:rgba(10,31,22,.72); padding:28px 24px; transition:background .15s;}
.dif-item:hover{background:rgba(201,161,90,.10);}
.dif-item .num{font-family:'Fraunces',serif; color:var(--gold-light); font-size:14px; opacity:.9;}
.dif-item h4{font-family:'Fraunces',serif; font-size:18px; margin:8px 0 8px; color:var(--cream);}
.dif-item p{font-size:14px; color:var(--cream-dim); line-height:1.5;}

/* ---------- PLANES DE FINANCIACIÓN ---------- */
.plans-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px;}
@media(max-width:900px){.plans-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.plans-grid{grid-template-columns:1fr;}}
.plan-card{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:22px 20px; display:flex; flex-direction:column;}
.plan-card .plan-name{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-light); margin-bottom:14px;}
.plan-initial{display:flex; flex-direction:column; margin-bottom:16px; padding-bottom:16px; border-bottom:1px dashed rgba(255,255,255,.15);}
.plan-initial b{font-family:'Fraunces',serif; font-size:30px; color:var(--cream); line-height:1;}
.plan-initial span{font-size:12px; color:var(--cream-dim); margin-top:4px;}
.plan-lines{display:flex; flex-direction:column; gap:9px; margin-bottom:14px;}
.plan-line{display:flex; justify-content:space-between; font-size:13px; color:var(--cream-dim);}
.plan-line b{color:var(--cream); font-weight:600;}
.plan-note{font-size:12.5px; color:var(--gold-light); line-height:1.45; margin-top:auto;}
.plan-card-custom{background:linear-gradient(160deg, rgba(201,161,90,.22), rgba(255,255,255,.04)); border-color:var(--gold);}
.plan-custom-text{font-size:13px; color:var(--cream-dim); line-height:1.5; margin-bottom:18px;}
.plan-card-custom .btn{margin-top:auto;}
.plans-legal{font-size:11.5px; color:var(--cream-dim); opacity:.75; margin-bottom:44px; max-width:720px;}

/* ---------- BOTONES PREMIUM ---------- */
.btn{position:relative; overflow:hidden;}
.btn-gold{background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 45%, #b3893f 100%); box-shadow:0 10px 26px -12px rgba(201,161,90,.65); font-weight:700;}
.btn-gold::after{
  content:""; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-20deg); transition:left .5s ease;
}
.btn-gold:hover::after{left:130%;}
.btn-gold:hover{box-shadow:0 14px 30px -12px rgba(201,161,90,.85);}
.btn:active{transform:translateY(0) scale(.98);}

/* ---------- ANIMACIÓN DE ENTRADA (reveal) ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.36,1);}
.reveal.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} .plot{animation:none !important;} }

/* ---------- FICHA: transición al cambiar de casa ---------- */
.detail-card.swap{animation:cardIn .35s ease;}
@keyframes cardIn{from{opacity:.4; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ---------- FILA DE BENEFICIOS ---------- */
.fin-points-row{
  flex-direction:row; flex-wrap:wrap; gap:14px 28px; margin:0 0 40px;
}
.fin-points-row .fin-point{font-size:13.5px; color:var(--cream-dim);}

/* ---------- SEPARA TU CASA (PAGO BOLD) ---------- */
.pay-card{
  background:linear-gradient(165deg, rgba(201,161,90,.14), rgba(255,255,255,.045) 55%);
  border:1px solid var(--gold); border-radius:var(--radius); padding:32px;
  box-shadow:0 30px 70px -40px rgba(201,161,90,.5);
}
.pay-badge{
  display:inline-block; background:var(--gold); color:var(--pine-950);
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px; margin-bottom:16px;
}
.pay-card h3{font-family:'Fraunces',serif; font-size:clamp(22px,2.6vw,30px); color:var(--cream); margin-bottom:8px;}
.pay-card .pay-lead{font-size:14px; color:var(--cream-dim); margin-bottom:24px;}
.pay-card .field label{color:var(--cream-dim);}
.pay-card .field label small{font-weight:500; opacity:.8;}
.pay-card .field select{background:rgba(11,23,16,.5); border-color:rgba(255,255,255,.2); color:var(--cream);}
.pay-card .field select:focus{outline:2px solid var(--gold);}

.chip-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.chip-amt{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22); color:var(--cream-dim);
  font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:700; padding:9px 17px;
  border-radius:999px; cursor:pointer; transition:all .16s;
}
.chip-amt:hover{border-color:var(--gold); color:var(--gold-light); transform:translateY(-1px);}
.chip-amt.active{background:var(--gold); border-color:var(--gold); color:var(--pine-950);}

.pay-range{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
  background:linear-gradient(90deg, var(--gold), rgba(255,255,255,.15)); outline:none; cursor:pointer;}
.pay-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--gold-light); border:3px solid var(--pine-950); box-shadow:0 0 0 2px var(--gold);
  cursor:grab;
}
.pay-range::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--gold-light); border:3px solid var(--pine-950); box-shadow:0 0 0 2px var(--gold); cursor:grab;
}

.pay-summary{background:rgba(11,23,16,.5); border:1px dashed rgba(255,255,255,.2); border-radius:12px; padding:16px 18px; margin:20px 0;}
.pay-block{margin-top:14px; padding-top:14px; border-top:1px dashed rgba(255,255,255,.18);}
.pay-sub{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-light); margin-bottom:10px;}
.inc-chips{display:flex; flex-wrap:wrap; gap:6px;}
.inc-chip{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:var(--cream-dim);
  font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:999px;
}
.pp-table{display:flex; flex-direction:column; gap:6px;}
.pp-row{
  display:grid; grid-template-columns:1.2fr 1fr 1fr .8fr 1.1fr; gap:6px; align-items:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:10px; padding:9px 12px; font-size:11.5px; color:var(--cream-dim);
}
.pp-row b{color:var(--gold-light); font-weight:800;}
.pp-name{font-weight:800; color:var(--cream); font-size:11.5px;}
@media(max-width:480px){ .pp-row{grid-template-columns:1fr 1fr; row-gap:4px;} }
.pp-foot{font-size:11px; color:var(--cream-dim); opacity:.85; margin-top:10px; line-height:1.5;}
.pp-foot b{color:var(--gold-light);}

/* Pasos del simulador */
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; background:var(--gold); color:var(--pine-950);
  font-size:10.5px; font-weight:800; margin-right:6px;
}

/* Selector de tipo de casa */
.type-cards{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media(max-width:520px){.type-cards{grid-template-columns:1fr;}}
.type-card{
  text-align:left; display:flex; flex-direction:column; gap:5px; cursor:pointer;
  background:rgba(6,18,12,.55); border:1.5px solid rgba(255,255,255,.18);
  border-radius:14px; padding:14px 15px; transition:all .16s; color:var(--cream-dim);
}
.type-card:hover{border-color:rgba(230,205,148,.6); transform:translateY(-1px);}
.type-card.active{
  border-color:var(--gold); background:rgba(201,161,90,.13);
  box-shadow:0 0 22px -8px rgba(201,161,90,.55);
}
.tc-name{font-size:13.5px; font-weight:800; color:var(--cream);}
.type-card.active .tc-name{color:var(--gold-light);}
.tc-desc{font-size:11.5px; line-height:1.45;}
.tc-price{font-size:12px; font-weight:800; color:var(--gold-light);}

/* Chips de adicionales */
.addon-chip.active{background:var(--gold); border-color:var(--gold); color:var(--pine-950);}

/* Selector de plan de financiación */
.plan-picks{display:flex; flex-direction:column; gap:8px;}
.plan-pick{
  display:flex; align-items:center; gap:10px; cursor:pointer; text-align:left;
  background:rgba(6,18,12,.55); border:1.5px solid rgba(255,255,255,.18);
  border-radius:12px; padding:11px 14px; transition:all .16s; color:var(--cream-dim);
}
.plan-pick:hover{border-color:rgba(230,205,148,.6);}
.plan-pick.active{
  border-color:var(--gold); background:rgba(201,161,90,.13);
  box-shadow:0 0 20px -8px rgba(201,161,90,.5);
}
.ppk-radio{
  width:15px; height:15px; border-radius:50%; flex:none;
  border:2px solid rgba(255,255,255,.4); transition:all .15s;
}
.plan-pick.active .ppk-radio{border-color:var(--gold); background:var(--gold); box-shadow:inset 0 0 0 3px var(--pine-950);}
.ppk-name{font-size:13px; font-weight:800; color:var(--cream); flex:none;}
.plan-pick.active .ppk-name{color:var(--gold-light);}
.ppk-info{font-size:11.5px; margin-left:auto; text-align:right;}

/* Líneas destacadas de la simulación */
.pay-line.pay-total{
  margin-top:6px; padding-top:10px; border-top:1px solid rgba(230,205,148,.35);
}
.pay-line.pay-total b{font-size:19px;}
.pay-line .hoy{color:#7fe3a8;}
.pay-warn{
  margin:4px 0 8px; padding:8px 12px; border-radius:8px;
  background:rgba(245,181,46,.10); border:1px solid rgba(245,181,46,.35);
  font-size:11.5px; color:#ffd98a; line-height:1.45;
}
.pay-estreno{
  margin-top:14px; padding:12px 14px; border-radius:10px; text-align:center;
  background:rgba(62,207,122,.1); border:1px solid rgba(62,207,122,.35);
  font-size:13px; color:var(--cream);
}
.pay-estreno b{color:#8fe7b4;}
.pay-line{display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; color:var(--cream-dim); padding:5px 0;}
.pay-line b{color:var(--gold-light); font-family:'Fraunces',serif; font-size:16px;}
.pay-line-note span{font-size:11.5px; opacity:.75;}

.btn-pay{font-size:16px; padding:17px 30px;}
.btn-pay:disabled{opacity:.55; cursor:not-allowed; box-shadow:none;}
.btn-pay.loading{pointer-events:none; opacity:.7;}
.bold-mark{font-weight:800; letter-spacing:.02em; text-transform:lowercase;}
.pay-msg{font-size:12px; color:var(--cream-dim); text-align:center; margin-top:12px; line-height:1.5;}
.pay-msg a{color:var(--gold-light); text-decoration:underline;}

/* ---------- TARJETAS OSCURAS LUMINOSAS ----------
   Las "ventanas" blancas pasan a vidrio oscuro con halo dorado. */
.detail-card, .floor-card, form#leadForm{
  background:linear-gradient(163deg, rgba(30,61,42,.88) 0%, rgba(10,31,22,.97) 62%);
  border:1px solid rgba(230,205,148,.30);
  box-shadow:
    0 34px 80px -38px rgba(0,0,0,.9),
    0 0 60px -22px rgba(201,161,90,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--cream);
  color-scheme:dark;
}
form#leadForm{position:relative;}
.detail-card::before, .floor-card::before, form#leadForm::before{
  content:""; position:absolute; top:0; left:9%; right:9%; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(230,205,148,.75), transparent);
}
.detail-card:hover, .floor-card:hover{
  box-shadow:
    0 34px 80px -36px rgba(0,0,0,.9),
    0 0 75px -20px rgba(201,161,90,.6),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Ficha de casa (masterplan) en oscuro */
.detail-card .sector{color:var(--gold-light);}
.detail-card h3{color:var(--cream);}
.price-row b{color:var(--gold-light);}
.price-row span, .price-row small{color:var(--cream-dim);}
.spec-grid div{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);}
.spec-grid b{color:var(--cream);}
.spec-grid span{color:var(--cream-dim);}
.spec-list{color:var(--cream);}
.detail-card .price-row .tag-green{color:var(--st-green);}
.detail-card .spec-list .tag-red{color:#ff8b8b;}
.detail-card .spec-list .tag-red span{color:var(--cream-dim);}
.spec-list div span{color:var(--cream-dim);}
.chip{background:rgba(201,161,90,.13); border:1px solid rgba(201,161,90,.45); color:var(--gold-light);}
.finance-box{background:rgba(6,18,12,.8); border:1px solid rgba(230,205,148,.22);}
.btn-outline-dark{border-color:rgba(246,241,231,.4); color:var(--cream);}
.status-pill.disponible{background:rgba(62,207,122,.16); color:#7fe3a8; box-shadow:0 0 16px -5px rgba(62,207,122,.55);}
.status-pill.separado{background:rgba(245,181,46,.16); color:#ffd98a; box-shadow:0 0 16px -5px rgba(245,181,46,.5);}
.status-pill.vendido{background:rgba(224,82,82,.16); color:#f5a3a3; box-shadow:0 0 16px -5px rgba(224,82,82,.5);}

/* Tipologías en oscuro */
.floor-card li{color:var(--cream-dim);}
.floor-tag{color:var(--gold-light); border-bottom-color:rgba(255,255,255,.12);}
.floor-highlights{background:linear-gradient(163deg, rgba(38,75,50,.85) 0%, rgba(10,31,22,.97) 62%); border-color:var(--gold);}

/* Formulario en oscuro */
form#leadForm .field label{color:var(--cream-dim);}
form#leadForm .field input, form#leadForm .field select{
  background:rgba(6,18,12,.65); border:1px solid rgba(255,255,255,.2); color:var(--cream);
}
form#leadForm .field input::placeholder{color:rgba(246,241,231,.42);}
form#leadForm .form-note{color:var(--cream-dim);}
.form-success{background:rgba(62,207,122,.16); color:#8fe7b4;}

/* ---------- FUENTES REDONDAS (todas las secciones menos el hero) ---------- */
#masterplan, #masterplan *,
#experiencia, #experiencia *,
#la-casa, #la-casa *,
#financiacion, #financiacion *,
footer, footer *{
  font-family:'Nunito',sans-serif !important;
}
#masterplan h2, #masterplan h3, #masterplan .spec-grid b, #masterplan .price-row b, #masterplan .finance-row b,
#experiencia h2, #experiencia h4, #experiencia .g-caption h4, #experiencia .mat-info h4,
#la-casa h2, #la-casa h3, #la-casa h4, #la-casa .floor-tag,
#financiacion h2, #financiacion h3, #financiacion .plan-initial b, #financiacion .pay-line b,
footer h5{
  font-family:'Quicksand',sans-serif !important; letter-spacing:.01em; font-weight:700;
}

/* ---------- MODAL AGENDAR VISITA ---------- */
.ag-overlay{
  position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center;
  background:rgba(4,10,7,.8); backdrop-filter:blur(6px); padding:20px;
}
.ag-overlay.open{display:flex;}
.ag-modal{
  position:relative; width:100%; max-width:430px; max-height:92vh; overflow-y:auto;
  background:linear-gradient(163deg, rgba(30,61,42,.96) 0%, rgba(10,31,22,.99) 62%);
  border:1px solid rgba(230,205,148,.35); border-radius:var(--radius); padding:28px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95), 0 0 70px -22px rgba(201,161,90,.5);
  color:var(--cream); color-scheme:dark;
  font-family:'Nunito',sans-serif;
  animation:agIn .3s ease;
}
@keyframes agIn{from{opacity:0; transform:translateY(16px) scale(.97);} to{opacity:1; transform:none;}}
.ag-modal h3{font-family:'Quicksand',sans-serif; font-size:24px; margin-bottom:6px; color:var(--cream);}
.ag-house{font-size:12.5px; color:var(--gold-light); margin-bottom:16px;}
.ag-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:var(--cream);
  cursor:pointer; font-size:13px;
}
.ag-close:hover{background:var(--gold); color:var(--pine-950);}

.ag-cal{background:rgba(6,18,12,.6); border:1px solid rgba(255,255,255,.15); border-radius:14px; padding:14px; margin-bottom:14px;}
.ag-cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.ag-cal-head span{font-weight:800; font-size:14px; color:var(--gold-light);}
.ag-nav{
  width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06); color:var(--cream); cursor:pointer; font-size:15px;
}
.ag-nav:hover{background:var(--gold); color:var(--pine-950);}
.ag-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; text-align:center;}
.ag-dow span{font-size:10.5px; font-weight:800; color:var(--cream-dim); text-transform:uppercase;}
.ag-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.ag-day{
  aspect-ratio:1; border-radius:9px; border:1px solid transparent; background:rgba(255,255,255,.05);
  color:var(--cream); font-size:12.5px; font-weight:700; cursor:pointer; transition:all .13s;
}
.ag-day:hover{border-color:var(--gold); transform:translateY(-1px);}
.ag-day.off{opacity:.25; cursor:not-allowed; background:transparent;}
.ag-day.sel{background:var(--gold); color:var(--pine-950); box-shadow:0 0 16px -4px rgba(201,161,90,.7);}

.ag-slots-wrap{margin-bottom:16px;}
.ag-slots-title{font-size:12.5px; font-weight:800; color:var(--cream); margin-bottom:9px;}
.ag-slots-title small{font-weight:600; color:var(--cream-dim);}
.ag-slots{display:grid; grid-template-columns:repeat(4,1fr); gap:7px;}
@media(max-width:420px){.ag-slots{grid-template-columns:repeat(3,1fr);}}
.ag-slot{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:9px 4px; border-radius:10px; cursor:pointer; transition:all .13s;
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.18);
  color:var(--cream); font-size:12px; font-weight:800;
}
.ag-slot:hover{border-color:var(--gold); transform:translateY(-1px);}
.ag-slot.sel{background:var(--gold); border-color:var(--gold); color:var(--pine-950); box-shadow:0 0 16px -4px rgba(201,161,90,.7);}
.ag-slot.taken{opacity:.35; cursor:not-allowed; text-decoration:line-through;}
.ag-slot.taken small{font-size:9px; text-decoration:none; color:#f5a3a3; font-weight:700;}
.ag-confirm{
  margin-bottom:12px; padding:14px 16px; border-radius:12px; text-align:center;
  background:rgba(62,207,122,.13); border:1px solid rgba(62,207,122,.45);
  font-size:13px; color:var(--cream); line-height:1.6;
  box-shadow:0 0 24px -8px rgba(62,207,122,.4);
}
.ag-confirm b{color:#8fe7b4;}
.ag-confirm small{color:var(--cream-dim);}
.ag-modal .field input{
  background:rgba(6,18,12,.65); border:1px solid rgba(255,255,255,.2); color:var(--cream);
}
.ag-modal .field input::placeholder{color:rgba(246,241,231,.42);}
.ag-modal .field label{color:var(--cream-dim);}
.ag-resumen{margin-bottom:12px;}
.ag-resumen .pay-line b{color:var(--gold-light);}

/* Botón desplegable de la agenda */
.ag-toggle{
  display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  position:relative; padding:0; color:inherit; font-family:inherit;
}
.ag-toggle h3{font-family:'Quicksand',sans-serif; font-size:clamp(22px,2.6vw,30px); color:var(--cream); margin:10px 0 0; padding-right:52px;}
.ag-toggle .pay-badge{margin-bottom:0;}
.ag-chev{
  position:absolute; top:50%; right:2px; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(230,205,148,.45); color:var(--gold-light); font-size:17px;
  transition:transform .25s ease, background .2s;
}
.ag-toggle:hover .ag-chev{background:var(--gold); color:var(--pine-950);}
.agenda-card.open .ag-chev{transform:translateY(-50%) rotate(180deg);}
.ag-body{display:none;}
.agenda-card.open .ag-body{display:block; animation:agBodyIn .35s ease;}
.agenda-card.open .ag-toggle{margin-bottom:14px;}
@keyframes agBodyIn{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;}}

/* Agenda visible en la página (tarjeta junto a "Separa tu casa") */
.agenda-card .field input{
  background:rgba(6,18,12,.65); border:1px solid rgba(255,255,255,.2); color:var(--cream);
}
.agenda-card .field input::placeholder{color:rgba(246,241,231,.42);}
.agenda-card .ag-cal{margin-bottom:16px;}

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:200;
  width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -10px rgba(37,211,102,.7); transition:transform .18s;
}
.wa-float:hover{transform:translateY(-3px) scale(1.05);}

/* =====================================================================
   PANEL DE ADMINISTRACIÓN DE ESTADOS  (js/admin.js)
   Se abre con #admin en la dirección, o con Ctrl/Cmd + Shift + A.
   ===================================================================== */
.admin-panel{
  position:fixed; inset:0; z-index:400; display:none;
  background:rgba(6,14,10,.72); backdrop-filter:blur(6px);
  padding:24px; overflow-y:auto;
}
.admin-panel.open{display:flex; align-items:flex-start; justify-content:center;}
.admin-box{
  width:100%; max-width:560px; margin:auto;
  background:var(--pine-950); color:var(--cream);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  animation:cardIn .28s ease;
}
.admin-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:22px 24px 16px; border-bottom:1px solid rgba(255,255,255,.1);
}
.admin-head h3{font-family:'Fraunces',serif; font-size:21px;}
.admin-head p{font-size:12px; color:var(--cream-dim); margin-top:6px; display:flex; align-items:center; flex-wrap:wrap;}
.admin-head p i{
  width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:5px; margin-left:2px;
}
.admin-head p i.d{background:var(--st-green);}
.admin-head p i.s{background:var(--st-yellow);}
.admin-head p i.v{background:var(--st-red);}
.admin-dirty{color:var(--gold-light); font-weight:600;}
.admin-x{
  background:none; border:1px solid rgba(255,255,255,.2); color:var(--cream);
  width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:14px; flex:0 0 auto;
}
.admin-x:hover{background:rgba(255,255,255,.08);}

.admin-list{max-height:52vh; overflow-y:auto; padding:8px 24px;}
.admin-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07);
}
.admin-row:last-child{border-bottom:0;}
.admin-row.flash{animation:adminFlash .7s ease;}
@keyframes adminFlash{
  0%{background:rgba(230,205,148,.18);}
  100%{background:transparent;}
}
.admin-name b{display:block; font-family:'Fraunces',serif; font-size:15.5px;}
.admin-name span{display:block; font-size:10.5px; color:var(--cream-dim); margin-top:1px;}
.admin-seg{display:flex; gap:5px; flex:0 0 auto;}
.admin-seg .seg{
  font-family:inherit; font-size:11px; font-weight:600; cursor:pointer;
  padding:7px 11px; border-radius:999px; letter-spacing:.01em;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  color:var(--cream-dim); transition:all .15s;
}
.admin-seg .seg:hover{background:rgba(255,255,255,.1); color:var(--cream);}
.admin-seg .seg.disponible.on{background:rgba(62,207,122,.18); border-color:var(--st-green); color:#8fe7b4;}
.admin-seg .seg.separado.on{background:rgba(245,181,46,.18); border-color:var(--st-yellow); color:#ffd98a;}
.admin-seg .seg.vendido.on{background:rgba(224,82,82,.18); border-color:var(--st-red); color:#f0a0a0;}

.admin-note{
  margin:4px 24px 0; padding:12px 14px; border-radius:12px; font-size:12px; line-height:1.55;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:var(--cream-dim);
}
.admin-note.ok{background:rgba(62,207,122,.12); border-color:rgba(62,207,122,.4); color:#a8eec5;}
.admin-note code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px;
  background:rgba(0,0,0,.35); padding:1px 5px; border-radius:4px; color:var(--gold-light);
}
.admin-actions{display:flex; gap:10px; padding:16px 24px 22px;}
.admin-actions .btn{flex:1; padding:13px 18px; font-size:13.5px;}

@media(max-width:560px){
  .admin-panel{padding:12px;}
  .admin-row{flex-direction:column; align-items:stretch; gap:9px;}
  .admin-seg{width:100%;}
  .admin-seg .seg{flex:1; text-align:center; padding:9px 4px;}
  .admin-list{max-height:none; padding:8px 18px;}
  .admin-head, .admin-actions{padding-left:18px; padding-right:18px;}
  .admin-note{margin-left:18px; margin-right:18px;}
  .admin-actions{flex-direction:column;}
}

/* Botón de entrada al administrador, discreto en el pie de página */
.admin-link{
  display:inline-block; margin-left:14px; font-family:inherit; font-size:12px;
  background:transparent; border:1px solid rgba(255,255,255,.18); color:inherit;
  padding:4px 12px; border-radius:999px; cursor:pointer; opacity:.75;
  transition:opacity .15s, border-color .15s, color .15s;
}
.admin-link:hover{opacity:1; border-color:var(--gold); color:var(--gold-light);}
@media(max-width:560px){ .admin-link{display:block; margin:12px auto 0;} }

/* Barra de estado de la sincronización, dentro del panel */
.admin-sync{
  display:flex; align-items:flex-start; gap:11px;
  margin:14px 24px 4px; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
}
.admin-sync b{display:block; font-size:13px; color:var(--cream);}
.admin-sync small{display:block; font-size:11.5px; line-height:1.5; color:var(--cream-dim); margin-top:3px;}
.admin-sync code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  background:rgba(0,0,0,.35); padding:1px 5px; border-radius:4px; color:var(--gold-light);
}
.admin-sync .sdot{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto; margin-top:4px;
  background:var(--gray);
}
.admin-sync.ok{background:rgba(62,207,122,.1); border-color:rgba(62,207,122,.35);}
.admin-sync.ok .sdot{background:var(--st-green); animation:livePulse 2s infinite;}
.admin-sync.wait{background:rgba(245,181,46,.1); border-color:rgba(245,181,46,.35);}
.admin-sync.wait .sdot{background:var(--st-yellow);}
.admin-sync.bad{background:rgba(224,82,82,.1); border-color:rgba(224,82,82,.35);}
.admin-sync.bad .sdot{background:var(--st-red);}
.sync-btn{
  flex:0 0 auto; align-self:center; font-family:inherit; font-size:12px; font-weight:600;
  padding:8px 14px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:var(--cream);
}
.sync-btn:hover{background:rgba(255,255,255,.16);}
@media(max-width:560px){
  .admin-sync{margin-left:18px; margin-right:18px; flex-wrap:wrap;}
  .sync-btn{width:100%; margin-top:4px;}
}

/* Estado de carga del recorrido 360°.
   Hasta que la primera imagen no tenga tamaño real, la cinta no se mueve
   y los controles quedan ocultos (antes la brújula giraba enloquecida). */
.pano-loading{
  position:absolute; inset:0; z-index:3; display:flex;
  align-items:center; justify-content:center; gap:10px;
  background:var(--pine-950); color:var(--cream-dim);
  font-size:12.5px; letter-spacing:.05em;
  transition:opacity .5s ease; pointer-events:none;
}
.pano-loading span{
  width:15px; height:15px; border-radius:50%; display:inline-block;
  border:2px solid rgba(230,205,148,.25); border-top-color:var(--gold-light);
  animation:panoSpin .8s linear infinite;
}
@keyframes panoSpin{ to{ transform:rotate(360deg); } }
.pano-ready .pano-loading{opacity:0;}

/* controles ocultos mientras carga */
.compass, .pano-scrub, .pano-now{opacity:0; transition:opacity .5s ease .15s;}
.pano-ready ~ .pano-now,
.pano-ready ~ .compass,
.pano-ready ~ .pano-scrub{opacity:1;}


/* Cuando ninguna imagen del recorrido logra cargar */
.pano-fallo .pano-loading{opacity:1 !important;}
.pano-loading.error{color:#f0a0a0; text-align:center; padding:0 24px; line-height:1.5;}
.pano-loading.error span{display:none;}
.pano-panel.fallo{display:none;}