/* ============================================================
   Serafini Scrofani — capa -fx · FIRMA: strata (profundidad multiplano)
   El hero ahora es un VIDEO self-host (base). La firma 'strata' de la capa -fx vive en la profundidad
   por parallax del bloque "por qué independiente" + la deriva del panel de credenciales del hero
   (fx/firma-strata.js) + el dibujo progresivo del timeline en proceso. Todo scoped bajo .fx (removible).
   ============================================================ */
.fx{
  --fx-dur-1:100ms; --fx-dur-2:300ms; --fx-dur-3:460ms;
  --fx-ease-out:cubic-bezier(.23,1,.32,1);
  --fx-ease-out-expo:cubic-bezier(.16,1,.3,1);
  --fx-stagger:60ms;
}

/* ---------- FIRMA strata: parallax de profundidad (driver data-fx="parallax") con headroom REAL (CLS 0) ----------
   El box recibe altura definida para que el 140% del img resuelva (si no, el % colapsa a auto = headroom 0).
   El img va absoluto y CENTRADO (top:-20%) => 20% de colchón arriba y abajo que absorbe el translate del parallax. */
.fx .about__media{overflow:hidden;position:relative;height:clamp(360px,44vw,470px)}
.fx .about__media img[data-fx="parallax"]{position:absolute;left:0;right:0;top:-26%;width:100%;height:152%;
  aspect-ratio:auto;object-fit:cover;will-change:transform}

/* ---------- SP2: "el trámite avanza" — el conector del timeline se dibuja (hookeado al reveal base) ---------- */
.fx .tline__step::before{transform:scaleY(0);transform-origin:top center;
  transition:transform var(--fx-dur-3) var(--fx-ease-out)}
.fx .tline.in .tline__step::before{transform:scaleY(1)}
.fx .tline.in .tline__step:nth-child(1)::before{transition-delay:.10s}
.fx .tline.in .tline__step:nth-child(2)::before{transition-delay:.28s}
.fx .tline.in .tline__step:nth-child(3)::before{transition-delay:.46s}
.fx .tline.in .tline__step:nth-child(4)::before{transition-delay:.64s}
.fx .tline.in .tline__step:nth-child(5)::before{transition-delay:.82s}

/* ---------- strata + color: línea de acento AQUA que se DIBUJA bajo cada título de sección ----------
   Decorativa (::after nuevo) → si nunca llega el .in, simplemente no hay línea (degradación segura). */
.fx .h-sec{position:relative}
.fx .h-sec::after{content:"";position:absolute;left:0;bottom:-14px;height:3px;width:52px;background:var(--aqua);
  border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform var(--fx-dur-3) var(--fx-ease-out) .1s}
.fx .in .h-sec::after,.fx .h-sec.in::after,.fx .page-hero .h-sec::after,.fx .subhero .h-sec::after{transform:scaleX(1)}

/* ---------- pop escalonado de los chips/íconos y los checks AQUA al revelar la card ----------
   SEGURO: usa animation disparada por .in (sin .in => sin animación => estado final visible, no se oculta nada). */
@keyframes fx-pop{from{transform:scale(.72);opacity:.15}to{transform:none;opacity:1}}
.fx .reveal.in .srv__ic,.fx .reveal-list.in .svc .ic{animation:fx-pop var(--fx-dur-2) var(--fx-ease-out) both}
.fx .reveal.in .checks li .ck{animation:fx-pop .4s var(--fx-ease-out) both}
.fx .reveal.in .checks li:nth-child(2) .ck{animation-delay:.05s}
.fx .reveal.in .checks li:nth-child(3) .ck{animation-delay:.10s}
.fx .reveal.in .checks li:nth-child(4) .ck{animation-delay:.15s}
.fx .reveal.in .checks li:nth-child(5) .ck{animation-delay:.20s}
.fx .reveal.in .checks li:nth-child(6) .ck{animation-delay:.25s}

/* ---------- degradación: reduced-motion ANULA todo (estados finales visibles) ---------- */
@media (prefers-reduced-motion: reduce){
  .fx .about__media img[data-fx="parallax"]{top:0;height:100%;transform:none}
  .fx .tline__step::before{transform:scaleY(1);transition:none}
  .fx .h-sec::after{transform:scaleX(1);transition:none}
  .fx .reveal.in .srv__ic,.fx .reveal-list.in .svc .ic,.fx .reveal.in .checks li .ck{animation:none}
}