/* ==========================================================================
   ASECONT · Animaciones compartidas (las 4 propuestas)
   Se activan solo si JS agrega .js-anim al <html> y el usuario NO pidió
   reducir movimiento. Sin JS, todo el contenido queda visible.
   Uso en el HTML:
     data-intro            → hijos directos entran en cascada al cargar (hero)
     data-reveal           → aparece al entrar en pantalla (sube)
     data-reveal="left|right|zoom|fade"
     data-stagger          → en el contenedor: escalona los data-reveal hijos
     data-bars             → SVG/grupo con .bar que crecen desde la base
     data-count="16"       → número que cuenta desde 0
     data-lift             → tarjeta que se eleva al pasar el mouse
     data-pulse            → halo que late (botón WhatsApp)
     data-draw             → línea/borde que se dibuja (usa scaleX)
   ========================================================================== */
:root{
  --anim-ease:cubic-bezier(.2,.75,.2,1);
  --anim-dur:.75s;
  --lift-shadow:rgba(20,32,48,.38);
  --pulse-color:rgba(255,255,255,.55);
}

/* Elevación en hover: no depende de JS */
/* Usa la propiedad `translate` (no `transform`) para no chocar con data-reveal */
[data-lift]{transition:translate .28s var(--anim-ease), box-shadow .28s var(--anim-ease), border-color .28s, background-color .28s}
@media (hover:hover){
  [data-lift]:hover{translate:0 -5px; box-shadow:0 18px 34px -20px var(--lift-shadow)}
}

@media (prefers-reduced-motion:no-preference){
  /* Entrada del hero */
  .js-anim [data-intro] > *{opacity:0; transform:translateY(22px); animation:anim-intro .9s var(--anim-ease) forwards}
  .js-anim [data-intro] > *:nth-child(1){animation-delay:.05s}
  .js-anim [data-intro] > *:nth-child(2){animation-delay:.15s}
  .js-anim [data-intro] > *:nth-child(3){animation-delay:.25s}
  .js-anim [data-intro] > *:nth-child(4){animation-delay:.35s}
  .js-anim [data-intro] > *:nth-child(5){animation-delay:.45s}
  .js-anim [data-intro] > *:nth-child(6){animation-delay:.55s}
  .js-anim [data-intro] > *:nth-child(n+7){animation-delay:.65s}
  @keyframes anim-intro{to{opacity:1; transform:none}}

  /* Evita scroll horizontal mientras los elementos laterales esperan su entrada */
  html.js-anim, .js-anim body{overflow-x:clip}

  /* Aparición al hacer scroll (conserva las transiciones de data-lift) */
  .js-anim [data-reveal]{opacity:0; transform:translateY(28px);
    transition:opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease), translate .28s var(--anim-ease), box-shadow .28s var(--anim-ease), border-color .28s, background-color .28s;
    transition-delay:var(--d,0ms), var(--d,0ms), 0s, 0s, 0s, 0s}
  .js-anim [data-reveal="left"]{transform:translateX(-36px)}
  .js-anim [data-reveal="right"]{transform:translateX(36px)}
  .js-anim [data-reveal="zoom"]{transform:scale(.94)}
  .js-anim [data-reveal="fade"]{transform:none}
  .js-anim [data-reveal].is-in{opacity:1; transform:none}

  /* Barras del isotipo que crecen desde la base */
  .js-anim [data-bars] .bar{transform:scaleY(0); transform-origin:50% 100%; transform-box:fill-box; transition:transform 1.1s var(--anim-ease)}
  .js-anim [data-bars] .bar:nth-of-type(2){transition-delay:.14s}
  .js-anim [data-bars] .bar:nth-of-type(3){transition-delay:.28s}
  .js-anim [data-bars].is-in .bar{transform:scaleY(1)}

  /* Líneas que se dibujan */
  .js-anim [data-draw]{transform:scaleX(0); transform-origin:left center; transition:transform 1s var(--anim-ease) .2s}
  .js-anim [data-draw].is-in{transform:scaleX(1)}

  /* Halo del botón de WhatsApp */
  [data-pulse]::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 var(--pulse-color); animation:anim-pulse 2.6s ease-out 1.5s infinite; pointer-events:none}
  @keyframes anim-pulse{0%{box-shadow:0 0 0 0 var(--pulse-color)} 70%{box-shadow:0 0 0 16px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

  /* Cambio de valor (p. ej. fecha del calendario SRI) */
  .anim-swap{animation:anim-swap .45s var(--anim-ease)}
  @keyframes anim-swap{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
}