/* RETAPIZAVE - Animaciones del sitio */
#fx-progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:60;background:linear-gradient(90deg,#21437d,#6ea8ff,#f3e8d4)}
header.fx-scrolled{box-shadow:0 8px 28px rgba(19,40,76,.18)}

@media (prefers-reduced-motion:no-preference){
  /* Entrada de página */
  body{animation:fxPage .7s ease-out both}
  @keyframes fxPage{from{opacity:0}to{opacity:1}}

  /* Revelado al hacer scroll, con distintas direcciones */
  .fx-r{opacity:0;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms);will-change:transform,opacity}
  .fx-up{transform:translateY(50px)}
  .fx-left{transform:translateX(-70px)}
  .fx-right{transform:translateX(70px)}
  .fx-zoom{transform:scale(.8)}
  .fx-r.fx-in{opacity:1;transform:none}

  /* Hero */
  #hero-fx{position:relative;overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat}
  .fx-aurora{position:absolute;inset:0;z-index:1;pointer-events:none;background:
    radial-gradient(40% 50% at 20% 30%,rgba(110,168,255,.35),transparent 70%),
    radial-gradient(35% 45% at 80% 70%,rgba(243,232,212,.28),transparent 70%);
    animation:fxAurora 12s ease-in-out infinite alternate}
  @keyframes fxAurora{from{transform:translate(-4%,-3%) scale(1)}to{transform:translate(5%,4%) scale(1.25)}}
  .fx-spot{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(380px circle at var(--mx,50%) var(--my,40%),rgba(255,255,255,.14),transparent 60%)}
  .fx-word{display:inline-block;opacity:0;transform:translateY(40px) rotate(4deg);animation:fxWord .8s cubic-bezier(.2,.8,.2,1) forwards}
  @keyframes fxWord{to{opacity:1;transform:none}}
  .fx-pop{opacity:0;animation:fxPop .8s cubic-bezier(.2,1.3,.4,1) forwards;animation-delay:var(--d,0s)}
  @keyframes fxPop{from{opacity:0;transform:scale(.7) translateY(20px)}to{opacity:1;transform:none}}
  .fx-wave{position:absolute;left:0;bottom:-1px;width:100%;height:70px;z-index:2;overflow:hidden;line-height:0}
  .fx-wave svg{width:200%;height:100%;animation:fxWave 9s linear infinite}
  @keyframes fxWave{to{transform:translateX(-50%)}}
  .fx-cta{animation:fxCta 2.4s ease-out infinite}
  @keyframes fxCta{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%,100%{box-shadow:0 0 0 18px rgba(255,255,255,0)}}

  /* Cinta de servicios */
  .fx-marquee{background:#21437d;color:#fff;overflow:hidden;white-space:nowrap;padding:.9rem 0}
  .fx-marquee-in{display:inline-flex;gap:3rem;animation:fxMarq 28s linear infinite}
  .fx-marquee:hover .fx-marquee-in{animation-play-state:paused}
  .fx-marquee span{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.85rem;display:inline-flex;align-items:center;gap:3rem}
  .fx-marquee span::after{content:"✦";color:#f3e8d4}
  @keyframes fxMarq{to{transform:translateX(-50%)}}

  /* Tarjetas: inclinación 3D + brillo */
  .fx-tilt{transform-style:preserve-3d;transition:transform .25s ease-out,box-shadow .3s;position:relative}
  .fx-tilt.fx-in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
  .fx-tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.5),transparent 60%);z-index:5}
  .fx-tilt:hover::before{opacity:1}
  .fx-tilt:hover{box-shadow:0 25px 50px rgba(19,40,76,.25)}
  .fx-tilt:hover .fas,.fx-tilt:hover .fab{animation:fxWiggle .7s ease}
  @keyframes fxWiggle{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-14deg) scale(1.2)}60%{transform:rotate(10deg) scale(1.2)}}
  .fx-float{animation:fxFloat 4s ease-in-out infinite}
  @keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  .fx-card img{transition:transform .8s ease}
  .fx-card:hover img{transform:scale(1.1)}

  /* Botones: brillo que cruza */
  a[class*="rounded-full"]:not(.fixed),button[class*="rounded-full"]:not(.fixed){position:relative;overflow:hidden}
  a[class*="rounded-full"]:not(.fixed)::after,button[class*="rounded-full"]:not(.fixed)::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg)}
  a[class*="rounded-full"]:not(.fixed):hover::after,button[class*="rounded-full"]:not(.fixed):hover::after{left:150%;transition:left .7s ease}

  /* WhatsApp con pulso */
  a[aria-label="WhatsApp Directo"].animate-bounce{animation:none}
  a[aria-label="WhatsApp Directo"].fixed::before{content:"";position:absolute;inset:0;border-radius:9999px;background:#22c55e;z-index:-1;animation:fxWa 2s ease-out infinite}
  @keyframes fxWa{0%{transform:scale(1);opacity:.65}100%{transform:scale(2);opacity:0}}

  /* Pie de página */
  footer .fa-instagram,footer .fa-whatsapp{transition:transform .3s}
  footer a:hover .fab{transform:scale(1.3) rotate(-8deg)}
}

/* Botón flotante de WhatsApp: tamaño y posición correctos en el teléfono */
@media (max-width:767px){
  a[aria-label="WhatsApp Directo"].fixed{
    right:1rem !important;
    bottom:calc(1rem + env(safe-area-inset-bottom,0px)) !important;
    width:3.25rem !important;height:3.25rem !important;
    font-size:1.75rem !important;
  }
  a[aria-label="WhatsApp Directo"].fixed::before{animation-name:fxWaSm}
}
@keyframes fxWaSm{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.6);opacity:0}}

/* El botón de WhatsApp siempre flota fijo en la pantalla */
a[aria-label="WhatsApp Directo"].fixed{position:fixed !important;left:auto !important;overflow:visible !important}