/* =========================================================
   Palletsa — capa de movimiento (motion.css)
   Se carga DESPUÉS de styles.css. Sin dependencias.
   Respeta prefers-reduced-motion.
   ========================================================= */

/* ---------- Barra de progreso de scroll ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:100;pointer-events:none;
  background:linear-gradient(90deg,var(--oak),var(--amber));transform-origin:0 50%;transform:scaleX(0)}

/* ---------- Hero: entrada escalonada ---------- */
@keyframes mx-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes mx-left{from{opacity:0;transform:translateX(48px) scale(.98)}to{opacity:1;transform:none}}
@keyframes mx-kenburns{from{transform:scale(1.12)}to{transform:scale(1.03)}}
@keyframes mx-shine-text{0%{background-position:0% 50%}100%{background-position:200% 50%}}

.hero-bg{animation:mx-kenburns 2.4s cubic-bezier(.22,.61,.36,1) both;will-change:transform}
.hero-copy > *{animation:mx-up .8s cubic-bezier(.22,.61,.36,1) both}
.hero-copy > .eyebrow{animation-delay:.05s}
.hero-copy > h1{animation-delay:.15s}
.hero-copy > .hero-lead{animation-delay:.3s}
.hero-copy > .hero-actions{animation-delay:.42s}
.hero-copy > .hero-badges{animation-delay:.54s}
.hero .quote-card{animation:mx-left .9s cubic-bezier(.22,.61,.36,1) .35s both}

/* Brillo que recorre "y de exportación" */
.hero h1 em{background:linear-gradient(90deg,#F6C88F 0%,#E9A65A 25%,#FFE3BD 50%,#E9A65A 75%,#F6C88F 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:mx-shine-text 6s linear 1.2s infinite}

/* Badges del hero: iconos con pulso suave */
@keyframes mx-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.hero-badges li:nth-child(1) .icon{animation:mx-pop 2.8s ease-in-out 1.4s infinite}
.hero-badges li:nth-child(2) .icon{animation:mx-pop 2.8s ease-in-out 1.9s infinite}
.hero-badges li:nth-child(3) .icon{animation:mx-pop 2.8s ease-in-out 2.4s infinite}

/* ---------- Botones: destello al pasar el mouse ---------- */
.btn-primary,.btn-dark{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after,.btn-dark::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;z-index:-1;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s ease}
.btn-primary:hover::after,.btn-dark:hover::after{left:130%}
.btn .icon{transition:transform .25s ease}
.btn:hover svg:last-child{transform:translateX(4px)}
.btn:active{transform:scale(.97)}

/* Pulso de atención en "Cotizar ahora" del header */
@keyframes mx-ring{0%{box-shadow:0 0 0 0 rgba(238,107,18,.55)}70%{box-shadow:0 0 0 14px rgba(238,107,18,0)}100%{box-shadow:0 0 0 0 rgba(238,107,18,0)}}
.nav .btn-primary{animation:mx-ring 2.6s ease-out 3s infinite}

/* ---------- Revelado direccional ---------- */
.reveal.mx-from-left{transform:translateX(-40px)}
.reveal.mx-from-right{transform:translateX(40px)}
.reveal.mx-zoom{transform:scale(.94)}
.reveal.visible.mx-from-left,.reveal.visible.mx-from-right,.reveal.visible.mx-zoom{transform:none}
.reveal{transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
/* Mantener hover de tarjetas rápido una vez visibles */
.service.visible,.case.visible{transition:opacity .8s,transform .25s,box-shadow .25s,border-color .25s}

/* Hijos escalonados dentro de un bloque revelado */
.mx-stagger > *{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i,0) * 90ms + 150ms)}
.visible .mx-stagger > *, .mx-stagger.visible > *{opacity:1;transform:none}

/* ---------- Íconos de servicios ---------- */
@keyframes mx-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) scale(1.08)}75%{transform:rotate(8deg) scale(1.08)}}
.service .ico{transition:background .3s,color .3s}
.service:hover .ico{background:linear-gradient(135deg,var(--amber),var(--amber-dark));color:#fff}
.service:hover .ico .icon{animation:mx-wiggle .6s ease}
.trust-list li .ico{transition:transform .3s,background .3s,color .3s}
.trust-list li:hover .ico{transform:translateY(-3px) rotate(-6deg);background:var(--amber);color:#fff}

/* ---------- Banda de cifras ---------- */
@keyframes mx-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,40px)}}
@keyframes mx-grain{from{background-position:0 0}to{background-position:800px 0}}
.stats-band::after{animation:mx-drift 9s ease-in-out infinite}
.stats-band::before{animation:mx-grain 40s linear infinite}
.stat .icon{transition:transform .4s}
.stat:hover .icon{transform:translateY(-4px) scale(1.12)}
.stat strong{font-variant-numeric:tabular-nums}

/* ---------- Elementos flotantes ---------- */
@keyframes mx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes mx-float2{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.visible .floating-chip{animation:mx-float 4.5s ease-in-out infinite}
.visible .diagram-card{animation:mx-float2 5.5s ease-in-out .6s infinite}
.visible .exp{animation:mx-float 5s ease-in-out infinite}

/* Imágenes: zoom suave al revelarse */
.product-media .main-img,.about-media img{transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
.product-media:not(.visible) .main-img,.about-media:not(.visible) img{transform:scale(1.08)}

/* Etiqueta de casos */
.case-tag{transition:transform .3s}
.case:hover .case-tag{transform:translateY(-3px)}
.pills li{transition:background .2s,color .2s,transform .2s}
.pills li:hover{transform:translateY(-2px)}

/* Lista de riesgos y checklist */
.risk{transition:transform .25s,box-shadow .25s}
.risk:hover{transform:translateX(6px)}
.checklist li .icon{transition:transform .3s}
.checklist li:hover .icon{transform:scale(1.25) rotate(-8deg)}

/* Ubicaciones: pin que rebota */
@keyframes mx-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}60%{transform:translateY(-2px)}}
.loc:hover .ico .icon{animation:mx-bounce .7s ease}

/* CTA final: fondo con brillo en movimiento */
@keyframes mx-sheen{0%{transform:translateX(-120%) skewX(-20deg)}100%{transform:translateX(320%) skewX(-20deg)}}
.cta-card{position:relative;overflow:hidden}
.cta-card.visible::after{content:"";position:absolute;top:0;left:0;width:30%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(238,107,18,.07),transparent);animation:mx-sheen 5s ease-in-out 1s infinite}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal,.reveal.mx-from-left,.reveal.mx-from-right,.reveal.mx-zoom,.mx-stagger > *{opacity:1 !important;transform:none !important}
  .product-media .main-img,.about-media img{transform:none !important}
  .scroll-progress{display:none}
}