/* ============================= */
/* SLIDER */
/* ============================= */
.slider {
    position: relative; /* Posición relativa para el contenedor */
    width: 100%; /* Ocupa el 100% del ancho */
    height: 39vh; /* Altura igual al viewport */
    overflow: hidden; /* Oculta el contenido que se desborda */
    display: flex; /* Usa flexbox para alinear elementos */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    background-color: var(--font-color);
}

.slide {
    position: absolute; /* Posición absoluta para las diapositivas */
    width: 100%; /* Ocupa el 100% del ancho */
    height: 100%; /* Ocupa el 100% de la altura */
    display: flex; /* Usa flexbox para alinear elementos */
    align-items: center; /* Centra verticalmente */
    justify-content: space-around; /* Distribuye el espacio */
    opacity: 0; /* Inicialmente invisible */
    transition: opacity 0.5s ease-in-out; /* Transición suave */
}

.slide.active {
    opacity: 1; /* Hace visible la diapositiva activa */
}

.content {
    max-width: 500px; /* Ancho máximo del contenido */
}

.text-center {
    font-size: 3rem; /* Tamaño del título */
    margin-top: 1.5em;
    color: var(--color-primario);
}

.image {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
    url('../img/banner-1.webp'); /* Ruta de la imagen */
    background-size: cover; /* Ajusta la imagen para cubrir todo el contenedor */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    width: 100%;
    height: 100%;
    font-size: 9rem; /* Tamaño del título */
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
}


.indicators {
    position: absolute; /* Posición absoluta para los indicadores */
    bottom: 20px; /* Distancia desde el fondo */
    left: 50%; /* Centrado horizontalmente */
    transform: translateX(-50%); /* Ajuste fino para centrar */
}

.dot {
    width: 12px; /* Ancho del punto */
    height: 12px; /* Altura del punto */
    margin: 0 5px; /* Margen entre puntos */
    background: var(--color-segundario); /* Fondo blanco */
    display: inline-block; /* Muestra en línea */
    border-radius: 50%; /* Forma circular */
    opacity: 0.5; /* Transparencia inicial */
    cursor: pointer; /* Cambia el cursor al pasar */
}

.dot.active {
    background: var(--color-primario); /* Cambia el color del punto activo */
    opacity: 1; /* Hace visible el punto activo */
}