/* ================================================================
   SISTEMA DE ANIMACIONES — Creditpro · estilo emocional Flecto
   Capa unificada que se carga DESPUÉS de styles.css.
   Reglas:
   · Toda entrada/movimiento continuo va dentro de @media
     (prefers-reduced-motion: no-preference) o se activa por clases
     que el JS sólo añade cuando NO hay reduced-motion → la página
     queda perfectamente visible y estática si el usuario lo pide.
   · Easing firma del sistema: cubic-bezier(.16,1,.3,1).
   ================================================================ */

:root { --ease-emo: cubic-bezier(.16, 1, .3, 1); }

/* ================================================================
   1 · HERO — entrada al cargar
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* 1.a Navbar baja desde arriba con fade (preserva el centrado X) */
  .flx-topbar { animation: barDrop .8s var(--ease-emo) both; }
  @keyframes barDrop {
    from { opacity: 0; transform: translateX(-50%) translateY(-120%); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  /* Header global (vistas internas) también entra desde arriba */
  header.header { animation: headerDrop .8s var(--ease-emo) both; }
  @keyframes headerDrop {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* 1.b Título palabra por palabra — desactiva el rise del bloque completo
         y anima cada palabra con stagger 0.05s desde y:30px */
  .flx-title.is-split { animation: none !important; opacity: 1 !important; transform: none !important; }
  .flx-title.is-split .fw {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    will-change: opacity, transform;
  }
  .flx-step-1.is-active .flx-title.is-split .fw {
    animation: fwRise .62s var(--ease-emo) both;
    animation-delay: calc(0.18s + var(--wi) * 0.05s);
  }
  @keyframes fwRise {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
  }

  /* 1.c Botones CTA: escalan desde 0.9 + fade (delay 0.7s)
         (sustituye el rise translateY del bloque por scale, según spec) */
  .flx-step-1.is-active .flx-v1-cta {
    animation: ctaPop .6s var(--ease-emo) .7s both !important;
  }
  @keyframes ctaPop {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: none; }
  }

  /* 1.d Camioneta: entra desde la derecha (120px, delay .3s, 1.2s) y
         luego flota de forma continua (0→-8px→0, 4s). La flotación va en
         el <img> interior; el parallax sigue gobernando .flx-truck (exterior). */
  .flx-frame[data-step="0"] .flx-truck img {
    animation: truckInBig 1.2s var(--ease-emo) .3s both,
               truckFloat 4s ease-in-out 1.6s infinite;
  }
  @keyframes truckInBig {
    from { opacity: 0; transform: translateX(120px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes truckFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
  }

  /* 1.e Partículas de luz + gradiente que se mueve (inyectados por JS) */
  .flx-hero-particles span { animation: heroDrift linear infinite; }
  @keyframes heroDrift {
    0%   { transform: translateY(0) translateX(0); }
    50%  { transform: translateY(-26px) translateX(10px); }
    100% { transform: translateY(0) translateX(0); }
  }
  .flx-hero-aura .flx-aura-a { animation: auraA 18s ease-in-out infinite; }
  .flx-hero-aura .flx-aura-b { animation: auraB 22s ease-in-out infinite; }
  @keyframes auraA {
    0%, 100% { transform: translate(-8%, -6%) scale(1); }
    50%      { transform: translate(10%, 8%) scale(1.18); }
  }
  @keyframes auraB {
    0%, 100% { transform: translate(8%, 6%) scale(1.1); }
    50%      { transform: translate(-10%, -8%) scale(1); }
  }
}

/* Partículas / aura — estructura (siempre presentes pero inertes sin motion) */
.flx-hero-aura,
.flx-hero-particles {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.flx-hero-aura span {
  position: absolute; border-radius: 50%; filter: blur(48px);
}
.flx-hero-aura .flx-aura-a {
  width: 46%; aspect-ratio: 1; top: -8%; left: 4%;
  background: radial-gradient(circle, rgba(79,184,255,.30), transparent 68%);
}
.flx-hero-aura .flx-aura-b {
  width: 52%; aspect-ratio: 1; bottom: -12%; right: -4%;
  background: radial-gradient(circle, rgba(56,189,248,.22), transparent 70%);
}
.flx-hero-particles span {
  position: absolute; border-radius: 50%;
  background: rgba(216,236,255,.9);
  box-shadow: 0 0 8px rgba(160,210,255,.8);
}

/* ================================================================
   3 · SECCIÓN ESCUDO — Originación de crédito
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* 3.a Escudo: scale .7 → 1 + fade + rotación -5deg → 0 */
  .orig-hero--shield .shield-stage {
    transform: scale(.7) rotate(-5deg) !important;
  }
  .orig-hero--shield.is-in .shield-stage {
    transform: scale(1) rotate(0deg) !important;
    transition: opacity 1s var(--ease-emo) .2s,
                transform 1.1s var(--ease-emo) .2s !important;
  }

  /* 3.b Texto izquierdo entra desde la izquierda */
  .orig-hero--shield .rv { transform: translateX(-30px) !important; }

  /* 3.c Los 4 badges salen desde el centro del escudo, stagger 0.15s */
  .orig-hero--shield .shield-chip-1 { transform: translate(38px, 34px) scale(.55) !important; }
  .orig-hero--shield .shield-chip-2 { transform: translate(-42px, 26px) scale(.55) !important; }
  .orig-hero--shield .shield-chip-3 { transform: translate(40px, -28px) scale(.55) !important; }
  .orig-hero--shield .shield-chip-4 { transform: translate(-34px, -30px) scale(.55) !important; }
  .orig-hero--shield.is-in .shield-chip {
    transform: none !important;
    transition: opacity .6s ease, transform .7s var(--ease-emo) !important;
  }
  .orig-hero--shield.is-in .shield-chip-1 { transition-delay: .55s !important; }
  .orig-hero--shield.is-in .shield-chip-2 { transition-delay: .70s !important; }
  .orig-hero--shield.is-in .shield-chip-3 { transition-delay: .85s !important; }
  .orig-hero--shield.is-in .shield-chip-4 { transition-delay: 1.0s !important; }

  /* 3.d Pulso continuo sutil de los badges (combina flotación + scale 1→1.03),
         con stagger entre cada uno */
  .orig-hero--shield.is-in .shield-chip-1 { animation: chipLive 3.6s ease-in-out 1.5s infinite !important; }
  .orig-hero--shield.is-in .shield-chip-2 { animation: chipLive 4.0s ease-in-out 1.7s infinite !important; }
  .orig-hero--shield.is-in .shield-chip-3 { animation: chipLive 3.8s ease-in-out 1.9s infinite !important; }
  .orig-hero--shield.is-in .shield-chip-4 { animation: chipLive 4.2s ease-in-out 2.1s infinite !important; }
  @keyframes chipLive {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-6px) scale(1.03); }
  }
}

/* ================================================================
   4 · QUIÉNES SOMOS
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* 4.a Card de texto entra desde la izquierda */
  .ns-stage.ns-armed .ns-panel { transform: translateX(-44px) !important; }
  .ns-stage.ns-armed.is-in .ns-panel {
    transform: none !important;
    transition: opacity .9s var(--ease-emo), transform .9s var(--ease-emo) !important;
  }

  /* 4.b Card de quote (esquina inferior derecha) entra con bounce */
  .ns-stage.ns-armed .ns-close--corner { opacity: 0; }
  .ns-stage.ns-armed.is-in .ns-close--corner {
    animation: nsBounce .8s cubic-bezier(.34, 1.56, .64, 1) .5s both;
  }
  @keyframes nsBounce {
    0%   { opacity: 0; transform: scale(.8); }
    55%  { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
  }
}

/* ================================================================
   5 · VALORES — título line-by-line + cascada + hover
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Encabezado: título desde la izquierda, subtítulo después */
  .val-head-row.anim-left .val-title-big { opacity: 0; transform: translateX(-34px); transition: opacity .7s var(--ease-emo), transform .7s var(--ease-emo); }
  .val-head-row.anim-left .val-title-sub  { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-emo) .14s, transform .7s var(--ease-emo) .14s; }
  .val-head-row.anim-left.anim-in .val-title-big,
  .val-head-row.anim-left.anim-in .val-title-sub { opacity: 1; transform: none; }
}
/* Hover lift + sombra más profunda + ícono rota (refuerza lo existente) */
.val-block { transition: transform .4s var(--ease-emo), box-shadow .4s var(--ease-emo) !important; }
.val-block:hover .val-ico-float { transition: transform .35s var(--ease-emo); }
.val-block:hover .val-ico { transform: scale(1.08) rotate(8deg); }

/* ================================================================
   6 · QUOTE CENTRAL GRANDE — palabras una a una + glow azul
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .cv-phrase.is-split .qw {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
  }
  .cv-phrase.is-split.is-in .qw {
    animation: qwRise .6s var(--ease-emo) both;
    animation-delay: calc(var(--wi) * 0.06s);
  }
  @keyframes qwRise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }
  /* Palabras en azul reciben glow al aparecer */
  .cv-phrase.is-split.is-in .cv-w2,
  .cv-phrase.is-split.is-in .cv-w3 {
    animation: qwRise .6s var(--ease-emo) both, cvGlow 1.4s ease-out both;
    animation-delay: calc(var(--wi) * 0.06s), calc(var(--wi) * 0.06s + .25s);
  }
  @keyframes cvGlow {
    0%   { text-shadow: 0 0 0 rgba(56,189,248,0); }
    45%  { text-shadow: 0 0 26px rgba(56,189,248,.85), 0 0 8px rgba(56,189,248,.6); }
    100% { text-shadow: 0 0 14px rgba(56,189,248,.32); }
  }
}

/* ================================================================
   8 · CONTACTO — título slide-from-left potente
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .contacto-x .con-head.anim-left .section-title { opacity: 0; transform: translateX(-54px); transition: opacity .8s var(--ease-emo), transform .8s var(--ease-emo); }
  .contacto-x .con-head.anim-left .eyebrow      { opacity: 0; transform: translateX(-30px); transition: opacity .7s var(--ease-emo), transform .7s var(--ease-emo); }
  .contacto-x .con-head.anim-left .section-sub  { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-emo) .18s, transform .8s var(--ease-emo) .18s; }
  .contacto-x .con-head.anim-left.anim-in .section-title,
  .contacto-x .con-head.anim-left.anim-in .eyebrow,
  .contacto-x .con-head.anim-left.anim-in .section-sub { opacity: 1; transform: none; }
}

/* ================================================================
   9 · HOVER EFFECTS GLOBALES
   ================================================================ */

/* 9.a Botones: scale 1.03 + shine continuo sutil */
.btn:hover { transform: translateY(-1px) scale(1.03); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary > svg,
.btn-primary > .icon { position: relative; z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .btn-primary::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -65%;
    width: 45%; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-18deg);
    animation: btnShine 5s ease-in-out infinite;
  }
  @keyframes btnShine {
    0%   { left: -65%; }
    22%  { left: 135%; }
    100% { left: 135%; }
  }
}

/* 9.b Links del nav: subrayado que se expande desde el CENTRO */
.nav-item > a::after { transform-origin: center; }
.flx-nav a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 1.5px; background: var(--blue-500); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform .32s var(--ease-emo);
}
.flx-nav a:hover::after { transform: scaleX(1); }

/* 9.c Cards: lift 4–6px + sombra más profunda (refuerzo coherente) */
.con-card { transition: transform .3s var(--ease-emo), box-shadow .3s var(--ease-emo), border-color .3s ease, background .3s ease; }
.con-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(0,0,0,.6); }
.model-card:hover,
.ventaja-card:hover { transform: translateY(-6px); }