/* Estilos personalizados para el carrusel */
.card-equipo {
    width: 100%;
    max-width: 400px;
    margin: 20px 15px; /* Agrega margen horizontal para separar las tarjetas */
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    overflow: hidden;
    box-sizing: border-box; /* Asegura que el padding y borde se incluyan en el ancho total */
}

    .card-equipo img {
        max-height: 230px;
        max-width: 383px;
        width: calc(100% - 2rem); /* Se ajusta para incluir el padding */
        margin: 1rem; /* Padding para que la imagen no toque los bordes */
        margin-bottom: 0px;
    }

.card-body-equipo {
    background-color: #fff;
    margin-top: 10px; /* Elimina el margen superior */
    padding-top: 0; /* Elimina el padding superior si es necesario */
}

.titulo-y-linea {
    width: calc(100% - 2rem); /* Ajusta para el padding total */
    margin: 1rem; /* Alinea con el margen de la imagen */
    margin-left: 2rem;
}

.titulo-equipo {
    font-size: 1.25rem;
    font-weight: bold;
    color: #000;
    text-align: center;
    margin: 0; /* Elimina el margen por defecto para alinear con la línea */
    padding: 0rem 0; /* Espacio en la parte superior e inferior del título */
}

.linea {
    height: 2px;
    background-color: #ddd;
    width: 100%; /* La línea ocupa todo el ancho del contenedor .titulo-y-linea */
    margin: 0; /* Asegúrate de que no haya margen para que la línea se ajuste al contenedor */
}

.detalle-equipo {
    font-size: 0.9rem;
    color: #666;
    position: relative; /* Establece una referencia de posicionamiento para el icono absoluto */
    padding-left: 20px; /* Espacio para el ícono */
}

.icono-flecha {
    color: #FF6702;
    position: absolute; /* Posiciona el ícono absolutamente */
    left: 0; /* Alinea el ícono al principio del contenedor */
    top: 50%; /* Centra el ícono verticalmente */
    transform: translateY(-50%); /* Asegura que el centro del ícono esté en el centro verticalmente */
    font-size: 1.5em; /* Ajusta el tamaño del ícono si es necesario */
    font-weight: bolder;
}

.texto-detalle {
    font-weight: bold;
    display: block;
}

.valor-detalle {
    font-weight: bold;
    display: block;
    margin-top: -6px; /* Ajusta el espacio antes de '470 HP' */
}

/* Ajusta el margen entre los elementos de detalle */
.detalle-equipo p {
    margin-bottom: 4px; /* Ajusta este valor según sea necesario */
}

.btn-equipo {
    border-radius: 0;
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    flex: 1; /* Para que los botones tengan el mismo ancho */
    margin-top: 0.5rem;
}

.btn-contactar {
    background-color: #FF6702;
    color: white;
}

.btn-vermas {
    background-color: #000;
    color: white;
    margin-left: 10px; /* Espacio entre botones */
}

.btn-container {
    display: flex;
    justify-content: start; /* Alineación de botones al inicio */
}

.detalles-container {
    display: flex;
    justify-content: space-between;
}

.columna {
    width: 48%;
    margin-left: 1.5rem;
}

/* Ajustes para las flechas del carrusel */
.slick-prev:before, .slick-next:before {
    color: #000; /* Cambia el color según sea necesario */
    font-size: 20px; /* Aumenta el tamaño de las flechas */
}

.slick-prev {
    left: -25px; /* Ajusta la posición izquierda de la flecha */
    z-index: 2; /* Asegura que la flecha esté sobre el contenido */
}

.slick-next {
    right: -25px; /* Ajusta la posición derecha de la flecha */
    z-index: 2; /* Asegura que la flecha esté sobre el contenido */
}

/* Ajustes para los puntos de navegación */
.slick-dots {
    bottom: -30px; /* Ajusta la posición inferior de los puntos */
}

    .slick-dots li button:before {
        color: #000; /* Cambia el color de los puntos */
        font-size: 12px; /* Ajusta el tamaño de los puntos */
    }

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
    .card-equipo {
        margin: 10px auto; /* Reduce el margen horizontal en móviles */
    }

    .slick-prev, .slick-next {
        display: block; /* Asegura que las flechas sean visibles */
        z-index: 2; /* Asegura que las flechas estén sobre el contenido */
    }

    .slick-prev {
        left: -10px; /* Ajusta la posición izquierda de la flecha para móviles */
    }

    .slick-next {
        right: -10px; /* Ajusta la posición derecha de la flecha para móviles */
    }
}