#encabezado{
    padding-top: 1px;
}
#menu {
background-color: var(--navbar-bg, rgba(255, 255, 255, 0.96));
border-color: var(--border-color, #fff);
border-radius: 100px;
border-style: solid;
margin-top: 10px;
height: 70px;
display: flexbox;
align-items: center;
}
#menu a {
    text-decoration: none;
    color: var(--text-color, black);
    font-size: 20px;
    font-weight: bold;
}
.logo {
    width: 60px;
    transition: transform 0.5s;
}

.logo:hover {
    transform: scale(1.5);
}
.btn-primary{
    background-color: var(--accent-color, #ffed00) !important;
    border-color: var(--accent-color, #ffed00) !important;
    color: #000 !important;
}
/*efectos*/
/*matrix*/
.canvasMatrix {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    display: block;
  }
/*Brillo*/
.brillo{
    transition: filter 0.3s ease-in-out;
}
.brillo:hover{
    filter: brightness(1.2);
}

/*fin efectos*/
#portada{
    background-color: var(--card-bg, rgba(255, 255, 255, 0.8));
    transition: transform 0.5s;
}
#portada:hover{
    transform: scale(1.1);
}
#clientes{
    background-color: var(--card-bg, rgba(255, 255, 255, 0.8));
}
.carta-servicios{
    transition: transform 0.5s;
}
.carta-servicios:hover{
    transform: scale(1.1);
}

body {
    overflow-x: hidden;
}

.mt-page {
    margin-top: 100px;
}


@media (max-width: 576px) {
    .mt-page {
        margin-top: 80px;
    }

    #portada:hover,
    .carta-servicios:hover,
    .logo:hover {
        transform: none;
    }

    .logo {
        width: 48px;
    }

}