/* Tarjetas estilo referencia para Quiénes Somos */
.qs-card {
    background: #fff;
    border-radius: 16px;
    position: relative;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.06);
}

.qs-card-inner {
    border-radius: 16px;
    padding: 24px;
}

.qs-card-title {
    font-weight: 700;
}

.qs-card-text {
    line-height: 1.6;
    margin-top: 12px;
}

.qs-card-icon {
    color: var(--color-primary-900);
    font-size: 28px;
    margin-left: 12px;
}

/* spacing de la sección */
.qs-cards {
    margin: 50px 0;
}

@media (min-width: 1200px) {
    .qs-card-inner {
        padding: 28px;
    }
}

/* Slider condicional */
.qs-scroller {
    overflow: hidden;
    padding-inline: 8px;
    scroll-snap-type: x mandatory;
}

.qs-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - 16px);
    /* evita que el gap corte la slide en móvil */
    gap: 16px;
    scroll-behavior: smooth;
}

.qs-slide {
    width: 100%;
    scroll-snap-align: start;
}

/* Responsivo: 1 / 2 / 3 por vista */
@media (min-width: 768px) {
    .qs-track {
        grid-auto-columns: calc((100% - 16px) / 2);
    }
}

@media (min-width: 1200px) {
    .qs-track {
        grid-auto-columns: calc((100% - 32px) / 3);
    }
}

/* Botones: mismo estilo que los sliders existentes */
.qs-cards .nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--color-primary-600);
    color: var(--color-primary-600);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}