/* =========================================================================
   SEALED BID — MONTE LÍBANO 255 — premium.css
   CAPA DE MOTION DESIGN — se carga DESPUÉS de cliente.css y solo refina.
   No redefine la identidad visual: reutiliza los tokens ya existentes
   (--c-forest, --c-champagne, --c-bg…) declarados en cliente.css.

   Para desactivar por completo esta capa: eliminar del HTML el <link> a
   premium.css y el <script> de premium.js. El sitio queda intacto.

   ÍNDICE
   1.  Tokens de movimiento
   2.  Pantalla de carga (loader de marca)
   3.  Hero cinematográfico
   4.  Scroll reveal refinado (fade + desplazamiento + blur)
   5.  Cascada de rejillas generadas por JS
   6.  Header dinámico
   7.  Botones premium
   8.  Líneas arquitectónicas (títulos y secciones)
   9.  Tarjetas de espacios
   10. Galería / renders / planos
   11. Detalles finos (amenidades, timeline, cifras, footer)
   12. prefers-reduced-motion
   ========================================================================= */

/* ---------------------------------------------------------------------
   1. TOKENS DE MOVIMIENTO
   --------------------------------------------------------------------- */
:root{
  /* Curvas lentas, sin rebote — lenguaje editorial, no tecnológico */
  --ease-soft:  cubic-bezier(.25,.46,.30,1);
  --ease-out:   cubic-bezier(.16,.84,.44,1);

  --t-reveal:   940ms;   /* entrada de contenido al hacer scroll */
  --t-hover:    380ms;   /* microinteracciones de hover */
  --t-header:   420ms;   /* transición del header */
  --t-cine:    2400ms;   /* entrada cinematográfica del hero */

  --stagger:    120ms;   /* paso de la cascada: título → subtítulo → contenido */
}

/* ---------------------------------------------------------------------
   2. PANTALLA DE CARGA — logotipo + línea champagne
   Solo se muestra si premium.js marcó <html class="ml-preload">.
   Sin JS no aparece nunca (la página nunca queda bloqueada).
   --------------------------------------------------------------------- */
#ml-loader{ display:none; }

/* .ml-preload  → retiene la cascada del hero y bloquea el scroll
   .ml-loader-on → mantiene el velo en pantalla (se retira después del fade,
                   por eso son dos clases distintas y no una) */
.ml-preload body{ overflow:hidden; }

.ml-loader-on #ml-loader{
  display:flex; align-items:center; justify-content:center;
  position:fixed; inset:0; z-index:9000;
  background: var(--c-forest-dark);
  opacity:1;
  transition: opacity 1100ms var(--ease-soft);
}
.ml-loader-on #ml-loader.is-out{ opacity:0; pointer-events:none; }

.ml-loader-inner{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  transform: translateY(0);
  transition: transform 1100ms var(--ease-soft);
}
#ml-loader.is-out .ml-loader-inner{ transform: translateY(-8px); }

.ml-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: mlLoaderIn 900ms var(--ease-out) 80ms forwards;
}
.ml-loader-word{
  font-size:10.5px; letter-spacing:.34em; font-weight:600;
  color: rgba(251,249,244,.60); text-transform:uppercase;
  padding-left:.34em; /* compensa el letter-spacing final */
  opacity:0;
  animation: mlLoaderIn 900ms var(--ease-out) 300ms forwards;
}
.ml-loader-rule{
  display:block; width:180px; max-width:44vw; height:1px;
  background: rgba(251,249,244,.16); overflow:hidden;
}
.ml-loader-rule i{
  display:block; height:100%; width:100%;
  background: var(--c-champagne);
  transform: scaleX(0); transform-origin:left;
  animation: mlLoaderRule 1500ms var(--ease-soft) 260ms forwards;
}

@keyframes mlLoaderIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes mlLoaderRule{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }

/* ---------------------------------------------------------------------
   3. HERO CINEMATOGRÁFICO
   La ilustración entra con un zoom lentísimo y respira de forma continua.
   El parallax de cursor/scroll ya existente (cliente.js) actúa sobre
   .hero-elevation-wrap y #heroBg — aquí solo se anima .hero-elevation,
   por lo que ninguna transformación se pisa con otra.
   --------------------------------------------------------------------- */
.hero-bg{ transition: opacity var(--t-cine) var(--ease-soft); }
.ml-preload .hero-bg{ opacity:0; }

.hero-elevation{ transition: transform var(--t-cine) var(--ease-soft); }
.ml-preload .hero-elevation{ transform: scale(1.07); }

/* Respiración: zoom continuo, imperceptible (26 s por ciclo) */
.ml-hero-ready .hero-elevation{
  animation: mlHeroBreath 26s ease-in-out 2600ms infinite alternate;
  transform-origin: 58% 54%;
}
@keyframes mlHeroBreath{ from{ transform: scale(1); } to{ transform: scale(1.045); } }

/* Encendido de niveles: mientras dura la secuencia inicial el fundido es
   más lento, para que se lea como iluminación progresiva y no como un
   cambio de estado. premium.js retira .ml-lighting al terminar, de modo
   que el hover conserva después su respuesta inmediata. */
.ml-lighting .hero-band .he-window{
  transition-duration: 820ms;
  transition-timing-function: var(--ease-out);
}

/* Velo de legibilidad — verde bosque muy diluido tras el texto del hero */
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(100deg,
    rgba(30,58,43,.07) 0%,
    rgba(30,58,43,.03) 34%,
    rgba(30,58,43,0) 62%);
}
.hero-inner{ z-index:2; }
.hero-scroll{ z-index:2; }

/* El contenido del hero permanece contenido mientras dura la carga:
   así la cascada arranca cuando el loader se disuelve, no antes. */
.ml-preload .hero .reveal{
  opacity:0;
  transform: translateY(24px);
  filter: blur(6px);
}

/* ---------------------------------------------------------------------
   4. SCROLL REVEAL REFINADO
   Se conserva la clase .reveal / .in-view que ya usa cliente.js.
   Se añade blur de entrada y una cascada real (premium.js asigna --d).
   --------------------------------------------------------------------- */
.reveal{
  transform: translateY(20px);
  filter: blur(6px);
  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.in-view{ transform: translateY(0); filter: blur(0); }

/* ---------------------------------------------------------------------
   5. CASCADA DE REJILLAS GENERADAS POR JS
   Las tarjetas, pasos del proceso y amenidades se crean desde config.js,
   por lo que no tienen clase .reveal. premium.js les añade .ml-stagger.
   La clase la pone JS: sin JS el contenido se ve siempre.
   --------------------------------------------------------------------- */
.ml-stagger > *{
  opacity:0;
  transform: translateY(18px);
  transition:
    opacity   var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.ml-stagger.is-in > *{ opacity:1; transform: translateY(0); }

/* Intercambio de contenido (cambio de nivel, de categoría, de plano) */
.ml-swap-in{ animation: mlSwapIn 720ms var(--ease-out) both; }
.ml-swap-in[style*="--i"]{ animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes mlSwapIn{
  from{ opacity:0; transform: translateY(12px) scale(.995); filter: blur(4px); }
  to{   opacity:1; transform:none; filter: blur(0); }
}

/* ---------------------------------------------------------------------
   6. HEADER DINÁMICO
   Transparente sobre el hero → verde bosque al hacer scroll.
   --------------------------------------------------------------------- */
.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);
}
.site-header:not(.is-scrolled){
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.site-header.is-scrolled{
  background: var(--c-forest-dark);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: rgba(251,249,244,.10);
  box-shadow: 0 8px 30px rgba(19,42,30,.18);
}

.header-inner{ transition: height var(--t-header) var(--ease-soft); }
.site-header.is-scrolled .header-inner{ height:62px; }

/* Inversión de color de los elementos del header al hacer scroll */
.site-header .brand-mark,
.site-header .brand-text,
.site-header .main-nav a,
.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 .nav-toggle{ color: var(--c-bg); }
.site-header.is-scrolled .main-nav > a{ color: rgba(251,249,244,.80); }
.site-header.is-scrolled .main-nav > a:hover{ color: var(--c-white); }
.site-header.is-scrolled .main-nav > a::after{ background: var(--c-champagne); }

/* El CTA se invierte para no perderse sobre el verde */
.site-header.is-scrolled .btn-primary{
  background: var(--c-bg); color: var(--c-forest-dark);
  box-shadow: none;
}
.site-header.is-scrolled .btn-primary:hover{
  background: var(--c-white);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

@media (max-width: 900px){
  /* CORRECCIÓN: backdrop-filter convierte al header en bloque contenedor de
     sus descendientes position:fixed. Eso dejaba el panel del menú móvil
     confinado a la altura del header en lugar de cubrir la pantalla.
     En móvil el header es opaco, así que el desenfoque no aporta nada. */
  .site-header,
  .site-header.is-scrolled{ backdrop-filter: none; }

  /* El panel móvil sigue la altura real del header */
  .site-header.is-scrolled .main-nav{ top:62px; }
  .site-header.is-scrolled .main-nav > a{ color: var(--c-graphite); }
  .site-header.is-scrolled .main-nav > a:hover{ color: var(--c-ink); }

  /* El panel desplegable es color crema: aquí el CTA conserva su verde
     (la inversión a crema solo aplica sobre la barra verde del header). */
  .site-header.is-scrolled .main-nav .btn-primary{
    background: var(--c-forest);
    color: var(--c-white);
  }
  .site-header.is-scrolled .main-nav .btn-primary:hover{
    background: var(--c-forest-dark);
  }
}

/* ---------------------------------------------------------------------
   7. BOTONES PREMIUM
   --------------------------------------------------------------------- */
.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); }

/* Línea champagne que se despliega bajo el botón sólido */
.btn-primary::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);
}

/* Borde champagne progresivo en los botones de contorno */
.btn-outline{ transition: border-color var(--t-hover) var(--ease-soft), color var(--t-hover) var(--ease-soft); }
.btn-ghost::after{ background: var(--c-champagne-dark); transition: transform var(--t-hover) var(--ease-out); }

@media (hover: hover){
  .btn:hover .ic{ transform: translateX(3px); }
  .btn-primary:hover{ transform: translateY(-2px); }
  .btn-primary: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{ transition: transform var(--t-hover) var(--ease-soft), box-shadow var(--t-hover) var(--ease-soft); }
.sticky-cta:active{ transform: scale(.985); }

/* ---------------------------------------------------------------------
   8. LÍNEAS ARQUITECTÓNICAS
   Hairlines de 1px que se despliegan — evocan plano y precisión.
   Van en posición absoluta: no alteran el espaciado existente.
   --------------------------------------------------------------------- */
.section-title{ position:relative; }
.section-title::after{
  content:""; position:absolute; left:0; bottom:-7px;
  width:56px; height:1px; background: var(--c-champagne);
  transform: scaleX(0); transform-origin:left;
  transition: transform 1000ms var(--ease-out);
  transition-delay: calc((var(--d, 0) * var(--stagger)) + 260ms);
}
.section-title.in-view::after{ transform: scaleX(1); }

/* Regla superior de sección — se traza al entrar la sección en pantalla */
.positioning, .explore, .spaces, .floorplans,
.renders, .amenities, .location, .process{ position:relative; }

.positioning::before, .explore::before, .spaces::before, .floorplans::before,
.renders::before, .amenities::before, .location::before, .process::before{
  content:""; position:absolute; top:0; left: var(--gutter); right: var(--gutter);
  height:1px; background: var(--c-champagne); opacity:.34;
  transform: scaleX(0); transform-origin:left;
  transition: transform 1600ms var(--ease-out);
  pointer-events:none;
}
.positioning.ml-in::before, .explore.ml-in::before, .spaces.ml-in::before,
.floorplans.ml-in::before, .renders.ml-in::before, .amenities.ml-in::before,
.location.ml-in::before, .process.ml-in::before{ transform: scaleX(1); }

/* ---------------------------------------------------------------------
   9. TARJETAS DE ESPACIOS
   --------------------------------------------------------------------- */
.space-card{
  position:relative;
  transition:
    transform    620ms var(--ease-soft),
    box-shadow   620ms var(--ease-soft),
    border-color 620ms var(--ease-soft);
}
/* Filete champagne superior */
.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{ overflow:hidden; }
.space-card-media svg, .space-card-media img{ transition: transform 1100ms var(--ease-soft); }
/* Velo verde bosque sobre la imagen */
.space-card-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(30,58,43,0) 40%, rgba(30,58,43,.12) 100%);
  opacity:0; transition: opacity 620ms var(--ease-soft);
}
.space-card-tag{ transition: transform 620ms var(--ease-soft); }
.space-card-name{ transition: transform 520ms var(--ease-soft); }

@media (hover: hover){
  .space-card:hover{ transform: translateY(-6px); }
  .space-card:hover::after{ transform: scaleX(1); }
  .space-card:hover .space-card-media svg, .space-card:hover .space-card-media img{ transform: scale(1.045); }
  .space-card:hover .space-card-media::after{ opacity:1; }
  .space-card:hover .space-card-tag{ transform: translateY(-2px); }
  .space-card:hover .space-card-name{ transform: translateX(3px); }
}

/* ---------------------------------------------------------------------
   10. GALERÍA / RENDERS / PLANOS
   --------------------------------------------------------------------- */
.render-item{ transition: transform 620ms var(--ease-soft), box-shadow 620ms var(--ease-soft); }
.render-item svg, .render-item img{ transition: transform 1300ms var(--ease-soft); }
.render-item::after{
  content:""; position:absolute; inset:10px; pointer-events:none;
  border:1px solid var(--c-champagne); opacity:0;
  transform: scale(1.02);
  transition: opacity 620ms var(--ease-soft), transform 620ms var(--ease-soft);
}
.render-item .render-label{ transition: transform 520ms var(--ease-soft); }

@media (hover: hover){
  .render-item:hover{ box-shadow: var(--shadow-lift); }
  .render-item:hover svg, .render-item:hover img{ transform: scale(1.06); }
  .render-item:hover::after{ opacity:.55; transform: scale(1); }
  .render-item:hover .render-label{ transform: translateY(-3px); }
}

/* Pestañas de categoría y de nivel — transición más suave */
.render-tab, .plan-tab, .level-tab{
  transition: background-color var(--t-hover) var(--ease-soft),
              border-color var(--t-hover) var(--ease-soft),
              color var(--t-hover) var(--ease-soft);
}

/* Visor de planos: trazado progresivo de la retícula + afordancia de zoom */
.plan-viewer{ transition: box-shadow 620ms var(--ease-soft), border-color 620ms var(--ease-soft); }
/* El viewBox de la retícula es 0 0 400 225: las líneas horizontales miden
   400 unidades. El dasharray debe superar la línea más larga o el trazo
   quedaría incompleto. */
.plan-viewer .plan-placeholder-grid line{
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: mlPlanDraw 1600ms var(--ease-out) forwards;
}
@keyframes mlPlanDraw{ to{ stroke-dashoffset:0; } }
.plan-viewer .zoom-hint{ transition: transform var(--t-hover) var(--ease-soft), color var(--t-hover) var(--ease-soft); }

@media (hover: hover){
  .plan-viewer:hover{ box-shadow: var(--shadow-lift); border-color: var(--c-line-strong); }
  .plan-viewer:hover .zoom-hint{ transform: translateY(-2px); color: var(--c-champagne-dark); }
}

/* Miniaturas de la ficha de espacio */
.sd-gallery div{ transition: transform 620ms var(--ease-soft), box-shadow 620ms var(--ease-soft); }
@media (hover: hover){
  .sd-gallery div:hover{ transform: translateY(-3px); box-shadow: var(--shadow-soft); }
}

/* ---------------------------------------------------------------------
   11. DETALLES FINOS
   --------------------------------------------------------------------- */
/* Cifras: ancho de dígito fijo para que el conteo no "baile" */
.stat-num, .clock-num{ font-variant-numeric: tabular-nums; }

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

/* Amenidades */
.amenity-item{
  position:relative;
  transition: border-color var(--t-hover) var(--ease-soft),
              transform var(--t-hover) var(--ease-soft),
              box-shadow var(--t-hover) var(--ease-soft);
}
.amenity-item .ai-icon{ transition: transform 620ms var(--ease-soft); }
@media (hover: hover){
  .amenity-item:hover{ box-shadow: var(--shadow-soft); }
  .amenity-item:hover .ai-icon{ transform: translateY(-3px); }
}

/* Pasos del proceso */
.timeline-step{ position:relative; transition: background-color 620ms var(--ease-soft); }
.timeline-step::before{
  content:""; position:absolute; top:0; 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{ background: var(--c-forest); }
  .timeline-step:hover::before{ transform: scaleX(1); }
}

/* Panel de nivel y ficha */
.level-space-row{ transition: background-color var(--t-hover) var(--ease-soft); }
.level-space-row .lsr-link{ transition: transform var(--t-hover) var(--ease-soft); }
@media (hover: hover){
  .level-space-row:hover .lsr-link{ transform: translateX(3px); }
}

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

/* Modales: entrada un poco más lenta y suave */
.overlay-panel{ transition: transform 560ms var(--ease-out), opacity 560ms var(--ease-out); }

/* ---------------------------------------------------------------------
   12. PREFERS-REDUCED-MOTION
   Se conserva toda la funcionalidad; se retira el movimiento.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .reveal,
  .ml-stagger > *{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .ml-preload .hero .reveal{ opacity:1; transform:none; filter:none; }
  .ml-preload .hero-bg{ opacity:.62; }
  .ml-preload .hero-elevation{ transform:none; }

  .hero-elevation,
  .ml-hero-ready .hero-elevation{ animation:none; transition:none; }

  .ml-swap-in{ animation:none; }
  .plan-viewer .plan-placeholder-grid line{ animation:none; stroke-dasharray:none; stroke-dashoffset:0; }

  .ml-loader-mark, .ml-loader-word, .ml-loader-rule i{ animation:none; opacity:1; transform:none; }

  .section-title::after,
  .positioning::before, .explore::before, .spaces::before, .floorplans::before,
  .renders::before, .amenities::before, .location::before, .process::before{
    transform: scaleX(1);
    transition:none;
  }

  .header-inner{ transition:none; }
  .space-card, .render-item, .amenity-item, .btn{ transition:none; }
}
