.contenidoMarcas {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 4vh;
}


.titulo {
    text-align: center
}

    .titulo h1 {
        font-size: clamp(16px, 1vw, 19px);
        color: #545454;
    }

    .titulo span {
        font-size: clamp(14px, 1vw, 16px);
    }


.textSeo {
    margin: 4vh 0
}

    .textSeo h2 {
        font-size: clamp(16px, 1vw, 17px);
        color: #545454;
    }

    .textSeo h3 {
        font-size: clamp(14px, 1vw, 15px);
        color: #828181;
    }


.contenedorMarcas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px; /* Added space between rows */
}


    .buttonP  {
        width:200px;
 padding: 0.7rem;
  font-size: 15px;
  text-decoration: none;
  color: white;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
  text-align: center;
  z-index: 1; /* Ensures text stays on top */
}
    
.buttonP ::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.4s ease;
  z-index: -1; /* Moves effect behind text */
}

.buttonP2 {
  background-color: #545454;
  border-radius: 10px;
}

.buttonP2:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
  transform: translateY(-5px);
}


      .contenedorMarcas a  img{
        height: 50px;
         }


      hr {
          margin:0.5rem
      }

.spanMarca {
    font-size: clamp(14px, 1vw, 16px);
}


@media (max-width: 439px) {
    .contenedorMarcas a {
        padding: 0.5rem;
        width: 138px;
    }

      .contenedorMarcas a  img{
        height: 30px;
         }
}