.div-horizontal {
    width: 80px;
    height: 20px;
    margin: 10px;
    text-align: center;
    }

.whatsapp-float {
    position: fixed;
    bottom: 70px; /* Cambia el valor según quieras la distancia desde abajo */
    right: 20px; /* Cambia el valor según quieras la distancia desde la derecha */
    z-index: 999;
}

.whatsapp-float img {
    width: 60px; /* Cambia el tamaño del icono de WhatsApp según tus preferencias */
    height: 60px;
    border-radius: 0%;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
}

.texto-blanco {
color: white;
}

/*todo categorias*/
.categorias_contenedor-principal {
    display: flex;
    /* Hace que los elementos hijos se muestren en línea (horizontalmente) */
    justify-content: space-around;
    /* Espacio alrededor de los elementos hijos */
    padding: 20px;
  }

  .categorias_contenedor {
    width: 200px;
    height: 200px;
    background-color: #f2f2f2;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
  }

  .categorias_imagen {
    width: 80px;
    height: 80px;
    background-color: #3498db;
    margin: 0 auto;
  }

  .categorias_boton {
    background-color: #27ae60;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .contenedor_categoria {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 15px;
    background-color: #dcdfe0;
}

.elemento_categoria {
    width: 150px; /* Ajusta el ancho según tus necesidades */
    height: 150px; /* Ajusta el alto según tus necesidades */
    margin: 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: background-image 0.3s ease;
}

/* Estilos para las imágenes dentro de los divs */
.elemento_categoria img {
    opacity: 0; /* Oculta la imagen original */
    width: 100%;
    height: auto;
    cursor: pointer;
}
/*
.elemento_marca img {
    opacity: 0;
    width: 100%;
    height: auto;
    cursor: pointer;
}
*/

.elemento_categoria:nth-child(1) {
    background-image: url('/images/llantas-motos-blanco.jpg'); /* Ruta de la primera imagen al cargar la página */
}

.elemento_categoria:nth-child(2) {
    background-image: url('/images/llantas-cuatri-blanco.jpg'); /* Ruta de la segunda imagen al cargar la página */
}

.elemento_categoria:nth-child(3) {
    background-image: url('/images/neumaticos-blanco.jpg'); /* Ruta de la segunda imagen al cargar la página */
}

.elemento_categoria:nth-child(4) {
    background-image: url('/images/rodamientos-blanco.jpg'); /* Ruta de la segunda imagen al cargar la página */
}

.elemento_categoria:nth-child(5) {
    background-image: url('/images/iluminacion-blanco.jpg'); /* Ruta de la segunda imagen al cargar la página */
}

.elemento_categoria:nth-child(6) {
    background-image: url('/images/baterias-blanco.jpg'); /* Ruta de la segunda imagen al cargar la página */
}

.elemento_categoria img {
    opacity: 0; /* Oculta la imagen original */
    width: 100%;
    height: auto;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease;
}

.elemento_categoria:hover img {
    opacity: 1; /* Muestra la imagen original al pasar el mouse */
}

/*Todo marcas propias*/

.contenedor_marca {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 15px;
    background-color: #dcdfe0;
}

.elemento_marca {
    width: 300px; /* Ajusta el ancho según tus necesidades */
    height: 150px; /* Ajusta el alto según tus necesidades */
    margin: 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: background-image 0.3s ease;
}

.elemento_marca:nth-child(1) {
    background-image: url('/images/rinova-tire.png'); /* Ruta de la primera imagen al cargar la página */
}

.elemento_marca:nth-child(2) {
    background-image: url('/images/rnv.png'); /* Ruta de la primera imagen al cargar la página */
}

.elemento_marca:nth-child(3) {
    background-image: url('/images/rinova-battery.png'); /* Ruta de la primera imagen al cargar la página */
}

.elemento_marca:nth-child(4) {
    background-image: url('/images/rinova-lighting.png'); /* Ruta de la primera imagen al cargar la página */
}

.elemento_marca:nth-child(5) {
    background-image: url('/images/goodtube.png'); /* Ruta de la primera imagen al cargar la página */
}

.elemento_marca img {
    opacity: 0; /* Oculta la imagen original */
    width: 100%;
    height: auto;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease;
}

.elemento_marca:hover img {
    opacity: 1; /* Muestra la imagen original al pasar el mouse */
}

/*marcas representadas*/

.contenedor_marca_rep {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 15px;
    background-color: #dcdfe0;
}

.elemento_marca_rep {
    width: 300px; /* Ajusta el ancho según tus necesidades */
    height: 150px; /* Ajusta el alto según tus necesidades */
    margin: 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: background-image 0.3s ease;
}

.elemento_marca_rep:nth-child(1) {
    background-image: url('/images/pirelli.png'); /* Ruta de la primera imagen al cargar la página */
}

.elemento_marca_rep:nth-child(2) {
    background-image: url('/images/cst.png'); /* Ruta de la primera imagen al cargar la página */
}

.elemento_marca_rep:nth-child(3) {
    background-image: url('/images/hakuba.png'); /* Ruta de la primera imagen al cargar la página */
}

.elemento_marca_rep:nth-child(4) {
    background-image: url('/images/koyo.png'); /* Ruta de la primera imagen al cargar la página */
}

.elemento_marca_rep:nth-child(5) {
    background-image: url('/images/pfi.png'); /* Ruta de la primera imagen al cargar la página */
}

.elemento_marca_rep:nth-child(6) {
    background-image: url('/images/narva.png'); /* Ruta de la primera imagen al cargar la página */
}

.elemento_marca_rep img {
    opacity: 0; /* Oculta la imagen original */
    width: 100%;
    height: auto;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease;
}

.elemento_marca_rep:hover img {
    opacity: 1; /* Muestra la imagen original al pasar el mouse */
}


/*bancos*/

.contenedor_pagos {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 15px;
    background-color: white;
}

.elemento_pagos {
    width: 300px; /* Ajusta el ancho según tus necesidades */
    height: 150px; /* Ajusta el alto según tus necesidades */
    margin: 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: background-image 0.3s ease;
    padding: 10px;
    top: 10px;
    left: 10px;
    z-index: 1;

}

.elemento_pagos:nth-child(1) {
    background-image: url('/images/bbva.png'); /* Ruta de la primera imagen al cargar la página */
}

.elemento_pagos:nth-child(2) {
    background-image: url('/images/bogota.png'); /* Ruta de la primera imagen al cargar la página */
}

.elemento_pagos:nth-child(3) {
    background-image: url('/images/occidente.png'); /* Ruta de la primera imagen al cargar la página */
}

.elemento_pagos:nth-child(4) {
    background-image: url('/images/davivienda.png'); /* Ruta de la primera imagen al cargar la página */
}

.elemento_pagos:nth-child(5) {
    background-image: url('/images/pse.png'); /* Ruta de la primera imagen al cargar la página */
}


.elemento_pagos img {
    opacity: 0; /* Oculta la imagen original */
    width: 100%;
    height: auto;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease;
}

.elemento_pagos:hover img {
    opacity: 1; /* Muestra la imagen original al pasar el mouse */
}

/*texto centrado*/

.texto-centrado{
    text-align: center;
    color: black;
}

.texto-justificado{
    text-align: justify;
    color: black;
}

ul {
    list-style-type: circle; /* Puedes cambiar "circle" por "square", "disc", "none", etc. */
    text-align: justify;
    color: black;
}

p {
    color: black;
}


/* bancos nuevo*/
.container_bancos {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 15px;
    background-color: white;
  }

  .box_banco {
    width: 300px; /* Ajusta el ancho según tus necesidades */
    height: 220px; /* Ajusta el alto según tus necesidades */
    margin: 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: background-image 0.3s ease;
  }

  .box_banco img {
    width: 100%;
    height: auto;
  }

  del {
    text-decoration: line-through; /* Puedes cambiar otros estilos también */
    /* Otros estilos CSS */
  }