.depoimento-phone {
position: relative;
width: 300px;
max-width: 84vw;
aspect-ratio: 9 / 16;
padding: 12px;
border-radius: 46px;
background: #382a1e; 
box-shadow:
0 30px 60px -15px rgb(84 64 46 / 0.45),
0 12px 24px -8px rgb(84 64 46 / 0.25);
}

.depoimento-phone::before {
content: '';
position: absolute;
right: -4px;
top: 140px;
width: 4px;
height: 64px;
border-radius: 0 4px 4px 0;
background: #54402e; 
}

.depoimento-phone::after {
content: '';
position: absolute;
left: -4px;
top: 110px;
width: 4px;
height: 96px;
border-radius: 4px 0 0 4px;
background: #54402e; 
}

.depoimento-screen {
width: 100%;
height: 100%;
border-radius: 34px;
overflow: hidden;
background: #fff;
}

.depoimento-track {
display: flex;
height: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none; 
-ms-overflow-style: none; 
}

.depoimento-track::-webkit-scrollbar {
display: none;
}

.depoimento-slide {
flex: 0 0 100%;
height: 100%;
scroll-snap-align: start;
}

.depoimento-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.depoimento-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 9999px;
background: #fff;
border: 2px solid #f5ede3; 
color: #70563f; 
box-shadow: 0 10px 15px -3px rgb(84 64 46 / 0.15);
transition:
background-color 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
cursor: pointer;
}

.depoimento-arrow:hover {
background: #fbf7f2; 
transform: scale(1.05);
box-shadow: 0 10px 15px -3px rgb(84 64 46 / 0.25);
}

.depoimento-arrow:focus-visible {
outline: 3px solid #ff6b6b; 
outline-offset: 2px;
}

.depoimento-dot {
width: 10px;
height: 10px;
padding: 0;
border: none;
border-radius: 9999px;
background: #ebdccc; 
cursor: pointer;
transition:
width 0.3s ease,
background-color 0.3s ease;
}

.depoimento-dot:hover {
background: #c4a88c; 
}

.depoimento-dot:focus-visible {
outline: 3px solid #ff6b6b; 
outline-offset: 2px;
}

.depoimento-dot-active,
.depoimento-dot-active:hover {
width: 28px;
background: #ff6b6b; 
}

@media (prefers-reduced-motion: reduce) {
.depoimento-track {
scroll-behavior: auto;
}
}

@supports not (aspect-ratio: 1 / 1) {
.depoimento-phone {
height: 149.4vw; 
max-height: 533px; 
}
}