/* =========================================================
   Cristalería D'Spejo — capa de animación (prueba)
   Todo cuelga de body.fx: si se quita esa clase, la página
   vuelve a comportarse exactamente como la home normal.
   ========================================================= */

/* Las entradas laterales desplazan contenido fuera del margen: evitamos
   que eso genere barra de desplazamiento horizontal antes de aparecer. */
/* El recorte lateral se hace por secciones en styles.css: hacerlo aquí, en
   el body, ocultaba el bot y el botón de llamada en móvil. */

/* ---------- Barra de progreso de lectura ---------- */
.fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:130;background:transparent;pointer-events:none}
.fx-progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--cyan,#2aa9e0),var(--orange,#ef7b1f));
  box-shadow:0 0 12px rgba(42,169,224,.7);
}

/* ---------- Aparición al hacer scroll ---------- */
body.fx [data-fx]{
  opacity:0;will-change:transform,opacity;
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1);
}
body.fx [data-fx="up"]     {transform:translateY(46px)}
body.fx [data-fx="down"]   {transform:translateY(-38px)}
body.fx [data-fx="left"]   {transform:translateX(-56px)}
body.fx [data-fx="right"]  {transform:translateX(56px)}
body.fx [data-fx="zoom"]   {transform:scale(.88)}
body.fx [data-fx="blur"]   {transform:translateY(30px);filter:blur(10px)}
body.fx [data-fx].fx-in{opacity:1;transform:none;filter:none}
/* Al terminar la animación soltamos la capa de composición: si se queda,
   el navegador sigue dibujando el texto sobre ella y se ve menos nítido. */
body.fx [data-fx].fx-in{will-change:auto}

/* ---------- Capa que sube por encima de lo anterior ----------
   .capa-base se queda clavada (sticky por su borde inferior) en cuanto
   termina de verse, y .capa-encima sube por delante tapándola. Como el
   fondo no se mueve, la sensación es la de una hoja que asciende sola.

   Al entrar añade además un desplazamiento con cubic-bezier(.16,1,.3,1):
   arranca de golpe y dedica casi todo el tiempo a frenar, que es el
   "se coloca solo en su sitio" que buscábamos. */
.escena{position:relative}
.capa-base{position:sticky;bottom:0;z-index:0}

.capa-encima{
  /* Sin anclar: la sección es más alta que la pantalla, y anclándola su
     parte inferior quedaba fuera de alcance. Sube con el scroll sobre la
     capa base, que sí está clavada, y su contenido se recorre entero. */
  position:relative;
  z-index:4;
  background:var(--bg,#fff);
  border-radius:38px 38px 0 0;
  box-shadow:0 -30px 70px -28px rgba(12,36,86,.65);
  padding-top:4.6rem;
  min-height:100vh;
}
/* Tirador decorativo, como el de un panel deslizante */
.capa-encima::before{
  content:'';position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:58px;height:5px;border-radius:99px;background:rgba(18,55,122,.16);
}
.capa-disparador{height:1px;margin-top:-1px}

/* La clase .capa-lista la pone motion.js: si no hay JavaScript, la sección
   se queda en su sitio normal y la página sigue teniendo sentido.

   El margen negativo sube la capa hasta justo debajo del menú, y el
   desplazamiento inicial la devuelve abajo del todo. Al dispararse, recorre
   esa distancia entera de una vez, frenando al final. */
/* El impulso: un tramo que recorre sola, deprisa y frenando, para que el
   arranque no dependa de la rueda del ratón. A partir de ahí sigue subiendo
   con el scroll hasta donde haga falta. */
body.fx .capa-encima.capa-lista{
  transform:translateY(340px);
  transition:transform 1.5s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
body.fx .capa-encima.capa-lista.fx-slotted{transform:translateY(0)}

/* Todo lo que va después de la capa debe quedar por delante del fondo fijo,
   y con fondo opaco: si no, se vería la capa base a través. Las franjas que
   ya traen su propio color (empleo, CTA, pie) se dejan como están.

   OJO con el selector: '.escena ~ *' alcanzaba TAMBIÉN al bot de WhatsApp y
   al botón flotante de llamada, que son hermanos al final del body. Al
   ponerles position:relative dejaban de ser fijos y aparecían al final de
   la página, descolocados. Por eso se nombran sólo secciones y pie. */
.escena ~ section,.escena ~ footer{position:relative;z-index:4}
.escena ~ section.section{background:var(--bg,#fff)}
.escena ~ section.section-alt{background:var(--bg-alt,#f4f8fb)}

/* ---------- Titulares que entran palabra a palabra ---------- */
body.fx .fx-word{display:inline-block;overflow:hidden;vertical-align:top}
body.fx .fx-word > i{
  display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
body.fx .fx-in .fx-word > i{transform:translateY(0)}

/* ---------- Cinta de texto horizontal ---------- */
.fx-marquee{
  overflow:hidden;position:relative;
  padding:1.15rem 0;background:var(--navy-deep,#0c2456);
  border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);
}
.fx-marquee-alt{background:var(--orange,#ef7b1f)}
.fx-marquee-track{
  display:flex;width:max-content;will-change:transform;
  font-family:'Abril Fatface',Georgia,serif;font-weight:400;letter-spacing:.06em;
  font-size:clamp(1.3rem,3.4vw,2.4rem);text-transform:uppercase;line-height:1.1;
}
.fx-marquee-track span{padding-right:2.5rem;white-space:nowrap;color:#fff}
.fx-marquee-track span em{
  font-style:normal;-webkit-text-stroke:1px rgba(255,255,255,.55);color:transparent;
}
.fx-marquee-alt .fx-marquee-track span em{-webkit-text-stroke-color:rgba(255,255,255,.75)}
/* Degradado en los bordes para que el texto no se corte en seco */
.fx-marquee::before,.fx-marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.fx-marquee::before{left:0;background:linear-gradient(90deg,var(--navy-deep,#0c2456),transparent)}
.fx-marquee::after{right:0;background:linear-gradient(270deg,var(--navy-deep,#0c2456),transparent)}
.fx-marquee-alt::before{background:linear-gradient(90deg,var(--orange,#ef7b1f),transparent)}
.fx-marquee-alt::after{background:linear-gradient(270deg,var(--orange,#ef7b1f),transparent)}

/* ---------- Paralaje ---------- */
body.fx [data-parallax]{will-change:transform}
/* El vídeo se amplía un poco para que al desplazarlo no asomen bordes */
body.fx .hero-video{transform:scale(1.18)}
body.fx .hero-copy,body.fx .hero-call{will-change:transform,opacity}

/* ---------- Tarjetas de servicio ---------- */
body.fx .svc-grid .card{transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s ease,opacity .85s ease}
body.fx .svc-grid .card .card-img img{transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
body.fx .svc-grid .card:hover{transform:translateY(-10px)}
body.fx .svc-grid .card:hover .card-img img{transform:scale(1.09)}

/* ---------- Galería con deriva vertical ---------- */
body.fx .gallery figure{will-change:transform}
/* La galería de proyectos tiene su propio efecto (zoom out + leyenda),
   así que este acercamiento genérico se aplica sólo al resto. */
body.fx .gallery:not(.gallery-proyectos) figure img{transition:transform 1s cubic-bezier(.22,.61,.36,1)}
body.fx .gallery:not(.gallery-proyectos) figure:hover img{transform:scale(1.06)}

/* ---------- Contadores ---------- */
body.fx .fx-num{font-variant-numeric:tabular-nums}

/* ---------- Barra de confianza: entrada escalonada ---------- */
body.fx .trust-item{transition-delay:var(--fx-delay,0s)}

/* ---------- Franja CTA con fondo que se desplaza ---------- */
body.fx .cta-band{position:relative;overflow:hidden}
body.fx .cta-band::after{
  content:'';position:absolute;inset:-40% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 30% 50%,rgba(42,169,224,.35),transparent 55%);
  transform:translate3d(0,var(--fx-glow,0px),0);will-change:transform;
}
body.fx .cta-band > *{position:relative;z-index:1}

/* ---------- Respeta a quien pide menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  body.fx [data-fx],body.fx [data-fx].fx-in{opacity:1;transform:none;filter:none;transition:none}
  body.fx .capa-encima{transform:none;transition:none}
  .capa-base{position:static}
  body.fx .fx-word > i{transform:none;transition:none}
  body.fx .hero-video{transform:none}
  .fx-progress{display:none}
}