@media (min-width: 1024px) {
    /* Remove espaço final após o copyright */
    .footer {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .container-sm {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .footer-bottom {
        text-align: center !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Coloca logo acima das redes sociais */
    .footer-top {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    /* Força a logo ficar no topo */
    .footer-brand {
        order: 1 !important;
    }

    /* Redes sociais logo abaixo */
    .footer-social-media {
        order: 3 !important;
        display: flex !important;
        gap: 12px !important;
        align-items: center !important;
        margin-top: 2px !important;
    }

    /* Mantém o título centralizado */
    .footer-newsletter-title {
        order: 2 !important;
        width: 100% !important;
        text-align: left !important;
        margin-top: 16px !important;
    }
}

------------------------------
/* ====== SETUP DE CORES ESTILO REFLECT.APP ====== */
:root {
    --bg-dark: #050507;
    --card-dark: #121217;
    --card-border: rgba(255, 255, 255, 0.08);
    --glow-color: rgba(122, 43, 249, 0.5);
    --text-primary: #ffffff;
    --text-secondary: #8a8f98;
    --accent-pill: rgba(255, 255, 255, 0.1);
}

/* Seção Principal */
.reflect-portfolio-section {
    position: relative;
    padding: 100px 20px;
}

/* O "Glow" Central (Aura Roxa) */
.ambient-glow {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--glow-color) 0%, rgba(0,0,0,0) 70%);
    filter: blur(80px);
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

.content-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

/* ====== HEADER ====== */
.header-group {
    text-align: center;
    margin-bottom: 70px;
}

.badge-pill {
    display: inline-block;
    padding: 6px 16px;
    background: var(--accent-pill);
    border: 1px solid var(--card-border);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #c4c9d4;
    backdrop-filter: blur(10px);
}

.title {
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 15px 0;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #fff 0%, #a5a5a5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    font-weight: 400;
}

/* ====== GRID / CARROSSEL ====== */
/* Desktop: vamos manter grid por padrão, mas ativar comportamento de faixa no media query */
.portfolio-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;

    /* overflow fica controlado por media queries quando viramos marquee */
}

/* manter display:contents por padrão para não interferir se algum layout depender disso */
.carousel-track {
    display: contents;
}

/* ====== CARD ESTILO REFLECT ====== */
.portfolio-card {
    background: var(--card-dark);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 10px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(122, 43, 249, 0.4);
}

.portfolio-card:hover {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

/* Imagem */
.card-image-wrapper {
    height: 240px;
    overflow: hidden;
    border-radius: 12px;
    position: relative;
    background: #1a0025;
    border: 1px solid rgba(255,255,255,0.05);
}

.card-image-wrapper img {
    width: 100%;
    display: block;
    animation: scrollVertical 30s ease-in-out infinite alternate;
    opacity: 0.9;
    transition: 0.3s;
}

.portfolio-card:hover .card-image-wrapper img {
    opacity: 1;
    animation-play-state: paused;
}

/* Footer do Card (Texto) */
.card-footer {
    padding: 12px 6px 6px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    color: #fff;
    font-weight: 500;
    font-size: 15px;
}

.card-tag {
    font-size: 12px;
    color: var(--text-secondary);
    background: rgba(102, 1, 170, 0.979);
    padding: 4px 10px;
    border-radius: 6px;
}

/* ANIMAÇÃO SCROLL VERTICAL */
@keyframes scrollVertical {
    0%,
    15% {
        transform: translateY(0);
    }

    85%,
    100% {
        transform: translateY(calc(-100% + 240px));
    }
}

/* ====== DESKTOP: transformar as tracks em faixas animadas (solução que funciona) ======
   Observação: no desktop o layout ficará com duas faixas (track-left e track-right) rolando
   horizontalmente — igual ao mobile, mantendo o número de cards do desktop. */
@media (min-width: 992px) {
    /* transformamos a wrapper em coluna de faixas para que cada track tenha sua própria animação */
    .portfolio-wrapper {
        display: flex;
        flex-direction: column;
        gap: 28px;
        overflow: hidden;
        padding-left: 20px;

        /* alinhamento igual ao mobile */
    }

    /* agora as tracks têm caixa e viram sliders horizontais */
    .carousel-track {
        display: flex;

        /* essencial para animation/transform funcionar */
        gap: 24px;
        width: max-content;

        /* permite rolar horizontalmente */
        align-items: flex-start;
    }

    /* manter tamanho/visibilidade dos cards do desktop */
    .portfolio-card {
        width: 320px;
        flex-shrink: 0;
        background: var(--card-dark);
    }

    /* animações (mesmo comportamento do mobile, tempo ajustável) */
    .track-left {
        animation: slideLeftDesktop 28s linear infinite;
    }

    .track-right {
        animation: slideRightDesktop 28s linear infinite;
    }

    @keyframes slideLeftDesktop {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }

        /* ajusta conforme necessário */
    }

    @keyframes slideRightDesktop {
        0% {
            transform: translateX(-50%);
        }

        100% {
            transform: translateX(0);
        }
    }
}

/* ====== MOBILE RESPONSIVO ====== */
@media (max-width: 991px) {
    .reflect-portfolio-section {
        padding: 60px 0;
    }

    .header-group {
        padding: 0 20px;
    }

    .title {
        font-size: 36px;
    }

    /* Transforma Grid em Marquee Slider (mobile) */
    .portfolio-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
        overflow: hidden;
    }

    .carousel-track {
        display: flex;
        gap: 16px;
        width: max-content;
        padding-left: 20px;
    }

    .portfolio-card {
        width: 280px;
        flex-shrink: 0;
        background: #18181d;
    }

    .track-left {
        animation: slideLeft 30s linear infinite alternate;
    }

    .track-right {
        animation: slideRight 30s linear infinite alternate;
    }

    @keyframes slideLeft {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    @keyframes slideRight {
        0% {
            transform: translateX(-50%);
        }

        100% {
            transform: translateX(0);
        }
    }
}

/* === DESKTOP: CARROSSEL FULL WIDTH === */
@media (min-width: 992px) {
    /* SEÇÃO: expandir até as bordas */
    .reflect-portfolio-section {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 0;
    }

    /* remover qualquer limite interno */
    .content-container {
        width: 100%;
        max-width: none;
        padding: 0;
        margin: 0;
    }

    /* área do carrossel em full width */
    .portfolio-wrapper {
        width: 100%;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }

    /* faixas do carrossel deslizando à vontade */
    .carousel-track {
        display: flex;
        gap: 24px;
        width: max-content;
        padding: 0;
        margin: 0;
        cursor: grab;
        overflow-x: auto;
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
    }
}


-----------------------
/* =========================================
   CSS - ESTILOS DA SEÇÃO REFLECT
   ========================================= */

/* Variáveis para fácil ajuste */
:root {
    --reflect-bg: #050505;           /* Fundo da página */
    --reflect-card-bg: #0f0f11;      /* Fundo do card */
    --reflect-border: #222225;       /* Borda sutil */
    --reflect-text-main: #ffffff;    /* Texto branco */
    --reflect-text-sub: #9ca3af;     /* Texto cinza */
    --reflect-accent: #8b5cf6;       /* Roxo Glow */
    --reflect-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Reset básico para garantir que a seção não quebre */
.reflect-wrapper * {
    box-sizing: border-box;
}

/* Container Principal */
.reflect-wrapper {
    position: relative;
    width: 100%;
    /* Se quiser tela cheia, mude max-width para 100% */
    max-width: 1200px; 
    margin: 0 auto;
    padding: 80px 20px;
    background-color: var(--reflect-bg);
    font-family: var(--reflect-font);
    overflow: hidden; /* Importante para cortar o glow que vazar */
}

/* Fundo com Glow (A aura roxa atrás do texto) */
.reflect-glow {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 500px;
    /* Gradiente radial roxo desaparecendo para transparente */
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(5, 5, 5, 0) 70%);
    filter: blur(80px); /* O segredo do efeito suave */
    z-index: 0;
    pointer-events: none;
}

/* Cabeçalho */
.reflect-header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 60px;
}

/* O botãozinho "Wall of love" */
.reflect-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #d8b4fe; /* Roxo claro */
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 20px;
    /* Sombra sutil roxa */
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.1); 
}

.reflect-header h2 {
    color: var(--reflect-text-main);
    font-size: 3.5rem; /* Tamanho grande do título */
    font-weight: 700;
    margin: 0 0 16px 0;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.reflect-header p {
    color: var(--reflect-text-sub);
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Container dos Cards (A Janela de Visualização) */
.testimonials-container {
    position: relative;
    z-index: 1;
    display: flex; /* Coloca as colunas lado a lado */
    gap: 24px;
    height: 600px; /* Altura visível da área de rolagem */
    overflow: hidden;
    
    /* Máscara CSS: Faz os cards desaparecerem suavemente no topo e embaixo */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 15%,
        black 85%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 15%,
        black 85%,
        transparent 100%
    );
}

/* Colunas Individuais */
.testimonials-column {
    flex: 1; /* Ocupa espaço igual */
    display: flex;
    flex-direction: column;
    gap: 24px; /* Espaço vertical entre cards */
    
    /* A mágica da animação */
    /* Importante: O HTML tem conteúdo duplicado para isso funcionar */
    animation: scroll-vertical 20s linear infinite;
    will-change: transform; /* Otimização de performance */
}

/* Variação de velocidade para efeito orgânico */
/* Coluna 2 (do meio) */
.testimonials-column:nth-child(2) {
    animation-duration: 25s; /* Mais lenta */
    margin-top: -50px; /* Desalinhamento visual inicial */
}

/* Coluna 3 (direita) */
.testimonials-column:nth-child(3) {
    animation-duration: 17s;
}

/* Pausar animação ao passar o mouse (opcional, remova se não quiser) */
.testimonials-container:hover .testimonials-column {
    animation-play-state: paused;
}

/* Estilo do Card */
.t-card {
    background: var(--reflect-card-bg);
    border: 1px solid var(--reflect-border);
    border-radius: 12px;
    padding: 24px;
    color: var(--reflect-text-sub);
    font-size: 0.95rem;
    line-height: 1.6;
    transition: all 0.3s ease;
}

/* Efeito Hover no Card */
.t-card:hover {
    border-color: #3f3f46; /* Borda fica mais clara */
    background: #141416;   /* Fundo levemente mais claro */
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Cabeçalho do Card (Foto + Nome) */
.t-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.t-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #333;
    margin-right: 14px;
    object-fit: cover;
    border: 1px solid var(--reflect-border);
}

.t-info h4 {
    color: var(--reflect-text-main);
    font-size: 1rem;
    margin: 0;
    font-weight: 600;
}

.t-info span {
    color: #52525b;
    font-size: 0.85rem;
    display: block;
    margin-top: 2px;
}

.t-card p {
    margin: 0;
}

/* Destaque de menções (@usuario) */
.t-highlight {
    color: #a78bfa; /* Roxo médio */
    font-weight: 500;
}

/* KEYFRAMES (Animação de Scroll) */
@keyframes scroll-vertical {
    0% {
        transform: translateY(0);
    }
    100% {
        /* Move a coluna para cima exatamente 50% */
        /* Como duplicamos o conteúdo no HTML, o ponto 50% é idêntico ao ponto 0% */
        transform: translateY(-50%);
    }
}

/* =========================================
   RESPONSIVIDADE (MEDIA QUERIES)
   ========================================= */

/* Tablets e Telas Médias (max 1024px) */
@media (max-width: 1024px) {
    .reflect-header h2 {
        font-size: 2.5rem;
    }
    
    /* Esconde a terceira coluna para não apertar */
    .testimonials-column:nth-child(3) {
        display: none;
    }
}

/* Celulares (max 640px) */
@media (max-width: 640px) {
    .reflect-wrapper {
        padding: 60px 20px;
    }

    .reflect-header h2 {
        font-size: 2rem;
    }
    
    .testimonials-container {
        height: 500px; /* Um pouco menor no mobile */
    }

    /* Mostra apenas uma coluna no mobile */
    .testimonials-column:nth-child(2),
    .testimonials-column:nth-child(3) {
        display: none;
    }
    
    /* Acelera um pouco a animação no mobile para não parecer parada */
    .testimonials-column:first-child {
        animation-duration: 20s;
    }
}
-------------