/* =====================================================================
   PROTEGE — animaciones y efectos globales (UN solo archivo para todo el sitio)
   Uso en Elementor: Avanzado → Clases CSS → escribir la clase (sin punto).
   Celular: los hover solo existen con mouse; en táctil se reemplazan por la
   aparición al bajar. Respeta "reducir movimiento" del sistema.
   ===================================================================== */
:root{
  --pa-azul:#13139F; --pa-grafito:#33363F; --pa-texto:#59647A;
  --pa-gris:#9BA2AF; --pa-fondo:#F0F0F2;
  --pa-dur:.6s; --pa-ease:cubic-bezier(.22,.61,.36,1);
  --pa-sombra:0 12px 32px rgba(19,19,159,.12);
}

/* ---------- 1. APARECER AL BAJAR (grupos "Desplazamiento" del Figma) ----------
   pa-reveal            sube y aparece (por defecto)
   pa-reveal pa-left    entra desde la izquierda  | pa-right desde la derecha
   pa-reveal pa-zoom    crece levemente           | pa-fade solo opacidad
   pa-stagger           sus hijos directos aparecen uno tras otro
   Retraso manual: style "--pa-delay:.2s" (Avanzado → CSS personalizado)      */
.pa-js .pa-reveal,.pa-js .pa-stagger>*{
  opacity:0; transform:translate3d(0,28px,0);
  transition:opacity var(--pa-dur) var(--pa-ease) var(--pa-delay,0s),
             transform var(--pa-dur) var(--pa-ease) var(--pa-delay,0s);
  will-change:opacity,transform;
}
.pa-js .pa-reveal.pa-left{transform:translate3d(-36px,0,0)}
.pa-js .pa-reveal.pa-right{transform:translate3d(36px,0,0)}
.pa-js .pa-reveal.pa-zoom{transform:scale(.94)}
.pa-js .pa-reveal.pa-fade{transform:none}
.pa-js .pa-reveal.is-in,.pa-js .pa-stagger.is-in>*{opacity:1;transform:none}
.pa-js .pa-stagger.is-in>*:nth-child(2){transition-delay:.08s}
.pa-js .pa-stagger.is-in>*:nth-child(3){transition-delay:.16s}
.pa-js .pa-stagger.is-in>*:nth-child(4){transition-delay:.24s}
.pa-js .pa-stagger.is-in>*:nth-child(5){transition-delay:.32s}
.pa-js .pa-stagger.is-in>*:nth-child(n+6){transition-delay:.40s}
/* en el editor de Elementor todo se ve normal */
.elementor-editor-active .pa-reveal,.elementor-editor-active .pa-stagger>*{opacity:1!important;transform:none!important}

/* Entrada de la portada sin JavaScript (no retrasa la carga):  pa-intro */
.pa-intro{animation:pa-intro .8s var(--pa-ease) both}
@keyframes pa-intro{from{opacity:0;transform:translate3d(-24px,0,0)}to{opacity:1;transform:none}}

/* ---------- 2. HOVER (solo con mouse) ---------- */
.pa-lift,.pa-glow,.pa-btn,.pa-zoom-img img,.pa-underline a,a.pa-underline{transition:all .3s var(--pa-ease)}
@media (hover:hover) and (pointer:fine){
  .pa-lift:hover{transform:translateY(-6px);box-shadow:var(--pa-sombra)}
  .pa-glow:hover{box-shadow:0 0 0 1px var(--pa-azul),var(--pa-sombra)}
  .pa-zoom-img{overflow:hidden}
  .pa-zoom-img:hover img{transform:scale(1.05)}
  .pa-btn:hover .elementor-button,.pa-btn.elementor-button:hover{transform:translateY(-2px);filter:brightness(1.12)}
  .pa-underline a,a.pa-underline{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat}
  .pa-underline a:hover,a.pa-underline:hover{background-size:100% 1px}
}
/* táctil: un toque da respuesta visual */
@media (hover:none){ .pa-lift:active,.pa-btn:active{transform:scale(.98)} }

/* ---------- 3. EFECTOS DE SUPERFICIE (GLASS / BLUR / NOISE del Figma) ---------- */
.pa-glass{background:rgba(255,255,255,.12)!important;
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.22)}
.pa-glass-light{background:rgba(255,255,255,.7)!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.6)}
.pa-shadow{box-shadow:var(--pa-sombra)}
.pa-noise{position:relative;isolation:isolate}
.pa-noise::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- 4. MOVIMIENTO REDUCIDO ---------- */
@media (prefers-reduced-motion:reduce){
  .pa-js .pa-reveal,.pa-js .pa-stagger>*{opacity:1!important;transform:none!important;transition:none!important}
  .pa-lift,.pa-glow,.pa-btn,.pa-zoom-img img{transition:none!important}
  .pa-intro{animation:none}
}
