/* ==========================================================================
   Depoimentos - grade parada (bento), no lugar do marquee
   Usado em: SuaConsultoria.aspx, SeuDinBeneficio.aspx, IndicarRH.aspx

   Depende dos tokens de css/home-nova-externa.css (--sd-roxo, --sd-rosa,
   --sd-borda, --sd-texto, --sd-fundo-escuro, --sd-grad-principal ...).
   Cards: brancos por padrão; --roxo e --escuro em destaque; --alto ocupa
   duas linhas e --largo duas colunas (com a frase maior). Sem movimento.
   ========================================================================== */

.sd-depo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
}

.sd-depo-grid__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: 32px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--sd-borda);
    color: var(--sd-texto);
    box-shadow: 0 18px 45px rgba(130, 10, 209, .06);
    transition: transform .35s cubic-bezier(.2, .75, .2, 1), box-shadow .35s;
}

.sd-depo-grid__card:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 24px 60px rgba(130, 10, 209, .12);
}

.sd-depo-grid__card--alto { grid-row: span 2; }
.sd-depo-grid__card--largo { grid-column: span 2; }

.sd-depo-grid__card--roxo {
    background: var(--sd-grad-principal);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 20px 55px rgba(130, 10, 209, .28);
}

.sd-depo-grid__card--escuro {
    background: var(--sd-fundo-escuro);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 20px 55px rgba(14, 7, 35, .28);
}

/* aspas grandes, discretas, no canto do card */
.sd-depo-grid__card::before {
    content: "\201C";
    position: absolute;
    top: 14px;
    right: 24px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 72px;
    line-height: 1;
    font-weight: 700;
    color: var(--sd-rosa);
    opacity: .28;
    pointer-events: none;
}

.sd-depo-grid__card--roxo::before { color: #fff; opacity: .35; }

.sd-depo-grid__texto {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    font-weight: 500;
}

.sd-depo-grid__card--alto .sd-depo-grid__texto,
.sd-depo-grid__card--largo .sd-depo-grid__texto {
    font-size: clamp(19px, 2vw, 25px);
    line-height: 1.45;
    font-weight: 700;
}

.sd-depo-grid__autor {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sd-depo-grid__avatar {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
    background: rgba(130, 10, 209, .10);
    color: var(--sd-roxo);
    border: 1.5px solid var(--sd-roxo);
}

.sd-depo-grid__card--roxo .sd-depo-grid__avatar {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
}

.sd-depo-grid__card--escuro .sd-depo-grid__avatar {
    background: rgba(249, 71, 119, .14);
    color: var(--sd-rosa);
    border-color: var(--sd-rosa);
}

.sd-depo-grid__nome {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.sd-depo-grid__cargo {
    margin-top: 3px;
    font-size: 13.5px;
    opacity: .8;
}

.sd-depo-grid__estrelas {
    display: inline-flex;
    gap: 3px;
    margin-bottom: 12px;
    color: #F5B335;
}

.sd-depo-grid__estrelas svg { width: 15px; height: 15px; fill: currentColor; }

@media (max-width: 960px) {
    .sd-depo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .sd-depo-grid__card { padding: 26px; }
    .sd-depo-grid__card--largo { grid-column: span 2; }
}

@media (max-width: 640px) {
    .sd-depo-grid { grid-template-columns: 1fr; }
    .sd-depo-grid__card--alto { grid-row: auto; }
    .sd-depo-grid__card--largo { grid-column: auto; }
    .sd-depo-grid__card--alto .sd-depo-grid__texto,
    .sd-depo-grid__card--largo .sd-depo-grid__texto { font-size: 18px; }
    .sd-depo-grid__card { padding: 22px; border-radius: 20px; }
    .sd-depo-grid__card::before { font-size: 56px; right: 18px; top: 10px; }
}