/* * Movimiento. * * Se reproduce el vocabulario del sitio anterior, que era el de Tailwind: una * entrada `fadeInUp` (opacidad más 20 px de subida), elevación de las tarjetas * al pasar el ratón y escalado de los iconos, todo con la curva * cubic-bezier(.4, 0, .2, 1) y unos 300 ms. No se inventa nada nuevo: quien * conocía el sitio tiene que reconocerlo. * * DOS REGLAS QUE MANDAN SOBRE EL RESTO: * * 1. **Sin JavaScript, todo se ve.** El estado oculto vive bajo `.js`, una * clase que añade un script diminuto en el . Si el script no llega o * falla, no hay clase, no hay `opacity: 0` y la página se lee entera. Una * animación de entrada que se traga el contenido cuando algo va mal es una * forma cara de perder un cliente. * * 2. **Se respeta quien pide menos movimiento.** No es un detalle de * cortesía: a parte de la gente el desplazamiento con paralaje y las * entradas encadenadas le producen mareo real. Con * prefers-reduced-motion todo aparece de golpe, sin transiciones. */ @keyframes vi-fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ------------------------------------------------- entrada al hacer scroll */ .js .vi-reveal { opacity: 0; } .js .vi-reveal.is-visible { animation: vi-fade-in-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; } /* Escalonado dentro de una misma rejilla: las tarjetas entran una detrás de otra en vez de las ocho a la vez, que se lee como un parpadeo. El retraso es corto a propósito — pasado medio segundo deja de parecer fluido y empieza a parecer lento. */ .js .vi-reveal.is-visible[style*="--vi-delay"] { animation-delay: var(--vi-delay); } /* -------------------------------------------------------------- tarjetas */ .vi-card, .vi-stat { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .vi-card:hover { transform: translateY(-6px); border-color: rgba(212, 176, 106, 0.34); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.75); } /* El icono reacciona al pasar por la tarjeta entera, no sólo por encima de él —el patrón `group-hover` del sitio anterior—. Hace que la tarjeta se sienta como un solo objeto y no como un montón de piezas sueltas. */ .vi-card .vi-icon { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease; } .vi-card:hover .vi-icon { transform: scale(1.1); color: var(--wp--preset--color--teal, #2ed3bd); } .vi-card h3 a { transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .vi-card:hover h3 a { color: var(--wp--preset--color--gold, #d8b571); } /* --------------------------------------------------------------- botones */ .wp-block-button__link { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, color 0.3s ease; } .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(216, 181, 113, 0.9); } /* Al pulsar vuelve a su sitio: sin esto el botón se queda flotando y no da la sensación de haberse hundido bajo el dedo. */ .wp-block-button__link:active { transform: translateY(0); } /* ------------------------------------------------------- sello del héroe */ /* Respiración muy lenta y muy corta. Es el único elemento que se mueve solo en toda la página: dos cosas latiendo a la vez ya no es un acento, es ruido. */ @keyframes vi-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .vi-cert { animation: vi-breathe 6s ease-in-out infinite; } .vi-seal { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .vi-cert:hover .vi-seal { transform: scale(1.06); } /* --------------------------------------------------- enlaces y resultados */ .vi-checks li, .tx-track__step { transition: color 0.3s ease, border-color 0.3s ease; } /* El resultado de una verificación o un seguimiento aparece tras enviar el formulario: entra en vez de saltar, para que se note que ha cambiado algo. */ .tx-verify__result, .tx-track__card, .tx-dl__card, .tx-form__done { animation: vi-fade-in-up 0.45s cubic-bezier(0.4, 0, 0.2, 1) both; } /* ------------------------------------------------------- menos movimiento */ @media (prefers-reduced-motion: reduce) { .js .vi-reveal, .js .vi-reveal.is-visible, .tx-verify__result, .tx-track__card, .tx-dl__card, .tx-form__done, .vi-cert { animation: none !important; opacity: 1 !important; transform: none !important; } .vi-card, .vi-stat, .vi-card .vi-icon, .wp-block-button__link, .vi-seal { transition: none !important; } .vi-card:hover, .wp-block-button__link:hover { transform: none; } }