.ci-wrap{--ci-bg:#F7F4EE;--ci-bg2:#F0ECE1;--ci-surface:#FFFFFF;--ci-ink:#1D1B16;--ci-muted:#78715F;--ci-accent:#A9722E;--ci-accent-ink:#FFFFFF;--ci-line:#E6E0D2;--ci-shadow:0 1px 2px rgba(29,27,22,0.04),0 8px 24px rgba(29,27,22,0.06);}
@media (prefers-color-scheme: dark){.ci-wrap{--ci-bg:#14130F;--ci-bg2:#1A1812;--ci-surface:#1C1A15;--ci-ink:#F3EFE6;--ci-muted:#A69C89;--ci-accent:#C68A42;--ci-accent-ink:#14130F;--ci-line:#322E22;--ci-shadow:0 1px 2px rgba(0,0,0,0.3),0 12px 32px rgba(0,0,0,0.4);}}
.ci-wrap{background:var(--ci-bg);color:var(--ci-ink);font-family:'Inter Tight','Avenir Next',-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;margin:0 calc(-50vw + 50%);padding:6.5rem 0 4.5rem;}
.ci-wrap *{box-sizing:border-box;}
.ci-wrap h2,.ci-wrap .ci-display{font-family:Fraunces,Georgia,'Iowan Old Style','Palatino Linotype',serif;font-weight:480;letter-spacing:-0.01em;margin:0;}
.ci-eyebrow{font-family:'Inter Tight',sans-serif;text-transform:uppercase;letter-spacing:0.14em;font-size:0.72rem;font-weight:600;color:var(--ci-accent);}
.ci-hero{max-width:1180px;margin:0 auto;padding:0 2rem;}
.ci-hero img{width:100%;height:62vh;min-height:420px;max-height:620px;object-fit:cover;border-radius:2px;display:block;}
.ci-title-block{max-width:1180px;margin:-4.5rem auto 0;padding:0 2rem;position:relative;z-index:2;}
.ci-card{background:var(--ci-surface);box-shadow:var(--ci-shadow);padding:2.6rem clamp(1.5rem,4vw,3.2rem);max-width:640px;}
.ci-card .ci-eyebrow{margin-bottom:0.6rem;}
.ci-card h2{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:0.4rem;}
.ci-card .ci-loc{color:var(--ci-muted);font-size:0.98rem;margin-bottom:1.4rem;}
.ci-price{font-family:Fraunces,serif;font-size:1.5rem;font-weight:500;}
.ci-price small{font-family:'Inter Tight',sans-serif;font-size:0.7rem;color:var(--ci-muted);display:block;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.2rem;font-weight:600;}
.ci-specs-strip{max-width:1180px;margin:3.5rem auto 0;padding:1.8rem 2rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;border-top:1px solid var(--ci-line);border-bottom:1px solid var(--ci-line);}
.ci-specs-strip div{text-align:center;}
.ci-specs-strip .ci-num{font-family:Fraunces,serif;font-size:1.5rem;display:block;}
.ci-specs-strip .ci-lbl{font-size:0.72rem;color:var(--ci-muted);text-transform:uppercase;letter-spacing:0.08em;}
.ci-body{max-width:640px;margin:3.5rem auto 0;padding:0 2rem;}
.ci-body p{line-height:1.75;color:var(--ci-ink);font-size:1rem;margin-bottom:1.2rem;}
.ci-carousel{max-width:900px;margin:3.5rem auto 0;padding:0 2rem;}
.ci-carousel-viewport{overflow:hidden;border-radius:3px;position:relative;}
.ci-carousel-track{display:flex;transition:transform .45s cubic-bezier(.65,0,.35,1);}
.ci-carousel-track img{width:100%;flex:0 0 100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.ci-carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:var(--ci-surface);border:1px solid var(--ci-line);width:2.6rem;height:2.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--ci-shadow);color:var(--ci-ink);font-size:1.1rem;line-height:1;padding:0;}
.ci-carousel-btn:hover{border-color:var(--ci-accent);color:var(--ci-accent);}
.ci-carousel-btn:focus-visible{outline:2px solid var(--ci-accent);outline-offset:2px;}
.ci-prev{left:0.9rem;} .ci-next{right:0.9rem;}
.ci-dots{display:flex;justify-content:center;gap:0.5rem;margin-top:1.1rem;}
.ci-dot{width:7px;height:7px;border-radius:50%;background:var(--ci-line);border:none;cursor:pointer;padding:0;transition:background .2s ease,transform .2s ease;}
.ci-dot:hover{background:var(--ci-muted);}
.ci-dot.active{background:var(--ci-accent);transform:scale(1.3);}
.ci-cta{text-align:center;padding:4rem 2rem 1rem;margin-top:1rem;border-top:1px solid var(--ci-line);background:var(--ci-bg2);}
.ci-cta p{color:var(--ci-muted);margin:0 0 1.2rem;font-size:0.92rem;}
.ci-btn{display:inline-block;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:0.9rem;letter-spacing:0.08em;padding:0.95rem 2.1rem;background:linear-gradient(180deg,#4A2C17,#3A2211);border:1px solid #C9A961;color:#F5F0E8;border-radius:6px;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,0.15);transition:background .2s ease,color .2s ease;}
.ci-btn:hover{background:#C9A961;color:#1A1A1A;}
.ci-advisor{max-width:640px;margin:3rem auto 0;padding:1.6rem 2rem;display:flex;align-items:center;gap:1rem;border-top:1px solid var(--ci-line);}
.ci-advisor img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.ci-advisor .ci-advisor-name{font-weight:600;font-size:0.92rem;}
.ci-advisor .ci-advisor-role{color:var(--ci-muted);font-size:0.8rem;}
.ci-advisor a{color:var(--ci-accent);text-decoration:none;font-size:0.8rem;font-weight:600;}
@media (max-width:860px){.ci-specs-strip{grid-template-columns:repeat(2,1fr);}}

/* ---- Header: fondo semi-opaco SIEMPRE activo (no depende de la foto de
   fondo ni de un degradado), solido al hacer scroll. El tema Kadence no
   solo pone #masthead en background:transparent - tambien fuerza a
   transparente 3 divs internos (site-top/main/bottom-header-wrap >
   site-header-row-container-inner), que son los que realmente pintan la
   fila visible del menu. La regla anterior solo cubria #masthead y por
   eso el fondo seguia sin verse: el contraste seguia dependiendo de la
   foto de fondo a traves de esos 3 divs transparentes. Se sobreescriben
   los 4 elementos explicitamente, en ambos estados (normal y con scroll). */
.site-header,
.site-header .site-top-header-wrap .site-header-row-container-inner,
.site-header .site-main-header-wrap .site-header-row-container-inner,
.site-header .site-bottom-header-wrap .site-header-row-container-inner{
  background:rgba(20,19,15,0.42) !important;
  transition:background .25s ease,box-shadow .25s ease;
}
.site-header.inmova-scrolled,
.site-header.inmova-scrolled .site-top-header-wrap .site-header-row-container-inner,
.site-header.inmova-scrolled .site-main-header-wrap .site-header-row-container-inner,
.site-header.inmova-scrolled .site-bottom-header-wrap .site-header-row-container-inner{
  background:#FFFFFF !important;
}
.site-header.inmova-scrolled{box-shadow:0 1px 2px rgba(29,27,22,0.06),0 6px 18px rgba(29,27,22,0.06);}

/* ---- Paginas de propiedad: menu reducido ---- */
body.inmova-property-page .main-navigation .menu-item:not(.inmova-menu-keep){display:none !important;}
body.inmova-property-page .inmova-header-whatsapp{display:inline-flex !important;align-items:center;gap:0.4rem;background:var(--ci-accent,#A9722E);color:#fff;padding:0.55rem 1.1rem;border-radius:6px;font-size:0.82rem;font-weight:600;text-decoration:none;letter-spacing:0.03em;}
.inmova-header-whatsapp{display:none;}

/* ==================================================================
   DINAMISMO SUTIL (activado solo en body.inmova-animated)
   ================================================================== */

/* Barra de progreso de scroll */
body.inmova-animated .inmova-progress-bar{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--ci-accent);z-index:9999;transition:width .1s linear;}

/* Parallax cinematico del hero (GSAP ScrollTrigger, scrub) */
body.inmova-animated .ci-hero{overflow:hidden;}
body.inmova-animated .ci-hero img{will-change:transform;transform:translateY(0);}
body.inmova-animated .ci-title-block{will-change:transform;}

/* Fade-in progresivo por seccion. Se aplica directo sobre las secciones
   (gateado solo por body.inmova-animated, que ya viene renderizado por PHP
   desde el primer HTML) para que el estado oculto exista ANTES de que el
   JS corra, evitando un parpadeo de "aparece y luego desaparece". El JS
   solo necesita agregar .ci-visible cuando la seccion entra al viewport. */
body.inmova-animated .ci-specs-strip,
body.inmova-animated .ci-body,
body.inmova-animated .ci-carousel,
body.inmova-animated .ci-cta,
body.inmova-animated .ci-share{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1);
}
body.inmova-animated .ci-specs-strip.ci-visible,
body.inmova-animated .ci-body.ci-visible,
body.inmova-animated .ci-carousel.ci-visible,
body.inmova-animated .ci-cta.ci-visible,
body.inmova-animated .ci-share.ci-visible{
  opacity:1;transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  body.inmova-animated .ci-specs-strip,
  body.inmova-animated .ci-body,
  body.inmova-animated .ci-carousel,
  body.inmova-animated .ci-cta,
  body.inmova-animated .ci-share{opacity:1;transform:none;transition:none;}
  body.inmova-animated .ci-hero img{transform:none !important;}
  body.inmova-animated .ci-title-block{transform:none !important;}
  body.inmova-animated .ci-carousel-track img{transform:none !important;}
}
/* Expansion cinematica de las fotos de galeria (GSAP ScrollTrigger, scrub
   ligado a la posicion de scroll - reemplaza el zoom por hover anterior) */
body.inmova-animated .ci-carousel-track img{will-change:transform;}

/* Contador animado (el numero se anima via JS; solo aseguramos tabular-nums para que no salte el ancho) */
body.inmova-animated .ci-specs-strip .ci-num{font-variant-numeric:tabular-nums;}

/* Boton "Compartir con alguien" - variante outline del CTA principal, mismo sistema de color */
.ci-share{text-align:center;padding:1.5rem 2rem 3.5rem;background:var(--ci-bg2);border-top:1px solid var(--ci-line);}
.ci-share p{color:var(--ci-muted);margin:0 0 1rem;font-size:0.86rem;}
/* .ci-btn-outline: sin overrides propios - hereda el estilo unificado de .ci-btn */