/* ========================================================= ANIMACIONES --------------------------------------------------------- Reglas de entrada: solo se aplican si la pagina tiene la clase "js" en (la agrega el script del ). Sin JS -o con "menos movimiento" activado- todo se ve estatico y completo, nunca escondido. Para ajustar el ritmo general, tocar --vel y --escalon. ========================================================= */ :root { --vel: .55s; /* duracion base */ --escalon: .09s; /* retraso entre filas */ --curva: cubic-bezier(.22, .61, .36, 1); /* salida suave */ } /* ---------- Keyframes ---------- */ @keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes aparecerTarjeta { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes aparecerLateral { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } } @keyframes popBadge { 0% { opacity: 0; transform: scale(.55); } 65% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } } /* Reflejo que cruza el bloque azul una sola vez */ @keyframes destello { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } } @keyframes latido { 0%, 100% { transform: none; } 50% { transform: scale(1.04); } } /* ---------- Entrada del bloque hero ---------- */ .js .hero { animation: aparecerTarjeta var(--vel) var(--curva) both; position: relative; overflow: hidden; } .js .hero::after { content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent); animation: destello 1.15s ease-out .45s both; pointer-events: none; } .js .hero__label { animation: aparecerLateral .5s var(--curva) .12s both; } .js .hero__titulo { animation: aparecerLateral .5s var(--curva) .2s both; } .js .hero__valor { animation: aparecerLateral .5s var(--curva) .26s both; } .js .hero__bajada { animation: aparecer .5s var(--curva) .3s both; } .js .aranceles thead th { animation: aparecer .45s var(--curva) .3s both; } /* ---------- Entrada escalonada de las filas ---------- */ .js .fila-anim { animation: aparecer var(--vel) var(--curva) both; animation-delay: calc(.34s + var(--i) * var(--escalon)); } .js .fila-anim .badge { animation: popBadge .45s var(--curva) both; animation-delay: calc(.56s + var(--i) * var(--escalon)); } /* El numero se anima contando (ver animaciones.js): fijamos el ancho de los digitos para que no "tiemble" mientras cuenta. */ .precio-final { font-variant-numeric: tabular-nums; } .precio-final.contando { color: var(--verde); opacity: .92; } .precio-final.contado { animation: latido .35s var(--curva); } /* ---------- Bloques de abajo (becas, CTA, nota legal) ---------- */ .js .bloque-anim { animation: aparecer var(--vel) var(--curva) both; animation-delay: calc(.4s + var(--i) * .07s); } /* ---------- Home / 404 ---------- */ /* Las tarjetas del listado aparecen al entrar en pantalla (lo marca el JS con la clase "visible"). El retraso de 1.5s del caso base es la red de seguridad: si el JS no cargara, igual terminan visibles. */ .js .grilla__item { opacity: 0; animation: aparecer .4s var(--curva) 1.5s both; } .js .grilla__item.visible { animation: aparecer var(--vel) var(--curva) both; animation-delay: calc(var(--i) * .06s); } /* ---------- Interacciones (hover / foco / click) ---------- */ /* Cada fila es una tarjeta: al pasar el mouse se resalta el borde */ .aranceles tbody td { transition: border-color .2s ease, background-color .2s ease; } @media (hover: hover) and (min-width: 721px) { .aranceles tbody tr:hover td { border-top-color: var(--acento); border-bottom-color: var(--acento); background: #fbfdff; } .aranceles tbody tr:hover td:first-child { border-left-color: var(--acento); } .aranceles tbody tr:hover td:last-child { border-right-color: var(--acento); } .aranceles tbody tr:hover .badge--on { transform: translateY(-1px); } .aranceles tbody tr:hover .precio-final { transform: scale(1.025); } } .badge { transition: transform .2s var(--curva); } .precio-final { display: block; transform-origin: right center; transition: transform .25s var(--curva); } /* Subrayado animado del link de becas */ .becas a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; transition: background-size .25s var(--curva); } .becas a:hover { background-size: 0 1px; background-position: 100% 100%; } /* Boton de accion: se levanta y la flecha se corre */ .cta__boton { position: relative; transition: transform .2s var(--curva), box-shadow .2s var(--curva), background-color .2s ease; } .cta__boton::after { content: "→"; display: inline-block; margin-left: 8px; font-style: normal; transition: transform .2s var(--curva); } .cta__boton:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 40, 87, .28); } .cta__boton:hover::after { transform: translateX(4px); } .cta__boton:active { transform: translateY(0); box-shadow: none; } /* Tarjetas del listado */ .mini { transition: transform .18s var(--curva), border-color .18s ease, box-shadow .18s var(--curva); } .mini:hover { transform: translateY(-3px); border-color: var(--acento); box-shadow: 0 10px 24px rgba(0, 40, 87, .10); } .mini:active { transform: translateY(-1px); } .mini__nombre { transition: color .18s ease; } /* Foco visible y accesible en todo lo navegable por teclado */ a:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; } /* ---------- Menos movimiento: se apaga todo ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .grilla__item { opacity: 1 !important; } .hero::after { display: none !important; } }