/* Animated Text Ticker CSS v1.2.0 - Position Controls Added */

.animated-ticker-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 40px;
}

.animated-ticker-wrapper {
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: 100%;
    height: 100%;
}

.animated-ticker-text {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    animation: ticker-scroll linear infinite;
    line-height: 1.5;
    /* CRÍTICO: El texto empieza desde el borde derecho VISIBLE (100%), 
       no desde fuera de pantalla. Esto elimina el retraso de 7-9 segundos */
}

/* Animación LTR (derecha a izquierda) - DEFAULT 
   El texto aparece desde el borde derecho y se mueve hacia la izquierda */
@keyframes ticker-scroll {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

/* Animación RTL (izquierda a derecha) 
   El texto aparece desde el borde izquierdo y se mueve hacia la derecha */
@keyframes ticker-scroll-rtl {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}

/* Transición suave para hover */
.animated-ticker-container:hover .animated-ticker-text {
    transition: animation-play-state 0.3s ease;
}

/* Responsive - ajustar tamaño en dispositivos móviles */
@media (max-width: 768px) {
    .animated-ticker-container {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .animated-ticker-container {
        font-size: 0.8em;
    }
}