.menu a {
    transition: color .2s, outline-color .2s, background .2s, transform .18s, padding .2s;
}
.menu a:nth-child(1) { --nav-color: #25bef4; }
.menu a:nth-child(2) { --nav-color: #168eb4; }
.menu a:nth-child(3) { --nav-color: #166e94; }
.menu a:nth-child(4) { --nav-color: #554e9b; }
.menu a:nth-child(5) { --nav-color: #c2246e; }
.menu a:nth-child(6) { --nav-color: #25bef4; }
.menu a:hover:not(.active) {
    color: var(--nav-color) !important;
    outline: 1px solid var(--nav-color) !important;
    background: color-mix(in srgb, var(--nav-color) 12%, transparent) !important;
    border-radius: 18px;
    padding: 6px 15px;
    transform: translateY(-2px);
}
.menu a.active {
    color: var(--nav-color) !important;
    outline-color: var(--nav-color) !important;
    background: color-mix(in srgb, var(--nav-color) 14%, transparent) !important;
}

.btn,
.btn-client,
.bss-btn,
.btn-violet-small,
.white-outline,
.fill-violet,
.fill-cyan {
    transition: color .2s, background .2s, border-color .2s, transform .18s, box-shadow .2s;
}
.btn,
.btn-client,
.bss-btn { --btn-color: #25bef4; }

.service-card-cyan .btn,
.service-card-cyan .btn-client,
.service-card-cyan .bss-btn { --btn-color: #c2246e; }

.service-card-teal .btn,
.service-card-teal .btn-client,
.service-card-teal-dark .btn,
.service-card-teal-dark .btn-client { --btn-color: #fff; }

.service-card-violet .btn,
.service-card-violet .btn-client,
.split .btn,
.split-confidence .btn,
.company-mission .btn,
.company-trust .btn,
.clients-section-magenta .btn,
.clients-section-magenta .btn-client,
.clients-section-blue .btn,
.clients-section-blue .btn-client { --btn-color: #fff; }

.service-card-light .btn,
.service-card-light .btn-client,
.plans-content .btn,
.company-difference-copy .btn,
.clients-vip .btn-client { --btn-color: #554e9b; }

.clients-hero .btn-client,
.company-hero .btn,
.services-hero .btn,
.hero .btn,
.contact-hero .bss-btn { --btn-color: #25bef4; }
.btn:not(.fill):not(.violet):hover,
.btn-client:hover,
.white-outline:hover,
.bss-btn:not(.fill-cyan):not(.fill-violet):hover {
    color: var(--btn-color) !important;
    border-color: var(--btn-color) !important;
    background: color-mix(in srgb, var(--btn-color) 10%, transparent) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--btn-color) 28%, transparent);
}
.btn.fill:hover,
.fill-violet:hover,
.btn-violet-small:hover,
.fill-cyan:hover {
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.15);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

.whatsapp {
    animation: bss-wa-in 0.6s cubic-bezier(.22,1,.36,1) 1.5s both,
               bss-wa-float 3s ease-in-out 2.1s infinite;
}
@keyframes bss-wa-in {
    from { opacity: 0; transform: translateX(60px) scale(.7); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes bss-wa-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-6px) scale(1.04); }
}
.faq-item.bss-in,
.faq-filter.bss-in {
    animation: bss-fadein 0.4s ease both;
}
@keyframes bss-fadein {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.faq-page .faq-filter { transition: color .2s, border-top-color .2s, background .2s, transform .18s; }
.faq-page .faq-filter[data-filter="all"]         { --f-color: #25bef4; } 
.faq-page .faq-filter[data-filter="faceid"]      { --f-color: #168eb4; } 
.faq-page .faq-filter[data-filter="integra"]     { --f-color: #554e9b; } 
.faq-page .faq-filter[data-filter="app"]         { --f-color: #25bef4; } 
.faq-page .faq-filter[data-filter="camaras"]     { --f-color: #168eb4; } 
.faq-page .faq-filter[data-filter="accesos"]     { --f-color: #554e9b; } 
.faq-page .faq-filter[data-filter="alertas"]     { --f-color: #c2246e; } 
.faq-page .faq-filter[data-filter="instalacion"] { --f-color: #166e94; } 
.faq-page .faq-filter[data-filter="soporte"]     { --f-color: #166e94; } 
.faq-page .faq-filter:hover {
    color: var(--f-color) !important;
    border-top-color: var(--f-color) !important;
    background: color-mix(in srgb, var(--f-color) 8%, transparent) !important;
    transform: translateY(-2px);
}
.faq-page .faq-filter.active {
    color: var(--f-color) !important;
    border-top-color: var(--f-color) !important;
    background: color-mix(in srgb, var(--f-color) 10%, transparent) !important;
    animation: bss-btn-pop 0.35s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes bss-btn-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.12) translateY(-3px); }
    55%  { transform: scale(0.95) translateY(1px); }
    75%  { transform: scale(1.05) translateY(-1px); }
    100% { transform: scale(1) translateY(0); }
}