/* ============================================
   MARQUEE / TEXT SLIDER — Gráfica Rápida
   Arquivo: css/marquee.css
   ============================================ */

/* Wrapper externo — esconde o que passa das bordas */
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 30px 0;
    background: transparent;
}

/* "Inner" — é ele quem se move */
.marquee-inner {
    display: flex;
    width: max-content;
    animation: marquee-left 35s linear infinite;
    will-change: transform;
}

/* Direções */
.marquee-inner.to-left  { animation-name: marquee-left;  }
.marquee-inner.to-right { animation-name: marquee-right; }

/* Pausa ao passar o mouse */
.marquee-wrapper:hover .marquee-inner {
    animation-play-state: paused;
}

/* Keyframes: vai de 0% a -50% porque o conteúdo é duplicado */
@keyframes marquee-left {
    from { transform: translateX(0);    }
    to   { transform: translateX(-50%); }
}

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

/* Lista e itens */
.marqee-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.marquee-item {
    display: flex;
    align-items: center;
    gap: 50px;
    white-space: nowrap;
    padding-right: 50px;
    font-size: 5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1;
    font-family: inherit;
}

/* Palavras "sólidas" (com cor cheia) */
.marquee-item .solid {
    color: #ffffff;
}

/* Palavras "vazadas" (só contorno — efeito moderno) */
.marquee-item .outline {
    color: transparent;
    -webkit-text-stroke: 2px #ff0066;   /* magenta do tema */
    text-stroke: 2px #ff0066;
}

/* Ícone separador (estrela FontAwesome) */
.marquee-item .sep {
    color: #ff0066;
    font-size: 2.5rem;
    flex-shrink: 0;
    animation: spin-slow 8s linear infinite;
}

@keyframes spin-slow {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

/* Linhas decorativas superior e inferior */
.bor-top {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Responsivo — diminui no celular */
@media (max-width: 991px) {
    .marquee-item { font-size: 3rem; gap: 30px; padding-right: 30px; }
    .marquee-item .sep { font-size: 1.5rem; }
}

@media (max-width: 575px) {
    .marquee-item { font-size: 2rem; gap: 20px; padding-right: 20px; }
    .marquee-item .sep { font-size: 1rem; }
}