/* ==========================================================================
   Depoimentos - marquee de duas faixas em loop contínuo
   Usado em: Default.aspx, SeuDinSolucao.aspx, SeuDinBeneficio.aspx, IndicarRH.aspx

   Depende dos tokens definidos em css/home-nova-externa.css
   (--sd-roxo, --sd-rosa, --sd-borda, --sd-texto, --sd-sombra, ...).

   Sem JavaScript: o loop é feito duplicando os cards no markup e animando
   o trilho de 0 até uma cópia completa do grupo.
   ========================================================================== */

.sd-depo-marquee {
    --sd-depo-gap: 20px;
    --sd-depo-dur: 40s;
    position: relative;
    margin: 0 auto;
    max-width: 1180px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--sd-depo-gap);
    border: 1px solid var(--sd-borda);
    border-radius: 36px;
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 30px 80px rgba(130, 10, 209, .08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Sprite do ícone de estrela: fica no markup uma única vez e é referenciado
   por <use> em cada card. Não deve ocupar espaço. */
.sd-depo-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Faixa = janela recortada. A máscara faz o fade nas bordas independente
   da cor de fundo da seção. */
.sd-depo-marquee__faixa {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

.sd-depo-marquee__trilho {
    display: flex;
    gap: var(--sd-depo-gap);
    width: max-content;
    will-change: transform;
    animation: sd-depo-desliza var(--sd-depo-dur) linear infinite;
}

.sd-depo-marquee__trilho--inverso {
    animation-name: sd-depo-desliza-inverso;
}

/* Metade exata do trilho = um grupo + o gap que o separa da cópia. */
@keyframes sd-depo-desliza {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - (var(--sd-depo-gap) / 2))); }
}

@keyframes sd-depo-desliza-inverso {
    from { transform: translateX(calc(-50% - (var(--sd-depo-gap) / 2))); }
    to   { transform: translateX(0); }
}

/* Pausa ao passar o mouse ou ao navegar por teclado dentro da faixa. */
.sd-depo-marquee:hover .sd-depo-marquee__trilho,
.sd-depo-marquee:focus-within .sd-depo-marquee__trilho {
    animation-play-state: paused;
}

/* ============================== Card ============================== */

.sd-depo-card {
    flex: 0 0 360px;
    width: 360px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--sd-borda);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(130, 10, 209, .06);
}

.sd-depo-card__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 26px;
}

.sd-depo-card__estrelas {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--sd-rosa);
}

/* Logo da empresa, quando o depoimento tem uma associada. */
.sd-depo-card__logo {
    max-height: 26px;
    max-width: 110px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    opacity: .85;
}

.sd-depo-card__estrelas svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: currentColor;
}

.sd-depo-card__texto {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--sd-texto-suave);
    flex: 1;
}

.sd-depo-card__autor {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--sd-borda);
    display: flex;
    align-items: center;
    gap: 12px;
}

.sd-depo-card__avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--sd-grad-principal);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sd-depo-card__nome {
    font-size: 14px;
    font-weight: 700;
    color: var(--sd-texto);
}

.sd-depo-card__cargo {
    margin-top: 2px;
    font-size: 12px;
    color: var(--sd-texto-suave);
}

/* ============================== Responsivo ============================== */

@media (max-width: 720px) {
    .sd-depo-marquee {
        border-radius: 28px;
        padding: 14px;
    }

    .sd-depo-marquee__faixa {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    }

    .sd-depo-card {
        flex-basis: 300px;
        width: 300px;
        padding: 20px;
        border-radius: 24px;
    }

    .sd-depo-card__texto {
        font-size: 14px;
    }
}

/* O movimento é contínuo em qualquer configuração do sistema, como no modelo
   de referência. Quem prefere menos movimento pode parar a faixa passando o
   mouse sobre ela (regra de :hover acima). */