/* 1. Reset total de los botones del carrusel */
.carousel-control-prev, 
.carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px !important;    /* Tamaño pequeño del área clickeable */
    height: 40px !important;
    background: transparent !important; /* Fuerza la eliminación de cualquier fondo */
    border: none !important;            /* Elimina bordes */
    outline: none !important;           /* Elimina bordes de foco */
    padding: 0 !important;              /* Elimina cualquier espacio interno */
    margin: 0 10px !important;          /* Espacio respecto al borde */
    opacity: 0.6;
    transition: opacity 0.3s;
}

/* 2. Asegurar transparencia total y sin sombras */
.carousel-control-prev:hover, 
.carousel-control-next:hover {
    opacity: 1;
    background: transparent !important;
}

/* 3. Iconos negros definidos */
.carousel-control-prev-icon, 
.carousel-control-next-icon {
    width: 30px !important;
    height: 30px !important;
    background-image: none !important; /* Quitamos la imagen de Bootstrap por defecto */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Usamos entidades de texto como flechas negras limpias */
}

/* Insertamos las flechas como contenido de texto para evitar conflictos con iconos de Bootstrap */
.carousel-control-prev-icon::before { content: '❮'; color: #000; font-size: 24px; font-weight: bold; }
.carousel-control-next-icon::before { content: '❯'; color: #000; font-size: 24px; font-weight: bold; }
/* 4. Estilo del botón "Pide tu página" */
.btn-dark {
    background-color: rgba(75, 0, 130, 0.6) !important;
    color: #fff;
    border-radius: 5px;
    transition: 0.3s;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-dark:hover {
    background-color: rgba(75, 0, 130, 0.6) !important;
    transform: translateY(-2px);
}