/*
 * Efectos adicionales. Solo se activan con la clase .fx-ready (la pone
 * effects.js si el dispositivo permite movimiento), así que sin JavaScript o
 * con «reducir movimiento» la página se ve igual que sin este archivo.
 */

/* 1. Destello sobre «Nuestra prioridad.» */
.fx-ready .hero h1 em{background:linear-gradient(100deg,currentColor 0%,currentColor 40%,#ffffff 50%,currentColor 60%,currentColor 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fx-shine 9s ease-in-out 1.9s infinite}
@keyframes fx-shine{0%{background-position:100% 0}14%,100%{background-position:0 0}}

/* 2. Segunda línea de los titulares: se pinta con un barrido */
.fx-ready h2 em{background:linear-gradient(90deg,currentColor 0 50%,#b9d9d3 50% 100%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:background-position 1.3s cubic-bezier(.2,.7,.25,1) .25s}
.fx-ready .appointment h2 em{background-image:linear-gradient(90deg,currentColor 0 50%,#ffffff40 50% 100%)}
.fx-ready h2.fx-in em{background-position:0 0}

/* 3. Tarjetas con inclinación y reflejo de luz */
.service-card.fx-tilt,.team-card.fx-tilt{position:relative}
.fx-ready .fx-tilt,.fx-ready .fx-tilt:hover{transform:perspective(900px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg)) translateY(var(--fx-lift,0px));transition:transform .45s cubic-bezier(.2,.7,.25,1),box-shadow .45s;will-change:transform}
.fx-ready .fx-tilt.fx-hover{transition:transform .12s linear,box-shadow .45s;box-shadow:0 22px 50px #12324a1f}
.service-card.fx-tilt.fx-hover{--fx-lift:-5px}
.fx-tilt:after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--fx-x,50%) var(--fx-y,50%),#ffffff38,transparent 45%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:3}
.fx-tilt.fx-hover:after{opacity:1}

/* 4. Botones magnéticos */
.fx-magnet{transition:transform .35s cubic-bezier(.2,.7,.25,1)}
.fx-magnet.fx-pull{transition:transform .12s linear}

/* 5. Iconos que se dibujan */
.fx-ready .fx-draw{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.6s cubic-bezier(.45,.05,.3,1) var(--fx-delay,0s)}
.fx-ready .fx-draw.fx-in{stroke-dashoffset:0}

/* 6. Paso a paso: línea y número en secuencia */
.fx-ready .process-band article{position:relative;border-left-color:transparent}
.fx-ready .process-band article:before{content:'';position:absolute;left:-1px;top:0;bottom:0;width:1px;background:#ffffff59;transform:scaleY(0);transform-origin:top;transition:transform 1s cubic-bezier(.2,.7,.25,1) var(--fx-delay,0s)}
.fx-ready .process-band article>span{display:inline-block;opacity:0;transform:translateY(12px) scale(.9);transition:opacity .7s var(--fx-delay,0s),transform .9s cubic-bezier(.2,.7,.25,1) var(--fx-delay,0s)}
.fx-ready .process-band article.fx-in:before{transform:scaleY(1)}
.fx-ready .process-band article.fx-in>span{opacity:1;transform:none}
@media(max-width:640px){.fx-ready .process-band article:before{display:none}}

/* 7. Fotos que se descubren con una cortinilla */
.fx-ready .fx-wipe{clip-path:inset(0 0 100% 0 round 18px);transition:clip-path 1.25s cubic-bezier(.65,.05,.25,1) var(--fx-delay,0s)}
.fx-ready .fx-wipe.fx-in{clip-path:inset(0 0 0 0 round 18px)}

/* 8. Luces de fondo en la sección de cita */
.fx-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-aurora i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.fx-aurora i:nth-child(1){width:460px;height:460px;left:-120px;top:-140px;background:#168f8766;animation:fx-orb-a 22s ease-in-out infinite}
.fx-aurora i:nth-child(2){width:380px;height:380px;right:-100px;bottom:-160px;background:#21b7a84d;animation:fx-orb-b 26s ease-in-out infinite}
.fx-aurora i:nth-child(3){width:260px;height:260px;left:45%;top:35%;background:#8adeca26;animation:fx-orb-c 30s ease-in-out infinite}
@keyframes fx-orb-a{50%{transform:translate(160px,120px) scale(1.15)}}
@keyframes fx-orb-b{50%{transform:translate(-180px,-90px) scale(.9)}}
@keyframes fx-orb-c{50%{transform:translate(-140px,70px) scale(1.25)}}
.appointment>.wrap{position:relative;z-index:1}
@media(max-width:640px){.fx-aurora i{filter:blur(45px)}.fx-aurora i:nth-child(1){width:300px;height:300px}.fx-aurora i:nth-child(2){width:260px;height:260px}}

/* 9. Luz que sigue al ratón en la portada */
.fx-spot{position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(520px circle at var(--fx-x,30%) var(--fx-y,40%),#8adeca1f,transparent 60%);opacity:0;transition:opacity .6s}
.hero.fx-hover .fx-spot{opacity:1}

@media(prefers-reduced-motion:reduce){.fx-aurora i,.fx-ready .hero h1 em{animation:none}}

/* 10. Carrusel infinito (app.js): deslizamiento continuo y bordes difuminados */
.is-looping .service-grid{scroll-snap-type:none;scroll-behavior:auto}
.is-looping .carousel-meter>span{transition:none}
@media(min-width:641px){
  .is-looping .service-grid{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
}