{
  "version": "1.0.0",
  "requirements": [
    {
      "id": "intent",
      "title": "Intención y contexto",
      "description": "Describe qué ayuda a entender o hacer, dónde aparece y qué debe atraer primero la atención. Define si es una interacción independiente o parte de una composición. Las referencias inspiran; no autorizan copiar código ni recursos."
    },
    {
      "id": "behavior",
      "title": "Disparador y estados",
      "description": "Especifica evento o umbral de entrada, estado inicial, activo y final, repetición, reversa e interrupción. Para scroll: contenedor, inicio y fin del tramo, dirección y comportamiento al volver. Evita bloquear el desplazamiento nativo."
    },
    {
      "id": "timing",
      "title": "Un ritmo definido",
      "description": "Declara duración, delay, stagger, easing y distancias con sus unidades y límites. Distingue valores configurables de constantes internas. En una página comparte un preset: jerarquía, entradas, pausas de lectura y cierre; revisa las transiciones entre secciones."
    },
    {
      "id": "structure",
      "title": "HTML, estilos y contenido",
      "description": "Incluye marcado semántico, selectores y estructura necesarios, estilos acotados a la raíz, estados de foco y assets con dimensiones. Conserva textos legibles y enlaces reales. Documenta qué puede personalizarse sin romper el efecto."
    },
    {
      "id": "mobile",
      "title": "Una versión móvil intencional",
      "description": "Define la adaptación por breakpoint y orientación: reduce distancias, evita hover como único acceso y convierte escenas fijas complejas en flujo vertical. Controles de al menos 44 × 44 CSS px como objetivo de este catálogo; prueba toque, zoom al 200 %, áreas seguras y texto largo."
    },
    {
      "id": "accessibility",
      "title": "Accesibilidad y movimiento reducido",
      "description": "Define explícitamente la alternativa con prefers-reduced-motion: contenido estático visible o cambio inmediato de estado. Mantén navegación por teclado, foco visible, nombres accesibles y lectura sin duplicados. Añade pausa a bucles persistentes. No comuniques información solo mediante movimiento."
    },
    {
      "id": "fallback",
      "title": "Sin JavaScript y con fallos",
      "description": "La información esencial debe seguir disponible sin JavaScript. Documenta qué interacciones requieren JS y su alternativa. Comprueba APIs necesarias antes de usarlas; si fallan, muestra el estado final legible. No dejes contenido permanentemente transparente."
    },
    {
      "id": "performance",
      "title": "Rendimiento con evidencia",
      "description": "Prioriza transform y opacity; mide máscaras, filtros y cambios de altura. Agrupa lecturas y escrituras del DOM, limita trabajo por frame y detén bucles fuera de vista. Carga recursos pesados bajo demanda. Define un presupuesto de peso/fluidez por proyecto y registra mediciones, dispositivo y navegador; no inventes resultados."
    },
    {
      "id": "lifecycle",
      "title": "Montaje, limpieza e integración",
      "description": "Expón mount(root, options) y destroy(), o equivalentes documentados. Limpia listeners, observers, timers, requestAnimationFrame y animaciones; restaura estilos/DOM modificados. Declara comportamiento ante remontaje. Inicializa en cliente y verifica SSR/hidratación, navegación de Astro y contenido dinámico de WordPress."
    },
    {
      "id": "dependencies",
      "title": "Motor y dependencias justificadas",
      "description": "Declara el motor real y por qué se necesita. Si añade paquetes, registra nombre exacto, versión comprobada, plugins, importaciones, licencia y fecha de revisión; fija la versión en el lockfile del cliente. Evita dos motores escribiendo la misma propiedad. Una opción de la guía no es una dependencia del recurso."
    },
    {
      "id": "handoff",
      "title": "Un paquete que otra IA entienda",
      "description": "Entrega fuente, CSS, tipos, demo reproducible, adaptadores, manifest.json, instrucciones, licencia y este contrato. Documenta restricciones y compatibilidad comprobada. Incluye el código en la copia para IA; no dependas de que pueda abrir un catálogo privado."
    },
    {
      "id": "validation",
      "title": "Pruebas antes de entregar",
      "description": "Revisa 320, 375, 390, 768 y 1440 px, retrato/paisaje, teclado, toque, movimiento reducido, sin JS, resize, scroll rápido y vuelta atrás. Comprueba rutas, montaje/desmontaje repetido y el framework real. En composiciones recorre la página completa. Registra resultado y evidencia; distingue pendiente, aprobado y no aplicable con motivo."
    }
  ],
  "libraries": [
    {
      "id": "native",
      "name": "CSS + APIs del navegador",
      "when": "Entradas, estados, máscaras sencillas e interacciones. Motor de los 36 efectos nativos y 6 composiciones originales.",
      "package": "Ninguno",
      "scope": "Next · Astro · WordPress · HTML",
      "note": "CSS, Web Animations API e IntersectionObserver según el recurso. Consulta el motor declarado en cada paquete.",
      "url": "https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API"
    },
    {
      "id": "gsap",
      "name": "GSAP + ScrollTrigger",
      "when": "Cuando una secuencia necesita una timeline compleja, sincronización con scroll, pinning o scrub.",
      "package": "gsap / plugin ScrollTrigger",
      "scope": "Next · Astro · WordPress · HTML",
      "note": "El archivo incluye tres demos GSAP y una composición GSAP/Three. Declara inicio/fin de cada tramo, desmontaje y alternativa móvil. Úsalo cuando la complejidad lo justifique.",
      "url": "https://gsap.com/docs/v3/Plugins/ScrollTrigger/"
    },
    {
      "id": "motion",
      "name": "Motion para React",
      "when": "Cuando la interfaz React necesita animar cambios de layout o transiciones entre elementos compartidos.",
      "package": "motion / importación motion/react",
      "scope": "Next / React · isla React en Astro",
      "note": "Esta opción usa React. Para WordPress sin React, conserva el motor nativo o una solución independiente del framework.",
      "url": "https://motion.dev/docs/react-layout-animations"
    },
    {
      "id": "three",
      "name": "Three.js",
      "when": "Para una escena 3D real: geometría, cámara y materiales. Una inclinación CSS de tarjeta no lo necesita.",
      "package": "three",
      "scope": "Cliente · carga bajo demanda",
      "note": "El archivo incluye tres demos WebGL y una composición GSAP/Three. Define alternativa estática y presupuesto de recursos. Libera geometrías, materiales, texturas y renderer al desmontar.",
      "url": "https://threejs.org/"
    },
    {
      "id": "lottie",
      "name": "dotLottie",
      "when": "Para reproducir una animación vectorial preparada como asset Lottie o .lottie.",
      "package": "@lottiefiles/dotlottie-web",
      "scope": "Next · Astro · WordPress · HTML",
      "note": "Incluye reproductor, archivo y derechos del asset. Define pausa, movimiento reducido y alternativa estática.",
      "url": "https://github.com/LottieFiles/dotlottie-web"
    }
  ]
}