/* =========================================================================
   NÚCLEO ESPACIOS — premium.css
   Capa de motion design adaptada de Monte Líbano 255. Se carga DESPUÉS de
   styles.css y solo refina: mismas curvas, loader de marca, header que
   pasa a verde bosque, hairlines champagne y entradas en cascada.

   Para desactivarla: quitar del HTML el <link> a premium.css y el
   <script> de premium.js. El sitio queda intacto.
   ========================================================================= */

/* 1. TOKENS DE MOVIMIENTO ------------------------------------------------ */
:root{
  --ease-soft: cubic-bezier(.25,.46,.30,1);
  --ease-out:  cubic-bezier(.16,.84,.44,1);
  --t-reveal:  940ms;
  --t-hover:   380ms;
  --t-header:  420ms;
  --stagger:   120ms;
}

/* 2. PANTALLA DE CARGA --------------------------------------------------- */
#ne-loader{ display:none; }
.ne-preload body{ overflow:hidden; }
.ne-loader-on #ne-loader{
  display:flex; align-items:center; justify-content:center;
  position:fixed; inset:0; z-index:9000;
  background: var(--c-forest-dark);
  transition: opacity 1000ms var(--ease-soft);
}
.ne-loader-on #ne-loader.is-out{ opacity:0; pointer-events:none; }
.ne-loader-inner{ display:flex; flex-direction:column; align-items:center; gap:20px; transition: transform 1000ms var(--ease-soft); }
#ne-loader.is-out .ne-loader-inner{ transform: translateY(-8px); }
.ne-loader-mark{
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(251,249,244,.45);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-serif); font-size:17px; letter-spacing:.04em;
  color: var(--c-bg);
  opacity:0; animation: neLoaderIn 800ms var(--ease-out) 60ms forwards;
}
.ne-loader-word{
  font-size:10.5px; letter-spacing:.34em; font-weight:600; padding-left:.34em;
  color: rgba(251,249,244,.60); text-transform:uppercase;
  opacity:0; animation: neLoaderIn 800ms var(--ease-out) 240ms forwards;
}
.ne-loader-rule{ display:block; width:180px; max-width:44vw; height:1px; background: rgba(251,249,244,.16); overflow:hidden; }
.ne-loader-rule i{
  display:block; height:100%; width:100%;
  background: var(--c-champagne);
  transform: scaleX(0); transform-origin:left;
  animation: neLoaderRule 1100ms var(--ease-soft) 200ms forwards;
}
@keyframes neLoaderIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes neLoaderRule{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }

/* El contenido del hero espera a que el velo se disuelva */
.ne-preload .hero .reveal{ opacity:0; transform: translateY(24px); filter: blur(6px); }

/* 3. ENTRADAS -----------------------------------------------------------
   El contenido es visible por defecto. premium.js solo marca como
   .ne-pending lo que está debajo del primer pantallazo, y lo libera al
   entrar en pantalla: sin JS todo se ve siempre. */
.reveal{
  transition:
    opacity   var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out),
    filter    760ms           var(--ease-out);
  transition-delay: calc(var(--d, 0) * var(--stagger));
}
.reveal.ne-pending{ opacity:0; transform: translateY(20px); filter: blur(6px); }

.ne-stagger > *{
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.ne-stagger.ne-pending > *{ opacity:0; transform: translateY(18px); }

/* 4. HEADER DINÁMICO ----------------------------------------------------- */
.site-header{
  transition:
    background-color var(--t-header) var(--ease-soft),
    border-color     var(--t-header) var(--ease-soft),
    box-shadow       var(--t-header) var(--ease-soft);
}
.header-inner{ transition: height var(--t-header) var(--ease-soft); }
.site-header.is-scrolled{
  background: var(--c-forest-dark);
  border-bottom-color: rgba(251,249,244,.10);
  box-shadow: 0 8px 30px rgba(19,42,30,.18);
}
.site-header.is-scrolled .header-inner{ height: 62px; }
.site-header .brand-mark, .site-header .brand-text, .site-header .main-nav > a,
.site-header .main-nav > .nav-link, .site-header .nav-toggle{
  transition: color var(--t-header) var(--ease-soft), border-color var(--t-header) var(--ease-soft);
}
.site-header.is-scrolled .brand-mark{ border-color: rgba(251,249,244,.5); color: var(--c-bg); }
.site-header.is-scrolled .brand-text{ color: var(--c-bg); }
.site-header.is-scrolled .brand-text em{ color: rgba(251,249,244,.6); }
.site-header.is-scrolled .nav-toggle{ color: var(--c-bg); }
.site-header.is-scrolled .main-nav > a,
.site-header.is-scrolled .main-nav > .nav-link{ color: rgba(251,249,244,.80); }
.site-header.is-scrolled .main-nav > a:hover,
.site-header.is-scrolled .main-nav > .nav-link:hover{ color: var(--c-white); }
.site-header.is-scrolled .main-nav > a::after,
.site-header.is-scrolled .main-nav > .nav-link::after{ background: var(--c-champagne); }
.site-header.is-scrolled .btn-primary{ background: var(--c-bg); color: var(--c-forest-dark); }
.site-header.is-scrolled .btn-primary:hover{ background: var(--c-white); }

@media (max-width: 900px){
  .site-header.is-scrolled .header-inner{ height: var(--header-h); }
  .site-header.is-scrolled .main-nav > a,
  .site-header.is-scrolled .main-nav > .nav-link{ color: var(--c-ink); }
  .site-header.is-scrolled .main-nav .btn-primary{ background: var(--c-forest); color: var(--c-white); }
}

/* 5. BOTONES ------------------------------------------------------------- */
.btn{
  position:relative;
  transition:
    background-color var(--t-hover) var(--ease-soft),
    color            var(--t-hover) var(--ease-soft),
    border-color     var(--t-hover) var(--ease-soft),
    box-shadow       var(--t-hover) var(--ease-soft),
    transform        var(--t-hover) var(--ease-soft);
}
.btn .ic{ transition: transform var(--t-hover) var(--ease-soft); }
.btn-primary::after, .btn-light::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--c-champagne);
  transform: scaleX(0); transform-origin:left;
  transition: transform 560ms var(--ease-out);
}
@media (hover: hover){
  .btn:hover .ic{ transform: translateX(3px); }
  .btn-primary:hover, .btn-light:hover{ transform: translateY(-2px); }
  .btn-primary:hover::after, .btn-light:hover::after{ transform: scaleX(1); }
  .btn-outline:hover{ border-color: var(--c-champagne-dark); color: var(--c-ink); }
  .btn-ghost-light:hover{ border-color: var(--c-champagne); }
}
.sticky-cta .btn:active{ transform: scale(.985); }

/* 6. LÍNEAS ARQUITECTÓNICAS --------------------------------------------- */
.section-title{ position:relative; }
.section-title::after{
  content:""; position:absolute; left:0; bottom:-12px;
  width:56px; height:1px; background: var(--c-champagne);
  transform: scaleX(1); transform-origin:left;
  transition: transform 1000ms var(--ease-out);
  transition-delay: calc((var(--d, 0) * var(--stagger)) + 260ms);
}
.section-title.ne-pending::after{ transform: scaleX(0); }
.final-title::after{ display:none; }

.building, .levels, .quote, .spaces, .positioning, .location{ position:relative; }
.building::before, .levels::before, .quote::before, .spaces::before, .positioning::before, .location::before{
  content:""; position:absolute; top:0; left: var(--gutter); right: var(--gutter);
  height:1px; background: var(--c-champagne); opacity:.34;
  transform: scaleX(1); transform-origin:left;
  transition: transform 1600ms var(--ease-out);
  pointer-events:none;
}
.ne-rule-pending::before{ transform: scaleX(0) !important; }

/* 7. TARJETAS ------------------------------------------------------------ */
.space-card{
  position:relative;
  transition: transform 620ms var(--ease-soft), box-shadow 620ms var(--ease-soft), border-color 620ms var(--ease-soft);
}
.space-card::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
  background: var(--c-champagne);
  transform: scaleX(0); transform-origin:left;
  transition: transform 620ms var(--ease-out);
}
.space-card-media svg{ transition: transform 1100ms var(--ease-soft); }
.space-card-name{ transition: transform 520ms var(--ease-soft); }
@media (hover: hover){
  .space-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); }
  .space-card:hover::after{ transform: scaleX(1); }
  .space-card:hover .space-card-media svg{ transform: scale(1.03); }
  .space-card:hover .space-card-name{ transform: translateX(3px); }
}

.qr-amount, .plate-grid i{ font-variant-numeric: tabular-nums; }
.qr-amount.ne-tick{ animation: neTick 420ms var(--ease-out); }
@keyframes neTick{ from{ opacity:.55; transform: translateY(4px); } to{ opacity:1; transform:none; } }

.timeline-step{ position:relative; transition: background-color 620ms var(--ease-soft); }
.timeline-step::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background: var(--c-champagne);
  transform: scaleX(0); transform-origin:left;
  transition: transform 720ms var(--ease-out);
}
@media (hover: hover){ .timeline-step:hover::before{ transform: scaleX(1); } }

.benefit{ transition: border-color var(--t-hover) var(--ease-soft); }
@media (hover: hover){ .benefit:hover{ border-top-color: var(--c-champagne-dark); } }

.footer-col a, .footer-col button{ transition: color var(--t-hover) var(--ease-soft), transform var(--t-hover) var(--ease-soft); }
@media (hover: hover){ .footer-col a:hover, .footer-col button:hover{ transform: translateX(3px); } }

.overlay-panel{ transition: transform 560ms var(--ease-out), opacity 560ms var(--ease-out); }

/* 8. PREFERS-REDUCED-MOTION --------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.ne-pending, .ne-stagger > *, .ne-stagger.ne-pending > *{
    opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;
  }
  .ne-preload .hero .reveal{ opacity:1; transform:none; filter:none; }
  .section-title::after, .building::before, .levels::before, .quote::before, .spaces::before, .positioning::before, .location::before{ transform: scaleX(1) !important; transition:none; }
  .qr-amount.ne-tick{ animation:none; }
  .space-card, .btn, .overlay-panel, .header-inner{ transition:none; }
  .ne-loader-mark, .ne-loader-word, .ne-loader-rule i{ animation:none; opacity:1; transform:none; }
}