/* My Teacher Pablo · capa de movimiento (el «wow»). Todo es sutil, de 60 fps (solo transform/opacity) y se desactiva con «reducir movimiento». */
@media (prefers-reduced-motion:no-preference){
  /* Barra de progreso de lectura */
  .fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#f5b400,#ffd45a 60%,#0a2540);pointer-events:none}

  /* Encabezado que se aquieta al bajar */
  .site-header{transition:box-shadow .3s,background .3s}
  .site-header.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.08);background:rgba(255,255,255,.86)}
  .site-header .brand img{transition:height .3s}
  .site-header.scrolled .brand img{height:28px}

  /* Portada: entrada escalonada, luces flotantes y brillo en el titular */
  .hero{position:relative;overflow:clip}
  .hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;z-index:0}
  .hero::before{width:420px;height:420px;right:-90px;top:-80px;background:radial-gradient(circle,#ffd45a,transparent 68%);animation:orb1 14s ease-in-out infinite alternate}
  .hero::after{width:520px;height:520px;left:-160px;top:28%;background:radial-gradient(circle,#9db8e0,transparent 66%);animation:orb2 18s ease-in-out infinite alternate}
  .hero .wrap{position:relative;z-index:1}
  @keyframes orb1{to{transform:translate(-70px,70px) scale(1.15)}}
  @keyframes orb2{to{transform:translate(90px,-50px) scale(1.2)}}
  .hero-in>*{opacity:0;transform:translateY(22px);animation:fxUp .9s cubic-bezier(.2,.8,.2,1) forwards}
  .hero-in>*:nth-child(1){animation-delay:.05s}.hero-in>*:nth-child(2){animation-delay:.16s}.hero-in>*:nth-child(3){animation-delay:.28s}.hero-in>*:nth-child(4){animation-delay:.4s}
  .hero-card{opacity:0;transform:translateY(30px) scale(.96);animation:fxCard 1.15s .1s cubic-bezier(.2,.8,.2,1) forwards}
  .hero-img .slide{transform:scale(1.12);animation:fxZoom 2.4s .1s cubic-bezier(.2,.8,.2,1) forwards;will-change:transform}
  @keyframes fxUp{to{opacity:1;transform:none}}
  @keyframes fxCard{to{opacity:1;transform:none}}
  @keyframes fxZoom{to{transform:scale(1.02)}}
  .hero-text h1{background:linear-gradient(105deg,#1d1d1f 38%,#4b7bc0 50%,#1d1d1f 62%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fxUp .9s .16s cubic-bezier(.2,.8,.2,1) forwards,fxShine 2.6s .9s ease-out forwards}
  @keyframes fxShine{to{background-position:0 0}}
  .hero-text .btn-primary{position:relative;overflow:hidden}
  .hero-text .btn-primary::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);animation:fxSweep 4.5s 2s ease-in-out infinite}
  @keyframes fxSweep{0%,60%{left:-70%}100%{left:140%}}

  /* Revelado al hacer scroll (solo si el JavaScript de movimiento está activo). Usa animaciones y las propiedades
     independientes translate/scale, así no interfiere con la inclinación 3D ni con los efectos al pasar el cursor. */
  html.fx .reveal,html.fx .reveal-img{opacity:0}
  html.fx .reveal.in{animation:fxReveal .95s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
  html.fx .reveal.pop.in{animation-name:fxRevealPop}
  html.fx .reveal-img.in{animation:fxRevealImg 1.2s cubic-bezier(.2,.8,.2,1) both}
  @keyframes fxReveal{from{opacity:0;translate:0 34px}to{opacity:1;translate:0 0}}
  @keyframes fxRevealPop{from{opacity:0;translate:0 40px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
  @keyframes fxRevealImg{from{opacity:.01;clip-path:inset(0 0 16% 0 round 28px);scale:1.05}to{opacity:1;clip-path:inset(0 0 0 0 round 28px);scale:1}}

  /* Tarjetas: inclinación 3D, luz que sigue al cursor y zoom de la foto */
  .card{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;position:relative;transform-style:preserve-3d}
  .card:hover{--ty:-6px;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
  .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 45%)}
  .card:hover::after{opacity:1}
  .benefit{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
  .benefit:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.12)}
  .quote{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .quote:hover{transform:translateY(-6px) rotate(-.4deg)}
  .gal-item{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
  .gal-item:hover{transform:scale(1.03) rotate(-.6deg);box-shadow:0 22px 50px rgba(0,0,0,.22);z-index:2}
  .gal-item:nth-child(even):hover{transform:scale(1.03) rotate(.6deg)}
  .catcard,.subchip,.info-chip,.sch-day.has,.sch-slot{transition:transform .2s,background .25s,box-shadow .25s,color .2s}
  .info-chip:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.1)}

  /* Botones: rebote suave al pulsar y onda */
  .btn,.add-btn,.tb{transition:transform .2s cubic-bezier(.3,1.4,.5,1),background .2s,box-shadow .2s}
  .btn:hover,.add-btn:hover{transform:translateY(-1px)}
  .btn:active,.add-btn:active{transform:scale(.96)}
  .fx-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:fxRipple .6s ease-out forwards;pointer-events:none}
  @keyframes fxRipple{to{transform:scale(1);opacity:0}}
  .btn,.add-btn{position:relative;overflow:hidden}

  /* Carrito y pago */
  .cart-count.bump,.tb-badge{animation:fxBump .4s cubic-bezier(.3,1.6,.5,1)}
  @keyframes fxBump{0%{transform:scale(.4)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
  .line{animation:fxUp .5s cubic-bezier(.2,.8,.2,1) both}
  .line:nth-child(2){animation-delay:.06s}.line:nth-child(3){animation-delay:.12s}.line:nth-child(4){animation-delay:.18s}
  .done-ico{position:relative;animation:fxCheck .7s cubic-bezier(.3,1.5,.5,1) both}
  .done-ico::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid #1f9d57;opacity:0;animation:fxRing 1.4s .3s ease-out 2}
  @keyframes fxCheck{0%{transform:scale(0) rotate(-40deg)}100%{transform:none}}
  @keyframes fxRing{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.7);opacity:0}}
  .done h3,.done .fine{animation:fxUp .6s .25s both}
  .delivery{animation:fxUp .6s .4s both}

  /* Calendario: los días y horarios aparecen en cascada */
  .sch-day.has{animation:fxPopIn .45s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--n,0) * 14ms)}
  .sch-slot{animation:fxPopIn .4s cubic-bezier(.3,1.4,.5,1) both}
  .sch-slot:nth-child(2){animation-delay:.04s}.sch-slot:nth-child(3){animation-delay:.08s}.sch-slot:nth-child(4){animation-delay:.12s}.sch-slot:nth-child(5){animation-delay:.16s}.sch-slot:nth-child(6){animation-delay:.2s}.sch-slot:nth-child(n+7){animation-delay:.24s}
  @keyframes fxPopIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
  .pk-confirm{animation:fxUp .4s cubic-bezier(.2,.8,.2,1) both}

  /* Barra inferior (celular): icono que rebota y punto indicador */
  .tb.on svg{animation:fxTab .45s cubic-bezier(.3,1.6,.5,1)}
  @keyframes fxTab{0%{transform:translateY(0) scale(.85)}50%{transform:translateY(-4px) scale(1.15)}100%{transform:none}}
  .tb::before{content:"";position:absolute;top:0;left:50%;width:22px;height:3px;border-radius:0 0 4px 4px;background:var(--brand);transform:translateX(-50%) scaleX(0);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
  .tb.on::before{transform:translateX(-50%) scaleX(1)}

  /* Confeti de compra */
  .fx-confetti{position:fixed;inset:0;z-index:120;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){.fx-progress,.fx-confetti{display:none}}