/* Botones Cotizar / Más info (imagen de fondo) */
.btn-cotizar,
.btn-info {
    display: inline-block;
    width: 180px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border: none;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    margin: 50px;
    min-width: 150px;
}

.btn-cotizar {
    background-image: url('../images/elementos/btncotizar.png');
}
.btn-info {
    background-image: url('../images/elementos/btncatalogo.png');
}

.custom-arrow {
    width: 40px;
    height: auto;
}

.carousel-control-prev {
    left: 30px; /* borde izquierdo */
}

.carousel-control-next {
    right: 30px; /* borde derecho */
}

.carousel-control-prev,
.carousel-control-next {
    top: 50%;
    transform: translateY(-50%);
    width: auto;
}

.details-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Contenedor con position relative para la imagen */
.details-container {
    position: relative;
}

/* Contenedor de botones: se posiciona absolutamente al fondo, centrado horizontalmente */
.buttons-overlay {
    position: absolute;
    bottom: -40px;  /* Ajusta este valor para mover los botones hacia arriba o abajo */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;     /* Espacio entre los botones */
}

.arrow-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    z-index: 10;
    cursor: pointer;
}

/* Asegúrate de que el contenedor padre (donde se superponen las flechas) tenga position: relative */
.col-12.position-relative {
    position: relative;
}

/* Posicionamiento específico de las flechas */
.left-arrow {
    left: 10px; /* Ajusta según convenga */
}

.right-arrow {
    right: 10px; /* Ajusta según convenga */
}

/* Opcional: ajustes para móviles */
@media (max-width: 576px) {
    .left-arrow, .right-arrow {
        left: 5px;
        right: 5px;
        /* O ajustar top o transform si es necesario */
    }
}


/* Apunta sólo al carousel para no afectar otras filas */
#vehiculosCarousel .row {
    margin-left: 0;
    margin-right: 0;
    /* En BS5 también puede usarse: --bs-gutter-x: 0; */
}

#vehiculosCarousel .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}