/* ============================================================
   enhance.css — Capa de efectos premium (Taller Mecánico)
   ============================================================ */
.fx-rise{opacity:0;transform:translateY(40px) scale(.985);filter:blur(6px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1),filter 1s ease;will-change:opacity,transform,filter}
.fx-rise.fx-in{opacity:1;transform:none;filter:blur(0)}
.fx-rise.d1{transition-delay:.08s}.fx-rise.d2{transition-delay:.16s}.fx-rise.d3{transition-delay:.24s}.fx-rise.d4{transition-delay:.32s}.fx-rise.d5{transition-delay:.4s}

.fx-clip{clip-path:inset(0 100% 0 0);opacity:.001;transition:clip-path 1.1s cubic-bezier(.76,0,.24,1),opacity .2s}
.fx-clip.fx-in{clip-path:inset(0 0 0 0);opacity:1}

/* Resplandor rojo que sigue al cursor en tarjetas */
.fx-glow{position:relative;isolation:isolate}
.fx-glow::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(225,55,45,.18),transparent 60%);opacity:0;transition:opacity .4s}
.fx-glow:hover::before{opacity:1}
.fx-glow>*{position:relative;z-index:1}

/* Borde rojo animado en tarjetas */
.fx-border{position:relative}
.fx-border::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(130deg,transparent 30%,rgba(225,55,45,.8),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s;background-size:200% 200%}
.fx-border:hover::after{opacity:1;animation:fxBorderMove 2.4s linear infinite}
@keyframes fxBorderMove{0%{background-position:0% 0%}100%{background-position:200% 200%}}

/* Parallax */
.fx-parallax{will-change:transform;transform:translate3d(0,var(--py,0),0)}

/* Barrido de brillo en botones */
.fx-shine{position:relative;overflow:hidden}
.fx-shine::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg)}
.fx-shine:hover::after{animation:fxShine .9s ease}
@keyframes fxShine{to{left:130%}}

/* Elevación al hover en tarjetas de servicio y pasos */
.service-card,.process-step{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
.service-card:hover,.process-step:hover{transform:translateY(-7px)}

@media (prefers-reduced-motion:reduce){
  .fx-rise,.fx-clip{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
}