/* ============================================================
   DSA Compliance · animaciones y micro-interacciones
   assets/kit/animaciones/dsa-kit-anim.css
   Cargar DESPUÉS de tokens/dsa-kit.css. Sin dependencias.
   Todo se apaga con prefers-reduced-motion.
   ============================================================ */

/* --- 1 · Aparición al hacer scroll -------------------------
   <div class="dsa-rv">…</div>            aparece desde abajo
   <div class="dsa-rv dsa-rv--izda">…     entra desde la izquierda
   <div class="dsa-rv" data-rv-delay="2"> retardo en pasos de 90 ms
   Necesita dsa-kit-anim.js (añade .is-vis).                  */
.dsa-rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s cubic-bezier(.22,.7,.25,1), transform .62s cubic-bezier(.22,.7,.25,1);
  transition-delay: calc(var(--rv-d, 0) * 90ms);
  will-change: opacity, transform;
}
.dsa-rv--izda { transform: translateX(-22px); }
.dsa-rv--dcha { transform: translateX(22px); }
.dsa-rv--zoom { transform: scale(.965); }
.dsa-rv.is-vis { opacity: 1; transform: none; }

/* --- 2 · Cards e iconos ------------------------------------ */
.dsa-hover {
  transition: transform .24s cubic-bezier(.22,.7,.25,1), box-shadow .24s ease, border-color .24s ease;
}
.dsa-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--dsa-sombra-card, 0 8px 24px rgba(23,27,69,.08));
  border-color: var(--sol, var(--dsa-cian, #4BCDE7));
}
.dsa-hover:hover .dsa-ico,
.dsa-hover:focus-visible .dsa-ico { transform: scale(1.06) rotate(-2deg); }
.dsa-ico { transition: transform .28s cubic-bezier(.22,.7,.25,1); }

/* Subrayado que crece (enlaces y titulares de card) */
.dsa-subraya { position: relative; }
.dsa-subraya::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px;
  background: var(--sol, var(--dsa-cian, #4BCDE7)); border-radius: 2px;
  transition: right .32s cubic-bezier(.22,.7,.25,1);
}
.dsa-subraya:hover::after, .dsa-hover:hover .dsa-subraya::after { right: 0; }

/* Flecha que avanza en los CTA: <a>Ver módulo <i class="dsa-flecha"></i></a> */
.dsa-flecha { display: inline-block; transition: transform .24s ease; }
.dsa-flecha::before { content: '\2192'; }
a:hover > .dsa-flecha, .dsa-hover:hover .dsa-flecha { transform: translateX(4px); }

/* --- 3 · Barras de cumplimiento ---------------------------
   <div class="dsa-barra dsa-rv"><span data-v="87"></span></div>       */
.dsa-barra { height: 8px; border-radius: 999px; background: #EEF1F7; overflow: hidden; }
.dsa-barra > span {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--sol, var(--dsa-cian, #4BCDE7));
  transition: width 1.15s cubic-bezier(.22,.7,.25,1) .1s;
}
.dsa-barra.is-vis > span { width: var(--v, 0%); }

/* --- 4 · Contadores ---------------------------------------
   <span class="dsa-num" data-to="432" data-suf="%"></span>            */
.dsa-num { font-variant-numeric: tabular-nums; }

/* --- 5 · Latidos y brillos --------------------------------- */
.dsa-latido { animation: dsa-latido 3.4s ease-in-out infinite; }
@keyframes dsa-latido { 0%,100% { opacity:.75; transform:scale(1) } 50% { opacity:1; transform:scale(1.04) } }

.dsa-punto-vivo { position: relative; }
.dsa-punto-vivo::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--sol, var(--dsa-cian, #4BCDE7));
  animation: dsa-onda 2.6s ease-out infinite;
}
@keyframes dsa-onda { 0% { transform:scale(.6); opacity:.8 } 100% { transform:scale(1.5); opacity:0 } }

/* Brillo de marca sobre un bloque navy (una sola pasada al entrar) */
.dsa-brillo { position: relative; overflow: hidden; }
.dsa-brillo.is-vis::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(75,205,231,.22) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: dsa-brillo 1.5s cubic-bezier(.3,.7,.3,1) .25s;
}
@keyframes dsa-brillo { to { transform: translateX(100%); } }

/* --- 6 · Explicativo por pasos ----------------------------
   <ol class="dsa-pasos"><li>…</li>…</ol> resalta un paso cada 2,4 s */
.dsa-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dsa-pasos > li {
  padding: 12px 16px; border-radius: 8px; background: #F7F8FB;
  border-left: 3px solid #E3E8F0; color: var(--dsa-texto-suave, #5F5E5A);
  font-size: 13px; line-height: 1.55;
  animation: dsa-paso calc(2.4s * var(--n, 6)) linear infinite;
  animation-delay: calc(2.4s * (var(--i, 0) - 1));
}
@keyframes dsa-paso {
  0%, 12% { border-left-color: var(--sol, #4BCDE7); background: #FFFFFF; color: var(--dsa-tinta, #171B45); box-shadow: 0 6px 18px rgba(23,27,69,.07); }
  20%, 100% { border-left-color: #E3E8F0; background: #F7F8FB; color: var(--dsa-texto-suave, #5F5E5A); box-shadow: none; }
}

/* --- 7 · Respeto por quien no quiere movimiento ------------ */
@media (prefers-reduced-motion: reduce) {
  .dsa-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .dsa-barra > span { transition: none; width: var(--v, 0%); }
  .dsa-hover, .dsa-ico, .dsa-flecha, .dsa-subraya::after { transition: none; }
  .dsa-latido, .dsa-punto-vivo::after, .dsa-brillo.is-vis::before, .dsa-pasos > li { animation: none; }
  .dsa-pasos > li:first-child { border-left-color: var(--sol, #4BCDE7); background: #fff; color: var(--dsa-tinta, #171B45); }
}
@media print {
  .dsa-rv { opacity: 1 !important; transform: none !important; }
  .dsa-barra > span { width: var(--v, 0%); }
  .dsa-latido, .dsa-punto-vivo::after, .dsa-pasos > li { animation: none; }
}