/* ========================================================================== Animaciones Regla de oro: todo el contenido es legible y utilizable sin JavaScript y sin movimiento. Las animaciones sólo se activan cuando el script marca y el usuario no ha pedido reducir el movimiento. ========================================================================== */ /* --- Fotogramas --- */ @keyframes aparecer { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes aparecer-izq { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } } @keyframes aparecer-der { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } } @keyframes acercar { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } } @keyframes desplazar { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); } 70% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } @keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes derivar { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(24px, -18px) scale(1.06); } 66% { transform: translate(-18px, 14px) scale(0.97); } 100% { transform: translate(0, 0) scale(1); } } /* --- Revelado al hacer scroll --- */ .js [data-revelar] { opacity: 0; will-change: opacity, transform; } .js [data-revelar].es-visible { animation: aparecer var(--dur-reveal) var(--ease-out) forwards; animation-delay: var(--retraso, 0ms); } .js [data-revelar="izquierda"].es-visible { animation-name: aparecer-izq; } .js [data-revelar="derecha"].es-visible { animation-name: aparecer-der; } .js [data-revelar="escala"].es-visible { animation-name: acercar; } /* Escalonado automático dentro de un grupo */ .js [data-escalonar] > * { opacity: 0; } .js [data-escalonar].es-visible > * { animation: aparecer var(--dur-reveal) var(--ease-out) forwards; } .js [data-escalonar].es-visible > *:nth-child(1) { animation-delay: 60ms; } .js [data-escalonar].es-visible > *:nth-child(2) { animation-delay: 140ms; } .js [data-escalonar].es-visible > *:nth-child(3) { animation-delay: 220ms; } .js [data-escalonar].es-visible > *:nth-child(4) { animation-delay: 300ms; } .js [data-escalonar].es-visible > *:nth-child(5) { animation-delay: 380ms; } .js [data-escalonar].es-visible > *:nth-child(6) { animation-delay: 460ms; } .js [data-escalonar].es-visible > *:nth-child(7) { animation-delay: 540ms; } .js [data-escalonar].es-visible > *:nth-child(8) { animation-delay: 620ms; } .js [data-escalonar].es-visible > *:nth-child(n + 9) { animation-delay: 700ms; } /* --- Título que se ensambla palabra por palabra --- El texto completo permanece en el DOM: sólo se envuelve cada palabra en un , así que buscadores y lectores de pantalla siguen leyendo la frase. */ .js .titulo-animado .palabra { display: inline-block; opacity: 0; transform: translateY(0.72em) rotate(2deg); filter: blur(6px); } /* Al partir el título, cada palabra pasa a ser un inline-block con caja propia, y el recorte del degradado del contenedor deja de alcanzarla. Por eso el degradado se vuelve a aplicar palabra por palabra. */ .js .titulo-animado .texto-degradado .palabra { background-image: linear-gradient(100deg, var(--cyan-500), var(--navy-600) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; } .js .seccion--oscura .titulo-animado .texto-degradado .palabra, .js .estetica .titulo-animado .texto-degradado .palabra, .js .cta-final .titulo-animado .texto-degradado .palabra { background-image: linear-gradient(100deg, var(--cyan-300), var(--cyan-500)); } .js .titulo-animado.es-visible .palabra { animation: palabra-entra 780ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 62ms); } @keyframes palabra-entra { to { opacity: 1; transform: none; filter: blur(0); } } /* --- Fondos vivos --- */ .hero__aura--uno { animation: derivar 22s var(--ease-in-out) infinite; } .hero__aura--dos { animation: derivar 28s var(--ease-in-out) infinite reverse; } .tarjeta-flotante--horario { animation: flotar 6s var(--ease-in-out) infinite; } .tarjeta-flotante--consejo { animation: flotar 7.5s var(--ease-in-out) infinite 0.8s; } /* --- Subrayado animado en enlaces de texto --- */ .subrayado-animado { background-image: linear-gradient(var(--cyan-500), var(--cyan-500)); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; text-decoration: none; transition: background-size var(--dur) var(--ease-out); } .subrayado-animado:hover { background-size: 100% 2px; } /* --- Parallax suave (lo alimenta animaciones.js) --- */ .js [data-parallax] { will-change: transform; transform: translate3d(0, var(--parallax, 0px), 0); } /* --- Transición entre páginas --- */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: salir-pagina 200ms var(--ease-in-out) both; } ::view-transition-new(root) { animation: entrar-pagina 380ms var(--ease-out) both; } @keyframes salir-pagina { to { opacity: 0; transform: translateY(-8px); } } @keyframes entrar-pagina { from { opacity: 0; transform: translateY(12px); } } /* ========================================================================== Respeto al movimiento reducido. Obligatorio: hay pacientes con migraña, vértigo y trastornos vestibulares. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js [data-revelar], .js [data-escalonar] > *, .js .titulo-animado .palabra { opacity: 1 !important; transform: none !important; filter: none !important; } .js [data-parallax] { transform: none !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }