/*================================================== SolucionaPC — animations.css Animaciones con propósito, no decoración suelta: - Entrada del hero (una sola vez, al cargar) - Aparición de tarjetas al hacer scroll (con reserva segura: visibles por defecto si el JS no llega a activarlas) - Microinteracciones puntuales (FAQ, botones, selector de idioma) Todo respeta prefers-reduced-motion al final del archivo. ==================================================*/ /* ---------- Entrada del hero ---------- */ @keyframes heroSubeYAparece{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } } .search-box{ animation:heroSubeYAparece .7s cubic-bezier(.16,1,.3,1) .2s both; } /* ---------- Aparición de tarjetas al hacer scroll ---------- Progresivo de verdad: las tarjetas son visibles por defecto. Solo se ocultan-y-revelan si app.js confirma que pudo arrancar (añade .js-listo a ), así que un fallo de JS nunca deja contenido invisible. */ html.js-listo [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); } html.js-listo [data-reveal].is-visible{ opacity:1; transform:translateY(0); } /* Aparición escalonada dentro de una misma rejilla */ html.js-listo [data-reveal]:nth-child(2){ transition-delay:.06s; } html.js-listo [data-reveal]:nth-child(3){ transition-delay:.12s; } html.js-listo [data-reveal]:nth-child(4){ transition-delay:.18s; } html.js-listo [data-reveal]:nth-child(5){ transition-delay:.24s; } html.js-listo [data-reveal]:nth-child(6){ transition-delay:.3s; } /* ---------- Microinteracciones ---------- */ /* Pulsación de botones: un pequeño "asentamiento" al hacer clic, igual que en iOS/macOS — feedback táctil sin exagerar */ .contact-card-cta:active, .search-box button:active, .compartir-btn:active, .card-link:active{ transform:scale(.97); } /* Icono +/– del acordeón FAQ: giro suave en vez de salto */ .faq-item summary .faq-icon svg{ transition:transform .35s cubic-bezier(.16,1,.3,1); } /* Aparición del contenido del FAQ al abrirse */ @keyframes faqAparece{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } } .faq-item[open] .faq-answer{ animation:faqAparece .3s ease-out both; } /* Selector de idioma: el desplegable aparece con un pequeño gesto, no un corte seco */ @keyframes menuAparece{ from{ opacity:0; transform:translateY(-6px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } } .selector-idioma-lista{ animation:menuAparece .2s cubic-bezier(.16,1,.3,1) both; } /* ---------- Reduce motion: honrado de verdad, no solo listado ---------- */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } html.js-listo [data-reveal]{ opacity:1; transform:none; } }