.testimonios {
padding-block: 5rem 6rem;
} .testimonios__head {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-width: 600px;
align-items: flex-start;
justify-content: flex-start;
margin-bottom: 3.5rem;
}
.testimonios__head .section-title {
font-size: var(--text-6xl);
line-height: 1.05;
} .testimonios__slider {
overflow: hidden;
} .testimonios__slider--col-2 { --cols: 2; }
.testimonios__slider--col-3 { --cols: 3; }
.testimonios__slider--col-4 { --cols: 4; } .testimonios__track {
display: flex;
gap: 1.5rem;
will-change: transform;
} .testimonios__slide {
flex: 0 0 calc((100% - (var(--cols, 3) - 1) * 1.5rem) / var(--cols, 3));
min-width: 0;
} .testimonio-card {
display: flex;
flex-direction: column;
gap: 1.25rem;
height: 100%;
padding: 2rem;
background-color: var(--blk-surface, #fff);
border: 1px solid var(--blk-border, var(--c-border));
border-radius: var(--r-md, var(--r-sm));
} .testimonio-card__rating {
display: flex;
gap: 0.2rem;
color: #D1D5DB;
}
.testimonio-card__star.is-filled {
color: #F59E0B;
} .testimonio-card__quote {
flex: 1;
margin: 0;
}
.testimonio-card__quote p {
font-family: var(--f-body);
font-size: var(--text-md);
line-height: 1.7;
color: var(--blk-text, var(--c-text-2));
} .testimonio-card__author {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--blk-border, var(--c-border));
}
.testimonio-card__name {
font-family: var(--f-ui);
font-size: var(--text-base);
font-weight: 700;
color: var(--blk-text, var(--c-dark));
}
.testimonio-card__meta {
font-family: var(--f-ui);
font-size: var(--text-sm);
color: var(--blk-text, var(--c-text-3));
opacity: 0.7;
} .testimonios__nav {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin-top: 2rem;
}
.testimonios__btn {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
border: 1px solid var(--blk-border, var(--c-border));
background: var(--blk-surface, #fff);
color: var(--blk-text, var(--c-dark));
cursor: pointer;
transition: background-color var(--t), border-color var(--t), color var(--t);
flex-shrink: 0;
}
.testimonios__btn:hover {
background-color: var(--blk-accent, var(--c-accent));
border-color: var(--blk-accent, var(--c-accent));
color: #fff;
}
.testimonios__dots {
display: flex;
} .testimonios__dot {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: none;
cursor: pointer;
padding: 0;
}
.testimonios__dot::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--blk-border, var(--c-border));
transition: background-color var(--t), transform var(--t);
}
.testimonios__dot.is-active::before {
background-color: var(--blk-accent, var(--c-accent));
transform: scale(1.3);
} @media (max-width: 1024px) {
.testimonios__slider--col-3,
.testimonios__slider--col-4 { --cols: 2; }
}
@media (max-width: 640px) {
.testimonios {
padding-block: 3.5rem 4.5rem;
} .testimonios__slider--col-2,
.testimonios__slider--col-3,
.testimonios__slider--col-4 { --cols: 1; }
}
@media (prefers-reduced-motion: reduce) {
.testimonios__track {
transition: none !important;
}
}