/* style.css */
.titulo {
    color: #e4e4e4;
    font-size: 1.3em;
    margin: 1em 0;
}   


.slider-container {
position: relative;
width: 100%;
height: 66vh;
overflow: hidden;
}

.slides {
width: 100%;
height: 100%;
}

.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: all 0.5s ease-in-out;
}

.slide.active {
opacity: 1;
}

.slide-content {
position: absolute;
bottom: 2rem;
left: 2rem;
color: white;
max-width: 32rem;
transition: all 0.5s ease-in-out;
}

.slide-content h2 {
font-size: 2rem;
font-weight: 300;
margin-bottom: 0.5rem;
}

.slide-content p {
font-size: 1.125rem;
margin-bottom: 1rem;
opacity: 0.8;
}

.slide-content a {
display: inline-block;
padding: 0.5rem 1rem;
background: transparent;
color: white;
text-decoration: none;
border: 1px solid white;
transition: all 0.3s ease;
}

.slide-content a:hover {
background: white;
color: black;
}

.navigation-dots {
position: absolute;
bottom: 1rem;
right: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: transparent;
border: 1px solid white;
opacity: 0.5;
cursor: pointer;
transition: all 0.3s ease;
}

.dot.active {
background: white;
opacity: 1;
transform: scale(1.25);
}

.slide:not(.active) .slide-content {
opacity: 0;
transform: translateY(2rem) translateX(2rem);
}

.slide.active .slide-content {
opacity: 1;
transform: translateY(0) translateX(0);
}

.slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}