/* Estilos compartilhados pelas páginas comerciais (Início, Como Funciona, Vantagens, Para Quem É). */

.nav-links a.active {
    font-weight: 800;
    color: var(--deep-green);
}

.nav-links a.active::after {
    width: 100%;
}

.nav-actions .link-client {
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(9, 100, 94, 0.85);
    transition: color 0.3s ease;
}

.nav-actions .link-client:hover {
    color: var(--deep-green);
}

.nav-menu-mobile-links a:hover,
.nav-menu-mobile-links a.active {
    color: var(--deep-green);
}

.nav-menu-mobile-links a.active {
    font-weight: 800;
}

.eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--teal-green);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.85);
    }
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 32px;
    background-color: transparent;
    color: var(--deep-green);
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    border: 1px solid rgba(0, 51, 51, 0.25);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
}

.btn-secondary:hover {
    background-color: var(--deep-green);
    color: var(--off-white);
    border-color: var(--deep-green);
    transform: translateY(-2px);
}