/* ================================================================
   formulario-anim.css — Animaciones del formulario publico
   Franja ticker superior + emojis flotantes decorativos.
   ================================================================ */

@keyframes ticker-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes float {
    0%   { transform: translateY(0px)   rotate(0deg);  opacity: 0.14; }
    40%  { transform: translateY(-20px) rotate(5deg);  opacity: 0.24; }
    70%  { transform: translateY(-8px)  rotate(-3deg); opacity: 0.18; }
    100% { transform: translateY(0px)   rotate(0deg);  opacity: 0.14; }
}

.ticker-band {
    position: fixed;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 300;
    padding: 0;
    line-height: 1;
    background: linear-gradient(90deg, #7625f2 0%, #a855f7 40%, #6366f1 70%, #7625f2 100%);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

.ticker-band--top {
    top: 0;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}

.ticker-track {
    display: inline-flex;
    white-space: nowrap;
    width: max-content;
    padding: 8px 0;
}

.ticker-track--left { animation: ticker-left 10s linear infinite; }

.ticker-item {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0 0.8rem;
    gap: 0.4rem;
}

.ticker-sep {
    color: rgba(255,255,255,0.50);
    font-size: 0.55rem;
    margin-left: 0.6rem;
}

body.has-ticker .page-wrapper {
    padding-top: 58px;
}

.floatante {
    position: fixed;
    pointer-events: none;
    user-select: none;
    font-size: 1.5rem;
    animation: float 5s ease-in-out infinite;
    z-index: 1;
    line-height: 1;
}

.fl-1 { bottom: 18%; left:  3%; animation-delay: 0s;   animation-duration: 5.2s; font-size: 1.4rem; }
.fl-2 { bottom: 40%; right: 3%; animation-delay: 1.3s; animation-duration: 4.7s; font-size: 1.3rem; }
.fl-3 { bottom: 65%; left:  5%; animation-delay: 2.6s; animation-duration: 6.0s; font-size: 1.6rem; }
.fl-4 { bottom: 78%; right: 5%; animation-delay: 0.8s; animation-duration: 5.5s; font-size: 1.2rem; }
.fl-5 { bottom: 52%; right: 2%; animation-delay: 3.4s; animation-duration: 4.4s; font-size: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
    .floatante    { animation: none; opacity: 0.10; }
}