:root {
    /* Modo Claro */
    --marquee-bg: #ffffff;
    --marquee-border: #f0f0f0;
    --marquee-text: #555555;
    --marquee-dot: #e0e0e0;
    --marquee-highlight-bg: #f8f8f8;
    --marquee-highlight-text: #000000;
    --marquee-fade-start: #ffffff;
    --marquee-fade-end: rgba(255,255,255,0);
}

/* Modo Oscuro */
[data-theme="dark"] {
    --marquee-bg: #1a1a1d;
    --marquee-border: #2c2c30;
    --marquee-text: #aeaeb2;
    --marquee-dot: #3a3a3e;
    --marquee-highlight-bg: #2c2c30;
    --marquee-highlight-text: #f5f5f7;
    --marquee-fade-start: #1a1a1d;
    --marquee-fade-end: rgba(26, 26, 29, 0);
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    background: var(--marquee-bg);
    padding: clamp(8px, 1.5vw, 16px) 0;
    position: relative;
    border-top: 1px solid var(--marquee-border);
    border-bottom: 1px solid var(--marquee-border);
    --fade-width: min(10vw, 60px);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.marquee-container::before,
.marquee-container::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--fade-width);
    z-index: 2;
    pointer-events: none;
}

.marquee-container::before {
    left: 0;
    background: linear-gradient(90deg, var(--marquee-fade-start) 0%, var(--marquee-fade-end) 100%);
}

.marquee-container::after {
    right: 0;
    background: linear-gradient(270deg, var(--marquee-fade-start) 0%, var(--marquee-fade-end) 100%);
}

.marquee {
    display: inline-block;
    white-space: nowrap;
    animation: scroll linear infinite;
    animation-duration: 60s;
    padding-left: 100%;
    will-change: transform;
}

.marquee-content {
    display: inline-flex;
    align-items: center;
    gap: 2em;
}

.marquee span {
    display: inline-flex;
    align-items: center;
    color: var(--marquee-text);
    letter-spacing: 0.3px;
    font-weight: 400;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(13px, 1.5vw, 15px);
    line-height: 1.5;
    position: relative;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.marquee span::after {
    content: "•";
    position: absolute;
    right: -1em;
    color: var(--marquee-dot);
    transition: color 0.3s ease;
}

.marquee span:last-child::after {
    display: none;
}

.highlight {
    color: var(--marquee-highlight-text);
    font-weight: 500;
    padding: 0 clamp(4px, 1vw, 8px);
    background-color: var(--marquee-highlight-bg);
    border-radius: 4px;
    display: inline-block;
    line-height: 1.3;
    font-size: inherit;
    transition: background-color 0.3s ease, color 0.3s ease;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Efecto hover para pausar */
.marquee-container:hover .marquee {
    animation-play-state: paused;
}

/* Optimización para móviles pequeños */
@media (max-width: 480px) {
    .marquee {
        animation-duration: 40s;
    }
    
    .marquee-content {
        gap: 1.5em;
    }
    
    .marquee span::after {
        right: -0.75em;
    }
}

/* Accesibilidad - Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
    .marquee {
        animation: none;
        white-space: normal;
        padding-left: 0;
    }
    
    .marquee-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5em 1.5em;
    }
    
    .marquee span::after {
        display: none;
    }
}