/* =====================================================================
   FX · Transiciones y movimiento (17 oct 2026)
   Mismo lenguaje de las webs de restaurantes (títulos palabra por palabra,
   cintas que reaccionan al scroll, palabra gigante de contorno, cascadas),
   adaptado a Lubesol. Reglas para no volver al titileo:
   - solo transform y opacity (nada de blur, backdrop-filter ni width/top);
   - entradas con animation + fill "backwards": al terminar, cada tarjeta
     vuelve a sus propios estilos (hover intacto);
   - todo lo oculto depende de la clase .fx-on que pone fx.js: sin JS se ve todo.
   Se mantiene con "animaciones desactivadas" de Windows a propósito
   (ver memoria feedback-animaciones-web).
   ===================================================================== */

/* ---------- Palabras que suben (hero y encabezados) ---------- */
.fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin:0 -.04em -.14em}
.fx-wi{display:inline-block;will-change:transform}
.fx-on .fx-split .fx-wi{transform:translate3d(0,112%,0) rotate(4deg);transform-origin:0 100%;transition:transform .95s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--k,0) * 75ms + var(--d0,0ms))}
.fx-on .fx-play .fx-split .fx-wi{transform:none}

/* ---------- Encabezados de sección (.sh) ---------- */
.fx-on .sh .sh-tag{opacity:0;transform:translate3d(0,14px,0) scale(.9);transition:opacity .5s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.fx-on .sh .sh-bar{transform:scaleX(0);transition:transform .9s cubic-bezier(.16,1,.3,1) .35s}
.fx-on .sh > p{opacity:0;transform:translate3d(0,16px,0);transition:opacity .7s ease .4s,transform .9s cubic-bezier(.16,1,.3,1) .4s}
.fx-on .sh h2{--d0:120ms}
.fx-on .sh.fx-play .sh-tag,.fx-on .sh.fx-play > p{opacity:1;transform:none}
.fx-on .sh.fx-play .sh-bar{transform:none}

/* ---------- Portada: entrada después de la pantalla de carga ---------- */
.fx-on .hero:not(.fx-play) .hero-eyebrow,
.fx-on .hero:not(.fx-play) .hero-slogan,
.fx-on .hero:not(.fx-play) .hero-sub,
.fx-on .hero:not(.fx-play) .hero-btns,
.fx-on .hero:not(.fx-play) .hero-job-btn,
.fx-on .hero:not(.fx-play) .hs,
.fx-on .hero:not(.fx-play) .hp-label,
.fx-on .hero:not(.fx-play) .hero-bc,
.fx-on .hero:not(.fx-play) .hero-bc-mini{opacity:0}
.fx-on .hero.fx-play .hero-eyebrow{animation:fxRise .8s cubic-bezier(.16,1,.3,1) backwards}
.fx-on .hero.fx-play .hero-slogan{animation:fxRise .8s cubic-bezier(.16,1,.3,1) .55s backwards}
.fx-on .hero.fx-play .hero-sub{animation:fxRise .9s cubic-bezier(.16,1,.3,1) .65s backwards}
.fx-on .hero.fx-play .hero-btns{animation:fxRise .9s cubic-bezier(.16,1,.3,1) .78s backwards}
.fx-on .hero.fx-play .hero-job-btn{animation:fxRise .9s cubic-bezier(.16,1,.3,1) .9s backwards}
.fx-on .hero.fx-play .hs{animation:fxRise .9s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(1s + var(--i,0) * 90ms)}
.fx-on .hero.fx-play .hp-label{animation:fxFade .8s ease .35s backwards}
.fx-on .hero.fx-play .hero-bc{animation:fxSlideIn 1.1s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(.45s + var(--i,0) * 140ms)}
.fx-on .hero.fx-play .hero-bc-mini{animation:fxRise .8s cubic-bezier(.16,1,.3,1) .85s backwards}
.fx-on .hero h1{--d0:120ms}
.fx-on .hero h1 .fx-wi{transition-duration:1.1s}
.hero-in{will-change:transform}

/* ---------- Cascadas de tarjetas (grillas) ---------- */
.fx-on .fx-stg:not(.fx-in) > *{opacity:0}
.fx-on .fx-stg.fx-in > *{animation:fxRise .9s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(min(var(--i,0), 10) * 80ms)}
.fx-on .cat-cards.fx-in > .cat-card{animation-name:fxCard;animation-duration:1.05s}
.fx-on .cat-cards.fx-in .cat-card-bg{animation:fxZoom 1.6s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(min(var(--i,0), 10) * 80ms)}
.fx-on .gp-features.fx-in > *{animation-name:fxSide}

@keyframes fxRise{from{opacity:0;transform:translate3d(0,46px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes fxFade{from{opacity:0}to{opacity:1}}
@keyframes fxSlideIn{from{opacity:0;transform:translate3d(70px,0,0) rotate(2.5deg)}to{opacity:1;transform:none}}
@keyframes fxSide{from{opacity:0;transform:translate3d(-26px,0,0)}to{opacity:1;transform:none}}
@keyframes fxCard{from{opacity:0;transform:translate3d(0,70px,0) rotate(-1.5deg);clip-path:inset(22% 0 0 0 round 16px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 16px)}}
@keyframes fxZoom{from{transform:scale(1.28)}to{transform:none}}

/* ---------- Cintas de texto que reaccionan al scroll ---------- */
.fx-band-wrap{position:relative;overflow:hidden;pointer-events:none;user-select:none}
.fx-band{white-space:nowrap;line-height:1}
.fx-track{display:inline-flex;align-items:center;will-change:transform}
.fx-item{font-family:'Poppins',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(30px,5.2vw,74px);padding:0 .28em}
.fx-sep{font-size:clamp(18px,2.6vw,36px);padding:0 .35em;display:inline-block}
.fx-band-a{background:var(--lb-dk,#0a1e3e);padding:clamp(16px,2.4vw,30px) 0}
.fx-band-a .fx-item{color:#fff}
.fx-band-a .fx-item.fx-o{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55)}
.fx-band-a .fx-sep{color:var(--mr,#cc0000)}
.fx-band-wrap.fx-tilt{padding:38px 0;margin:-30px 0;z-index:2}
.fx-band-b{background:var(--mr,#cc0000);padding:clamp(12px,1.8vw,22px) 0;width:112%;margin-left:-6%;transform:rotate(-2deg);box-shadow:0 18px 40px -18px rgba(120,0,0,.55)}
.fx-band-b .fx-item{color:#fff;font-size:clamp(22px,3.4vw,46px)}
.fx-band-b .fx-item.fx-o{color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.8)}
.fx-band-b .fx-sep{color:#ffd200}

/* ---------- Palabra gigante de contorno detrás de cada encabezado ---------- */
.fx-ghost-host{isolation:isolate}
section > .fx-ghost.fx-ghost{position:absolute;left:0;right:0;z-index:-1;overflow:hidden;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.fx-ghost-t{display:inline-block;white-space:nowrap;font-family:'Poppins',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:1;
  font-size:clamp(78px,15vw,230px);color:transparent;-webkit-text-stroke:1.5px rgba(26,59,111,.08);will-change:transform}
.contact-sec > .fx-ghost .fx-ghost-t{-webkit-text-stroke-color:rgba(255,255,255,.08)}

/* ---------- Línea de tiempo que se dibuja con el scroll ---------- */
.fx-on .timeline.fx-tl{border-left-color:transparent}
.fx-on .timeline.fx-tl::before{transform:scaleY(var(--fx-p,0));transform-origin:50% 0;will-change:transform}
.fx-on .timeline.fx-tl .tl-item{opacity:.3;transform:translate3d(10px,0,0);transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.fx-on .timeline.fx-tl .tl-item.fx-lit{opacity:1;transform:none}
.fx-on .timeline.fx-tl .tl-item::before{transform:scale(.55);transition:transform .45s cubic-bezier(.34,1.56,.64,1),background-color .3s}
.fx-on .timeline.fx-tl .tl-item.fx-lit::before{transform:scale(1.2);background-color:var(--mr,#cc0000)}

/* ---------- Celular y tableta: entradas más cortas, sin recortes ni giros ---------- */
.fx-touch.fx-on .fx-stg.fx-in > *,
.fx-touch.fx-on .cat-cards.fx-in > .cat-card{animation-name:fxRiseSoft;animation-duration:.75s}
.fx-touch.fx-on .cat-cards.fx-in .cat-card-bg{animation:none}
.fx-touch.fx-on .hero.fx-play .hero-bc{animation-name:fxRiseSoft}
@keyframes fxRiseSoft{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@media (max-width:700px){
  .fx-band-wrap.fx-tilt{padding:26px 0;margin:-20px 0}
  .fx-band-b{transform:rotate(-2.5deg)}
}