/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   Capa de movimiento de Poyntia · movimiento-v1.css (8-oct-2026)
   Pablo: «todo tiene un poco de movimiento» (spacefs.com). Medido en su código: docs/comercial/outreach-2026-10-07/web/MOVIMIENTO-SPACEFS-2026-10-08.md
   ADITIVA: se monta con dos líneas y no cambia el texto ni la posición final de nada:
     <link rel="stylesheet" href="assets/movimiento-v1.css">            (en <head>, DESPUÉS de las hojas de la página)
     <script src="assets/movimiento-v1.js" defer></script>                (al final, con los demás)
   Reglas de la capa:
     · Las dos curvas de dd, con su mismo reparto (y el de su menú, nav-v1.css):
         --ease    (.22,1,.36,1) para lo que ENTRA: hero, cabecera, bloques, respuesta de una pregunta;
         --ease-ui (.4,0,.2,1)   para lo que RESPONDE al ratón o al teclado: flechas, pregunta, sombra.
     · Duraciones y recorridos de Space y del menú de dd: bloques 0,7 s y 18 u; hero 1,1 s y 20 u, cada 0,12 s; cabecera 0,6 s, 8 px.
     · Sólo se anima transform y opacity.
     · SIN JavaScript todo se ve: lo que espera a revelarse sólo se oculta bajo .mov-ok, que pone el JS.
       La entrada del hero es una animación CSS que termina sola y sólo corre si hay JS (@media scripting).
     · Con «movimiento reducido» no se mueve nada y todo está visible.
     · En móvil, menos recorrido, escalonado más corto, sin hover y sin reposo.
   Lo que NO toca: el menú (.mn, nav-v1.css), el polvo (#arte), el interior de las mini-demos (.mini, .p-*, .z-*) y la escena de casos.
   Atributos que dd puede poner (todos opcionales; sin ellos la capa usa las clases de las páginas):
     data-mov="revela"     revelar este elemento al asomar          data-mov="escalona"   revelar sus hijos uno tras otro
     data-mov="no"         no animar nada aquí dentro               data-mov="hero"       añadirlo a la entrada del hero
     data-mov-reposo       el ÚNICO elemento que respira en su pantalla
     data-mov-barra        una pieza de la cabecera que gana sombra al bajar (si su ::after está libre y no recorta)
     data-mov-cifra        la cifra cuenta desde 0 al verse (sólo si la página la trae)
     data-mov-polvo="0…1"  intensidad del polvo mientras esa sección ocupa la pantalla (APAGADO: decisión de Pablo y dd)
     data-mov-fondo        el fondo «red» de fondo-v1.js (opcional, otra línea; ver ese fichero)
   Además, .mov-abajo en <html> en cuanto se baja de la cabecera: por si la cabecera quiere reaccionar en su propia hoja.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --mov-ease: var(--ease, cubic-bezier(.22, 1, .36, 1));        /* lo que entra */
  --mov-ease-ui: var(--ease-ui, cubic-bezier(.4, 0, .2, 1));    /* lo que responde */
  --mov-t-ui: .2s;          /* flechas, pregunta, sombra de la barra (la flecha de las tarjetas de sectores de dd: 0,2 s) */
  --mov-t-entra: .7s;       /* revelado de bloques (Space: 0,7 s) */
  --mov-t-hero: 1.1s;       /* entrada del hero (Space: 1,1 s; con esta curva el 90 % del recorrido llega a 0,41 s) */
  --mov-esc: 80ms;          /* escalonado entre hermanos que entran juntos */
  --mov-esc-hero: .12s;     /* escalonado del hero (Space: 0,11–0,14 s) */
  --mov-d: calc(18 * var(--u, 1px));        /* recorrido del revelado (el menú de dd: 18 u; Space: 20 px) */
  --mov-d-hero: calc(20 * var(--u, 1px));   /* recorrido del hero (Space: 20 px) */
  --mov-flecha: 3px;        /* lo que avanza una flecha (igual que las tarjetas de sectores) */
}
@media (max-width: 640px) {
  :root { --mov-d: 10px; --mov-d-hero: 12px; --mov-esc: 60ms; --mov-esc-hero: .09s; --mov-t-entra: .6s; --mov-t-hero: .9s }
}

@keyframes mov-sube { from { opacity: 0; transform: translate3d(0, var(--mov-d-hero), 0) } }
@keyframes mov-baja { from { opacity: 0; transform: translate3d(0, -8px, 0) } }
@keyframes mov-aparece { from { opacity: 0; transform: translate3d(0, -6px, 0) } }
@keyframes mov-respira { 0%, 100% { opacity: 0 } 50% { opacity: .75 } }

/* ── 1 · ENTRADA DEL HERO Y DE LA CABECERA, al cargar: sólo CSS, termina sola; sin JS no corre (scripting: none) ─────────
   Se anima el contenedor de cada pieza (aviso, titular, subtítulo, botones, líneas): los idiomas reescriben lo de dentro
   y la animación no se repite. «backwards»: al terminar no queda ningún transform puesto. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hero > .aviso, .hero > h1, .hero > .lede, .hero > .hero-cta, .hero > .hero-botones, .hero > .hero-sub, .hero [data-mov="hero"] {
    animation: mov-sube var(--mov-t-hero) var(--mov-ease) backwards;
    animation-delay: calc(.05s + var(--mov-hi, 0) * var(--mov-esc-hero));
  }
  .hero > h1 { --mov-hi: 1 }
  .hero > .lede { --mov-hi: 2 }
  .hero > .hero-cta, .hero > .hero-botones { --mov-hi: 3 }
  .hero > .hero-sub { --mov-hi: 4 }
  .hero > .hero-sub2 { --mov-hi: 5 }
  .hero[data-mov="no"] > *, .hero [data-mov="no"] { animation: none }
  /* header.top: baja 8 px y aparece cuando el titular ya está entrando (Space: 0,6 s y 0,3 s de retraso). Lo que hay dentro (el menú) es de dd. */
  .top { animation: mov-baja .6s var(--mov-ease) .3s backwards }
}

/* ── 2 · REVELADO AL ASOMAR, una sola vez (lo marca movimiento-v1.js; sin JS no hay .mov-ok y nada se oculta) ───── */
@media (prefers-reduced-motion: no-preference) {
  .mov-ok .mov-espera { opacity: 0; transform: translate3d(0, var(--mov-d), 0) }
  .mov-ok .mov-revela {
    transition: opacity var(--mov-t-entra) var(--mov-ease), transform var(--mov-t-entra) var(--mov-ease);
    transition-delay: calc(var(--mov-i, 0) * var(--mov-esc));
    will-change: opacity, transform;          /* sólo mientras dura: el JS quita la clase al terminar */
  }
}

/* ── 3 · LA CABECERA AL BAJAR: la capa sólo pone .mov-abajo en <html>; la sombra, únicamente en lo que dd marque con data-mov-barra
   (las piezas de la cabecera son de dd: con su ::after libre y sin overflow:hidden, que recortaría la sombra). ───────────── */
.mov-nav [data-mov-barra] { position: relative }
.mov-nav [data-mov-barra]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 14px 34px -16px rgba(14, 15, 18, .34); opacity: 0;
}
.mov-abajo [data-mov-barra]::after { opacity: 1 }
@media (prefers-reduced-motion: no-preference) {
  .mov-nav [data-mov-barra]::after { transition: opacity var(--mov-t-ui) var(--mov-ease-ui) }
}

/* ── 4 · HOVER Y FOCO, sólo en lo que se pulsa y no tiene ya el suyo ──────────────────────────────────────────────────
   Las tarjetas de sectores (.sector-c) ya traen su hover en nav-v1.css (sombra y flecha de 3 px a 0,2 s): aquí sólo se revelan.
   El resto de tarjetas no son enlaces: no suben, porque prometerían un clic que no existe. */
@media (prefers-reduced-motion: no-preference) {
  /* flechas: la del aviso del hero y la última de cada píldora (los botones «Ver Poyntia Grid →» de los casos) */
  .mov-ok .aviso .fl svg, .mov-ok .pill > svg:last-child { transition: transform var(--mov-t-ui) var(--mov-ease-ui) }
  .mov-ok .aviso:focus-visible .fl svg, .mov-ok .pill:focus-visible > svg:last-child { transform: translate3d(var(--mov-flecha), 0, 0) }
  /* preguntas: la pregunta avanza 4 px; la respuesta entra al abrir (Space: 0,4 s) */
  .mov-ok .faq-lista summary > span:first-child { transition: transform var(--mov-t-ui) var(--mov-ease-ui) }
  .mov-ok .faq-lista summary:focus-visible > span:first-child { transform: translate3d(4px, 0, 0) }
  .mov-ok .faq-lista details[open] > :not(summary) { animation: mov-aparece .4s var(--mov-ease) backwards }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .mov-ok .aviso:hover .fl svg, .mov-ok .pill:hover > svg:last-child { transform: translate3d(var(--mov-flecha), 0, 0) }
  .mov-ok .faq-lista summary:hover > span:first-child { transform: translate3d(4px, 0, 0) }
}

/* ── 5 · REPOSO: UN elemento por pantalla respira (una sombra que va y viene), sólo mientras se ve y nunca en móvil ─── */
@media (prefers-reduced-motion: no-preference) {
  .mov-ok .mov-reposo { position: relative }
  .mov-ok .mov-reposo::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    box-shadow: 0 0 0 6px rgba(14, 15, 18, .045), 0 18px 36px -14px rgba(14, 15, 18, .5);
  }
  .mov-ok .mov-reposo.mov-reposa::after { animation: mov-respira 4.2s var(--mov-ease-ui) infinite }
  .mov-ok .mov-reposo.mov-reposa:hover::after, .mov-ok .mov-reposo.mov-reposa:focus-visible::after { animation: none }
}

/* ── 6 · CIFRAS QUE CUENTAN ([data-mov-cifra]): el JS cambia el texto con el ancho fijado; aquí nada más ─────────── */
.mov-cuenta { white-space: nowrap }

/* ── 7 · EL POLVO POR SECCIÓN ([data-mov-polvo]) · APAGADO mientras nadie ponga el atributo (el polvo es de dd y Pablo lo aprobó así).
   Si se enciende: la opacidad que dd calcula (--arte-o) se mezcla con la de la sección; el hero no lo lleva, así que arriba no cambia. */
html.mov-polvo #arte, html.mov-polvo #arte-v {
  opacity: calc(var(--arte-o, 1) * (1 - var(--mov-pw, 0)) + var(--mov-pt, 0) * var(--mov-pw, 0));
}

/* ── impresión: lo que esperaba a revelarse se imprime visible ────────────────────────────────────────────────── */
@media print {
  .mov-espera { opacity: 1 !important; transform: none !important }
  .mov-fondo { display: none !important }
}