/* Depoimentos de clientes (página inicial) — markup gerado em index.html, comportamento em assets/js/simdata-depoimentos.js */

.sdd {
    --sdd-blue: var(--e-global-color-primary, #000DF3);
    --sdd-text: #2b2d38;
    --sdd-muted: #6b6f80;
    --sdd-soft: #F4F5FF;
    --sdd-line: #E6E8F5;
    --sdd-gap: 24px;
    --sdd-cols: 3;
    position: relative;
    width: 100%;
    font-family: "Montserrat", Sans-serif;
    text-align: left;
}

/* trilho rolável com encaixe por cartão */
.sdd-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--sdd-cols) - 1) * var(--sdd-gap)) / var(--sdd-cols));
    gap: var(--sdd-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 12px 4px 28px;
    margin: 0 -4px;
    scrollbar-width: none;
}
.sdd-track::-webkit-scrollbar { display: none; }
.sdd-track:focus-visible { outline: 2px solid var(--sdd-blue); outline-offset: 4px; border-radius: 12px; }

/* cartão */
.sdd-card {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sdd-line);
    border-radius: 18px;
    padding: 28px 26px 24px;
    box-shadow: 0 10px 30px rgba(0, 13, 243, .06), 0 2px 6px rgba(0, 0, 0, .04);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    margin: 0;
}
.sdd-card:hover {
    transform: translateY(-4px);
    border-color: #cfd4ff;
    box-shadow: 0 18px 40px rgba(0, 13, 243, .12), 0 4px 10px rgba(0, 0, 0, .05);
}

.sdd-quote {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--sdd-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    flex: 0 0 auto;
}
.sdd-quote svg { width: 22px; height: 22px; fill: #fff; }

.sdd-text {
    margin: 0;
    padding: 0;
    border: 0;
    quotes: none;
    font-size: 15px;
    line-height: 1.7;
    color: var(--sdd-text);
    font-style: normal;
    font-family: inherit;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
}
.sdd-text::before, .sdd-text::after { content: none; }
.sdd-card.is-open .sdd-text { -webkit-line-clamp: unset; display: block; }

.sdd-more {
    align-self: flex-start;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sdd-blue);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.sdd-more:hover, .sdd-more:focus-visible { text-decoration: underline; background: none; color: var(--sdd-blue); outline: none; }
.sdd-more[hidden] { display: none; }

.sdd-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--sdd-line);
}
.sdd-card .sdd-text + .sdd-more + .sdd-author,
.sdd-card .sdd-text + .sdd-author { margin-top: auto; }
.sdd-body { flex: 1 1 auto; display: flex; flex-direction: column; margin-bottom: 20px; }

.sdd img.sdd-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50% !important;
    max-width: none;
    border: 0;
    object-fit: cover;
    flex: 0 0 52px;
    background: var(--sdd-soft);
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sdd-line);
}
.sdd-initials {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background: var(--sdd-soft);
    color: var(--sdd-blue);
    font-weight: 800;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sdd-name { display: block; font-size: 16px; font-weight: 700; color: #000; line-height: 1.3; }
.sdd-company { display: block; font-size: 13px; color: var(--sdd-muted); line-height: 1.4; margin-top: 2px; }

/* navegação */
.sdd-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 6px;
}
.sdd-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--sdd-line);
    background: #fff;
    color: var(--sdd-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
    transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.sdd-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sdd-btn:hover, .sdd-btn:focus-visible { background: var(--sdd-blue); border-color: var(--sdd-blue); color: #fff; outline: none; }
.sdd-btn:disabled { opacity: .35; cursor: default; background: #fff; color: var(--sdd-blue); border-color: var(--sdd-line); }

.sdd-dots { display: flex; gap: 8px; align-items: center; }
.sdd-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #cfd4ff;
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}
.sdd-dot.is-active { width: 26px; background: var(--sdd-blue); }
.sdd-dot:hover, .sdd-dot:focus-visible { background: var(--sdd-blue); outline: none; }

/* responsivo */
@media (max-width: 1024px) {
    .sdd { --sdd-cols: 2; --sdd-gap: 20px; }
}
@media (max-width: 767px) {
    .sdd { --sdd-gap: 14px; }
    /* um cartão por vez, com a borda do próximo aparecendo para indicar que dá para arrastar */
    .sdd-track { grid-auto-columns: 86%; }
    .sdd-card { padding: 24px 20px 20px; }
    .sdd-text { font-size: 14px; -webkit-line-clamp: 8; }
    .sdd-btn { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .sdd-track { scroll-behavior: auto; }
    .sdd-card, .sdd-dot, .sdd-btn { transition: none; }
}